.dl-menuwrapper{position:relative;float:left;width:100%;-webkit-perspective:750pt;perspective:750pt;-webkit-perspective-origin:50% 200%;perspective-origin:50% 200%}
.dl-menuwrapper button{position:absolute;overflow:hidden;width:3pc;height:45px;right: 4px;top: -63px;outline:0;border:none;background:#ccc;text-indent:-900em;cursor:pointer;}
.dl-menuwrapper button.dl-active,.dl-menuwrapper button:hover,.dl-menuwrapper ul{background:#aaa}
.dl-menuwrapper button:after{position:absolute;top:10px;left:16%;width:68%;height:5px;background:#fff;box-shadow:0 10px 0 #fff,0 20px 0 #fff;content:''}
.dl-menuwrapper ul{padding:0;list-style:none;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.dl-menuwrapper li{position:relative}
.dl-menuwrapper li a{text-indent:1%;position:relative;display:block;padding:15px 20px;outline:0;color:#fff;font-weight:300;font-size:1pc;line-height:20px}
.no-touch .dl-menuwrapper li a:hover{background:rgba(255,248,213,.1)}
.dl-menuwrapper li.dl-back>a{padding-left:30px;background:rgba(0,0,0,.1)}
.dl-menuwrapper li.dl-back:after,.dl-menuwrapper li>a:not(:only-child):after{position:absolute;top:0;content:"\e000";font-family:icomoon;line-height:50px;speak:none;-webkit-font-smoothing:antialiased}
.dl-menuwrapper li.dl-back:after{left:10px;color:hsla(26,14%,80%,.3);-webkit-transform:rotate(180deg);transform:rotate(180deg);display:none}
.dl-menuwrapper li>a:after{right:10px;color:rgba(0,0,0,.15)}
.dl-menuwrapper .dl-menu{position:absolute;margin:5px 0 0;width:100%;opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.dl-menuwrapper .dl-menu.dl-menu-toggle{-webkit-transition:all .3s ease;transition:all .3s ease}
.dl-menuwrapper .dl-menu.dl-menuopen{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);pointer-events:auto}
.dl-menu.dl-subview li,.dl-menu.dl-subview li.dl-subview>a,.dl-menu.dl-subview li.dl-subviewopen>a,.dl-menuwrapper li .dl-submenu{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}
.dl-menuwrapper>.dl-submenu{position:absolute;top:50px;left:0;margin:0;width:100%}
.dl-menu.dl-animate-out-1{-webkit-animation:MenuAnimOut1 .4s;animation:MenuAnimOut1 .4s}
.dl-menu.dl-animate-out-2{-webkit-animation:MenuAnimOut2 .3s ease-in-out;animation:MenuAnimOut2 .3s ease-in-out}
.dl-menu.dl-animate-out-3{-webkit-animation:MenuAnimOut3 .4s ease;animation:MenuAnimOut3 .4s ease}
.dl-menu.dl-animate-out-4{-webkit-animation:MenuAnimOut4 .4s ease;animation:MenuAnimOut4 .4s ease}
.dl-menu.dl-animate-out-5{-webkit-animation:MenuAnimOut5 .4s ease;animation:MenuAnimOut5 .4s ease}
@-webkit-keyframes MenuAnimOut1{50%{-webkit-transform:translateZ(-250px) rotateY(30deg)}
75%{opacity:.5;-webkit-transform:translateZ(-372.5px) rotateY(15deg)}
to{opacity:0;-webkit-transform:translateZ(-500px) rotateY(0)}
}
@-webkit-keyframes MenuAnimOut2{to{opacity:0;-webkit-transform:translateX(-100%)}
}
@-webkit-keyframes MenuAnimOut3{to{opacity:0;-webkit-transform:translateZ(300px)}
}
@-webkit-keyframes MenuAnimOut4{to{opacity:0;-webkit-transform:translateZ(-300px)}
}
@-webkit-keyframes MenuAnimOut5{to{opacity:0;-webkit-transform:translateY(40%)}
}
@keyframes MenuAnimOut1{50%{transform:translateZ(-250px) rotateY(30deg)}
75%{opacity:.5;transform:translateZ(-372.5px) rotateY(15deg)}
to{opacity:0;transform:translateZ(-500px) rotateY(0)}
}
@keyframes MenuAnimOut2{to{opacity:0;transform:translateX(-100%)}
}
@keyframes MenuAnimOut3{to{opacity:0;transform:translateZ(300px)}
}
@keyframes MenuAnimOut4{to{opacity:0;transform:translateZ(-300px)}
}
@keyframes MenuAnimOut5{to{opacity:0;transform:translateY(40%)}
}
.dl-menu.dl-animate-in-1{-webkit-animation:MenuAnimIn1 .3s;animation:MenuAnimIn1 .3s}
.dl-menu.dl-animate-in-2{-webkit-animation:MenuAnimIn2 .3s ease-in-out;animation:MenuAnimIn2 .3s ease-in-out}
.dl-menu.dl-animate-in-3{-webkit-animation:MenuAnimIn3 .4s ease;animation:MenuAnimIn3 .4s ease}
.dl-menu.dl-animate-in-4{-webkit-animation:MenuAnimIn4 .4s ease;animation:MenuAnimIn4 .4s ease}
.dl-menu.dl-animate-in-5{-webkit-animation:MenuAnimIn5 .4s ease;animation:MenuAnimIn5 .4s ease}
@-webkit-keyframes MenuAnimIn1{0%{opacity:0;-webkit-transform:translateZ(-500px) rotateY(0)}
20%{opacity:.5;-webkit-transform:translateZ(-250px) rotateY(30deg)}
to{opacity:1;-webkit-transform:translateZ(0) rotateY(0)}
}
@-webkit-keyframes MenuAnimIn2{0%{opacity:0;-webkit-transform:translateX(-100%)}
to{opacity:1;-webkit-transform:translateX(0)}
}
@-webkit-keyframes MenuAnimIn3{0%{opacity:0;-webkit-transform:translateZ(300px)}
to{opacity:1;-webkit-transform:translateZ(0)}
}
@-webkit-keyframes MenuAnimIn4{0%{opacity:0;-webkit-transform:translateZ(-300px)}
to{opacity:1;-webkit-transform:translateZ(0)}
}
@-webkit-keyframes MenuAnimIn5{0%{opacity:0;-webkit-transform:translateY(40%)}
to{opacity:1;-webkit-transform:translateY(0)}
}
@keyframes MenuAnimIn1{0%{opacity:0;transform:translateZ(-500px) rotateY(0)}
20%{opacity:.5;transform:translateZ(-250px) rotateY(30deg)}
to{opacity:1;transform:translateZ(0) rotateY(0)}
}
@keyframes MenuAnimIn2{0%{opacity:0;transform:translateX(-100%)}
to{opacity:1;transform:translateX(0)}
}
@keyframes MenuAnimIn3{0%{opacity:0;transform:translateZ(300px)}
to{opacity:1;transform:translateZ(0)}
}
@keyframes MenuAnimIn4{0%{opacity:0;transform:translateZ(-300px)}
to{opacity:1;transform:translateZ(0)}
}
@keyframes MenuAnimIn5{0%{opacity:0;transform:translateY(40%)}
to{opacity:1;transform:translateY(0)}
}
.dl-menuwrapper>.dl-submenu.dl-animate-in-1{-webkit-animation:SubMenuAnimIn1 .4s ease;animation:SubMenuAnimIn1 .4s ease}
.dl-menuwrapper>.dl-submenu.dl-animate-in-2{-webkit-animation:SubMenuAnimIn2 .3s ease-in-out;animation:SubMenuAnimIn2 .3s ease-in-out}
.dl-menuwrapper>.dl-submenu.dl-animate-in-3{-webkit-animation:SubMenuAnimIn3 .4s ease;animation:SubMenuAnimIn3 .4s ease}
.dl-menuwrapper>.dl-submenu.dl-animate-in-4{-webkit-animation:SubMenuAnimIn4 .4s ease;animation:SubMenuAnimIn4 .4s ease}
.dl-menuwrapper>.dl-submenu.dl-animate-in-5{-webkit-animation:SubMenuAnimIn5 .4s ease;animation:SubMenuAnimIn5 .4s ease}
@-webkit-keyframes SubMenuAnimIn1{0%{opacity:0;-webkit-transform:translateX(50%)}
to{opacity:1;-webkit-transform:translateX(0)}
}
@-webkit-keyframes SubMenuAnimIn2{0%{opacity:0;-webkit-transform:translateX(100%)}
to{opacity:1;-webkit-transform:translateX(0)}
}
@-webkit-keyframes SubMenuAnimIn3{0%{opacity:0;-webkit-transform:translateZ(-300px)}
to{opacity:1;-webkit-transform:translateZ(0)}
}
@-webkit-keyframes SubMenuAnimIn4{0%{opacity:0;-webkit-transform:translateZ(300px)}
to{opacity:1;-webkit-transform:translateZ(0)}
}
@-webkit-keyframes SubMenuAnimIn5{0%{opacity:0;-webkit-transform:translateZ(-200px)}
to{opacity:1;-webkit-transform:translateZ(0)}
}
@keyframes SubMenuAnimIn1{0%{opacity:0;transform:translateX(50%)}
to{opacity:1;transform:translateX(0)}
}
@keyframes SubMenuAnimIn2{0%{opacity:0;transform:translateX(100%)}
to{opacity:1;transform:translateX(0)}
}
@keyframes SubMenuAnimIn3{0%{opacity:0;transform:translateZ(-300px)}
to{opacity:1;transform:translateZ(0)}
}
@keyframes SubMenuAnimIn4{0%{opacity:0;transform:translateZ(300px)}
to{opacity:1;transform:translateZ(0)}
}
@keyframes SubMenuAnimIn5{0%{opacity:0;transform:translateZ(-200px)}
to{opacity:1;transform:translateZ(0)}
}
.dl-menuwrapper>.dl-submenu.dl-animate-out-1{-webkit-animation:SubMenuAnimOut1 .4s ease;animation:SubMenuAnimOut1 .4s ease}
.dl-menuwrapper>.dl-submenu.dl-animate-out-2{-webkit-animation:SubMenuAnimOut2 .3s ease-in-out;animation:SubMenuAnimOut2 .3s ease-in-out}
.dl-menuwrapper>.dl-submenu.dl-animate-out-3{-webkit-animation:SubMenuAnimOut3 .4s ease;animation:SubMenuAnimOut3 .4s ease}
.dl-menuwrapper>.dl-submenu.dl-animate-out-4{-webkit-animation:SubMenuAnimOut4 .4s ease;animation:SubMenuAnimOut4 .4s ease}
.dl-menuwrapper>.dl-submenu.dl-animate-out-5{-webkit-animation:SubMenuAnimOut5 .4s ease;animation:SubMenuAnimOut5 .4s ease}
@-webkit-keyframes SubMenuAnimOut1{0%{opacity:1;-webkit-transform:translateX(0)}
to{opacity:0;-webkit-transform:translateX(50%)}
}
@-webkit-keyframes SubMenuAnimOut2{0%{opacity:1;-webkit-transform:translateX(0)}
to{opacity:0;-webkit-transform:translateX(100%)}
}
@-webkit-keyframes SubMenuAnimOut3{0%{opacity:1;-webkit-transform:translateZ(0)}
to{opacity:0;-webkit-transform:translateZ(-300px)}
}
@-webkit-keyframes SubMenuAnimOut4{0%{opacity:1;-webkit-transform:translateZ(0)}
to{opacity:0;-webkit-transform:translateZ(300px)}
}
@-webkit-keyframes SubMenuAnimOut5{0%{opacity:1;-webkit-transform:translateZ(0)}
to{opacity:0;-webkit-transform:translateZ(-200px)}
}
@keyframes SubMenuAnimOut1{0%{opacity:1;transform:translateX(0)}
to{opacity:0;transform:translateX(50%)}
}
@keyframes SubMenuAnimOut2{0%{opacity:1;transform:translateX(0)}
to{opacity:0;transform:translateX(100%)}
}
@keyframes SubMenuAnimOut3{0%{opacity:1;transform:translateZ(0)}
to{opacity:0;transform:translateZ(-300px)}
}
@keyframes SubMenuAnimOut4{0%{opacity:1;transform:translateZ(0)}
to{opacity:0;transform:translateZ(300px)}
}
@keyframes SubMenuAnimOut5{0%{opacity:1;transform:translateZ(0)}
to{opacity:0;transform:translateZ(-200px)}
}
.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,.1)}
.no-js .dl-menuwrapper li>a:not(:only-child):after{content:''}
.demo-1 .dl-menuwrapper button{background:#c62860}
.demo-1 .dl-menuwrapper button.dl-active,.demo-1 .dl-menuwrapper button:hover,.demo-1 .dl-menuwrapper ul{background:#9e1847}
.demo-2 .dl-menuwrapper button,.demo-2 .dl-menuwrapper button.dl-active,.demo-2 .dl-menuwrapper button:hover,.demo-2 .dl-menuwrapper ul{background: #231e5f;}
.demo-3 .dl-menuwrapper button{background:#08cbc4}
.demo-3 .dl-menuwrapper button.dl-active,.demo-3 .dl-menuwrapper button:hover,.demo-3 .dl-menuwrapper ul{background:#00b4ae}
.demo-4 .dl-menuwrapper button{background:#90b912}
.demo-4 .dl-menuwrapper button.dl-active,.demo-4 .dl-menuwrapper button:hover,.demo-4 .dl-menuwrapper ul{background:#79a002}
.demo-5 .dl-menuwrapper button{background:#744783}
.demo-5 .dl-menuwrapper button.dl-active,.demo-5 .dl-menuwrapper button:hover,.demo-5 .dl-menuwrapper ul{background:#643771}