/*
 * Menu
 */


.menu {
	position: fixed;
	z-index: 101;
	top: auto;
	left: 0;
	right: 0;
	bottom: -100px; /* -- compensate for menu button height overflow hit area -- */
	width: 100%;
	overflow visible;
}

.menu:focus,
.menu:focus * {
	outline: none;
}

.menu .menu-container {
	text-align: center;
}

.menu .menu-container .menu-toggle {
	-webkit-transform: scale(.85) translateY(-165px);
	-moz-transform: scale(.85) translateY(-165px);
	transform: scale(.85) translateY(-165px);
	cursor: pointer;
	background-color: rgba(73, 204, 191, 0.85);
	background: -moz-linear-gradient(left, rgba(74, 178, 219, 0.85) 0%, rgba(73, 204, 191, 0.85) 50%, rgba(140, 230, 167, 0.85) 100%);
	background: -webkit-linear-gradient(left, rgba(74, 178, 219, 0.85) 0%,rgba(73, 204, 191, 0.85) 50%,rgba(140, 230, 167, 0.85) 100%);
	background: linear-gradient(to right, rgba(74, 178, 219, 0.85) 0%, rgba(73, 204, 191, 0.85) 50%, rgba(140, 230, 167, 0.85) 100%);
	padding: 10px;
	border-radius: 6px;
	border: 2px solid rgba(256,256,256,0.5);
	-webkit-transition: transform 0.4s ease-out;
	transition: transform 0.4s ease-out 0.01s, opacity 0s;
}

.menu .menu-container .menu-toggle * {
	pointer-events: none;
}

.menu .menu-container .menu-toggle .menu-label {
	position: relative;
	z-index: 1;
	width: 60px;
	display: inline-block;
	vertical-align: middle;
	color: var(--light);
	line-height: 30px;
}

.menu .menu-container .menu-toggle .menu-label:before {
	content: 'Menu';
	display: inline-block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	opacity: 1;
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.menu .menu-container .menu-toggle .menu-label:after {
	content: 'Close';
	display: inline-block;
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	opacity: 0;
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.modal-open .menu .menu-container .menu-toggle .menu-label:before {
	opacity: 0;
}

.modal-open .menu .menu-container .menu-toggle .menu-label:after {
	opacity: 1;
}

.menu .menu-container .menu-toggle .menu-icon {
	display: inline-block;
	vertical-align: middle;
	width: 40px;
	height: 30px;
	position: relative;
	transform: scale(.7);
}

.menu .menu-container .menu-toggle .menu-icon span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: var(--light);
	border-radius: 4px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.menu .menu-container .menu-toggle .menu-icon span:nth-child(1) {
  top: 0px;
}

.menu .menu-container .menu-toggle .menu-icon span:nth-child(2) {
  top: 13px;
}

.menu .menu-container .menu-toggle .menu-icon span:nth-child(3) {
  top: 26px;
}

.modal-open .menu .menu-container .menu-toggle .menu-icon span:nth-child(1) {
  top: 13px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.modal-open .menu .menu-container .menu-toggle .menu-icon span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.modal-open .menu .menu-container .menu-toggle .menu-icon span:nth-child(3) {
  top: 13px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


@media( max-width: 640px )  {
	.menu .menu-toggle.hide {
		-webkit-transform: scale(.85) translateY(50px);
		-moz-transform: scale(.85) translateY(50px);
		transform: scale(.85) translateY(50px);
		opacity: 0;
		transition: transform 0.15s ease-out, opacity 0s 0.15s;
	}
}

@media( min-width: 640px )  {
	.menu {
		top: -100px;  /* -- compensate for menu button height overflow hit area -- */
		bottom: auto;
	}
	.menu .menu-container {
		text-align: right;
	}
	.menu .menu-container .menu-toggle {
		-webkit-transform: scale(.85) translateY(165px);
		-moz-transform: scale(.85) translateY(165px);
		transform: scale(.85) translateY(165px);
	}
}

@media( min-width: 1040px ) {
	.menu .menu-container .menu-toggle {
		-webkit-transform: scale(.85) translateY(190px);
		-moz-transform: scale(.85) translateY(190px);
		transform: scale(.85) translateY(190px);
	}
}

@media( min-width: 1380px ) {
	.menu .menu-container .menu-toggle .menu-label {
		width: 80px;
	}
	.menu .menu-container .menu-toggle {
		border: 1.5px solid rgba(256,256,256,0.5);

		-webkit-transform: scale(1) translateY(175px);
		-moz-transform: scale(1) translateY(175px);
		transform: scale(1) translateY(175px);
	}
}