.dl-menuwrapper {
	width: 100%;
	float: left;
	position: relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
	z-index: 9;
	ul {
		padding: 0;
		list-style: none;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	.dl-subview{
		li.dl-subviewopen,
		li.dl-subviewopen,
		li.dl-subview,
		.dl-submenu{
			border: none;
		}
	}
	li {
		position: relative;
		&:first-child{
			border-top: none;
		}
		a {
			display: flex;
			position: relative;
			padding: 12px 20px;
			align-items: center;
			justify-content: space-between;
		}
		&.active > a{

		}
		&.dl-back{
			span{
				padding: 0 .5em;
			}
		}
		&.dl-back > a{
			&:before{
				font-family: 'LaStudioIcons';
				content: '\ea6c';
			}
		}
		.dl-submenu {
			display: none;
		}
	}

	.dl-menu {
		margin: 0;
		position: absolute;
		width: 100%;
		opacity: 0;
		pointer-events: none;
		transform: translateY(10px);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		&.dl-menu-toggle {
			transition: all 0.3s ease;
		}
		&.dl-menuopen {
			opacity: 1;
			pointer-events: auto;
			transform: translateY(0px);
		}
	}

	> .dl-submenu{
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		margin: 0;
	}
}
.dl-menu{
	&.dl-subview{
		li{
			&,
			&.dl-subviewopen > a,
			&.dl-subview > a{
				display: none;
			}

			&.dl-subview,
			&.dl-subview .dl-submenu,
			&.dl-subviewopen,
			&.dl-subviewopen > .dl-submenu,
			&.dl-subviewopen .dl-submenu > li{
				display: block;
			}
		}
	}
}

/* No JS Fallback */
.no-js{
	.dl-menuwrapper {
		.dl-menu {
			position: relative;
			opacity: 1;
			transform: none;
		}
		li {
			.dl-submenu {
				display: block;
			}
			&.dl-back {
				display: none;
			}
		}
	}
}

/* Animation classes for moving out and in */
.dl-menu{

	// Effect 01
	&.dl-animate-out-1 {
		animation: MenuAnimOut1 0.4s;
	}
	&.dl-animate-in-1 {
		animation: MenuAnimIn1 0.4s;
	}

	// Effect 02
	&.dl-animate-out-2 {
		animation: MenuAnimOut2 0.3s ease-in-out;
	}
	&.dl-animate-in-2 {
		animation: MenuAnimIn2 0.3s ease-in-out;
	}

	// Effect 03
	&.dl-animate-out-3 {
		animation: MenuAnimOut3 0.4s ease;
	}
	&.dl-animate-in-3 {
		animation: MenuAnimIn3 0.4s ease;
	}

	// Effect 04
	&.dl-animate-out-4 {
		animation: MenuAnimOut4 0.4s ease;
	}
	&.dl-animate-in-4 {
		animation: MenuAnimIn4 0.4s ease;
	}

	// Effect 05
	&.dl-animate-out-5 {
		animation: MenuAnimOut5 0.4s ease;
	}
	&.dl-animate-in-5 {
		animation: MenuAnimIn5 0.4s ease;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
	animation: SubMenuAnimIn1 0.4s ease;
}

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

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
	animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
	animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
	animation: SubMenuAnimIn5 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
	animation: SubMenuAnimOut1 0.4s ease;
}

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

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
	animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
	animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
	animation: SubMenuAnimOut5 0.4s ease;
}


@keyframes MenuAnimOut1 {
	0% { }
	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 {
	0% { }
	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

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

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

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


@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;
	}
}

@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;
	}
}

@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;
	}
}

.dl-menuwrapper li.dl-back a{
	justify-content: flex-start;
}
.mm-sub-menu.no-dl-submenu > li.dl-back,
li.dl-back {
	width: 100%;
}

.dl-subviewopen > .mm-sub-menu.no-dl-submenu {
	display: flex !important;
	flex-flow: row wrap;
}
.mm-sub-menu.no-dl-submenu > li {
	width: 50%;
}