html,
body {
    background: #021b1d;

}

body {
    overflow-y: scroll;
}

.section-top-wrapper{
    position: -webkit-sticky;
}


*,
.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%;
    transition: all .4s linear;
}


.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;

}


.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;
}


.section-main.off {
    display: none;
}

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

}

.screen-img {
    cursor: none;
}

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



.screen-touch.off .touch-round {
    opacity: 0;
    transform: scale(.7);
}

.screen-touch.off .touch-text {
    opacity: 0;
    transform: scale(.7);
}



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

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


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



.off .screen.first {
    opacity: 0;
    transition: all 0s ease-out;

}

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

}



.section-screen {
    overflow: hidden;
}


body.over {
    overflow: hidden;
}



.intro-screen {
    transition: none;

}

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


.screen {
    background: #3a5252;
}

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

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

.hold .touch-text {
    opacity: 0;
}

.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%;
}




.screen-3d-scene {
    display: flex;
    justify-content: center;
}


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

.swiper-pagination-sticky {
    transform: none !important;
}


.screenshot.over {
    pointer-events: auto;
}

.section-top {
    height: 175vh;
}

.demo-screenshots {
    width: 70%;
}


.screen-pagination {
    cursor: none;
}

.cta-page {
    cursor: pointer;
}


.cta-page:hover svg path {

    stroke: #10121d;

}



.logo-wrapper {
    pointer-events: auto;
    cursor: pointer;
}


.reveal2{
    transition: opacity .4s .1s ease-in-out !important;

}

.reveal2.off{
    transition: opacity .2s ease-in-out;

}

@media (max-width:480px) {
    .screen.first {

        z-index: 1000;
    }


}


@media (orientation:portrait) {

    .screen {
        width: 150vh;
        width: 150dvh;
        transform-origin: 50% 57%;
    }

    .screen.first {
        width: 200%;
        transition: opacity 1s ease-in-out;
    }

    html {
        overscroll-behavior: none;
    }

    .over {
        pointer-events: none !important;
    }

    .os-bottom {
        margin-top: -50vh;
    }

    .os-bottom .swiper-wrapper {
        padding-top: 50vh;
    }

    .love-slide.swiper-slide-active .love-w1 {
        background-color: #411239;
    }

    .love-slide.swiper-slide-active .love-w2 {
        background-color: #3E260A;
    }

    .love-slide.swiper-slide-active .love-w3 {
        background-color: #001B3D;
    }

    .love-slide.swiper-slide-active .love-w4 {
        background-color: #002B29;
    }

    .demo-screenshots {
        width: 100%;
    }

    .cta-page svg{
        transform: scale(2);
    }

    .screen-img.reveal {
        mask-position: 50% 50% !important;
    }
    
    .reveal2{
        opacity: 0 !important;
    }

}

.preloader{
    opacity: 1;
}

.preloader.off{
    opacity: 0;
    transition: opacity .8s ease-in;
}


body.intro main {

    display: none;
}

body.intro .section-top {
    height: 100vh;
    height: 100dvh;
}

body.intro .hero-content{
    transition: all 4s ease-in-out;
}

body.intro .header-right{
    transition: all .8s .2s ease-out;
}

.hero-content.intro{
    opacity: 0;
}




/* fix sticky */

html,
.section-top{
    overflow: visible !important;
    position: relative;
}

body{
    overflow-y: scroll !important;
    position: relative;
}

.preloader-wrapper{
    height: 100dvh;
}