html, body {
padding: 0;
margin: 0;
font-size: 1vw;
font-family: 'Montserrat', sans-serif;
color: white;
min-height: 100vh;
background-color: black; }
.bounce {
animation: bounce 2s infinite; }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0); }
40% {
transform: translateY(-30px); }
60% {
transform: translateY(-15px); } }
.grain {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
pointer-events: none;
background: url("../img/grain.png") center center no-repeat;
background-size: cover;
opacity: 0.3;
mix-blend-mode: screen; }
.cta {
text-align: center;
font-family: Montserrat;
font-size: 0.83vw;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0.06vw;
text-transform: uppercase;
display: flex;
height: 2.50vw;
padding: 0.83vw 1.67vw;
justify-content: center;
align-items: center;
background: #EB622B;
box-shadow: 0vw 0.21vw 0.21vw 0vw rgba(0, 0, 0, 0.25);
box-sizing: border-box;
cursor: pointer;
transition: all 0.3s ease; }
.cta.primary {
display: flex;
height: 2.50vw;
padding: 0.83vw 1.67vw;
background: none;
box-shadow: none;
justify-content: center;
align-items: center;
border: 0.05vw solid #DFDFDF; }
.cta:hover {
background: #F18536;
border-color: #F18536; }
a {
color: inherit; }
h1, h2, h3, h4, p {
margin: 0; }
section.hero {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden; }
section.hero .shade {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 74.38%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.7) 15.5%, rgba(0, 0, 0, 0.62) 41.5%, rgba(0, 0, 0, 0.47) 68.5%, rgba(0, 0, 0, 0.36) 85.5%);
background-blend-mode: normal, multiply, normal;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
section.hero video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; }
section.hero article {
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -75%);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2.08vw;
width: 45.31vw; }
section.hero article .logos {
display: flex;
width: 16.98vw;
align-items: center;
gap: 0.63vw; }
section.hero article .logos .x {
width: 1.04vw;
height: 0.94vw; }
section.hero article .logos .logo {
display: flex;
width: 6.88vw;
height: 5.21vw;
padding: 0.42vw;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0; }
section.hero article .logos .logo img {
height: 5.21vw; }
section.hero article .logos .logo img.ark {
width: 10.31vw;
height: 10.57vw; }
section.hero article .title {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.83vw;
align-self: stretch; }
section.hero article .title h1 {
color: #FFF;
text-align: center;
text-shadow: 0vw 0.21vw 0.21vw rgba(0, 0, 0, 0.25);
font-family: Montserrat;
font-size: 3.75vw;
font-style: italic;
font-weight: 800;
line-height: 100%;
letter-spacing: -0.05vw;
text-transform: uppercase; }
section.hero article .title h3 {
color: #FFF;
text-align: center;
text-shadow: 0vw 0.21vw 0.21vw rgba(0, 0, 0, 0.25);
font-family: Montserrat;
font-size: 1.15vw;
font-style: normal;
font-weight: 500;
line-height: 145.455%;
letter-spacing: 0vw; }
section.join {
width: 100%;
height: 27.55vw;
position: relative;
margin-top: -7vw;
z-index: 100; }
section.join .shader .specular {
/* mix-blend-mode: color-dodge; */
background-color: #000;
background-position: top center;
background-repeat: no-repeat;
mix-blend-mode: color-dodge;
height: 100%;
background-attachment: fixed;
background-image: linear-gradient(179deg, #000 40%, red, orange, rgba(255, 255, 255, 0.6) 60%, #000 80%);
/* background: white; */
/* position: relative; */
z-index: 2;
background-position: top center;
background-image: linear-gradient(125deg, #191513 30%, #ff0, #000000, #000000, #000000 70%);
opacity: 0.7; }
section.join .shader .mask {
mix-blend-mode: color-dodge;
background-color: #fff;
background-size: cover;
background-image: url(../img/holo.jpeg);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden; }
section.join .shader1 {
position: absolute;
width: 100%;
top: 0;
height: 5vw;
left: 0;
backface-visibility: hidden;
display: block;
overflow: hidden; }
section.join .shader1 img {
display: block;
width: 100%;
height: auto;
margin: 0; }
section.join .shader1 .specular {
-webkit-mask-image: url(../img/lighting.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat; }
section.join .shader2 {
position: absolute;
width: 100%;
bottom: 0.36vw;
height: 5vw;
left: 0;
backface-visibility: hidden;
display: block;
overflow: hidden; }
section.join .shader2 img {
display: block;
width: 100%;
height: auto;
margin: 0;
height: 100%;
width: 100%; }
section.join .shader2 .specular {
background-image: linear-gradient(344deg, #191513 30%, #ff0, #000000, #000000, #000000 70%);
-webkit-mask-image: url(../img/lighting2.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat; }
section.join .light1 {
position: absolute;
width: 100%;
top: 0;
left: 0; }
section.join .light2 {
position: absolute;
width: 100%;
bottom: 0;
left: 0; }
section.join .shape {
width: 100%;
top: 1.30vw;
flex-shrink: 0;
position: absolute;
left: 0; }
.bar {
width: 100%;
background: #EB622B;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 4; }
.bar .lcloud {
position: absolute;
width: 14.32vw;
height: 8.96vw;
left: 0;
overflow: hidden;
bottom: -3.59vw; }
.bar .lcloud img {
height: 100%;
position: absolute;
top: 0;
left: 0; }
.bar .rcloud {
position: absolute;
width: 12.40vw;
height: 8.96vw;
right: 0;
overflow: hidden;
bottom: -15.59vw; }
.bar .rcloud img {
height: 100%;
position: absolute;
top: 0;
left: 0; }
.bar .date {
font-size: 0.89rem;
text-align: center;
line-height: 1.2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.63vw;
max-width: 12.604vw;
justify-content: center;
text-align: center; }
.bar .date p {
margin: 0;
font-family: 'Lato', sans-serif; }
.bar .date strong {
display: block;
margin-top: 0.2vw;
font-weight: 600;
line-height: 1.2;
padding: 0 2.12vw;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif; }
.bar .date img {
height: 2.08vw; }
.bar .arrow svg {
width: 0.9375vw;
height: auto; }
.bar .icon img {
height: 2.083vw;
width: auto; }
.bar .container {
display: inline-flex;
width: 72.4vw;
justify-content: space-between;
align-items: center;
padding: 2.50vw 0 2.92vw 0; }
section.faq {
padding-top: 8.04vw;
text-align: center;
position: relative;
overflow: hidden;
display: flex;
width: 100%;
padding: 6.67vw 0vw;
flex-direction: column;
align-items: center;
gap: 2.50vw; }
section.faq a {
color: inherit;
text-decoration: underline; }
section.faq h2 {
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 2.29vw;
font-style: normal;
font-weight: 700;
line-height: 127.273%; }
section.faq .faqs {
width: 46.1vw;
display: flex;
gap: 1.25vw;
margin: 0 auto;
flex-direction: column; }
section.faq .faqs .item {
border-bottom: 1px solid #DFDFDF;
text-align: left;
cursor: pointer;
color: #9F9F9F; }
section.faq .faqs .item.active .q {
opacity: 1; }
section.faq .faqs .item.active .q .chevron {
transform: rotate(0deg) !important; }
section.faq .faqs .item:hover .q {
opacity: 1; }
section.faq .faqs .q {
padding-bottom: 1.25vw;
font-size: 1.146vw;
font-weight: 500;
position: relative;
cursor: pointer;
opacity: 0.8;
transition: all 0.3s ease;
color: #DFDFDF; }
section.faq .faqs .q .chevron {
height: 1.25vw;
position: absolute;
right: 0;
top: 0.1vw;
transform: rotate(180deg);
transition: all 0.4s ease; }
section.faq .faqs .q p {
margin: 0;
max-width: 90%;
transition: all 0.3s ease; }
section.faq .faqs .a {
padding: 2.5vw;
box-sizing: border-box;
padding-right: 10%;
background: #101010;
box-sizing: border-box;
border-left: 1px solid #D34037;
line-height: 1.5;
color: #DFDFDF;
padding-right: 5vw;
padding-left: 2.2vw;
display: none;
font-family: 'Lato', sans-serif; }
section.faq .faqs .a ul {
padding: 1.25vw 5.2vw;
list-style-type: decimal;
/* Change to numbers */
padding-left: 1.2vw;
margin: 0; }
section.faq .faqs .a span {
color: #EB622B; }
section.faq .faqs .a p {
margin: 0;
padding: 1.25vw 1.875vw;
padding-right: 5.2vw;
box-sizing: border-box; }
section.faq .faqs .a a {
color: #EB622B; }
footer {
margin-top: 6.54vw;
text-align: center; }
footer .backtop {
text-align: center;
font-size: 16px;
display: inline-block;
font-style: normal;
font-weight: 600;
line-height: 24px;
color: #DFDFDF;
margin-bottom: 3.5vw;
opacity: 0.7;
transition: all 0.3s ease;
cursor: pointer; }
footer .backtop:hover {
opacity: 1; }
footer .backtop:hover svg {
animation: bounce 2s infinite; }
footer .backtop svg {
width: 24px;
margin-bottom: 4px; }
footer .backtop img {
height: 4.17vw; }
footer .desc {
text-align: center;
max-width: 57.9vw;
margin: 0 auto; }
footer .desc .logo {
margin-bottom: 1.5vw; }
footer .desc a {
text-decoration: underline;
color: inherit; }
footer .desc p {
color: #9F9F9F;
margin: 0;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 142.857%; }
a {
text-decoration: none; }
.owfooter {
background: #101010;
color: #9F9F9F;
font-size: 14px;
box-sizing: border-box;
padding: 0px 120px;
display: flex;
justify-content: space-between;
margin-top: 5vw;
align-items: center; }
.owfooter .nav {
display: flex;
gap: 32px; }
.owfooter a {
color: #9F9F9F !important;
text-decoration: none; }
.owfooter .social {
display: flex;
gap: 20px; }
.header {
position: fixed;
width: 100%;
z-index: 105;
padding: 0.8vw 2vw;
box-sizing: border-box;
background: linear-gradient(180deg, #000 33.39%, rgba(0, 0, 0, 0) 100%);
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
left: 0; }
.header .logo {
display: flex;
padding: 0.05vw 0vw;
justify-content: center;
align-items: center;
gap: 0.63vw; }
.header .logo img {
height: 2.60vw; }
.header .logo span {
color: #DFDFDF;
font-family: Montserrat;
font-size: 0.83vw;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0vw;
border-left: 1px solid #DFDFDF;
padding-left: 0.63vw; }
.header .btns {
display: flex;
justify-content: center;
align-items: center;
gap: 2.5vw;
color: #DFDFDF;
text-align: center;
font-family: Montserrat;
font-size: 0.83vw;
font-style: normal;
font-weight: 500;
line-height: 150%;
letter-spacing: 0vw; }
.header .btns .lnk {
cursor: pointer;
transition: all 0.3s ease; }
.header .btns .lnk:hover {
color: #EB622B; }
.header.terms {
position: static;
background: black; }
.mobow {
display: none; }
section.carousel {
position: relative;
background: url("../img/car/bg.png");
background-size: cover;
width: 100%;
height: 59.27vw;
margin-top: -5vw;
overflow: hidden; }
section.carousel .big {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
padding: 12.96vw 11.25vw;
justify-content: center;
box-sizing: border-box;
align-items: center;
z-index: 99;
opacity: 0;
pointer-events: none;
background: rgba(16, 16, 16, 0.85);
transition: opacity 0.4s ease; }
section.carousel .big.active {
opacity: 1;
pointer-events: all; }
section.carousel .big .container {
position: relative;
width: 100%;
height: 100%; }
section.carousel .big .container .xbtn {
position: absolute;
top: 0;
right: -2.5vw;
z-index: 6;
display: flex;
width: 2.50vw;
height: 2.50vw;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid #80E4FE;
background: #0E232B;
transition: all 0.2s ease;
transform: translateX(2px); }
section.carousel .big .container .xbtn:before {
background: url(../img/car/x.svg);
width: 1.25vw;
height: 1.25vw;
content: '';
background-size: contain;
background-position: center;
background-repeat: no-repeat; }
section.carousel .big .container .xbtn:hover {
background: #1E404A; }
section.carousel .big .container .slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1E404A;
transition: opacity 0.3s linear; }
section.carousel .big .container .slider img {
width: 100%;
height: 100%;
object-fit: cover; }
section.carousel .big .container .slider .slick-arrow {
z-index: 6;
display: flex;
width: 2.50vw;
height: 2.50vw;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid #80E4FE;
background: #0E232B;
transition: all 0.2s ease; }
section.carousel .big .container .slider .slick-arrow:hover {
background: #1E404A; }
section.carousel .big .container .slider .slick-list {
height: 100%;
border: 2px solid #80E4FE;
box-sizing: border-box; }
section.carousel .big .container .slider .slick-prev {
border-right: 0;
left: -2.5vw; }
section.carousel .big .container .slider .slick-prev:before {
width: 1.25vw;
height: 1.25vw;
background: url(../img/car/slideleft.svg);
content: '';
background-size: contain;
background-position: center;
background-repeat: no-repeat; }
section.carousel .big .container .slider .slick-next {
border-left: 0;
right: -2.5vw; }
section.carousel .big .container .slider .slick-next:before {
width: 1.25vw;
height: 1.25vw;
background: url(../img/car/slideright.svg);
content: '';
background-size: contain;
background-position: center;
background-repeat: no-repeat; }
section.carousel .title {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1.04vw;
left: 6.30vw;
top: 20.00vw;
position: absolute; }
section.carousel .title .txt {
width: 2vw; }
section.carousel .title .arrow {
width: 2.63vw; }
@keyframes gifenter {
from {
transform: translateX(-30%);
opacity: 0; }
to {
transform: translateX(0%);
opacity: 1; } }
@keyframes gifexit {
from {
transform: translateX(0);
opacity: 1; }
to {
transform: translateX(30%);
opacity: 0; } }
@keyframes nameenter {
from {
transform: translateX(-100%);
opacity: 0; }
to {
transform: translateX(0%);
opacity: 1; } }
@keyframes nameexit {
from {
transform: translateX(0);
opacity: 1; }
to {
transform: translateX(100%);
opacity: 0; } }
@keyframes propenter {
from {
transform: translateX(-100%);
opacity: 0; }
to {
transform: translateX(0%);
opacity: 1; } }
@keyframes propexit {
from {
transform: translateX(0);
opacity: 1; }
to {
transform: translateX(100%);
opacity: 0; } }
section.carousel .cards {
position: absolute;
width: 22.29vw;
height: 33.75vw;
top: 12.76vw;
left: 72.40vw;
background: url("../img/car/cardbg.png");
background-size: cover;
background-position: center center; }
section.carousel .cards .power {
color: #80E4FE;
text-shadow: 0vw 0.16vw 0.05vw rgba(0, 0, 0, 0.15);
font-family: Montserrat;
font-size: 0.73vw;
font-style: normal;
font-weight: 500;
line-height: 142.857%;
letter-spacing: 0.06vw;
text-transform: uppercase;
left: 2.19vw;
top: 3.39vw;
position: absolute; }
section.carousel .cards .props {
display: inline-flex;
padding: 0vw 2.50vw;
align-items: flex-start;
gap: 1.25vw;
position: absolute;
top: 14.74vw;
left: 0; }
section.carousel .cards .props .prop {
width: 5vw;
height: 5vw;
overflow: hidden;
position: relative;
padding: 0.63vw;
box-sizing: border-box; }
section.carousel .cards .props .prop img {
opacity: 0;
height: 3.75vw;
width: 3.75vw;
top: 0.63vw;
left: 0.63vw;
position: absolute; }
section.carousel .cards .props .prop img.active {
opacity: 1; }
section.carousel .cards .props .prop img.propexit {
animation-name: propexit;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards; }
section.carousel .cards .props .prop img.propenter {
animation-name: propenter;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards; }
section.carousel .cards .name-container {
width: 18.02vw;
height: 21.88vw;
left: 2.19vw;
top: 6.30vw;
color: #FFF;
text-shadow: 0vw 0.21vw 0.1vw rgba(0, 0, 0, 0.25);
font-family: Montserrat;
font-size: 1.95vw;
font-style: italic;
font-weight: 800;
line-height: 110%;
letter-spacing: -0.05vw;
text-transform: uppercase;
position: absolute;
overflow: hidden;
pointer-events: none; }
section.carousel .cards .name-container .name {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0; }
section.carousel .cards .name-container .name.active {
opacity: 1; }
section.carousel .cards .name-container .name.nameexit {
animation-name: nameexit;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards; }
section.carousel .cards .name-container .name.nameenter {
animation-name: nameenter;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards; }
section.carousel .cards .minis {
left: 2.19vw;
top: 22.76vw;
border: 1px solid #80E4FE;
box-sizing: border-box;
position: absolute;
width: 18.13vw;
height: 8.43vw;
overflow: hidden;
background: #1E404A; }
section.carousel .cards .minis:hover img {
opacity: 1 !important; }
section.carousel .cards .minis .mini {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: #1E404A;
transition: opacity 0.3s linear; }
section.carousel .cards .minis .mini .slick-arrow {
z-index: 6;
display: flex;
width: 1.67vw;
height: 1.67vw;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
border: 0.05vw solid #80E4FE;
background: #0E232B;
transition: all 0.2s ease; }
section.carousel .cards .minis .mini .slick-arrow:hover {
background: #1E404A; }
section.carousel .cards .minis .mini .slick-prev {
border-left: 0;
left: 0; }
section.carousel .cards .minis .mini .slick-prev:before {
width: 0.83vw;
height: 0.83vw;
background: url(../img/car/slideleft.svg);
content: '';
background-size: contain;
background-position: center;
background-repeat: no-repeat; }
section.carousel .cards .minis .mini .slick-next {
border-right: 0;
right: 0; }
section.carousel .cards .minis .mini .slick-next:before {
width: 0.83vw;
height: 0.83vw;
background: url(../img/car/slideright.svg);
content: '';
background-size: contain;
background-position: center;
background-repeat: no-repeat; }
section.carousel .cards .minis .mini img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
transition: all 0.2s ease; }
section.carousel .cards .minis .mini.active {
opacity: 1; }
section.carousel .cards .card {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: all 0.4s ease; }
section.carousel .cards .card.active {
opacity: 1; }
section.carousel .pointer {
width: 8.8vw;
top: 33.65vw;
left: 64.17vw;
position: absolute; }
section.carousel .lcorner {
width: 2.81vw;
left: 71.56vw;
top: 44.53vw;
position: absolute; }
section.carousel .rcorner {
width: 2.81vw;
left: 92.3vw;
top: 44.53vw;
position: absolute; }
section.carousel .gif {
width: 54.27vw;
height: 54.27vw;
left: 22.86vw;
top: 2.55vw;
position: absolute; }
section.carousel .gif img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; }
section.carousel .gif img.gifexit {
animation-name: gifexit;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards; }
section.carousel .gif img.gifenter {
animation-name: gifenter;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards; }
section.carousel .gif img.active {
opacity: 1;
transform: translateX(0); }
section.carousel .selector {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.42vw;
top: 13.70vw;
left: 13.65vw;
position: absolute; }
section.carousel .selector .item {
width: 18.75vw;
height: 6.04vw;
position: relative; }
section.carousel .selector .item .pattern {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background: url(../img/car/orange.svg) center center no-repeat;
background-size: auto 100%;
transition: all 0.4s ease; }
section.carousel .selector .item .square {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 13.54vw;
height: 6.04vw;
transition: all 0.4s ease; }
section.carousel .selector .item .square path {
fill: rgba(30, 64, 74, 0.8) !important;
transition: all 0.4s ease; }
section.carousel .selector .item .thumb {
padding: 0.42vw 0.52vw;
width: 13.54vw;
height: 6.04vw;
margin-left: -0.1vw;
box-sizing: border-box;
left: 0;
top: 0;
bottom: 0;
position: absolute;
transition: all 0.4s ease; }
section.carousel .selector .item .thumb .icon {
width: 12.40vw;
height: 5.21vw;
position: relative; }
section.carousel .selector .item .thumb .icon .image {
width: 100%;
height: 100%;
-webkit-mask-image: url(../img/car/mask.svg);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
position: relative;
z-index: 2;
opacity: 1;
opacity: 0.6;
transition: all 0.4s ease; }
section.carousel .selector .item .thumb .icon .stroke {
position: absolute;
width: 100.806%;
height: 102.5%;
top: -1.2%;
left: -0.403%;
transition: all 0.4s ease; }
section.carousel .selector .item .thumb .icon:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-mask-image: url(../img/car/mask.svg);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
box-shadow: 0vw 0vw 0.94vw 0vw #00F9FE inset;
z-index: 3;
transition: all 0.4s ease; }
section.carousel .selector .item.active .pattern {
opacity: 1; }
section.carousel .selector .item.active .square {
left: 50%;
transform: translateX(-47%); }
section.carousel .selector .item.active .square path {
fill: #FA0 !important; }
section.carousel .selector .item.active .thumb {
left: 50%;
transform: translateX(-47%); }
section.carousel .selector .item.active .thumb .icon img {
opacity: 1; }
section.carousel .selector .item.active .thumb .icon .stroke {
filter: brightness(150%) grayscale(100%); }
section.carousel .selector .item.active .thumb .icon:after {
box-shadow: 0vw 0vw 0.94vw 0vw #FFF inset; }
section.carousel .selector .item:hover .thumb .icon img {
opacity: 1; }
section.carousel .selector .item:hover .thumb .icon .stroke {
filter: brightness(150%) grayscale(100%); }
section.carousel .selector .item:hover .thumb .icon:after {
box-shadow: 0vw 0vw 0.94vw 0vw #FFF inset; }
section.getthemod {
width: 100%;
height: 22.92vw;
background: #FFF;
padding: 0 13.54vw;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 4; }
section.getthemod video {
width: 28.33vw;
height: 15.94vw; }
section.getthemod .arr {
width: 3.75vw;
height: 1.67vw;
bottom: -1.67vw;
left: 50%;
margin-left: -1.88vw;
position: absolute; }
section.getthemod .fullvid {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
box-sizing: border-box;
align-items: center;
z-index: 99;
background: rgba(16, 16, 16, 0.85);
transition: opacity 0.4s ease;
display: none; }
section.getthemod .fullvid.active {
opacity: 1;
pointer-events: all; }
section.getthemod .fullvid .container {
position: relative;
border: 2px solid #80E4FE;
box-sizing: border-box;
background: black; }
section.getthemod .fullvid .container video {
width: 50vw;
height: auto; }
section.getthemod .fullvid .container .xbtn {
position: absolute;
top: 0;
right: -2.5vw;
z-index: 6;
display: flex;
width: 2.50vw;
height: 2.50vw;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px solid #80E4FE;
background: #0E232B;
transition: all 0.2s ease;
transform: translate(4px, -2px); }
section.getthemod .fullvid .container .xbtn:before {
background: url(../img/car/x.svg);
width: 1.25vw;
height: 1.25vw;
content: '';
background-size: contain;
background-position: center;
background-repeat: no-repeat; }
section.getthemod .fullvid .container .xbtn:hover {
background: #1E404A; }
section.getthemod article {
display: inline-flex;
padding: 5vw 0vw;
flex-direction: column;
align-items: flex-start;
gap: 2.08vw;
width: 28.59vw; }
section.getthemod article h2 {
color: #000;
font-family: Montserrat;
font-size: 2.29vw;
font-style: normal;
font-weight: 700;
line-height: 2.92vw; }
section.getthemod article p {
color: #202020;
font-family: Montserrat;
font-size: 0.94vw;
font-style: normal;
font-weight: 500;
line-height: 155.556%;
letter-spacing: 0vw; }
section.getthemod article p strong {
font-weight: 500;
color: #EB622B; }
section.challenge {
position: relative;
width: 100%;
background: url("../img/obelisk.png") center center no-repeat, black;
background-attachment: fixed;
background-size: 26.09vw auto; }
section.challenge .prizes {
display: flex;
width: 100%;
padding: 6.67vw 0vw 6.67vw 0vw;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5vw; }
section.challenge .prizes .head {
display: flex;
width: 57.92vw;
padding-bottom: 2.50vw;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.25vw; }
section.challenge .prizes .head h2 {
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 3.75vw;
font-style: italic;
font-weight: 800;
line-height: 100%;
letter-spacing: -0.05vw;
text-transform: uppercase; }
section.challenge .prizes .head h2 span {
color: #EB622B; }
section.challenge .prizes .head p {
color: #DFDFDF;
text-align: center;
font-family: Montserrat;
font-size: 0.94vw;
font-style: normal;
font-weight: 500;
line-height: 155.556%;
letter-spacing: 0vw;
width: 40.10vw; }
section.challenge .prizes .head p strong {
font-weight: 700; }
section.challenge .prizes .gogo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2.50vw;
width: 72.71vw; }
section.challenge .prizes .gogo h3 {
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 2.29vw;
font-style: normal;
font-weight: 700;
line-height: 118.182%;
letter-spacing: 0vw; }
section.challenge .prizes .gogo .sml {
width: 100%;
color: #9F9F9F;
font-family: Lato;
font-size: 0.83vw;
font-style: normal;
font-weight: 400;
line-height: 150%;
letter-spacing: 0vw; }
section.challenge .prizes .gogo .boxes {
display: flex;
width: 100%;
align-items: flex-start;
align-content: flex-start;
gap: 1.25vw;
flex-wrap: wrap; }
section.challenge .prizes .gogo .boxes .box {
font-size: 0;
flex: 1; }
section.challenge .prizes .gogo .boxes .box .poster {
width: 100%; }
section.challenge .prizes .gogo .boxes .box .txt {
display: flex;
padding: 2.50vw 2.50vw;
flex-direction: column;
align-items: center;
gap: 1.25vw;
align-self: stretch;
background: #101010; }
section.challenge .prizes .gogo .boxes .box .txt article {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.67vw;
align-self: stretch; }
section.challenge .prizes .gogo .boxes .box .txt article .icon {
display: flex;
width: 2.08vw;
height: 2.08vw;
padding: 0.10vw 0vw;
justify-content: center;
align-items: center; }
section.challenge .prizes .gogo .boxes .box .txt article .info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.83vw;
align-self: stretch; }
section.challenge .prizes .gogo .boxes .box .txt article .info h4 {
align-self: stretch;
color: #FFF;
font-family: Montserrat;
font-size: 1.25vw;
font-style: normal;
font-weight: 700;
line-height: 116.667%;
letter-spacing: 0vw; }
section.challenge .prizes .gogo .boxes .box .txt article .info p {
align-self: stretch;
color: #9F9F9F;
font-family: Lato;
font-size: 0.94vw;
font-style: normal;
font-weight: 400;
line-height: 155.556%;
letter-spacing: 0vw; }
section.challenge .prizes .gogo .boxes .box .txt article .info .worth {
display: flex;
align-items: center;
align-content: center;
gap: 0.42vw;
align-self: stretch;
flex-wrap: wrap; }
section.challenge .prizes .gogo .boxes .box .txt article .info .worth .main {
color: #EB622B;
font-family: Montserrat;
font-size: 1.67vw;
font-style: normal;
font-weight: 700;
line-height: 125%;
letter-spacing: 0vw; }
section.challenge .prizes .gogo .boxes .box .txt article .info .worth .times {
color: #FFF;
font-family: Lato;
font-size: 0.83vw;
font-style: normal;
font-weight: 700;
line-height: 150%;
letter-spacing: 0vw; }
section.challenge .howto {
display: flex;
width: 100%;
padding: 6.67vw 11.77vw 6.67vw 11.77vw;
flex-direction: column;
align-items: center;
gap: 2.50vw;
box-sizing: border-box; }
section.challenge .howto h3 {
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 2.29vw;
font-style: normal;
font-weight: 700;
line-height: 118.182%;
letter-spacing: 0vw; }
section.challenge .howto .items {
display: flex;
width: 63.13vw;
padding-bottom: 1.67vw;
justify-content: space-between;
align-items: flex-start; }
section.challenge .howto .items .item {
display: flex;
width: 18.75vw;
flex-direction: column;
align-items: flex-start;
gap: 1.25vw;
flex-shrink: 0; }
section.challenge .howto .items .item .num {
align-self: stretch;
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 5vw;
font-style: normal;
font-weight: 700;
line-height: 108.333%; }
section.challenge .howto .items .item h4 {
align-self: stretch;
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 1.25vw;
font-style: normal;
font-weight: 700;
line-height: 116.667%;
letter-spacing: 0vw; }
section.challenge .howto .items .item p {
align-self: stretch;
color: #BFBFBF;
text-align: center;
font-family: Lato;
font-size: 0.94vw;
font-style: normal;
font-weight: 400;
line-height: 155.556%;
letter-spacing: 0vw; }
section.challenge .howto .items .item p strong {
color: #FFF;
font-weight: 700; }
section.challenge .howto .items .item p span {
color: #EB622B;
font-weight: 700; }
section.challenge .terms {
display: flex;
width: 100%;
padding: 2.50vw 0vw;
box-sizing: border-box;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2.50vw; }
section.challenge .terms p {
color: #DFDFDF;
text-align: center;
font-family: Lato;
font-size: 0.73vw;
font-style: normal;
font-weight: 400;
line-height: 142.857%;
letter-spacing: 0vw;
text-decoration-line: underline; }
section.dates {
width: 100%;
background: linear-gradient(197deg, #0B90DE 27.86%, #0BABDE 157.79%), #0B90DE;
padding: 0 13.65vw;
box-sizing: border-box;
font-size: 0; }
section.dates .info {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 0.52vw;
background: url("../img/datebg.svg") center center no-repeat;
background-size: 100% 101%;
width: 100%;
height: 3.75vw;
align-items: center;
justify-content: center; }
section.dates .info p {
color: #0B90DE;
text-align: center;
font-family: Montserrat;
font-size: 1.04vw;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0vw; }
section.dates .timeline {
display: flex;
width: 72.40vw;
padding: 2.50vw 0vw 2.92vw 0vw;
justify-content: space-evenly;
align-items: center; }
section.dates .timeline .arr {
width: 0.89vw; }
section.dates .timeline .icon {
width: 2.08vw;
height: 2.08vw; }
section.dates .timeline .date {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.21vw; }
section.dates .timeline .date span {
color: #FFF;
text-align: center;
font-family: Lato;
font-size: 0.94vw;
font-style: normal;
font-weight: 400;
line-height: 155.556%; }
section.dates .timeline .date strong {
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 1.04vw;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0vw; }
.frame {
width: 100%;
position: relative;
top: -1px; }
section.about {
display: flex;
width: 100%;
padding: 0vw 13.54vw 6.67vw 13.65vw;
justify-content: space-between;
align-items: flex-start;
background: #000;
box-sizing: border-box; }
section.about .box {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.08vw;
max-width: 33.33vw; }
section.about .box img {
height: 5vw; }
section.about .box article {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25vw; }
section.about .box h3 {
color: #FFF;
font-family: Montserrat;
font-size: 2.29vw;
font-style: normal;
font-weight: 700;
line-height: 118.182%;
letter-spacing: 0vw; }
section.about .box p {
color: #DFDFDF;
font-family: Lato;
font-size: 0.94vw;
font-style: normal;
font-weight: 400;
line-height: 155.556%;
letter-spacing: 0vw; }
section.bottom {
height: 52.14vw;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center; }
section.bottom article {
display: inline-flex;
padding: 5vw 0vw;
flex-direction: column;
align-items: center;
gap: 2.50vw;
max-width: 44.17vw; }
section.bottom article .btns {
display: flex;
flex-direction: column;
align-items: center;
gap: 3.33vw; }
section.bottom article .btns .deets {
display: flex;
width: 28.28vw;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
row-gap: 1.25vw;
flex-wrap: wrap; }
section.bottom article .btns .deets .item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.83vw;
color: #DFDFDF;
font-family: Montserrat;
font-size: 0.63vw;
font-style: normal;
font-weight: 500;
line-height: 166.667%;
letter-spacing: 0.06vw;
text-transform: uppercase; }
section.bottom article .btns .deets .item svg, section.bottom article .btns .deets .item img {
width: 1.25vw;
height: 1.25vw; }
section.bottom article .logos {
display: flex;
align-items: center;
gap: 0.78vw; }
section.bottom article .logos .x {
width: 1.04vw;
height: 0.94vw; }
section.bottom article .logos .logo {
display: flex;
width: 8.59vw;
height: 6.51vw;
padding: 0.42vw;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0; }
section.bottom article .logos .logo img {
height: 6.51vw; }
section.bottom article .logos .logo img.ark {
width: 12.91vw;
height: 13.22vw;
flex-shrink: 0; }
section.bottom article .title {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25vw; }
section.bottom article .title h2 {
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 3.75vw;
font-style: italic;
font-weight: 800;
line-height: 100%;
letter-spacing: -0.05vw;
text-transform: uppercase; }
section.bottom article .title h3 {
width: 28.18vw;
color: #DFDFDF;
text-align: center;
font-family: Montserrat;
font-size: 0.94vw;
font-style: normal;
font-weight: 500;
line-height: 155.556%;
letter-spacing: 0vw; }
section.bottom .artl {
position: absolute;
left: 0;
top: 0;
height: 100%; }
section.bottom .artr {
position: absolute;
right: 0;
top: 0;
height: 100%; }
section.bottom .shader .specular {
/* mix-blend-mode: color-dodge; */
background-color: #000;
background-position: top center;
background-repeat: no-repeat;
mix-blend-mode: color-dodge;
height: 100%;
background-attachment: fixed;
background-image: linear-gradient(179deg, #000 40%, red, orange, rgba(255, 255, 255, 0.6) 60%, #000 80%);
/* background: white; */
/* position: relative; */
z-index: 2;
background-position: top center;
background-image: linear-gradient(125deg, #191513 30%, #ff0, #000000, #000000, #000000 70%);
opacity: 0.7; }
section.bottom .shader .mask {
mix-blend-mode: color-dodge;
background-color: #fff;
background-size: cover;
background-image: url(../img/holo.jpeg);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
backface-visibility: hidden; }
section.bottom .light1 {
position: absolute;
width: 100%;
top: 0;
left: 0; }
section.bottom .light2 {
position: absolute;
width: 100%;
bottom: 0;
left: 0; }
section.bottom .shader1 {
position: absolute;
width: 100%;
top: 0;
height: 5vw;
left: 0;
backface-visibility: hidden;
display: block;
overflow: hidden; }
section.bottom .shader1 img {
display: block;
width: 100%;
height: auto;
margin: 0; }
section.bottom .shader1 .specular {
-webkit-mask-image: url(../img/lighting.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat; }
section.bottom .shader2 {
position: absolute;
width: 100%;
bottom: 0.36vw;
height: 5vw;
left: 0;
backface-visibility: hidden;
display: block;
overflow: hidden; }
section.bottom .shader2 img {
display: block;
width: 100%;
height: auto;
margin: 0;
height: 100%;
width: 100%; }
section.bottom .shader2 .specular {
background-image: linear-gradient(344deg, #191513 30%, #ff0, #000000, #000000, #000000 70%);
-webkit-mask-image: url(../img/lighting2.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat; }
@media only screen and (max-width: 600px) {
.cta {
height: 48px;
padding: 16px 32px;
font-size: 16px;
margin-bottom: 6px; }
.bar {
height: auto;
padding: 40px 0;
padding-bottom: 80px; }
.bar br {
content: ""; }
.bar br:after {
content: " "; }
.bar .lcloud {
width: 201px;
height: 98px;
top: -60px; }
.bar .rcloud {
width: 134px;
height: 98px;
bottom: -50px; }
.bar .container {
flex-direction: column;
gap: 16px; }
.bar .date {
width: 100%;
font-size: 16px;
max-width: 100%;
gap: 8px; }
.bar .date img {
height: 40px; }
.bar .arrow svg {
width: 30px;
padding: 20px 0;
transform: rotate(90deg); }
.bar .icon img {
height: 40px; }
section.faq {
padding: 80px 0; }
section.faq h2 {
font-size: 32px;
margin-bottom: 40px; }
section.faq h2 .desk {
display: none; }
section.faq h2 .mob {
display: inline-block;
height: 142px; }
section.faq .faqs {
width: 90%;
gap: 24px; }
section.faq .faqs .q {
position: relative;
padding-bottom: 24px; }
section.faq .faqs .q p {
font-size: 22px; }
section.faq .faqs .q .chevron {
top: 44%; }
section.faq .faqs .a {
padding: 4vw;
font-size: 18px; }
section.faq .faqs .a ul {
padding-left: 6.5vw; }
section.faq .faqs .a p {
padding: 15px; }
section.faq .terms {
margin-top: 40px; }
section.faq .terms a {
font-size: 16px; }
footer .desc {
max-width: 90%; }
footer .backtop img {
height: 80px; }
.owfooter {
flex-direction: column;
padding: 15px; }
.owfooter .nav {
display: flex;
gap: 9px; }
.owfooter .nav p:first-of-type {
display: none; }
.owfooter .mobow {
display: inline-block;
text-align: center; }
.header {
padding: 5vw;
padding-top: 10px; }
.header img {
height: 40px; }
.header .btns {
display: none; }
.thumb, .mobow, .mobdates, .mobbird {
display: block;
width: 100%; } }
/*# sourceMappingURL=style.css.map */