.dl-menuwrapper ul, .dl-menuwrapper li{margin:0;padding:0;list-style:none;outline:0;border:0;}
.dl-menuwrapper ul.dropdown-menu{width:100%;top:100%;top:calc(100% + 10px);}
.dl-menuopen, .dl-menuopen ul{max-height:230px;overflow-y:visible;}
.dl-menuopen{overflow-y:scroll;}
.dl-menuopen.dl-subview{overflow-y:visible;}
.dl-menuopen ul{overflow-y:visible;}
.dl-menuopen li.dl-subviewopen > ul{overflow-y:scroll;}
.dl-menuwrapper{width:300px;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-perspective-origin:50% 200%;-moz-perspective-origin:50% 200%;perspective-origin:50% 200%;right:0;display:none;position:absolute;}
.dl-menuwrapper:first-child{margin-right:100px;}
.dl-menuwrapper button{background:transparent;border:none;width:auto;overflow:hidden;position:relative;cursor:pointer;outline:none;margin:0 15px 0 0;color:#fff;z-index:999;float:right;}
.dl-menuwrapper button:after{position:absolute;width:22px;height:3px;background:#303030;top:5px;left:7%;box-shadow:0 6px 0 #303030, 0 12px 0 #303030;}
.dl-menuwrapper ul{padding:0;list-style:none;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;}
.dl-menuwrapper li{position:relative;z-index:999;}
.dl-menuwrapper li a{display:block;position:relative;padding:15px;font-size:16px;line-height:1.4em;font-weight:500;outline:none;letter-spacing:0.2px;text-align:left;z-index:999;}
.dl-menuwrapper li.dl-back > a{padding-left:30px;text-transform:UPPERCASE;font-weight:800 !important;}
.dl-menuwrapper .gosubmenu{position:absolute;top:0px;line-height:38px;font-family:FontAwesome;speak:none;-webkit-font-smoothing:antialiased;right:0;width:60px;height:48px;text-align:center;z-index:99999999999;cursor:pointer;cursor:pointer;font-size:1em;text-align:right;padding-right:20px;}
.dl-subview > .gosubmenu, .dl-subviewopen > .gosubmenu{display:none !important;}
.dl-menuwrapper li.dl-back:after{content:'\f104';left:-1px;position:absolute;top:5px;line-height:30px;font-family:'FontAwesome';speak:none;-webkit-font-smoothing:antialiased;right:0px;width:40px;height:30px;text-align:center;z-index:99999999999;cursor:pointer;font-size:1em;}
.dl-menuwrapper li.dl-back:hover:after{xcolor:#262626;}
.dl-menuwrapper li > a:after{right:15px;color:rgba(0,0,0,0.25);}
.dl-menuwrapper .dl-menu{margin:0;position:absolute;width:100%;opacity:0;pointer-events:none;-webkit-box-shadow:5px 5px 10px 0 rgba(68,68,68,0.15);box-shadow:5px 5px 10px 0 rgba(68,68,68,0.15);-webkit-backface-visibility:visible;-moz-backface-visibility:hidden;backface-visibility:hidden;}
.dl-menuwrapper ul.dropdown-menu{-webkit-box-shadow:5px 5px 10px 0 rgba(68,68,68,0.15);box-shadow:5px 5px 10px 0 rgba(68,68,68,0.15);}
.menu-rounded .dl-menuwrapper .dl-menu, .menu-rounded .dl-menuwrapper ul.dropdown-menu{border-radius:8px;}
.dl-menuwrapper .dl-menu.dl-menu-toggle{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;}
.dl-menu a{-webkit-transition:inherit;-moz-transition:inherit;-ms-transition:inherit;transition:inherit;}
.dl-menuwrapper .dl-menu.dl-menuopen{opacity:1;pointer-events:auto;}
.dl-menuwrapper li .dl-submenu-smart{display:none;}
.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-smart, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu-smart, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu-smart > li{display:block;}
.dl-menuwrapper > .dl-submenu-smart{position:absolute;width:100%;top:40px;left:0;margin:0;}
.dl-menu.dl-animate-out-1{-webkit-animation:MenuAnimOut1 0.4s;-moz-animation:MenuAnimOut1 0.4s;animation:MenuAnimOut1 0.4s;}
.dl-menu.dl-animate-out-2{-webkit-animation:MenuAnimOut2 0.3s ease-in-out;-moz-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;-moz-animation:MenuAnimOut3 0.4s ease;animation:MenuAnimOut3 0.4s ease;}
.dl-menu.dl-animate-out-4{-webkit-animation:MenuAnimOut4 0.4s ease;-moz-animation:MenuAnimOut4 0.4s ease;animation:MenuAnimOut4 0.4s ease;}
.dl-menu.dl-animate-out-5{-webkit-animation:MenuAnimOut5 0.4s ease;-moz-animation:MenuAnimOut5 0.4s ease;animation:MenuAnimOut5 0.4s ease;}
@-webkit-keyframes MenuAnimOut1 {
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 {
100%{-webkit-transform:translateX(-100%);opacity:0;}
}
@-webkit-keyframes MenuAnimOut3 {
100%{-webkit-transform:translateZ(300px);opacity:0;}
}
@-webkit-keyframes MenuAnimOut4 {
100%{-webkit-transform:translateZ(-300px);opacity:0;}
}
@-webkit-keyframes MenuAnimOut5 {
100%{-webkit-transform:translateY(40%);opacity:0;}
}
@-moz-keyframes MenuAnimOut1 {
50%{-moz-transform:translateZ(-250px) rotateY(30deg);}
75%{-moz-transform:translateZ(-372.5px) rotateY(15deg);opacity:.5;}
100%{-moz-transform:translateZ(-500px) rotateY(0deg);opacity:0;}
}
@-moz-keyframes MenuAnimOut2 {
100%{-moz-transform:translateX(-100%);opacity:0;}
}
@-moz-keyframes MenuAnimOut3 {
100%{-moz-transform:translateZ(300px);opacity:0;}
}
@-moz-keyframes MenuAnimOut4 {
100%{-moz-transform:translateZ(-300px);opacity:0;}
}
@-moz-keyframes MenuAnimOut5 {
100%{-moz-transform:translateY(40%);opacity:0;}
}
@keyframes MenuAnimOut1 {
50%{transform:translateZ(-250px) rotateY(30deg);}
75%{transform:translateZ(-372.5px) rotateY(15deg);opacity:.5;}
100%{transform:translateZ(-500px) rotateY(0deg);opacity:0;}
}
@keyframes MenuAnimOut2 {
100%{transform:translateX(-100%);opacity:0;}
}
@keyframes MenuAnimOut3 {
100%{transform:translateZ(300px);opacity:0;}
}
@keyframes MenuAnimOut4 {
100%{transform:translateZ(-300px);opacity:0;}
}
@keyframes MenuAnimOut5 {
100%{transform:translateY(40%);opacity:0;}
}
.dl-menu.dl-animate-in-1{-webkit-animation:MenuAnimIn1 0.3s;-moz-animation:MenuAnimIn1 0.3s;animation:MenuAnimIn1 0.3s;}
.dl-menu.dl-animate-in-2{-webkit-animation:MenuAnimIn2 0.3s ease-in-out;-moz-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;-moz-animation:MenuAnimIn3 0.4s ease;animation:MenuAnimIn3 0.4s ease;}
.dl-menu.dl-animate-in-4{-webkit-animation:MenuAnimIn4 0.4s ease;-moz-animation:MenuAnimIn4 0.4s ease;animation:MenuAnimIn4 0.4s ease;}
.dl-menu.dl-animate-in-5{-webkit-animation:MenuAnimIn5 0.4s ease;-moz-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;}
}
@-moz-keyframes MenuAnimIn1 {
0%{-moz-transform:translateZ(-500px) rotateY(0deg);opacity:0;}
20%{-moz-transform:translateZ(-250px) rotateY(30deg);opacity:0.5;}
100%{-moz-transform:translateZ(0px) rotateY(0deg);opacity:1;}
}
@-moz-keyframes MenuAnimIn2 {
0%{-moz-transform:translateX(-100%);opacity:0;}
100%{-moz-transform:translateX(0px);opacity:1;}
}
@-moz-keyframes MenuAnimIn3 {
0%{-moz-transform:translateZ(300px);opacity:0;}
100%{-moz-transform:translateZ(0px);opacity:1;}
}
@-moz-keyframes MenuAnimIn4 {
0%{-moz-transform:translateZ(-300px);opacity:0;}
100%{-moz-transform:translateZ(0px);opacity:1;}
}
@-moz-keyframes MenuAnimIn5 {
0%{-moz-transform:translateY(40%);opacity:0;}
100%{-moz-transform:translateY(0);opacity:1;}
}
@keyframes MenuAnimIn1 {
0%{transform:translateZ(-500px) rotateY(0deg);opacity:0;}
20%{transform:translateZ(-250px) rotateY(30deg);opacity:0.5;}
100%{transform:translateZ(0px) rotateY(0deg);opacity:1;}
}
@keyframes MenuAnimIn2 {
0%{transform:translateX(-100%);opacity:0;}
100%{transform:translateX(0px);opacity:1;}
}
@keyframes MenuAnimIn3 {
0%{transform:translateZ(300px);opacity:0;}
100%{transform:translateZ(0px);opacity:1;}
}
@keyframes MenuAnimIn4 {
0%{transform:translateZ(-300px);opacity:0;}
100%{transform:translateZ(0px);opacity:1;}
}
@keyframes MenuAnimIn5 {
0%{transform:translateY(40%);opacity:0;}
100%{transform:translateY(0);opacity:1;}
}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-in-1{-webkit-animation:SubMenuAnimIn1 0.4s ease;-moz-animation:SubMenuAnimIn1 0.4s ease;animation:SubMenuAnimIn1 0.4s ease;}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-in-2{-webkit-animation:SubMenuAnimIn2 0.3s ease-in-out;-moz-animation:SubMenuAnimIn2 0.3s ease-in-out;animation:SubMenuAnimIn2 0.3s ease-in-out;}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-in-3{-webkit-animation:SubMenuAnimIn3 0.4s ease;-moz-animation:SubMenuAnimIn3 0.4s ease;animation:SubMenuAnimIn3 0.4s ease;}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-in-4{-webkit-animation:SubMenuAnimIn4 0.4s ease;-moz-animation:SubMenuAnimIn4 0.4s ease;animation:SubMenuAnimIn4 0.4s ease;}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-in-5{-webkit-animation:SubMenuAnimIn5 0.4s ease;-moz-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;}
}
@-moz-keyframes SubMenuAnimIn1 {
0%{-moz-transform:translateX(50%);opacity:0;}
100%{-moz-transform:translateX(0px);opacity:1;}
}
@-moz-keyframes SubMenuAnimIn2 {
0%{-moz-transform:translateX(100%);opacity:0;}
100%{-moz-transform:translateX(0px);opacity:1;}
}
@-moz-keyframes SubMenuAnimIn3 {
0%{-moz-transform:translateZ(-300px);opacity:0;}
100%{-moz-transform:translateZ(0px);opacity:1;}
}
@-moz-keyframes SubMenuAnimIn4 {
0%{-moz-transform:translateZ(300px);opacity:0;}
100%{-moz-transform:translateZ(0px);opacity:1;}
}
@-moz-keyframes SubMenuAnimIn5 {
0%{-moz-transform:translateZ(-200px);opacity:0;}
100%{-moz-transform:translateZ(0);opacity:1;}
}
@keyframes SubMenuAnimIn1 {
0%{transform:translateX(50%);opacity:0;}
100%{transform:translateX(0px);opacity:1;}
}
@keyframes SubMenuAnimIn2 {
0%{transform:translateX(100%);opacity:0;}
100%{transform:translateX(0px);opacity:1;}
}
@keyframes SubMenuAnimIn3 {
0%{transform:translateZ(-300px);opacity:0;}
100%{transform:translateZ(0px);opacity:1;}
}
@keyframes SubMenuAnimIn4 {
0%{transform:translateZ(300px);opacity:0;}
100%{transform:translateZ(0px);opacity:1;}
}
@keyframes SubMenuAnimIn5 {
0%{transform:translateZ(-200px);opacity:0;}
100%{transform:translateZ(0);opacity:1;}
}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-out-1{-webkit-animation:SubMenuAnimOut1 0.4s ease;-moz-animation:SubMenuAnimOut1 0.4s ease;animation:SubMenuAnimOut1 0.4s ease;}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-out-2{-webkit-animation:SubMenuAnimOut2 0.3s ease-in-out;-moz-animation:SubMenuAnimOut2 0.3s ease-in-out;animation:SubMenuAnimOut2 0.3s ease-in-out;}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-out-3{-webkit-animation:SubMenuAnimOut3 0.4s ease;-moz-animation:SubMenuAnimOut3 0.4s ease;animation:SubMenuAnimOut3 0.4s ease;}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-out-4{-webkit-animation:SubMenuAnimOut4 0.4s ease;-moz-animation:SubMenuAnimOut4 0.4s ease;animation:SubMenuAnimOut4 0.4s ease;}
.dl-menuwrapper > .dl-submenu-smart.dl-animate-out-5{-webkit-animation:SubMenuAnimOut5 0.4s ease;-moz-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;}
}
@-moz-keyframes SubMenuAnimOut1 {
0%{-moz-transform:translateX(0%);opacity:1;}
100%{-moz-transform:translateX(50%);opacity:0;}
}
@-moz-keyframes SubMenuAnimOut2 {
0%{-moz-transform:translateX(0%);opacity:1;}
100%{-moz-transform:translateX(100%);opacity:0;}
}
@-moz-keyframes SubMenuAnimOut3 {
0%{-moz-transform:translateZ(0px);opacity:1;}
100%{-moz-transform:translateZ(-300px);opacity:0;}
}
@-moz-keyframes SubMenuAnimOut4 {
0%{-moz-transform:translateZ(0px);opacity:1;}
100%{-moz-transform:translateZ(300px);opacity:0;}
}
@-moz-keyframes SubMenuAnimOut5 {
0%{-moz-transform:translateZ(0);opacity:1;}
100%{-moz-transform:translateZ(-200px);opacity:0;}
}
@keyframes SubMenuAnimOut1 {
0%{transform:translateX(0%);opacity:1;}
100%{transform:translateX(50%);opacity:0;}
}
@keyframes SubMenuAnimOut2 {
0%{transform:translateX(0%);opacity:1;}
100%{transform:translateX(100%);opacity:0;}
}
@keyframes SubMenuAnimOut3 {
0%{transform:translateZ(0px);opacity:1;}
100%{transform:translateZ(-300px);opacity:0;}
}
@keyframes SubMenuAnimOut4 {
0%{transform:translateZ(0px);opacity:1;}
100%{transform:translateZ(300px);opacity:0;}
}
@keyframes SubMenuAnimOut5 {
0%{transform:translateZ(0);opacity:1;}
100%{transform:translateZ(-200px);opacity:0;}
}  .demo-1 .dl-menuwrapper button{background:#c62860;}
.demo-1 .dl-menuwrapper button:hover, .demo-1 .dl-menuwrapper button.dl-active, .demo-1 .dl-menuwrapper ul{background:#9e1847;}
.demo-2 .dl-menuwrapper button{background:#e86814;}
.demo-2 .dl-menuwrapper button:hover, .demo-2 .dl-menuwrapper button.dl-active, .demo-2 .dl-menuwrapper ul{background:#D35400;}
.demo-3 .dl-menuwrapper button{background:#08cbc4;}
.demo-3 .dl-menuwrapper button:hover, .demo-3 .dl-menuwrapper button.dl-active, .demo-3 .dl-menuwrapper ul{background:#00b4ae;}
.demo-4 .dl-menuwrapper button{background:#90b912;}
.demo-4 .dl-menuwrapper button:hover, .demo-4 .dl-menuwrapper button.dl-active, .demo-4 .dl-menuwrapper ul{background:#79a002;}
.demo-5 .dl-menuwrapper button{background:#744783;}
.demo-5 .dl-menuwrapper button:hover, .demo-5 .dl-menuwrapper button.dl-active, .demo-5 .dl-menuwrapper ul{background:#643771;}
.dl-subviewopen .dl-submenu-smart:before{display:none !important;width:0 !important;height:0 !important;visibility:hidden !important;}
.dl-trigger .hamburguer-trigger-menu-icon .hamburguer-line{width:100% !important;}
.dl-trigger.dl-active .hamburguer-trigger-menu-icon .hamburger-line-1, .dl-trigger.dl-active .hamburguer-trigger-menu-icon .hamburger-line-3, .dl-trigger.dl-active .hamburguer-trigger-menu-icon .hamburger-line-3{width:100%;}
.dl-trigger.dl-active .hamburguer-trigger-menu-icon .hamburger-line-2, .dl-trigger.dl-active .hamburguer-trigger-menu-icon .hamburger-line-2{-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}
.dl-trigger.dl-active{background-color:hsla(0,0%,100%,0)!important;}
.dl-trigger.dl-active .hamburger-line-1, .dl-trigger.dl-active:before{top:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.dl-trigger.dl-active .hamburger-line-3, .dl-trigger.dl-active:after {
top:0;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}