body {
    width: 100%;
    height: 100%;
}

.slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
}

.slideout-menu-left {
    left: 0;
}

.slideout-menu-right {
    right: 0;
}

.slideout-panel {
    background-color: #FFF;
    min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

    .slideout-open .slideout-menu {
        display: block;
    }

.slideout-menu {
    background-color: #272723;
    background-image: linear-gradient(145deg, #252525, #272723);
}

    .slideout-menu a {
        color: #fff;
    }

        .slideout-menu a:hover {
            text-decoration: underline;
        }

    .slideout-menu .menu-section {
        margin: 25px 0;
        font-size: 1.4rem;
    }

    .slideout-menu .menu-section-title {
        text-transform: uppercase;
        color: #85888d;
        font-weight: 200;
        font-size: 13px;
        letter-spacing: 1px;
        padding: 0 20px;
        margin: 0;
    }

    .slideout-menu .menu-section-list {
        padding: 0;
        margin: 10px 0;
        list-style: none;
    }

        .slideout-menu .menu-section-list a {
            display: block;
            padding: 10px 20px;
        }

            .slideout-menu .menu-section-list a:hover {
                background-color: rgba(255, 255, 255, 0.1);
                text-decoration: none;
            }

.panel {
    text-align: center;
    padding-top: 5px;
    min-height: 100%;
}

.panel-header {
    margin: 85px auto 55px;
}