:root {
    --animation-time: 1.2s;
}

.hero > .containerfull {
    z-index: 2;
}

.hero {
    width: 100%;
    overflow: hidden;
    background-image: url('../img/backcoming.jpg');
    background-size: cover;
}

.hero-content {
    position: relative
}

.hero-threejs {
    z-index: 1;
}

.hero-threejs {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    max-width: 100%;
    overflow: hidden
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/*.flex-wrapper {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    !*align-items: center;*!*/
/*    flex-direction: column;*/
/*    margin-top: -3em;*/
/*}*/

.coming-soon-logo {
    max-width: 24%;
    margin-bottom: 50px;
}
.coming-soon-h1{
    justify-content: center;
    align-items: center;
    font-family: "Maax-Medium";
    font-size: 155px;
    line-height: 135px;
    color: white;
    display: inline-block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -ms-background-clip: text;
    -ms-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    background-color: white;
    background-color: white;
}
.coming-soon-h1 span:not(.nostyle) {
    text-shadow: -3px 4px 0px #f22842;
    -webkit-text-fill-color: white;
    -moz-text-fill-color: white;
    -ms-text-fill-color: white;
}
.coming-soon-h1 span.nostyle {
    -webkit-text-fill-color: white;
    -moz-text-fill-color: white;
    -ms-text-fill-color: white;

}
.shake {
    animation: var(--animation-time) shake infinite alternate;
}

@keyframes shake {
    0% {
        transform: skewX(-15deg);
    }
    5% {
        transform: skewX(15deg);
    }
    10% {
        transform: skewX(-15deg);
    }
    15% {
        transform: skewX(15deg);
    }
    20% {
        transform: skewX(0deg);
    }
    100% {
        transform: skewX(0deg);
    }
}

.hero {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero-content {
    position: relative
}

.hero-threejs {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    max-width: 100%;
    overflow: hidden
}

.scroll-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 60px;
}

.scroll {
    height: 60px;
    color: white;
    padding-right: 20px;
    float: left;
    position: absolute;
    right: 0px;
    top: -5px;
}

.scroll-bar {
    position: absolute;
    height: 60px;
    width: 2px;
    right: 0;
    animation: scroll-bar 2s linear infinite;
)
}

@keyframes scroll-bar{0%{background:linear-gradient(0deg,rgba(255,255,255,.2) 60%,rgba(255,255,255,1) 40%)}2.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 57.5%,rgba(255,255,255,1) 57.5%,rgba(255,255,255,1) 97.5%,rgba(255,255,255,.2) 97.5%,rgba(255,255,255,.2) 100%)}5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 55%,rgba(255,255,255,1) 55%,rgba(255,255,255,1) 95%,rgba(255,255,255,.2) 95%,rgba(255,255,255,.2) 100%)}7.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 52.5%,rgba(255,255,255,1) 52.5%,rgba(255,255,255,1) 92.5%,rgba(255,255,255,.2) 92.5%,rgba(255,255,255,.2) 100%)}10%{background:linear-gradient(0deg,rgba(255,255,255,.2) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 90%,rgba(255,255,255,.2) 90%,rgba(255,255,255,.2) 100%)}12.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 47.5%,rgba(255,255,255,1) 47.5%,rgba(255,255,255,1) 87.5%,rgba(255,255,255,.2) 87.5%,rgba(255,255,255,.2) 100%)}15%{background:linear-gradient(0deg,rgba(255,255,255,.2) 45%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 85%,rgba(255,255,255,.2) 85%,rgba(255,255,255,.2) 100%)}17.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 42.5%,rgba(255,255,255,1) 42.5%,rgba(255,255,255,1) 82.5%,rgba(255,255,255,.2) 82.5%,rgba(255,255,255,.2) 100%)}20%{background:linear-gradient(0deg,rgba(255,255,255,.2) 40%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 80%,rgba(255,255,255,.2) 80%,rgba(255,255,255,.2) 100%)}22.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 37.5%,rgba(255,255,255,1) 37.5%,rgba(255,255,255,1) 77.5%,rgba(255,255,255,.2) 77.5%,rgba(255,255,255,.2) 100%)}25%{background:linear-gradient(0deg,rgba(255,255,255,.2) 35%,rgba(255,255,255,1) 35%,rgba(255,255,255,1) 75%,rgba(255,255,255,.2) 75%,rgba(255,255,255,.2) 100%)}27.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 32.5%,rgba(255,255,255,1) 32.5%,rgba(255,255,255,1) 72.5%,rgba(255,255,255,.2) 72.5%,rgba(255,255,255,.2) 100%)}30%{background:linear-gradient(0deg,rgba(255,255,255,.2) 30%,rgba(255,255,255,1) 30%,rgba(255,255,255,1) 70%,rgba(255,255,255,.2) 70%,rgba(255,255,255,.2) 100%)}32.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 27.5%,rgba(255,255,255,1) 27.5%,rgba(255,255,255,1) 67.5%,rgba(255,255,255,.2) 67.5%,rgba(255,255,255,.2) 100%)}35%{background:linear-gradient(0deg,rgba(255,255,255,.2) 25%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 65%,rgba(255,255,255,.2) 65%,rgba(255,255,255,.2) 100%)}37.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 22.5%,rgba(255,255,255,1) 22.5%,rgba(255,255,255,1) 62.5%,rgba(255,255,255,.2) 62.5%,rgba(255,255,255,.2) 100%)}40%{background:linear-gradient(0deg,rgba(255,255,255,.2) 20%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 60%,rgba(255,255,255,.2) 60%,rgba(255,255,255,.2) 100%)}42.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 17.5%,rgba(255,255,255,1) 17.5%,rgba(255,255,255,1) 57.5%,rgba(255,255,255,.2) 57.5%,rgba(255,255,255,.2) 100%)}45%{background:linear-gradient(0deg,rgba(255,255,255,.2) 15%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 55%,rgba(255,255,255,.2) 55%,rgba(255,255,255,.2) 100%)}47.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 12.5%,rgba(255,255,255,1) 12.5%,rgba(255,255,255,1) 52.5%,rgba(255,255,255,.2) 52.5%,rgba(255,255,255,.2) 100%)}50%{background:linear-gradient(0deg,rgba(255,255,255,.2) 10%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 100%)}52.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 7.5%,rgba(255,255,255,1) 7.5%,rgba(255,255,255,1) 47.5%,rgba(255,255,255,.2) 47.5%,rgba(255,255,255,.2) 100%)}55%{background:linear-gradient(0deg,rgba(255,255,255,.2) 5%,rgba(255,255,255,1) 5%,rgba(255,255,255,1) 45%,rgba(255,255,255,.2) 45%,rgba(255,255,255,.2) 100%)}57.5%{background:linear-gradient(0deg,rgba(255,255,255,.2) 2.5%,rgba(255,255,255,1) 2.5%,rgba(255,255,255,1) 42.5%,rgba(255,255,255,.2) 42.5%,rgba(255,255,255,.2) 100%)}60%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 40%,rgba(255,255,255,.2) 40%,rgba(255,255,255,.2) 100%)}62.5%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 37.5%,rgba(255,255,255,.2) 37.5%,rgba(255,255,255,.2) 100%)}65%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 35%,rgba(255,255,255,.2) 35%,rgba(255,255,255,.2) 100%)}67.5%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 32.5%,rgba(255,255,255,.2) 32.5%,rgba(255,255,255,.2) 100%)}70%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 30%,rgba(255,255,255,.2) 30%,rgba(255,255,255,.2) 100%)}72.5%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 27.5%,rgba(255,255,255,.2) 27.5%,rgba(255,255,255,.2) 100%)}75%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 25%,rgba(255,255,255,.2) 25%,rgba(255,255,255,.2) 100%)}87.5%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 22.5%,rgba(255,255,255,.2) 22.5%,rgba(255,255,255,.2) 100%)}80%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 20%,rgba(255,255,255,.2) 20%,rgba(255,255,255,.2) 100%)}82.5%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 17.5%,rgba(255,255,255,.2) 17.5%,rgba(255,255,255,.2) 100%)}85%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 15%,rgba(255,255,255,.2) 15%,rgba(255,255,255,.2) 100%)}87.5%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 12.5%,rgba(255,255,255,.2) 12.5%,rgba(255,255,255,.2) 100%)}90%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 10%,rgba(255,255,255,.2) 10%,rgba(255,255,255,.2) 100%)}92.5%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 7.5%,rgba(255,255,255,.2) 7.5%,rgba(255,255,255,.2) 100%)}95%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 5%,rgba(255,255,255,.2) 5%,rgba(255,255,255,.2) 100%)}97.5%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,1) 2.5%,rgba(255,255,255,.2) 2.5%,rgba(255,255,255,.2) 100%)}100%{background:linear-gradient(0deg,rgba(255,255,255,1) 0,rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 100%)}}

@media (max-width: 1200px) {
    .coming-soon-logo {
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .shake {
        font-size: 90px;
    }
}

@media (max-width: 575px) {
    .shake {
        font-size: 60px;
    }
}

@media (max-width: 480px) {
    .shake {
        font-size: 48px;
    }
}