/* ======================================================
   FILMIC MODERN MOBILE MENU
====================================================== */

.mobile-nav-toggle{
    display:none;
    width:42px;
    height:42px;
    background:none;
    border:0;
    cursor:pointer;
    margin-left:auto;
    padding:0;
    position:relative;
    z-index:9999;
}

.mobile-nav-toggle span{
    display:block;
    width:28px;
    height:3px;
    margin:6px auto;
    background:#fff;
    transition:.3s;
}

.mobile-nav-toggle.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}

.mobile-nav-toggle.active span:nth-child(2){
    opacity:0;
}

.mobile-nav-toggle.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}

/* ================= MOBILE ================= */

@media(max-width:991px){

.site-header__content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}

.mobile-nav-toggle{
    display:block;
}

.main-navigation{
    width:100%;
    display:none;
    background:#111;
    margin-top:15px;
}

.main-navigation.active{
    display:block;
}

.site-header__menu{
    display:block !important;
    margin:0;
    padding:0;
    list-style:none;
}

.site-header__menu>li{
    display:block;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.site-header__menu>li>a{
    display:block;
    padding:15px 20px;
    color:#fff;
    font-size:15px;
    text-decoration:none;
}

.site-header__menu li{
    position:relative;
}

.site-header__menu .sub-menu{

    display:none;

    position:static;

    width:100%;

    margin:0;

    padding:0;

    background:#1c1c1c;

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    box-shadow:none;

}

.site-header__menu .sub-menu li{

    border-top:1px solid rgba(255,255,255,.05);

}

.site-header__menu .sub-menu li a{

    display:block;

    padding:12px 35px;

    color:#ddd;

}

.site-header__menu li.submenu-open>.sub-menu{

    display:block;

}

/* Hide desktop-only header actions */

.right-header,
.site-header__right,
.header-right,
.r-header-layout{

    display:none !important;

}

}

/* ================= DESKTOP ================= */

@media(min-width:992px){

.mobile-nav-toggle{

    display:none !important;

}

.main-navigation{

    display:block !important;

}

.site-header__menu{

    display:flex !important;

}

.site-header__menu>.menu-item{

    margin:0 18px;

}

}