/** HERO */
.nox-video-section img.nox-video {
    display: block;
    width: 100% !important;
    height: var(--nox-hero-height) !important;
    object-fit: cover;
}

.nox-video-section .nox-video-overlay {
    width: 370px !important;
    max-width: 80vw;
    height: auto;
}

.nox-video-section .nox-video-overlay[src$=".svg"][src*="do-not-open"] {
    width: 420px !important;
}

.nox-video-section .nox-video-overlay[src$=".svg"][src*="ovrdark"] {
    width: 470px !important;
}

/** MOBILE: HERO */
@media (max-width: 999px) {
    .nox-video-section .nox-video-overlay {
        width: 190px !important;
    }

    .nox-video-section .nox-video-overlay[src$=".svg"][src*="do-not-open"] {
        width: 215px !important;
    }

    .nox-video-section .nox-video-overlay[src$=".svg"][src*="ovrdark"] {
        width: 240px !important;
    }
}

/** MOBILE: INTRO */
@media (max-width: 999px) {
    .nox-game-section .nox-game-text > .vc_column-inner {
        padding-left: 32px !important;
    }

    .nox-game-section:has(.ovrdark-monster) {
        margin-bottom: 0 !important;
    }

    .nox-game-section .diagonal-gray-col:has(.ovrdark-monster) {
        height: clamp(190px, 56.25vw, 280px) !important;
        margin-top: -20px !important;
        overflow: hidden;
        z-index: 4;
    }

    .nox-game-section .hover-wrap:has(.ovrdark-monster) {
        position: static;
    }

    .nox-game-section .ovrdark-monster {
        display: block !important;
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: none;
        object-fit: contain;
        object-position: center;
    }

}

/** MOBILE: TRAILER */
@media (max-width: 999px) {
    .wpb_video_widget {
        width: 100vw;
        margin-top: -7px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/** MOBILE: YOSHIMI CHARACTER */
@media (max-width: 999px) {
    .donotopen-monster.yoshimi-character {
        left: 10%;
        bottom: 10%;
        width: 70%;
        height: auto;
    }
}

/** DESKTOP: GAME PAGES */
@media (min-width: 1000px) {
    .nox-game-section {
        margin-top: 4.7vw !important;
        margin-bottom: 4.7vw !important;
    }

    .nox-game-section .nox-game-text {
        width: 49% !important;
    }

    .nox-game-section .diagonal-gray-col {
        width: 51% !important;
    }

    .skew-slide,
    .skew-slide:first-child {
        flex: 0 0 33.75vw;
        margin-left: -2.5vw;
        aspect-ratio: 648 / 339;
    }

    .skew-slide img {
        height: 100%;
    }

    .skew-slider {
        margin-bottom: 4.7vw;
    }

    .skew-navbar {
        width: 65.4vw;
        max-width: none;
    }

    .wpb_video_widget {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    .wpb_video_widget .wpb_video_wrapper {
        position: relative;
        height: 38vw;
        padding-top: 0 !important;
        background-color: #0a0a0a;
    }

    .wpb_video_widget .wpb_video_wrapper iframe {
        left: 50% !important;
        width: 67.6vw !important;
        height: 38vw !important;
        transform: translateX(-50%);
    }

    .wpb_video_widget .wpb_video_wrapper > .nox-embed-placeholder {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    .wpb_text_column:has(+ .wpb_video_widget) {
        margin-left: calc((100% - 100vw) / 2 + 4.4vw);
    }
}

/** GALLERY SLIDER */
.skew-slide {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-line-active {
    transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1), width 0.15s ease;
}

/** HERO TITLE */
.nox-video-section .nox-video-overlay.nox-video-overlay-center {
    top: 50%;
}