/* mobile overlay nav */
@media (max-width: 749px) {
    .mainbox nav#nav {
        position: absolute;
        left: 0;
        width: 250px;
        height: 100vh;
        z-index: 10;
        transform: translateX(-250px);
        transition: transform 0.3s ease;
    }

    .mainbox.open nav#nav {
        position: absolute;
        left: 10px;
        width: 250px;
        height: 100vh;
        z-index: 10;
        transform: translateX(0px);
        transition: transform 0.3s ease;
        -webkit-box-shadow: 10px 0px 18px -15px rgba(85, 85, 85, 0.7);
        box-shadow: 10px 0px 18px -15px rgba(85, 85, 85, 0.7);
    }
}

/* For bigger screens generally */
@media (min-width: 750px) {
    .mainbox nav#nav {
        flex-basis: 250px;
        transition: flex-basis 0.3s ease;
    }

    .mainbox.open nav#nav {
        flex-basis: 0;
        overflow: auto;
        transition: flex-basis 0.3s;
    }
}

/* --------------- checked --------------- */