@media (max-width: 749px) {
    #sectionbox {
        position: relative;
        width: 100%;
        height: 100%;
    }

    section {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: none;
        z-index: 0;
    }

    section.active {
        display: block;
        z-index: 10;
    }

    section#rel.active .back_icn,
    section#det.active .back_icn {
        display: block;
    }

    #mainbox.open nav {
        transform: translateX(0);
    }

    #mainbox:not(.open) {
        margin-left: 0;
    }

    #mainbox nav {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        margin-left: 0 !important;
        transform: translateX(-100%);
    }
}

@media (min-width: 750px) {

    /* Apply transitions and base structural rules globally to the nav on desktop */
    #mainbox nav {
        width: 250px;
        margin-left: 0;
        transform: translateX(0);
        /*transition: margin-left 0.3s ease;*/
        flex-shrink: 0;
    }

    /* Smoothly pull it out of layout space when the .open class is stripped away */
    #mainbox:not(.open) nav {
        margin-left: -250px;
    }
}

@media (min-width: 750px) and (max-width: 1499px) {

    /* Detail & Related hide, sliding overlay window style over master if active */
    #det,
    #rel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        /* Fills workspace area */
        display: none;
    }

    #mst .back_icn {
        display: none;
    }

    #det.active,
    #rel.active {
        display: block;
        z-index: 2;
    }

    /* Show back arrow on Detail and Related viewports */
    section#rel.active .back_icn,
    section#det.active .back_icn {
        display: block;
    }
}

@media (min-width: 1500px) and (max-width: 2249px) {

    #mst,
    #det {
        display: flex;
        position: relative;
    }

    .back_icn {
        display: none;
    }

    /* Related section overlays Detail view when opened */
    #rel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50%;
        display: none;
        z-index: 5;
    }

    #rel.active {
        display: block;
    }

    /* Show back arrow on Detail and Related viewports */
    section#rel.active .back_icn {
        display: block;
    }
}

@media (min-width: 2250px) {
    section {
        /* display: block !important;*/
        position: relative !important;
        width: auto !important;
    }

    .back_icn {
        display: none;
    }

}