/* 
 * Global
 */
@import '../../../cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css';
@import 'https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700,800,900';
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

textarea, input, button, img, select, a:link, a:visited, a:hover, a:active, area {
  outline: none;
  border: none; }

audio, canvas, iframe, img, svg, video {
  vertical-align: middle; }

html {
  background: #020202; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  cursor: crosshair; }

h1, h1 span, h2, h2, h3 {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #020202;
  text-transform: uppercase;
  letter-spacing: 0.26em; }

h1 {
  margin: 0;
  padding: 0;
  font-size: 58px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: 0.2em; }
  h1 span {
    position: relative;
    font-size: 15px;
    line-height: 20px;
    color: #7d7d7d;
    padding: 4px; }
    @media screen and (max-width: 1400px) {
      h1 span {
        font-size: 13px; } }

h2, h3 {
  font-size: 11px; }

p {
  display: block;
  position: relative;
  margin: 0;
  padding: 0 0 16px 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: #020202;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.01em; }
  p a {
    color: #020202;
    font-weight: 600;
    text-decoration: none; }

/* 
 * Parts
 */
header {
  display: block;
  position: fixed;
  height: 121px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99; }

#mobile-menu {
  display: block;
  position: absolute;
  top: 50px;
  right: 50px;
  height: 21px;
  width: 21px; }
  #mobile-menu > input[type="checkbox"] {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 21px;
    width: 21px;
    z-index: 1;
    opacity: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 999; }
  #mobile-menu > span {
    display: block;
    position: absolute;
    left: 0;
    height: 3px;
    width: 3px;
    background: #020202;
    transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s 0.7s, opacity 0.6s 0.6s;
    z-index: 998;
    opacity: 0; }
    #mobile-menu > span:first-of-type {
      top: 0; }
    #mobile-menu > span:nth-of-type(2) {
      top: 9px; }
    #mobile-menu > span:nth-of-type(3) {
      top: 18px; }
    #mobile-menu > span:nth-of-type(4) {
      left: 9px;
      top: 0px; }
    #mobile-menu > span:nth-of-type(5) {
      left: 9px;
      top: 9px; }
    #mobile-menu > span:nth-of-type(6) {
      left: 9px;
      top: 18px; }
    #mobile-menu > span:nth-of-type(7) {
      left: 18px;
      top: 0px; }
    #mobile-menu > span:nth-of-type(8) {
      left: 18px;
      top: 9px; }
    #mobile-menu > span:nth-of-type(9) {
      left: 18px;
      top: 18px; }

#mobile-menu > input[type="checkbox"]:checked ~ span:first-of-type {
  transform: rotate(45deg);
  top: 10px;
  height: 2px;
  width: 24px; }

#mobile-menu > input[type="checkbox"]:checked ~ span:nth-of-type(2) {
  opacity: 0; }

#mobile-menu > input[type="checkbox"]:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 10px;
  height: 2px;
  width: 24px; }

#mobile-menu > input[type="checkbox"]:checked ~ span:nth-of-type(4) {
  opacity: 0; }

#mobile-menu > input[type="checkbox"]:checked ~ span:nth-of-type(5) {
  opacity: 0; }

#mobile-menu > input[type="checkbox"]:checked ~ span:nth-of-type(6) {
  opacity: 0; }

#mobile-menu > input[type="checkbox"]:checked ~ span:nth-of-type(7) {
  opacity: 0; }

#mobile-menu > input[type="checkbox"]:checked ~ span:nth-of-type(8) {
  opacity: 0; }

#mobile-menu > input[type="checkbox"]:checked ~ span:nth-of-type(9) {
  opacity: 0; }

#menu-slide-out {
  position: fixed;
  top: 0;
  left: -100%;
  /* Change Slide Out Menu width */
  width: 100%;
  /* Ensure these values are the same */
  height: 100vh;
  box-sizing: border-box;
  transition: all 0.75s cubic-bezier(0.77, 0.2, 0.05, 1) 0.4s;
  z-index: 997;
  -webkit-font-smoothing: antialiased; }

#mobile-menu > input[type="checkbox"]:checked ~ #menu-slide-out {
  left: 0; }

/* Styling */
.menu-logo {
  display: inline-block;
  margin-left: -10px;
  margin-bottom: 60px; }

#mobile-menu > input[type="checkbox"]:checked ~ span {
  background: #020202 !important; }

#menu-slide-out {
  background: rgba(220, 220, 220, 0.7);
  padding: 100px 40px 100px 40px; }
  #menu-slide-out ul {
    list-style-type: none; }
    #menu-slide-out ul li a {
      display: block;
      position: relative;
      font-size: 18px;
      padding: 0 0 10px 0; }

#nav-content {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  max-width: 1180px;
  transform: translate(-50%, -50%);
  transition: opacity .4s 1.2s;
  opacity: 0; }
  #nav-content ul {
    position: relative;
    display: block;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    text-align: center; }
    #nav-content ul li {
      display: inline; }
      #nav-content ul li a {
        display: inline-block;
        position: relative;
        margin: 0 25px;
        padding: 0 25px;
        font-family: 'Montserrat', sans-serif;
        font-size: 34px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        color: #020202;
        line-height: 42px;
        text-align: center;
        letter-spacing: 0.02em;
        opacity: 0;
        left: -15px;
        transition: all .6s 0s; }
        @media screen and (max-width: 1600px) {
          #nav-content ul li a {
            font-size: 26px; } }
      #nav-content ul li:nth-of-type(2) a {
        transition: all .6s .15s; }
      #nav-content ul li:nth-of-type(3) a {
        transition: all .6s .3s; }
      #nav-content ul li:nth-of-type(4) a {
        transition: all .6s .45s; }
  #nav-content #contact-information {
    display: block;
    position: absolute;
    height: 100%;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto -20px auto;
    max-width: 1180px;
    height: auto; }
    @media screen and (max-width: 1600px) {
      #nav-content #contact-information {
        max-width: 980px; } }
    #nav-content #contact-information:after {
      content: "";
      position: relative;
      display: table;
      clear: both; }
    #nav-content #contact-information > div {
      display: block;
      position: relative;
      float: left;
      width: 25%;
      left: -15px;
      opacity: 0;
      transition: all .6s .2s, opacity .4s .2s; }
      @media screen and (max-width: 1100px) {
        #nav-content #contact-information > div {
          width: 50%;
          text-align: center;
          margin-bottom: 100px; } }
      #nav-content #contact-information > div:nth-of-type(2) {
        transition: all .6s .4s, opacity .4s .4s; }
      #nav-content #contact-information > div:nth-of-type(3) {
        transition: all .6s .6s, opacity .4s .6s; }
      #nav-content #contact-information > div:nth-of-type(4) {
        transition: all .6s .8s, opacity .4s .8s; }
      #nav-content #contact-information > div p, #nav-content #contact-information > div p a {
        font-family: 'Courier New', serif;
        font-size: 12px;
        color: #020202;
        line-height: 18px; }
        #nav-content #contact-information > div p strong, #nav-content #contact-information > div p a strong {
          font-weight: bold; }
      #nav-content #contact-information > div p a:hover {
        text-decoration: line-through; }
  #nav-content #testimonials {
    display: block;
    position: absolute;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    margin-top: 15px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: all .6s 2s; }
    #nav-content #testimonials p {
      padding-bottom: 4px;
      font-size: 11px;
      color: #020202;
      line-height: 22px;
      text-align: center; }
      #nav-content #testimonials p strong {
        font-weight: bold; }
    #nav-content #testimonials #testimonials-pager {
      display: block;
      position: relative;
      width: 100%;
      text-align: center;
      padding: 20px 0;
      background: transparent; }
      #nav-content #testimonials #testimonials-pager span {
        display: inline-block;
        font-size: 0;
        background: #000;
        border: 1px solid #000;
        height: 5px;
        width: 5px;
        margin: 0 3px;
        cursor: pointer; }
        #nav-content #testimonials #testimonials-pager span.cycle-pager-active {
          background: transparent; }

body.page-loaded.load-sequence-complete.menu-open #nav-content {
  opacity: 1; }
  body.page-loaded.load-sequence-complete.menu-open #nav-content #testimonials {
    bottom: 30px;
    opacity: 1; }

body.page-loaded.load-sequence-complete.open-complete #nav-content {
  transition: opacity .35s 0s !important; }
  body.page-loaded.load-sequence-complete.open-complete #nav-content ul li a {
    opacity: 1;
    left: 0; }
    body.page-loaded.load-sequence-complete.open-complete #nav-content ul li a:hover {
      transition: opacity .4s 0s !important;
      opacity: .35 !important; }
  body.page-loaded.load-sequence-complete.open-complete #nav-content #contact-information > div {
    opacity: 1;
    left: 0; }
  body.page-loaded.load-sequence-complete.open-complete #nav-content #testimonials {
    transition: all .4s 0s !important; }

/* Enable scroll but hide scroll bars.. */
html, body {
  position: relative;
  height: 100%;
  min-height: 680px;
  overflow: hidden !important;
  margin: 0;
  padding: 0; }

#outer-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden; }

#inner-wrapper {
  width: calc( 100% + 20px);
  height: 100%;
  overflow: auto !important;
  outline: none !important;
  padding-right: 20px; }

#loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  min-height: 680px;
  width: 100%;
  z-index: 9999;
  background: #101010;
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s .3s, visibility 0s 2s; }
  #loader p {
    color: #fff;
    font-size: 14px;
    font-family: 'Courier', sans-serif;
    text-align: center;
    height: 16px;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    transition: opacity .4s; }
    #loader p.hide {
      opacity: 0; }
  #loader > div {
    position: absolute;
    height: 1px;
    width: 0;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    margin-top: 20px;
    background: #fff;
    opacity: 1;
    transition: opacity .2s; }

#face {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  height: 800px;
  width: 800px;
  margin: -400px 0 0 -400px;
  overflow: hidden;
  background: #fff;
  z-index: 1;
  transform: scale(1, 0.95);
  transition: transform 0.3s 0.7s, opacity 1.2s 2s, height 0.8s, width 0.8s, margin 0.8s, top 1.2s 0s; }
  #face.shift.allow-shift {
    top: 52%; }
  #face #eye-balls,
  #face #eye-holes,
  #face #eye-lids,
  #face #eye-brows,
  #face #smile,
  #face #blurred {
    display: block;
    position: absolute;
    height: 800px;
    width: 800px;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; }
  #face #eye-balls {
    background-image: url(../img/eye-balls.png);
    z-index: 1;
    transition: height .8s, width .8s; }
  #face #eye-holes {
    background-image: url(../img/eye-holes.png);
    z-index: 2;
    transition: height .8s, width .8s; }
  #face #eye-lids {
    background-image: url(../img/eye-lids.png);
    z-index: 3;
    transition: opacity 0.3s 0.7s, height 0.8s, width 0.8s;
    opacity: 1; }
  #face #smile {
    background-image: url(../img/smile.png);
    z-index: 4;
    transition: opacity .35s 0s, height .8s, width .8s;
    opacity: 0; }
  #face #eye-brows {
    background-image: url(../img/eye-brows.png);
    z-index: 5;
    transition: all .35s 0s, height .8s, width .8s; }
  #face #blurred {
    background-image: url(../img/face-blurred.jpg);
    z-index: 6;
    transition: all .35s 0s, height .8s, width .8s, opacity .5s 1s;
    opacity: 0; }
  #face.blink #eye-lids {
    transition: opacity .25s 0s, height .8s, width .8s !important;
    opacity: 1 !important; }
  @media screen and (max-width: 1500px), screen and (max-height: 800px) {
    #face {
      height: 500px;
      width: 500px;
      margin: -250px 0 0 -250px; }
      #face #eye-balls,
      #face #eye-holes,
      #face #eye-lids,
      #face #smile,
      #face #eye-brows,
      #face #blurred {
        height: 500px;
        width: 500px; } }

#guide-text {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  z-index: 2;
  text-align: center;
  transition: opacity .5s .5s; }

#guide-text p {
  display: inline;
  position: relative;
  margin: 0;
  padding: 0;
  color: #020202;
  font-family: 'Courier', sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  text-align: center; }

#typed-cursor {
  opacity: 1;
  font-weight: 100;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  -ms-animation: blink 0.7s infinite;
  -o-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite; }

@-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-ms-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-o-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

/* Fullscreen Toggle Button */
a#toggle-fullscreen {
  display: block;
  position: absolute;
  bottom: 50px;
  right: 50px;
  height: 21px;
  width: 21px;
  transition: opacity .35s;
  z-index: 4; }
  a#toggle-fullscreen:before, a#toggle-fullscreen:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 21px;
    width: 21px;
    transition: all .35s; }
  a#toggle-fullscreen:before {
    background: url(../img/fs-icon-sprite.svg) 0 0 no-repeat;
    opacity: 1; }
  a#toggle-fullscreen:after {
    background: url(../img/fs-icon-sprite.svg) 0 -21px no-repeat;
    opacity: 0; }
  a#toggle-fullscreen.toggled:before {
    opacity: 0; }
  a#toggle-fullscreen.toggled:after {
    opacity: 1; }

#hover-panel-left {
  position: absolute;
  height: 100%;
  width: 20%;
  min-width: 350px;
  top: 0;
  left: 0;
  z-index: 100; }
  #hover-panel-left:before, #hover-panel-left:after {
    content: "";
    display: block;
    position: absolute;
    background: #020202;
    height: 30px;
    width: 1px;
    top: 50%;
    margin-top: -15px; }
  #hover-panel-left:before {
    transition: right 1s .7s;
    right: calc(100% - 28px); }
  #hover-panel-left:after {
    transition: right 1s .6s;
    right: calc(100% - 22px); }
  #hover-panel-left:hover:before {
    right: 146px; }
  #hover-panel-left:hover:after {
    right: 140px; }
  #hover-panel-left #side-strip {
    position: absolute;
    height: 0;
    width: 10px;
    left: 0;
    bottom: 0;
    background: #020202;
    transition: height .6s; }
  #hover-panel-left:hover #side-strip {
    height: 100%; }
  #hover-panel-left:hover nav#top-level ul {
    height: 140px; }
  #hover-panel-left nav#top-level ul {
    list-style-type: none;
    position: relative;
    margin: 187px 140px 0 0;
    padding: 0;
    height: 0;
    overflow: hidden;
    transition: height 1.6s .8s; }
    #hover-panel-left nav#top-level ul li {
      display: block;
      text-align: right; }
      #hover-panel-left nav#top-level ul li a {
        display: inline-block;
        position: relative;
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        font-size: 11px;
        color: #020202;
        font-weight: 800;
        text-decoration: none;
        text-align: right;
        letter-spacing: 0.02em;
        line-height: 38px; }
        #hover-panel-left nav#top-level ul li a:before {
          content: "";
          height: 2px;
          width: 0;
          background: #020202;
          position: absolute;
          top: 18px;
          left: -40px;
          transition: width .4s; }
        #hover-panel-left nav#top-level ul li a:hover:before {
          width: 30px; }
  @media screen and (max-width: 1200px) {
    #hover-panel-left {
      min-width: 200px; }
      #hover-panel-left:hover:before {
        right: 40px; }
      #hover-panel-left:hover:after {
        right: 34px; }
      #hover-panel-left nav#top-level ul {
        margin: 187px 34px 0 0; } }

#prompt {
  position: absolute;
  top: 50%;
  padding: 0;
  margin: -10px 0 0px 4px;
  width: 90px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  text-align: center;
  transform: rotate(-90deg);
  opacity: 0;
  transition: opacity .6s 1.2s; }

a#down-arrow, a#up-arrow, a#back-arrow {
  position: absolute;
  display: inline-block;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  z-index: 2;
  text-align: center;
  opacity: 1; }
  a#down-arrow i, a#up-arrow i, a#back-arrow i {
    color: #020202;
    font-weight: bold;
    font-size: 20px; }

a#down-arrow {
  transition: all .8s 4s;
  bottom: 44px;
  opacity: 0;
  transform: scale(0); }

a#up-arrow {
  transition: all .6s 0s;
  top: 55px;
  opacity: 0;
  z-index: 101;
  transform: scale(0); }

a#back-arrow {
  transition: all .6s 1.4s;
  top: 43px;
  left: 40px;
  margin-left: 15px;
  opacity: 0;
  transform: scale(0);
  z-index: 101; }
  a#back-arrow i {
    font-size: 34px; }

#spacer {
  position: relative;
  margin-bottom: 160px;
  left: 0;
  width: 10px;
  height: 100%; }

#scroll-overlay {
  height: calc(100% - 171px);
  width: calc(100% - 100px);
  display: block;
  position: absolute;
  top: calc(100% + 171px);
  left: 50px;
  z-index: 4;
  background: rgba(245, 245, 245, 0.85);
  transition: transform .6s .3s, opacity .6s .3s, top 0s 0s;
  transform: scale(1.4);
  opacity: 0; }
  #scroll-overlay #scroll-overlay-content {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    transition: all .4s; }
    #scroll-overlay #scroll-overlay-content h1 {
      position: absolute;
      top: 50%;
      transform: translateY(-37%);
      left: calc( 20% - 50px);
      max-width: 767px;
      height: 300px;
      transition: all .4s 1s;
      opacity: 0;
      margin-top: -15px; }
    #scroll-overlay #scroll-overlay-content h2 {
      position: absolute;
      left: calc( 20% - 46px);
      bottom: 100px;
      overflow: hidden;
      transition: all .4s 1.2s;
      margin-left: -14px;
      opacity: 0; }
    #scroll-overlay #scroll-overlay-content h3 {
      position: absolute;
      left: calc( 20% - 46px);
      top: 68px;
      overflow: hidden;
      transition: all .4s .75s;
      margin-left: -14px;
      opacity: 0; }
    #scroll-overlay #scroll-overlay-content #scroll-overlay-copy {
      position: absolute;
      right: 12%;
      margin-right: 16px;
      width: 100%;
      max-width: 204px;
      top: 50%;
      transform: translateY(-37%);
      height: 300px;
      opacity: 0;
      transition: all .6s 1.2s; }
      #scroll-overlay #scroll-overlay-content #scroll-overlay-copy svg {
        position: absolute;
        bottom: -56px;
        left: -18px;
        transform: scale(0.8); }
      #scroll-overlay #scroll-overlay-content #scroll-overlay-copy:after {
        content: "";
        position: absolute;
        bottom: -4px;
        height: 1px;
        width: 10px;
        background: #020202; }
    @media screen and (max-width: 1600px) {
      #scroll-overlay #scroll-overlay-content h1 {
        font-size: 44px;
        line-height: 38px;
        max-width: 600px; } }
    @media screen and (max-width: 1200px) {
      #scroll-overlay #scroll-overlay-content {
        margin-left: 30px; }
        #scroll-overlay #scroll-overlay-content #scroll-overlay-copy {
          opacity: 0 !important; } }

#scroll-container {
  display: block;
  position: fixed;
  height: 100%;
  width: 100%; }
  #scroll-container div.slide {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%; }
  #scroll-container .animation-set {
    display: block;
    position: absolute;
    left: 0;
    opacity: 1;
    transition: all; }
  #scroll-container #slide-2 .animation-set {
    opacity: 0; }
  #scroll-container #slide-3 .animation-set {
    opacity: 0; }

/* 
 * Site Instances
 */
body.page-loaded.menu-open a#toggle-fullscreen {
  opacity: 0; }

body.page-loaded.menu-open #guide-text {
  opacity: 0; }

@media screen and (min-width: 962px) {
  body.page-loaded.menu-open #face {
    transform: scale(0.8, 0.8) !important; } }

body.page-loaded.menu-open #face #eye-lids {
  opacity: 1 !important; }

body.page-loaded.menu-open #face #blurred {
  opacity: 1 !important; }

body.page-loaded.menu-open a#down-arrow {
  bottom: 24px !important;
  opacity: 0 !important; }

body.page-loaded.menu-open a#up-arrow {
  top: 55px !important;
  opacity: 0 !important; }

body.page-loaded.menu-open a#back-arrow {
  opacity: 0 !important; }

body.page-loaded.menu-open #scroll-overlay {
  opacity: 0 !important; }

body.page-loaded.menu-open #hover-panel-left {
  z-index: 98; }

body.page-loaded.menu-open section#section-one,
body.page-loaded.menu-open section#section-two,
body.page-loaded.menu-open section#section-three {
  transition: opacity .6s 0s !important;
  opacity: 0 !important; }

body.page-loaded.menu-open #prompt {
  opacity: 0; }

body.page-loaded.load-sequence-complete.open-complete #face #blurred {
  transition: all .35s 0s, height .8s, width .8s, opacity .5s 0s; }

body.page-loaded.load-sequence-complete.open-complete #menu-slide-out {
  transition-delay: .5s !important; }

body.page-loaded.load-sequence-complete.open-complete section#section-one,
body.page-loaded.load-sequence-complete.open-complete section#section-two,
body.page-loaded.load-sequence-complete.open-complete section#section-three {
  transition-delay: 1.2s !important; }

body.page-loaded #loader {
  opacity: 0;
  visibility: hidden; }

body.page-loaded #face {
  transform: scale(1, 1); }
  body.page-loaded #face #eye-lids {
    opacity: 0; }

body.page-loaded #prompt {
  opacity: 1; }

body.page-loaded .lines-container {
  z-index: 2; }

body.page-loaded .particles-container.lines > .particle {
  background-color: rgba(10, 10, 10, 0.1); }

body.page-loaded.load-sequence-complete #face {
  transition: transform .8s .25s, opacity 1.2s 2s, height .8s, width .8s, margin .8s, top 1.2s 0s; }
  body.page-loaded.load-sequence-complete #face #eye-lids {
    transition: opacity .3s .8s, height .8s, width .8s; }

body.page-loaded.load-sequence-complete #down-arrow {
  opacity: 1;
  transition-delay: 0s;
  transform: scale(1); }

body.page-loaded.load-sequence-complete #prompt {
  transition: opacity .6s 1.8s; }

body.page-loaded.load-sequence-complete #mobile-menu > span {
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s 0.7s, opacity 0.6s 0s; }

body.page-loaded.scrolled #prompt {
  opacity: 0;
  transition-delay: .1s !important; }

body.page-loaded.scrolled a#down-arrow {
  bottom: 24px;
  opacity: 0 !important;
  transform: scale(0); }

body.page-loaded.scrolled a#up-arrow {
  top: 51px;
  opacity: 1;
  transform: scale(1); }

body.page-loaded.scrolled #guide-text {
  opacity: 0 !important; }

@media screen and (min-width: 962px) {
  body.page-loaded.scrolled #face {
    transform: scale(0.8, 0.8) !important; } }

body.page-loaded.scrolled #face #eye-lids {
  opacity: 1 !important; }

body.page-loaded.scrolled a#toggle-fullscreen {
  opacity: 0; }

body.page-loaded.scrolled #scroll-overlay {
  transform: scale(1);
  opacity: 1;
  top: 121px; }
  body.page-loaded.scrolled #scroll-overlay #scroll-overlay-content h1 {
    opacity: 1;
    margin-top: 0; }
  body.page-loaded.scrolled #scroll-overlay #scroll-overlay-content h2, body.page-loaded.scrolled #scroll-overlay #scroll-overlay-content h3 {
    margin-left: 0;
    opacity: 1; }
  body.page-loaded.scrolled #scroll-overlay #scroll-overlay-content #scroll-overlay-copy {
    margin-right: 0;
    opacity: 1; }

body.page-loaded.scrolled .lines-container {
  opacity: 0; }

body.hovering-on-panel #face #eye-brows {
  margin-top: -4px;
  transform: rotateZ(0.8deg); }

body.hovering-on-panel #image-grid {
  width: calc(100% - 344px);
  transition: all 1s 0s; }

body.hovering-on-panel #prompt {
  opacity: 0;
  transition-delay: .1s !important; }

/* 
 * Section Instances
 */
body.page-loaded.load-sequence-complete.section-triggered a#down-arrow {
  opacity: 0; }

body.page-loaded.load-sequence-complete.section-triggered a#back-arrow {
  margin-left: 0;
  opacity: 1;
  transform: scale(1); }

body.page-loaded.load-sequence-complete.section-triggered #guide-text {
  opacity: 0; }

body.page-loaded.load-sequence-complete.section-triggered #scroll-overlay {
  visibility: hidden !important; }

body.page-loaded.load-sequence-complete.section-triggered .lines-container {
  opacity: 0; }

section#section-one {
  display: block;
  position: absolute;
  height: 100%;
  width: 50%;
  min-width: 640px;
  background: #020202;
  top: 0;
  right: -100%;
  opacity: 0;
  transition: all 1s .5s;
  z-index: 5; }
  section#section-one h1 {
    color: #ffffff;
    position: relative;
    max-width: 500px;
    left: 119px;
    margin-top: 117px;
    transition: all .8s 1.4s;
    margin-left: -20px;
    opacity: 0; }
    @media screen and (max-width: 1700px) {
      section#section-one h1 {
        left: 69px;
        margin-top: 70px;
        font-size: 38px;
        line-height: 34px; } }
  section#section-one #section-one-copy {
    display: block;
    position: relative;
    width: 100%;
    max-width: 376px;
    margin: 91px 0 0 121px;
    transition: all .7s 1.5s;
    top: -20px;
    opacity: 0; }
    section#section-one #section-one-copy p, section#section-one #section-one-copy p a {
      color: #ffffff; }
    section#section-one #section-one-copy p a {
      text-decoration: underline; }
    section#section-one #section-one-copy:after {
      content: "";
      position: absolute;
      bottom: -4px;
      height: 1px;
      width: 10px;
      background: #ffffff; }
    @media screen and (max-width: 1700px) {
      section#section-one #section-one-copy {
        max-width: calc( 100% - 100px);
        margin: 50px 0 0 71px; } }
  section#section-one #logos {
    display: block;
    position: relative;
    height: 68px;
    width: 100%;
    max-width: 534px;
    margin: 55px 0 0 117px;
    transition: all 1s 1.5s;
    opacity: 0;
    left: -20px; }
    section#section-one #logos:after {
      content: "";
      display: table;
      position: relative;
      clear: both; }
    section#section-one #logos div.cycle-slide {
      display: block;
      height: 68px;
      width: 111px !important;
      margin-right: 30px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover; }
    @media screen and (max-width: 1700px) {
      section#section-one #logos {
        margin-left: 67px; } }

body.page-loaded.load-sequence-complete.section-one-triggered #face {
  transform: scale(0.9); }

body.page-loaded.load-sequence-complete.section-one-triggered #mobile-menu span {
  background: white; }

body.page-loaded.load-sequence-complete.section-one-triggered section#section-one {
  right: 0;
  opacity: 1; }
  body.page-loaded.load-sequence-complete.section-one-triggered section#section-one h1 {
    margin-left: 0;
    opacity: 1; }
  body.page-loaded.load-sequence-complete.section-one-triggered section#section-one #section-one-copy {
    top: 0;
    opacity: 1; }
  body.page-loaded.load-sequence-complete.section-one-triggered section#section-one #logos {
    opacity: 1;
    left: 0; }

body.page-loaded.load-sequence-complete.section-one-outgoing section#section-one {
  transition: all .9s .5s; }
  body.page-loaded.load-sequence-complete.section-one-outgoing section#section-one #section-one-copy {
    transition-delay: 0s !important; }
  body.page-loaded.load-sequence-complete.section-one-outgoing section#section-one h1 {
    transition-delay: 0s !important; }
  body.page-loaded.load-sequence-complete.section-one-outgoing section#section-one #logos {
    transition-delay: 0s !important; }

body.page-loaded.load-sequence-complete.section-one-outgoing #face {
  transition-delay: .7s !important; }

section#section-two {
  display: block;
  position: absolute;
  height: 100%;
  width: calc(100% - 385px);
  top: 0;
  right: -100%;
  opacity: 0;
  transition: all 0s 1s, opacity 1s 1s, width .5s 0s;
  z-index: 2;
  padding: 191px 0 0 0; }
  @media screen and (max-width: 1200px) {
    section#section-two {
      width: calc(100% - 215px); } }
  section#section-two h2 {
    display: block;
    position: relative;
    transition: all .3s 0s;
    opacity: 1;
    top: 0;
    margin: 0;
    line-height: 24px; }
    section#section-two h2:first-of-type {
      margin-top: -4px; }
    section#section-two h2 a {
      display: block;
      position: relative;
      font-size: 13px;
      cursor: pointer;
      color: #141414;
      transition: color .2s 0s;
      text-decoration: none; }
      section#section-two h2 a:hover {
        color: #c8c8c8; }
    section#section-two h2.hidden {
      opacity: 0;
      top: 15px; }
  section#section-two #preview {
    display: block;
    position: absolute;
    top: 191px;
    right: 300px;
    height: auto;
    width: 640px;
    -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.06);
    transition: all .35s;
    opacity: 0;
    margin-right: -20px; }
    section#section-two #preview.show {
      opacity: 1 !important;
      margin-right: 0; }
    section#section-two #preview img {
      display: block;
      position: relative;
      width: 100%;
      height: auto; }
    @media screen and (max-width: 1800px) {
      section#section-two #preview {
        right: 125px; } }
    @media screen and (max-width: 1600px) {
      section#section-two #preview {
        max-width: 400px; } }
    @media screen and (max-width: 1100px) {
      section#section-two #preview {
        max-width: 300px; } }
  section#section-two #vert-scroll-container {
    position: absolute;
    width: auto;
    height: calc(100% - 200px);
    display: inline-block;
    padding-left: 30px;
    margin-top: 10px; }
    section#section-two #vert-scroll-container > div {
      margin-top: -6px; }

body.page-loaded.load-sequence-complete.section-two-triggered section#section-two {
  right: 0;
  opacity: 1; }

body.page-loaded.load-sequence-complete.section-two-triggered #face {
  transition: all .6s .35s !important;
  transform: scaleY(0.98); }
  body.page-loaded.load-sequence-complete.section-two-triggered #face #smile {
    opacity: 1; }

body.page-loaded.load-sequence-complete.section-two-outgoing section#section-two {
  transition: all 0s 1s, opacity 1s 0s; }

section#section-three {
  display: block;
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  top: 0;
  right: -100%;
  margin-right: -30px;
  opacity: 0;
  transition: all .8s 1s, right 0s .45s;
  z-index: 2; }
  section#section-three h1 {
    position: relative !important;
    max-width: 500px;
    margin-top: 195px;
    margin-left: 272px; }
  section#section-three div.section-three-copy {
    position: absolute;
    max-width: 400px;
    margin-top: 358px;
    margin-left: 66%; }
    section#section-three div.section-three-copy p a {
      text-decoration: underline; }
    section#section-three div.section-three-copy:after {
      content: "";
      position: absolute;
      bottom: -4px;
      height: 1px;
      width: 10px;
      background: #020202; }
  section#section-three h3#scroll-tip {
    position: absolute;
    text-align: center;
    height: 11px;
    width: 130px;
    right: -11px;
    transform: rotateZ(90deg) translateX(-50%);
    top: 50%;
    transition: opacity 1s 1.8s;
    opacity: 1;
    z-index: 2;
    font-weight: 600; }
    section#section-three h3#scroll-tip a {
      display: block;
      position: absolute;
      height: 11px;
      width: 11px;
      transition: opacity .8s .2s;
      font-size: 14px;
      line-height: 11px;
      color: #020202;
      top: 1px;
      text-decoration: none;
      z-index: 2; }
      section#section-three h3#scroll-tip a:first-of-type {
        left: 0;
        opacity: 0; }
      section#section-three h3#scroll-tip a:last-of-type {
        right: 0; }
  section#section-three .image-container {
    display: block;
    position: absolute;
    height: 168px;
    width: auto; }
    section#section-three .image-container#image-container-1 {
      margin-top: 360px;
      margin-left: 272px; }
      section#section-three .image-container#image-container-1 h3 {
        position: relative;
        top: 15px;
        float: left;
        margin-right: -20px;
        margin-top: 0;
        padding-right: 42px; }
    section#section-three .image-container#image-container-2 {
      top: 200px;
      margin-left: 66%; }
      section#section-three .image-container#image-container-2 h3 {
        position: absolute;
        top: 15px;
        left: 20px;
        margin-right: -20px;
        margin-top: 0;
        padding-right: 42px;
        z-index: 2;
        transform: translateX(-100%); }
    section#section-three .image-container h3 {
      z-index: 2; }
      section#section-three .image-container h3:after {
        content: "";
        display: block;
        position: absolute;
        height: 2px;
        width: 30px;
        background: #020202;
        top: 50%;
        transform: translateY(-50%);
        right: 5px; }
    section#section-three .image-container span {
      display: block;
      position: relative;
      width: 300px;
      height: 168px;
      float: left;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      z-index: 1;
      -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.14);
      -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.14);
      box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.14);
      transition: all .2s; }
      section#section-three .image-container span.no-frame {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important; }
  @media screen and (max-width: 1400px) {
    section#section-three h1 {
      font-size: 38px;
      line-height: 32px;
      max-width: 300px;
      margin-left: 242px; }
    section#section-three .image-container span {
      display: block;
      position: relative;
      width: 250px;
      height: 140px; }
    section#section-three .image-container#image-container-1 {
      margin-left: 242px; }
    section#section-three div.section-three-copy {
      max-width: 280px; } }
  @media screen and (max-width: 1200px) {
    section#section-three h1 {
      margin-left: 192px; }
    section#section-three .image-container#image-container-1 {
      margin-left: 192px; }
    section#section-three .image-container#image-container-2 {
      margin-left: 60%; }
    section#section-three div.section-three-copy {
      margin-left: 60%; } }
  @media screen and (max-width: 1100px) {
    section#section-three .image-container h3 {
      display: none; } }
  @media screen and (max-height: 870px) {
    section#section-three h1 {
      margin-top: 150px; }
    section#section-three .image-container#image-container-2 {
      top: 150px; }
    section#section-three .image-container#image-container-1 {
      margin-top: 140px; }
    section#section-three div.section-three-copy {
      margin-top: 140px; } }

#slide-1 .animation-set-1 {
  left: 50px;
  opacity: 0;
  transition: all .8s .8s; }

#slide-1 .animation-set-2 {
  left: 50px;
  opacity: 0;
  transition: all .8s 1s; }

#slide-1 .animation-set-2 {
  left: 50px;
  opacity: 0;
  transition: all .8s 1s; }

#slide-1 .animation-set-3 {
  left: 50px;
  opacity: 0;
  transition: all 1s 1.2s; }

#slide-1 .animation-set-4 {
  left: 50px;
  opacity: 0;
  transition: all 1s 1.4s; }

body.reset-section-three #slide-1 .animation-set-1 {
  left: 50px !important;
  opacity: 0 !important;
  transition: all .8s .8s !important; }

body.reset-section-three #slide-1 .animation-set-2 {
  left: 50px !important;
  opacity: 0 !important;
  transition: all .8s 1s !important; }

body.reset-section-three #slide-1 .animation-set-2 {
  left: 50px !important;
  opacity: 0 !important;
  transition: all .8s 1s !important; }

body.reset-section-three #slide-1 .animation-set-3 {
  left: 50px !important;
  opacity: 0 !important;
  transition: all 1s 1.2s !important; }

body.reset-section-three #slide-1 .animation-set-4 {
  left: 50px !important;
  opacity: 0 !important;
  transition: all 1s 1.4s !important; }

body.page-loaded.load-sequence-complete.section-three-triggered #slide-1 .animation-set-1 {
  left: 0;
  opacity: 1; }

body.page-loaded.load-sequence-complete.section-three-triggered #slide-1 .animation-set-2 {
  left: 0;
  opacity: 1; }

body.page-loaded.load-sequence-complete.section-three-triggered #slide-1 .animation-set-3 {
  left: 0;
  opacity: 1; }

body.page-loaded.load-sequence-complete.section-three-triggered #slide-1 .animation-set-4 {
  left: 0;
  opacity: 1; }

body.page-loaded.load-sequence-complete.section-three-triggered #spacer {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 1px;
  margin: 0;
  height: calc(100% + 900px); }

body.page-loaded.load-sequence-complete.section-three-triggered section#section-three {
  margin-right: 0;
  right: 0;
  opacity: 1;
  /* 
        h3#scroll-tip {
            opacity: .5;
            transition: opacity .5s 0s;
            &:hover {
                opacity: 1;
            }
        }
 */ }

body.page-loaded.load-sequence-complete.section-three-triggered:not(.menu-open) #face {
  transition: transform .8s .25s, opacity 1.2s 0s, height .8s, width .8s, margin .8s;
  transform: scale(0.8);
  opacity: 0.1; }

body.page-loaded.load-sequence-complete.section-three-outgoing section#section-three {
  transition: all 1.2s .45s, opacity .4s .1s, margin 1.4s 0s; }

body.page-loaded.load-sequence-complete.section-three-outgoing #face {
  transition: transform .8s .55s, opacity 1.2s .55s, height .8s, width .8s, margin .8s; }

body .lines-container {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2s 0s;
  z-index: 99999; }
  body .lines-container.show {
    opacity: .8; }

body .particles-container {
  position: absolute;
  height: 45%; }
  body .particles-container.stretch-horz {
    width: 180%;
    height: 110%;
    left: -60%;
    top: 6%;
    opacity: .2;
    transform: rotate(90deg); }
  body .particles-container.stretch-one {
    width: 100%;
    height: 90%;
    left: 0;
    top: 25%;
    opacity: .6; }
  body .particles-container.stretch-two {
    width: 34%;
    left: 32%;
    top: 31%;
    opacity: .8;
    height: 80%; }
  body .particles-container.stretch-three {
    width: 30%;
    height: 80%;
    left: 35%;
    top: 39%;
    opacity: .4; }
  body .particles-container.stretch-four {
    width: 20%;
    left: 40%;
    top: 38%;
    height: 68%;
    opacity: 0.5; }
  body .particles-container.lines > .particle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
    animation: lines 10s linear infinite; }

@keyframes lines {
  0%, 50%, 100% {
    transform: translateY(0%); }
  25% {
    transform: translateY(100%); }
  75% {
    transform: translateY(-100%); } }

/* 
 * Mobile Responsive
 */
#mobile-nav {
  display: none !important; }

@media screen and (max-width: 962px) {
  #nav-content {
    position: relative !important;
    transform: translate(0, 0) !important;
    top: 0 !important;
    left: 0 !important;
    padding-top: 50px; }
    #nav-content #contact-information {
      margin-top: 200px; }
    #nav-content #mobile-nav {
      display: block !important; }
      #nav-content #mobile-nav li {
        display: block; }
      #nav-content #mobile-nav a {
        margin: 0;
        padding: 0; }
  section#section-one {
    min-width: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: 50px !important; }
    section#section-one h1 {
      left: 30px;
      font-size: 25px !important;
      line-height: 25px !important; }
    section#section-one #section-one-copy {
      margin-left: 30px !important;
      max-width: calc(100% - 60px) !important; }
    section#section-one #logos {
      display: none; }
  #section-two {
    width: 100% !important;
    left: 20px !important;
    padding-top: 120px !important; }
    #section-two #preview {
      display: none !important; }
    #section-two #vert-scroll-container div h2 a:hover {
      color: #020202 !important;
      cursor: default; }
  #section-three {
    display: none !important; }
  #hover-panel-left,
  a#toggle-fullscreen,
  #testimonials,
  #guide-text {
    display: none !important; }
  #contact-information > div {
    width: 100% !important; }
  #contact-information > div:first-child,
  #contact-information > div:nth-child(2) {
    display: none !important; }
  #scroll-overlay {
    width: calc(100% - 40px);
    left: 20px; }
  #scroll-overlay #scroll-overlay-content {
    margin-left: 0 !important; }
  #scroll-overlay #scroll-overlay-content h1,
  #scroll-overlay #scroll-overlay-content h2,
  #scroll-overlay #scroll-overlay-content h3 {
    left: 20px !important;
    padding-right: 20px !important; }
  #scroll-overlay #scroll-overlay-content h1 {
    font-size: 24px;
    letter-spacing: 2px;
    max-width: calc(100% - 50px);
    line-height: 32px; }
  #face {
    width: 80% !important;
    max-width: 384px !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important; }
    #face #eye-balls, #face #eye-holes, #face #eye-lids, #face #smile, #face #eye-brows, #face #blurred {
      width: 100% !important;
      height: 0 !important;
      padding-bottom: 150% !important; } }