/* Common styles of menus */
@media( max-width: 991px ){
    .dl-menuwrapper {
        width: 100%;
        max-width: 300px;
        float: right;
        padding: 19px 0;
        position: relative;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-perspective-origin: 50% 200%;
        perspective-origin: 50% 200%;
        z-index: 9999;
    }

    /*    .dl-menuwrapper:first-child {
            margin-right: 100px;
        }*/

    .dl-menuwrapper button {
        background: #393e41;
        border: none;
        width: 48px;
        height: 45px;
        text-indent: -900em;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        outline: none;
    }

    .dl-menuwrapper button:hover,
    .dl-menuwrapper button.dl-active,
    .dl-menuwrapper ul {
        background-color: #393e41;
    }

    .dl-menuwrapper button:after {
        content: '';
        position: absolute;
        width: 68%;
        height: 5px;
        background: #fff;
        top: 10px;
        left: 16%;
        box-shadow:
            0 10px 0 #fff,
            0 20px 0 #fff;
    }

    .dl-menuwrapper ul {
        padding: 0;
        list-style: none;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .dl-menuwrapper li {
        position: relative;
        text-align: left;
    }

    .dl-menuwrapper li a {
        display: block;
        position: relative;
        padding: 15px 20px;
        font-size: 16px;
        line-height: 20px;
        font-weight: 300;
        color: #fff;
        outline: none;
    }

    .no-touch .dl-menuwrapper li a:hover {
        background-color: #454545;
    }

    .dl-menuwrapper li.dl-back > a {
        padding-left: 30px;
        background: rgba(0,0,0,0.1);
    }

    .dl-menuwrapper li.dl-back:after,
    .dl-menuwrapper li > a:not(:only-child):after {
        position: absolute;
        top: 0;
        line-height: 50px;
        font-family: 'FontAwesome';
        speak: none;
        -webkit-font-smoothing: antialiased;
        content: "\f105";
    }

    .dl-menuwrapper li.dl-back:after {
        left: 10px;
        color: rgba(255,255,255,0.3);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .dl-menuwrapper li > a:after {
        right: 10px;
        color: rgba(255,255,255,0.3);
    }

    .dl-menuwrapper .dl-menu {
        margin: 5px 0 0 0;
        position: absolute;
        width: 100%;
        opacity: 0;
        pointer-events: none;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .dl-menuwrapper .dl-menu.dl-menu-toggle {
        transition: all 0.3s ease;
    }

    .dl-menuwrapper .dl-menu.dl-menuopen {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    /* Hide the inner submenus */
       .dl-menuwrapper li .sub-menu {
            display: none;
        }

    /*
    When a submenu is openend, we will hide all li siblings.
    For that we give a class to the parent menu called "dl-subview".
    We also hide the submenu link.
    The opened submenu will get the class "dl-subviewopen".
    All this is done for any sub-level being entered.
    */
    .dl-menu.dl-subview li,
    .dl-menu.dl-subview li.dl-subviewopen > a,
    .dl-menu.dl-subview li.dl-subview > a {
        display: none;
    }

    .dl-menu.dl-subview li.dl-subview,
    .dl-menu.dl-subview li.dl-subview .sub-menu,
    .dl-menu.dl-subview li.dl-subviewopen,
    .dl-menu.dl-subview li.dl-subviewopen > .sub-menu,
    .dl-menu.dl-subview li.dl-subviewopen > .sub-menu > li {
        display: block;
    }

    /* Dynamically added submenu outside of the menu context */
}

@media( max-width: 767px ){
    /*.header-right {
        position: absolute;
    }*/
    .dl-menuwrapper .dl-menu {
        min-width: 300px;
        right: 0;
    }
}