/* @group main-banner
------------------------------------ */

.main-banner {
    height: 100vh;
    height: 100svh;
    transition: opacity 0.5s;
    background: var(--darkest-purple);
    padding-top: var(--heightNav);
    overflow: hidden;
}

.main-banner :is(.preloader, .banner, #important) {
    transition: 0.5s;
    height: calc(100vh - var(--heightNav));
    height: calc(100svh - var(--heightNav));
}

.main-banner :is(.preloader, #important) {
    height: 100vh;
    height: 100svh;
}

.main-banner .preloader {
    opacity: 1;
    background-color: var(--video-purple);
}

.main-banner .bp-multimedia {
    width: 100%;
    height: 100%;
}

.main-banner .scroll-down {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    flex-direction: column;
    text-transform: uppercase;
}

.main-banner .scroll-down p {
    font-weight: var(--light-ex);
}

.main-banner :is(.scroll-down, #important) {
    --desktop-w: 1.4rem;
    --mobile-w: 1.4rem;
    box-shadow: none;
}

.main-banner .scroll-down {
    padding: 0;
}

.main-banner .banner video {
    object-position: top !important;
    transition: opacity 1s ease;
}

@media only screen and (min-width : 961px) {
    .main-banner .scroll-down {
        bottom: 3.02vh;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .main-banner .scroll-down {
        bottom: 6.4vh;
        bottom: 6.4svh;
    }


}

/* @end */

body:not(.preloaded):has(.main-banner) {
    overflow: hidden;
}

body:not(.preloaded) #wrapper .main-banner .preloader {
    opacity: 1;
}

body:not(.preloaded) #wrapper .main-banner .banner {
    opacity: 0;
}

body.preloaded #wrapper .main-banner .preloader {
    opacity: 0;
    pointer-events: none;
}