.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;
 xmax-width:300px;
 xfloat:right;
 xposition:relative;
 -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:0 0;
 border:none;
 width:auto;
 height:32px;
 overflow:hidden;
 position:relative;
 cursor:pointer;
 outline:none;
 -webkit-border-radius:3px;
 border-radius:3px;
 margin:0 10px;
 color:#fff;
 padding:13px;
 z-index:999;
 float:right;
 width:40px!important
}
.dl-menuwrapper ul {
 xbackground:#aaa;
 x-webkit-box-shadow:0 1px 4px 0 #c4c4c4;
 xbox-shadow:0 1px 4px 0 #c4c4c4
}
.dl-menuwrapper button:after {
 content:'';
 position:absolute;
 width:22px;
 height:3px;
 background:#303030;
 top:7px;
 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
}
.dl-menuwrapper li a {
 display:block;
 position:relative;
 padding:15px;
 font-size:16px;
 line-height:1.4em;
 font-weight:500;
 outline:none;
 letter-spacing:.2px;
 text-align:left;
 z-index:9
}
.dl-menuwrapper li.dl-back>a {
 padding-left:30px;
 text-transform:UPPERCASE;
 font-weight:800!important
}
.dl-menuwrapper .gosubmenu {
 position:absolute;
 top:0;
 line-height:48px;
 font-family:FontAwesome;
 speak:none;
 -webkit-font-smoothing:antialiased;
 right:0;
 xborder:1px solid;
 xbackground:#fff;
 width:60px;
 height:48px;
 text-align:center;
 z-index:99999999999;
 cursor:pointer;
 cursor:pointer;
 xborder-color:#ebeef0;
 font-size:1.3em;
 x-webkit-border-radius:3px;
 xborder-radius:3px;
 text-align:right;
 padding-right:20px
}
.dl-subview>.gosubmenu,
.dl-subviewopen>.gosubmenu {
 display:none!important
}
.dl-menuwrapper li.dl-back:after {
 content:"\f104";
 left:0;
 position:absolute;
 top:9px;
 line-height:30px;
 font-family:FontAwesome;
 speak:none;
 -webkit-font-smoothing:antialiased;
 right:2px;
 width:40px;
 height:30px;
 text-align:center;
 z-index:99999999999;
 cursor:pointer;
 font-size:1.3em
}
.dl-menuwrapper li.dl-back:hover:after {
 xcolor:#262626
}
.dl-menuwrapper li>a:after {
 right:15px;
 color:rgba(0,0,0,.25)
}
.dl-menuwrapper .dl-menu {
 margin:0;
 position:absolute;
 width:100%;
 opacity:0;
 pointer-events:none;
 -webkit-box-shadow:0 2px 6px 0 rgba(68,68,68,.1);
 box-shadow:0 2px 6px 0 rgba(68,68,68,.1);
 -webkit-backface-visibility:visible;
 -moz-backface-visibility:hidden;
 backface-visibility:hidden
}
.dl-menuwrapper .dl-menu.dl-menu-toggle {
 -webkit-transition:all .3s ease;
 -moz-transition:all .3s ease;
 transition:all .3s ease
}
.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 .4s;
 -moz-animation:MenuAnimOut1 .4s;
 animation:MenuAnimOut1 .4s
}
.dl-menu.dl-animate-out-2 {
 -webkit-animation:MenuAnimOut2 .3s ease-in-out;
 -moz-animation:MenuAnimOut2 .3s ease-in-out;
 animation:MenuAnimOut2 .3s ease-in-out
}
.dl-menu.dl-animate-out-3 {
 -webkit-animation:MenuAnimOut3 .4s ease;
 -moz-animation:MenuAnimOut3 .4s ease;
 animation:MenuAnimOut3 .4s ease
}
.dl-menu.dl-animate-out-4 {
 -webkit-animation:MenuAnimOut4 .4s ease;
 -moz-animation:MenuAnimOut4 .4s ease;
 animation:MenuAnimOut4 .4s ease
}
.dl-menu.dl-animate-out-5 {
 -webkit-animation:MenuAnimOut5 .4s ease;
 -moz-animation:MenuAnimOut5 .4s ease;
 animation:MenuAnimOut5 .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 .3s;
 -moz-animation:MenuAnimIn1 .3s;
 animation:MenuAnimIn1 .3s
}
.dl-menu.dl-animate-in-2 {
 -webkit-animation:MenuAnimIn2 .3s ease-in-out;
 -moz-animation:MenuAnimIn2 .3s ease-in-out;
 animation:MenuAnimIn2 .3s ease-in-out
}
.dl-menu.dl-animate-in-3 {
 -webkit-animation:MenuAnimIn3 .4s ease;
 -moz-animation:MenuAnimIn3 .4s ease;
 animation:MenuAnimIn3 .4s ease
}
.dl-menu.dl-animate-in-4 {
 -webkit-animation:MenuAnimIn4 .4s ease;
 -moz-animation:MenuAnimIn4 .4s ease;
 animation:MenuAnimIn4 .4s ease
}
.dl-menu.dl-animate-in-5 {
 -webkit-animation:MenuAnimIn5 .4s ease;
 -moz-animation:MenuAnimIn5 .4s ease;
 animation:MenuAnimIn5 .4s ease
}
@-webkit-keyframes MenuAnimIn1 {
 0% {
  -webkit-transform:translateZ(-500px) rotateY(0deg);
  opacity:0
 }
 20% {
  -webkit-transform:translateZ(-250px) rotateY(30deg);
  opacity:.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:.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:.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 .4s ease;
 -moz-animation:SubMenuAnimIn1 .4s ease;
 animation:SubMenuAnimIn1 .4s ease
}
.dl-menuwrapper>.dl-submenu-smart.dl-animate-in-2 {
 -webkit-animation:SubMenuAnimIn2 .3s ease-in-out;
 -moz-animation:SubMenuAnimIn2 .3s ease-in-out;
 animation:SubMenuAnimIn2 .3s ease-in-out
}
.dl-menuwrapper>.dl-submenu-smart.dl-animate-in-3 {
 -webkit-animation:SubMenuAnimIn3 .4s ease;
 -moz-animation:SubMenuAnimIn3 .4s ease;
 animation:SubMenuAnimIn3 .4s ease
}
.dl-menuwrapper>.dl-submenu-smart.dl-animate-in-4 {
 -webkit-animation:SubMenuAnimIn4 .4s ease;
 -moz-animation:SubMenuAnimIn4 .4s ease;
 animation:SubMenuAnimIn4 .4s ease
}
.dl-menuwrapper>.dl-submenu-smart.dl-animate-in-5 {
 -webkit-animation:SubMenuAnimIn5 .4s ease;
 -moz-animation:SubMenuAnimIn5 .4s ease;
 animation:SubMenuAnimIn5 .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 .4s ease;
 -moz-animation:SubMenuAnimOut1 .4s ease;
 animation:SubMenuAnimOut1 .4s ease
}
.dl-menuwrapper>.dl-submenu-smart.dl-animate-out-2 {
 -webkit-animation:SubMenuAnimOut2 .3s ease-in-out;
 -moz-animation:SubMenuAnimOut2 .3s ease-in-out;
 animation:SubMenuAnimOut2 .3s ease-in-out
}
.dl-menuwrapper>.dl-submenu-smart.dl-animate-out-3 {
 -webkit-animation:SubMenuAnimOut3 .4s ease;
 -moz-animation:SubMenuAnimOut3 .4s ease;
 animation:SubMenuAnimOut3 .4s ease
}
.dl-menuwrapper>.dl-submenu-smart.dl-animate-out-4 {
 -webkit-animation:SubMenuAnimOut4 .4s ease;
 -moz-animation:SubMenuAnimOut4 .4s ease;
 animation:SubMenuAnimOut4 .4s ease
}
.dl-menuwrapper>.dl-submenu-smart.dl-animate-out-5 {
 -webkit-animation:SubMenuAnimOut5 .4s ease;
 -moz-animation:SubMenuAnimOut5 .4s ease;
 animation:SubMenuAnimOut5 .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
}