/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: $secondary_color;
	text-decoration: none;
	@include transition(all ease 0.35s);
}

a:hover,
a:focus {
	text-decoration: none;
}

a:hover, a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
button.toggle-btn, 
.submenu-toggle {
	display: none;
}//button.toggle-btn

.close {
	@extend %close-shared;
	display: none;
}

.secondary-menu {
	display: flex;
	flex: auto;

	ul {
		
		li {
			display: inline-block;
			vertical-align: middle;
			font-size: 0.7em;
			letter-spacing: 1px;
			font-weight: 700;
			line-height: 1.5em;
			border-right: 1px solid rgba(0,0,0,0.15);
			margin-right: 15px;
			padding-right: 15px;
			position: relative;

			&:last-child {
				margin-right: 0;
				padding-right: 0;
				border-right: none;
			}

			&:hover > a, 
			&.current-menu-item > a, 
			&.current_page_item > a, 
			&.current-menu-ancestor > a, 
			&.current_page_ancestor > a {
				color: $black_color;
			}

			&:hover, &.focused {
				
				> ul {
					opacity: 1;
					filter: alpha(opacity=100);
					clip: unset;
				}

			}

		}//li

		ul {
			opacity: 0;
			clip: rect(1px, 1px, 1px, 1px);
			position: absolute;
			top: 100%;
			left: 0;
			width: 250px;
			background: $white_color;
			@include box-shadow(0 2px 5px rgba($black_color, 0.16));
			@include transition(all ease 0.35s);
			z-index: 999;

			li {
				display: block;
				font-size: 1em;
				padding-right: 0;
				margin-right: 0;
				border-right: none;

				a {
					display: block;
					padding: 15px;
					border-bottom: 1px solid rgba($black_color, 0.1);
				}
			}//li

			ul {
				left: 100%;
				top: 0;
			}
		}//ul
	}//ul
}//.secondary-menu

.main-navigation {
	
	ul {
		margin: 0;
		padding: 0;
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		
		li {
			display: inline-block;
			position: relative;
			font-size: 0.7em;
			font-weight: 700;
			letter-spacing: 1px;

			a {
				display: inline-block;
				color: #202020;
				padding: 30px 20px;
				position: relative;

				.menu-description {
					position: absolute;
					top: 10px;
					right: -10px;
					background: $secondary_color;
					color: $white_color;
					line-height: 1.3;
					font-size: 8px;
					font-weight: 700;
					padding: 3px 5px;
					z-index: 9;

					&::after {
						content: "";
						border-top: 5px solid $secondary_color;
						border-right: 6px solid transparent;
						position: absolute;
						bottom: -5px;
						left: 3px;
					}

				}//.menu-description

			}//a

			&:hover > a, 
			&.current-menu-item > a, 
			&.current_page_item > a, 
			&.current-menu-ancestor > a, 
			&.current_page_ancestor > a {
				color: #888;
			}

			&:hover, &.focused {
				
				> ul {
					opacity: 1;
					filter: alpha(opacity=100);
					clip: unset;
				}

			}

		}//li

		ul {
			flex-direction: column;
			position: absolute;
			top: 100%;
			left: 0;
			width: 250px;
			opacity: 0;
			clip: rect(1px, 1px, 1px, 1px);
			background: $white_color;
			z-index: 999;
			@include box-shadow(0 2px 10px rgba($black_color, 0.1));
			@include transition(all ease 0.35s);

			li {
				display: block;
				font-size: 1em;

				a {
					display: block;
					padding-top: 15px;
					padding-bottom: 15px;
					border-bottom: 1px solid rgba($black_color, 0.05);
				}//a

				&:last-child > a {
					border-bottom: none;
				}

				&:hover > a, 
				&.current-menu-item > a, 
				&.current_page_item > a, 
				&.current-menu-ancestor > a, 
				&.current_page_ancestor > a {
					color: #202020;
					background: $primary_color;
				}
			}//li

			ul {
				left: 100%;
				top: 0;
			}
		}//ul
	}//ul
}//.main-navigation

.header-four, .header-five, .header-six, .header-eight {
	
	.main-navigation {
		
		ul {
			
			li {
				
				a {
					padding-top: 35px;
					padding-bottom: 35px;
				}//a

			}//li

			ul {

				li {
					
					a {
						padding-top: 15px;
						padding-bottom: 15px;
					}//a

				}//li

			}//ul

		}//ul

	}//.main-navigation

}//.header-four

.header-six, .header-eight {
	
	.secondary-menu {

		ul {

			li{
				border-right-color: rgba($white_color, 0.15);

				&:hover, 
				&.current-menu-item, 
				&.current_page_item, 
				&.current-menu-ancestor, 
				&.current_page_ancestor {

					> a {
						color: $primary_color;
					}

				}

			}//li

			ul {

				li {

					a {
						color: $font_color;
					}

					&:hover, 
					&.current-menu-item, 
					&.current_page_item, 
					&.current-menu-ancestor, 
					&.current_page_ancestor {

						> a {
							color: $black_color;
						}

					}
				}
			}

		}//ul

	}//.secondary-menu

}//.header-six

.header-nine {
	
	.main-navigation {
		
		ul {
			
			li {

				a {
					color: $white_color;
					padding: 15px 20px;

					.menu-description {
						top: -5px;
						right: -5px;
					}

				}//a

				&:hover, 
				&.current-menu-item, 
				&.current_page_item, 
				&.current-menu-ancestor, 
				&.current_page_ancestor {

					> a {
						color: $primary_color;
					}

				}

			}//li

			ul {

				text-align: left;

				li {

					a {
						color: $font_color;
						padding-top: 10px;
						padding-bottom: 10px;
					}

					&:hover, 
					&.current-menu-item, 
					&.current_page_item, 
					&.current-menu-ancestor, 
					&.current_page_ancestor {

						> a {
							color: $black_color;
						}

					}

				}

			}//ul

		}//ul

	}//.main-navigation

	.sticky-header {
		
		.main-navigation {
			
			ul {
				
				li {
					
					a {
						color: $font_color;
					}//a

					&:hover > a, 
					&.current-menu-item > a, 
					&.current_page_item > a, 
					&.current-menu-ancestor > a, 
					&.current_page_ancestor > a {
						color: #888;
					}

				}//li

			}//ul

		}//.main-navigation

	}//.sticky-header

}//.header-nine

.header-ten {
	
	.secondary-menu {
		
		ul {
			
			li{
				border-right-color: rgba($white_color, 0.15);
				
				&:hover, 
				&.current-menu-item, 
				&.current_page_item, 
				&.current-menu-ancestor, 
				&.current_page_ancestor {

					> a {
						color: $primary_color;
					}

				}

			}//li

			ul {
				
				li {
					
					a {
						color: $font_color;
					}//a

					&:hover, 
					&.current-menu-item, 
					&.current_page_item, 
					&.current-menu-ancestor, 
					&.current_page_ancestor {

						> a {
							color: $black_color;
						}

					}

				}//li

			}//ul

		}//ul

	}//.secondary-menu

}//.header-ten

.header-eleven {
	
	.main-navigation {

		ul {
			
			li {

				a {
					color: $white_color;
					padding-top: 20px;
					padding-bottom: 20px;

					.menu-description {
						top: 0;
						right: -5px;
					}

				}//a

				&:hover,
				&.current-menu-item,
				&.current_page_item,
				&.current-menu-ancestor,
				&.current_page_ancestor {
					
					> a {
						color: rgba($white_color, 0.7);
					}

				}

				ul {

					li {

						a {
							color: $font_color;
							padding-top: 15px;
							padding-bottom: 15px;
						}

						&:hover,
						&.current-menu-item,
						&.current_page_item,
						&.current-menu-ancestor,
						&.current_page_ancestor {

							> a {
								color: $black_color;
							}

						}

					}//li

				}//ul

			}//li

		}//ul

	}//.main-navigation

	.sticky-header {
		
		.main-navigation {
			
			ul {
				
				li {
					
					a {
						color: $font_color;
					}//a

					&:hover > a, 
					&.current-menu-item > a, 
					&.current_page_item > a, 
					&.current-menu-ancestor > a, 
					&.current_page_ancestor > a {
						color: #888;
					}

				}//li

				ul {

					li {

						&:hover > a, 
						&.current-menu-item > a, 
						&.current_page_item > a, 
						&.current-menu-ancestor > a, 
						&.current_page_ancestor > a {
							color: $font_color;
						}

					}//li

				}

			}//ul

		}//.main-navigation

	}//.sticky-header

}//.header-eleven

.header-twelve {
	
	.main-navigation, .secondary-menu {

		ul {
			
			li {

				a {
					color: $white_color;

					.menu-description {
						top: 10px;
						right: -5px;
					}

				}//a

				&:hover,
				&.current-menu-item,
				&.current_page_item,
				&.current-menu-ancestor,
				&.current_page_ancestor {
					
					> a {
						color: rgba($white_color, 0.7);
					}

				}

				ul {

					li {

						a {
							color: $font_color;
						}

						&:hover,
						&.current-menu-item,
						&.current_page_item,
						&.current-menu-ancestor,
						&.current_page_ancestor {

							> a {
								color: $black_color;
							}

						}

					}//li

				}//ul

			}//li

		}//ul

	}//.main-navigation

	.secondary-menu {
		
		ul {
			
			li {
				margin-right: 10px;
				padding-right: 10px;
				border-right-color: rgba($white_color, 0.15);

				&:last-child {
					padding-right: 0;
					margin-right: 0;
				}

				a {
					padding-top: 0;
					padding-bottom: 0;
				}//a

				ul {
					
					li {
						
						a {
							padding-top: 12px;
							padding-bottom: 12px;
						}

					}//li

				}//ul

			}//li

		}//ul

	}//.secondary-menu

	.sticky-header {
		
		.main-navigation {
			
			ul {
				
				li {
					
					a {
						color: $font_color;						
					}//a

					&:hover > a, 
					&.current-menu-item > a, 
					&.current_page_item > a, 
					&.current-menu-ancestor > a, 
					&.current_page_ancestor > a {
						color: #888;
					}

				}//li

			}//ul

		}//.main-navigation

	}//.sticky-header

}//.header-twelve

@media screen and (max-width: 1650px) {
	.main-navigation {
		
		ul {
			
			li {
				font-size: 0.65em;

				// a {
				// 	padding-left: 10px;
				// 	padding-right: 10px;
				// }//a

				ul {

					li {
						font-size: 1em;
					}

				}

			}//li

		}//ul

	}//.main-navigation

	.header-three {

		.main-navigation {

			ul {

				li {

					a {
						padding-top: 20px;
						padding-bottom: 20px;

						.menu-description {
							top: 0;
						}//.menu-description

					}//a

				}//li

			}//ul

		}//.main-navigation

	}//.header-three
}

@media screen and (min-width: 1025px) {
	.main-navigation ul ul, 
	.secondary-menu ul, 
	.main-navigation .primary-menu-list {
		display: block !important;
	}

	.main-navigation .mobile-menu {
	    width: auto;
	}
}

@include media(sm) {
	button.toggle-btn {
		display: block;
		width: 30px;
		height: 30px;
		padding: 0;
		position: relative;
		background: none !important;

		.toggle-bar {
			background: #888;
			height: 2px;
			width: 25px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			@include transition(all ease 0.35s);

			&:first-child {
				top: -13px;
			}

			&:last-child {
				bottom: -13px;
			}
		}//.toggle-bar

		&:hover .toggle-bar {
			background: $black_color;
		}
	}//button.toggle-btn

	.submenu-toggle {
		padding: 0;
		min-height: auto;
		background: none;
		font-size: 10px;
		color: $font_color;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 25px;
		text-align: center;
		height: 48px;
		line-height: 48px;
		z-index: 9;
		cursor: pointer;
		@include transition(all ease 0.35s);

		&:hover, &:focus {
			background: none;
			color: $black_color;
		}

		&.active {
			@include transform(rotate(180deg));
		}
	}//.submenu-toggle

	.secondary-menu {

		.toggle-btn.active {
			display: none;
		}

		.close-nav-toggle {
			top: 5px;
			right: auto;
			left: 4%;
			border-radius: 0;
			background: none;
		}

		.active {

			.close-nav-toggle {
				display: block;
			}

		}

		.nav-menu {
			position: absolute;
			top: 100%;
			left: 0;
			background: $white_color;
			@include box-shadow(0 2px 5px rgba($black_color, 0.15));
			z-index: 999;
			padding-left: 4%;
			padding-right: 4%;
			width: 100%;
			max-height: 50vh;
			overflow: auto;
			display: none;
		}//.nav-menu

		ul {

			li {
				width: 100%;
				display: block;
				margin-right: 0;
				padding-right: 0;
				border-right: none;

				a {
					padding: 15px;
					display: block;
					border-bottom: 1px solid rgba($black_color, 0.1);
				}

				&:last-child {
					border-bottom: none;
				}

				&.menu-item-has-children > a {
					padding-right: 30px;
				}
			}

			ul {
				position: static;
				width: 100%;
				opacity: 1;
				filter: alph(opacity=100);
				visibility: visible;
				@include box-shadow(none);
				@include transition(none);
				display: none;
				background: rgba($black_color, 0.02);
			}
		}
	}//.secondary-menu

	.header-main {

		.container {
			padding-left: 0;
			padding-right: 0;
		}//.container
	}//.header-main

	.main-navigation {

		.close {
			display: block;
		}

		.primary-menu-list {
			display: none;
			padding-top: 80px;
			position: fixed;
			top: 0;
			left: 0;
			background: #f5f5f5;
			width: 320px;
			height: 100%;
			z-index: 9999;
			overflow-y: auto;
			overflow-x: hidden;
			@include box-shadow(2px 0 5px rgba($black_color, 0.15));
		}//.nav-menu

		.primary-menu-list.active {
			display: block;
		}

		.mobile-menu {
		    width: 320px;
		}

		.submenu-toggle {
			height: 63px;
			line-height: 63px;
		}//.submenu-toggle

		ul {
			
			li {
				display: block;
				width: 100%;

				a {
					display: block;
					padding: 15px;
					border-bottom: 1px solid rgba($black_color, 0.1);
					@include box-shadow(0px 1px rgba($white_color, 0.5));

					.menu-description {
						top: 5px;
						right: 10px;
					}

				}//a

			}//li

			ul {
				display: none;
				position: static;
				opacity: 1;
				filter: alpha(opacity=100);
				visibility: visible;
				width: 100%;
				background: rgba($black_color, 0.02);
				@include box-shadow(none);
				@include transition(none);

				li {
					
					&:last-child > a {
						border-bottom: 1px solid rgba($black_color, 0.1);
					}

				}//li

			}//ul

		}//ul

	}//.main-navigation

	.admin-bar .main-navigation .primary-menu-list {
		top: 32px;
	}

	.header-four, .header-five, .header-six, .header-eight {

		.main-navigation {

			ul {

				li {

					a {
						padding-top: 15px;
						padding-bottom: 15px;
					}//a

				}//li

				ul {

					li {
						
						a {
							padding-top: 10px;
							padding-bottom: 10px;
						}//a

					}//li

				}//ul

			}//ul

		}//.main-navigation

	}//.header-four

	.header-six, .header-eight, .header-ten {

		.secondary-menu {

			button.toggle-btn {

				&:hover {

					.toggle-bar {
						background: $white_color;
					}

				}

			}

			ul {

				li {
					
					a {
						color: $font_color;
					}

					&:hover, 
					&.current-menu-item, 
					&.current_page_item, 
					&.current-menu-ancestor, 
					&.current_page_ancestor {

						> a {
							color: $black_color;
						}

					}

				}

			}

		}//.secondary-menu

	}//.header-six

	.header-nine {

		.nav-holder {
			
			.main-navigation {

				.toggle-btn {
					width: auto;
					padding-left: 40px;

					&::after {
						content: "Navigation";
						text-transform: uppercase;
						font-weight: 700;
						letter-spacing: 1px;
						color: #999;
						display: inline-block;
						float: right;
						@include transition(all ease 0.35s);
					}

					&:hover:after {
						color: $white_color;
					}

					.toggle-bar {
						right: auto;
					}
				}//.toggle-btn

			}//.main-navigation

		}//.nav-holder

		.main-navigation {

			ul {
				
				li {

					a {
						color: $font_color;

						.menu-description {
							top: 0;
							right: 10px;
						}//.menu-description

					}

					&:hover, 
					&.current-menu-item, 
					&.current_page_item, 
					&.current-menu-ancestor, 
					&.current_page_ancestor {

						> a {
							color: $black_color !important;
						}

					}

				}//li

			}//ul

		}//.main-navigation

	}//.header-nine

	.header-eleven {

		.main-navigation {

			button.toggle-btn {
				
				&:hover {

					.toggle-bar {
						background: $white_color;
					}

				}

			}//button.toggle-btn

			ul {
				
				li {

					a {
						color: $font_color;

						.menu-description {
							top: 5px;
							right: 10px;
						}

					}//a

					&:hover,
					&.current-menu-item,
					&.current_page_item,
					&.current-menu-ancestor,
					&.current_page_ancestor {
						
						> a {
							color: $black_color;
						}

					}

				}//li

			}//ul

		}//.main-navigation

		.sticky-header {

			.main-navigation {
				
				button.toggle-btn:hover {

					.toggle-bar {
						background: $black_color;
					}//.toggle-bar

				}//button.toggle-btn:hover

			}//.main-navigation

		}//.sticky-header

	}//.header-eleven

	.header-twelve {

		button.toggle-btn {
			
			&:hover {

				.toggle-bar {
					background: $white_color;
				}

			}

		}//button.toggle-btn

		.main-navigation, .secondary-menu {
			
			ul {
				
				li {

					a {
						color: $font_color;
					}

					&:hover,
					&.current-menu-item,
					&.current_page_item,
					&.current-menu-ancestor,
					&.current_page_ancestor {
						
						> a {
							color: $black_color;
						}

					}

				}//li

			}//ul

		}//.main-navigation

		.secondary-menu {

			ul {
				
				li {
					margin-right: 0;
					padding-right: 0;
					border-right: none;
					
					a {
						padding: 15px 0;
					}

				}

			}

		}

	}//.header-twelve

}//media(sm)

@include media(xs) {
	.header-t {

		.right {
			
			.header-social {
				margin-left: 10px;
				padding-left: 0;

				li {

					a {
						padding-left: 10px;
					}
				}//li
			}//.header-social
		}//.right
	}//.header-t

	.main-navigation {
		order: 2;
	}//.main-navigation
}//media(xs)

@media screen and (max-width: 782px) {
	.admin-bar .main-navigation .primary-menu-list {
		top: 46px;
	}
}