.dl-menuwrapper{width:100%;float:left;position:relative;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-perspective-origin:50% 200%;-moz-perspective-origin:50% 200%;perspective-origin:50% 200%;}
.dl-menuwrapper button{width:36px;height:36px;line-height:38px;color:#fff;background:none repeat scroll 0 0 #D2583E;border:0;text-align:center;cursor:pointer;-webkit-transition:background 0.5s ease-out, box-shadow 0.15s linear;-moz-transition:background 0.5s ease-out, box-shadow 0.15s linear;-o-transition:background 0.5s ease-out, box-shadow 0.15s linear;-ms-transition:background 0.5s ease-out, box-shadow 0.15s linear;transition:background 0.5s ease-out, box-shadow 0.15s linear;}
.dl-menuwrapper button.dl-active{line-height:36px;}
.dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active{}
.dl-menuwrapper button.dl-active > i:before{content:"\f00d";}
.dl-menuwrapper ul{padding:0;list-style:none;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;z-index:9999;}
.dl-menuwrapper li{position:relative;}
.dl-menuwrapper li a{background:none repeat scroll 0 0 #FFFFFF;color:#000000;display:block;font-size:13px;font-weight:normal;outline:medium none;padding:15px;position:relative;text-transform:uppercase;}
.no-touch .dl-menuwrapper li a:hover, .dl-menu .active a{background:none repeat scroll 0 0 #D2583E;color:#FFFFFF;}
.dl-menuwrapper li.dl-back > a{padding-left:30px;border-bottom:1px solid #ccc;background:#dedede;color:#7e7e7e;}
.dl-menuwrapper li.dl-back > a:hover{background:#ddd;color:#c0c0c0;}
.dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after{content:"\e003";position:absolute;top:0;line-height:43px;font-family:'icomoon';speak:none;-webkit-font-smoothing:antialiased;}
.dl-menuwrapper li.dl-back:after{left:10px;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transform:rotate(180deg);color:#c0c0c0;}
.dl-menuwrapper li > a:after{right:10px;color:rgba(0,0,0,0.15);}
.dl-menuwrapper .dl-menu{position:absolute;width:220px;right:0;opacity:0;margin:10px 0 0 0;pointer-events:none;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);transform:translateY(0px);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;}
.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-menuwrapper .dl-menu.dl-menuopen{opacity:1;pointer-events:auto;border:1px solid #000000;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);transform:translateY(0px);}
.dl-menuwrapper li .dl-submenu{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, .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;width:220px;top:50px;right: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.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.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.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.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.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.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.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.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.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.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;}
}
.no-js .dl-menuwrapper .dl-menu{position:relative;opacity:1;-webkit-transform:none;-moz-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:'';}
.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;}