.menu {
	position: fixed;
		top: ($line-height * 2);
		bottom: 0;
		left: -100%;
	width: 100%;
	z-index: ($header-base - 1);
	@include transition(all 0.3s $timing, box-shadow 0s 0.3s);
	&.open {
		// position
			left: 0;
		@include box-shadow(0 0 10px rgba(0, 0, 0, 0.5));
		@include transition(all 0.3s $timing, box-shadow 0s);
	}
	// 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);
				}
		}
}

.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-wrap {
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	// 480
		@include responsive(xs) {
			padding-right: ($grid-gutter * 2);
			// position
				right: ($grid-gutter * -2);
		}
}

// collapse
	.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);
		.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);
		.menu-collapse-toggle.collapsed & {
			@include opacity(1);
			@include transform(rotate(0));
		}
	}

// content
	.menu-content {
		padding-top: $line-height;
		padding-bottom: $line-height;
		hr {
			border-top-color: $black-bg;
			margin-top: ($line-height - 1);
		}
		.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: ($line-height * 2);
				}
			}
		}
		// 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;
	}

// fbtn
	.menu-right.open ~ .fbtn-container{
		// 480
			@include responsive(xs) {
				// position
					right: ($grid-gutter * 21);
			}
	}

// top
	.menu-top {
		background-color: $black-text;
		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);
			}
	}

	.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();
	}