.dl-menuwrapper>.dl-submenu {
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0;
    margin: 0
}

.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% {
        -webkit-transform: translateZ(-372.5px) rotateY(15deg);
        opacity: .5
    }
    100% {
        -webkit-transform: translateZ(-500px) rotateY(0);
        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
    }
}

@keyframes MenuAnimOut1 {
    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(0);
        transform: translateZ(-500px) rotateY(0);
        opacity: 0
    }
}

@keyframes MenuAnimOut2 {
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0
    }
}

@keyframes MenuAnimOut3 {
    100% {
        -webkit-transform: translateZ(300px);
        transform: translateZ(300px);
        opacity: 0
    }
}

@keyframes MenuAnimOut4 {
    100% {
        -webkit-transform: translateZ(-300px);
        transform: translateZ(-300px);
        opacity: 0
    }
}

@keyframes MenuAnimOut5 {
    100% {
        -webkit-transform: translateY(40%);
        transform: translateY(40%);
        opacity: 0
    }
}

.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% {
        -webkit-transform: translateZ(-500px) rotateY(0);
        opacity: 0
    }
    20% {
        -webkit-transform: translateZ(-250px) rotateY(30deg);
        opacity: .5
    }
    100% {
        -webkit-transform: translateZ(0) rotateY(0);
        opacity: 1
    }
}

@-webkit-keyframes MenuAnimIn2 {
    0% {
        -webkit-transform: translateX(-100%);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes MenuAnimIn3 {
    0% {
        -webkit-transform: translateZ(300px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateZ(0);
        opacity: 1
    }
}

@-webkit-keyframes MenuAnimIn4 {
    0% {
        -webkit-transform: translateZ(-300px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateZ(0);
        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(0);
        transform: translateZ(-500px) rotateY(0);
        opacity: 0
    }
    20% {
        -webkit-transform: translateZ(-250px) rotateY(30deg);
        transform: translateZ(-250px) rotateY(30deg);
        opacity: .5
    }
    100% {
        -webkit-transform: translateZ(0) rotateY(0);
        transform: translateZ(0) rotateY(0);
        opacity: 1
    }
}

@keyframes MenuAnimIn2 {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes MenuAnimIn3 {
    0% {
        -webkit-transform: translateZ(300px);
        transform: translateZ(300px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes MenuAnimIn4 {
    0% {
        -webkit-transform: translateZ(-300px);
        transform: translateZ(-300px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        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 .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% {
        -webkit-transform: translateX(50%);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes SubMenuAnimIn2 {
    0% {
        -webkit-transform: translateX(100%);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes SubMenuAnimIn3 {
    0% {
        -webkit-transform: translateZ(-300px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateZ(0);
        opacity: 1
    }
}

@-webkit-keyframes SubMenuAnimIn4 {
    0% {
        -webkit-transform: translateZ(300px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateZ(0);
        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(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes SubMenuAnimIn2 {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes SubMenuAnimIn3 {
    0% {
        -webkit-transform: translateZ(-300px);
        transform: translateZ(-300px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes SubMenuAnimIn4 {
    0% {
        -webkit-transform: translateZ(300px);
        transform: translateZ(300px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        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 .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% {
        -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(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateZ(-300px);
        opacity: 0
    }
}

@-webkit-keyframes SubMenuAnimOut4 {
    0% {
        -webkit-transform: translateZ(0);
        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(0);
        transform: translateZ(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateZ(-300px);
        transform: translateZ(-300px);
        opacity: 0
    }
}

@keyframes SubMenuAnimOut4 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        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 .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 {
    background: #e86814
}

.demo-2 .dl-menuwrapper button.dl-active,
.demo-2 .dl-menuwrapper button:hover,
.demo-2 .dl-menuwrapper ul {
    background: #D35400
}

.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
}