.dl-menuwrapper {
    display:block;
	width: 100%;
	max-width: 320px;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;

    position: absolute;
    width:auto;
    z-index:-1;

    left:0;
    top:0;
    min-height:100%;
    right:10px;
}

.dl-menuwrapper ul {
	padding: 0;
    margin:0 !important;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
    background-color:#fff;
    box-shadow: 1px 0 0 0 #ccc;
    min-height:100%;
}

.dl-menuwrapper li {
	position: relative;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 15px 20px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 300;
	color: #666;
	outline: none;
    text-decoration:none;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

.no-touch .dl-menuwrapper li a:hover {
	background: #eee;
}

.dl-menuwrapper li.dl-back > a {
    background-color:#eee;
}

.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: 'fontawesome';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\f0da";
	right: 10px;
	color: #666;
}

.dl-menuwrapper li.dl-back:after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: 'fontawesome';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\f112";
	right: 10px;
	color: #666;
}

.dl-menuwrapper li.dl-back a {
    font-size:19px;
}

.dl-menuwrapper .dl-menu {
	margin: 0;
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateX(-10px);
	transform: translateX(-10px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.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;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	margin: 0;
}

.dl-menu.dl-animate-out-1 {
    -webkit-animation: MenuAnimOut2 0.3s ease-in-out;
    animation: MenuAnimOut2 0.3s ease-in-out;
}

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

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

.dl-menu.dl-animate-in-1 {
    -webkit-animation: MenuAnimIn2 0.3s ease-in-out;
    animation: MenuAnimIn2 0.3s ease-in-out;
}

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

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

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
    -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
    animation: SubMenuAnimIn2 0.3s ease-in-out;
}

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

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

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
    -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
    animation: SubMenuAnimOut2 0.3s ease-in-out;
}

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

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