/* ANIMATIONS */
@charset "UTF-8";

/* FADE IN */
/* -- Fade In Up -- */
@keyframes fadeInUp {
  0% {opacity: 0;transform: translate3d(0, 4%, 0) scale(1);}
  100% {opacity: 1;transform: none;}
}
.fadeinup {
opacity: 0;
animation-name: fadeInUp;
animation-delay: none;
animation-timing-function: ease-in-out;
animation-duration: .45s;
animation-fill-mode: forwards;
}

/* ANIMATE IN CONTENT WHILE SCROLLIN g*/
.animate-in {opacity: 0; transform: translate(0, 50px); transition-delay: .25s;}
.animate-in.visible {opacity: 1; transform: translate(0, 0); transition-duration: .75s; transition-timing-function: ease-out;}

/* TRANSITIONS */
.transition-fadeup {
    transition: all .75s cubic-bezier(0.33, 1, 0.68, 1);
    transform: translateY(0);
    opacity: 1;
}
html.is-animating .transition-fadeup {
    transform: translateY(50px);
    opacity: 0;
    transition-delay: 0;
}
html.is-animating.is-leaving .transition-fadeup {
    transform: translateY(-50px);
    opacity: 0;
}
html.is-rendering #site-header.transition-fadeup {
  transition-delay: .5s;
}

.transition-fadeup-stagger {
    transition: all .75s cubic-bezier(0.33, 1, 0.68, 1);
    transition-delay: .5s;
    transform: translateY(0);
    opacity: 1;
}
html.is-animating .transition-fadeup-stagger {
    transform: translateY(50px);
    opacity: 0;
}
html.is-animating.is-leaving .transition-fadeup-stagger {
    transition-delay: 0s;
    opacity: 0;
}

.transition-loading {width: 100vw; height: 100vh; background: #fff; position: fixed; top: 0; left: 0; z-index: 150; display: flex; justify-content: center; flex-direction: column; align-items: center; color: #fff; text-transform: uppercase; letter-spacing: 3px; color: rgba(0,0,0,.25); font-size: .8rem; visibility: hidden; opacity: 0; transform: scale(1.2);
    transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    transition-delay: 0;
}
.transition-loading img {margin: 0 0 15px 0; mix-blend-mode: multiply; width: 300px; opacity: .5;}

html.is-animating .transition-loading {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition-delay: .5s;
}

/* DELAY */
.delay-1 {animation-delay: .15s; transition-delay: .15s;}
.delay-2 {animation-delay: .3s; transition-delay: .3s;}
.delay-3 {animation-delay: .45s; transition-delay: .45s;}
.delay-4 {animation-delay: .6s; transition-delay: .6s;}
.delay-5 {animation-delay: .75s; transition-delay: .75s;}
.delay-6 {animation-delay: .90s; transition-delay: .90s;}
.delay-7 {animation-delay: 1.05s; transition-delay: 1.05s;}
.delay-8 {animation-delay: 1.20s; transition-delay: 1.20s;}
.delay-9 {animation-delay: 1.35s; transition-delay: 1.35s;}

.animation-delay-1 {animation-delay: .15s;}
.animation-delay-2 {animation-delay: .3s;}
.animation-delay-3 {animation-delay: .45s;}
.animation-delay-4 {animation-delay: .6s;}
.animation-delay-5 {animation-delay: .75s;}
.animation-delay-6 {animation-delay: .90s;}
.animation-delay-7 {animation-delay: 1.05s;}
.animation-delay-8 {animation-delay: 1.20s;}
.animation-delay-9 {animation-delay: 1.35s;}

/* HEADER LINES */
.lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    margin: auto;
    width: 90vw;
    opacity: .5;
  }
  .lines .line {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
  }
  .lines .line-vert {width: 100%; height: 1px; left: 0; top: 66%;}
  .lines .line-vert + .line-vert {top: 33%;}
  .lines .line-vert + .line-vert:after {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }
  .lines .line::after {
    opacity: .8;
    content: "";
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(75%, #ffffff), to(#ffffff));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
    -webkit-animation: run 7s 0s infinite;
            animation: run 7s 0s infinite;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
            animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
  }
  .lines .line-vert::after {
    width: 15vh; height: 100%; top: auto; left: auto; right: -50%;
    -webkit-animation: run-horz 7s 0s infinite;
    animation: run-horz 7s 0s infinite;
    background: -webkit-gradient(linear, top right, top left, from(rgba(255, 255, 255, 0)), color-stop(75%, #ffffff), to(#ffffff));
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  
  }
  .lines .line:nth-child(1) {
    margin-left: -50%;
  }
  .lines .line:nth-child(1)::after {
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
  }
  .lines .line:nth-child(2) {
    margin-left: -25%;
  }
  .lines .line:nth-child(2)::after {
    -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s;
  }
  .lines .line:nth-child(4) {
    margin-left: 25%;
  }
  .lines .line:nth-child(4)::after {
    -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s;
  }
  .lines .line:nth-child(5) {
    margin-left: 50%;
  }
  .lines .line:nth-child(5)::after {
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
  }
  
  @-webkit-keyframes run {
    0% {
      top: -50%;
    }
    100% {
      top: 110%;
    }
  }
  
  @keyframes run {
    0% {
      top: -50%;
    }
    100% {
      top: 110%;
    }
  }
  @-webkit-keyframes run-horz {
    0% {
      right: -50%;
    }
    100% {
      right: 110%;
    }
  }
  
  @keyframes run-horz {
    0% {
      right: -50%;
    }
    100% {
      right: 110%;
    }
  }
  
  @keyframes animate {
  
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
  
    100%{
        transform: translateY(-1300px) rotate(720deg);
        opacity: 0;
    }
  
  }