/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
/* ----------------------- 1.0 CLEARFIX ----------------------- */
/* ----------------------- 1.1 IMAGES ----------------------- */
/*
 *  Set retina-ready bg-image. pastes @2x before extension on retina devices
 *  In most instances it's ideal to set the background-size to the dimensions
 *  of the non-retina image
 *
 *  $name = path to the image without extension
 *  $w = background-size width
 *  $h = background-size height
 *  $ext = extension (default = png)
 */
/*
 *  Sets up block that purely display a bg-image.
 *  Doesn't set the bg-image itself. Use retina-image for that
 *
 *  Give width and height for dimension and background-size
 *  Optional: repeat (background-repeat) default = no-repeat;
 *  Optional: hide text width overflow and text-indent; default = show text
 */
/*----------------------- 1.2 ANIMATIONS -----------------*/
@-webkit-keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@-moz-keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@-o-keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@-webkit-keyframes blob {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@-moz-keyframes blob {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@-o-keyframes blob {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@keyframes blob {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
@-webkit-keyframes teaser-blob {
  0% {
    transform: scale(0.65);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes teaser-blob {
  0% {
    transform: scale(0.65);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes teaser-blob {
  0% {
    transform: scale(0.65);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes teaser-blob {
  0% {
    transform: scale(0.65);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes pop-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.65);
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
@-moz-keyframes pop-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.65);
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
@-o-keyframes pop-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.65);
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.65);
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ----------------------- 1.3 UTILITY ----------------------- */
/* ----------------------------------------------------------------------*/
/* - BREAKPOINTS
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* - COLORS
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* - FONTS
/* ----------------------------------------------------------------------*/
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ----------------------------------------------------------------------*/
/* - SIZES
/* ----------------------------------------------------------------------*/
/*
 * MOBILE LAYOUT CSS: STRUCTURAL BASE
 */
.inner {
  padding: 0 15px;
  max-width: 1220px;
  margin: 0 auto;
}

.extra-inner {
  padding: 0 25px;
}

.region-content {
  padding: 0 0 20px 0;
}

@media (min-width: 640px) {
  .inner {
    padding: 0 25px;
  }
  .region-content {
    padding: 0 0 30px 0;
  }
}
@media (min-width: 1024px) {
  .inner {
    padding: 0 50px;
  }
  .extra-inner {
    padding: 0;
  }
  .region-content {
    padding: 0 0 50px 0;
  }
}
@media (min-width: 1280px) {
  .inner {
    padding: 0 65px;
  }
}
/*
 *  BASE CSS
 */
/* ----------------------------------------------------------------------*/
/* - BODY
/* ----------------------------------------------------------------------*/
body {
  background: #0d0802;
  color: #0d0802;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.clearfix:after {
  content: " ";
}

a {
  transition: color 300ms cubic-bezier(0.22, 1.03, 0.69, 0.97);
}

/* LOGO MONKBERRY IN ADMIN MENU */
.toolbar-icon-9 .toolbar-icon-admin-toolbar-tools-help:before {
  background: center center url("../core/images/monkberry.png") no-repeat;
  background-size: contain;
}

/* ----------------------------------------------------------------------*/
/* - TOOLBAR
/* ----------------------------------------------------------------------*/
.toolbar {
  font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
  font-weight: 400;
}
.toolbar a {
  text-decoration: none;
}

/* ----------------------------------------------------------------------*/
/* - HEADERS
/* ----------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  line-height: 1em;
  margin-bottom: 0.35em;
  text-transform: uppercase;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

h6 {
  font-size: 10px;
}

/* ----------------------------------------------------------------------*/
/* - LINKS
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* - CONTENT
/* ----------------------------------------------------------------------*/
.icon, i {
  font-family: "monkberry";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

p {
  margin: 0 0 1em 0;
  font-weight: 400;
}
p strong {
  font-weight: 700;
}

sup {
  vertical-align: super;
  font-size: 0.4em;
}

/*---- LISTS ----*/
ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style-type: none;
}

/*---- TABLES ----*/
table {
  margin: 0 0 1em 0;
  width: 100%;
}
table tr, table th, table td {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent none;
}
table th, table td {
  vertical-align: top;
  text-align: left;
}

/* -----------------------------------------------------*/
/* - GENERAL LOADING ANIMATIONS
/* -----------------------------------------------------*/
/*---- IMAGE FADE IN AND ZOOM OUT -----*/
body.animated .scroll--fade-in-zoom-out {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0) scale(1.25);
}
body.animated .visibleToggle .scroll--fade-in-zoom-out {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 3000ms linear, transform 3000ms cubic-bezier(0.22, 1.03, 0.69, 0.97);
}

/*---- POP IN -----*/
body.animated .scroll--pop-in {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0) scale(0.5);
}
body.animated .visibleToggle .scroll--pop-in {
  animation: pop-in 350ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay1 {
  animation: pop-in 350ms 200ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay2 {
  animation: pop-in 350ms 400ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay3 {
  animation: pop-in 350ms 600ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay4 {
  animation: pop-in 350ms 800ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay5 {
  animation: pop-in 350ms 1000ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay6 {
  animation: pop-in 350ms 1200ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay7 {
  animation: pop-in 350ms 1400ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay8 {
  animation: pop-in 350ms 1600ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay9 {
  animation: pop-in 350ms 1800ms ease-out forwards;
}
body.animated .visibleToggle .scroll--pop-in.delay10 {
  animation: pop-in 350ms 2000ms ease-out forwards;
}

/*---- FADE UP, DOWN, LEFT & RIGHT -----*/
body.animated .scroll--fade-up,
body.animated .scroll--fade-down,
body.animated .scroll--fade-left,
body.animated .scroll--fade-right {
  opacity: 0;
}
body.animated .scroll--fade-up {
  transform: translate3d(0, 100px, 0);
}
body.animated .scroll--fade-down {
  transform: translate3d(0, -100px, 0);
}
body.animated .scroll--fade-left {
  transform: translate3d(100px, 0, 0);
}
body.animated .scroll--fade-right {
  transform: translate3d(-100px, 0, 0);
}
body.animated .visibleToggle .scroll--fade-up,
body.animated .visibleToggle .scroll--fade-down,
body.animated .visibleToggle .scroll--fade-left,
body.animated .visibleToggle .scroll--fade-right {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 200ms 500ms linear, transform 500ms 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.delay1,
body.animated .visibleToggle .scroll--fade-down.delay1,
body.animated .visibleToggle .scroll--fade-left.delay1,
body.animated .visibleToggle .scroll--fade-right.delay1 {
  transition: opacity 200ms 800ms linear, transform 500ms 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.delay2,
body.animated .visibleToggle .scroll--fade-down.delay2,
body.animated .visibleToggle .scroll--fade-left.delay2,
body.animated .visibleToggle .scroll--fade-right.delay2 {
  transition: opacity 200ms 1100ms linear, transform 500ms 1100ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.delay3,
body.animated .visibleToggle .scroll--fade-down.delay3,
body.animated .visibleToggle .scroll--fade-left.delay3,
body.animated .visibleToggle .scroll--fade-right.delay3 {
  transition: opacity 200ms 1400ms linear, transform 500ms 1400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.delay4,
body.animated .visibleToggle .scroll--fade-down.delay4,
body.animated .visibleToggle .scroll--fade-left.delay4,
body.animated .visibleToggle .scroll--fade-right.delay4 {
  transition: opacity 200ms 1700ms linear, transform 500ms 1700ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.delay5,
body.animated .visibleToggle .scroll--fade-down.delay5,
body.animated .visibleToggle .scroll--fade-left.delay5,
body.animated .visibleToggle .scroll--fade-right.delay5 {
  transition: opacity 200ms 2000ms linear, transform 500ms 2000ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.delay6,
body.animated .visibleToggle .scroll--fade-down.delay6,
body.animated .visibleToggle .scroll--fade-left.delay6,
body.animated .visibleToggle .scroll--fade-right.delay6 {
  transition: opacity 200ms 2300ms linear, transform 500ms 2300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.delay7,
body.animated .visibleToggle .scroll--fade-down.delay7,
body.animated .visibleToggle .scroll--fade-left.delay7,
body.animated .visibleToggle .scroll--fade-right.delay7 {
  transition: opacity 200ms 2600ms linear, transform 500ms 2600ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.slow,
body.animated .visibleToggle .scroll--fade-down.slow,
body.animated .visibleToggle .scroll--fade-left.slow,
body.animated .visibleToggle .scroll--fade-right.slow {
  transition: opacity 1500ms 500ms linear, transform 1500ms 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.slow.delay1,
body.animated .visibleToggle .scroll--fade-down.slow.delay1,
body.animated .visibleToggle .scroll--fade-left.slow.delay1,
body.animated .visibleToggle .scroll--fade-right.slow.delay1 {
  transition: opacity 1500ms 800ms linear, transform 1500ms 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.slow.delay2,
body.animated .visibleToggle .scroll--fade-down.slow.delay2,
body.animated .visibleToggle .scroll--fade-left.slow.delay2,
body.animated .visibleToggle .scroll--fade-right.slow.delay2 {
  transition: opacity 1500ms 1100ms linear, transform 1500ms 1100ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.slow.delay3,
body.animated .visibleToggle .scroll--fade-down.slow.delay3,
body.animated .visibleToggle .scroll--fade-left.slow.delay3,
body.animated .visibleToggle .scroll--fade-right.slow.delay3 {
  transition: opacity 1500ms 1400ms linear, transform 1500ms 1400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.animated .visibleToggle .scroll--fade-up.slow.delay3,
body.animated .visibleToggle .scroll--fade-down.slow.delay3,
body.animated .visibleToggle .scroll--fade-left.slow.delay3,
body.animated .visibleToggle .scroll--fade-right.slow.delay3 {
  transition: opacity 1500ms 1700ms linear, transform 1500ms 1700ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* -----------------------------------------------------*/
/* - PARAGRAPH ANIMATIONS
/* -----------------------------------------------------*/
body.animated .paragraph .paragraph__inner {
  opacity: 0;
}
body.animated .paragraph:nth-child(odd) .paragraph__inner {
  transform: translate3d(-100px, 0, 0);
}
body.animated .paragraph:nth-child(even) .paragraph__inner {
  transform: translate3d(100px, 0, 0);
}
body.animated .paragraph.visibleToggle .paragraph__inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 600ms 200ms linear, transform 1000ms 200ms cubic-bezier(0.22, 1.03, 0.69, 0.97);
}

/* ----------------------------------------------------------------------*/
/* - HOMEPAGE
/* ----------------------------------------------------------------------*/
html, body {
  max-height: 100%;
  overflow: hidden;
}

.screen {
  width: 100%;
  height: 100vh;
}

.screen-one {
  overflow: hidden;
  perspective: 1000px;
  position: relative;
  height: 90vh;
  background-color: #fae161;
}
@media (min-width: 840px) {
  .screen-one {
    height: 100vh;
  }
}

.title {
  width: 200px;
  position: absolute;
  z-index: 20;
  left: 40px;
  top: 40px;
}

h1 span {
  display: block;
  width: 0;
  height: 0;
  background-size: 0 0;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  position: absolute;
}
h1 svg {
  width: 200px;
  height: 60px;
}
h1 svg #logo {
  transition: fill 500ms ease-out;
}

@media (min-width: 1024px) {
  .title {
    left: 50px;
    top: 50px;
    width: 240px;
  }
  .title svg {
    width: 240px;
    height: 69px;
  }
}
/*--- MONOLITH ---*/
.mono-ex {
  display: block;
  width: 90px;
  height: 260px;
  background-size: 90px 260px;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  background: url("../images/monolith.svg") center center no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: none;
}

.scene {
  pointer-events: none;
  position: fixed;
  z-index: 5;
  left: 50vw;
  top: 50vh;
  width: 200vw;
  height: 600vw;
  perspective: 230px;
  margin: -300vw 0 0 -100vw;
  transform: translate3d(0, 50vh, 20px);
}

body.animated .scene {
  transition: transform 10s ease-out;
  transform: translate3d(0, 0vh, 20px);
}

@media (min-width: 1024px) {
  .scene {
    margin-left: calc(-100vw - 10px);
  }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .scene {
    margin-top: calc(-300vw - 50px);
  }
}
@keyframes flyMono {
  0% {
    transform: translate3d(-12.6923076923px, 10vh, 69.2307692308px) rotateY(15deg);
  }
  100% {
    transform: translate3d(-12.6923076923px, -15px, 0) rotateY(50deg);
  }
}
@keyframes floatMono {
  0%, 100% {
    transform: translate3d(-12.6923076923px, -15px, 0) rotateY(50deg);
  }
  17% {
    transform: translate3d(-12.6923076923px, 15px, 0) rotateY(40deg);
  }
  33% {
    transform: translate3d(-12.6923076923px, -11.25px, 0) rotateY(47deg);
  }
  50% {
    transform: translate3d(-12.6923076923px, 17.25px, 5px) rotateY(40deg);
  }
  67% {
    transform: translate3d(-12.6923076923px, -9px, -3px) rotateY(49deg);
  }
  83% {
    transform: translate3d(-12.6923076923px, 13.5px, 0px) rotateY(44deg);
  }
}
.monolith {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -60px 0 -25.3846153846px;
  width: 50.7692307692px;
  height: 120px;
  position: relative;
  transform-style: preserve-3d;
  transform: translate3d(-12.6923076923px, 10vh, 69.2307692308px) rotateY(15deg);
  animation: flyMono 10s ease-out, floatMono 20s 10s ease-in-out infinite;
}

.monolith__face {
  position: absolute;
  width: 50.7692307692px;
  height: 120px;
  background-color: rgba(0, 221, 0, 0.7);
  background-color: #0d0802;
}

.monolith__face--front {
  border: 1px solid rgba(250, 225, 97, 0.3);
  box-sizing: border-box;
}

.monolith__face--right,
.monolith__face--left {
  width: 13.8461538462px;
  left: 18.4615384615px;
}

.monolith__face--top,
.monolith__face--bottom {
  height: 13.8461538462px;
  top: 53.0769230769px;
}

.monolith__face--front {
  transform: rotateY(0deg) translateZ(6.9230769231px);
}

.monolith__face--back {
  transform: rotateY(180deg) translateZ(6.9230769231px);
}

.monolith__face--right {
  transform: rotateY(90deg) translateZ(25.3846153846px);
}

.monolith__face--left {
  transform: rotateY(-90deg) translateZ(25.3846153846px);
}

.monolith__face--top {
  transform: rotateX(90deg) translateZ(60px);
}

.monolith__face--bottom {
  transform: rotateX(-90deg) translateZ(60px);
}

/*--- GLOBE & MOONS ---*/
.globe {
  pointer-events: none;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 100%;
  width: 1000px;
  height: 450px;
  margin-top: 40px;
  border: 1px solid #0d0802;
  background-color: #fae161;
  transform: translate3d(-50%, -50%, 10px);
  transform-style: preserve-3d;
}

@media (min-width: 640px) {
  .globe {
    width: 1800px;
    height: 900px;
    margin-top: 250px;
  }
}
@media (min-width: 1024px) {
  .globe {
    width: 2800px;
    height: 1800px;
    margin-top: 680px;
  }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .globe {
    margin-top: 640px;
  }
}
@media (min-width: 1520px) {
  .globe {
    width: 3500px;
  }
}
@keyframes floatMoon {
  0%, 100% {
    transform: translate3d(-5%, 3%, 0) rotateY(10deg);
  }
  17% {
    transform: translate3d(5%, -4%, 0) rotateY(0deg);
  }
  33% {
    transform: translate3d(-4%, 2%, 0) rotateY(10deg);
  }
  50% {
    transform: translate3d(6%, 5%, 5px) rotateY(0deg);
  }
  67% {
    transform: translate3d(-2%, 4%, -3px) rotateY(10deg);
  }
  83% {
    transform: translate3d(-3%, -5%, 0px) rotateY(0deg);
  }
}
@keyframes moonTrajectoryAhorizontal {
  0% {
    transform: translate3d(100vw, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes moonTrajectoryAhorizontalDesktop {
  0% {
    transform: translate3d(1000px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes moonTrajectoryAvertical {
  0% {
    transform: translate3d(0, 70px, 0) scale(0.7);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes moonTrajectoryARadialDesktop {
  0% {
    transform: translate3d(600px, 150px, 0) rotate(200deg);
  }
  100% {
    transform: translate3d(0px, 0, 0) rotate(0deg);
  }
}
@keyframes moonTrajectoryAscaleDesktop {
  0% {
    transform: translate3d(0, 0, 0) scale(0.7);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes moonTrajectoryBhorizontal {
  0% {
    opacity: 0;
    transform: translate3d(-100vw, 0, 0);
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes moonTrajectoryBvertical {
  0% {
    transform: translate3d(0, 65vh, 0) scale(0.6);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes moonTrajectoryBhorizontalDesktop {
  0% {
    opacity: 0;
    transform: translate3d(-70vw, 0, 0);
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.moon {
  position: absolute;
  z-index: 0;
}
.moon__sphere__wrapper {
  width: 100%;
  height: 100%;
}
.moon__sphere {
  width: 100%;
  height: 100%;
  border: 1px solid #0d0802;
  box-sizing: border-box;
  border-radius: 50%;
  transform: translate3d(-5%, 3%, 0) rotateY(10deg);
}
.moon-a {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 20%;
  bottom: 140px;
  margin: -35px 0 0 -35px;
  animation: moonTrajectoryAhorizontal 10s ease-out;
}
.moon-a .moon__sphere__wrapper {
  animation: moonTrajectoryAvertical 10s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.moon-b {
  width: 140px;
  height: 140px;
  position: absolute;
  margin: -70px 0 0 -70px;
  left: 100%;
  bottom: 70vh;
  animation: moonTrajectoryBhorizontal 15s 1s ease-out backwards;
}
.moon-b .moon__sphere__wrapper {
  animation: moonTrajectoryBvertical 15s 1s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.moon-b .moon__sphere {
  animation-delay: 5s;
}

@media (min-width: 640px) {
  .moon-a {
    bottom: 160px;
  }
}
@media (min-width: 1024px) {
  .moon-a {
    width: 300px;
    height: 300px;
    left: 50%;
    bottom: 80px;
    margin-left: -350px;
    animation: moonTrajectoryARadialDesktop 13s ease-out;
    border-radius: 50%;
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  .moon-a .moon__sphere__wrapper {
    animation: moonTrajectoryAscaleDesktop 13s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 0%;
    top: 50%;
  }
  .moon-b {
    left: 75%;
    animation-name: moonTrajectoryBhorizontalDesktop;
  }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .moon-a {
    bottom: 120px;
  }
}
@media (min-width: 1520px) {
  .moon-a {
    bottom: 95px;
  }
}
@media (min-width: 1520px) and (min-height: 700px) {
  .moon-a {
    bottom: 135px;
  }
}
/*--- CONTACT ---*/
.contact {
  position: absolute;
  z-index: 100;
  left: 30px;
  bottom: 80px;
  right: 30px;
  text-align: center;
  transform: translate3d(0, 0, 30px);
}
.contact a {
  display: block;
  width: 200px;
  height: 56px;
  background-size: 200px 56px;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  display: inline-block;
  background: #0d0802 url("../images/contact.svg") center center no-repeat;
  background-size: 100px auto;
  border-radius: 8px;
  opacity: 0;
  animation: pop-in 350ms 6s ease-out forwards;
  transition: background-color 350ms cubic-bezier(0.22, 1.03, 0.69, 0.97);
}
.contact a:hover, .contact a:focus, .contact a:active {
  background-color: #222;
}

/*--- SCROLL DOWN ---*/
.scroll-down {
  position: absolute;
  z-index: 100;
  left: 30px;
  bottom: 15px;
  right: 30px;
  text-align: center;
}
.scroll-down a {
  display: block;
  width: 40px;
  height: 40px;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  display: inline-block;
  background: url("../images/arrow-down.svg") center center no-repeat;
  opacity: 0;
  animation: pop-in 350ms 5s ease-out forwards;
}

@media (min-width: 1024px) and (min-height: 700px) {
  .contact {
    bottom: 120px;
  }
  .scroll-down {
    bottom: 30px;
  }
}
/* ----------------------------------------------------------------------*/
/* - SCREEN 2
/* ----------------------------------------------------------------------*/
.screen-two {
  background: #0d0802;
  color: #fae161;
  text-align: center;
  position: absolute;
  left: 0;
  top: 100%;
  right: 0;
  z-index: 100;
}

.screen__middle {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 0 15px;
  box-sizing: border-box;
}

h2.film {
  display: block;
  width: 96px;
  height: 35px;
  background-size: 96px 35px;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  background: url("../images/film--mobile.svg") center top no-repeat;
  background-size: contain;
  margin: 0 auto 15px;
}
h2.film + h3 {
  max-width: 10em;
  margin: 0 auto;
}

h2.brandedcontent {
  display: block;
  width: 216px;
  height: 78px;
  background-size: 216px 78px;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  background: url("../images/brandedcontent--mobile.svg") center top no-repeat;
  background-size: contain;
  margin: 35px auto 15px;
}
h2.brandedcontent + h3 {
  margin-bottom: 30px;
}

h3 {
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  text-transform: none;
}

p {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}

p.small {
  font-style: italic;
  font-size: 12px;
  line-height: 18px;
  opacity: 0.5;
  margin: 0 auto;
  max-width: 360px;
}

.logos-wrapper {
  width: 335px;
  max-width: 100%;
  margin: 15px auto 25px;
}

.logos {
  display: block;
  width: 100%;
  height: 0;
  background-size: 100% 0;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  background: center top no-repeat;
  padding-top: 54%;
  background-image: url("../images/logos--mobile.png");
  background-size: contain;
}
@media (-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3) {
  .logos {
    background-image: url("../images/logos--mobile@2x.png");
  }
}

@media (max-height: 690px) {
  h2.film {
    display: block;
    width: 96px;
    height: 28px;
    background-size: 96px 28px;
    background-repeat: no-repeat;
    text-indent: -999px;
    overflow: hidden;
    margin: 0 auto 10px;
  }
  h2.brandedcontent {
    display: block;
    width: 216px;
    height: 60px;
    background-size: 216px 60px;
    background-repeat: no-repeat;
    text-indent: -999px;
    overflow: hidden;
    margin: 25px auto 10px;
  }
  h2.brandedcontent + h3 {
    margin-bottom: 20px;
  }
  h3 {
    font-size: 16px;
    line-height: 19px;
  }
  p {
    font-size: 12px;
    line-height: 16px;
  }
  p.small {
    font-size: 10px;
    line-height: 15px;
    margin: 0 auto;
  }
}
@media (max-height: 560px) {
  .logos-wrapper {
    width: 270px;
  }
}
@media (max-height: 530px) {
  h2.film {
    display: block;
    width: 96px;
    height: 22px;
    background-size: 96px 22px;
    background-repeat: no-repeat;
    text-indent: -999px;
    overflow: hidden;
    margin: 0 auto 10px;
  }
  h2.brandedcontent {
    display: block;
    width: 216px;
    height: 48px;
    background-size: 216px 48px;
    background-repeat: no-repeat;
    text-indent: -999px;
    overflow: hidden;
    margin: 25px auto 10px;
  }
  h2.brandedcontent + h3 {
    margin-bottom: 20px;
  }
  h3 {
    font-size: 14px;
    line-height: 17px;
  }
  .logos-wrapper {
    width: 250px;
    margin: 10px auto 20px;
  }
}
@media (max-height: 500px) or (min-width: 840px) {
  .logos-wrapper {
    width: 90%;
    max-width: 880px;
  }
  .logos {
    display: block;
    width: 100%;
    height: 0;
    background-size: 100% 0;
    background-repeat: no-repeat;
    text-indent: -999px;
    overflow: hidden;
    background: center top no-repeat;
    padding-top: 8%;
    background-image: url("../images/logos.png");
    background-size: contain;
  }
  @media (-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3) {
    .logos {
      background-image: url("../images/logos@2x.png");
    }
  }
  p.small {
    max-width: 90%;
  }
  h2.film + h3 {
    max-width: none;
  }
}
@media (min-width: 840px) and (min-height: 500px) {
  .title {
    z-index: 9000;
    position: fixed;
  }
  h1 svg.scrolled-to-screen-two #logo {
    fill: #fae161;
  }
  h3 {
    font-size: 24px;
    line-height: 28px;
  }
  p {
    font-size: 18px;
    line-height: 22px;
  }
  h2.film {
    display: block;
    width: 96px;
    height: 35px;
    background-size: 96px 35px;
    background-repeat: no-repeat;
    text-indent: -999px;
    overflow: hidden;
    background: url("../images/film.svg") center top no-repeat;
    background-size: contain;
    margin: 0 auto 15px;
  }
  h2.film + h3 {
    margin: 0 auto;
  }
  h2.brandedcontent {
    display: block;
    width: 416px;
    height: 34px;
    background-size: 416px 34px;
    background-repeat: no-repeat;
    text-indent: -999px;
    overflow: hidden;
    background: url("../images/brandedcontent.svg") center top no-repeat;
    background-size: contain;
    margin: 55px auto 20px;
  }
  h2.brandedcontent + h3 {
    margin-bottom: 30px;
  }
}
@media (min-width: 1200px) and (min-height: 650px) {
  h2.film {
    margin-top: 40px;
  }
  .logos-wrapper {
    max-width: 1020px;
  }
  p.small {
    font-size: 12.5px;
    line-height: 18px;
    margin-top: 60px;
  }
}