/**
 * Main-menu for desktop
*/
#main-nav {
    background-color: var(--bgcolor-mainnav);
}
#main-nav ul.menu{
    font-size: var(--fntsize-mainnav);
    color:var(--color-mainnav);
    display: flex;
    align-items: center;
    justify-content: center;
}
#main-nav ul {
    padding-left:0;
    margin: 0;
    list-style-type:none;
}
#main-nav li {
    position: relative;
    padding-bottom: 0;
    margin-bottom: 0;
}
#main-nav li>:first-child{
    position: relative;
    padding:var(--padding-mainnav-a);
    text-decoration: none;
}

/**
 * sub-menu
*/
#main-nav .sb-menu .icon{
    opacity:0;
}
#main-nav.initialized .sb-menu .icon{
    opacity: 1;
}
#main-nav .menu .icon:before{
    font-size: 80%;
}

#main-nav .sub-menu {
    font-size: var(--fntsize-mainnav-sbmenu);
    color:var(--color-mainnav-sbmenu);
    position: absolute;
    min-width: 100%;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: var(--transduration-body);
    transition-delay: .1s;

    top: 100%;
    background: var(--bgcolor-mainnav-sbmenu);
}
#main-nav .sub-menu .sub-menu{
    left: 100%;
    top:0;
}
#main-nav .sub-menu li>:first-child{
    white-space: nowrap;
    padding: var(--padding-mainnav-sbmenu-a);
}

#main-nav .sub-menu.__visible{
    opacity:1;
    visibility:visible;
}
#main-nav .sub-menu.__right-placed{
    left:unset;
    right:0;
}
#main-nav .sub-menu .sub-menu.__right-placed{
    right:100%;
}
/** END sub-menu */

/* sticky modificator */
#main-nav.__fixed .inner{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1024;
    background-color: var(--bgcolor-mainnav);
    box-shadow: 0 10px 5px -10px #000;
}
/* END sticky modificator */

/* menu is not loaded for wp_is_mobile() by default */
body.sb_mobile #main-nav .btn-bar {
    display: block;
}

@media (min-width: 992px){
    #main-nav .btn-bar{
        display: none;
    }
    #main-nav li>a:hover,
    #main-nav li>a:focus{
        color:var(--color-mainnav-hover);
    }
    #main-nav .sub-menu li>a:hover,
    #main-nav .sub-menu li>a:focus{
        color:var(--color-mainnav-sbmenu-hover);
    }
}
@media (max-width: 991px){
    #main-nav .sb-menu{
        display: none;
    }
    #main-nav .container{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* for admin-bar */
@media screen and (min-width: 783px){
    .admin-bar #main-nav.__fixed .inner{
        top: 32px;
    }
}
@media screen and (max-width: 782px) and (min-width:600px){
    .admin-bar #main-nav.__fixed .inner{
        top: 46px;
    }
}