/* mobile first */

.project-test-img {
  width: 100%;
}



.footer-desktop {
  display: none;
}

.footer-mobile {
  display: block;
}



.gabe-bar {
  display: none;
}

.gabe-bar-mobile {
  display: block;
}

.home-banner-gs {
  font-family: 'OktaNeue-Bold', sans-serif;
  font-size: 30px;
  margin: 20px;
}

.home-banner-header {
  font-family: 'OktaNeue-Regular', sans-serif;
  font-size: 20px;
  margin: 20px;
}

.home-header-text-mobile {
  display: block;
}

.home-header-text-desktop {
  display: none;
}

.writing-item {
  width: 320px;
  height: 424px;
}

.project-slide {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90% !important;
}

.project-slide-video {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90% !important;
  height: 200px;
}

.project-slide-video2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90% !important;
  height: 200px;
}

.project-slide-frontpage {
  display: block;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 90% !important;
  border-radius: 15px 15px 0px 0px !important;
}

.project-slide-lastpage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  width: 90% !important;
  border-radius: 0px 0px 15px 15px !important;

}

.blog-main-title {
  font-size: 30px;
}

.blog-main-title-small {
  font-size: 24px;
}


.blog-badge {
  display: flex;
  float: left;
}

.blog-headshot {
  display: none;
}

.blog-headshot {
  border-radius: 50%;
  width: 75px;
}

#topOfPageBtn {
  display: none;
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 136px;
  right: 30px;
  z-index: 99;
  font-size: 22px;
  border-radius: 65px;
  border: none;
  outline: none;
  background-color: rgb(205, 205, 205);

  color: white;
  cursor: pointer;
  padding: 15px;
  transition: 0.3s;

  opacity: .7;
}

.projects-widget-title {
  font-family: 'OktaNeue-Regular', sans-serif;
  font-size: 30px;

}

.about-headshot {
  width: 290px;

}

.experience-paragraph {
  width: 100%;
}

/* iPhone 5  */
@media (min-width: 320px) {

  .portfolio-item {
    width: 300px;
    height: 450px;
  }

  .writing-item {
    width: 300px;
    height: 412px;
  }

  .subscribebox {

    width: 300px;
    height: 300px;
    justify-content: space-between;
    /* just cont - sepearet eas miuch as possible within parent container */

    /* border: 1px solid rgb(220, 220, 220); */


  }

  #project-banner-goldsgym-small {
    background: url(images/project-banner-goldsgym-small.png) center no-repeat;

    height: 386px;
    background-size: cover;
    background-image: cover;
    position: relative;

  }

  #project-banner-foxtail {
    background: url(images/project-banner-foxtail-small.png) center no-repeat;
    height: 386px;
    background-size: cover;
    background-image: cover;
    position: relative;

  }



}

.writing-card-title-small {
  font-size: 16px;
  font-family: 'OktaNeue-Bold';
}


/* iPhone 6/7/8/SE */
@media (min-width: 375px) {

  .portfolio-item {
    width: 326px;
    height: 460px;
  }

  .writing-item {
    width: 346px;
    height: 400px;
  }

  .about-headshot {
    width: 340px;
  
  }

 

  .subscribebox {

    width: 326px;
    height: 300px;
    justify-content: space-between;
    /* just cont - sepearet eas miuch as possible within parent container */

    /* border: 1px solid rgb(220, 220, 220); */


  }

  .timeline-link {
    display: none;
  }

  .timeline-link-mobile {
    display: block;
  }

  .home-banner-header {
    font-size: 26px;
  }

}


.gabe-text-logo {
  width: 140px;
}

.blog-main-title {
  font-size: 42px;
}



/* --------- SMALL --------- */
@media (min-width: 576px) {

  /* .home-banner-header {
     font-size: 30px !important;
   } */
  .gabe-text-logo {
    width: 160px;
  }

  .footer-desktop {
    display: block;
  }
  
  .footer-mobile {
    display: none;
  }
  .portfolio-item {
    width: 400px;
    height: 500px;
  }

  .writing-item {
    width: 400px;
    height: 440px;
  }

  .blog-headshot {
    display: block;
  }



  .subscribebox {

    width: 400px;
    height: 300px;
    justify-content: space-between;
    /* just cont - sepearet eas miuch as possible within parent container */

    /* border: 1px solid rgb(220, 220, 220); */


  }

  .container-blog {
    max-width: 540px;
  }

  .project-test-img {
    width: 100%;
  }

  .gabe-icon img {
    height: 36px;
  }

  .gabe-icon2 img {
    height: 32px;
  }

  .home-banner-header {
    font-family: 'OktaNeue-Regular', sans-serif;
    font-size: 30px;
  }

  .home-banner-gs {
    font-family: 'OktaNeue-Bold', sans-serif;
    font-size: 48px;
  }

  .writing-card-title-small {
    font-size: 16px;
    font-family: 'OktaNeue-Bold';
  }

  .project-slide-video {

    height: 300px;
  }

  .projects-widget-title {
    font-family: 'OktaNeue-Regular', sans-serif;
    font-size: 30px;
  
  }

}

/* --------- MEDIUM --------- */
@media (min-width: 768px) {
  .gabe-bar {
    display: block;
  }

  .gabe-bar-mobile {
    display: none;
  }

  /* .gabe-text-logo {
      display: flex !important;
    } */
  .gabe-text-logo {
    width: 170px;
  }


  .home-banner-header {
    font-family: 'OktaNeue-Regular', sans-serif;
    font-size: 32px;
  }

  .home-banner-gs {
    font-family: 'OktaNeue-Bold', sans-serif;
    font-size: 62px;
  }

  .portfolio-item {
    background-color: white;
    width: 700px;
    height: 270px;
    display: flex;
    justify-content: space-between;
    /* just cont - sepearet eas miuch as possible within parent container */
    box-shadow: 1px 0px 70px -20px rgba(0, 0, 0, 0.37);
    /* border: 1px solid rgb(220, 220, 220); */
    border-radius: 10px;
    overflow: hidden;
  }

  .project-slide {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 65% !important;
  }

  .project-slide-video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 65% !important;
    height: 320px !important;

  }

  .project-slide-video2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75% !important;
    height: 400px;
  }

  .project-slide-frontpage {
    display: block;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 65% !important;
    border-radius: 25px 25px 0px 0px !important;
  }

  .project-slide-lastpage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    width: 65% !important;
    border-radius: 0px 0px 25px 25px !important;

  }

  .writing-item {
    background-color: white;
    width: 700px;
    height: 240px;
    display: flex;
    justify-content: space-between;
    /* just cont - sepearet eas miuch as possible within parent container */
    box-shadow: 1px 0px 70px -20px rgba(0, 0, 0, 0.37);
    /* border: 1px solid rgb(220, 220, 220); */
    border-radius: 10px;
    overflow: hidden;
  }

  .writing-card-title {
    font-size: 20px;
  }

  .blog-badge {
    display: flex;
    float: right;
  }

  .blog-main-title {
    font-size: 28px;
  }

  .subscribebox {

    width: 700px;
    height: 270px;
    justify-content: space-between;
    /* just cont - sepearet eas miuch as possible within parent container */

    /* border: 1px solid rgb(220, 220, 220); */

  }

  #project-banner-goldsgym-small {
    background: url(images/project-banner-goldsgym-small2.png) center no-repeat;
    height: 386px;
    background-size: cover;
    background-image: cover;
    position: relative;

  }

  .project-banner-cara {
    background: url(images/project-banner-mekit.png !important) center no-repeat;
    height: 386px;
    background-size: cover;
    background-image: cover;
    position: relative;
  }


  #project-banner-foxtail {
    background: url(images/project-banner-foxtail-big.png) center no-repeat;
    height: 386px;
    background-size: cover;
    background-image: cover;
    position: relative;

  }

  .img-wrapper {
    width: 50%;
    /* height: 150px; */
    /* background-size: cover; */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: inherit;
    flex-shrink: 0;
  }



  .img-wrapper img {
    height: 100%;
    width: initial;
  }

  .timeline-link {
    display: block;
    width: 470px;
    margin-top: 42px;
  }

  .timeline-link-mobile {
    display: none;
  }

 
  .container-blog {
    max-width: 540px;
  }


  .project-img {
    width: 100%;
  }

  .project-test-img {
    width: 300px;
  }

  .blog-main-title-small {
    font-size: 36px;
  }

  .experience-paragraph {
    width: 70%;
  }
}

/* Breakpoint for Los Angeles in Header */
@media (min-width: 894px) {
  .home-header-text-mobile {
    display: none;
  }

  .home-header-text-desktop {
    display: block;
  }

  #topOfPageBtn {

    bottom: 200px;
    right: 30px;
    opacity: 0.95;

  }
}

/* --------- LARGE --------- */
@media (min-width: 992px) {
  .gabe-text-logo {
    width: 184px;
  }

  .portfolio-item {
    width: 900px;
    height: 270px;
  }

  .project-slide-video {
    height: 480px !important;
  }

  .project-slide-video2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90% !important;
    height: 520px;
  }
  
  .blog-main-title {
    font-size: 32px;
  }
  .writing-item {
    width: 900px;
    height: 270px;
  }

  .writing-card-title {
    font-size: 24px;
  }

  .writing-card-title-small {
    font-size: 20px;
    font-family: 'OktaNeue-Bold';
  }

  .subscribebox {

    width: 700px;
    height: 270px;
    justify-content: space-between;
    /* just cont - sepearet eas miuch as possible within parent container */

    /* border: 1px solid rgb(220, 220, 220); */
  }


  .container-blog {
    max-width: 720px;
  }

  .blog-main-title-small {
    font-size: 42px;
  }

}

/* --------- EXTRA LARGE --------- */
@media (min-width: 1200px) {


  .project-slide-video {
    height: 680px !important;
  }
}