html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* FNS */
.hide(){ opacity: 0.0001; position: absolute; top: 0; left: 0; pointer-events: none; z-index: -20; width: 0; height: 0; overflow: hidden; }
.flex(){ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
.inlineflex(){ display: -webkit-inline-box; display: -moz-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; }
.flx(@num){ -webkit-flex: @num; -ms-flex: @num; -moz-flex: @num; flex: @num; }
.flexbasis(@num){ width: @num; flex-basis: @num; -webkit-flex-basis: @num; -ms-flex-basis: @num;}
.spcstart(){ flex-pack: start; justify-content: flex-start; -webkit-justify-content: flex-start; -ms-flex-pack: flex-start; -ms-justify-content: flex-start; }
.spcend(){ flex-pack: end; justify-content: flex-end; -webkit-justify-content: flex-end; -ms-flex-pack: flex-end; -ms-justify-content: flex-end; }
.spcbtwn(){ flex-pack: justify; justify-content: space-between; -webkit-justify-content: space-between; -ms-flex-pack: space-between; -ms-justify-content: space-between; }
.spcctr(){ flex-pack: center; justify-content: center; -webkit-justify-content: center; -ms-flex-pack: center; -ms-justify-content: center; }
.spceven(){ justify-content: space-evenly; -webkit-justify-content: space-evenly; -moz-justify-content: space-evenly; -ms-flex-pack: space-evenly; -ms-justify-content: space-evenly; }
.flexcol(){ flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; }
.flexrow(){ flex-direction: row; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; }
.flexwrap(){ flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; }
.aligntop(){ box-align: start; flex-item-align: start; align-items: flex-start; -webkit-align-items: flex-start; -ms-align-items: flex-start; }
.alignctr(){ box-align: center; flex-item-align: center; align-items: center; -webkit-align-items: center; -ms-align-items: center; }
.alignbtm(){ box-align: end; flex-item-align: end; align-items: flex-end; -webkit-align-items: flex-end; -ms-align-items: flex-end; }
.corners(){ top:0;left:0;right:0;bottom:0; }
.full(){ width: 100%; height: 100%; }
.transform(@how){ transform: @how; -webkit-transform: @how; -moz-transform: @how; -ms-transform: @how; }
.trsX(@prc){ transform: translateX(@prc); -webkit-transform: translateX(@prc); -moz-transform: translateX(@prc); -ms-transform: translateX(@prc); }
.trsY(@prc){ transform: translateY(@prc); -webkit-transform: translateY(@prc); -moz-transform: translateY(@prc); -ms-transform: translateY(@prc); }
.trsOrg(@how){ transform-origin: @how; -webkit-transform-origin: @how; -moz-transform-origin: @how; -ms-transform-origin: @how; }
.trans(@ition){ transition: @ition; -webkit-transition: @ition; -moz-transition: @ition; -ms-transition: @ition; -o-transition: @ition; }
.invert(){ -webkit-filter: invert(100%); filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='invert'><feComponentTransfer><feFuncR type='linear' slope='-1' intercept='1'/><feFuncG type='linear' slope='-1' intercept='1' /><feFuncB type='linear' slope='-1' intercept='1' /></feComponentTransfer></filter></svg>#invert"); filter:invert(100%); }
.cols(@cnt){ -webkit-column-count: @cnt; -moz-column-count: @cnt; column-count: @cnt; }
.colgap(@cnt){ -webkit-column-gap: @cnt; -moz-column-gap: @cnt; column-gap: @cnt; }

.fullVW(){
  width: 100vw;
  height: 100vh;
  height: @100vh;
}


html,
body {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
html.mobile,
html.mobile body {
  -webkit-overflow-scrolling: touch;
}


/* STYLE FNS */

@40vh: ~"calc(var(--vh, 1vh) * 40)";
@50vh: ~"calc(var(--vh, 1vh) * 50)";
@100vh: ~"calc(var(--vh, 1vh) * 100)";

@S: 0.8rem;
@SM: 1.5rem;
@M: 2.5rem;
@L: 3rem;
.logo(){
  font-size: 45vw;
  @media (min-width: 1440px){
    font-size: 36rem;
  }
}
.huge(){
  font-size: 5.5vw;
  @media (min-width: 1440px){
    font-size: 4.5rem;
  }
  @media (max-width: 800px){
    font-size: 6vw;
  }
}

@sans: 'circular',sans-serif;
@serif: serif;
@mono: 'circularmono', monospace;

@pink: #ff2150;
@cyan: #b0efea;
@darkcyan: #00caba;
@blue: #00a0ff;


html:not(.mobile) {
  background-color: @pink;
}
#main-content {
  background-color: white;
  display: block;
}

.mono {
  font-family: @mono;
}

html {
  font-family: @sans;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  @media (min-width: 1440px){
    font-size: 18px;
  }
  @media (min-width: 1680px){
    font-size: 20px;
  }
  @media (min-width: 1820px){
    font-size: 22px;
  }

  @media (max-width: 900px){
    font-size: 14px;
  }
  @media (max-width: 800px) and (min-width: 700px){
    font-size: 13px;
  }
  &.mobile {
    font-size: 9px;
    &.landscape {
      font-size: 10px;
    }
    @media (max-width: 320px){
      font-size: 6px;
    }
  }
}
body {
  line-height: 1.125;
  letter-spacing: -0.01em;
}
h1,h2,h3,h4,h5 {
  line-height: 1;
}
a {
  color: inherit;
  text-decoration: none;
}
i, em {
  font-style: italic;
}
b, strong {
  font-weight: inherit;
  color: @pink;
}
h1 {
  color: @pink;
  font-size: @L;
  margin-bottom: 2rem;
  font-weight: 400;
}
h3 {
  text-transform: uppercase;
  font-size: 1.125rem;
  letter-spacing: 0.025em;
  font-weight: 600;
  margin-bottom: 2.5rem;
}


img {
  max-width: 100%;
  height: auto;
}

figure {
  position: relative;
  display: inline-block;
  .img,
  .img img {
    display: block;
  }
  .img.hires {
    position: absolute;
    .corners();
    .full();
    opacity: 0;
    z-index: 1;
    background-size: cover;
    .trans(opacity 800ms);
    &.vis { opacity: 1; }
  }
  figcaption {
    display: none;
  }
}

#burger {
  width: 2rem;
  height: 3rem;
  .flex();
  .flexcol();
  .spcctr();
  .alignctr();
  cursor: pointer;
  // margins bottom are set below
  i {
    width: 100%;
    display: block;
    height: 1px;
    background-color: black;
    &:not(:last-child){
      margin-bottom: 8px;
    }
  }
}


a.project-thumb {
  position: relative;
  display: inline-block;
  width: 40%;

  h4 {
    position: absolute;
    z-index: 2;
    display: block;
    top: 50%;
    left: 0%;
    right: 0;
    width: 100%;
    text-align: center;
    .trsY(-50%);
    opacity: 0;
  }
  &:hover {
    h4 {
      opacity: 1;
    }
  }
  figure {
    &,
    img {
      width: 100%;
    }
  }
}


body.home #main-content {
  .sect {

    &.intro {
      background-color: @pink;
      color: white;
      width: 100%;
      height: 425vh;
      height: calc(100vh * 4.25);
      height: calc(@100vh * 4.25);
      @media (min-aspect-ratio: ~"1/1"){
        height: 425vw;
        height: calc(100vw * 4.25);
      }
      position: relative;
      .title {
    //    position: sticky;
        top: 0;
        left: 0;
        .fullVW();
        @media (min-aspect-ratio: ~"1/1"){
//          height: 100vw;
        }
        .flex();
        .alignctr();
        .spcctr();
      }
      h1 {
        .logo();
        span {
          color: white;
          display: inline-block;
          will-change: transform;
          transform-style: preserve-3d;
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;

          &.tint-1 {
            letter-spacing: -0.02em;
          }
          &.tint-2 {
            letter-spacing: -0.045em;
          }
          &.tint-3 {
            letter-spacing: -0.03em;
          }
        }
      }
      .desc {
        top: calc(@100vh * 1);
        @media (min-aspect-ratio: ~"1/1"){
          top: 100vw;
        }
        .fullVW();
        .flex();
        .alignctr();
        .spcctr();
        position: absolute;
        z-index: 1;
        will-change: transform;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;

        .tint-desc {
          width: auto;
          font-size: @L;
          .huge();
          font-weight: 600;
          will-change: transform;
          transform-style: preserve-3d;
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;

          p {
            opacity: 0;
          }
          p:first-child {
            opacity: 1;
          }
        }
      }
    }


    div.item {
      width: calc(50% - 5px);
      margin-right: -10px;
      display: inline-block;
      &:not(.full):not(.text){
        padding: 4rem;
        box-sizing: border-box;
        @media (max-width: 800px){
          padding: 5%;
        }
      }

      &.nopad.right { padding-right: 0 !important; }
      &.nopad.left { padding-left: 0 !important; }

      &.alignmid {
        vertical-align: middle;
      }
      &.aligntop {
        & > * {
          vertical-align: top;
        }
      }
      &.one {
        width: 45%;
        @media (min-width: 801px){
          width: calc(25% - 5px);
        }
        &.empty {
          margin-right: 0;
        }
      }
      &.three {
        width: calc(75% - 5px);
      }
      &.four {
        width: calc(100% - 10px);
        display: block;
        margin-right: 0;

        .sub-item.right.gallery {
          padding-left: 1.75rem;
          box-sizing: border-box;
        }
      }
      &.full {
        width: 100%;
        display: block;
        margin-right: 0;

        &:last-child {
          margin-top: 6rem;
        }
      }
      .sub-item {
        width: calc(50% - 2rem - 5px);
        margin-right: 4rem;
        display: inline-block;
        &:last-child {
          margin-right: 0;
        }
        .four {
          width: calc(100% - 10px);
        }
      }
      &.text {
        font-weight: 600;
        font-size: @M;
        @media (min-width: 1280px){
          font-size: 2.75rem;
        }
        @media (min-width: 1600px){
          font-size: 3rem;
        }
        @media (max-width: 500px){
          font-size: 2rem;
        }
        padding: 3.5rem 2rem 2rem;
        box-sizing: border-box;
        vertical-align: top;

        @media (max-width: 800px){
          br {
            display: none;
          }
        }
        /*
        height: @100vh;
        .flex();
        .alignctr();
        */
//        position: absolute;
        .text-wrap {
          &:before {
            content: "-";
            color: @pink;
            line-height: 1rem;
            font-size: 2em;
          }
        }
      }

      &.gallery,
      .sub-item.gallery {
        .gall-capt {
          display: none;
        }
        figure:not(.first){
          display: none;
        }
        &.opens {
          figure.first {
            cursor: zoom-in;
            position: relative;

            .hov-text {
              position: absolute;
              width: 100%;
              height: 100%;
              .flex();
              .alignctr();
              .spcctr();
              text-align: center;
              z-index: 10;
              opacity: 0;
              background: @blue;
              .trans(opacity 200ms);
              pointer-events: none;
              p {
                line-height: 1.5;
                font-size: 1rem;
                letter-spacing: 0.025em;
                color: white;
                text-transform: uppercase;
              }
            }
            &:hover {
              .hov-text {
                opacity: 1;
              }
            }
          }
        }
      }
    }

    &.simply {
      background-color: @pink;
      position: relative;
      z-index: 1;
      .simply-wrap {
        min-width: 100vw;
        min-height: 100vh;
        min-height: @100vh;
        .fullVW();
        .flex();
        .alignctr();
        .spcctr();
        .simply-text {
          font-weight: 600;
          color: white;
          .huge();


       align-items: center;
       justify-content: center;
       -ms-flex-pack: center;
        }
      }
    }

    &.outro {
      min-width: 100vw;
      min-height: 100vh;
      min-height: @100vh;
      .flex();
      .alignctr();
      .spcctr();

      @media (max-width: 800px){
        height: auto;
        padding: 0rem 2rem 2rem;
        box-sizing: border-box;
      }

      a {
        color: @pink;
      }

      .outro-wrap {
        .full();
        padding: 4rem;
        box-sizing: border-box;
        .flex();
    //    .aligntop();
        .spcctr();
        .flexwrap();

        max-width: 80rem;

        @media (max-width: 800px){
          .flexcol();
          .item {
            margin-bottom: 2rem;
        //    text-align: center;
            width: 100%;
            box-sizing: border-box;
          }
        }

        .item {
          vertical-align: top;
          font-size: @SM;
//          font-weight: 300;
          line-height: 1.25;

          .flex();
          .flexcol();
      //    .spcbtwn();
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          @media (max-width: 800px){
            padding-top: 4rem !important;
            padding-bottom: 4rem !important;
          }

          &.left {
            .mono {
              font-size: 1.25rem;
              line-height: 1.25;
            }
            @media (min-width: 801px){
              .flexbasis(60%);
              .mono {
                margin-top: auto;
                font-size: 0.9rem;
                line-height: 1.25;
              }
            }
          }
          &.right {
            @media (min-width: 801px){
              .flexbasis(40%);
              font-size: 1rem;
            }
            .capt {
              font-size: 0.6rem;
              // white-space: nowrap;
              margin-top: 0.5rem;
              letter-spacing: 0.01em;

              @media (max-width:800px){
                font-size: @S;
              }
            }
          }

          &.btm {
            .flexbasis(100%);
            font-size: 1rem;
            margin-top: 2rem;
            padding-top: 2rem !important;
            border-top: 1px solid;
            margin-left: 4rem;
            margin-right: 4rem;
            padding-left: 0;
            padding-right: 0;

            h3 {
              margin-bottom: 1rem;
            }
            span.red {
              color: @pink;
            }

            line-height: 1.25;
            @media (max-width: 800px){
              border-top: 1px solid black;
              margin-top: 2rem;
              padding-top: 4rem !important;
            }
          }

          @media (max-width: 800px){
            padding: 0;
            margin-left: -2rem !important;
            margin-right: -2rem !important;
            width: calc(100% + 4rem) !important;
            padding-bottom: 0 !important;
          }

          p {
            &:not(:last-child){
              margin-bottom: 1.5em;
            }
          }
        }

      }

    }

  }

  figure {
    &, * {
      width: 100%;
      display: block;
    }
    figcaption {
      display: none;
    }
  }
}


img[src*='.svg'] {
  width: 2rem;
  height: 2rem;
}
.gall-close:hover {
  img[src*='.svg'] {
    opacity: 0.5;
  }
}

.item.text[style*='opacity: 0']{
  pointer-events: none;
}

aside#gallery {
  position: relative;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  .full();
  .corners();
  z-index: 99;
  .trans(opacity 200ms);

  background-color: white;

  .gall-next,
  .gall-prev {
    cursor: pointer;
    opacity: 1;
    .trans(opacity 200ms);
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 2;

    box-sizing: border-box;
    padding: 0 2rem;

    span {
      margin-top: 50vh;
      .trsY(-50%);
      display: inline-block;
      background: black;
      color: white;
      opacity: 0;
    }
    &:hover {
      span {
        opacity: 1;
      }
    }
  }
  .gall-prev {
    left: 0;
    cursor: none;
  }
  .gall-next {
    right: 0;
    text-align: right;
    cursor: none;
  }
  .gall-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    padding: 2rem;
    box-sizing: border-box;
    span {
    }
    &:hover {
      span {
        background: black;
        color: white;
      }
    }
  }

  .gallery {
    .full();

    .hov-text {
      display: none;
    }
    .gall-capt {
      display: none;
    }
  }

  .gallery-wrap {
    white-space: nowrap;
    width: calc(100% - 4rem);
    height: calc(100% - 7rem);
    margin: 2rem;
    //    padding-bottom: 75%;
    overflow: hidden;
    position: relative;
    z-index: 1;

    .gallery-slide {
      position: absolute;
      pointer-events: none;
      .corners();
      width: 100%;
      height: 100%;
      display: inline-block;

      will-change: transform;

      figcaption {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        font-family: @mono;
        text-transform: uppercase;
        letter-spacing: 0.01em;
        font-size: 0.666em;
      }

      .trans(~"transform 200ms cubic-bezier(0.13, 0.62, 0.27, 1.03)");

      &.sliding {
        .trans(none);
      }

      img {
//        visibility: hidden;
        display: none;
      }
      .img {
        .full();

        background-size: contain;
        background-position: 50%;
        background-repeat: no-repeat;

        .img-wrap {
          position: relative;
          figcaption {
            display: block;
            position: absolute;
            left: 1rem;
            top: 1rem;
            z-index: 2;
          }
        }
      }
      &.has-capt {
        .img {
          /*
          margin-top: 1.5rem;
          height: 95%;
          height: calc(100% - 1.5rem);
          */
        }
      }
      background-color: white;
      .capt {
        display: none;
      }
      .gall-img {
        opacity: 0.001;
        width: 1px;
        height: 1px;
      }
      &.prev {
        .trsX(-100%);
      }
      &.cur {
        .trsX(0%);
        z-index: 1;
      }
      &.next {
        .trsX(100%);
      }
    }
  }
  .gall-info {

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;

    font-size: 1rem;
    @media (min-width: 1440px){
      font-size: 16px;
    }
    @media (min-width: 1820px){
      font-size: 18px;
    }

    font-family: @mono;

    .flex();
    .gall-nums,
    .coll-nums {
      .flex();
      .gall-cur,
      .coll-cur {
        &:after { content: "/"; display: inline-block; }
      }
    }
    .coll-nums {
      margin-right: auto;
    }
    .gall-nums {
      margin-left: auto;
    }
    .gall-capt {
      .flexbasis(~"calc(100% - 10rem)");
    //  margin-right: 5rem;
      text-align: center;
    }
  }

  .gallery-wrap {
    opacity: 1;
    .trans(opacity 200ms);
  }
  &.gal-changing {
    .gallery-wrap {
      opacity: 0;
    }
  }
  #gall-hov {
    width: 2rem;
    height: 2rem;
    display: block;
    opacity: 1;
    position: absolute;
    top: -1rem;
    left: -1rem;
    z-index: 2;
    will-change: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    .trans(opacity 200ms);
    opacity: 1;
    pointer-events: none;
    &.out {
      opacity: 0;
    }
    &.prev {
      background-image: url('../img/SVG/left.svg')
    }
    &.next {
      background-image: url('../img/SVG/right.svg')
    }
  }
}
html.mobile {
  #gall-hov {
    display: none !important;
  }
}

html.gallery-open {
  aside#gallery {
    pointer-events: auto;
    opacity: 1;
  }
}

a[href*='instagram']{
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  color: transparent !important;
  font-size: 0px;
  display: inline-block;
  background-image: url(../img/SVG/ig.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.replace-caption {
  display: none !important;
}

#scr-arr {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  margin-left: -19px;
  width: 38px;
  height: 38px;
  background-image: url('../img/SVG/left.svg');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  .transform(rotate(-90deg));
  .invert();
  .trans(opacity 1000ms);
  animation: float 2s infinite ease-out;
  -webkit-animation: float 2s infinite ease-out;
  will-change: opacity;
  pointer-events: none;
  &.hide {
    opacity: 0;
  }
}
@keyframes float {
  0% { bottom: 2rem; }
  50% { bottom: 4rem; }
  100% { bottom: 2rem; }
}
@-webkit-keyframes float {
  0% { bottom: 2rem; }
  50% { bottom: 4rem; }
  100% { bottom: 2rem; }
}