/**
 * Main-menu for desktop
*/
#main-nav ul.menu{
    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:1em .8em;
    text-decoration: none;
}

/**
 * sub-menu
*/
#main-nav:not(.initialized){
    /* hide sub-menu untill .js initialized
    helps omit horizontal scroll */
    overflow: hidden;
}
#main-nav:not(.initialized) .sb-menu .icon{
    opacity:0;
}
#main-nav .menu .icon:before{
    font-size: 80%;
}

#main-nav .sub-menu {
    position: absolute;
    min-width: 100%;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: .3s;
    transition-delay: .1s;

    top: 100%;
    background: whitesmoke;
}
#main-nav .sub-menu .sub-menu{
    left: 100%;
    top:0;
}
#main-nav .sub-menu li>:first-child{
    white-space: nowrap;
    padding: .5em 1em;
}

#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: white;
    box-shadow: 0 10px 5px -10px #000;
}
/* END sticky modificator */

@media (min-width: 992px){
    #main-nav .btn-bar{
        display: none;
    }
}
@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;
    }
}