/* BASICS */
.sm {
    position: relative;
    z-index: 8888;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sm,
.sm ul,
.sm li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: normal;
}
.sm > li > ul {
    display: none;
}
.sm li,
.sm a,
.sm a:link,
.sm a:hover,
.sm a:active,
.sm a:visited,
.sm a:focus {
    display: block;
    position: relative;
    font-family: 'Jost-Medium';
    white-space: nowrap;
}
.sm a.disabled {
    cursor: default;
}
/* ###### */
/* RESPONSIVE */
/* ########## */


/* ###################################################################################################### */
/* ###################################################################################################### */


/* FIRST LEVEL */
#menu {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
    #menu > li {
        margin: 0 8px;
    }
        #menu > li > a,
        #menu > li > a:link,
        #menu > li > a:hover,
        #menu > li > a:active,
        #menu > li > a:visited,
        #menu > li > a:focus {
            text-transform: uppercase;
            font-size: 22px;
            padding: 0 8px;
            line-height: 88px;
            color: #494948;
        }
            #menu > li > a:hover::after {
                content: '';
                position: absolute;
                top: -4px;
                right: 0;
                left: 0;
                display: inline-block;
                height: 4px;
                background-color: #b3a185;
            }
        /*#menu > li > a:hover,
        #menu > li > a.highlighted,
        #menu > li:hover > a {
        }*/
/* ########### */
/* RESPONSIVE */
@media (max-width: 1000px) {
    #menu > li > a,
    #menu > li > a:link,
    #menu > li > a:hover,
    #menu > li > a:active,
    #menu > li > a:visited,
    #menu > li > a:focus {
        font-size: 18px;
    }
}
@media (max-width: 820px) {
    #menu {
        flex-direction: column;
        padding: 0 16px;
    }
        #menu > li {
            width: 100%;
            margin: 0;
        }
        #menu > li:not(:first-child) {
            border-top: 1px solid #494948;
        }
            #menu > li > a,
            #menu > li > a:link,
            #menu > li > a:hover,
            #menu > li > a:active,
            #menu > li > a:visited,
            #menu > li > a:focus {
                line-height: 2;
            }
                #menu > li > a:hover::after {
                    content: none;
                }
                #menu > li > a.has-submenu::after {
                    content: '+';
                    position: absolute;
                    top: 50%;
                    right: 0;
                    left: auto;
                    transform: translateY(-50%);
                    z-index: 8;
                    height: auto;
                    background-color: transparent;
                    display: inline-block;
                    width: 24px;
                    line-height: 24px;
                    text-align: center;
                }
                #menu > li > a.has-submenu.highlighted::after {
                    content: '-';
                }
}
@media (max-width: 420px) {
    #menu > li > a,
    #menu > li > a:link,
    #menu > li > a:hover,
    #menu > li > a:active,
    #menu > li > a:visited,
    #menu > li > a:focus {
        line-height: 2.25;
    }
}
/* ########## */


/* ###################################################################################################### */
/* ###################################################################################################### */


/* SECOND LEVEL */
#menu ul {
    position: absolute;
    display: none;
    background-color: #b3a185;
    padding: 16px 8px;
}
#menu ul::before {
    content: '';
    position: absolute;
    top: -92px;
    right: 0;
    left: 0;
    display: inline-block;
    height: 4px;
    background-color: #b3a185;
}
    #menu ul a,
    #menu ul a:link,
    #menu ul a:hover,
    #menu ul a:active,
    #menu ul a:visited,
    #menu ul a:focus {
        line-height: 2.25rem;
        padding: 0 24px 0 8px;
        color: #e8e3da;
    }
    #menu ul a:hover,
    #menu ul a.selected {
        padding: 0 16px 0 16px;
        color: #fff;
    }
/* ############ */
/* RESPONSIVE */
@media (max-width: 820px) {
    #menu ul {
        position: static;
        background-color: transparent;
        padding: 0 0 16px 0;
    }
    #menu ul::before {
        content: none;
    }
        #menu ul a,
        #menu ul a:link,
        #menu ul a:hover,
        #menu ul a:active,
        #menu ul a:visited,
        #menu ul a:focus {
            color: #494948;
        }
        #menu ul a:hover {
            padding: 0 24px 0 8px;
        }
        #menu ul a.selected {
            padding: 0 16px 0 16px;
        }
}
/* ########## */