/* Sidebar */

/* Mobile Style */
@media only screen and (max-width: 768px) {

    .sub_nav_menu {
        position: relative;
    }

    .sub_nav_menu a {
        color: #484848;
    }
    .sub_nav_menu .sub-menu a {
        color: white;
    }

    /* title */
    .sub_nav_menu > ul > li > a{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.5rem 0 0.5rem 0.7rem;
        background-color: white;
        box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.16), inset 0 3px 2px 0 rgba(0, 0, 0, 0.16);
        font-size: 1.2rem;
    }
    .sub_nav_menu > ul > li > a::after {
        content: '▾';
        margin-right: 1rem;
    }

    .sub_nav_menu > ul > li > .sub-menu {
        display: none;
        width: 100%;
        position: absolute;
        top: 2.2rem;
        z-index: 30;
        padding: 0 0.5rem 1rem 0.5rem;
        background-color: rgba(80, 80, 80, 0.9);
    }

    /* items on the first layer */
    .sub_nav_menu > ul > li > .sub-menu > li {
        margin-top: 1rem;
        font-size: 1.1rem;
    }
    .sub_nav_menu > ul > li > .sub-menu > li > a::before {
        content: '· ';
    }

    /* items on the second layer */
    .sub_nav_menu > ul > li > .sub-menu .sub-menu > li {
        margin-top: 1rem;
        margin-left: 2rem;
        font-size: 1rem;
    }

}

/* Desktop Style */
@media screen and (min-width: 769px) {

    .sidebar {
        position: relative;
        width: 16rem;
    }

    .sub_nav_menu{
        position: relative;
        display: inline-block;
        width: 100%;
    }

    /* title */
    .sub_nav_menu > ul > li > a{
        font-size: 1.5rem;
        font-weight: 500;
    }

    .sub_nav_menu > ul > li > ul {
        margin-top: 15%;
        border-top: 0.06rem solid white;
        font-weight: 300;
    }

    /* items on the first layer */
    .sub_nav_menu > ul > li > ul > li {
        margin-top: 15%;
        font-size: 1.38rem;
    }

    /* items on the second layer or deeper */
    .sub_nav_menu > ul > li > ul ul li {
        margin-top: 10%;
        margin-left: 15%;
        font-size: 1.125rem;
    }

    /* Current Location */
    .sub_nav_menu .current-menu-item > a {
        font-weight: 500;
        text-shadow: 0 0 0.9375rem white;
    }

    /* Hovered Item */
    .sub_nav_menu a {
        transition: 0.2s;
    }
    .sub_nav_menu a[href]:hover {
        font-weight: 500;
        text-shadow: 0 0 0.9375rem white;
    }

}