.sidepanel {
    background-image: url('/static/images/sapporo/sidebar/bg-navigation.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 0;
    position: fixed;
    z-index: 999;
    height: 100%;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
}

.sidepanel .sidebar-header {
    padding: 2rem 2rem 1rem 4rem;
    font-size: 30px;
    color: #f6a95a;
}

.sidepanel a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 24px;
    color: #818181;
    display: block;
    transition: 0.3s;
    white-space: nowrap;
}

@media only screen and (max-height: 667px) {
    .sidepanel a {
        font-size: 20px;
        line-height: 20px;
    }
}

.sidepanel a:hover {
    color: #f6a95a !important;
}

.sidepanel a:hover:before, .sidepanel a.active:before {
    content: url(/static/images/sapporo/sidebar/star-icon.png);
    margin-right: 4px;
}

.sidepanel #close-sapporo-nav {
    cursor: pointer;
    width: 24px;
}

.sidepanel a.hidden {
    display: none;
}