html,
body {
    background: #788d90;
    overscroll-behavior: none;
}

body {
    overflow-y: scroll;
}

.preloader{
    opacity: 1;
}

.preloader.off{
    opacity: 0;
    transition: all 2s ease-in-out;
}

.header.intro{
    opacity: 1;
    height: 100vh;
}

.logo.intro{
    width: 30vw;
}

.intro-shapes{
    opacity: 1;
}

.hero-content.off,
.intro-shapes.off{
    opacity: 0;
}

.logo-wrapper.intro{
    transform:scale(4) translateY(-12%);
    top:50vh;
}


.subtitle.off{
    opacity: 0;
    transform:translateY(2vw);
}


video {
    object-fit: cover;
}

.video-wrapper {
    /*
    width: calc(100vw - 40px);
    height: calc(100vh - 20px);
        border-radius:.8vw;
        */
    transition: all 1.6s ease-in-out;

}

.off .video-wrapper {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    transition: all 3s ease-in-out;
}

.section-video {
    position: fixed;
    top: 0;
    width: 100%;
    transition: all .4s .2s ease-in-out;
    pointer-events: none;
    background-color: #0d0d0d;
}

.section-video.off {
    opacity: 0;
}

.main {
    height: 0;
    opacity: 0;
    margin-top: -100vh;
    pointer-events: none;
    position: fixed;
}

.main.show {
    opacity: 1;
    height: auto;
    pointer-events: auto;
    transition: opacity .3s .6s ease-in-out;
}

.main.scroll {
position: relative;
}


.prompt {
    transition: all .6s ease-in-out
}

.prompt-wrapper{
    pointer-events: none;
}

.prompt-wrapper.open{
    pointer-events: auto;
}

.prompt.off{
    opacity:0;
}

.prompt.big {
    top: 0vh;
    pointer-events: none;
}

.prompt.big .prompt-wrapper {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #0F121D;
}

.big .prompt-icon,
.big .prompt-text,
.big .prompt-cta {
    opacity: 0;
    transition: all .1s ease-in-out
}

.logo,
.prompt-wrapper,
.prompt {
    transition: all .6s ease-in-out
}


.prompt-icon,
.prompt-text,
.prompt-cta {
    transition: all .1s .6s ease-in-out
}

.logo.white {
    transition: all .6s .3s ease-in-out
}


.logo.white.off {
    transition: all .3s ease-in-out
}

.middle-player {
    position: absolute;
}

.swiper-feature,
.swiper-os {
    overflow: visible !important;
}

#surface-inline-div {
    width: 100%;
    height: 100vh !important;
}

.off .slide-progress-bar {
    width: 0%;
}

.os-bottom {
    overflow: hidden;
}

.middle-player {
    transition: all .8s ease-in-out;

}

.middle-player.off {
    transform: scale(.95);
    opacity: 0;
}


.number-line.off .number{
    opacity: .4;
}

.number-line.off .number-caption{
    opacity: 0;
}

.number,
.number-caption{
    transition: all .4s ease-in-out;
}


.swiper-wrapper.swiper-wrapper-screen {
    flex-flow: nowrap !important;
    display: flex !important;
}

.switch-mode.off{
    opacity: 1;
}

@media (max-width:480px) {

    .section-video {
    position: relative;
    opacity: 1 !important;
    }

    .main{
        opacity: 1;
        height: auto;
        margin-top: 0;
        pointer-events: auto;
        position: relative;
    }

    .logo-wrapper.intro{
        transform:scale(2) translateY(-12%);
        top:50vh;
        left:auto;
    }
    
}