html,
body {
    background: #021b1d;

}

body {
    overflow-y: scroll;
}


*,
.touch-text,
.prompt,
img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}

video {
    object-fit: cover;
}

.video-wrapper {

    transition: all 1.6s ease-in-out;

}

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

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


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

}

.swiper-slide-active .slide-progress-bar {
    width: 100%;
}

.os-bottom {
    overflow: hidden;
}

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

}

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

.reveal_old {
    mask-image: radial-gradient(transparent 20%, black 40%);
    mask-mode: alpha;
}


.reveal {
    -webkit-mask-image: url(https://cdn.prod.website-files.com/677d0295dd757e95ee869d42/6793adc532aecb9746fdb456_blur.svg);
    mask-image: url(https://cdn.prod.website-files.com/677d0295dd757e95ee869d42/6793adc532aecb9746fdb456_blur.svg);
    mask-size: 0;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    z-index: 3 !important;

}

.screen-img {
    pointer-events: none;
}

.main-slide {
    opacity: .1;
}

.main-slide.swiper-slide-active {
    opacity: 1;
}

.top-grad {
    pointer-events: none;
}

.cta-access {
    pointer-events: auto;
}

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


.main.off {
    display: none;
}

.section-screen {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    cursor: pointer;
}


.section-screen.off {
    cursor: auto
}


.screen-touch.off,
.demo-screenshots.off,
.screen-gradient.off {
    opacity: 0;
    pointer-events: none;
    transition: all .4 ease-in-out;
}




.demo-screenshots.off {
    transform: translateY(100%)
}

.screen-gradient,
.demo-screenshots {
    transition: all 1s ease-in-out;
}

.screen-touch.off,
.demo-screenshots.off,
.screen-gradient.off {
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease-in-out;
}


.off .screen.first {
    /*transform: perspective(10vw)translate3d(0,76vh,-50vw);*/
    opacity: 0;
    transition: all .4s ease-out;

}

.screen.first {
    transition: all 1s 1s ease-out;
    z-index: 1000;

}



.section-screen {
    overflow: hidden;
}

.screen,
.section-hero {}

body.over {
    overflow: hidden;
}

.section-video {
    position: absolute;
    top: 0;
    width: 100%;
    transform: translateY(0%);
    overflow: hidden;
}

.section-video.off {
    pointer-events: none;
}


.off .main-video {
    transform: translateY(100%);
}

.section-video.top,
.section-screen.top {
    transform: translateY(-100%);
}

.main-video,
.section-screen.anim,
.section-video {
    transition: all .8s ease-out;
}


@media (max-width:480px) {
    .screen.first {
        transition: all 1s 1.4s ease-out;
        z-index: 1000;
    }

    .main-video,
    .section-screen.anim,
    .section-video {
        transition: all .4s ease-out;
    }
}


.intro-screen {
    transition: none;

}

.section-hero {
    transition: opacity 2s ease-in-out;
}

.screen-img,
.screen {
    background: #3a5252;
}

.hold .screenshot.over {
    opacity: 1;
}

.hold .touch-round {
    transform: scale(.4);
    background: white;
}


.sub-text {
    transition: all .4s ease-in-out;
}

.sub-text.active {
    transition: all .4s .4s ease-in-out;
}


.section-hero,
.section-screen,
.section-video {
    height: 100dvh;
    min-height: 100dvh;
}

.screen {
    transform-origin: 50% 50%;
}

.hero-bottom.off {
    transition: all .4s ease-out;
}


.hero-bottom {
    transition: all 1s 1s ease-out;
}

@media (orientation:portrait) {

    .screen {

    }

}