@import url("https://fonts.googleapis.com/css?family=Roboto:500,700");
body {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.3em;
  color: #fff;
}
@import url("https://fonts.googleapis.com/css?family=Montserrat:500");
html {
  overflow: hidden;
}
:root {
  --app-height: 100%;
}
html {
  overflow: hidden;
}
html.no-cursor * {
  cursor: none !important;
}
html,
body {
  overflow: hidden;
}
body {
  background-color: #fff;
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
  position: fixed;
}
@media not all and (hover: hover) {
  body {
    height: var(--app-height);
  }
}
h1 {
  font-family: sans-serif;
  color: #262626;
  font-size: 4em;
  margin: 150px 0 0 150px;
}
.fps {
  top: 0;
  left: 0;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
#container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
#container canvas {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
#container canvas.hidden {
  opacity: 0;
}
#container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.section {
  position: absolute;
  min-height: 100vh;
  width: 100%;
}
.anim-letter.hidden span.letter {
  opacity: 0;
  -webkit-transform: translate3d(-10px, 0);
          transform: translate3d(-10px, 0);
}
.anim-letter span.word {
  display: inline-block;
}
.anim-letter span.letter {
  opacity: 0.6;
  display: inline-block;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.7s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.7s ease;
  transition: opacity 0.8s ease, transform 0.7s ease;
  transition: opacity 0.8s ease, transform 0.7s ease, -webkit-transform 0.7s ease;
}
@media (max-width: 640px) {
  a {
    left: 50%;
    margin-left: -100px;
  }
}
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  z-index: 100;
  pointer-events: none;
}
.cursor >* {
  opacity: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
}
.cursor.visible>* {
  opacity: 1;
}
.cursor.visible.playing .dots {
  opacity: 1;
}
.cursor .dots {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cursor .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-top: 6px;
  margin-left: -2px;
  background-color: #fff;
  border-radius: 1px;
  -webkit-animation: cursor-anim 3s ease infinite;
          animation: cursor-anim 3s ease infinite;
}
.cursor .dot.dot2 {
  -webkit-transform: translate(-7px, -5px);
          transform: translate(-7px, -5px);
}
.cursor .dot.dot3 {
  -webkit-transform: translate(7px, -5px);
          transform: translate(7px, -5px);
}
.cursor .dot.dot4 {
  -webkit-transform: translate(-14px, -10px);
          transform: translate(-14px, -10px);
}
.cursor .dot.dot5 {
  -webkit-transform: translate(14px, -10px);
          transform: translate(14px, -10px);
}
body.step-contact .cursor .dots {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@-webkit-keyframes cursor-anim {
  0%, 20% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
@keyframes cursor-anim {
  0%, 20% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}
.loader-section {
  background-color: #101418;
  z-index: 100;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}
.loader-section.hidden {
  opacity: 0;
  pointer-events: none;
}
.loader-section.ready {
  cursor: pointer;
}
.loader-section .loading-bar {
  background-color: #222b33;
  position: absolute;
  height: 1px;
  width: 100%;
  margin-top: 3px;
}
.loader-section img {
  width: 100%;
}
.loader-section .loading-bar-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
.loader-section .loading-bar-wrapper.hidden {
  opacity: 0;
}
.loader-section .loading-bar-wrapper .bar {
  position: absolute;
  height: 100%;
  width: 0;
  background: #eaeaea;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
}
.loader-section .intro {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  letter-spacing: 0.75em;
  font-size: 0.7em;
  line-height: 1.4em;
  font-weight: 100;
  -webkit-transform: translate(calc(-50% + 10px), -50%);
          transform: translate(calc(-50% + 10px), -50%);
  color: #fff;
}
.main-overlay-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
.main-overlay-section.hidden {
  opacity: 0;
}
.main-overlay-section .credits {
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 20px;
  right: 0px;
  letter-spacing: 0.75em;
  font-size: 0.7em;
  line-height: 1.4em;
  font-weight: 100;
  cursor: pointer;
}
.main-overlay-section .credits a {
  color: #fff;
}
.ui-marquee {
  white-space: nowrap;
  overflow: hidden;
}
.ui-marquee.inverted span {
  -webkit-animation: marquee-slide-inverted 2s linear infinite;
          animation: marquee-slide-inverted 2s linear infinite;
}
.ui-marquee span {
  display: inline-block;
  -webkit-animation: marquee-slide 2s linear infinite;
          animation: marquee-slide 2s linear infinite;
}
@-webkit-keyframes marquee-slide {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@keyframes marquee-slide {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes marquee-slide-inverted {
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@keyframes marquee-slide-inverted {
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}