/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* home styles */
@media only screen and (max-width: 1000px) {
   html {
      font-size: calc(var(--vh, 1vh) * 1.7);
      margin: 0;
      padding: 0;
   }



   .hideElement {
      display: none;
   }

   .home-container {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   .bg-home {
      height:100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   .nav-button-h {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      height: 20vh;
      height: calc(var(--vh, 1vh) * 20);
      width: 95vw;
      margin: auto;
      top: 40%;
      z-index: 100;
      font-family: Helvetica, sans-serif;
      font-size: 1.5rem;
   }

   #logo-center {
      display: none;
   }

   .mobile-logo {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      font-size: 2rem;
      font-family: Helvetica, sans-serif;
      font-weight: bold;
      width: 1.5rem;

   }

   #projbtn {
      -ms-flex-item-align: center;
          -ms-grid-row-align: center;
          align-self: center;
   }

   .nav-button-v {
      font-size: 1.5rem;
      height: 90vh;
      height: calc(var(--vh, 1vh) * 90);
   }

   .openPress {
      -webkit-transform: translate3d(100vw, 0, 0);
      transform: translate3d(100vw, 0, 0);
      -webkit-transition: -webkit-transform 1s;
      transition: -webkit-transform 1s;
      -o-transition: transform 1s;
      transition: transform 1s;
      transition: transform 1s, -webkit-transform 1s;
   }

   .openAbout {
      -webkit-transform: translate3d(-100vw, 0, 0);
      transform: translate3d(-100vw, 0, 0);
      -webkit-transition: -webkit-transform 1s;
      transition: -webkit-transform 1s;
      -o-transition: transform 1s;
      transition: transform 1s;
      transition: transform 1s, -webkit-transform 1s;
   }

   /* press page */

   .press-container {
      width: 100vw;
      height:100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   .img-grid {
      margin-top: 2vh;
      margin-left: -30vw;
      padding: 1rem;
      height: 93vh;
      height: calc(var(--vh, 1vh) * 93);
      -webkit-overflow-scrolling: touch;
   }

   .press-info {
      width: 70vw;
      height: 47vh;
      height: calc(var(--vh, 1vh) * 47);
   }

   .contact-wrapper {
      height: 20vh;
      height: calc(var(--vh, 1vh) * 20);
   }

   .back_home {
      display: block;
      position: fixed;
      font-family: Helvetica, sans-serif;
      font-size: 1.5rem;
      color: black;
      background-color: white;
      text-transform: uppercase;
      font-weight: bold;
   }

   .press__mobile {
      left:173vw;
      margin-top: 90vh;
      margin-top: calc(var(--vh, 1vh) * 90);
   }

   .face.back a {
      margin: 5rem 1rem 5rem 2rem;
   }


   .fixed-wrapper {
      left: 170vw;
      height: 20vh;
      height: calc(var(--vh, 1vh) * 20);
   }


   .contactbtn {
      float: left;
      font-size: 1.5rem;
   }


   .contact-wrapper ul {
      background-color: black;
      color: rgba(255, 255, 255, 0.884);
      margin-top: 5vh;
      margin-top: calc(var(--vh, 1vh) * 5);
      width: auto;
      height: 18vh;
      height: calc(var(--vh, 1vh) * 18);
      margin-left: -35vw;
      text-align: right;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      padding: 1rem;
      pointer-events: none;
   }

   .contact-wrapper a {
      color: black;
      background: white;
      padding: 0px 5px 0px 5px;
   }

   /* about page */
   .about-container {
      width: 100vw;
      left: -100vw;
      height: calc(var(--vh, 1vh) * 100);

   }

   .crossfade {
      display: none;
   }

   .textSection {
      max-width: 100vw;
      height: 70vh;
      height: calc(var(--vh, 1vh) * 70);
      top: 15vh;
      top: calc(var(--vh, 1vh) * 15);
      left: 0;
   }

   .about {
      padding: 2rem;
      color: black;
   }

   .eng {
      font-size: 1.05rem;
      line-height: 1.3;
      text-align: center;
   }

   .mandarin {
      font-size: 1.1rem;
      line-height: 1.5;
      text-align: center;
   }

   .langChange {
      top: 89vh;
      top: calc(var(--vh, 1vh) * 89);
      left: 9vw;
   }

   .stockist {
      left: 65vw;
      top: 5vh;
      height: 10vh;
      top: calc(var(--vh, 1vh) * 5);
      height: calc(var(--vh, 1vh) * 10);
   }

   .stockistbtn {
      color: black;

   }

   .stockist ul {
      width: 40vw;
      height: 10vw;
      left: -10vw;
      white-space: nowrap;

      padding: 0;
      margin: 0;
      text-align: center;
      margin-top: 1rem;
   }

   .stockist p {
      color: white;
      margin: 0;
      background-color: black;
      padding: 0.4rem;
      /* padding-right: 1rem; */
   }

   .contact-a {
      top: 5vh;
      top: calc(var(--vh, 1vh) * 5);
      height: 10vh;
      height: calc(var(--vh, 1vh) * 10);
   }

   .contact-a ul {
      background-color: black;
      color: rgba(255, 255, 255, 0.884);
      margin-top: 3vh;
      margin-top: calc(var(--vh, 1vh) * 5);
      width: auto;
      height: 18vh;
      height: calc(var(--vh, 1vh) * 18);
      margin-left: 0;
      text-align: left;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      padding: 1.2rem 1.1rem;
      pointer-events: none;
   }

   .contact-a ul>li:nth-child(3) {
      padding-top: 1rem;
   }
   .contactbtn-a {
      color: black;
      margin-left: 1rem;
   }

   .marginTop {
      margin-top: 1.5rem;
   }

   .contact-a a {
      padding: 0px 5px 0px 5px;
      color: black;
      background: white;
   }

   .about__mobile {
      margin-left: 75vw;
      margin-top: 20vh;
      margin-top: calc(var(--vh, 1vh) * 20);
   }

   /* projects page */

   .projects-container nav {
      width: 86vw;
      height: 20vh;
      height: calc(var(--vh, 1vh) * 20);
      margin-top: 6vh;
      margin-top: calc(var(--vh, 1vh) * 6);
   }

   .projects-container nav a {
      font-size: 1.5rem;
      margin-bottom: 2rem;
      white-space: nowrap;
   }

   .proj__nav {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 50vw;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      margin-top: 5vh;
      margin-top: calc(var(--vh, 1vh) * 5);
   }

   .proj__back {
      margin-top: -15vh;
      margin-top: calc(var(--vh, 1vh) * -16);
   }

   .projects-main {
      height: calc(var(--vh, 1vh) * 100);
   }

   #archiveFilms {
      height: calc(var(--vh, 1vh) * 100);
   }

   .vid-nav {
      height: calc(var(--vh, 1vh) * 5);
   }

   .control-project {
      display: none;
   }

   .carousel {
      width: 95%;
      height: 40vh;
      height: calc(var(--vh, 1vh) * 40);
      margin-top: -15rem;
   }

   .carousel__button {
      top: 30%;
   }

   .carousel__track-container {
      margin-top: 20vh;
      margin-top: calc(var(--vh, 1vh) * 20);
   }

   .carousel__button--left {
      left: 25vw;
   }

   .carousel__button--right {
      left: 55vw;
   }

   .carousel__slide-text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding: 1rem;
   }

   #soundDY {
      min-height:100vh;
      min-height: calc(var(--vh, 1vh) * 100);
   }

   .container__sound {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      margin-top: 35vh;
      margin-top: calc(var(--vh, 1vh) * 35);
      height: 70vh;
      height: calc(var(--vh, 1vh) * 70);
      width: 100%;
   }


   .container__audio {
      width: 72vw;
      height: 20vh;
      height: calc(var(--vh, 1vh) * 20);
   }

   audio {
      width: 55vw;
   }

   .container__header {
      font-size: 1.1rem;
      font-weight: bold;
   }

   .container__credit {

      margin-top: 3rem;
      width: 62vw;
      height: 60vh;
      height: calc(var(--vh, 1vh) * 60);
      margin-bottom: 8vh;
      margin-bottom: calc(var(--vh, 1vh) * 8);
      overflow: scroll;
      font-size: 1.2rem;
   }

   #soundDS {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   #soundDS .container__credit {
      width: 62vw;
   }

   /* collections page */
   .col {
      overflow-y: hidden;
      overflow-x: hidden;
   }

   .nav-container {
      top: 90vh;
      margin-top: 1vh;
      margin-top: calc(var(--vh, 1vh) * 1);
      z-index: 5;

   }

   .control {
      left: 90vw;
      margin-top: 3vh;
      margin-top: calc(var(--vh, 1vh) * 3);
      white-space: nowrap;
   }

   .nav-bar,
   .info {
      display: none;
   }

   .user-border {
      border: 2px solid;
      padding: 4px;
   }

   .mobile__header-controls {
      display: block;
      /* z-index: 10 !important; */
   }

   .mobile__header-controls a {
      font-family: Helvetica, sans-serif;
      font-weight: bold;
      font-size: 1.5rem;
      text-decoration: none;
      color: white;
      text-transform: uppercase;
      -webkit-transition: color 1s;
      -o-transition: color 1s;
      transition: color 1s;
   }

   .mobile__more {
      font-size: 3rem;
      left: 1rem;
      font-weight: bold;
      color: white;

   }

   .mobile__process-nav {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: space-evenly;
          -ms-flex-pack: space-evenly;
              justify-content: space-evenly;
      height: 30vh;
      height: calc(var(--vh, 1vh) * 30);
      color: white;
      border: 2px solid white;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      -moz-transition: opacity 0.3s ease-in-out;
      -webkit-transition: opacity 0.3s ease-in-out;
      -ms-transition: opacity 0.3s ease-in-out;
      -o-transition: opacity 0.3s ease-in-out;
      z-index: 0;
      margin-top: 1rem;
      margin-left: 2rem;
   }

   .fadeMenu {
      opacity: 1;
   }

   .mobile__process-nav a {
      margin-left: 2rem;
      margin-right: 2rem;
   }

   .mobile__main-nav {

      display: -webkit-box;

      display: -ms-flexbox;

      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-pack: space-evenly;
          -ms-flex-pack: space-evenly;
              justify-content: space-evenly;
      height: 20vh;
      height: calc(var(--vh, 1vh) * 20);
      position: fixed;
      margin-left: 6vw;
      margin-bottom: 0;
      bottom: 3vh;
   }

   .mobile__main-nav a {
      color: white;
   }

   .info-back {
      position: absolute;
      margin-left: 80vw;
      top: 0vh;
 /*     margin-top: 35vh;
      margin-top: calc(var(--vh, 1vh) * 35);*/
      margin-bottom: 0;

   }

   .mobile__main {
      width: 100%;
      height: 100%;
      /* overflow: hidden; */
      height: calc(var(--vh, 1vh) * 100);

   }

   .tab-content {
      all: unset;
      width: 100% !important;
      overflow: hidden;
      z-index: -1;
      transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
   }

   #show {
      all: revert;
      width: 100%;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   .video-wrapper {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   #catwalk {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   #about {
      all: revert;
      width: 100%;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   .bgColor {
      background-color: white;
      border: 2px solid black;
   }

   .bgColorReverse {
      background-color: transparent;
      border: 2px solid white;
   }

   .about-text {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
   }

   .about-text p {
      padding: 1.5rem;
      width: 75vw;
      font-size: 1.3rem;
      text-align: left;
      text-indent: 10%;

   }

   .proj-header {
      width: 70vw;
      margin-left: 3em;
      display: inherit;
      /* margin-top: 2rem; */
   }

   .about-body {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      border: 2px solid black;
      height: 50vh;
      height: calc(var(--vh, 1vh) * 50);
      overflow: scroll;
      margin-top: 1rem;

   }


   #researchFilm {
      all: revert;
      width: 100%;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
   }

   #researchFilm-ba {

      width: 100%;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      background-color: white;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
   }

   .video-wrapper2 {

      width: 90vw;
      height: 35vh;
      height: calc(var(--vh, 1vh) * 45);
      margin-right: 1rem;
      padding: 0;
      margin-top: calc(var(--vh, 1vh) * -5);
   }

   .video-wrapper-ba {
      width: 80vw;
      height: 35vh;
      height: calc(var(--vh, 1vh) * 35);
      margin: 0;
      margin-top: 2.8rem;
   }

   .align {
      margin-top: -1.5rem;
   }
   
   #researchFilm-ba p,
   #researchFilm p {
      font-size: 1rem;
      font-family: Helvetica, sans-serif;
      font-style: italic;
      margin-bottom: 0rem;
      color: black;
   }

   #researchFilm p {
      padding-bottom: 1rem;
   }
   .credit {
      padding-top: 0.5rem;
   }

   .credit-ba {
      position: absolute;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin-left: 80vw;
      margin-top: -9vh;
      margin-top: calc(var(--vh, 1vh) * -9);
   }


   .credit-text {
      margin-left: -55vw;
      width: 67vw;
      background-color: white;
      margin-top: 0vh;
      margin-top: calc(var(--vh, 1vh) * 0);
      display: none;
   }

   .credtitBAMargin {
      margin-top: 10vh;
      margin-top: calc(var(--vh, 1vh) * 10);
   }

   .credit-text p {
      width: 60vw;
      color: black;

   }

   .credit-icon {
      padding: 0;
      margin: 1.5rem;
   }

   @media not all and (pointer: coarse) {

      .credit:hover .credit-text,
      .credit-ba:hover .credit-text {
         display: block;
      }

      .contact-a a:hover {
         color: white;
      }

      .menu-container:hover .menu {
         opacity: 1;
         pointer-events: all;
         -ms-transform: translateY(0);
         transform: translateY(0);
         -moz-transform: translateY(0);
         -webkit-transform: translateY(0);
         outline: none;
      }

      .stockist p:hover {
         background-color: black;
      }
   }

   #stills {
      width: 100%;
      height: 100%;
      height: calc(var(--vh, 1vh) * 100);
      overflow-x: scroll;
   }

   .stills {
      width: auto;
      height: 100%;
      -webkit-overflow-scrolling: touch;
      overflow: scroll;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;

   }

   .animateOnVisible {
      -webkit-animation-name: stillsCallToAction;
              animation-name: stillsCallToAction;
      -webkit-animation-duration: 1s;
              animation-duration: 1s;
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      -webkit-animation-delay: 1s;
              animation-delay: 1s;
      -webkit-animation-iteration-count: 1;
              animation-iteration-count: 1;
   }

   @-webkit-keyframes stillsCallToAction {
      0% {
         -webkit-transform: translateX(0);
                 transform: translateX(0);
      }

      50% {
         -webkit-transform: translateX(-30%);
                 transform: translateX(-30%);
      }

      100% {
         -webkit-transform: translateX(0);
                 transform: translateX(0);
      }
   }

   @keyframes stillsCallToAction {
      0% {
         -webkit-transform: translateX(0);
                 transform: translateX(0);
      }

      50% {
         -webkit-transform: translateX(-30%);
                 transform: translateX(-30%);
      }

      100% {
         -webkit-transform: translateX(0);
                 transform: translateX(0);
      }
   }

   .still-wrapper {
      width: auto;
      height: 100%;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      -o-object-fit: cover;
         object-fit: cover;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
   }

   .inner-img {
      width: auto;
      height: 100%;
      z-index: -5;
   }

   #stills-ba {

      width: 100%;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      overflow: scroll;

   }

   .stills-ba {
      width: auto;
      height: 100%;
      height: calc(var(--vh, 1vh) * 100);
      margin: 0;
      padding: 0;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
   }

   .still-wrapper-ba {
      width: auto;
      height: 100% !important;
      height: calc(var(--vh, 1vh) * 100);
      left: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
   }

   .front-img {
      /* align-self: stretch; */
      all: revert;
      height: 100%;
      width: auto;
      -webkit-transition: opacity ease 250ms;
      -o-transition: opacity ease 250ms;
      transition: opacity ease 250ms;
   }

   .back-img {
      all: revert;
      height: 100%;
      width: auto;
      opacity: 1;
      z-index: -5;
      position: absolute;
      top: 0;
      left: 0;
   }


   .front-img:hover {
      opacity: 0;
   }


   #lookbook {
      all: revert;
      width: 100%;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   .lookbook-nav {
      margin-top: 65vh;
      margin-top: calc(var(--vh, 1vh) * 65);
      height: 10vh;
      height: calc(var(--vh, 1vh) * 10);
      z-index: 10;
   }


   .lookbook-nav button {
      font-size: 4rem;
   }

   div .lookbook {
      width: 90vw;
   }

   .lookbook {
      height: 91vh;
      height: calc(var(--vh, 1vh) * 90);
   }

   div.slider {
      margin-top: calc(var(--vh, 1vh) * -2);
   }

   .capsule-wrapper {
      height: 100vh;
   }


}
/* iphone x */
@media only screen and (width : 375px) and (height : 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio : 3) {

   .press-info {
      height: 35vh;
      height: calc(var(--vh, 1vh) * 35);
   }

   .contactbtn {
      margin-left: -1rem;
   }

   .face.back a {
      font-size: 1.3rem;
   }

   .contact-a ul {
      width: 66vw;
      padding: 0rem 1rem 1rem 1rem;
   }

   .press__mobile {
      left:170vw;
   }

}
/* pixel 2 xl */
@media screen and (width: 411px) and (height: 823px) and (-webkit-device-pixel-ratio: 3.5) and (orientation: portrait) {
   .press-info {
      height: 35vh;
      height: calc(var(--vh, 1vh) * 35);
   }

   .mobile__more {
      margin-left: 1rem;
      font-size: 3.5rem;
   }

   .contactbtn {
      margin-left: -2rem;
   }

   .press__mobile {
      left:170vw;
   }

   .face.back a {
      font-size: 1.3rem;
   }

   .contact-a ul {
      width: 60vw;
      padding: 0rem 1rem 1rem 1rem;
   }
   
}