div.mobile-hamburger,
div.mobile-menu,
div.mobile-logo {
    display: none;
}


@media only screen and (max-width: 750px) {

    div.mobile-hamburger {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;

        cursor: pointer;
        font-size: 2.5rem;
        line-height: 3rem;

        width: 3rem;
        height: 3rem;
        text-align: center;

        &::before {
            content: '☰';
        }
    }

    div.mobile-hamburger.open {
        &::before {
            content: '✕';
        }
    }

    div.mobile-logo {
        display: block;
        a {
            display: block;
            width: 100%;
            height: 3rem;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    }

    div.mobile-menu {
        position: absolute;
        top: 0;
        left: 0;

        height: 100%;
        overflow-y: auto;

        z-index: 500;
        background-color: @ini_background;
        box-shadow: 5px 0 5px @ini_border;

        padding-top: 3rem;

        a {
            color: @ini_existing;
        }

        .mobile-search {
            display: block;
            margin: 0.25em;
            input,
            button {
                line-height: inherit;
            }
        }

        ul {
            padding: 0;
            list-style-type: none;
            list-style-image: none !important;
            margin: 0.25em 0;

            border-bottom: 1px solid @ini_border;

            li {
                margin: 0;
                padding: 0.25em;
            }
        }
    }

    div.mobile-menu.open {
        display: block;
    }

    #page-base,
    #head-base,
    #head,
    #panel {
        display: none;
    }

    div#content,
    div#footer {
        margin-left: 0;
    }

}