/*
	position
*/


/* top */

html.mm-top.mm-opened .mm-page,
html.mm-top.mm-opened #mm-blocker {
	top: 0%;
	left: 0;
}

html.mm-top.mm-opening .mm-page,
html.mm-top.mm-opening #mm-blocker {
	margin: -65px 0 0 0;
	left: 0;
	top: 100%;
}


/* right */

html.mm-right.mm-opened .mm-page,
html.mm-right.mm-opened #mm-blocker {
	left: auto;
	right: 0%;
}

html.mm-right.mm-opening .mm-page,
html.mm-right.mm-opening #mm-blocker {
	margin: 0 -65px 0 0;
	left: auto;
	right: 100%;
}


/* bottom */

html.mm-bottom.mm-opened .mm-page,
html.mm-bottom.mm-opened #mm-blocker {
	bottom: 0%;
	top: auto;
}

html.mm-bottom.mm-opening .mm-page,
html.mm-bottom.mm-opening #mm-blocker {
	margin: 0 0 -65px 0;
	top: auto;
	left: 0;
	bottom: 100%;
}

.mm-menu.mm-top .mm-inner {
	padding: 0 0 65px 0;
}

.mm-menu.mm-right .mm-inner {
	padding: 0 0 0 65px;
}

.mm-menu.mm-bottom .mm-inner {
	padding: 65px 0 0 0;
}

@media all and (min-width: 500px) {
	.mm-menu.mm-top,
	.mm-menu.mm-bottom {
		width: 100%;
	}
	html.mm-opening.mm-top .mm-page,
	html.mm-opening.mm-top #mm-blocker,
	html.mm-opening.mm-bottom .mm-page,
	html.mm-opening.mm-bottom #mm-blocker {
		left: 0;
	}
	.mm-menu.mm-right {
		width: 500px;
		left: auto;
		right: 0;
	}
	html.mm-right.mm-opening .mm-page,
	html.mm-right.mm-opening #mm-blocker {
		left: auto;
		right: 500px;
	}
}


/*
	z-position
*/


/* reset defaults */

html.mm-front.mm-opening .mm-page {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
}


/* z-indexing */

html.mm-front .mm-page,
html.mm-front #mm-blocker {
	z-index: 0;
}

.mm-menu.mm-front {
	z-index: 1;
}


/* styling */

.mm-menu.mm-front {
	box-shadow: 0 0 15px rgba( 0, 0, 0, 0.5);
}

html.mm-opened.mm-next .mm-page {
	box-shadow: none;
}


/* animations */

.mm-menu.mm-front,
.mm-menu.mm-next {
	-webkit-transition: none 0.4s ease;
	-moz-transition: none 0.4s ease;
	-ms-transition: none 0.4s ease;
	-o-transition: none 0.4s ease;
	transition: none 0.4s ease;
	-webkit-transition-property: top, right, bottom, left, margin, border-color, -webkit-transform;
	-moz-transition-property: top, right, bottom, left, margin, border-color, -moz-transform;
	-ms-transition-property: top, right, bottom, left, margin, border-color, -o-transform;
	-o-transition-property: top, right, bottom, left, margin, border-color, -o-transform;
	transition-property: top, right, bottom, left, margin, border-color, transform;
}

html.mm-accelerated.mm-opening .mm-menu.mm-front,
html.mm-accelerated.mm-opening .mm-menu.mm-next {
	-webkit-transform: translate3d( 0, 0, 1px);
	-moz-transform: translate3d( 0, 0, 1px);
	-ms-transform: translate3d( 0, 0, 1px);
	-o-transform: translate3d( 0, 0, 1px);
	transform: translate3d( 0, 0, 1px);
}


/* left */

.mm-menu.mm-front .mm-inner,
.mm-menu.mm-next .mm-inner {
	padding: 0 0 0 65px;
}

html.mm-opened .mm-menu.mm-front,
html.mm-opened .mm-menu.mm-next {
	left: -100%;
}

html.mm-opening .mm-menu.mm-front,
html.mm-opening .mm-menu.mm-next {
	left: 0%;
	margin: 0 0 0 -65px;
}


/* top */

.mm-menu.mm-top.mm-front,
.mm-menu.mm-top.mm-next {
	/* 	bottom: auto; */
}

.mm-menu.mm-top.mm-front .mm-inner,
.mm-menu.mm-top.mm-next .mm-inner {
	padding: 65px 0 0 0;
}

html.mm-opened .mm-menu.mm-top.mm-front,
html.mm-opened .mm-menu.mm-top.mm-next {
	left: 0;
	top: -100%;
}

html.mm-opening .mm-menu.mm-top.mm-front,
html.mm-opening .mm-menu.mm-top.mm-next {
	margin: -65px 0 0 0;
	left: 0;
	top: 0%;
}


/* right */

.mm-menu.mm-right.mm-front,
.mm-menu.mm-right.mm-next {
	left: auto;
}

.mm-menu.mm-right.mm-front .mm-inner,
.mm-menu.mm-right.mm-next .mm-inner {
	padding: 0 65px 0 0;
}

html.mm-opened .mm-menu.mm-right.mm-front,
html.mm-opened .mm-menu.mm-right.mm-next {
	left: auto;
	right: -100%;
}

html.mm-opening .mm-menu.mm-right.mm-front,
html.mm-opening .mm-menu.mm-right.mm-next {
	margin: 0 -65px 0 0;
	left: auto;
	right: 0%;
}


/* bottom */

.mm-menu.mm-bottom.mm-front,
.mm-menu.mm-bottom.mm-next {
	top: auto;
}

.mm-menu.mm-bottom.mm-front .mm-inner,
.mm-menu.mm-bottom.mm-next>.mm-inner {
	padding: 0 0 65px 0;
}

html.mm-opened .mm-menu.mm-bottom.mm-front,
html.mm-opened .mm-menu.mm-bottom.mm-next {
	left: 0;
	bottom: -100%;
}

html.mm-opening .mm-menu.mm-bottom.mm-front,
html.mm-opening .mm-menu.mm-bottom.mm-next {
	margin: 0 0 -65px 0;
	left: 0;
	bottom: 0%;
}

html.mm-no-overflowscrolling.mm-right .mm-menu {
	position: absolute;
}

@media all and (min-width: 500px) {
	/* left */
	html.mm-opened .mm-menu.mm-front,
	html.mm-opened .mm-menu.mm-next {
		left: -500px;
	}
	html.mm-opening .mm-menu.mm-front,
	html.mm-opening .mm-menu.mm-next {
		left: 0px;
	}
	/* top + bottom*/
	html.mm-opened .mm-menu.mm-top.mm-front,
	html.mm-opened .mm-menu.mm-top.mm-next,
	html.mm-opened .mm-menu.mm-bototm.mm-front,
	html.mm-opened .mm-menu.mm-bototm.mm-next,
	html.mm-opening .mm-menu.mm-top.mm-front,
	html.mm-opening .mm-menu.mm-top.mm-next,
	html.mm-opening .mm-menu.mm-bototm.mm-front,
	html.mm-opening .mm-menu.mm-bototm.mm-next {
		left: 0;
	}
	/* right */
	html.mm-opened .mm-menu.mm-right.mm-front,
	html.mm-opened .mm-menu.mm-right.mm-next {
		right: -500px;
		left: auto;
	}
	html.mm-opening .mm-menu.mm-right.mm-front,
	html.mm-opening .mm-menu.mm-right.mm-next {
		right: 0px;
		left: auto;
	}
}