/*
 *	menu-full-page.scss
 * -----------------------------------------------
*/
/* menu-full-page plugin code */
.menu-full-page {
	#fullpage-nav {
		background: rgba(255, 255, 255, 0.97);
		z-index: -1;
		position: fixed;/*left: -100%;*/ /*left or right and the width of your navigation panel*/
		left: 0 !important; /*left or right and the width of your navigation panel*/
		opacity: 0;
		width: 100%; /*should match the above value*/
		@include transition(all 2s ease-in-out);
		ul {
			list-style: none;
			margin-top: 50px;
			@include transition(all .4s ease-in-out);
			li {
				text-align: center;
				transition: all 0.4s ease;
				padding: 10px 0;
				position: relative;
				a {
					color: #111;
					font-size: 26px;
					text-decoration: none;
					font-weight: 400;
					text-transform: uppercase;
					padding: 0;
					position: relative;
					&:hover {
						color: #888;
						@include transition(color 2s time);
					}
				}
				&:hover:after a {
					position: absolute;
					content: '';
					color: #FFF;
				}
			}
			ul {
				display: none;
				li a {
					font-size: 13px;
					&:hover {
						color: #888;
					}
				}
			}
		}
	}

	.fullpage-nav-toggle.menu-open + #fullpage-nav {
		opacity: 1;
		z-index: 1111;
		> ul {
			margin-top: 70px;
		}
	}

	.fullpage-nav-toggle {
		z-index: 1112;
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		overflow: hidden;
		margin: 0;
		padding: 0;
		width: 70px;
		height: 70px;
		font-size: 0;
		text-indent: -9999px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-shadow: none;
		border-radius: none;
		border: none;
		cursor: pointer;
		@include transition(background 0.3s);
		background-color: transparent;
		
		i {
			text-decoration: none;
			font-size: 40px;
			color: #fff;
		}
		&:focus {
			outline: none;
		}
		span {
			display: block;
			position: absolute;
			top: 45px;
			left: 24px;
			right: 18px;
			height: 4px;
			border-radius: 2px;
			background: #333;
			@include transition(background 0 0.3s);
			&:before, &:after {
				position: absolute;
				display: block;
				left: 0;
				width: 100%;
				height: 4px;
				border-radius: 0;
				background-color: #333;
				content: "";
				-webkit-transition-duration: 0.3s, 0.3s;
				transition-duration: 0.3s, 0.3s;
				-webkit-transition-delay: 0.3s, 0;
				transition-delay: 0.3s, 0;
			}
			&:before {
				top: -8px;
				-webkit-transition-property: top, -webkit-transform;
				transition-property: top, transform;
			}
			&:after {
				bottom: -8px;
				-webkit-transition-property: bottom, -webkit-transform;
				transition-property: bottom, transform;
			}
		}

		/* active state, i.e. menu open */
		&.menu-open {
			background-color: transparent;
			
			span {
				background: none;

				&:before, &:after {
					background-color: #111;
					-webkit-transition-delay: 0, 0.3s;
					transition-delay: 0, 0.3s;
				}
				&:before {
					top: 0;
					@include rotate(45);
				}
				&:after {
					bottom: 0;
					@include rotate(-45);
				}
			}
		}
	}
}



/* menu-full-page custom code */
.menu-full-page {
	.header {
		#fullpage-nav {
			li {
				padding: 5px 0;
				a {
					background: none;
					display: inline;
					font-size: 26px;
				}
			}
			ul ul {
				margin-top: 0;
				li {
					padding: 3px 0;
				}
				li a {
					font-size:17px;
				}
			}
			ul li {
				.dropdown {
					background: none;
					box-shadow: none;
					border: none;
					float: none;
					padding: 0;
					position: relative;
					max-height: 0;
					overflow: hidden;
					-webkit-transition: all .9s cubic-bezier(0.55, 0, .175, 1)!important;
					-moz-transition: all .9s cubic-bezier(0.55, 0, .175, 1)!important;
					-ms-transition: all .9s cubic-bezier(0.55, 0, .175, 1)!important;
					-o-transition: all .9s cubic-bezier(0.55, 0, .175, 1)!important;
					transition: all .9s cubic-bezier(0.55, 0, .175, 1)!important;
					display: block!important;
					visibility: visible;
				}
				&:hover .dropdown {
					max-height: 700px;
				}
			}

			//animation on hover
			#main-nav > .menu-item > a:before {
				display: block;
				content: '';
				position: absolute;
				z-index: -1;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2px;
				background: #111;
				transform-origin: right;
				transform: scale(0, 1);
				transition: transform .3s cubic-bezier(1, 0, 0, 1);
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}
			#main-nav > .menu-item > a:before {
				width: calc(100% + 16px);
				left: -8px;
				bottom: 0;
				transform-origin: 50%;
				transform: scale(0, 1)
			}

			#main-nav > .menu-item > a:hover:before, 
			#main-nav > .menu-item:hover > a:before, 
			#main-nav > .current-menu-parent > a:before {
				transform: scale(1);
			}

		}
	}
}