/*================================================================
                 NAVIGATION TOGGLE STYLES
================================================================*/

.menuToggle { display:block; position:relative; width:50px; height:46px; background:#333; }
.menuToggle:before, .menuToggle:after, .menuToggle > span:before {
    content:" ";
    position:absolute;
    left:15%;
    border-radius:2px;
    width:70%; height:3px;
    background:#fff;
}

.menuToggle:before { top:11px; }
.menuToggle:after { top:21px; }
.menuToggle > span:before { top:31px; }

.menuToggle:hover, .menuToggle:focus, /*.js-menu-active .menuToggle*/ { background:#111; }

@media (min-width:48em){
    .menuToggle { display:none; }
    .mobile-navigation { display: none;}
}

/*================================================================
                 NAVIGATION STYLES
================================================================*/

/*
    THESE STYLES will probably not be needed or adjusted in main
    - * for example is most efficient when not a child of a class
       -- hopefully you already are using the box sizing globally
    - you may not need text-decoration etc. depending on your global anchors
*/
.js-clickMenu a { color: #414344; text-decoration: none; }
.js-clickMenu * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* ================= DEFAULT SETTINGS ================= */

.js-clickMenu { position:relative; z-index:1000; }
.js-clickMenu ul { margin:0; padding:0; list-style:none; }
.js-clickMenu li { border-top:1px solid #999; }
.js-clickMenu li:first-child {}
.js-clickMenu li a { display:block; padding: 10px; position:relative; font-size: 1.13em; z-index: 1;}

.js-clickMenu .icon-arrow-down-2:after {
	vertical-align: top;
    padding-left: 5px;
    color: #426c8d;
}

.js-clickMenu .subMenu { position:relative; }
.js-clickMenu .subMenu ul li { position:relative;}

.js-clickMenu > ul > li:hover > a,
.js-clickMenu > ul > .opened > a,
.js-clickMenu > ul > li.on > a,
.js-clickMenu > ul > li > a:hover /*, .js-clickMenu > ul > li > a:focus*/ { 
    background: #f3f3f3; 
}

/*.js-clickMenu ul {
    max-height:0;
    opacity:0;
    overflow:visible;
    -wekbit-transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
            transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}*/

/* ================= MENU TOGGLE FUNCTIONALITY ================= */

/*.js-menu-active*/ .js-clickMenu > ul { max-height:80em; opacity:1; }
.js-clickMenu .opened > ul,
.js-clickMenu .opened > .subMenu > ul { max-height:80em; opacity:1; }


@media (min-width:48em){
    .js-clickMenu ul { overflow:visible; }
    .js-clickMenu li { border-top:0; }

    .js-clickMenu > ul { 
        display: table; 
        width: 100%; 
        table-layout: fixed; 
        max-height: 80em; 
        opacity: 1; 
    }
    
    .js-clickMenu > ul > li { 
        display:table-cell; 
        vertical-align:middle; 
        border-left: 1px solid #fff; 
        border-top: 1px solid #fff; 
        border-right: 1px solid #fff;
        -webkit-border-top-left-radius:5px;    
        -moz-border-top-left-radius:5px;
        border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;    
        -moz-border-top-right-radius:5px;
        border-top-right-radius:5px;        
        -webkit-box-shadow: 0px 0px 1px #fff;
        -moz-box-shadow: 0px 0px 1px #fff;
        box-shadow: 0px 0px 1px rgba(255, 255, 255, 0); 
    }
    
    .js-clickMenu > ul > li > a { 
        display: table; 
        width: 100%; 
        padding: 0; 
        color: #414344;
        -webkit-border-top-left-radius:5px;    
        -moz-border-top-left-radius:5px;
        border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;    
        -moz-border-top-right-radius:5px;
        border-top-right-radius:5px;           
    }
    
    .js-clickMenu > ul > li:hover,
    .js-clickMenu > ul > li.on { 
        display:table-cell; 
        vertical-align:middle; 
        border-left: 1px solid #a6b3be; 
        border-top: 1px solid #a6b3be; 
        border-right: 1px solid #a6b3be;
        -webkit-border-top-left-radius:5px;    
        -moz-border-top-left-radius:5px;
        border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;    
        -moz-border-top-right-radius:5px;
        border-top-right-radius:5px;        
        -webkit-box-shadow: 0px 0px 1px #333;
        -moz-box-shadow: 0px 0px 1px #333;
        box-shadow: 0px 0px 1px rgba(51, 51, 51, 0.2); 
    } 
    
    .js-clickMenu > ul > li.opened { 
        display:table-cell; 
        vertical-align:middle; 
        border-left: 1px solid #a6b3be; 
        border-top: 1px solid #a6b3be; 
        border-right: 1px solid #a6b3be;
        -webkit-border-top-left-radius:5px;    
        -moz-border-top-left-radius:5px;
        border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;    
        -moz-border-top-right-radius:5px;
        border-top-right-radius:5px;        
        -webkit-box-shadow: 0px 0px 1px #333;
        -moz-box-shadow: 0px 0px 1px #333;
        box-shadow: 0px 0px 1px rgba(51, 51, 51, 0.2); 
    }     
    
    .js-clickMenu > ul > li > a > span { display:table-cell; padding: 0px 0px 10px 10px; height:50px; vertical-align:middle; text-align:center; }

    .js-clickMenu .hasSub span:after { position:static; }
    .js-clickMenu .subMenu .hasSub:after { top:8px; right:5px; }

    .js-clickMenu .subMenu ul { display:block; position:absolute; z-index:-1; left:0; top:-100em; /*min-width:100%;*/ background:#f3f3f3; }    

    .js-clickMenu li:nth-last-child(-n+2) .subMenu ul { left:auto; right:0; }
    .js-clickMenu li:nth-last-child(-n+2) .subMenu ul ul { margin-left:0; }

    .js-clickMenu .subMenu a { 
        margin: 2px 5px; 
        padding: 1px 10px; 
        background: none; 
    }
     
    .js-clickMenu .subMenu li a {
        color: #212121;
        font-size: 0.94em;
        font-weight: 700;        
    }
	.js-clickMenu .subMenu li a + a {margin:0; padding:0;}
    
    .js-clickMenu .subMenu li a.view-all {
        font-style: italic;
    }    
    
    .js-clickMenu .subMenu sup {
        font-size: 0.63em;
    }    
    
    .js-clickMenu .subMenu li li a {
        color: #265d88;
        font-size: 0.88em;
        font-weight: 500;        
    }    

    .js-clickMenu .subMenu li:hover > a,
    .js-clickMenu .subMenu a:hover, .js-clickMenu .subMenu a:focus,
    .js-clickMenu .subMenu .opened > a { color:#000; background:#ddd; }


    /* ================= HOVER FUNCTIONALITY (MAYBE JS FAILED) ================= */

    .js-clickMenu li:hover > .subMenu > ul { top:0; max-height:80em; opacity:1; }
    .js-clickMenu li:hover > ul { left:100%; top:-5px; margin-left:-5px; max-height:80em; opacity:1; }

    /* Eh if you need IE8 Support have pragmming add in a class - This will work for every other browser in the meantime */
    .js-clickMenu li:nth-last-child(-n+2) li:hover > ul { left:auto; right:100%; margin-right:-5px; }


    /* ================= HOVER FUNCTIONALITY REMOVED AND OPENED FUNCTIONALITY ADDED ON SETUP ================= */

    .js-enabled li:hover > .subMenu > ul { top:0; max-height:0; opacity:0; }
    .js-enabled li:hover > ul { left:0; top:-5px; max-height:0; opacity:0; }
    .js-enabled li:nth-last-child(-n+2) li:hover > ul { right:0; }

    .js-enabled ul ul {
        -wekbit-transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, left 0.4s ease-in-out, right 0.4s ease-in-out;
                transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, left 0.4s ease-in-out, right 0.4s ease-in-out;
    }
    .js-enabled .subMenu ul ul { top:-5px; }

    .js-enabled .subMenu ul { top:0; overflow:hidden; }
    .js-enabled .opened > .subMenu > ul, .js-enabled .opened:hover > .subMenu > ul { top:0; max-height:80em; opacity:1; }
    .js-enabled .opened > ul, .js-enabled .opened:hover > ul { left:100%; top:-5px; margin-left:-5px; max-height:80em; opacity:1; }
    .js-enabled li:nth-last-child(-n+2) .opened > ul,
    .js-enabled li:nth-last-child(-n+2) .opened:hover > ul { right:100%; margin-right:-5px; }

    .js-enabled .animated > ul,
    .js-enabled .animated .subMenu > ul { overflow:visible; z-index:10; }
    .js-enabled .animating > ul { z-index:-1; }
}

/*================================================================
                 MEGA MENU NAVIGATION STYLES
================================================================*/

@media(min-width:48em){

    .desktop-nav {
        display: inline;
    }
    
    .mobile-nav {
        display: none;
    }    

    .megaMenu {
        display: block;
        float: right;
        height: 40px;
        max-width: 600px;
        margin-right: 16.5% !important;
    }    
    
    .megaMenu .subMenu {
        position:absolute;
        /*top: 100%;*/ 
        margin-top: -1px;
        left:0;
        width:100%; 
        max-height:0;
        background: #f3f3f3;
        overflow:hidden;
        /*padding-right: 90px !important;*/
        -wekbit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
              
    }

    .megaMenu li.opened .subMenu {
        border-top: 1px solid #a6b3be;
        -wekbit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;      
        -webkit-border-top-left-radius:5px;    
        -moz-border-top-left-radius:5px;
        border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;    
        -moz-border-top-right-radius:5px;
        border-top-right-radius:5px;        
        -webkit-box-shadow: 0px 0px 1px 0px #333;
        -moz-box-shadow: 0px 0px 1px 0px #333;         
    }    
    
    .megaMenu .subMenu .hasSub:after { display:none; }

    .megaMenu .subMenu ul { position:static; max-height:80em; width:100%; overflow:hidden; background:transparent; max-height:80em; opacity:1; /*margin-left: 190px;*/}
    .megaMenu .subMenu ul ul { margin-left:0; margin-top: 0px; margin-bottom: 18px;}
    .megaMenu .subMenu > ul > li { float:left; width:25%; }
    .megaMenu .subMenu > ul > li:nth-child(4n+1) { clear:left; }

    /* ================= HOVER FUNCTIONALITY (MAYBE JS FAILED) ================= */

    .megaMenu li:hover .subMenu { max-height:60em; padding: 20px; }
    .megaMenu li:hover > .subMenu > ul,
    .megaMenu li:hover > ul { max-height:80em; opacity:1; }

    /* ================= HOVER FUNCTIONALITY REMOVED ON SETUP ================= */

    .js-enabled .megaMenu li:hover > .subMenu { max-height:0; padding:0; }
    .js-enabled .megaMenu .opened > .subMenu, .js-enabled .megaMenu .opened:hover > .subMenu { max-height: 60em; padding: 20px 210px 20px 210px;}
    

}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
      .megaMenu {
        margin-right: 16% !important;
    }      
}

@media only screen and (min-width: 1101px) and (max-width: 1300px) {
      .megaMenu {
        margin-right: 13% !important;
    }      
    .megaMenu .subMenu ul { margin-left: 0%;} 
    .js-enabled .megaMenu .opened > .subMenu, .js-enabled .megaMenu .opened:hover > .subMenu { padding: 20px 20px 20px 20px; !important}
}

@media only screen and (min-width: 1001px) and (max-width: 1100px) {
      .megaMenu {
        margin-right: 8% !important;
    }      
    .megaMenu .subMenu ul { margin-left: 0px;} 
    .js-enabled .megaMenu .opened > .subMenu, .js-enabled .megaMenu .opened:hover > .subMenu { padding: 20px 20px 20px 20px;}
}

@media only screen and (min-width: 981px) and (max-width: 1000px) {
      .megaMenu {
        margin-right: 20px !important;
    }      
    .megaMenu .subMenu ul { margin-left: 0px;}
    .js-enabled .megaMenu .opened > .subMenu, .js-enabled .megaMenu .opened:hover > .subMenu { padding: 20px 20px 20px 20px;}
}

@media only screen and (min-width: 768px) and (max-width: 850px) {	
    .megaMenu {
        max-width: 450px;
    }      
    .js-enabled .megaMenu .opened > .subMenu, .js-enabled .megaMenu .opened:hover > .subMenu { padding: 20px 20px 20px 20px;}
}

@media only screen and (min-width: 851px) and (max-width: 914px) {	
    .megaMenu {
        max-width: 550px;
    }  
    .js-enabled .megaMenu .opened > .subMenu, .js-enabled .megaMenu .opened:hover > .subMenu { padding: 20px 20px 20px 20px;}
}

@media only screen and (min-width: 915px) and (max-width: 1200px) {	
    .megaMenu {
        max-width: 550px;
    }      
    .js-enabled .megaMenu .opened > .subMenu, .js-enabled .megaMenu .opened:hover > .subMenu { padding: 20px 20px 20px 20px;}
}

@media only screen and (min-width: 768px) and (max-width: 980px) {	
    
    .megaMenu {
        display: block;
        float: right;
        height: 40px;
        margin-right: 10px !important;
    }    
    
    .megaMenu .subMenu {
        padding-right: 0px !important;
    }

    .megaMenu .subMenu ul { margin-left: 0px;}   
    
}

.sub-menu-ul {
    float: left; 
    display: block; 
    width: 25% !important;
}

.sub-menu-li {
    float: none; 
    width: 100% !important;
}

/***** ******/

.menuLink{ 
    display: none; 
    position: absolute; 
    right: 5px; 
    margin: -88px 0px 0px 0px; 
    width: 36px; 
    height: 36px; 
    cursor:pointer; 
    z-index: 999999;
}

.menuLink:before { top:5px; } 
.menuLink:after { top:15px; } 
.menuLink:hover, .menuLink:focus, .menuLink.open {  }

/*.menuLink .activeBG {position:absolute; width:60px; height:60px; left:-13px; top:-12px; background:#333333; -webkit-border-radius: 0 4px 4px 0;border-radius: 0 4px 4px 0; display:none;}

.activeOverlayBg .activeOverlayBgIn {top:0px; position:absolute; background:#000; opacity:0.7; filter:alpha(opacity=70); width:1000%; height:100%; -webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);}
*/

.menuLink span {
    font-size: 2.19em;
    color: #456075;
}


/* Mobile Navigation */
@media only screen and (min-width: 47.95em) {
	.outerContainer {min-height:100px !important;}
	.mainNav { 
        margin: -60px 0px 0px 0px; 
        padding: 0px 0px 0px 0px; 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box; 
        min-height:30px !important;
    }
}

@media only screen and (max-width: 47.94em) {

    .desktop-nav {
        display: none;
    }
    
    .mobile-nav {
        display: inline;
    }
    
	.outerContainer {position:relative;}

	.mainNav { 
        position: relative; 
        height: auto; 
        position: absolute; 
        right: -80%; 
        top: 0px; 
        width: 80%; 
        z-index: 100; 
        background: #ffffff;
        box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
    }

	.menuLink {
		display: inline-block !important;
	}
    

    /* Common styles of menus */

    .dl-menuwrapper {
        width: 100%;
        /*max-width: 300px;*/
        float: left;
        position: relative;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-perspective-origin: 50% 200%;
        perspective-origin: 50% 200%;
    }

    .dl-menuwrapper:first-child {
        margin-right: 100px;
    }

    .dl-menuwrapper button {
        background: #ccc;
        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: transparent;
    }

    .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 div.subMenu ul {
        padding: 0;
        list-style: none;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .dl-menuwrapper li {
        position: relative;
    }

    .dl-menuwrapper li a {
        display: block;
        position: relative;
        padding: 15px 20px;
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        color: #000;
        outline: none;
    }

    .no-touch .dl-menuwrapper li a:hover {
        background: #f3f3f3;
    }

    .dl-menuwrapper li.dl-back > a {
        padding-left: 30px;
        text-transform: uppercase;
        font-size: 13px;        
    }

    .dl-menuwrapper li.dl-back:after,
    .dl-menuwrapper li > a:not(:only-child):after {
        position: absolute;
        top: 2px;
        line-height: 50px;
        font-family: 'icomoon';
        speak: none;
        -webkit-font-smoothing: antialiased;
        content: "\e609";
        color: #426c8d;
    }

    .dl-menuwrapper li.dl-back:after {
        left: 10px;
        color: rgba(212,204,198,0.3);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        color: #426c8d;        
    }

    .no-touch .dl-menuwrapper li.dl-back a:hover {
        background: transparent;
    }    
    
    .dl-menuwrapper li > a:after {
        right: 10px;
        color: #426c8d; 
    }

    .dl-menuwrapper .dl-menu {
        margin: -10px 0px 0px 0px;
        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 .dl-submenu {
        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 .dl-submenu,
    .dl-menu.dl-subview li.dl-subviewopen,
    .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
    .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
        display: block;
    }

    /* Dynamically added submenu outside of the menu context */
    .dl-menuwrapper > .dl-submenu {
        position: absolute;
        width: 100%;
        top: 50px;
        left: 0;
        margin: 0;
    }

    /* Animation classes for moving out and in */

    .dl-menu.dl-animate-out-1 {
        -webkit-animation: MenuAnimOut1 0.4s;
        animation: MenuAnimOut1 0.4s;
    }

    .dl-menu.dl-animate-out-2 {
        -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
        animation: MenuAnimOut2 0.3s ease-in-out;
    }

    .dl-menu.dl-animate-out-3 {
        -webkit-animation: MenuAnimOut3 0.4s ease;
        animation: MenuAnimOut3 0.4s ease;
    }

    .dl-menu.dl-animate-out-4 {
        -webkit-animation: MenuAnimOut4 0.4s ease;
        animation: MenuAnimOut4 0.4s ease;
    }

    .dl-menu.dl-animate-out-5 {
        -webkit-animation: MenuAnimOut5 0.4s ease;
        animation: MenuAnimOut5 0.4s ease;
    }

    @-webkit-keyframes MenuAnimOut1 {
        0% { }
        50% {
            -webkit-transform: translateZ(-250px) rotateY(30deg);
        }
        75% {
            -webkit-transform: translateZ(-372.5px) rotateY(15deg);
            opacity: .5;
        }
        100% {
            -webkit-transform: translateZ(-500px) rotateY(0deg);
            opacity: 0;
        }
    }

    @-webkit-keyframes MenuAnimOut2 {
        0% { }
        100% {
            -webkit-transform: translateX(-100%);
            opacity: 0;
        }
    }

    @-webkit-keyframes MenuAnimOut3 {
        0% { }
        100% {
            -webkit-transform: translateZ(300px);
            opacity: 0;
        }
    }

    @-webkit-keyframes MenuAnimOut4 {
        0% { }
        100% {
            -webkit-transform: translateZ(-300px);
            opacity: 0;
        }
    }

    @-webkit-keyframes MenuAnimOut5 {
        0% { }
        100% {
            -webkit-transform: translateY(40%);
            opacity: 0;
        }
    }

    @keyframes MenuAnimOut1 {
        0% { }
        50% {
            -webkit-transform: translateZ(-250px) rotateY(30deg);
            transform: translateZ(-250px) rotateY(30deg);
        }
        75% {
            -webkit-transform: translateZ(-372.5px) rotateY(15deg);
            transform: translateZ(-372.5px) rotateY(15deg);
            opacity: .5;
        }
        100% {
            -webkit-transform: translateZ(-500px) rotateY(0deg);
            transform: translateZ(-500px) rotateY(0deg);
            opacity: 0;
        }
    }

    @keyframes MenuAnimOut2 {
        0% { }
        100% {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            opacity: 0;
        }
    }

    @keyframes MenuAnimOut3 {
        0% { }
        100% {
            -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
            opacity: 0;
        }
    }

    @keyframes MenuAnimOut4 {
        0% { }
        100% {
            -webkit-transform: translateZ(-300px);
            transform: translateZ(-300px);
            opacity: 0;
        }
    }

    @keyframes MenuAnimOut5 {
        0% { }
        100% {
            -webkit-transform: translateY(40%);
            transform: translateY(40%);
            opacity: 0;
        }
    }

    .dl-menu.dl-animate-in-1 {
        -webkit-animation: MenuAnimIn1 0.3s;
        animation: MenuAnimIn1 0.3s;
    }

    .dl-menu.dl-animate-in-2 {
        -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
        animation: MenuAnimIn2 0.3s ease-in-out;
    }

    .dl-menu.dl-animate-in-3 {
        -webkit-animation: MenuAnimIn3 0.4s ease;
        animation: MenuAnimIn3 0.4s ease;
    }

    .dl-menu.dl-animate-in-4 {
        -webkit-animation: MenuAnimIn4 0.4s ease;
        animation: MenuAnimIn4 0.4s ease;
    }

    .dl-menu.dl-animate-in-5 {
        -webkit-animation: MenuAnimIn5 0.4s ease;
        animation: MenuAnimIn5 0.4s ease;
    }

    @-webkit-keyframes MenuAnimIn1 {
        0% {
            -webkit-transform: translateZ(-500px) rotateY(0deg);
            opacity: 0;
        }
        20% {
            -webkit-transform: translateZ(-250px) rotateY(30deg);
            opacity: 0.5;
        }
        100% {
            -webkit-transform: translateZ(0px) rotateY(0deg);
            opacity: 1;
        }
    }

    @-webkit-keyframes MenuAnimIn2 {
        0% {
            -webkit-transform: translateX(-100%);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
    }

    @-webkit-keyframes MenuAnimIn3 {
        0% {
            -webkit-transform: translateZ(300px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0px);
            opacity: 1;
        }
    }

    @-webkit-keyframes MenuAnimIn4 {
        0% {
            -webkit-transform: translateZ(-300px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0px);
            opacity: 1;
        }
    }

    @-webkit-keyframes MenuAnimIn5 {
        0% {
            -webkit-transform: translateY(40%);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes MenuAnimIn1 {
        0% {
            -webkit-transform: translateZ(-500px) rotateY(0deg);
            transform: translateZ(-500px) rotateY(0deg);
            opacity: 0;
        }
        20% {
            -webkit-transform: translateZ(-250px) rotateY(30deg);
            transform: translateZ(-250px) rotateY(30deg);
            opacity: 0.5;
        }
        100% {
            -webkit-transform: translateZ(0px) rotateY(0deg);
            transform: translateZ(0px) rotateY(0deg);
            opacity: 1;
        }
    }

    @keyframes MenuAnimIn2 {
        0% {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
            opacity: 1;
        }
    }

    @keyframes MenuAnimIn3 {
        0% {
            -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
            opacity: 1;
        }
    }

    @keyframes MenuAnimIn4 {
        0% {
            -webkit-transform: translateZ(-300px);
            transform: translateZ(-300px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
            opacity: 1;
        }
    }

    @keyframes MenuAnimIn5 {
        0% {
            -webkit-transform: translateY(40%);
            transform: translateY(40%);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
        -webkit-animation: SubMenuAnimIn1 0.4s ease;
        animation: SubMenuAnimIn1 0.4s ease;
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
        -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
        animation: SubMenuAnimIn2 0.3s ease-in-out;
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
        -webkit-animation: SubMenuAnimIn3 0.4s ease;
        animation: SubMenuAnimIn3 0.4s ease;
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
        -webkit-animation: SubMenuAnimIn4 0.4s ease;
        animation: SubMenuAnimIn4 0.4s ease;
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
        -webkit-animation: SubMenuAnimIn5 0.4s ease;
        animation: SubMenuAnimIn5 0.4s ease;
    }

    @-webkit-keyframes SubMenuAnimIn1 {
        0% {
            -webkit-transform: translateX(50%);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
    }

    @-webkit-keyframes SubMenuAnimIn2 {
        0% {
            -webkit-transform: translateX(100%);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0px);
            opacity: 1;
        }
    }

    @-webkit-keyframes SubMenuAnimIn3 {
        0% {
            -webkit-transform: translateZ(-300px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0px);
            opacity: 1;
        }
    }

    @-webkit-keyframes SubMenuAnimIn4 {
        0% {
            -webkit-transform: translateZ(300px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0px);
            opacity: 1;
        }
    }

    @-webkit-keyframes SubMenuAnimIn5 {
        0% {
            -webkit-transform: translateZ(-200px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0);
            opacity: 1;
        }
    }

    @keyframes SubMenuAnimIn1 {
        0% {
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
            opacity: 1;
        }
    }

    @keyframes SubMenuAnimIn2 {
        0% {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0px);
            transform: translateX(0px);
            opacity: 1;
        }
    }

    @keyframes SubMenuAnimIn3 {
        0% {
            -webkit-transform: translateZ(-300px);
            transform: translateZ(-300px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
            opacity: 1;
        }
    }

    @keyframes SubMenuAnimIn4 {
        0% {
            -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
            opacity: 1;
        }
    }

    @keyframes SubMenuAnimIn5 {
        0% {
            -webkit-transform: translateZ(-200px);
            transform: translateZ(-200px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1;
        }
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
        -webkit-animation: SubMenuAnimOut1 0.4s ease;
        animation: SubMenuAnimOut1 0.4s ease;
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
        -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
        animation: SubMenuAnimOut2 0.3s ease-in-out;
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
        -webkit-animation: SubMenuAnimOut3 0.4s ease;
        animation: SubMenuAnimOut3 0.4s ease;
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
        -webkit-animation: SubMenuAnimOut4 0.4s ease;
        animation: SubMenuAnimOut4 0.4s ease;
    }

    .dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
        -webkit-animation: SubMenuAnimOut5 0.4s ease;
        animation: SubMenuAnimOut5 0.4s ease;
    }

    @-webkit-keyframes SubMenuAnimOut1 {
        0% {
            -webkit-transform: translateX(0%);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateX(50%);
            opacity: 0;
        }
    }

    @-webkit-keyframes SubMenuAnimOut2 {
        0% {
            -webkit-transform: translateX(0%);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateX(100%);
            opacity: 0;
        }
    }

    @-webkit-keyframes SubMenuAnimOut3 {
        0% {
            -webkit-transform: translateZ(0px);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateZ(-300px);
            opacity: 0;
        }
    }

    @-webkit-keyframes SubMenuAnimOut4 {
        0% {
            -webkit-transform: translateZ(0px);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateZ(300px);
            opacity: 0;
        }
    }

    @-webkit-keyframes SubMenuAnimOut5 {
        0% {
            -webkit-transform: translateZ(0);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateZ(-200px);
            opacity: 0;
        }
    }

    @keyframes SubMenuAnimOut1 {
        0% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            opacity: 0;
        }
    }

    @keyframes SubMenuAnimOut2 {
        0% {
            -webkit-transform: translateX(0%);
            transform: translateX(0%);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            opacity: 0;
        }
    }

    @keyframes SubMenuAnimOut3 {
        0% {
            -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateZ(-300px);
            transform: translateZ(-300px);
            opacity: 0;
        }
    }

    @keyframes SubMenuAnimOut4 {
        0% {
            -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateZ(300px);
            transform: translateZ(300px);
            opacity: 0;
        }
    }

    @keyframes SubMenuAnimOut5 {
        0% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateZ(-200px);
            transform: translateZ(-200px);
            opacity: 0;
        }
    }

    /* No JS Fallback */
    .no-js .dl-menuwrapper .dl-menu {
        position: relative;
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }

    .no-js .dl-menuwrapper li .dl-submenu {
        display: block;
    }

    .no-js .dl-menuwrapper li.dl-back {
        display: none;
    }

    .no-js .dl-menuwrapper li > a:not(:only-child) {
        background: rgba(0,0,0,0.1);
    }

    .no-js .dl-menuwrapper li > a:not(:only-child):after {
        content: '';
    }

    

}

.dl-menuwrapper li .nv-title {
	display: block;
	position: relative;
	padding: 15px 20px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: #000;
	outline: none;
    cursor:pointer;
}
