@import url(https://fonts.googleapis.com/css?family=Raleway:200,300,400);@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300);@font-face {
  font-family: 'gilroyextrabold';
  src: url(f3131e9bab3fa3b9d1108873f2df7a9f.woff2) format("woff2"), url(a543f98166fe7bf3c52d0f84a14928f5.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'gilroylight';
  src: url(1afbb6a1b97dc0597991eecccf7c3c0a.woff2) format("woff2"), url(1586afd6ff18d5a3eb142cb3fa7d773e.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

.intro {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  padding: 4vw;
  box-sizing: border-box;
  background: white;
  z-index: 9999;
  transition: transform 850ms, width 850ms, opacity 350ms; }
  .intro.transition {
    transform: translateY(-101%); }
    .intro.transition .intro_logo,
    .intro.transition .intro_enter {
      opacity: 0; }
  .intro_enter {
    display: block;
    width: 12vw;
    height: 12vw;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6vw;
    margin-top: -6vw;
    background: rgba(255, 255, 255, 0.5);
    text-indent: -9999px;
    overflow: hidden;
    mix-blend-mode: soft-light;
    transition: width 2s, height 2s, margin 2s, opacity 350ms; }
    .intro_enter::after {
      content: '';
      display: block;
      width: 101%;
      height: 120%;
      top: 0;
      left: 0;
      background: white;
      transform: translateY(101%);
      transition: transform 2s; }
    .intro_enter:hover {
      width: 18vw;
      height: 18vw;
      margin-top: -9vw;
      margin-left: -9vw; }
      .intro_enter:hover::after {
        transform: translateY(-10%); }
  .intro_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8vw;
    height: 3vw;
    margin-top: -1.5vw;
    margin-left: -4vw;
    pointer-events: none;
    transition: opacity 350ms; }
    .intro_logo svg {
      display: block;
      width: 100%;
      height: auto; }

.contact {
  display: block;
  width: 4vw;
  height: 4vw;
  text-indent: -9999px;
  position: relative; }
  @media screen and (max-width: 750px) {
    .contact {
      display: inline-block;
      width: auto;
      height: auto;
      padding: 2vw 0;
      text-indent: 0; } }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
  .contact::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: transparent url(261d82079e56cf0fc531e51d824cf330.svg) center center no-repeat;
    background-size: contain;
    animation: 20s rotate linear infinite; }
    @media screen and (max-width: 750px) {
      .contact::before {
        display: none; } }
  .contact .dot {
    display: block;
    width: .7vw;
    height: .7vw;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.35vw;
    margin-left: -.35vw;
    transform-origin: center center;
    border-radius: 100%;
    background-image: url(e8f95b780a3f4e6bafd69ad857a8e574.png);
    background-position: center center;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-color: black;
    transform: translateX(0) translateY(0);
    transition: width 250ms, height 250ms, margin 250ms, background-color 250ms; }
    @media screen and (max-width: 750px) {
      .contact .dot {
        display: inline-block;
        text-indent: 0;
        width: auto;
        height: auto;
        position: relative;
        top: auto;
        left: auto;
        background: transparent;
        font-size: 2.5vw;
        padding: 1.2vw 2.4vw;
        color: white; }
        .contact .dot::before {
          content: '';
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: black;
          transition: 350ms;
          z-index: -1; } }
  @media screen and (min-width: 750px) {
    .contact:hover .dot {
      width: 4.6vw;
      height: 4.6vw;
      margin-top: -2.3vw;
      margin-left: -2.3vw;
      background-color: rgba(0, 0, 0, 0.1); } }

.contact-popin {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  opacity: 1;
  background: white;
  z-index: 100;
  transform: translateY(100%);
  transition: transform 850ms; }
  .contact-popin.open {
    transform: translateY(0); }

.contact-popin__frame, .contact-slide__frame {
  width: 100%;
  height: 100%;
  padding: 1vw;
  box-sizing: border-box; }
  @media screen and (max-width: 750px) {
    .contact-popin__frame, .contact-slide__frame {
      padding: 7vw; } }
  .contact-popin__frame .cover, .contact-slide__frame .cover {
    width: 78%;
    height: 100%;
    overflow: hidden; }
    @media screen and (max-width: 750px) {
      .contact-popin__frame .cover, .contact-slide__frame .cover {
        position: relative;
        width: 100%;
        height: 40vh; } }

@keyframes zoom {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }
    .contact-popin__frame .cover img, .contact-slide__frame .cover img {
      position: relative;
      display: block;
      width: 105%;
      height: 100%;
      object-fit: cover;
      animation: 30s zoom infinite; }
    .contact-popin__frame .cover h2, .contact-slide__frame .cover h2 {
      position: absolute;
      bottom: 12vh;
      left: 4vw;
      color: white;
      font-family: "Roboto Condensed", "Helvetica Neue", helvetica, sans-serif;
      font-size: 1.2vw;
      letter-spacing: .2vw;
      line-height: 4.6vw;
      text-transform: uppercase;
      margin-bottom: 3vh; }
      @media screen and (max-width: 750px) {
        .contact-popin__frame .cover h2, .contact-slide__frame .cover h2 {
          font-size: 3vw;
          bottom: 5vw; } }
      .contact-popin__frame .cover h2 span, .contact-slide__frame .cover h2 span {
        font-family: "gilroyextrabold", "Helvetica Neue", helvetica, sans-serif;
        font-size: 7.7vw; }
  .contact-popin__frame .infos, .contact-slide__frame .infos {
    position: absolute;
    bottom: 20vh;
    left: 78%;
    display: block;
    width: 15%;
    padding-left: 2vw; }
    @media screen and (max-width: 750px) {
      .contact-popin__frame .infos, .contact-slide__frame .infos {
        width: 70%;
        left: 7vw;
        bottom: auto;
        top: 50vh; } }
    .contact-popin__frame .infos svg, .contact-slide__frame .infos svg {
      width: 33%;
      height: auto;
      margin-bottom: 7vh; }
      @media screen and (max-width: 750px) {
        .contact-popin__frame .infos svg, .contact-slide__frame .infos svg {
          margin-bottom: 4vw; } }
    .contact-popin__frame .infos ul, .contact-popin__frame .infos ul li, .contact-slide__frame .infos ul, .contact-slide__frame .infos ul li {
      list-style: none; }
    .contact-popin__frame .infos li, .contact-slide__frame .infos li {
      margin-bottom: 1vh;
      font-size: .8vw; }
      @media screen and (max-width: 750px) {
        .contact-popin__frame .infos li, .contact-slide__frame .infos li {
          font-size: 3vw; } }
      .contact-popin__frame .infos li a, .contact-slide__frame .infos li a {
        color: black; }
      .contact-popin__frame .infos li.corpo, .contact-slide__frame .infos li.corpo {
        padding-top: 1vw; }
        .contact-popin__frame .infos li.corpo a, .contact-slide__frame .infos li.corpo a {
          color: #cccccc; }

.contact-popin_close, .contact-slide_close {
  position: absolute;
  top: 4vw;
  right: 4vw;
  display: block;
  width: 2vw;
  height: 2vw;
  background: transparent;
  text-indent: -9999px;
  overflow: hidden; }
  @media screen and (max-width: 750px) {
    .contact-popin_close, .contact-slide_close {
      top: 50vh;
      right: 10vw;
      width: 6vw;
      height: 6vw; } }
  .contact-popin_close::before, .contact-popin_close::after, .contact-slide_close::before, .contact-slide_close::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    background: black;
    transform: rotate(-45deg); }
    @media screen and (max-width: 750px) {
      .contact-popin_close::before, .contact-popin_close::after, .contact-slide_close::before, .contact-slide_close::after {
        height: .7vw; } }
  .contact-popin_close::after, .contact-slide_close::after {
    transform: rotate(45deg); }

.contact-popin .refs__item_details, .contact-slide .refs__item_details {
  width: 100%;
  height: 100vh;
  padding: 1vw;
  margin-left: 0;
  box-sizing: border-box; }
  @media screen and (max-width: 750px) {
    .contact-popin .refs__item_details, .contact-slide .refs__item_details {
      padding: 7vw; } }
  .contact-popin .refs__item_details .frame, .contact-slide .refs__item_details .frame {
    width: 78% !important;
    height: 100%;
    padding: 0;
    overflow: hidden; }
    @media screen and (max-width: 750px) {
      .contact-popin .refs__item_details .frame, .contact-slide .refs__item_details .frame {
        position: relative;
        width: 100% !important;
        height: 40vh; } }
    .contact-popin .refs__item_details .frame .cover, .contact-slide .refs__item_details .frame .cover {
      display: block;
      width: 100%;
      height: 100%; }

@keyframes zoom {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }
    .contact-popin .refs__item_details .frame img, .contact-slide .refs__item_details .frame img {
      position: relative;
      display: block;
      width: 105%;
      height: 100%;
      object-fit: cover;
      animation: 30s zoom infinite; }
  .contact-popin .refs__item_details .project, .contact-slide .refs__item_details .project {
    position: absolute;
    bottom: 20vh;
    left: 78%;
    display: block;
    width: 15%;
    padding-left: 2vw;
    box-sizing: content-box; }
    @media screen and (max-width: 750px) {
      .contact-popin .refs__item_details .project, .contact-slide .refs__item_details .project {
        width: 70%;
        left: 7vw;
        bottom: auto;
        top: 50vh; } }
    .contact-popin .refs__item_details .project svg, .contact-slide .refs__item_details .project svg {
      width: 33%;
      height: auto;
      margin-bottom: 7vh; }
      @media screen and (max-width: 750px) {
        .contact-popin .refs__item_details .project svg, .contact-slide .refs__item_details .project svg {
          margin-bottom: 4vw; } }
    .contact-popin .refs__item_details .project ul, .contact-popin .refs__item_details .project ul li, .contact-slide .refs__item_details .project ul, .contact-slide .refs__item_details .project ul li {
      list-style: none; }
    .contact-popin .refs__item_details .project li, .contact-slide .refs__item_details .project li {
      margin-bottom: 1vh;
      font-size: .8vw; }
      @media screen and (max-width: 750px) {
        .contact-popin .refs__item_details .project li, .contact-slide .refs__item_details .project li {
          font-size: 3vw; } }
      .contact-popin .refs__item_details .project li a, .contact-slide .refs__item_details .project li a {
        color: black; }
      .contact-popin .refs__item_details .project li.corpo, .contact-slide .refs__item_details .project li.corpo {
        padding-top: 1vw; }
        .contact-popin .refs__item_details .project li.corpo a, .contact-slide .refs__item_details .project li.corpo a {
          color: #cccccc; }

.progress-bar {
  display: block;
  width: 4vw;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
  background: white;
  cursor: default; }
  @media screen and (max-width: 750px) {
    .progress-bar {
      width: 7vw;
      height: auto;
      top: auto;
      bottom: 7vw;
      z-index: 101;
      background: transparent; } }
  .progress-bar_container {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    list-style: none;
    text-align: center;
    transform: translateY(-50%); }
    @media screen and (max-width: 750px) {
      .progress-bar_container {
        position: relative;
        top: auto;
        transform: translateY(0); } }
    .progress-bar_container li {
      position: relative;
      display: block;
      margin-bottom: 1px; }
      @media screen and (max-width: 750px) {
        .progress-bar_container li {
          margin-bottom: 1vw; } }
      .progress-bar_container li:last-child::after {
        display: none; }
      .progress-bar_container li a {
        position: relative;
        display: inline-block;
        width: 2vw;
        height: 1.2vw;
        text-indent: -9999px;
        overflow: hidden;
        box-sizing: border-box;
        transition: 350ms; }
        @media screen and (max-width: 750px) {
          .progress-bar_container li a {
            height: 4vw; } }
        .progress-bar_container li a::after {
          content: '';
          display: block;
          width: 1px;
          height: 100%;
          position: absolute;
          top: 0;
          left: 50%;
          background: #c9c9c9;
          transition: 350ms; }
        .progress-bar_container li a:hover::after {
          background: #666; }
      .progress-bar_container li.actual a::after {
        width: 2px;
        background: black; }

body {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  cursor: url(4a67f5d21ddd690cf7a3944b382047c9.svg) 3 3, auto;
  font-family: "Raleway", "Helvetica Neue", helvetica, sans-serif; }
  body #w-desk {
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    background: transparent url(d534dd03b153afa2195d3a14cc39d640.jpg) center center no-repeat;
    background-size: cover;
    transition: all 850ms;
    z-index: 10; }
    body #w-desk::before {
      content: '';
      display: block;
      width: 100vw;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      background: transparent url(1fee1fe8ce1598ccf2098a97baf4046d.jpg) center center no-repeat;
      background-size: cover; }
    @media screen and (max-width: 750px) {
      body #w-desk {
        background-size: auto 100vh;
        background-position: center top; } }
    body #w-desk::after {
      content: '';
      display: block;
      width: 0%;
      height: 6px;
      position: absolute;
      bottom: 0;
      left: 0;
      background: white; }

@keyframes fakeLoad {
  0% {
    width: 40%; }
  30% {
    width: 40%; }
  60% {
    width: 68%; }
  80% {
    width: 75%; }
  90% {
    width: 80%; }
  98% {
    width: 102%; } }
    body #w-desk.load::after {
      animation: fakeLoad 2s;
      width: 100%; }
    body #w-desk.hide {
      height: 0; }
  body #into {
    content: '';
    display: block;
    width: 0vw;
    height: 0vw;
    position: absolute;
    top: 22vh;
    left: 7vw;
    background: transparent;
    border-radius: 50%;
    border: 120vw solid #1e1e1e;
    transform: translateX(-50%) translateY(-50%);
    z-index: 9999; }
    @media screen and (max-width: 750px) {
      body #into {
        top: 45%;
        left: 18%;
        border: 150vw solid #1e1e1e; } }
    body #into.start {
      width: 10vw;
      height: 10vw;
      transition: 350ms cubic-bezier(0.15, 0.38, 0.3, 0.97); }
      @media screen and (max-width: 750px) {
        body #into.start {
          width: 30vw;
          height: 30vw;
          top: 45%;
          left: 18%; } }
    body #into.showmustgoon {
      top: 50%;
      left: 50%;
      width: 160vw;
      height: 160vw;
      transition: 1250ms cubic-bezier(0.15, 0.38, 0.3, 0.97); }
      @media screen and (max-width: 750px) {
        body #into.showmustgoon {
          width: 120vh;
          height: 120vh; } }

.debug {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(100, 0, 0, 0.2);
  z-index: 99999; }

.debug-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: red;
  z-index: 99999; }

* {
  padding: 0%;
  margin: 0;
  outline: none;
  border: none; }

#header {
  position: fixed;
  top: 0;
  left: 4vw;
  height: 100vh;
  z-index: 99;
  transition: opacity 550ms; }
  @media screen and (max-width: 750px) {
    #header {
      height: auto;
      top: auto;
      left: 0;
      bottom: 0;
      padding: 7vw;
      width: 86vw;
      background: white; } }
  #header.render {
    display: none; }
  #header.hide {
    opacity: 0;
    z-index: 1; }
  #header_logo, .refs__item_details .close {
    position: absolute;
    top: 20vh;
    left: -0.5vw;
    display: block;
    width: 6.5vw;
    height: 3vw;
    overflow: hidden;
    background: transparent; }
    @media screen and (max-width: 750px) {
      #header_logo, .refs__item_details .close {
        position: relative;
        top: auto;
        left: auto;
        width: 13.5vw;
        height: 8vw;
        float: left;
        margin-right: 4vw;
        padding-right: 4vw;
        border-right: 1px solid black; } }
    #header_logo svg, .refs__item_details .close svg {
      width: 100%;
      height: auto; }
      @media screen and (max-width: 750px) {
        #header_logo svg, .refs__item_details .close svg {
          vertical-align: top; } }
  #header .about {
    position: absolute;
    bottom: 6vw;
    left: 0;
    width: 40vw;
    transition: 850ms; }
    @media screen and (max-width: 750px) {
      #header .about {
        position: relative;
        width: 100%;
        left: auto;
        bottom: auto;
        margin: 0; } }
    #header .about h2 {
      font-family: "Roboto Condensed", "Helvetica Neue", helvetica, sans-serif;
      font-size: 1.2vw;
      letter-spacing: .2vw;
      line-height: 4.6vw;
      text-transform: uppercase;
      margin-bottom: 3vh; }
      @media screen and (max-width: 750px) {
        #header .about h2 {
          font-size: 2.4vw;
          line-height: 4vw;
          margin-bottom: 4vw; } }
      #header .about h2 span {
        font-family: "gilroyextrabold", "Helvetica Neue", helvetica, sans-serif;
        font-size: 7.7vw;
        position: relative; }
        @media screen and (max-width: 750px) {
          #header .about h2 span {
            font-size: 2.4vw;
            line-height: 2vw;
            margin-bottom: 4vw; } }

@keyframes noise-anim {
  0% {
    clip: rect(155px, 9999px, 122px, 0); }
  5% {
    clip: rect(187px, 9999px, 181px, 0); }
  10% {
    clip: rect(47px, 9999px, 115px, 0); }
  15% {
    clip: rect(49px, 9999px, 107px, 0); }
  20% {
    clip: rect(33px, 9999px, 96px, 0); }
  25% {
    clip: rect(96px, 9999px, 133px, 0); }
  30% {
    clip: rect(55px, 9999px, 65px, 0); }
  35% {
    clip: rect(194px, 9999px, 9px, 0); }
  40% {
    clip: rect(132px, 9999px, 154px, 0); }
  45% {
    clip: rect(105px, 9999px, 110px, 0); }
  50% {
    clip: rect(19px, 9999px, 6px, 0); }
  55% {
    clip: rect(84px, 9999px, 199px, 0); }
  60% {
    clip: rect(112px, 9999px, 44px, 0); }
  65% {
    clip: rect(10px, 9999px, 180px, 0); }
  70% {
    clip: rect(147px, 9999px, 81px, 0); }
  75% {
    clip: rect(178px, 9999px, 161px, 0); }
  80% {
    clip: rect(71px, 9999px, 141px, 0); }
  85% {
    clip: rect(178px, 9999px, 87px, 0); }
  90% {
    clip: rect(89px, 9999px, 40px, 0); }
  95% {
    clip: rect(96px, 9999px, 46px, 0); }
  100% {
    clip: rect(187px, 9999px, 74px, 0); } }
    #header .about:hover h2 span:after {
      content: attr(data-text);
      position: absolute;
      left: 2px;
      text-shadow: -1px 0 red;
      line-height: 9.4vw;
      top: 0;
      color: black;
      background: white;
      overflow: hidden;
      animation: noise-anim 2s infinite linear alternate-reverse; }
      @media screen and (max-width: 750px) {
        #header .about:hover h2 span:after {
          display: none; } }

@keyframes noise-anim-2 {
  0% {
    clip: rect(191px, 9999px, 8px, 0); }
  5% {
    clip: rect(16px, 9999px, 95px, 0); }
  10% {
    clip: rect(149px, 9999px, 188px, 0); }
  15% {
    clip: rect(90px, 9999px, 73px, 0); }
  20% {
    clip: rect(142px, 9999px, 87px, 0); }
  25% {
    clip: rect(65px, 9999px, 125px, 0); }
  30% {
    clip: rect(30px, 9999px, 59px, 0); }
  35% {
    clip: rect(58px, 9999px, 88px, 0); }
  40% {
    clip: rect(183px, 9999px, 7px, 0); }
  45% {
    clip: rect(2px, 9999px, 144px, 0); }
  50% {
    clip: rect(134px, 9999px, 125px, 0); }
  55% {
    clip: rect(170px, 9999px, 180px, 0); }
  60% {
    clip: rect(4px, 9999px, 42px, 0); }
  65% {
    clip: rect(62px, 9999px, 114px, 0); }
  70% {
    clip: rect(44px, 9999px, 173px, 0); }
  75% {
    clip: rect(42px, 9999px, 112px, 0); }
  80% {
    clip: rect(122px, 9999px, 113px, 0); }
  85% {
    clip: rect(100px, 9999px, 181px, 0); }
  90% {
    clip: rect(8px, 9999px, 192px, 0); }
  95% {
    clip: rect(91px, 9999px, 142px, 0); }
  100% {
    clip: rect(180px, 9999px, 46px, 0); } }
    #header .about:hover h2 span:before {
      content: attr(data-text);
      position: absolute;
      left: -2px;
      text-shadow: 1px 0 greenyellow;
      line-height: 9.4vw;
      top: 0;
      color: #292929;
      background: white;
      overflow: hidden;
      animation: noise-anim-2 3s infinite linear alternate-reverse; }
      @media screen and (max-width: 750px) {
        #header .about:hover h2 span:before {
          display: none; } }
    #header .about p {
      width: 72%;
      font-family: "Raleway", "Helvetica Neue", helvetica, sans-serif;
      font-weight: 200;
      font-size: .9vw;
      line-height: 1.5vw; }
      @media screen and (max-width: 750px) {
        #header .about p {
          font-size: 2.5vw;
          line-height: 5vw;
          margin-bottom: 2vw;
          width: 80%; } }
  #header .contact {
    position: absolute;
    bottom: 1.5vw;
    left: 80%; }
    @media screen and (max-width: 750px) {
      #header .contact {
        display: inline-block;
        position: relative;
        bottom: auto;
        left: auto; } }
  #header #please-scroll {
    display: none; }
    @media screen and (max-width: 750px) {
      #header #please-scroll {
        position: relative;
        display: block;
        width: 100%;
        background: transparent;
        height: 0;
        overflow: hidden;
        transition: height 350ms; }
        #header #please-scroll.show {
          height: 8vw; }
      @keyframes drawTrail {
        0% {
          height: 0vw;
          bottom: auto;
          top: 0; }
        25% {
          height: 8vw;
          bottom: auto;
          top: 0; }
        50% {
          height: 8vw;
          bottom: auto;
          top: 0; }
        65% {
          height: 8vw;
          bottom: 0;
          top: auto; }
        75% {
          height: 0vw;
          bottom: 0;
          top: auto; }
        100% {
          height: 0vw;
          bottom: auto;
          top: 0; } }
      @keyframes drawArrowLeft {
        0% {
          height: 0;
          transform: rotate(0deg); }
        25% {
          height: 0vw;
          transform: rotate(0deg); }
        35% {
          height: 3vw;
          transform: rotate(-45deg); }
        50% {
          height: 3vw;
          transform: rotate(-45deg); }
        75% {
          transform: rotate(0deg);
          height: 0; }
        100% {
          transform: rotate(0deg);
          height: 0; } }
      @keyframes drawArrowRight {
        0% {
          height: 0;
          transform: rotate(0deg); }
        25% {
          height: 0vw;
          transform: rotate(0deg); }
        35% {
          height: 3vw;
          transform: rotate(45deg); }
        50% {
          height: 3vw;
          transform: rotate(45deg); }
        75% {
          transform: rotate(0deg);
          height: 0; }
        100% {
          transform: rotate(0deg);
          height: 0; } }
        #header #please-scroll span {
          display: block;
          width: 1px;
          height: 8vw;
          position: absolute;
          bottom: 0;
          left: 50%;
          background: black;
          animation: infinite drawTrail 3s; }
        #header #please-scroll::before, #header #please-scroll::after {
          content: '';
          display: block;
          width: 1px;
          height: 3vw;
          position: absolute;
          bottom: 0;
          left: 50%;
          background: black;
          transform-origin: bottom right;
          transform: rotate(-45deg);
          animation: infinite drawArrowLeft 3s; }
        #header #please-scroll::after {
          transform-origin: bottom left;
          transform: rotate(45deg);
          animation: infinite drawArrowRight 3s; } }
  #header.reverse .about {
    opacity: 0; }

main {
  opacity: 0;
  transition: opacity 550ms; }
  main.show {
    opacity: 1; }

.refs {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 2; }
  .refs__item {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
    transform: translateY(100%);
    transition: transform 850ms;
    will-change: transform; }
    .refs__item.previous {
      transform: translateY(-101%);
      opacity: 1; }
      .refs__item.previous .refs__item_details .frame .vertex-hlsl::before {
        display: none; }
      .refs__item.previous .refs__item_details .frame .vertex-hlsl::after {
        transform: translateY(0%); }
    .refs__item.next {
      transform: translateY(101%);
      opacity: 1; }
      .refs__item.next .refs__item_details .frame .vertex-hlsl::before {
        display: none; }
      .refs__item.next .refs__item_details .frame .vertex-hlsl::after {
        transform: translateY(0%); }
    .refs__item.actual {
      transform: translateY(0%);
      opacity: 1; }
      .refs__item.actual.transition .refs__item_details .frame .vertex-hlsl::before {
        display: none; }
      .refs__item.actual.transition .refs__item_details .frame .vertex-hlsl::after {
        transform: translateY(-101%); }
    .refs__item .cross-time {
      display: block;
      width: 4vw;
      height: 4vw;
      background: transparent;
      position: fixed;
      top: 19vh;
      left: 0;
      text-indent: -9999px;
      transition: 550ms;
      opacity: 0; }
      .refs__item .cross-time.show {
        opacity: 1; }
      .refs__item .cross-time::after, .refs__item .cross-time::before {
        content: '';
        display: block;
        width: .7vw;
        height: 1px;
        position: absolute;
        top: 50%;
        left: 50%;
        background: black;
        transform-origin: left top;
        transform: rotate(-45deg); }
      .refs__item .cross-time::after {
        transform-origin: left top;
        transform: rotate(45deg); }
    .refs__item .title-cursor {
      position: absolute;
      top: 0;
      right: 0;
      font-family: "gilroyextrabold", "Helvetica Neue", helvetica, sans-serif;
      line-height: 1.5vw;
      font-size: 2vw;
      text-transform: uppercase;
      text-align: right;
      transition: opacity .5s;
      transform: translateX(50vw) translateY(50vw); }
      .refs__item .title-cursor span {
        font-size: .7vw;
        font-family: "gilroylight", "Helvetica Neue", helvetica, sans-serif;
        letter-spacing: .3vw; }
      .refs__item .title-cursor.hide {
        opacity: 0; }
      .refs__item .title-cursor.black-title {
        padding-right: 1vw; }
        @media screen and (max-width: 750px) {
          .refs__item .title-cursor.black-title {
            display: none; } }
        .refs__item .title-cursor.black-title .text {
          display: block;
          float: left; }
        .refs__item .title-cursor.black-title .indicator {
          position: relative;
          display: block;
          float: right;
          margin-left: 1.3vw;
          padding-right: .2vw;
          font-size: .8vw;
          font-family: "gilroylight", "Helvetica Neue", helvetica, sans-serif;
          height: 3vw;
          line-height: 3vw;
          overflow: hidden; }

@keyframes arrowtop {
  0% {
    opacity: 0;
    transform: translateY(50%); }
  80% {
    opacity: 1;
    transform: translateY(10%); }
  100% {
    opacity: 0;
    transform: translateY(0%); } }

@keyframes arrowbot {
  0% {
    opacity: 0;
    transform: translateY(-50%); }
  80% {
    opacity: 1;
    transform: translateY(-10%); }
  100% {
    opacity: 0;
    transform: translateY(0%); } }
          .refs__item .title-cursor.black-title .indicator .slider-arrow {
            position: absolute;
            left: 0;
            width: 100%;
            height: 25%; }
            .refs__item .title-cursor.black-title .indicator .slider-arrow::before, .refs__item .title-cursor.black-title .indicator .slider-arrow::after {
              content: '';
              display: block;
              width: .5vw;
              height: 1px;
              position: absolute;
              top: 0;
              background: black; }
            .refs__item .title-cursor.black-title .indicator .slider-arrow::before {
              right: 50%;
              transform-origin: right top;
              transform: rotate(-45deg); }
            .refs__item .title-cursor.black-title .indicator .slider-arrow::after {
              left: 50%;
              transform-origin: left top;
              transform: rotate(45deg); }
            .refs__item .title-cursor.black-title .indicator .slider-arrow.arrow-top {
              top: 0;
              animation: 1s arrowtop infinite; }
            .refs__item .title-cursor.black-title .indicator .slider-arrow.arrow-bottom {
              bottom: 0;
              animation: 1s arrowbot infinite; }
              .refs__item .title-cursor.black-title .indicator .slider-arrow.arrow-bottom::before {
                top: auto;
                bottom: 0;
                transform: rotate(45deg); }
              .refs__item .title-cursor.black-title .indicator .slider-arrow.arrow-bottom::after {
                top: auto;
                bottom: 0;
                transform: rotate(-45deg); }
    .refs__item:first-child .title-cursor.black-title .indicator {
      transform: translateY(-20%); }
      .refs__item:first-child .title-cursor.black-title .indicator .slider-arrow.arrow-top {
        display: none; }
    .refs__item:last-child .title-cursor.black-title .indicator {
      transform: translateY(10%); }
      .refs__item:last-child .title-cursor.black-title .indicator .slider-arrow.arrow-bottom {
        display: none; }
    .refs__item_details {
      transform: translateX(62vw);
      overflow: hidden;
      width: 92vw;
      margin-left: 4vw;
      transition: 850ms cubic-bezier(0.15, 0.38, 0.3, 0.97); }
      @media screen and (max-width: 750px) {
        .refs__item_details {
          margin-left: 0;
          width: 100vw;
          transform: translateX(0) translateY(7vw); } }
      .refs__item_details .close {
        z-index: 10;
        opacity: 0; }
        @media screen and (max-width: 750px) {
          .refs__item_details .close {
            position: absolute;
            top: 4vw;
            left: 10vw;
            overflow: visible;
            border-right: 0; } }

@keyframes arrow {
  0% {
    opacity: 1;
    right: .2vw; }
  50% {
    opacity: .5;
    right: .5vw; }
  100% {
    opacity: 1;
    right: .2vw; } }
        .refs__item_details .close::after, .refs__item_details .close::before {
          content: '';
          display: block;
          width: .8vw;
          height: .2vw;
          position: absolute;
          top: 50%;
          left: -1.5vw;
          background: white;
          animation: 1s arrow infinite; }
          @media screen and (max-width: 750px) {
            .refs__item_details .close::after, .refs__item_details .close::before {
              left: -6vw;
              width: 3vw;
              height: 2px; } }
        .refs__item_details .close::after {
          transform-origin: left bottom;
          transform: rotate(-45deg); }
        .refs__item_details .close::before {
          transform-origin: left top;
          transform: rotate(45deg); }
        @media screen and (max-width: 750px) {
          .refs__item_details .close svg {
            vertical-align: middle;
            vertical-align: -webkit-baseline-middle; } }
        .refs__item_details .close svg .cls-1 {
          fill: white;
          transition: 850ms; }
        .refs__item_details .close.darken svg .cls-1 {
          fill: black; }
        .refs__item_details .close.darken::before, .refs__item_details .close.darken::after {
          background: black; }
      .refs__item_details .frame {
        display: block;
        float: left;
        width: 62vw !important;
        height: 100vh;
        padding: 4vw 0;
        box-sizing: border-box;
        z-index: 1; }
        @media screen and (max-width: 750px) {
          .refs__item_details .frame {
            width: 100% !important;
            float: none;
            height: 40vh;
            padding: 0; }
            .refs__item_details .frame::before, .refs__item_details .frame::after {
              content: '';
              display: block;
              width: 7vw;
              height: 110%;
              position: absolute;
              top: -5%;
              left: 0;
              background: white;
              z-index: 99;
              transition: 850ms; }
            .refs__item_details .frame::after {
              left: auto;
              right: 0; } }
        .refs__item_details .frame .vertex-hlsl {
          position: relative;
          display: block;
          height: 100%;
          overflow: hidden;
          cursor: none;
          background: black; }
          .refs__item_details .frame .vertex-hlsl.wami-clients {
            display: block;
            width: 100%;
            height: 100%;
            background: #eee; }
            .refs__item_details .frame .vertex-hlsl.wami-clients::before {
              background: aliceblue; }
          .refs__item_details .frame .vertex-hlsl .title-highlight {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            z-index: 10;
            transform: translateX(-29vw);
            pointer-events: none; }
            @media screen and (max-width: 750px) {
              .refs__item_details .frame .vertex-hlsl .title-highlight {
                height: 100%;
                transform: translateX(0); } }
            .refs__item_details .frame .vertex-hlsl .title-highlight .white-title {
              color: white;
              font-size: 2.5vw;
              top: -4vw;
              padding-right: 2vw; }
              @media screen and (max-width: 750px) {
                .refs__item_details .frame .vertex-hlsl .title-highlight .white-title {
                  font-size: 5vw;
                  line-height: 4vw;
                  top: auto;
                  bottom: 5vw;
                  right: 13vw;
                  padding-right: 8vw; }
                  .refs__item_details .frame .vertex-hlsl .title-highlight .white-title span {
                    font-size: 2.2vw; } }

@keyframes arrow {
  0% {
    opacity: 1;
    right: .2vw; }
  50% {
    opacity: .5;
    right: .5vw; }
  100% {
    opacity: 1;
    right: .2vw; } }
              .refs__item_details .frame .vertex-hlsl .title-highlight .white-title::after, .refs__item_details .frame .vertex-hlsl .title-highlight .white-title::before {
                content: '';
                display: block;
                width: .8vw;
                height: .2vw;
                position: absolute;
                top: 47%;
                right: .5vw;
                background: white;
                animation: 1s arrow infinite; }
                @media screen and (max-width: 750px) {
                  .refs__item_details .frame .vertex-hlsl .title-highlight .white-title::after, .refs__item_details .frame .vertex-hlsl .title-highlight .white-title::before {
                    width: 3vw;
                    height: 2px; } }
              .refs__item_details .frame .vertex-hlsl .title-highlight .white-title::after {
                transform-origin: right top;
                transform: rotate(-45deg); }
              .refs__item_details .frame .vertex-hlsl .title-highlight .white-title::before {
                transform-origin: right bottom;
                transform: rotate(45deg); }
              .refs__item_details .frame .vertex-hlsl .title-highlight .white-title span {
                position: relative; }
                .refs__item_details .frame .vertex-hlsl .title-highlight .white-title span::after, .refs__item_details .frame .vertex-hlsl .title-highlight .white-title span::before {
                  display: none; }
          .refs__item_details .frame .vertex-hlsl .refs_logo {
            position: absolute;
            bottom: 6vw;
            left: 24%;
            width: 15vw;
            height: 6vw;
            transform: translateX(-50%);
            z-index: 9;
            transition: opacity 550ms; }
            @media screen and (max-width: 750px) {
              .refs__item_details .frame .vertex-hlsl .refs_logo {
                display: none; } }
            .refs__item_details .frame .vertex-hlsl .refs_logo img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: contain; }
          .refs__item_details .frame .vertex-hlsl canvas {
            position: relative;
            display: block;
            width: 100% !important;
            height: 100%;
            transform: translateX(-8%);
            transition: 550ms;
            z-index: 1;
            background: white; }
            @media screen and (max-width: 750px) {
              .refs__item_details .frame .vertex-hlsl canvas {
                opacity: .8;
                transform: translateX(0) translateY(0%); } }
          .refs__item_details .frame .vertex-hlsl .project-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3; }
            .refs__item_details .frame .vertex-hlsl .project-slider_wrapper {
              display: block;
              height: 100%;
              min-width: 200%;
              transition: 850ms;
              transform: translateX(62vw); }
              @media screen and (max-width: 750px) {
                .refs__item_details .frame .vertex-hlsl .project-slider_wrapper {
                  transform: translateX(100vw); } }
            .refs__item_details .frame .vertex-hlsl .project-slider li {
              display: block;
              width: 62vw;
              height: 100%;
              float: left;
              background: black; }
              @media screen and (max-width: 750px) {
                .refs__item_details .frame .vertex-hlsl .project-slider li {
                  width: 100vw; } }
              .refs__item_details .frame .vertex-hlsl .project-slider li img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover; }
              .refs__item_details .frame .vertex-hlsl .project-slider li.contain img {
                object-fit: contain; }
          .refs__item_details .frame .vertex-hlsl::after {
            content: '';
            display: block;
            width: 102%;
            height: 100%;
            position: absolute;
            top: 0;
            left: -1%;
            background: #f5f5f5;
            z-index: 15;
            transform: translateY(0%);
            backface-visibility: hidden;
            transition: 850ms cubic-bezier(0.15, 0.38, 0.3, 0.97);
            webkit-backface-visibility: hidden; }
          .refs__item_details .frame .vertex-hlsl:hover canvas {
            opacity: .8; }
      .refs__item_details .slider-controls {
        position: fixed;
        bottom: 30vh;
        left: 60vw;
        background: black;
        z-index: 99;
        transform: translateX(-20%);
        opacity: 0;
        transition: 350ms;
        -webkit-box-shadow: 0 10px 60px 5px rgba(0, 0, 0, 0.2);
        box-shadow: 0 10px 60px 5px rgba(0, 0, 0, 0.2); }
        @media screen and (max-width: 750px) {
          .refs__item_details .slider-controls {
            bottom: auto;
            top: 40vh;
            left: auto;
            right: 7vw;
            transform: translateX(0) translateY(-20%); } }
        .refs__item_details .slider-controls.show {
          transform: translateX(0);
          opacity: 1; }
          @media screen and (max-width: 750px) {
            .refs__item_details .slider-controls.show {
              transform: translateX(0) translateY(-50%); } }
        .refs__item_details .slider-controls li {
          display: block;
          float: left; }
          .refs__item_details .slider-controls li a {
            position: relative;
            display: block;
            width: 5vw;
            height: 5vw;
            text-indent: -9999px;
            overflow: hidden; }
            @media screen and (max-width: 750px) {
              .refs__item_details .slider-controls li a {
                width: 12vw;
                height: 12vw; } }
            .refs__item_details .slider-controls li a::before, .refs__item_details .slider-controls li a::after {
              content: '';
              display: block;
              width: .4vw;
              height: 1px;
              position: absolute;
              top: 50%;
              left: 50%;
              background: white;
              transform-origin: left top;
              transform: rotate(-45deg); }
              @media screen and (max-width: 750px) {
                .refs__item_details .slider-controls li a::before, .refs__item_details .slider-controls li a::after {
                  width: 2vw; } }
            .refs__item_details .slider-controls li a::after {
              transform-origin: left top;
              transform: rotate(45deg); }
            .refs__item_details .slider-controls li a.project-next::before, .refs__item_details .slider-controls li a.project-next::after {
              transform-origin: right top; }
          .refs__item_details .slider-controls li .slide-indicator {
            display: block;
            text-align: center;
            width: 2vw;
            height: 5vw;
            line-height: 5vw;
            color: white;
            font-size: .8vw;
            font-family: "gilroylight", "Helvetica Neue", helvetica, sans-serif; }
            @media screen and (max-width: 750px) {
              .refs__item_details .slider-controls li .slide-indicator {
                width: auto;
                height: 12vw;
                font-size: 3vw;
                line-height: 12vw; } }
      .refs__item_details .project {
        display: block;
        float: left;
        width: 30vw;
        padding-top: 18vh;
        padding-left: 4vw;
        box-sizing: border-box;
        transition: opacity 550ms;
        opacity: 0; }
        @media screen and (max-width: 750px) {
          .refs__item_details .project {
            width: 80%;
            padding-top: 7vw;
            padding-left: 7vw; } }
        .refs__item_details .project.show {
          opacity: 1; }
        .refs__item_details .project svg {
          width: 6vw;
          margin-bottom: 2vw; }
          @media screen and (max-width: 750px) {
            .refs__item_details .project svg {
              width: 16vw;
              margin-bottom: 4vw; } }
        .refs__item_details .project h3 {
          font-family: "Roboto Condensed", "Helvetica Neue", helvetica, sans-serif;
          font-size: .9vw;
          letter-spacing: .2vw;
          line-height: 1vw;
          text-transform: uppercase; }
          @media screen and (max-width: 750px) {
            .refs__item_details .project h3 {
              font-size: 3vw;
              line-height: 7vw; } }
        .refs__item_details .project h2 {
          font-family: "gilroyextrabold", "Helvetica Neue", helvetica, sans-serif;
          font-size: 2vw;
          text-transform: uppercase;
          margin-bottom: 3vw; }
          @media screen and (max-width: 750px) {
            .refs__item_details .project h2 {
              font-size: 9vw;
              line-height: 9vw; } }
        .refs__item_details .project p {
          width: 72%;
          margin-bottom: 1vw; }
          @media screen and (max-width: 750px) {
            .refs__item_details .project p {
              margin-bottom: 3vw; } }
        .refs__item_details .project p, .refs__item_details .project ul.tech li {
          font-family: "Raleway", "Helvetica Neue", helvetica, sans-serif;
          font-weight: 200;
          font-size: .9vw;
          line-height: 1.5vw; }
          @media screen and (max-width: 750px) {
            .refs__item_details .project p, .refs__item_details .project ul.tech li {
              width: 100%;
              font-size: 3vw;
              line-height: 5vw; } }
        .refs__item_details .project .visit {
          position: relative;
          display: inline-block;
          text-decoration: none;
          padding: .6vw 1.2vw;
          background: transparent;
          overflow: hidden;
          color: black;
          font-size: .8vw;
          transition: 350ms; }
          .refs__item_details .project .visit::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            transition: 350ms;
            transform: translateY(92%);
            z-index: -1; }
          .refs__item_details .project .visit:hover {
            color: white; }
            .refs__item_details .project .visit:hover::before {
              transform: translateY(0); }
          @media screen and (max-width: 750px) {
            .refs__item_details .project .visit {
              font-size: 2.5vw;
              padding: 1.2vw 2.4vw;
              color: white; }
              .refs__item_details .project .visit::before {
                transform: translateY(0); } }
        .refs__item_details .project .tech {
          position: absolute;
          bottom: 6vw;
          right: 0;
          text-align: right;
          list-style: none; }
          @media screen and (max-width: 750px) {
            .refs__item_details .project .tech {
              display: none; } }
          .refs__item_details .project .tech li {
            list-style: none;
            width: auto;
            margin-top: 1vh; }
      .refs__item_details.open {
        transform: translateX(0); }

@media screen and (max-width: 750px) and (max-width: 750px) {
  .refs__item_details.open {
    transform: translateX(0) translateY(0); } }
        .refs__item_details.open .close {
          opacity: 1; }
        @media screen and (max-width: 750px) {
          .refs__item_details.open .frame::before {
            transform: translateX(-110%); }
          .refs__item_details.open .frame::after {
            transform: translateX(110%); } }
        .refs__item_details.open .frame .vertex-hlsl {
          cursor: url(4a67f5d21ddd690cf7a3944b382047c9.svg) 3 3, auto; }
          .refs__item_details.open .frame .vertex-hlsl .refs_logo {
            opacity: 0; }
          .refs__item_details.open .frame .vertex-hlsl canvas {
            transform: translateX(0) translateY(0); }
          .refs__item_details.open .frame .vertex-hlsl:hover canvas {
            opacity: 1; }

.refs__item_details .frame .vertex-hlsl#pacman::before,
.refs__item_details .frame .vertex-hlsl#pacman::after {
  background: #d1a75d; }

.refs__item_details .frame .vertex-hlsl#episod::before,
.refs__item_details .frame .vertex-hlsl#episod::after {
  background: #4f3974; }

.refs__item_details .frame .vertex-hlsl#jpg::before,
.refs__item_details .frame .vertex-hlsl#jpg::after {
  background: #364b5c; }

.refs__item_details .frame .vertex-hlsl#jacq::before,
.refs__item_details .frame .vertex-hlsl#jacq::after {
  background: #cae406; }

.refs__item_details .frame .vertex-hlsl#dofoil::before,
.refs__item_details .frame .vertex-hlsl#dofoil::after {
  background: #b7b6cc; }

.refs__item_details .frame .vertex-hlsl#glen::before,
.refs__item_details .frame .vertex-hlsl#glen::after {
  background: #f8971d; }

.contact-slide .refs__item_details .frame .vertex-hlsl::before,
.contact-slide .refs__item_details .frame .vertex-hlsl::after {
  background: #e8d2e1; }