html{scroll-behavior: smooth;}
body{
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: white;
  text-rendering: optimizeLegibility;
  cursor: none;
}
body.bgblack{
  background-color: #151D1E;
}
body.bgblack::after{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/noise.gif);
  opacity: .05;
  z-index: -1;
}
body.bgwhite, body.bgwhite-ind{
  background-color: #D2D2D2;
}
body.bgwhite::after, body.bgwhite-ind::after{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/noise.gif);
  opacity: .04;
  z-index: -1;
}
body.bgpcolor{background-color: #D2D2D2;}
body.fixed, html.fixed{
  overflow-y: hidden;
}
.big-container{overflow-x: hidden;}
::-webkit-scrollbar {display: none;}
::-webkit-scrollbar-track {display: none;}
::-webkit-scrollbar-thumb {display: none;}
*{box-sizing: border-box;}
.loader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #151D1E;
}
.loader::after{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/noise.gif);
  opacity: .04;
  z-index: -1;
}
.loader .logo-load{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  opacity:0;
  transition: all cubic-bezier(0.16, 0.62, 0.26, 0.98) 1.2s;
}
.loader .logo-load.in{
  opacity: 1;
}
.loader .logo-load.out{
  opacity: 0;
}
.loader .logo-load img{
  width: 100%;
}
.loader .logo-load-text{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -46px;
  width: 100px;
  height: 100px;

  background-image: url("../img/logo-text.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: 0;

  -webkit-background-image: url("../img/logo-text.png");
  -webkit-background-position: center;
  -webkit-background-size: 100%;
  -webkit-background-repeat: no-repeat;

  transition: all cubic-bezier(0.16, 0.62, 0.26, 0.98) 1.2s;

  -webkit-animation-name: rotateload;
  -webkit-animation-duration: 8000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  animation-name: rotateload;
  animation-duration: 8000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotateload {
    0% {
      -moz-transition:  rotate(0deg);
      -o-transition:  rotate(0deg);
      -ms-transition:  rotate(0deg);
      -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    } 100% {
      -moz-transition: rotate(0deg);
      -o-transition: rotate(0deg);
      -ms-transition: rotate(0deg);
      -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotateload {
  0% {
    -moz-transition:  rotate(0deg);
    -o-transition:  rotate(0deg);
    -ms-transition:  rotate(0deg);
    -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  } 100% {
    -moz-transition: rotate(0deg);
    -o-transition: rotate(0deg);
    -ms-transition: rotate(0deg);
    -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
.loader .logo-load-text.in{
  opacity:1;
}
.loader .logo-load-text.out{
  opacity:0;
  margin-left: -60px;
  margin-top: -56px;
  width: 120px;
  height: 120px;
}
.to-begining{
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  background-color: white;
  transition: all cubic-bezier(0.18, 0.89, 0.34, 0.97) .7s;
  z-index: 10;
}
.click-transition{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: none;
  z-index: 10;
}
.click-transition div{
  position: fixed;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  background-color: white;
  border-radius: 100%;
  transition: all cubic-bezier(0.16, 0.62, 0.26, 0.98) 1.2s;
}
.click-transition div::after, .to-begining::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/noise.gif);
  opacity: .05;
  z-index: -1;
}
.click-transition div.animate{
  width: 230vw;
  height: 230vw;
}
.trazo{
  -webkit-text-stroke: 2px white;
  color: transparent;
}
/*LOADING*/
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-spinner div {
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

loading-image{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.6);
}
/*LOADING-END*/
.cursor{
  top: -50px;
  left: -50px;
  position: absolute;
  background-color: white;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  z-index: 1;
  transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
  user-select: none;
  pointer-events: none;
  z-index: 10000;
  transform: scale(1);
}
.cursor.video{
  position: absolute;
  background-color: transparent;
  border-radius: 0;
  width: 15px;
  height: 15px;
  margin-left: -5px;
  margin-top: -4px;
  transform: rotate(0);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url('../img/icon/play.png')
}
.cursor.video::after{
  display: none;
}
.cursor.zoom{
  position: absolute;
  background-color: white;
  border-radius: 0;
  width: 15px;
  height: 2px;
  margin-left: -4px;
  margin-top: 2px;
  transform: rotate(0);
}
.cursor.zoom::after{
  content: "";
  top: 50%;
  left: 50%;
  background-color: white;
  width: 15px;
  height: 2px;
  transform: rotate(90deg);
  display: block;
}
.cursor.back{
  position: absolute;
  background-color: white;
  border-radius: 0;
  width: 15px;
  height: 2px;
  margin-left: -4px;
  margin-top: 2px;
  transform: rotate(45deg);
}
.cursor.back::after{
  content: "";
  top: 50%;
  left: 50%;
  background-color: white;
  width: 15px;
  height: 2px;
  transform: rotate(90deg);
  display: block;
}
.cursor-follower{
  top: -50px;
  left: -50px;
  position: absolute;
  border: 2px solid rgba(54, 89, 214, 0.7);
  width: 24px;
  height: 24px;
  border-radius: 100%;
  z-index: 1;
  transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
  user-select: none;
  pointer-events: none;
  margin: 2px 0 0 2px;
  z-index: 10000;
  transform: translate(1px, 1px);
}
.cursor-follower.active{
  transform: scale(3);
  border: none;
  background-color: rgba(54, 89, 214, 0.2);
  margin: 2px 0 0 2px;
}
.structure-lines{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
section .structure-lines{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 0;
}
  .structure-lines .line{
    background-color: white;
    position: relative;
    width: 1px;
    height: 100%;
    float: left;
    margin-left: calc((100% / 14) - (.6px));
    opacity: .02;
  }
  body.bgwhite .structure-lines .line, body.bgwhite-ind .structure.lines .line{
    opacity: .13;
  }
  body.bgwhite .menu-page .structure-lines .line{
    opacity: .02;
  }
.logo{
  position: fixed;
  top: 100px;
  left: 100px;
  width: 40px;
  height: 40px;
  z-index: 5;
}
  .logo .logo-text{
    position: absolute;
    top: 60%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;

    background-image: url("../img/logo-text.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0;

    -webkit-background-image: url("../img/logo-text.png");
    -webkit-background-position: center;
    -webkit-background-size: 100%;
    -webkit-background-repeat: no-repeat;

    transition: all cubic-bezier(0.22, 0.01, 0, 0.98) .5s;
    -webkit-transition: all cubic-bezier(0.22, 0.01, 0, 0.98) .5s;

    -webkit-animation-name: rotate;
    -webkit-animation-duration: 8000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    animation-name: rotate;
    animation-duration: 8000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  @keyframes rotate {
      0% {
        -moz-transition:  rotate(0deg);
        -o-transition:  rotate(0deg);
        -ms-transition:  rotate(0deg);
        -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
      } 100% {
        -moz-transition: rotate(0deg);
        -o-transition: rotate(0deg);
        -ms-transition: rotate(0deg);
        -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  @-webkit-keyframes rotate {
    0% {
      -moz-transition:  rotate(0deg);
      -o-transition:  rotate(0deg);
      -ms-transition:  rotate(0deg);
      -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    } 100% {
      -moz-transition: rotate(0deg);
      -o-transition: rotate(0deg);
      -ms-transition: rotate(0deg);
      -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
  }
  .logo:hover .logo-text{
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    opacity: 1;
  }
  .logo.roundeffect .logo-text{
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    opacity: 1;
  }
 .logo img{
   width: 100%;
 }
.button-menu{
  position: fixed;
  top: 114px;
  right: 100px;
  width: 30px;
  height: 14px;
  z-index: 5;
}
  .button-menu div{
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: white;
    transition: all cubic-bezier(0.26, 0.28, 0, 0.97) .5s;
  }
    .button-menu div:nth-child(1){top: 0;}
    .button-menu div:nth-child(2){top: 50%; margin-top: -1px;}
    .button-menu div:nth-child(3){bottom: 0;}

    .button-menu.open div:nth-child(1){transform: rotate(135deg); top: 6px;}
    .button-menu.open div:nth-child(2){opacity: 0; transform: rotate(135deg); top: 6px; margin-top: 0;}
    .button-menu.open div:nth-child(3){transform: rotate(-135deg); bottom: 6px;}
.go-top{
  display: none;
  position: fixed;
  top: 60%;
  right: 100px;
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("../img/icon/go-top.png");
  z-index: 3;
}
.instagram{
  position: fixed;
  bottom: 100px;
  right: 30px;
  transform: rotate(-90deg);
  transform-origin: 0 100%;
  z-index: 5;
  width: 80px;
}
  .instagram a{
    text-transform: uppercase;
    font-size: .8em;
    font-weight: 300;
    letter-spacing: 0.5px;
  }
/*COVER*/
.d-head{
  position: absolute;
  top: 0;
  left: 0;
  background-color: #151D1E;
  background-position: center;
  background-size: cover;
  background-image: url('../img/head.jpg');
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  background-blend-mode: lighten;
  background-position-y: -75px;
  z-index: -1;
}
nav.menu{
  position: absolute;
  top: 118px;
  right: 325px;
  z-index: 2;
}
  nav.menu ul li{
    position: relative;
    float: left;
    margin-left: 60px;
    font-size: .95em;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  nav.menu ul li:first-child{
    margin-left: 0;
  }
.button-box{
  width: auto;
  height: auto;
  border: solid 1px white;
  overflow: hidden;
  display: inline-block;
}
  .button-box .box{
    position: relative;
    float: right;
    padding: 20px 88px 18px 38px;
  }
    .button-box .box p{
      font-size: 1em;
      font-weight: 300;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .button-box .box .arrow-box{
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 100%;
      border-left: solid 1px white;
      overflow: hidden;
    }
      .button-box .box .arrow-box .arrow{
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        transform: translate(-50%, -50%);
        background-image: url("../img/icon/arrow-box-button.png");
        background-size: 100%;
        background-repeat: no-repeat;
        transition: all cubic-bezier(0.22, 0.01, 0, 0.98) .5s;
      }
      .button-box .box .arrow-box .arrow:first-child{
        left: 50%;
      }
      .button-box .box .arrow-box .arrow:last-child{
        left: -50%;
      }
      .button-box:hover .box .arrow-box .arrow:first-child{
        left: 150%;
      }
      .button-box:hover .box .arrow-box .arrow:last-child{
        left: 50%;
      }
.menu-page{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3;
  display: none;
}
.menu-page.bgwhite{
  background-color: #D2D2D2;
}
.menu-page.bgblack{
  background-color: #151D1E;
}
body .menu-page.bgwhite .structure-lines .line{opacity: .13;}
body .menu-page.bgblack .structure-lines .line{opacity: .02;}
.menu-page .structure-lines{z-index: 0;}
.menu-page::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/noise.gif);
  opacity: .04;
  z-index: -1;
}
.menu-page .menu-t{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -30px;
}
  .menu-page .menu-t li{
    text-align: center;
    opacity: 0;
    margin-left: -30px;
    transition: all cubic-bezier(0, 0, 0.2, 1) .3s;
  }
  .menu-page .menu-t li:nth-child(1){transition-delay: .2s;}
  .menu-page .menu-t li:nth-child(2){transition-delay: .3s;}
  .menu-page .menu-t li:nth-child(3){transition-delay: .4s;}
  .menu-page .menu-t li:nth-child(4){transition-delay: .5s;}
  .menu-page .menu-t li:nth-child(5){transition-delay: .6s;}
  .menu-page.open .menu-t li{
    margin-left: 0;
    opacity: 1;
  }
  .menu-page .menu-t li.g{
    position: relative;
    font-size: 6em;
    font-family: 'axisextra_bold';
    letter-spacing: -2px;
    text-transform: uppercase;
    text-rendering: geometricPrecision;
    margin-bottom: 30px;
    -webkit-text-stroke: 1px white;
    color: transparent;
  }
  .menu-page.bgwhite .menu-t li.g{-webkit-text-stroke: 2px white;}
  .menu-page.bgblack .menu-t li.g{-webkit-text-stroke: 1px white;}
  .menu-page .menu-t li.g:nth-child(4){margin-bottom: 50px;}
  .menu-page .menu-t li.g::after{
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 0;
    color: white;
    opacity: 0;
    font-size: 1em;
    white-space: nowrap;
    z-index: -1;
    transition: all ease-in-out .3s;
  }
  .menu-page .menu-t li.g:nth-child(1)::after{content:"Inicio"}
  .menu-page .menu-t li.g:nth-child(2)::after{content:"Proyectos"}
  .menu-page .menu-t li.g:nth-child(3)::after{content:"Colecciones"}
  .menu-page .menu-t li.g:nth-child(4)::after{content:"Sobre Mi"}
  .menu-page .menu-t li.g:hover::after{
    margin: 7px 0 0 7px;
    opacity: .06;
  }
  .menu-page.bgwhite .menu-t li.g:hover::after{
    opacity: .17;
  }
  .menu-page.bgblack .menu-t li.g:hover::after{
    opacity: .06;
  }
  .menu-page .menu-t li.g.inthis{
    color: white;
    -webkit-text-stroke: 0;
  }
  .menu-page .menu-t li.g.inthis:after{
    display: none;
  }
  .menu-page .menu-t li.g.inthis:hover:after{
    display: none;
  }
  .menu-page .menu-t li a{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    text-transform: lowercase;
    font-weight: 200;
    letter-spacing: 0;
    -webkit-text-stroke: 0;
    color: white;
    margin-bottom: 0;
  }
.menu-page .footer{
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.menu-page.open .footer{
  opacity: 1;
  transition: all ease-in-out .3s;
  transition-delay: .5s;
}
footer, .footer{
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 2;
}
#project-ind-sec footer{position: absolute; bottom: 0; left: 0;}
  footer .ft, .footer .ft{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 100px 110px 90px 117px;
    display: inline-block;
  }
    footer .ft p:first-child, .footer .ft p:first-child{
      margin-left: 0;
    }
    footer .ft p, .footer .ft p{
      position: relative;
      float: left;
      margin-left: 150px;
      text-transform: uppercase;
      font-size: .75em;
    }
#main{
  width: 100%;
  height: auto;
}
section .principal{
  position: relative;
  width: 100%;
  height: 100vh;
}
  section .principal .reference{
    position: fixed;
    top: 50%;
    left: 117px;
    width: 6px;
    height: auto;
    z-index: 1;
  }
    section .principal .reference .ref{
      position: relative;
      margin: 8px auto 0 auto;
      width: 6px;
      height: 6px;
      border-radius: 100%;
      border: solid 1px white;
      opacity: .5;
      transition: all ease-in-out .2s;
    }
    section .principal .reference .ref.active{
      background-color: white;
      opacity: .9;
    }
    section .principal .reference .ref:last-child{
      width: 2px;
      height: 16px;
      border-radius: 0;
      border: none;
      background-color: white;
      margin: 7px auto 0 auto;
    }
    section .principal .reference .ref:last-child.active{
      opacity: .9;
      width: 2px;
      margin: 7px auto 0 auto;
    }
  section .principal .button-box{
    position: absolute;
    top: 40%;
    left: 70%;
    transform: translate(-50%, -50%);
  }
  section .principal h1{
    position: absolute;
    top: 60%;
    left: 37%;
    transform: translate(-50%, -50%);
    font-size: 5.5em;
    font-family: 'axisextra_bold';
    letter-spacing: -2px;
    text-transform: uppercase;
    text-rendering: geometricPrecision;
  }
  section .scroll-guide{
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 30px;
    margin-left: 3px;
  }
    section .scroll-guide::after{
      content:"";
      position: absolute;
      top: 25px;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 90px;
      opacity: .6;
      background: rgba(255,255,255,1);
      background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
      background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
          }
    section .scroll-guide p{
      font-size: 1em;
      font-weight: 300;
      text-transform: uppercase;
    }
section .wrap{
  position: relative;
  width: calc(100% - 460px);
  max-width: 1400px;
  transform: translateX(3px);
  height: auto;
  margin: 130px auto 0 auto;
}
section .wrap article{
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
  margin-bottom: 200px;
}
section .wrap article:last-child{margin-bottom: 0;}
  section .wrap article .image{
    position: relative;
    width: calc(59vw - (460px / 2));
    max-width: calc(1400px / 1.5);
    height: 32vw;
    max-height: calc(1400px / 2);
    overflow: hidden;
    display: inline-block;
    box-shadow: 0px 13px 50px 0px rgba(0,0,0,.2);
    transition: transform cubic-bezier(0.68, -0.55, 0.08, 2.07) .4s;
  }
  section .wrap article:nth-child(odd) .image{float: right;}
  section .wrap article:nth-child(even) .image{float: left;}
  section .wrap article .image .nits{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
  }
  section .wrap article .image .pti{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(.1);
    transition: opacity ease-in-out .3s;
  }
  section .wrap article .image .pti.blue{background-color: #8f53ef;background-blend-mode: color-dodge;opacity: 0.30;z-index: 2;}
  section .wrap article .image .pti.green{background-color: #a5f5da;background-blend-mode: luminosity;opacity: 1;z-index: 1;}
  section .wrap article .image.active .pti, section .wrap article .image:hover .pti{opacity:0;}
section .wrap article .title{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  z-index: 3;
}
div.title:hover ~ div.image .pti{opacity: 0;}
section .wrap article:nth-child(odd) .title{left: 0; margin-left: 0px;}
section .wrap article:nth-child(even) .title{right: 0; margin-right: 10px;}
  section .wrap article .title p.number{
    position: absolute;
    top: -43px;
    font-size: 2em;
    font-weight: 200;
  }
  section .wrap article:nth-child(odd) .title p.number{
    right: calc(59vw - (460px / 2));
    margin-right: 50px;
    padding-right: 22px;
  }
  section .wrap article:nth-child(even) .title p.number{
    left: calc(59vw - (460px / 2));
    margin-left: 50px;
    padding-left: 22px;
  }
  section .wrap article .title p.number::after{
    content:"";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 2px;
    background-color: white;
  }
  section .wrap article:nth-child(odd) .title p.number::after{
    right: 0;
  }
  section .wrap article:nth-child(even) .title p.number::after{
    left: 0;
  }
  section .wrap article .title h2{
    position: relative;
    font-size: 8em;
    font-family: 'axisextra_bold';
    letter-spacing: -2px;
    text-transform: uppercase;
    text-rendering: geometricPrecision;
  }
  section .wrap article:nth-child(odd) .title h2{
    text-align: left;
  }
  section .wrap article:nth-child(even) .title h2{
    text-align: right;
  }
  section .wrap article .title .tags{
    position: absolute;
    bottom: -25px;
  }
  section .wrap article:nth-child(odd) .title .tags{
    right: calc(59vw - (460px / 2));
    margin-right: 50px;
  }
  section .wrap article:nth-child(even) .title .tags{
    left: calc(59vw - (460px / 2));
    margin-left: 50px;}
  section .wrap article .title .tags p{
    position: relative;
    float: left;
    margin-left: 12px;
    padding-left: 12px;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 300;
  }
  section .wrap article .title .tags p::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 100%;
    background-color: white;
  }
  section .wrap article .title .tags p:first-child{margin: 0; padding: 0;}
  section .wrap article .title .tags p:first-child::before{display: none}
  section .wrap.projects .button-box{position: relative; margin-left: calc(41vw - (460px / 2));}
  section .collection{
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 250px;
    background-color: #D2D2D2;
    padding-bottom: 160px;
  }
  section .collection .button-box{border: solid 2px white;}
  section .collection .button-box .box p{font-weight: 400;}
  section .collection .button-box .box .arrow-box{border-left: solid 2px white;}
  section .collection .button-box .box .arrow-box .arrow{background-image: url('../img/icon/arrow-box-button_bgwhite.png');}
  section .collection .background-white{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/noise.gif");
    opacity: .05;
  }
  section .collection h3.fill{
    position: absolute;
    top: -140px;
    left: 0;
    width: 100%;
    font-size: 7em;
    font-family: 'axisextra_bold';
    letter-spacing: -2px;
    text-transform: uppercase;
    text-rendering: geometricPrecision;
    text-align: center;
    z-index: -2;
  }
  section .collection h3.trazo{
    position: absolute;
    top: -140px;
    left: 0;
    width: 100%;
    font-size: 7em;
    font-family: 'axisextra_bold';
    letter-spacing: -2px;
    text-transform: uppercase;
    text-rendering: geometricPrecision;
    text-align: center;
    z-index: 1;
  }
  section .collection .structure-lines .line{opacity: .15;}
  section .collection .list{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 400px;
    z-index: 1;
  }
    section .collection .list ul li{
      font-size: 1.2em;
      font-weight: 400;
      margin-bottom: 10px;
    }
    section .collection .list ul li:last-child{margin-bottom: 0;}
      section .collection .list ul li .plus-icon{
        position: relative;
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url("../img/icon/plus-icon.png");
      }
  section .collection .wrap{
    margin-top: 0;
    height: auto;
    padding-top: 400px;
    width: calc(100vw - 550px);
    max-width: 1200px;
  }
  section .collection .wrap .row{
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    margin-top: -50px;
  }
  section .collection .wrap .row:first-child{margin-top: 0;}
  section .collection .wrap .row .post{
    position: relative;
    width: calc(50% - 120px);
    height: auto;
    z-index: 1;
    float: left;
  }
  section .collection .wrap .row:nth-child(2n+2) .post{float: right;}
  section .collection .wrap .row .post .image{
    position: relative;
    width: 100%;
    height: auto;
    box-shadow: 0px 13px 50px 0px rgba(0,0,0,.2);
    overflow: hidden;
  }
  section .collection .wrap .row .post .image img{
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
  }
  section .collection .wrap .row .post .co{
    position: absolute;
    bottom: 150px;
    right: -80px;
    font-size: .8em;
    color: #323232;
    font-weight: 400;
    text-transform: uppercase;
    transform: rotate(-90deg);
  }
  section .collection .wrap .row .post .co a{position: relative}
  section .collection .wrap .row .post .co a::after{
    content:"";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #323232;
  }
  section .collection .wrap .row .post .text{
    position: relative;
    font-size: 1.3em;
    padding-top: 20px;
  }
  section .collection .wrap .row .post .text p{margin-bottom: 5px;}
  section .collection .wrap .row .post .text p:last-child{margin-bottom: 0;}
  section .collection .wrap .row .post .text p.title{font-weight: 400;}
  section .collection .wrap .row .post .text p.serie{font-weight: 300;}
  section .collection .wrap .row .post .text p.section{
    font-weight: 500;
    font-style: italic;
    text-transform: uppercase;
    font-size: .84em;
  }
  section .collection .wrap .button-box{position: relative; margin-left: calc(50% - 125px); margin-top: 150px;}
/*ABOUT*/
section .about-cover{
  position: relative;
  width: 100%;
  height: 100vh;
}
  /*section .about-cover .me{
    position: absolute;
    top: -150px;
    left: 47%;
    background-color: #151D1E;
    transform: translateX(-50%);
    background-position: center;
    background-size: 100%;
    background-image: url("../img/about/about.jpg");
    background-repeat: no-repeat;
    height: 110%;
    width: 43%;
    min-width: 617px;
    max-width: 748px;
    background-blend-mode: lighten;
    z-index: -1;
  }*/
  section .about-cover .me{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #151D1E;
    background-position: center;
    background-size: cover;
    background-image: url("../img/about/head_full.jpg");
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    background-blend-mode: lighten;
    z-index: -1;
  }
  section .about-cover .text{
    position: absolute;
    top: 55%;
    left: 55%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }
  section .about-cover .text h4{
    font-size: 6em;
    font-family: 'axisextra_bold';
    letter-spacing: -2px;
    text-transform: uppercase;
    text-rendering: geometricPrecision;
  }
  section .about-cover .text h4:last-child{font-size: 5.5em;}
  section .cv{
    position: relative;
    width: 100%;
    height: auto;
  }
  section .cv .ref-sec{
    position: fixed;
    bottom: 100px;
    left: 123px;
    padding-left: 25px;
    height: 8px;
    transform: rotate(-90deg);
    transform-origin: 0 100%;
    z-index: 2;
  }
  section .cv .ref-sec::after{
    content:"";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 1px;
    background-color: white;
  }
  section .cv .ref-sec p{
    position: absolute;
    top: -20px;
    left: 25px;
    font-size: .9em;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transition: all cubic-bezier(0.01, 1.06, 0.83, 0.88) .3s;
  }
  section .cv .ref-sec p.show{
    top: 0;
    opacity: 1;
  }
  section .cv .ref-sec p.go{
    top: 20px;
    opacity: 0;
  }
  section .cv .description{
    position: relative;
    width: 50%;
    max-width: 500px;
    min-width: 200px;
    height: auto;
    margin: 200px auto 300px auto;
    font-size: 1.2em;
    font-weight: 300;
    text-align: center;
    line-height: 1.3;
  }
  section .cv .timeline{
    width: calc(100% - 474px);
    margin-bottom: 300px;
  }
    section .cv .timeline .point{
      position: relative;
      width: 100%;
      height: auto;
      margin-bottom: 110px;
      display: inline-block;
    }
    section .cv .timeline .point:nth-child(odd){padding-left: 100px;}
    section .cv .timeline .point:nth-child(even){padding-right: 100px;}
    section .cv .timeline .point:last-child{margin-bottom: 0;}
    section .cv .timeline .point .image{
      position: absolute;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      opacity: .06;
    }
    section .cv .timeline .point:nth-child(1) .image{
      width: 260px;
      height: 260px;
      bottom: -150px;
      left: 0;
    }
    section .cv .timeline .point:nth-child(2) .image{
      width: 400px;
      height: 260px;
      bottom: -150px;
      right: 0;
    }
    section .cv .timeline .point:nth-child(3) .image{
      width: 280px;
      height: 190px;
      top: -200px;
      left: 140px;
    }
    section .cv .timeline .point:nth-child(4) .image{
      width: 290px;
      height: 170px;
      top: -200px;
      right: 130px;
    }
    section .cv .timeline .point:nth-child(5) .image{
      width: 380px;
      height: 220px;
      bottom: -250px;
      left: 130px;
    }
    section .cv .timeline .point .year{
      position: relative;
    }
    section .cv .timeline .point:nth-child(odd) .year{
      float: left;
    }
    section .cv .timeline .point:nth-child(even) .year{
      float: right;
    }
      section .cv .timeline .point .year p.from{
        position: relative;
        font-size: 7em;
        font-family: 'axisextra_bold';
        letter-spacing: -2px;
        text-transform: uppercase;
        text-rendering: geometricPrecision;
        -webkit-text-stroke: 1px white;
      }
      section .cv .timeline .point .year p.from-back{
        position: absolute;
        bottom: -6px;
        left: 6px;
        opacity: .05;
      }
      section .cv .timeline .point .year p.to{
        position: absolute;
        bottom: -12px;
        right: 10px;
        font-size: 1.1em;
        font-weight: 100;
        padding-left: 14px;
      }
      section .cv .timeline .point .year .to::before{
        content:"";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 1px;
        background-color: white;
        opacity: 1;
      }
    section .cv .timeline .point .info{
      position: relative;
      margin-top: 16px;
    }
    section .cv .timeline .point:nth-child(odd) .info{
      float: left;
      text-align: left;
      margin-left: 40px;
    }
    section .cv .timeline .point:nth-child(even) .info{
      float: right;
      text-align: right;
      margin-right: 40px;
    }
      section .cv .timeline .point .info p{
        position: relative;
        font-size: 1.2em;
        font-weight: 100;
        text-transform: uppercase;
        margin-bottom: 5px;
      }
      section .cv .timeline .point .info p:last-child{margin-bottom: 0;}
      section .cv .timeline .point .info p.study{font-weight: 400;}
  section .cv .skills{
    width: calc(100% - 474px);
    display: -webkit-box;
    display: flex;
  }
  section .cv .skills .container{
    position: relative;
    width: 100%;
    height: auto;
  }
    section .cv .skills .container .column{
      position: relative;
      float: left;
      width: calc(50% - 100px);
      height: auto;
    }
    section .cv .skills .container .column:nth-child(1){margin-bottom: 150px;}
    section .cv .skills .container .column:nth-child(2){margin-bottom: 150px;}
    section .cv .skills .container .column:nth-child(even){
      float: right;
    }
      section .cv .skills .container .column .software{
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 50px;
      }
      section .cv .skills .container .column .software:last-child{margin-bottom: 0}
      section .cv .skills .container .column .software p{
        position: relative;
        font-size: 1.4em;
        font-weight: 400;
        letter-spacing: .5px;
        text-transform: uppercase;
      }
      section .cv .skills .container .column .software .puntuation{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        width: 50%;
        height: 4px;
      }
        section .cv .skills .container .column .software .puntuation .ref-bar{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          width: 100%;
          height: 2px;
          background-color: white;
          opacity: .2;
        }
        section .cv .skills .container .column .software .puntuation .ref-puntuation{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          height: 4px;
          background-color: white;
          opacity: 1;
          transition: width ease-in-out .6s;
        }
        .cv .skills .container .column .software .puntuation .ref-puntuation.ciego{
          width: 0 !important;
        }
  .open-photo, .open-video{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    display: none;
  }
  .open-photo .bg, .open-video .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #151D1E;;
    opacity: .97;
  }
  .open-photo .bg::after, .open-video .bg::after{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/noise.gif);
    opacity: .04;
    z-index: -1;
  }
  .open-photo .image{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 50px;
    opacity: 0;
    box-shadow: 0px 13px 50px 0px rgba(0,0,0,.3);
    transition: all cubic-bezier(0.35, 0.34, 0, 0.99) .3s;
    display: inline-block;
  }
  .open-photo .image.on{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    margin-top: 0;
  }
  .open-video .video{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 50px;
    opacity: 0;
    box-shadow: 0px 13px 50px 0px rgba(0,0,0,.3);
    transition: all cubic-bezier(0.35, 0.34, 0, 0.99) .3s;
    width: 70%;
    height: auto;
    z-index: 1;
  }
  .open-video .video.on{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    margin-top: 0;
  }
  .open-video .video .video-wrap{
    width: 100%;
  }
  .open-video .video .video-wrap video{
    width: 100%;
    border: 0;
    outline: 0;
  }
  .open-video .video .controls{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
  }
  .open-video .video .controls .buttons{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 30px 0 30px;
    transition: all ease-in-out .3s;
  }
  .open-video .video .controls .buttons.playing{opacity: 0;}
  .open-video .video:hover .controls .buttons.playing{opacity: 1;}
  .open-video .video:hover .controls .buttons{opacity: 1;}
  .open-video .video .controls .buttons button{
    position: relative;
    background: transparent;
    width: 20px;
    height: 20px;
    border: 0;
    outline: 0;
    margin-right: 30px;
  }
  .open-video .video .controls .buttons button:last-child{margin-right: 0;}
  .open-video .video .controls .buttons button::after{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .open-video .video .controls .buttons button.play-pause::after{background-image: url("../img/icon/play.png");}
  .open-video .video .controls .buttons.playing button.play-pause::after{background-image: url("../img/icon/pause.png");}
  .open-video .video .controls .buttons button.reset::after{background-image: url("../img/icon/reset.png");}
  .open-video .video .controls .time{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    overflow: hidden;
  }
  .open-video .video .controls .time .time-ref{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
    opacity: .2;
  }
  .open-video .video .controls .time .timing{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-color: rgba(54, 89, 214, 0.9);
    box-shadow: 16px 0px 20px 0 rgba(0,0,0,.9)
  }
  .open-photo .image.wm{
    width: 70%;
    height: auto;
  }
  .open-photo .image.uwm{
    width: 90%;
    height: auto;
  }
  .open-photo .image.wm img.dynamic, .open-photo .image.uwm img.dynamic{
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
  }
  .open-photo .image.hm, .open-photo .image.cm{
    width: auto;
    height: 80%;
  }
  .open-photo .image.hm img.dynamic, .open-photo .image.cm img.dynamic{
    height: 100%;
  }
  .open-photo .go-back, .open-video .go-back{
    position: fixed;
    bottom: -70px;
    right: -70px;
    width: 145px;
    height: 145px;
    background-color: #1b1f1d;
    border-radius: 100%;
    box-shadow: -3px -3px 20px rgba(0,0,0,.1);
    display: none;
    z-index: 2;
  }
  .open-photo .go-back .icon, .open-video .go-back .icon{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-200%, -200%) rotate(45deg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url("../img/icon/cursor-zoom.png");
  }
  .contact-sec{
    position: relative;
    width: 100%;
    height: calc(100vh - 201px);
    display: inline-block;
  }
    .contact-sec p.mail{
      position: absolute;
      top: calc(50% + (201px / 3));
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
      height: auto;
      font-size: 4.6em;
      letter-spacing: -2px;
      font-weight: 300;
    }
    .contact-sec p.mail::after{
      content: "";
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      max-width: 924px;
      width: 55vw;
      height: 3px;
      background-color: white;
    }
/*PROJECTS*/
.title-t{
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 300px;
  margin-bottom: 200px;
}
  .title-t p{
    position: relative;
    text-align: center;
    font-size: 7em;
    font-family: 'axisextra_bold';
    letter-spacing: -2px;
    text-transform: uppercase;
    text-rendering: geometricPrecision;
    text-align: center;
    z-index: 1;
    margin-left: -5px;
    white-space: nowrap;
    color: transparent;
  }
  .title-t p.projects{-webkit-text-stroke: 1px white;}
  .title-t p.collections{-webkit-text-stroke: 2px white;}
  .title-t p::after{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 7px 0 0 7px;
    opacity: .06;
    z-index: -1;
    -webkit-text-stroke: 0;
    color: white;
  }
  .title-t p.projects::after{content:"Proyectos";}
  .title-t p.collections::after{content:"Colecciones"; opacity:.2;}
    #projects-sec .wrap article:nth-child(odd) .image {
      float: left;
    }
    #projects-sec .wrap article:nth-child(even) .image {
      float: right;
    }
    #projects-sec .wrap article:nth-child(odd) .title h2 {
      text-align: right;
    }
    #projects-sec .wrap article:nth-child(even) .title h2 {
      text-align: left;
    }
    #projects-sec .wrap article:nth-child(odd) .title .tags{
      right: inherit;
      margin-right: 0;
      left: calc(59vw - (460px / 2));
      margin-left: 50px;
    }
    #projects-sec .wrap article:nth-child(even) .title .tags{
      left: inherit;
      margin-left: 0;
      right: calc(59vw - (460px / 2));
      margin-right: 50px;
    }
    #projects-sec .wrap article:nth-child(odd) .title p.number{
      right: inherit;
      margin-right: 0;
      padding-right: 0;
      left: calc(59vw - (460px / 2));
      margin-left: 50px;
      padding-left: 22px;
    }
    #projects-sec .wrap article:nth-child(even) .title p.number{
      left: inherit;
      margin-left: 0;
      padding-left: 0;
      right: calc(59vw - (460px / 2));
      margin-right: 50px;
      padding-right: 22px;
    }
    #projects-sec .wrap article:nth-child(odd) .title p.number::after {
      right: inherit;
      left: 0;
    }
    #projects-sec .wrap article:nth-child(even) .title p.number::after {
      right: 0;
      left: inherit
    }
/*COLLECTIONS*/
  #collections-sec .collection{
    margin-top: 0;
    background-color: transparent;
    padding-bottom: 0;
  }
  #collections-sec .collection .wrap{
    padding-top: 0px;
  }
  #collections-sec .load-more{
    position: relative;
    width: 100%;
    height: auto;
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 150px;
  }
  #collections-sec .load-more .button{
    position: relative;
    display: inline-block;
    padding: 22px 60px 18px 60px;
    border: solid white 2px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  #collections-sec .load-more .button p{
    position: relative;
    font-size: 1.3em;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }
  #collections-sec  .collection .wrap .row:last-child{margin-bottom: 0;}
  #collections-sec  .collection .wrap .row:nth-last-child(2){}
  #collections-sec .filters{
    position: fixed;
    bottom: 100px;
    left: 120px;
    width: 10px;
    z-index: 2;
  }
  #collections-sec .filters p{
    position: relative;
    font-size: .9em;
    font-weight: 400;
    color: #323232;
    transform: rotate(-90deg);
    transform-origin: left;
    text-transform: uppercase;
    padding-left: 20px;
  }
  #collections-sec .filters p::after{
    content:"";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -1px;
    height: 1px;
    width: 15px;
    background-color: #323232;
  }
  #collections-sec .filters.p-appear{margin-bottom: 100px;}
  #collections-sec .filters.p-appear p{color: white;}
  #collections-sec .filters.p-appear p::after{
    content:"";
    position: absolute;
    right: 5px;
    left: inherit;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    height: 1px;
    margin-top: -1px;
    width: 8px;
    background-color: white;
  }
  #collections-sec .filters.p-appear p::before{
    content:"";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    height: 1px;
    margin-top: -1px;
    width: 8px;
    background-color: white;
  }
  #collections-sec .filters-page{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    display: none;
  }
  #collections-sec .filters-page .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #D2D2D2;
    opacity: .98;
  }
  #collections-sec .filters-page .bg::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/noise.gif);
    opacity: .05;
    z-index: -1;
  }
  #collections-sec .filters-page .go-back{
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-color: transparent;
    border-radius: 100%;
    display: none;
  }
  #collections-sec .filters-page .go-back .icon{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%) rotate(45deg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url("../img/icon/cursor-zoom.png");
  }
  #collections-sec .filters-page ul{
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 50px;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  #collections-sec .filters-page ul li{
    font-size: 3em;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: center;
    transition: all ease-in-out .3s;
    margin-left: 20px;
    opacity: 0;
  }
  #collections-sec .filters-page ul li:nth-child(1){transition-delay: 0s}
  #collections-sec .filters-page ul li:nth-child(2){transition-delay: .1s}
  #collections-sec .filters-page ul li:nth-child(3){transition-delay: .2s}
  #collections-sec .filters-page ul li:nth-child(4){transition-delay: .3s}
  #collections-sec .filters-page ul li:nth-child(5){transition-delay: .4s}
  #collections-sec .filters-page.on ul li{
    margin-left: 0;
    opacity: 1;
  }
  #collections-sec .filters-page ul li:last-child{margin-bottom: 0;}
  #collections-sec .filters-page ul li input{display: none}
  #collections-sec .filters-page ul li label{position: relative;}
  #collections-sec .filters-page ul li label::after{
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 3px;
    background-color: white;
    transition: all ease-in-out .2s
  }
  #collections-sec .filters-page ul li input:checked+label::after{
    width: 120%;
  }
#project-ind-sec.bgpwhite{
  background-color: #D2D2D2;
}
#project-ind-sec{
  position: relative;
}
#project-ind-sec .structure-lines{opacity: 0; position: fixed;}
#project-ind-sec.bgpwhite .structure-lines{opacity: 1;}
#project-ind-sec.bgpwhite .structure-lines .line{opacity: .13;}
#project-ind-sec.bgpwhite::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/noise.gif);
    opacity: .04;
    z-index: 0;
}
#project-ind-sec .top-red-ref{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 2;
  display: none;
}
#project-ind-sec .top-red-ref .fix{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: .08;
}
#project-ind-sec .top-red-ref .progres{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: white;
  box-shadow: 0 0 0 0 rgba(0,0,0,.3);
}
#project-ind-sec .wrap{
  margin: 0 auto;
  padding-top: 130px;
}
#project-ind-sec.bgpwhite .wrap{z-index: 1;}
#project-ind-sec .read-ref{
  position: fixed;
  bottom: 0;
  left: 117px;
  width: 3px;
  height: 40vh;
  max-height: 300px;
  min-height: 200px;
  z-index: 1;
}
  #project-ind-sec .read-ref .box{
    position: relative;
    width: 100%;
    height: 100%;
  }
    #project-ind-sec .read-ref .box .reference{
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 100%;
      background-color: white;
      opacity: .08;
    }
    #project-ind-sec.bgpwhite .read-ref .box .reference{opacity: .45;}
    #project-ind-sec .read-ref .box .reading{
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      background-color: white;
      box-shadow: 0px 13px 14px 0 rgba(0,0,0,.5);
      transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) .2s;
    }
    #project-ind-sec.bgpwhite .read-ref .box .reading{box-shadow: 0px 13px 14px 0 rgba(0,0,0,.06);}
#project-ind-sec .wrap .project-a{
  position: relative;
  width: calc(100% - 122px);
  height: calc(100vh - 130px);
  min-height: 500px;
  padding-top: 60px;
  display: inline-block;
}
#project-ind-sec .wrap .project-a .scroll-guide{margin-left: 60px;}
  #project-ind-sec .wrap .project-a .title-a{
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 1;
  }
    #project-ind-sec .wrap .project-a .title-a h2{
      font-size: 9em;
      text-transform: uppercase;
      text-align: left;
      font-family: 'axisextra_bold';
      letter-spacing: -2px;
      white-space: nowrap;
      text-rendering: geometricPrecision;
      line-height: 1.1;
    }
  #project-ind-sec .wrap .project-a .image-a{
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    float: right;
    width: calc(100% - 120px);
    height: calc(100vh - 420px);
    min-height: 20vw;
    box-shadow: 0px 13px 50px 0px rgba(0,0,0,.2);
  }
  #project-ind-sec.bgpwhite .wrap .project-a .image-a{
    box-shadow: 0px 13px 50px 0px rgba(0,0,0,.2);
  }
  #project-ind-sec .wrap .project-a .info-a{
    position: relative;
    width: calc(100% - 120px);
    float: right;
    margin-top: 30px;
  }
    #project-ind-sec .wrap .project-a .info-a .data-a{
      position: relative;
      float: left;
      margin-right: 50px;
      width: calc(100% - 50px);
      max-width: 250px;
      height: auto;
    }
    #project-ind-sec .wrap .project-a .info-a .data-a:last-child{margin-right: 0;}
      #project-ind-sec .wrap .project-a .info-a .data-a .dca{
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 10px;
      }
      #project-ind-sec .wrap .project-a .info-a .data-a .dca:last-child{margin-bottom: 0;}
        #project-ind-sec .wrap .project-a .info-a .data-a .dca p{
          font-size: .9em;
          text-transform: uppercase;
          font-weight: 400;
        }
        #project-ind-sec .wrap .project-a .info-a .data-a .dca p:first-child{
          font-size: .7em;
          font-weight: 200;
          margin-bottom: 5px;
        }
        #project-ind-sec .wrap .project-a .info-a .data-a .dca .tags p{
          position: relative;
          font-size: .9em;
          text-transform: uppercase;
          font-weight: 400;
          float: left;
          margin-left: 10px;
          padding-left: 10px;
        }
        #project-ind-sec .wrap .project-a .info-a .data-a .dca .tags p:first-child{margin: 0; padding: 0;}
        #project-ind-sec .wrap .project-a .info-a .data-a .dca .tags p::after{
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 2px;
          height: 2px;
          background-color: white;
          border-radius: 100%;
        }
        #project-ind-sec .wrap .project-a .info-a .data-a .dca .tags p:first-child::after{display: none;}
    #project-ind-sec .wrap .project-a .info-a .data-a.description p{
      font-size: .9em;
      font-weight: 300;
      line-height: 1.2;
    }
#project-ind-sec .wrap .credit{
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 100px;
  padding-left: 60px;
}
  #project-ind-sec .wrap .credit h6{
    position: relative;
    font-size: 1.5em;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 30px;
  }
  #project-ind-sec .wrap .credit .co-work{
    position: relative;
    width: auto;
    margin-top: 20px;
  }
    #project-ind-sec .wrap .credit .co-work p{
      position: relative;
      display: block;
      font-size: .9em;
      font-weight: 200;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    #project-ind-sec .wrap .credit .co-work a, #project-ind-sec .wrap .credit .co-work p.no-link{
      position: relative;
      display: inline-block;
      font-size: 1.1em;
      font-weight: 400;
      text-transform: uppercase;
      padding-bottom: 5px;
    }
    #project-ind-sec .wrap .credit .co-work a::after{
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: white;
      transition: all cubic-bezier(0, 0, 0.2, 1) .2s;
    }
    #project-ind-sec .wrap .credit .co-work a:hover::after{
      width: 100%;
    }
#project-ind-sec .wrap .project-e-wrap{
  position: relative;
  width: calc(100% - 120px);
  margin: 0 auto;
  height: auto;
  padding-top: 150px;
}
  #project-ind-sec .wrap .project-e-wrap .e{
    position: relative;
    width: 100%;
    height: auto;
    display: inline-block;
  }
  #project-ind-sec .wrap .project-e-wrap .e:first-child .container{margin-top: 0 !important;}
  #project-ind-sec .wrap .project-e-wrap .e:last-child .container{margin-bottom: 0 !important;}
    #project-ind-sec.bgpwhite .wrap .project-e-wrap .e .container .ewrap p.footimage{color: #323232}
    #project-ind-sec .wrap .project-e-wrap .e img{
      position: relative;
      width: 100%;
      height: auto;
      display: block;
      box-shadow: 0px 13px 50px 0px rgba(0,0,0,.2);
    }
    #project-ind-sec .wrap .project-e-wrap .e .container .ewrap.left{float: left !important;}
    #project-ind-sec .wrap .project-e-wrap .e .container .ewrap.right{float: right !important;}
    #project-ind-sec .wrap .project-e-wrap .e .container .ewrap.center{float: none !important; margin-left: auto !important; margin-right: auto !important;}
    #project-ind-sec .wrap .project-e-wrap .e .container{
      position: relative;
      width: 100%;
      height: auto;
      display: inline-block;
    }
    #project-ind-sec .wrap .project-e-wrap .e img-required, #project-ind-sec .wrap .project-e-wrap .e text-required{width: 100%;}
    #project-ind-sec .wrap .project-e-wrap .e img-required, #project-ind-sec .wrap .project-e-wrap .e text-required{display: inline-block;}
    #project-ind-sec .wrap .project-e-wrap .e img-required .container .ewrap{
      position: relative;
    }
    #project-ind-sec .wrap .project-e-wrap .e .container .ewrap .media-icon, section .collection .wrap .row .post .image .media-icon{
      position: absolute;
      top: 10px;
      right: 10px;
      width: 12px;
      height: 12px;
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      z-index: 1;
      display: none;
      opacity: .8;
    }
    #project-ind-sec .wrap .project-e-wrap .e img-required .container .ewrap .media-icon, section .collection .wrap .row .post .image .media-icon.img{
      background-image: url("../img/icon/icon-zoom.png");
    }
    #project-ind-sec .wrap .project-e-wrap .e video-required .container .ewrap .media-icon, section .collection .wrap .row .post .image .media-icon.video{
      background-image: url("../img/icon/play.png");
    }
    #project-ind-sec .wrap .project-e-wrap .e img-required .container .ewrap img{
      width: 100%;
      display: inline-block;
      box-shadow: 0px 13px 50px 0px rgba(0,0,0,.2);
    }
    #project-ind-sec .wrap .project-e-wrap .e img-required .container .ewrap img.png{
      box-shadow: none;
    }
    #project-ind-sec .wrap .project-e-wrap .e .container .ewrap p.footimage{
      position: relative;
      font-size: 1em;
      font-weight: 300;
      margin: 20px 0 0 20px;
    }
    #project-ind-sec .wrap .project-e-wrap .e .container .ewrap p.footimage.lateral{
      position: absolute;
      transform: rotate(-90deg) translateX(100%);
      transform-origin: top right;
      right: -40px;
      bottom: 5%;
      font-size: 1em;
      font-weight: 300;
    }
    #project-ind-sec .wrap .project-e-wrap .e img-required .container.galery-box .ewrap{
      position: relative;
      width: calc((100% / 3) - ((60px / 3) * 2));
      float: left;
      margin-left: 60px;
      height: auto;
      margin-bottom: 60px;
    }
    #project-ind-sec .wrap .project-e-wrap .e img-required .container.galery-box .ewrap:nth-child(3n+1){
      margin-left: 0;
      clear: both;
    }
    #project-ind-sec .wrap .project-e-wrap .e text-required .container .ewrap p{
      position: relative;
      margin-bottom: 10px;
    }
    #project-ind-sec .wrap .project-e-wrap .e text-required .container .ewrap p:last-child{
      margin-bottom: 0;
    }
    #project-ind-sec .wrap .project-e-wrap .e text-required .container .ewrap p.title{
      font-size: 1.3em;
      font-weight: 500;
      text-transform: uppercase;
    }
    #project-ind-sec .wrap .project-e-wrap .e text-required .container .ewrap p.text{
      font-size: 1.1em;
      font-weight: 300;line-height: 1.2;
      margin-bottom: 0;
    }
    #project-ind-sec .wrap .project-e-wrap .e text-required .container.quote .ewrap p.text{
      font-size: 3em;
      max-width: 800px;
    }
    #project-ind-sec .wrap .project-e-wrap .e text-required .container.quote .ewrap p.text::before, #project-ind-sec .wrap .project-e-wrap .e text-required .container.quote .ewrap p.text::after{
      position: relative;
      content: "'";
    }
    #project-ind-sec .wrap .project-e-wrap .e text-required .container .ewrap a{
      position: relative;
      font-size: 1.1em;
      font-weight: 300;
      padding-left: 10px;
      display: inline-block;
      margin-top: 10px;
    }
    #project-ind-sec .wrap .project-e-wrap .e text-required .container .ewrap a::after{
      content:"";
      position: absolute;
      top: 50%;
      margin-top: -1px;
      left: 0;
      width: 5px;
      height: 2px;
      background-color: white;
    }
    #project-ind-sec .wrap .project-e-wrap .e video-required .c-video{position: relative; width: 100%; height: auto;}
    #project-ind-sec .wrap .project-e-wrap .e video-required video{
      width: 100%;
      height: auto;
      display: block;
      box-shadow: 0px 13px 50px 0px rgba(0,0,0,.2);
    }
    #project-ind-sec .next-project{
      position: relative;
      width: 100%;
      height: calc(40vh + 350px);
      height: 100vh;
      margin: 0 auto;
      margin-top: 100px;
      overflow: hidden;
      z-index: 1;
    }
    #project-ind-sec .next-project .next{
      position: absolute;
      top: calc(50% - 50px);
      transform: translateY(-50%);
      left: 0;
      width: 100%;
      z-index: 3;
    }
    #project-ind-sec .next-project .next p{
      position: relative;
      width: 100%;
      text-transform: uppercase;
      text-align: center;
      white-space: nowrap;
    }
    #project-ind-sec .next-project .next p.title-n{
      font-size: 5em;
      font-family: 'axisextra_bold';
      letter-spacing: -2px;
      text-rendering: geometricPrecision;
      line-height: 1.1;
    }
    #project-ind-sec .next-project .next .button-box{
      position: relative;
      margin-left: 50%;
      margin-top: 20px;
      transform: translateX(-50%);
      z-index: 3;
    }
    #project-ind-sec .next-project .bg-opacity{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: black;
      opacity: .5;
      z-index: 2;
    }
    #project-ind-sec .next-project .b{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    #project-ind-sec .next-project .b.blue{
      background-color: #8f53ef;
      background-blend-mode: color-dodge;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.30;
      z-index: 2;
    }
    #project-ind-sec .next-project .b.green{
      background-color: #a5f5da;
      background-blend-mode: luminosity;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 1;
      z-index: 1;
    }
    #project-ind-sec .next-project .img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      transition: all cubic-bezier(0.01, 0.56, 0.4, 1.13) .6s;
    }
    #project-ind-sec .next-project .img.plus-size{
      transform: scale(1.02);
    }
    #project-ind-sec .next-project .noise{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(../img/noise.gif);
      opacity: .07;
      z-index: 3;
    }
#cookies-sec .wrap{
  max-width: 800px;
  padding: 350px 0 100px 0;
  margin: 0 0 0 235px;
}
#cookies-sec .tem{
  position: relative;
  margin-bottom: 200px;
}
#cookies-sec .tem:last-child{
  margin-bottom: 0;
}
#cookies-sec p{
  position: relative;
}
#cookies-sec p.title{
  font-size: 4em;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 50px;
  letter-spacing: 1px;
}
#cookies-sec p.subtitle{
  font-size: 1.5em;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 30px;
  margin-top: 50px;
  letter-spacing: 1px;
}
#cookies-sec p.base-text{
  font-size: 1.2em;
  font-weight: 200;
  line-height: 1.2;
  margin-bottom: 20px;
}
#cookies-sec p.base-text:last-child{margin-bottom: 0;}
#cookies-sec ul{margin-bottom: 50px;}
#cookies-sec ul li{
  position: relative;
  font-size: 1.2em;
  font-weight: 200;
  line-height: 1.2;
  margin-bottom: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
  margin-left: 10px;
}
#cookies-sec ul li::before{
  content:"";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 100%;
  background-color: white;
}
#cookies-sec ul li:last-child{margin-bottom: 0;}
.not-content{
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../img/404.jpg");
  background-color: #151D1E;
  background-blend-mode: lighten;
  z-index: -1;
}
#cookies-sec .wrap :last-child{margin-bottom: 0;}
.not-content .footer{
  position: absolute;
  left: 0;
  bottom: 0;
}
.not-content .wrap{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.not-content .wrap p.not{
  font-size: 40em;
  text-align: center;
  font-weight: 900;
  font-family: 'axisextra_bold';
  letter-spacing: -2px;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
}
.not-content .wrap p.ups{
  font-size: 1.5em;
  text-align: center;
  font-weight: 300;
  margin-top: -50px;
}
#projects-sec .open-minimum{
  position: fixed;
  left: 111px;
  bottom: 100px;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url("../img/icon/minimum-list.png");
}
#projects-sec .container-list-p{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  display: none;
  scroll-behavior: smooth;
}
#projects-sec .container-list-p .bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #151D1E;
  opacity: .97;
}
#projects-sec .container-list-p .bg::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/noise.gif);
  opacity: .04;
  z-index: -1;
}
#projects-sec .container-list-p .list-p{
  position: relative;
  width: 600px;
  height: auto;
  padding-left: 100px;
  padding-top: 100px;
  padding-bottom: 100px;
  overflow-y: scroll;
  max-height: 100vh;
  scroll-behavior: smooth;
  opacity: 0;
  margin-top: 30px;
  transition: all ease-in-out .3s;
  transition-delay: .5;
}
#projects-sec .container-list-p.on .list-p{
  opacity: 1;
  margin-top: 0;
}
#projects-sec .container-list-p .list-p .project-in-list{
  position: relative;
  padding-bottom: 40px;
  margin-bottom: 40px;
  width: auto;
  height: auto;
  display: flex;
}
#projects-sec .container-list-p .list-p .project-in-list:last-child{margin-bottom: 0; padding-bottom: 0;}
#projects-sec .container-list-p .list-p .project-in-list .id-list{
  position: relative;
  width: 50px;
  height: 100px;
  float: left;
  margin-right: 20px;
}
#projects-sec .container-list-p .list-p .project-in-list .id-list p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: 200;
}
#projects-sec .container-list-p .list-p .project-in-list .p-l-img{
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0px 13px 50px 0px rgba(0,0,0,.2);
}
#projects-sec .container-list-p .list-p .project-in-list .p-l-text{
  position: relative;
  width: auto;
  height: auto;
  float: left;
  font-size: 2em;
  font-weight: 300;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  padding: 30px;
}
#projects-sec .container-list-p .list-p .project-in-list .p-l-text p:first-child{margin-bottom: 3px;}