/* ==============================================================
-----------------------------------------------------------------
					*** TABLE OF CONTENTS ***
-----------------------------------------------------------------

	1. Elements
	2. Structure
	3. General styles
  4. Marquee text

-----------------------------------------------------------------
					*** TYPOGRAPHY ***
-----------------------------------------------------------------
	Body copy: 'Realist', sans-serif;
  Label copy: 'Nexa Extra', sans-serif;
	
=============================================================*/


@font-face {
    font-family: 'Realist';
    src: url('../fonts/Realist-Regular.woff2') format('woff2'),
        url('../fonts/Realist-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nexa Extra';
    src: url('../fonts/Nexa-ExtraLight.woff2') format('woff2'),
        url('../fonts/Nexa-ExtraLight.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


:root {
      --text: "If you're here, you're early. That's where things begin. Stay tuned.";
      --strip-height: clamp(50px, 7.2vw, 20px);
      --font-size: clamp(24px, 5vw, 22px);
      --speed: 18s;
    }


/* 1. Elements */
body, html {
  height: 100%;
  font-family: 'Realist', sans-serif;
  font-size: 13px;
  overflow: hidden;
  position: relative;
  color: #fff;
  background-color: #16181E;
  /* background-image: url("../img/coming-soon-bg.jpg");
  background-size: cover; */
}

a {
  -moz-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  outline: none !important;
  color: #fff;
}
a:hover, a:focus, a:active {
  color: #fff;
  text-decoration: none;
}
a.icon i {
  margin-right: 6px;
  margin-left: 6px;
}

h1 {
  font-size: 50px;
  font-weight: 700;
}

h2 {
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 25px;
  margin-top: 10px;
}

h4 {
  font-size: 16px;
}

p {
  opacity: 0.8;
  line-height: 20px;
}

img {
  max-width: 100%;
}


/* 2. Structure */
.center {
  text-align: center;
}

.note {
  opacity: 0.4;
  font-size: 12px;
  margin: 8px 0;
}

.shadow {
  -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.07);
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-19 {
  opacity: 0.19;
}

.opacity-18 {
  opacity: 0.18;
}

.opacity-17 {
  opacity: 0.17;
}

.opacity-16 {
  opacity: 0.16;
}

.opacity-15 {
  opacity: 0.15;
}

.opacity-14 {
  opacity: 0.14;
}

.opacity-13 {
  opacity: 0.13;
}

.opacity-12 {
  opacity: 0.12;
}

.opacity-11 {
  opacity: 0.11;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-9 {
  opacity: 0.09;
}

.opacity-8 {
  opacity: 0.08;
}

.opacity-7 {
  opacity: 0.07;
}

.opacity-6 {
  opacity: 0.06;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-4 {
  opacity: 0.04;
}

.opacity-3 {
  opacity: 0.03;
}

.opacity-2 {
  opacity: 0.02;
}

.opacity-1 {
  opacity: 0.01;
}

.opacity-0 {
  opacity: 0;
}

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

.underline {
  text-decoration: underline;
}

.width-10 {
  width: 10%;
}

.width-20 {
  width: 20%;
}

.width-25 {
  width: 25%;
}

.width-30 {
  width: 30%;
}

.width-33 {
  width: 33%;
}

.width-40 {
  width: 40%;
}

.width-50 {
  width: 50%;
}

.width-60 {
  width: 60%;
}

.width-70 {
  width: 70%;
}

.width-80 {
  width: 80%;
}

.width-90 {
  width: 90%;
}

.width-100 {
  width: 100%;
}

.height-10 {
  height: 10%;
}

.height-20 {
  height: 20%;
}

.height-30 {
  height: 30%;
}

.height-40 {
  height: 40%;
}

.height-50 {
  height: 50%;
}

.height-60 {
  height: 60%;
}

.height-70 {
  height: 70%;
}

.height-80 {
  height: 80%;
}

.height-90 {
  height: 90%;
}

.height-100 {
  height: 100%;
}

.height-200px {
  height: 200px !important;
}

.height-250px {
  height: 250px !important;
}

.height-300px {
  height: 300px !important;
}

.height-350px {
  height: 350px !important;
}

.height-400px {
  height: 400px !important;
}

.height-450px {
  height: 450px !important;
}

.height-500px {
  height: 500px !important;
}

.height-550px {
  height: 550px !important;
}

.height-600px {
  height: 600px !important;
}

.height-650px {
  height: 650px !important;
}

.height-700px {
  height: 700px !important;
}

.height-750px {
  height: 750px !important;
}

.height-800px {
  height: 800px !important;
}

.height-850px {
  height: 850px !important;
}

.height-900px {
  height: 900px !important;
}

.height-950px {
  height: 950px !important;
}

.height-1000px {
  height: 1000px !important;
}

.space {
  height: 60px;
}

.margin-10 {
  margin: 10px;
} 

.vertical-aligned-wrapper {
  display: table;
  height: 100%;
}
.vertical-aligned-wrapper .vertical-aligned-element {
  display: table-cell;
  vertical-align: middle;
  float: none;
}
.vertical-aligned-wrapper .vertical-aligned-element.top {
  vertical-align: top;
}
.vertical-aligned-wrapper .vertical-aligned-element.bottom {
  vertical-align: bottom;
}

/* 3. General styles */
body {
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
body.show-panel .side-panel-wrapper {
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

body.show-panel .backdrop {
  opacity: 0.4;
  pointer-events: auto;
}

body.nav-button-only.show-nav #outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper .navigation nav {
  visibility: visible;
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
body.nav-button-only .nav-button {
  visibility: visible;
}
body.nav-button-only #outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper .navigation nav {
  visibility: hidden;
  opacity: 0;
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  vertical-align: top;
  top: 40px;
  right: 80px;
}
body.nav-button-only #outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper {
  width: 0;
  height: 0;
  padding: inheirt;
}

.backdrop {
  opacity: 0;
  -moz-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  pointer-events: none;
  background-color: black;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 98;
}

.divider {
  width: 50px;
  height: 3px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #fff;
}

.center > .divider {
  display: inline-block;
}

.content-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: table;
  padding: 50px;
}
.content-wrapper > header, .content-wrapper > footer, .content-wrapper > .content {
  display: table-row;
  height: 1px;
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.content-wrapper .content {
  height: 100%;
}
.content-wrapper .content > .wrapper {
  display: table-cell;
  vertical-align: middle;
}

.overlay:before {
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/coming-soon-bg.jpg");
  content: "";
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: bottom;
}

#outer-wrapper {
  -moz-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
  height: 100%;
  position: relative;
  -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
}
@media (-webkit-min-device-pixel-ratio: 0) {
  #outer-wrapper {
    -webkit-filter: blur(0);
  }
}
#outer-wrapper #inner-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}
#outer-wrapper #inner-wrapper #table-wrapper {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  /* padding: 50px 0; */
  z-index: 1;
}
#outer-wrapper #inner-wrapper #table-wrapper .container {
  height: 100%;
  display: table;
}
#outer-wrapper #inner-wrapper #table-wrapper #row-footer {
  bottom: 15px;
  position: relative;
}
#outer-wrapper #inner-wrapper #table-wrapper #row-content {
  display: table;
  height: 100vh;
  width: 100%;
}
#outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  padding: 40px;
  z-index: 1;
}
#outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper.animate {
  -moz-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  -moz-transition-duration: 1.5s;
  -webkit-transition-duration: 1.5s;
  transition-duration: 1.5s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
}
#outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper.animate.in {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#outer-wrapper #inner-wrapper #table-wrapper #row-content #navigation-wrapper .background-wrapper {
  -moz-transform: rotate(8deg) scale(1.2);
  -ms-transform: rotate(8deg) scale(1.2);
  -webkit-transform: rotate(8deg) scale(1.2);
  transform: rotate(8deg) scale(1.2);
  left: 120px;
  right: inherit;
  width: 500px;
}
#outer-wrapper #inner-wrapper #table-wrapper #row-content #content-wrapper {
  display: table-cell;
  vertical-align: middle;
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
#outer-wrapper #inner-wrapper #table-wrapper #row-content form {
  margin-bottom: 20px;
}
#outer-wrapper #inner-wrapper > .background-wrapper.zoom-animation .bg-transfer {
  -webkit-animation-delay: 0s;
  -webkit-animation-duration: 180s;
  -webkit-animation-name: scaleout-scalein;
  -webkit-animation-fill-mode: none;
  /* this prevents the animation from restarting! */
  -webkit-animation-iteration-count: infinite;
  -moz-animation-delay: 0s;
  -moz-animation-duration: 180s;
  -moz-animation-name: scaleout-scalein;
  -moz-animation-fill-mode: none;
  /* this prevents the animation from restarting! */
  -moz-animation-iteration-count: infinite;
  -o-animation-delay: 0s;
  -o-animation-duration: 180s;
  -o-animation-name: scaleout-scalein;
  -o-animation-fill-mode: none;
  /* this prevents the animation from restarting! */
  -o-animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-duration: 180s;
  animation-name: scaleout-scalein;
  animation-fill-mode: none;
  /* this prevents the animation from restarting! */
  -animation-iteration-count: infinite;
}
#outer-wrapper #inner-wrapper > .background-wrapper #triangles {
  z-index: -1;
  position: relative;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


/* 4. Marquee text */
.stage {
  position: relative;
  width: 100vw;
  height: 72vh;
  min-height: 360px;
  overflow: hidden;
  /* background: #000; */
  font-family: 'Nexa Extra', sans-serif;
}

.ribbon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: max(180vw, 2200px);
  height: var(--strip-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #000;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  will-change: transform;
}

.ribbon--white {
  z-index: 1;
  background: rgba(255,255,255,0.9);
  transform: translate(-50%, -50%) rotate(12deg);
  animation: whiteRibbonFloat 6.5s ease-in-out infinite;
}

.ribbon--yellow {
  z-index: 2;
  background: rgba(255, 221, 0,0.9);
  transform: translate(-50%, -50%) rotate(-14deg);
  animation: yellowRibbonFloat 6.5s ease-in-out infinite;
}

.ribbon__track {
  display: flex;
  align-items: center;
  min-width: max-content;
  animation: marquee var(--speed) linear infinite;
  will-change: transform;
}

.ribbon--yellow .ribbon__track {
  animation-direction: reverse;
  animation-duration: 16s;
}

.ribbon__text {
  flex: 0 0 auto;
  padding-inline: clamp(25px, 0vw, 96px);
  letter-spacing: 0;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes whiteRibbonFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(10deg);
  }

  50% {
    transform: translate(-50%, calc(-50% + 20px)) rotate(10deg);
  }
}

@keyframes yellowRibbonFloat {
  0%,
  100% {
    transform: translate(-70%, -70%) rotate(-8deg);
  }

  50% {
    transform: translate(-70%, calc(-70% - 18px)) rotate(-8deg);
  }
}

@media (max-width: 700px) {
  :root {
    --strip-height: 42px;
    --font-size: 20px;
  }

  .ribbon {
    width: 260vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon,
  .ribbon__track {
    animation: none;
  }
}


/* Youtube */

.body-youtube {
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -1;
}