/*
Hides the menu at `48em`, but modify this based on your app's needs.
changed to 62 for tablet width - hide menu - 48em is mobile size
*/


@media (min-width: 70em) {

    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }

    #layout {
        padding-left: 180px; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 180px;
    }

    #toggle-condensed-menu {
        position: fixed;
        left: 180px;
    }

    #layout.active .menu-link {
        left: 180px;
    }
}

@media (max-width: 70em){
    #layout {
        padding-left: 75px; /* left col width "#condensed-menu" */
        left: 0;
    }
    #toggle-large-menu {
        position: fixed;
        left: 75px;
    }
}


@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
    #layout.active {
        position: relative;
        left: 180px;
    }
}


@media (max-width: 30em){
    #layout {
        padding-left: 40px; /* left col width "#condensed-menu" */
        left: 0;
    }
}