.main-nav-wrapper{
	position: relative;
	z-index: 4;

	.main-nav-below.top-nav-below-main-nav &{
		z-index: 9;
	}

	.main-nav-above.top-nav-below &{
		z-index: 10;
	}
}

.main-nav{
	background-color: var(--main-nav-background);
	color: var(--main-nav-primary-color);
	position: relative;
	border: 1px solid var(--main-nav-main-border-color);
	border-width: 1px 0;
}

.main-menu-wrapper{
	position: relative;
}



@include breakpoint(md){

	.header-menu{
		
		.menu {
			display: flex;
			//white-space: nowrap;

			a {
				display: block;
				position: relative;
			}

			> li > a{
				white-space: nowrap;
			}

			.sub-menu{
				a {
					padding: 8px 10px;
				}
			}

			a:hover,
			li:hover > a{
				z-index: 2;
			}

			// lower levels
			ul{

				&:not(.sub-menu-columns):not(.sub-menu-columns-item):not(.sub-list):not(.mega-cat-sub-categories):not(.slider-arrow-nav){
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
				}

				li {
					position: relative;
				}

				a {
					border-width: 0 0 1px;
					transition: 0.15s;
				}

				ul{
					top: 0;
					left: 100%;
				}
			}
		}
	}

	// Main Navigation
	#main-nav{
		z-index: 9;
		line-height: 60px;
	}

	.main-menu {
		.menu {
			a{
				transition: 0.15s;
			}

			// first level
			> li {
				> a {
					padding: 0 14px;
					font-size: 14px;
					font-weight: 700;
				}

				> .menu-sub-content{
					border-top: 2px solid var(--main-nav-primary-color);
				}

				&.is-icon-only {
					> a{
						padding: 0 20px;
						line-height: inherit;

						&:before{
							display: none;
						}

						.tie-menu-icon{
							font-size: 160%;
							transform: translateY(15%);
						}
					}
				}
			}

			ul{
				line-height: 20px;
				z-index: 1;
			}

			.sub-menu .tie-menu-icon,
			.mega-recent-featured-list .tie-menu-icon,
			.mega-link-column .tie-menu-icon,
			.mega-cat-more-links .tie-menu-icon{
				width: 20px;
			}
		}

		.menu-sub-content{
			background: var(--main-nav-background);
			display: none;
			padding: 15px;
			width: 230px;
			position: absolute;
			box-shadow: 0 3px 4px rgba(0,0,0,0.2);

			a{
				width: 200px;
			}
		}

		ul{
			li:hover > .menu-sub-content,
			li[aria-expanded="true"] > ul,
			li[aria-expanded="true"] > .mega-menu-block{
				display: block;
				z-index: 1;
			}
		}
	}


	// Layout 0 = menu-style-default + menu-style-solid-bg
	// Layout 1 = menu-style-solid-bg
	// Layout 2 = menu-style-minimal
	// layout 3 = menu-style-border-bottom
	// layout 4 = menu-style-border-top
	// layout 5 = menu-style-border-top menu-style-border-bottom
	// Layout 6 = menu-style-line
	// Layout 7 = menu-style-arrow menu-style-minimal
	// Layout 8 = menu-style-vertical-line menu-style-minimal


	// Main Nav Layouts
	nav.main-nav{

		&.menu-style-default{
			.menu > li.tie-current-menu{
				border-bottom: 5px solid var(--main-nav-primary-color);
				margin-bottom: -5px;

				> a{
					&:after{
						content: "";
						width: 20px;
						height: 2px;
						position: absolute;
						margin-top: 17px;
						@include center(xy);
						background: #2c2f34;
						transition: 0.3s;
					}
				}
			}
		}

		&.menu-style-solid-bg{
			.menu > li{
				&.tie-current-menu > a,
				&:hover > a{
					background-color: var(--main-nav-primary-color);
					color: var(--main-nav-contrast-primary-color);
				}
			}
		}

		&.menu-style-side-arrow{
			.menu > li{
				&.tie-current-menu{
					border-bottom-color: var(--main-nav-primary-color);
					border-bottom-width: 10px !important;
					border-bottom-style: solid;
					margin-bottom: -10px;

					// Avoid 2 active menus beside each other  
					+ .tie-current-menu{
						border-bottom: none !important;
						> a{
							&:after{
								display: none !important;
							}
						}
					}

					> a{
						&:after{
							position: absolute;
							content: "";
							width: 0;
							height: 0;
							background-color: transparent;
							border-top: 10px solid var(--main-nav-primary-color);
							border-right: 10px solid transparent;
							bottom: -10px;
							left: 100%;
							filter: brightness(80%); 
						}
					}

					&.menu-item-has-children:hover,
					&.mega-menu:hover{
						&:after,
						>a:after{
							display: none;
						}
					}
				}
			}
		}

		&.menu-style-minimal{
			.menu > li{
				&.tie-current-menu > a,
				&:hover > a{
					color: var(--main-nav-primary-color) !important;

					&::before{
						border-top-color: var(--main-nav-primary-color) !important;
					}
				}
			}

		}


		&.menu-style-border-bottom{
			.menu > li{
				&.tie-current-menu{
					border-bottom: 3px solid var(--main-nav-primary-color);
					margin-bottom: -3px;
				}
			}
		}

		&.menu-style-border-top{
			.menu > li{
				&.tie-current-menu{
					border-top: 3px solid var(--main-nav-primary-color);
					margin-bottom: -3px;
				}
			}
		}
		

		&.menu-style-line{
			.menu > li{
				> a{
					&:after{
						content: "";
						@include center(xy);
						height: 3px;
						position: absolute;
						margin-top: 14px;
						background: var(--main-nav-primary-color);
						transition: 0.4s;
						width: 0;
					}
				}

				&.tie-current-menu > a,
				&:hover > a{
					&:after{
						width: 50%;
					}
				}
			}
		}
		

		&.menu-style-arrow{
			.menu > li{
				&.tie-current-menu > a{
					&:after{
						border-color: #fff transparent transparent;
						border-top-color: var(--main-nav-primary-color);
						border-style: solid;
						border-width: 7px 7px 0;
						display: block;
						height: 0;
						left: 50%;
						margin-left: -7px;
						top: 0 !important;
						width: 0;
						content: "";
						position: absolute;
					}
				}
			}
		}

		&.menu-style-vertical-line{
			.menu > li{
				&.tie-current-menu > a{
					&:after{
						content: "";
						width: 2px;
						height: 20px;
						position: absolute;
						margin-top: 17px;
						@include center(x);
						bottom: 0;
						background: var(--main-nav-primary-color);
					}
				}
			}
		}

	}



	// Photography demo menu
	.header-layout-1 .main-menu-wrap .menu > li:only-child{
		&:not(.mega-menu){
			position: relative;
		}

		> .menu-sub-content{
			right: 0;
			left: auto;

			ul{
		    left: auto;
		    right: 100%;
			}
		}
	}

	// Main Nav Components
	nav.main-nav{
		.components{
			> li:hover > a{
				color: $brand-color;
			}
		}
	}


	// Main Nav Colors
	.main-nav{
		.menu ul li:hover > a:not(.megamenu-pagination),
		.components li a:hover,
		.menu ul li.current-menu-item:not(.mega-link-column) > a {
		  color: var(--main-nav-primary-color);
		}

		.menu a,
		.components li a{
			color: var(--main-nav-text-color);
		}

		.components li.custom-menu-button:hover a.button,
		.components li a.button:hover,
		.components li a.checkout-button{
			color: var(--main-nav-contrast-primary-color);
		}
	}

	// Main Nav Light Mode
	.main-nav-light{
		--main-nav-background: #FFFFFF;
		--main-nav-secondry-background: rgba(0,0,0,0.03);
		--main-nav-primary-color: var(--brand-color);
		--main-nav-contrast-primary-color: var(--bright-color);
		--main-nav-text-color: var(--base-color);
		--main-nav-secondry-text-color: rgba(0,0,0,0.5);
		--main-nav-main-border-color: rgba(0,0,0,0.1);
		--main-nav-secondry-border-color: rgba(0,0,0,0.08);

		&.fixed-nav{
			background-color: rgba(255,255,255,0.95);
		}
	}

	// Main Nav Dark Mode
	.main-nav-dark{
		--main-nav-background: #1f2024; //$light-darker-bg;
		--main-nav-secondry-background: rgba(0,0,0,0.2);
		--main-nav-primary-color: var(--brand-color);
		--main-nav-contrast-primary-color: var(--bright-color);
		--main-nav-text-color: #FFFFFF;
		--main-nav-secondry-text-color: rgba(225,255,255,0.5);
		--main-nav-main-border-color: rgba(255,255,255,0.07);
		--main-nav-secondry-border-color: rgba(255,255,255,0.04);

		.main-nav{
			&,
			ul.cats-horizontal li a{
				border-width: 0;
			}

			&.fixed-nav{
				background-color: rgba(31,32,36,0.95);
			}
		}
	}


}


// Header menus arrows
@include breakpoint(md){
	header .menu-item-has-children,
	.mega-menu{
		> a:before{
			content: '';
			position: absolute;
			right: 10px;
			@include center(y);
			font-family: 'tiefonticon' !important;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			content: "\f079";
			font-size: 11px;
			line-height: 1;
		}

		.menu-item-has-children > a:before{
			content: "\f106";
			font-size: 15px;
		}
	}

	.menu > .menu-item-has-children:not(.is-icon-only) > a,
	.menu .mega-menu:not(.is-icon-only) > a{
		padding-right: 25px;
	}
}


//Boxed Main Menu
@include breakpoint(md){
	.main-nav-boxed{
		.main-nav{
			border-width: 0;
		}

		.main-menu-wrapper{
			float: left;
			width: 100%;
			background-color: var(--main-nav-background);
			padding-right: 15px;
		}

		&.main-nav-light{
			.main-menu-wrapper{
				border: 1px solid var(--main-nav-main-border-color);

				.dark-skin &{
					border-width: 0;
				}
			}

			.fixed-nav .main-menu-wrapper{
				border-color: transparent;
			}
		}
	}

	// borders between topNav and MainNav
	.main-nav-above.top-nav-above #main-nav:not(.fixed-nav){
		top: -1px;
	}

	.main-nav-below.top-nav-below #main-nav:not(.fixed-nav){
		bottom: -1px;
	}

	.dark-skin .main-nav-below.top-nav-above #main-nav{
		border-width: 0;
	}

	.dark-skin .main-nav-below.top-nav-below-main-nav #main-nav{
		border-top-width: 0;
	}
}

// Main Nav Boxed transparent background in stikcy mode
.main-nav-boxed .main-nav:not(.fixed-nav),
.main-nav-boxed .fixed-nav .main-menu-wrapper,
.theme-header:not(.main-nav-boxed) .fixed-nav .main-menu-wrapper{
  background: transparent !important;
}


// Header Layout #1
@include breakpoint(md){
	.header-layout-1.main-nav-below.top-nav-above{
		.main-nav{
			margin-top: -1px;
			border-top-width: 0;
		}

		.breaking-title{
			top: 0;
			margin-bottom: -1px;
		}
	}
}

.header-layout-1.main-nav-below.top-nav-below-main-nav {
	.main-nav-wrapper{
		z-index: 9;
	}

	.main-nav{
		margin-bottom: -1px;
		bottom: 0;
		border-top-width: 0;
	}

	@include breakpoint(md){
		.top-nav{
			margin-top: -1px;
		}
	}
}

.header-layout-1.has-shadow:not(.top-nav-below) .main-nav{
	border-bottom: 0;
}

#theme-header.header-layout-1 > div:only-child nav{
	border-width: 0 !important;
}

// Padding of the First level itmes in responsive from 992px to 1100px.
@include breakpoint_min_max($screen-md,1100px){
	.main-nav .menu > li{
		&:not(.is-icon-only) > a{
			padding-left: 7px;
			padding-right: 7px;

			&:before{
				display: none;
			}
		}

		&.is-icon-only > a{
			padding-left: 15px;
			padding-right: 15px;
		}
	}
}

// Tiny Label
.menu-tiny-label{
	font-size: 10px;
	border-radius: 10px;
	padding: 2px 7px 3px;
	margin-left: 3px;
	line-height: 1;
	position: relative;
	top: -1px;

  &.menu-tiny-circle{
   	border-radius: 100%;
  }
}


// hide stikcy logo in responsive
@include breakpoint(max_min_md){
	#sticky-logo{
		display: none;
	}
}


#main-nav:not( .fixed-nav ){
	#sticky-logo,
	.flex-placeholder{
		display: none;
	}
}

// Sticky Menu -
@include breakpoint(md){


	#sticky-logo{
		overflow: hidden;
		float: left;
		vertical-align: middle;

		a{
			line-height: 1;
			display: inline-block;
		}

		img{
			position: relative;
			vertical-align: middle;
			padding: 8px 10px;
			top: -1px;
			max-height: 50px;

			.just-before-sticky &,
			.header-layout-1 &{
				padding: 0;
			}
		}

		.header-layout-1:not(.has-custom-sticky-logo) &{
			display: none;
		}
	}

	.theme-header{
		#sticky-logo img{
			opacity: 0;
			visibility: hidden;
			width: 0 !important;
			transform: translateY(75%);
			transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1), opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
		}

		&.header-layout-1:not(.has-custom-sticky-logo) #sticky-logo img{
			transition: none;
		}
	}

	.theme-header:not(.header-layout-1) #main-nav:not(.fixed-nav) #sticky-logo img{
		margin-left: -20px;
	}

	.header-layout-1 .flex-placeholder{ // fake div to override justify-content for single element .
		flex-grow: 1;
	}
}


//Desktip Sitcky Main Menu
.theme-header{
	.fixed-nav{
		position: fixed;
		width: 100%;
		top: 0;
		bottom: auto !important;
		z-index: 100;
  	will-change: transform;
  	transform: translateY(-100%);
		transition: transform 0.3s;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		border-width: 0;
		background-color: rgba(255,255,255,0.95);

		&:not(.just-before-sticky){
			line-height: 60px !important;

			@include breakpoint(md){
				.header-layout-1-logo{
					display: none;
				}
			}

			#sticky-logo{
				display: block;
			}

			#sticky-logo img{
				opacity: 1;
				visibility: visible;
				width: auto !important;
				transform: translateY(0);
			}
		}

		@include breakpoint(md){
			@at-root .header-layout-1:not(.just-before-sticky):not(.has-custom-sticky-logo) .fixed-nav #sticky-logo{
				display: block;
			}
		}

		.admin-bar &{
			top: 32px;

			@include breakpoint_max(782px){
			  top: 46px;
			}

			@include breakpoint_max(600px){
				top: 0;
			}
		}

		@include breakpoint(md){
			.border-layout &{
				top: 25px;
			}

			.border-layout.admin-bar &{
				top: 57px;
			}
		}

		.container{
			opacity: 0.95;
		}

		.main-menu-wrapper,
		.main-menu{
			border-top: 0;
		}

		&.fixed-unpinned:not(.default-behavior-mode) {
			.main-menu .menu > li.tie-current-menu{
				border-bottom-width: 0;
				margin-bottom: 0;
			}
		}

		&.unpinned-no-transition {
			transition: none;
		}

		&:not(.fixed-unpinned):not(.fixed-pinned) .tie-current-menu{
  		border: none !important;
		}

	}

	.fixed-pinned,
	.default-behavior-mode.fixed-unpinned {
	  transform: translate3d(0,0,0);
	}

}

// Mobile Sticky Nav
@include breakpoint(max_min_md){
	.fixed-nav{
		.theme-header &{
			transition: none;
		}

		&.logo-container.sticky-up,
		&.logo-container.sticky-nav-slide.sticky-down,
		&#main-nav.sticky-up,
		&#main-nav.sticky-nav-slide.sticky-down {
			transition: transform 0.4s ease;
		}

		.sticky-type-slide &.logo-container.sticky-nav-slide-visible,
		.sticky-type-slide &#main-nav.sticky-nav-slide-visible {
			transform: translateY(0);
		}

		&.default-behavior-mode{
			transform: none !important;
		}
	}
}

// Mobile main nav
@include breakpoint(max_min_md){
	#tie-wrapper header#theme-header{
		box-shadow: none;
		background: transparent !important; // used to overide the sari3 (html)
	}

	.logo-container,
	.header-layout-1 .main-nav{
		border-width: 0;
		box-shadow: 0 3px 7px 0 rgba(0,0,0,0.1);
	}

	.header-layout-1.top-nav-below .main-nav:not(.fixed-nav){
		box-shadow: none;
	}

	// fix the separator issue
	.is-header-layout-1.has-header-ad .top-nav-below .main-nav{
		border-bottom-width: 1px;
	}

	.logo-container,
	.header-layout-1 .main-nav{
		background-color: #ffffff;
	}

	.dark-skin .logo-container,
	.main-nav-dark.header-layout-1 .main-nav{
		background-color: $darker-bg;
	}

	.dark-skin #theme-header .logo-container.fixed-nav{
		background-color: rgba(31,32,36,0.95);
	}

	.header-layout-1.main-nav-below.top-nav-below-main-nav .main-nav{
		margin-bottom: 0;
	}

	#sticky-nav-mask,
	.header-layout-1 #menu-components-wrap,
	.header-layout-3 .main-nav-wrapper,
	.header-layout-2 .main-nav-wrapper{
		display: none;
	}

	.main-menu-wrapper .main-menu-wrap{
		width: 100%;
	}
}
