/*
 * Orion Computerworld - algemene desktopheadercorrectie.
 * Bewust compact gehouden om bestaande paginaframes niet te beïnvloeden.
 */

@media (min-width: 1000px) {
    :root {
        --orion-sticky-menu-top: 127px;
    }

    #topheader {
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100vw;
        background: #fff;
    }

    /*
     * De breedte en zijlijnen gelden altijd. Alleen top wordt relevant zodra
     * het bestaande script #container2 vastzet tijdens het scrollen.
     */
    #container2 {
        top: var(--orion-sticky-menu-top) !important;
        right: 0;
        left: 0 !important;
        width: 100% !important;
        max-width: 1280px;
        margin-right: auto;
        margin-left: auto;
        border-right: 1px solid #444477 !important;
        border-left: 1px solid #444477 !important;
        box-sizing: border-box;
    }

    #menuheader {
        width: 100% !important;
        max-width: 1280px;
        box-sizing: border-box;
    }
}

/*
 * Houd het mannetje met pakketje stabiel naast het centrale 1280px-frame.
 * Fixed positionering voorkomt herberekeningen en schokken tijdens scrollen.
 */
@media (min-width: 1480px) {
    #mannetje {
        position: fixed !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: calc(50% + 648px) !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        transform: translate3d(0, -50%, 0) !important;
        backface-visibility: hidden;
        will-change: transform;
        z-index: 40 !important;
    }

    #mannetje img {
        display: block;
        max-width: none;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

@media (max-width: 1479px) {
    #mannetje {
        display: none !important;
    }
}