/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {

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

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

    .menu-link {
        position: fixed;
        left: 180px;
        display: none;
    }

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

@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;
    }
}