/* Multi Level Push Menu */
html,body,.mp-container,.scroller {
    height:100%;
}
#mp-menu {
    display:none;
}
@media (max-width:992px) {
    #mp-pusher {
        -webkit-transform:translate3d(0px,0px,0px);
        transform:translate3d(0px,0px,0px);
    }
    #mp-menu {
        display:block;
    }
    .scroller {
        overflow-y:scroll;
        -webkit-overflow-scrolling:touch;
    }  
    .mp-pushed >.scroller {
        overflow:hidden;
    } 
    .scroller,.scroller-inner {
        position:relative;
    }   
    .mp-container {
        position:relative;
        overflow:hidden;
    }  
    .menu-trigger {
        position:relative;
        padding-right:60px;
        font-size:0.9em;
    }   
    .menu-trigger:before {
        position:absolute;
        top:2px;
        right:0;
        width:40px;
        height:6px;
        background:#fff;
        box-shadow:0 6px #34495e,0 12px #fff,0 18px #34495e,0 24px #fff;
        content: ' ';
    }  
    .mp-pusher {
        position:relative;
        right:0;
        height:100%;
    } 
    .mp-menu {
        position:absolute;
        /* we can't use fixed here :( */
        top:0;
        right:0;
        z-index:1;
        width:300px;
        height:100%;
        -webkit-transform:translate3d(100%,0,0);
        -moz-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
    }   
    .mp-level {
        position:absolute;
        top:0;
        right:0;
        width:100%;
        height:100%;
        background:#f3f3f3;
        -webkit-transform:translate3d(100%,0,0);
        -moz-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
        overflow-y:auto;
         -webkit-overflow-scrolling:touch;
        color:#333;
    }   
    .mp-level.mp-level-overlay {
        overflow:visible;
    }  
    .mp-level a {
        color:#333;
    } 
    .mp-level::-webkit-scrollbar {
        width:0 !important;
    }
    /* overlays for pusher and for level that gets covered */
    .mp-pusher::after,.mp-level::after,.mp-level::before {
        position:absolute;
        top:0;
        right:0;
        width:0;
        height:0;
        content: ' ';
        opacity:0;
    }  
    .mp-pusher::after,.mp-level::after {
        background:rgba(0,0,0,0.3);
        -webkit-transition:opacity 0.3s,width 0.1s 0.3s,height 0.1s 0.3s;
        -moz-transition:opacity 0.3s,width 0.1s 0.3s,height 0.1s 0.3s;
        transition:opacity 0.3s,width 0.1s 0.3s,height 0.1s 0.3s;
    }        
    .mp-level::after {
        z-index:-1;
    }
    .mp-pusher.mp-pushed::after,.mp-level.mp-level-overlay::after {
        width:100%;
        height:100%;
        opacity:1;
        -webkit-transition:opacity 0.3s;
        -moz-transition:opacity 0.3s;
        transition:opacity 0.3s;
    }   
    .mp-level.mp-level-overlay {
        cursor:pointer;
    }   
    .mp-level.mp-level-overlay.mp-level::before {
        width:100%;
        height:100%;
        background:transparent;
        opacity:1;
    }  
    .mp-pusher,.mp-level {
        -webkit-transition:all 0.5s;
        -moz-transition:all 0.5s;
        transition:all 0.5s;
    }
    /* overlap */
    .mp-overlap .mp-level.mp-level-open {
        box-shadow:1px 0 2px rgba(0,0,0,0.2);
        -webkit-transform:translate3d(40px,0,0);
        -moz-transform:translate3d(40px,0,0);
        transform:translate3d(40px,0,0);
    }
    /* First level */
    .mp-menu >.mp-level,.mp-menu >.mp-level.mp-level-open,
    .mp-menu.mp-overlap >.mp-level,
    .mp-menu.mp-overlap >.mp-level.mp-level-open {
        box-shadow:none;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
    /* cover */
    .mp-cover .mp-level.mp-level-open {
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }    
    .mp-cover .mp-level.mp-level-open >ul >li >.mp-level:not(.mp-level-open) {
        -webkit-transform:translate3d(100%,0,0);
        -moz-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
    }
    /* content style */
    .mp-menu ul {
        margin:0;
        padding:0;
        list-style:none;
    }    
    .mp-menu h2 {
        margin:0;
        padding:1em;
        color:#333;
        text-shadow:0 0 1px rgba(0,0,0,0.1);
        font-weight:300;
        font-size: 16px;
    }    
    .mp-menu.mp-overlap h2::before {
        position:absolute;
        top:0;
        right:0;
        margin-right:8px;
        font-size:75%;
        line-height:1.8;
        opacity:0;
        -webkit-transition:opacity 0.3s,-webkit-transform 0.1s 0.3s;
        -moz-transition:opacity 0.3s,-moz-transform 0.1s 0.3s;
        transition:opacity 0.3s,transform 0.1s 0.3s;
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        transform:translateX(100%);
    }  
    .mp-menu h2 .fa{
        padding-right: 5px;
    }    
    .mp-menu.mp-cover h2 {
        text-transform:uppercase;
        font-weight:700;
        letter-spacing:1px;
        font-size:1em;
    } 
    .mp-overlap .mp-level.mp-level-overlay >h2::before {
        opacity:1;
        -webkit-transition:-webkit-transform 0.3s,opacity 0.3s;
        -moz-transition:-moz-transform 0.3s,opacity 0.3s;
        transition:transform 0.3s,opacity 0.3s;
        -webkit-transform:translateX(0);
        -moz-transform:translateX(0);
        transform:translateX(0);
    } 
    .mp-menu ul li >a {
        display:block;
        padding:0.7em 1em 0.7em 1.8em;
        outline:none;
        box-shadow:inset 0 -1px rgba(0,0,0,0.2);
        text-shadow:0 0 1px rgba(255,255,255,0.1);
        font-size: 13px;
        -webkit-transition:background 0.3s,box-shadow 0.3s;
        -moz-transition:background 0.3s,box-shadow 0.3s;
        transition:background 0.3s,box-shadow 0.3s;
    }
    .mp-menu ul li.parent > a .fa {
        float: right;
        margin-right: 10px;
        margin-top: 3px;
    }
}