/*
 *	menu-full-page.scss
 * -----------------------------------------------
*/
header#header {
	.tm-fullpage-nav-header {
		z-index: 99;
		.tm-fullpage-nav-header-inner {
			position: relative;
			background-color: #f5f5f5;
			z-index: 1000;
			.tm-fullpage-nav-header-container {
				padding: 30px 80px;
				@include media-breakpoint-down(md) {
					padding: 20px;
				}
				.menuzord-brand {
					margin: 0;
					img {
						@include media-breakpoint-down(sm) {
							max-height: 25px;
						}
					}
				}
			}
		}
	}
}
body {
	&.menufullpage-menu-open {
		header#header {
			.tm-fullpage-nav-header {
				.tm-fullpage-nav-header-inner {
					background-color: transparent;
				}
			}
		}
	}
	&.menufullpage-menu-open {
		&.switchable-logo {
			header#header {
				.menuzord-brand {
					.logo-light.logo-1x {
						display: none;
					}
					.logo-dark.logo-1x {
						display: inline-block;
					}
				}
			}
		}
	}
}
/* menu-full-page plugin code */
.menu-full-page {
	#fullpage-nav {
		background-color: #171717;
		border-radius: 100%;
		color: white;
		cursor: pointer;
		position: fixed;
		width: 300px;
		height: 300px;
		left: -120px;
		top: -120px;
		opacity: 0;
		z-index: 99;
		@include transition(all .3s ease);
		.fullpage-nav-inner {
			padding: 12% 5% 15%;
			@include media-breakpoint-down(lg) {
				padding: 150px 7%;
			}
			.fullpage-nav-menu {
				ul {
					list-style: none;
					li {
						transition: all 0.4s ease;
						padding: 10px 0;
						position: relative;
						opacity: 0;
						@include transition(all .3s ease);
						a {
							color: #fff;
							font-size: 36px;
							line-height: 1.5;
							text-decoration: none;
							font-weight: $font-weight-bold;
							padding: 0;
							position: relative;
							@include media-breakpoint-down(sm) {
								font-size: 36px;
							}
							&:hover {
								color: #888;
							}
							.indicator {
								opacity: 0.5;
								font-size: 28px;
								margin-left: 20px;
								vertical-align: middle;
								i {
									display: inline-block;
									@include transition(all .3s ease-in-out);
								}
							}
						}
						&:hover:after a {
							position: absolute;
							content: '';
							color: #fff;
						}
						.dropdown, .megamenu {
							margin: 10px 0;
							display: none;
							li {
								padding: 0;
								margin: 0;
								a {
									font-size: 19px;
									line-height: 1.6;
									font-weight: normal;
									color: #fff;
									display: block;
									float: none;
									margin: 0;
									overflow: hidden;
									padding: 5px 0;
									box-sizing: border-box;
									-webkit-transition: all .4s ease-in-out;
									-moz-transition: all .4s ease-in-out;
									transition: all .4s ease-in-out;
									&:hover {
										margin-left: 10px;
									}
								}
							}
						}
						&.open-sub-menu {
							> a {
								.indicator {
									i {
										@include rotate(90);
									}
								}
							}
						}
					}
					ul {
						//display: none;
						li a {
							&:hover {
								color: #888;
							}
						}
					}
				}
			}
			.menufullpage-nav-sidebar {
				margin-top: 30px;
				.menufullpage-nav-sidebar-inner {
					position: relative;
					opacity: 0;
					@include transition(all .3s ease);
				}
			}
		}

		&.menufullpage-menu-open {
			border-radius: 0;
			padding: 0 !important;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			opacity: 1;
			@include transition(all .3s ease);
			.fullpage-nav-menu {
				ul {
					li {
						animation: fadeInUp .5s ease-in-out forwards;
						animation-delay: .35s;
					}
				}
			}
			.menufullpage-nav-sidebar {
				.menufullpage-nav-sidebar-inner {
					animation: fadeInUp .5s ease-in-out forwards;
					animation-delay: .35s;
				}
			}
		}
	}

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

	.fullpage-nav-toggle {
		display: block;
		margin: 0;
		padding: 0;
		width: 40px;
		height: 40px;
		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: 45%;
			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 */
		&.menufullpage-menu-open {
			background-color: transparent;
			
			span {
				background: none;

				&:before, &:after {
					background-color: #fff;
					-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-page2 {
	#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, .megamenu {
				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, .megamenu {
					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);
		}

	}
} 



header#header {
	&.header-layout-type-header-mobile-nav-floating {
		.menuzord-brand {
			float: none;
		}
		.tm-fullpage-nav-header-inner {
			position: fixed;
			background-color: transparent;
			width: 100%;
			.fullpage-nav-toggle {
				background: #fff;
				box-shadow: 0 0 40px rgba(0,0,0,0.9);
				width: 50px;
				height: 50px;
				span {
					top: 45%;
					left: 24px;
					right: 24px;
					height: 4px;
					border-radius: 2px;
					background: #333;
				}
				&.menufullpage-menu-open {
					span {
						background: #fff;
						&:before, &:after {
							background-color: #111;
						}
					}
				}
			}
		}
	}
}