body, html { scroll-behavior: smooth; background-color: #162b2e !important; }

#loading {
    opacity: 1;
    position: absolute; top: 0; left: 0;
    z-index: 10000000;
    width: 100vw; height: 100vh;
    background-color: #162b2e !important;
    transition: 1s all ease;
    pointer-events: none;
    display: flex;
    align-content: center; align-items: center; justify-content: center;
    color: #F28C1A;
}
#loading2 {
    position: fixed; top: 0; left: 0;
    z-index: 10000001;
    width: 100vw; height: 100vh;
    background-color: <?= $page->svg_color ?>;
    transition: 1s all ease !important;
    display: none;
}
#sideNav { right: -10vw; transition: 1s all ease !important; }
.home { pointer-events: none; transition: 1s all ease !important; }

video { width: 100vh; height: auto; min-height: 100vh; }
canvas { display: none; }

.video-container { position: relative; overflow: hidden; }
video { position: relative; z-index: 1; }
.video-cover {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: 2; opacity: 1; transition: opacity 0.5s ease;
}
.video-cover.hide { opacity: 0; }
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-start-playback-button { display: none !important; }

.container { position: relative; width: 100%; min-height: 100vh; }
.sticky {
    position: sticky; top: 0;
    height: 100vh; width: 100%;
    overflow-x: hidden; overflow-y: hidden;
    overscroll-behavior-x: contain;
}
.horizontal { position: fixed; top: 0; height: 100%; will-change: transform; }
.cards {
    position: relative; height: 100%;
    display: flex; flex-flow: row nowrap;
    justify-content: flex-start; align-items: center;
}
.cards > div, .cards > footer { position: relative; height: 100%; }
.revealer { transition: .4s opacity ease-in-out, .2s transform ease-in-out; }
.show-revealer { opacity: 1; transform: none; }
::-webkit-scrollbar { display: none; }
.vertical-lines svg { width: auto; height: 100%; }
.peNone { pointer-events: none; }

@media (orientation: portrait) {
    video { width: 100vw; height: auto; min-height: unset; }
    .loadmadera { margin-top: -15vh; }
    .intro-description { margin-top: 35vh !important; }
    .landscape { display: none !important; width: 0; height: 0; }
    .portrait { display: block !important; }
    .anim { transition: 0s all ease-out; }
    .vertical-lines svg { width: 100%; height: auto; }
    .cards { flex-direction: column; height: auto; }
    .horizontal { width: 100%; height: 100vh; position: relative; }
    .cards > div, .cards > footer { width: 100%; height: auto; position: relative; }
    .sticky { overflow-y: scroll; }
    
    .bannerhome{
        top: -50vh;
    }
}