/* -------------------------------------
    MEDIA QUERIES
   ------------------------------------- */

 /* 4K DESKTOP
 ===========================================================================*/
 @media (min-width: 1680px) and (max-width: 2700px) {

  .monologue-bg {
    padding: 10% 0% 7.5% 0%;
  }

   /* Project Page */

  .project-description h1 {
    font-size: 4.5em;
  }

  .project-description h2 {
    font-size: 44px;
  }

  .project-cover h3, .project-cover p {
    font-size: 16px;
  }

  .ps-title__col-2 h2, .ps-title__col-3 h2, .ps_f-text h2 {
    font-size: 40px;
    margin: 1% 0 1em 0;
  }

  .project-bg p, .project-bg h3 {
    font-size: 18px;
  } 

  .pc-grid .img-parent {
    height: 40vh;
  }

 }

 /* 4K DESKTOP
 ===========================================================================*/
 @media (min-width: 1441px) and (max-width: 2700px) {

   #teal {
     /* width: 163vmin; */
     width: 1342px;
   }

   .card-container, .monologue-bg {
     width: 1065px;
   }

   .single-card {
    width: 533px;
   }

   .logo h1 {
     font-size: 165.6px;
   }

   p, h4, h3, td {
     font-size: 18px;
   }

   .profile {
     width: 80%;
   }

   #about h4, #about h3, #about td {
     font-size: 18px;
   }

  .outlink {
    height: 14px;
  }

  /* Project Page */

  /* .project-description, .project-section, .project-section__flex {
    width: 80%;
  }

  .ps_f-text {
    margin-left: 0;
    margin-right: 0;
  } */

  .ps-title__col-2 h2, .ps-title__col-3 h2, .ps_f-text h2 {
    font-size: 36px;
    margin: 1% 0 1em 0;
  }

  .project-bg p, .project-bg h3 {
    font-size: 18px;
  } 

 }

 /* 15" DESKTOP
 ===========================================================================*/
 @media (min-width: 1025px) and (max-width: 1440px) {

   .profile {
     width: 90%;
   }

   /* Project Page */

  .ps-title__col-2 h2, .ps-title__col-3 h2, .ps_f-text h2 {
    font-size: 28px;
    margin: 1% 2em 2em 0;
  }

  .project-bg p, .project-bg h3 {
    font-size: 16px;
  } 

 }

 @media (min-width: 1025px) and (max-width: 1270px) {
  .portrait {
   top: -65px;
   left: 79%;
  }
}

 /* 13" DESKTOP
 ===========================================================================*/
 @media (min-width: 769px) and (max-width: 1024px) {

   /* Width of Content */

   .card-container {
     width: 77%;
   }

   .monologue-bg {
     width: 93%;
   }

   /* Nav & Header */

   .main-nav {
     width: 96vw;
     margin: 0 2vw;
   }

   #nav-logo {
    width: 58%;
   }

   .profile {
     height: 90vh;
   }

   /* Work */

   #work {
     padding-top: 5em;
   }

   .card-container {
     flex-wrap: wrap;
     margin: 0 auto;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
   }

   #card-item-1, #card-item-2, #card-item-3, #card-item-4, #card-item-5 {
    padding: 5% 12% 9% 12%;
    margin-top: 1em;
    margin-bottom: 4em;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
   }

   .img-parent {
     margin-top: 31px;
     margin-bottom: 40px;
   }

   /* About */

   .portrait {
     width: 36%;
     top: -60px;
     left: 78%;
   }

   .monologue-bg {
      padding: 20% 0% 13% 0%;
   }

   .monologue h3, .monologue h4, .monologue p {
     font-size: 19px;
   }

   h3, h4, td {
     font-size: 16px;
   }

   .contact table {
     width: 515px;
   }

   .credits-clients, .credits-events {
     width: 65%;
   }

   .credits-spacing table {
     width: 540px;
   }

   .outlink {
     height: 14px;
     padding-right: 1px;
   }

   .people {
     font-size: 2.7em;
   }

   .br-footer-m {
     display: block;
   }

   .footer-2 {
     flex: 0;
   }

   /* Project Page */
  
  .pi-flex {
    flex-flow: column;
  }

  .pi-2-col {
    width: 100%;
  }

  .pi-flex video {
    width: 99.9%;
    padding-top: 10px;
  }
 }

 @media (min-width: 768px) and (max-width: 860px) {
  .portrait {
    width: 40%;
    top: -56px;
    left: 76%;
  }
}

 /* TABLET
 ===========================================================================*/
 @media (min-width: 601px) and (max-width: 768px) {

   /* Nav & Header */

   #nav-logo {
     width: 58%;
   }

   .main-nav {
     width: 98%;
     margin: 0 1%;
   }

   .description {
     width: 90%;
   }

   .description h3 {
     font-size: 2vw;
   }

   .description h2 {
     font-size: 2.5vw;
   }

   .profile {
     height: 90vh;
   }

   /* Work */

   #teal {
     padding-bottom: 1em;
   }

   #work {
     padding-top: 5em;
   }

   .card-container {
     width: 74%;
     flex-wrap: wrap;
     margin: 0 auto;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
   }

   #card-item-1, #card-item-2, #card-item-3, #card-item-4, #card-item-5 {
    padding: 5% 12% 9% 12%;
    margin-top: 1em;
    margin-bottom: 4em;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
   }

   .img-parent {
     margin-top: 6%;
     margin-bottom: 40px;
   }

   /* About */

   #about {
     padding-top: 10em;
   }

    .portrait {
      width: 45%;
      top: -221px;
      left: 70%;
    }

   .monologue-bg {
     padding: 20% 0% 13% 0%;
     width: 93%;
   }

   .monologue h3, .monologue h4, .monologue p {
     font-size: 18px;
   }

   h3, h4, td {
     font-size: 16px;
   }

   .contact table, .credits-clients, .credits-events {
     width: 515px;
   }

   .credits-spacing table {
     width: 534px;
   }

   .outlink {
     height: 14px;
     padding-right: 1px;
   }

   .people {
     font-size: 2.2em;
     width: 95%;
   }

   .web {
    display: none;
  }

  .mobile {
    display: block;
  }

   /* Footer */

   footer {
     flex-direction: column;
     margin: 0 auto;
     width: 93%;
     text-align: center;
   }

   .footer-1 {
     order: 1;
   }

   .footer-3 {
     order: 2;
     text-align: center;
   }

   /* Project Page */

   .pc-grid {
    display: inline-block;
    margin: auto 0px;
    overflow: auto;
    white-space: nowrap;
  }

  .pc-grid .img-parent {
    height: 11em;
    width: 62%;
    margin: 0px 0px 20px 0px;
  }

  .project-credits {
    flex-wrap: wrap;
   }

 .project-credits .pc-1  {
   flex: 1 1 50%;
 }

 .ps-title__col-2, .ps-title__col-3, .ps-text__col-3 {
    width: 50%;
    position: inherit;
 }

  .pc-space {
   padding-top: 15px;
  }

  .pi-flex {
    flex-flow: column;
    margin: 9px 0 10px 0;
  }

  .pi-2-col {
    width: 100%;
  }

  .pi-flex video {
    width: 100%;
    padding-top: 13px;
  }

  /* ASICS */

  .ps-gallery__here-1 #asics-iterations {
    display: inherit;
    height: auto;
    width: 202%;
  }

  /* Here */

  #here-jm-margin {
    margin-left: 0;
  }

  .ps-gallery__here-1 {
    display: inline-block;
    padding-top: 3em;
    margin: 0px;
    overflow: auto;
    white-space: nowrap;
    width: 100%;
  }

  .ps-gallery__here-1 img, .ps-gallery__here-1 video {
    width: 65%;
    height: auto;
    margin: 0;
  }

  .ps-gallery__here-2 {
    margin: auto;
    width: 100%;
  }

  .ps-gallery__here-2 img, .ps-gallery__here-2 video  {
    width: 65%;
    height: auto;
    /* margin: 0; */
  }

  .insights {
    position: sticky;
    left: 0;
  }

  .width-100 {
    width: 100%;
  }

  /* Facebook */

  .project-section__flex {
    display: block;
  }

  .ps_f-text, .ps_f-media {
    width: 94%;
    margin: 1em auto;
  }

  .ps_f-media video {
    height: auto;
  }

  .ps-gallery__fb {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    margin: 1em 0;
  }

  .ps-gallery__fb img {
    width: 49%;
    /* width: 33%; */
    height: auto;
    margin: 0;
  }

  #facebook-img {
    height: auto;
  }
 }

 @media (min-width: 601px) and (max-width: 660px) {
  .portrait {
    width: 50%;
    top: -202px;
    left: 60%;
  }
}
 

/* MOBILE - LARGE
===========================================================================*/
@media (max-width: 600px) {

  /* Nav & Header */

  #nav-logo {
    width: 44%;
  }

  .main-nav {
    width: 100%;
    padding: 2% 6% 0 6%;
    margin: 0;
    /* mix-blend-mode: difference; */
  }

  .logo {
    margin-bottom: 4em;
  }

  .logo h1 {
    font-size: 12.9vw;
  }

  .description h3 {
    font-size: 0.7em;
  }

  .description h2 {
    font-size: 0.8em;
  }

  .profile {
    background-image: url("images/ap-mobile.png");
  }

  /* Work */

  #teal {
    width: 100%;
    padding-bottom: 0;
    margin-top: 16%;
  }

  #work {
    padding-top: 3em;
    padding-bottom: 1em;
  }
  
  .work-3 {
    background-position-x: 15%;
  }

  #stamp-1, #stamp-2 {
    top: 2%;
  }
  .card-container {
    width: 87%;
    flex-wrap: wrap;
    margin: 0 auto;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  #card-item-1, #card-item-2, #card-item-3, #card-item-4, #card-item-5 {
   padding: 4% 6% 8% 6%;
   margin-top: 1em;
   margin-bottom: 4em;
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 2px;
  }

  .img-parent {
    margin-top: 16px;
    margin-bottom: 30px;
    height: 310px;
  }

  .project-title p {
    font-size: 16px;
  }

  /* About */

  #about {
    padding-top: 18em;
  }

  .portrait {
    width: 68%;
    top: -307px;
    left: 40%;
  }

  .monologue-bg {
    padding: 30% 0% 10% 0%;
    width: 100%;
  }

  .monologue {
    width: 88%;
  }

  .indent {
    text-indent: 40px;
  }

  .highlight, b {
    text-shadow: 0 0px 0.6px #180B0B;
  }

  .monologue h3, .monologue h4, .monologue p {
    font-size: 18px;
  }

  .credits h3 {
    font-size: 14px;
  }

  h4, td {
    font-size: 14px;
  }

  .credits-spacing {
    margin: 5em auto;
  }

  .credits-title {
    width: 65%;
  }

  .contact table {
    width: 77%;
  }

  .contact td {
    margin: 0;
    width: 0;
  }

  .credits-clients {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
  }

  .credits-clients h4 {
    margin: 2%;
  }

  .credits-events {
    width: 80%;
  }

  .credits-spacing table {
    width: 87%;
  }

  .credits-spacing table td {
    padding: 9px 1px;
  }

  /* table br {
    display: block;
  } */

  tr {
    height: 1em;
  }

  td {
    padding: 9px 17px;
  }

  .outlink {
    /* display: none; */
    height: 12px;
    padding-right: 1px;
  }

  /* #about .link {
    text-decoration: underline;
  } */

  .credits-spacing-end {
    margin: 5em auto 13vh auto;
  }

  .people {
    font-size: 2.2em;
    width: 95%;
  }

  .web {
    display: none;
  }

  .mobile {
    display: block;
  }

  /* Footer */

  footer {
    flex-direction: column;
    margin: 0 auto;
    width: 93%;
    text-align: center;
  }

  footer p {
    font-size: 13px;
  }

  .footer-1 {
    order: 1;
  }

  .footer-3 {
    order: 2;
    text-align: center;
  }

  /* .br-footer-s {
    display: block;
  } */

  /* Project Page */

  /* .project-description {
    width: 88%;
  } */

  .pc-grid {
    display: inline-block;
    margin: auto 0px;
    overflow: auto;
    white-space: nowrap;
  }

  .pc-grid .img-parent {
    height: 11em;
    width: 62%;
    margin: 0px 0px 20px 0px;
  }

  .pc-grid__img {
    object-position: left;
  }

  .project-description h1 {
    font-size: 3em;
  }

  .project-description h2 {
    font-size: 30px;
  }

 .project-credits {
    flex-wrap: wrap;
    padding: 2em 0;
 }

 .project-credits .pc-1  {
   flex: 1 1 50%;
 }

 .pc-mobile {
   display: block;
   padding-top: 15px;
 }

  .pc-space {
    padding-top: 15px;
  }

  .project-bg p, .project-bg h3 {
    font-size: 16px;
  }

  .ps-title__col-2, .ps-title__col-3, .ps-text__col-3 {
    width: 100%;
    position: inherit;
  }

  .pi-flex, .pi-flex-50 {
    flex-flow: column;
    margin: 9px 0 10px 0;
  }

  .pi-2-col, .pi-50 {
    width: 100%;
    margin: 9px 0 10px 0;
  }

  .pi-flex video, .pi-flex-50 video {
    width: 100%;
    padding-top: 13px;
  }

  /* ASICS */

  .ps-gallery__here-1 #asics-iterations {
    display: inherit;
    height: auto;
    width: 265%;
  }

  /* Here */

  #here-jm-margin {
    margin-left: auto;
  }  

  .ps-gallery__here-1 {
    display: inline-block;
    margin: 0px;
    padding-top: 3em;
    overflow: auto;
    white-space: nowrap;
    width: 100%;
  }

  .ps-gallery__here-1 img, .ps-gallery__here-1 video {
    width: 82%;
    height: auto;
    margin: 0;
  }

  .ps-gallery__here-2 {
    margin: auto;
    width: 100%;
  }

  .ps-gallery__here-2 img, .ps-gallery__here-2 video  {
    width: 80%;
    height: auto;
    /* margin: 0; */
  }

  /* Facebook */

  .project-section__flex {
    display: block;
  }

  .ps_f-text, .ps_f-media {
    width: 94%;
    margin: 1em auto;
  }

  .ps_f-media video {
    height: auto;
  }

  .ps-gallery__fb {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    margin: 1em 0;
  }

  .ps-gallery__fb img {
    width: 49%;
    /* width: 33%; */
    height: auto;
    margin: 0;
  }

  #facebook-img {
    height: auto;
  }
}

@media (min-width: 375px) and (max-width: 425px) {
  .portrait {
    width: 85%;
    top: -330px;
    left: 24%;
  }
}

/* MOBILE - SMALL
===========================================================================*/
@media (min-width: 99px) and (max-width: 375px) {

  .img-child {
    height: 310px;
  }
  
  .portrait {
    width: 85%;
    top: -301px;
    left: 21%;
  }
}