/*-[ Responsive Navigation ]--------------------------------*/
@media screen and (max-width: 865px) {

    a#pull {
        position: relative;
        display: flex;
        margin: 0;
        padding: 0!important;
        height: 22px;
        width: 20px;
        background: transparent;
        border: 0;
        line-height: 1;
    }

    a#pull::after {
        content: '\f0c9';
        font-family: FontAwesome;
        color: #1870ab;
        top: auto;
        right: 0;
        display: flex;
        font-size: 22px;
        font-weight: 400;
    }

    .main-container {
        position: relative;
        left: 0;
        transition: left 500ms ease;
    }
    .mobile-menu-active .main-container {
        left: 300px;
        transition: left 500ms ease;
    }
    .navigation.mobile-menu-wrapper {
        display: block;
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100%;
        background-color: #222;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
        overflow: auto;
        transition: left 500ms ease;
        -webkit-backface-visibility: hidden;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .mobile-menu-active .navigation.mobile-menu-wrapper {
        left: 0;
        z-index: 1111;
    }
    .navigation ul li {
        width: 100%;
        display: block;
    }
    .navigation ul li a {
        padding: 9px;
        width: 100%;
        color: #fff!important;
    }
    .navigation ul li:hover { 
        background: none
    }
    .navigation ul ul a {
        width: 100%;
        border: none;
    }
    .navigation ul ul {
        position: static;
        width: 100%;
        border: none;
    }
    .navigation ul ul li {
        background: none;
        width: 100%;
    }
    .navigation i { display: inline }
    .navigation ul ul a { padding: 9px 18px !important }
    .navigation ul ul ul a { padding: 9px 27px !important }
    .navigation ul ul ul ul a { padding: 9px 36px !important }
    .navigation .toggle-caret {
        display: block;
        width: 42px;
        height: 42px;
        line-height: 42px;
        color: #fff;
        border-left: 1px solid rgba(0, 0, 0, 0.2);
        top: 0;
    }
    .navigation .menu-item-has-children > a:after { content: '' }
    #mobile-menu-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 999;
        cursor: pointer;
        display: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        background: rgba(0,0,0,.5);
    }
    html.noscroll {
        position: fixed;
        overflow-y: scroll;
        width: 100%;
    }

}