.menu {
	position: fixed;
		top: ($line-height * 2);
		bottom: 0;
		left: -100%;
	width: 100%;
	z-index: ($header-base - 1);
	@include backface(hidden);
	@include transition(all 0.3s $timing);
	-webkit-transition-property: box-shadow, -webkit-transform;
	        transition-property: box-shadow, transform;
	&.open {
		// position
			left: 0;
		@include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
		@include transition(all 0.3s $timing);
	}
	// 480
		@include responsive(xs) {
			// position
				left: ($grid-gutter * -20);
			width: ($grid-gutter * 20);
		}
	// menu right
		&.menu-right {
			// position
				right: -100%;
				left: auto;
			&.open {
				// position
					right: 0;
			}
			// 480
				@include responsive(xs) {
					// position
						right: ($grid-gutter * -20);
					// no-touch
						.no-touch & {
							&.open ~ .fbtn-container {
								// position
									right: ($grid-gutter * 21);
							}
						}
				}
		}
}

.menu-backdrop {
	display: none;
	.nav-drawer ~ &,
	.touch & {
		background-color: $black;
		display: block;
		height: 0;
		position: fixed;
			top: 0;
			left: 0;
		width: 0;
		z-index: ($header-base - 2);
		@include backface(hidden);
		@include opacity(0);
		@include transition(height 0s 0.3s, opacity 0.3s $timing, width 0s 0.3s, z-index 0s 0.3s);
	}
	.nav-drawer.open ~ &,
	.touch .menu.open ~ & {
		height: 100%;
		width: 100%;
		@include opacity(0.5);
		@include transition(opacity 0.3s $timing);
	}
	.nav-drawer.open ~ & {
		z-index: $header-base;
	}
	// 1440
		@include responsive(lg) {
			.nav-drawer.open ~ & {
				height: 0;
				width: 0;
				@include opacity(0);
				@include transition(none);
			}
		}
}

.menu-collapse-toggle {
	background-color: transparent !important;
	cursor: pointer;
	display: block;
	float: right;
	padding: ($line-height / 2) $grid-gutter;
	position: absolute;
		top: 0;
		right: 0;
	z-index: 1;
	&:hover {
		color: $link-color !important;
	}
}

.menu-collapse-toggle-close {
	position: absolute;
		top: (($line-height * 2 - $font-size) / 2);
		left: 0;
	text-align: center;
	width: 100%;
	@include opacity(1);
	@include transform(rotate(0));
	@include transition(all 0.3s $timing);
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity, transform;
	.menu-collapse-toggle.collapsed & {
		@include opacity(0);
		@include transform(rotate(-225deg));
	}
}

.menu-collapse-toggle-default {
	@include opacity(0);
	@include transform(rotate(225deg));
	@include transition(all 0.3s $timing);
	-webkit-transition-property: opacity, -webkit-transform;
	        transition-property: opacity, transform;
	.menu-collapse-toggle.collapsed & {
		@include opacity(1);
		@include transform(rotate(0));
	}
}

.menu-content {
	padding-top: ($line-height / 2);
	padding-bottom: ($line-height / 2);
	hr {
		border-top-color: $black-bg;
		margin-top: ($line-height / 2);
		margin-bottom: ($line-height / 2);
	}
	.nav {
		margin-top: 0;
		margin-bottom: 0;
		a,
		.a {
			color: $black-sec;
			font-weight: 700;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			&:focus,
			&:hover {
				background-color: $white-bg;
			}
			.fa,
			.icon {
				margin-right: $grid-gutter;
			}
		}
		li.active {
			> a,
			> .a {
				color: $brand-color;
				.page-blue & {
					color: $palette-blue;
				}
				.page-green & {
					color: $palette-green;
				}
				.page-purple & {
					color: $palette-purple;
				}
				.page-red & {
					color: $palette-red;
				}
				.page-yellow & {
					color: $palette-yellow;
				}
			}
		}
		ul {
			a,
			.a {
				font-weight: 400;
				padding-left: ($grid-gutter * 2);
			}
			ul {
				a,
				.a {
					font-size: 90%;
					font-weight: 300;
					padding-top: ($line-height / 4);
					padding-bottom: ($line-height / 4);
					padding-left: ($grid-gutter * 3);
				}
			}
		}
	}
	// 480
		@include responsive(xs) {
			width: ($grid-gutter * 20);
		}
	// no boxshadow
		.nav  {
			.no-boxshadow & {
				margin-right: 1px;
			}
			.no-boxshadow .menu.menu-right & {
				margin-right: 0;
				margin-left: 1px;
			}
		}
}

.menu-content-inner {
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
}

.menu-open {
	// touch
		.touch & {
			overflow: hidden;
		}
}

.menu-scroll {
	background-color: $white;
	height: 100%;
	overflow: hidden;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	z-index: 1;
	// no boxshadow
		.no-boxshadow & {
			&:after {
				background-color: $black-bg;
				content: "";
				display: block;
				height: 100%;
				position: absolute;
					top: 0;
					right: 0;
				width: 1px;
			}
		}
		.no-boxshadow .menu.menu-right & {
			&:after {
				// position
					right: auto;
					left: 0;
			}
		}
}

.menu-top {
	background-color: $brand-color-dark-m;
	color: $white-bg;
	position: relative;
	z-index: 1;
	a {
		color: $white-bg;
		text-decoration: none;
		&:focus,
		&:hover {
			color: $white;
		}
	}
	// 480
		@include responsive(xs) {
			width: ($grid-gutter * 20);
		}
	// colour
		@each $color in $palette-list {
			$i: index($palette-list, $color);
			
			.page-#{$color} & {
				background-color: nth($palette-color-dark-m, $i);
			}
		}
}

.menu-top-form {
	margin-top: ($line-height / 4);
	margin-bottom: ($line-height / 4);
}

.menu-top-img {
	display: -webkit-box;
	display:    -moz-box;
	display:     -ms-flexbox;
	display: -webkit-flex;
	display:         flex;
	height: 100%;
	justify-content: center;
	overflow: hidden;
	position: absolute;
		top: 0;
		left: 0;
	width: 100%;
	-webkit-align-items: center;
	        align-items: center;
	img {
		min-height: 100%;
		width: 100%;
		@include opacity(0.5);
	}
}

.menu-top-info {
	padding: ($line-height * 1.5) $grid-gutter;
	position: relative;
}

.menu-top-user {
	display: -webkit-box;
	display:    -moz-box;
	display:     -ms-flexbox;
	display: -webkit-flex;
	display:         flex;
	-webkit-align-items: center;
	        align-items: center;
	@include clearfix();
}

.menu-wrap {
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	// 480
		@include responsive(xs) {
			padding-right: ($grid-gutter * 2);
			// position
				right: ($grid-gutter * -2);
		}
}

.nav-drawer {
	max-width: 85%;
	max-width: calc(100% - #{$grid-gutter * 4});
	// position
		top: 0;
		left: ($grid-gutter * -20);
	width: ($grid-gutter * 20);
	z-index: ($header-base + 1);
	.menu-content {
		padding-top: 0;
	}
	// 1440
		@include responsive(lg) {
			// position
				left: 0;
			width: ($grid-gutter * 15);
			@include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
			.menu-content,
			.menu-top {
				width: ($grid-gutter * 15);
			}
			// menu left
				&.menu-left {
					~ .content {
						margin-left: ($grid-gutter * 15);
						.content-heading,
						.content-inner {
							padding-left: $grid-gutter;
						}
					}
					~ .footer,
					~ .header {
						padding-left: $grid-gutter;
						// position
							left: ($grid-gutter * 15);
					}
				}
			// menu right
				&.menu-right {
					// position
						right: 0;
					~ .content {
						margin-right: ($grid-gutter * 15);
						.content-heading,
						.content-inner {
							padding-right: $grid-gutter;
						}
					}
					~ .footer,
					~ .header {
						padding-right: $grid-gutter;
						// position
							right: ($grid-gutter * 15);
					}
				}
		}
}

.nav-drawer-logo {
	@extend .header-logo;
	border-bottom: 1px solid $black-bg;
	color: $black-text;
	float: none;
	margin-bottom: ($line-height / 2);
	&:focus,
	&:hover {
		text-decoration: none;
	}
}

.nav-drawer-open {
	overflow: hidden;
	// 1440
		@include responsive(lg) {
			overflow: auto;
		}
}