/**
 * 4.0 - Basic Element
 *  4.6 - navbar
 */


//
// Basic Structure
// --------------------------------------------------


// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.

.navbar {
	position: relative;
	height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
	z-index: @zindex-navbar;
	background-color: @navbar-default-bg;
	// Prevent floats from breaking the navbar
	&:extend(.clearfix all);

	// Add position relative to container
	.container,
	.container-fluid,
	.container-boxed {
		position: relative;
	}
}


// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.

.navbar-header {
	&:extend(.clearfix all);
	@media (min-width: @navbar-float-breakpoint) {
		float: left;
	}
}


// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.

.navbar-collapse {
	//max-height: @navbar-collapse-max-height;
	//overflow-x: visible;
	float: right;
	@media (max-width: @navbar-float-breakpoint-max) {
		float: none;
		clear: both;
	}
	&:extend(.clearfix all);
	&.in {
		// overflow-y: auto;
	}

	@media (min-width: @navbar-float-breakpoint) {
		width: auto;
		// border-top: 0;
		// box-shadow: none;

		&.collapse:not(.noo-user-navbar-collapse) {
			display: block !important;
			height: auto !important;
			padding-bottom: 0; // Override default setting
			overflow: visible !important;
		}

		&.in {
			// overflow-y: visible;
		}
	}
}


//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.


// Fix the top/bottom navbars when screen real estate supports it
.fixed-top {
	width: 100%;
    .transition(background-color 0.4s ease 0s);
}
.navbar-fixed-top{
	@media (min-width: @navbar-float-breakpoint) {
		position: fixed;
		right: 0;
		left: 0;
		z-index: @zindex-navbar-fixed;
		background-color: @navbar-fixed-bg;
		.box-shadow(0 0 10px 0px darken(@gray-lighter, 30%));
		&.bg-transparent {
			background-color: @navbar-fixed-bg;
		}
	}
	.navbar-brand{
		background: @brand-primary;
	}
	// Add the width on site boxed layout
	body.boxed-layout & {
		margin-right: auto;
		margin-left: auto;
		width:@site-width;
		max-width: @site-max-width;
	}
	body.nice-scroll:not(.boxed-layout) & {
		padding-right: 10px;
	}
	body.boxed-layout.nice-scroll & {
		.calc-width(@site-width,~"90% - 10px");//@site-width;
		left: -10px;
	}
	&.navbar {
		height: 60px;
	}
}

.navbar-fixed-top {
	top: 0;
	@media (min-width: @navbar-float-breakpoint) {
		&.navbar-shrink {
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;

			//min-height: @navbar-shrink-height;
			//.transition(padding 0.3s height 0.3s ease-in-out 0.2s);

			.navbar-nav > li {
				> a {
				color: @text-color;	
					&:hover{
						color: @nav-link-hover-color;
					}
				}
				&.current-menu-item, 
				&.current-menu-parent,
				&.active{
					> a {
						color: @nav-active-link-color;
					}
				}
			}
			.navbar-brand .noo-logo-img, .navbar-brand .noo-logo-retina-img {
				top: 50%;
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
				position: relative;
				vertical-align: top;
			}
		}
	}
}

// Brand
.navbar-brand {
	float: left;
	//padding: @logo-padding-vertical @logo-padding-horizontal;
	font-family: @logo-font-family;
	font-weight: @logo-font-weight;
	font-style: @logo-font-style;
	font-size: @logo-font-size;
	height: @navbar-height;
	line-height: @navbar-height;
	padding: 0 35px;
	&, &:hover {
		color: @logo-font-color;
	}
	&:hover,
	&:focus {
		text-decoration: none;
	}
	img{
		max-height: 100%; //@navbar-height;
		vertical-align: baseline;
	}
	.noo-logo-img,
	.noo-logo-retina-img {
		//height: @logo-image-height;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		position: relative;
		vertical-align: middle;
	}

	.noo-logo-img {
		display: block;
	}
	.noo-logo-retina-img,
	.noo-logo-floating {
		display: none;
	}
}
.navbar-fixed-top {
	.navbar-brand .noo-logo-img, .navbar-brand .noo-logo-retina-img {
		//height: 50px;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		position: relative;
		vertical-align: baseline;
		//height: 70%;
	}
}
/* retina logo */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	.navbar-brand {
		.noo-logo-img {
			display: none;
		}
		.noo-logo-retina-img {
			display: block;
		}
	}
}


// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.

.navbar-toggle {
	position: relative;
	float: right;
	font-size: @navbar-toggle-size;
	// line-height: @navbar-height;
	height: @navbar-height;
	display: table;
	padding: 0 15px;
	border-radius: @border-radius-base;
	// margin-right: @navbar-padding-horizontal;
	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
	cursor: pointer;
	i {
		display: table-cell;
		vertical-align: middle;
	}
	&:hover {
		text-decoration: none;
	}

	@media (min-width: @navbar-float-breakpoint) {
		display: none;
	}
}

//
// SuperFish Menu, prefer over Bootstrap menu because of hover trigger.
// Use as default Nav
//
.sf-menu,
.noo-menu {
	&, * {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	a {
		display: block;
		position: relative;
		text-decoration: none;
	}

	> li {

		display: inline-block;
		@media (max-width: @navbar-float-breakpoint-max) {
			display: block;
		}
		// float: left;
	}

	li {
		position: relative;
		&:hover,
		.sfHover {
			> ul.sub-menu {
				display: block;
				box-shadow: 2px 2px 10px -2px #cccccc;
			}
		}
	}

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

	ul.sub-menu {
		position: absolute;
		display: none;
		top: auto;
		left: auto;
		width: auto;
		min-width: 210px;
	}

	&:extend(.clearfix all);
}

// Default class for menu. Use it for top menu or footer menu.
.noo-menu {
	margin-right: auto !important;
	margin-left: auto !important;
	li {
		> a {
			color: @nav-link-color;
			padding: @nav-link-padding;

			&:hover,
			&:focus {
				background-color: @nav-link-hover-bg;
				color: @nav-link-hover-color;
			}
		}

		&.current-menu-item,
		&.current-menu-parent,
		&.active{
			> a {
				background-color: @nav-active-link-bg;
				color: @nav-active-link-color;
			}
		}

		&.disabled {
			> a {
				&,
				&:hover,
				&:focus {
					color: @nav-disabled-link-color;
					background-color: @nav-disabled-link-hover-color;
				}
			}
		}
	}

	ul.sub-menu {
		z-index: @zindex-navbar-fixed;
		background-color: @dropdown-bg;
		border: 1px solid @dropdown-fallback-border; // IE8 fallback
		border: 1px solid @dropdown-border;
		border-radius: @border-radius-base;

		ul.sub-menu {
			top: @submenu-offset-top;
			left: @submenu-offset-horizontal;
			right: auto;
		}
	}
}

// Caret
// .noo-menu .menu-item-has-children > a,
// .sf-arrows .sf-with-ul {
// 	&:after {
// 		content: "";
// 		font-family: "fontawesome";
// 		display: inline-block;
// 		font-style: normal;
// 		font-weight: normal;
// 		text-decoration: inherit;
// 		-webkit-font-smoothing: antialiased;
// 		speak: none;
// 		padding-left: @icon-padding-base;
// 	}
// 	@media (max-width: @navbar-float-breakpoint-max) {
// 		&:after {
// 			float: right;
// 		}
// 	}
// }
.sf-arrows .sub-menu .sf-with-ul {
	&:after {
		content: "\f105";
		font-family: "fontawesome";
		display: inline-block;
		font-style: normal;
		font-weight: normal;
		text-decoration: inherit;
		-webkit-font-smoothing: antialiased;
		speak: none;
		right: 15px;
		position: absolute;
	}
}


// Navbar-nav default behavior
// 

.navbar-nav {
	li{
		@media (max-width: @navbar-float-breakpoint-max) {
			border-top: 1px solid  @navbar-default-border;
			background-color: @navbar-default-bg;
		}
	}
	> li > a {
		text-transform: uppercase;
		@media (max-width: @navbar-float-breakpoint-max) {
			padding-top: 10px !important;
			padding-bottom: 10px !important;
		}
	}
	> li {
		> a {
			color: @navbar-default-link-color;
			padding: @navbar-link-padding;
			line-height: @navbar-line-height;
			font-size: @navbar-font-size;
			&:before{
				content: '';
				width: 0;
				height: 3px;
				position: absolute;
				bottom: 0;
				left: 0;
				.transition(0.15s);
				background: @brand-primary;
				@media (max-width: @navbar-float-breakpoint-max){
					display: none;
				}
			}
			@media (max-width: @screen-md-max){
				padding-left: 18px;
				padding-right: 18px;
			}
			&:hover,
			&:focus {
				color: @navbar-default-link-hover-color;
				background-color: @navbar-default-link-hover-bg;
				&:before{
					width: 100%;
				}
			}
		}

		&:hover, .sfHover {
			> a {
				background-color: @navbar-default-link-hover-bg;
				color: @navbar-default-link-hover-color;
			}
		}

		&.current-menu-item,
		&.current-menu-parent,
		&.active{
			> a {
				background-color: @navbar-default-link-active-bg;
				color: @navbar-default-link-active-color;
				&:before{
					width: 100%;
				}
			}
		}

		&.disabled {
			> a {
				&,
				&:hover,
				&:focus {
					color: @navbar-default-link-disabled-color;
					background-color: @navbar-default-link-disabled-bg;
				}
			}
		}
	}

	ul.sub-menu {
		z-index: @zindex-navbar-fixed;
		font-size: @submenu-font-size;
		@media (max-width: @navbar-float-breakpoint-max) {
			> li > a{
				padding-left: 25px;
			}
			> li li a {
				padding-left: 35px;
			}
		}
		li {
			display: block;
			> a{
				color: @white;
				line-height: 22px;
				padding: 7px 20px;
				text-transform: uppercase;
				@media (max-width: @navbar-float-breakpoint-max) {
					padding-left: 30px;
				}
				&:hover{
					color: @navbar-sub-default-link-hover-color;
					background-color: @navbar-sub-default-link-hover-bg;
				}
				
			}
			&:hover
			&.sfHover{
				> a{
					color: @navbar-sub-default-link-hover-color;
					background-color: @navbar-sub-default-link-hover-bg;
				}
			}
			&.current-menu-item {
				> a {
					color: @navbar-sub-default-link-hover-color;
					background-color: @navbar-sub-default-link-hover-bg;
				}
			}
		}
	}

	// Uncollapsed Menu
	@media (min-width: @navbar-float-breakpoint) {
		// By default, menu on the right.
		float: right;

		> li {
			> ul.sub-menu {
				// Default right alignment
				left: auto;
				right: 0;

				// Sub-menu open to left by default ('cause menu on the right)
				ul.sub-menu {
					top: @submenu-offset-top;
					left: auto;
					right: @submenu-offset-horizontal;
				}
			}
		}
	}

	// Collapsed menu
	@media (max-width: @navbar-float-breakpoint-max) {
		//margin: 20px 0;

		> li {
			float: none;
		}

		li > a {
			white-space: normal;
		}

		li {
			.transition(none);
		}

		// Display all sub-menu nav items on mobile.
		ul.sub-menu {
			//display: block !important;
			//opacity: 1 !important;
			position: static;
			float: none;
			max-width: none;
			//margin: 0 20px;
			padding: 0;
			border: none;
			border-radius: 0;
			.box-shadow(none);
			.transition(none);

			&:before, &:after {
				display: none;
			}

			// Reset dropdown font size to match top level.
			a {
				font-size: @navbar-font-size;
			}
		}
	}
}

// Uncollapsed Menu
@media (min-width: @navbar-float-breakpoint) {
	// Move the link height here so that navbar can change height later
	.navbar {
		.navbar-brand {
			line-height: @navbar-height;
		}
		.navbar-nav {
			> li > a {
				line-height: @navbar-height;
			}
		}
	}
	// Move the link height here so that navbar can change height later
	// .navbar.navbar-fixed-left
	// .navbar.navbar-fixed-right {
	// 	.navbar-nav{
	// 		> li > a {
	// 			padding-top:0;
	// 			padding-bottom:0;
	// 			line-height: @side-navbar-link-height;
	// 		}
	// 	}
	// } 
}

// Enhanced feature: fly over and mega menu only on PC
// and not when navbar fixed on the side
.navbar-nav.sf-menu {
	// Only on PC
	@media (min-width: @navbar-float-breakpoint) {
		> li {
			ul.sub-menu {
				background-color: @link-color;
				padding: 15px 0;
			}

			li {
				&.fly-left {
					> ul.sub-menu {
						left: auto;
						right: @submenu-offset-horizontal;
						box-shadow: @submenu-left-default-box-shadow;
					}
				}
				&.fly-right {
					> ul.sub-menu {
						left: @submenu-offset-horizontal;
						right: auto;
						box-shadow: @submenu-right-default-box-shadow;
					}
				}
			}

			// Alignment ( override the default right alignment )
			&.align-left {
				> ul.sub-menu {
					left: 0;
					right: auto;
				}
			}
			&.align-right {
				> ul.sub-menu {
					left: auto;
					right: 0;
					&:before {
						right: 35px!important;
						left: auto!important;
						border-right: 8px solid transparent;
						border-bottom: 8px solid @brand-primary;
						border-left: 8px solid transparent;
					}
				}
			}
			&.align-center {
				> ul.sub-menu {
					left: 50% !important;
					right: auto;
					.translate ( -50%, 0 );
					&:before {
						right: 50%;
						left: auto;
						transform: translateX(-50%);
						-webkit-transform: translateX(-50%);
						border-right: 8px solid transparent;
						border-bottom: 8px solid @brand-primary;
						border-left: 8px solid transparent;
					}
				}

			}

			&.full-width {
				position: inherit !important;
				> ul.sub-menu {
					width: 100%;
					left: 0;
					
					}
			}
			&.full-width.sfHover {
				> ul.sub-menu {
					&:before {
						border: 0;
					}
				}
				> a {
					position: relative;
					&:before {
						content: '';
						position: absolute;
						left: 35px;
						bottom: 0px;
						border-right: 6px solid transparent;
						border-bottom: 6px solid @brand-primary;
						border-left: 6px solid transparent;
					}
				}
			}

			// 6. mega menu
			&.megamenu {

				// @columns-2-width: 49.6%;
				// @columns-3-width: 32.8%;
				// @columns-4-width: 24.45%;
				// @columns-5-width: 19.45%;
				// @columns-6-width: 16.1%;

				> ul.sub-menu {
					padding: 15px 0 15px 4px; // edit base on style						
					li{
						float: left;
						width: 100%;
					}
					li > a {
						white-space: normal;
					}

					> li {
						display: table-cell !important;
						float: none !important;
						margin: 5px 0;
						padding-left: 0;
						padding-right: 0;
						vertical-align: top;
						position: relative;

						// default 3 columns
						width: 32.8%;

						> ul.sub-menu {
							display: block !important;
							opacity: 1 !important;
							top: 0px !important;
							width: 100%;
							left: 0px !important;
							position: relative !important;
							.box-shadow(none);
							background-color: transparent;
						}

						&.menu-item-has-children {
							border-right: 1px solid rgba(65, 65, 65, 0.1);
							&:last-child {
								border-right: none !important;
							}
							> a {
								background-color: transparent;
								text-transform: uppercase;
								font-weight: bold;
								letter-spacing: 2px;

								&.sf-with-ul {
									&:before, &:after { 
										display: none;
									}
								}
							}
						}

						&.menu-item-has-children:hover, &.menu-item-has-children.sfHover {
							> a {
								background-color: transparent;
							}
						}
					}
				}

				ul.sub-menu li > a {
					border-top: 0;
				}

				&.columns-2 > ul.sub-menu {
					> li { width: 49.6%; }
					> li:nth-child(2n) {
						border-right: none !important;
					}
					> li:nth-child(2n+1) {
						clear: both;
					}
				}
				&.columns-3 > ul.sub-menu {
					> li { width: 32.8%; }
					> li:nth-child(3n) {
						border-right: none !important;
					}
					> li:nth-child(3n+1) {
						clear: both;
					}
				}
				&.columns-4 > ul.sub-menu {
					> li { width: 24.45%; }
					> li:nth-child(4n) {
						border-right: none !important;
					}
					> li:nth-child(4n+1) {
						clear: both;
					}
				}
				&.columns-5 > ul.sub-menu {
					> li { width: 19.45%; }
					> li:nth-child(5n) {
						border-right: none !important;
					}
					> li:nth-child(5n+1) {
						clear: both;
					}
				}
				&.columns-6 > ul.sub-menu {
					> li { width: 16.1%; }
					> li:nth-child(6n) {
						border-right: none !important;
					}
					> li:nth-child(6n+1) {
						clear: both;
					}
				}
			}
		}
	}
}

// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.

// @media (min-width: @navbar-float-breakpoint) {
// 	.navbar-left  { .pull-left(); }
// 	.navbar-right { .pull-right(); }
// }

.navbar-toggle {
	&.collapsed {
		color: @navbar-default-toggle-color;
		&:hover, &:focus {
			color: @navbar-default-toggle-hover-color;
			// background-color: @navbar-default-toggle-hover-bg;
		}
	}
}

.noo-navbar {
	display: inline-block; 
	width: 100%;
}
.navbar-nav li.navbar-donate-btn{
	padding: 0 10px;
	@media (max-width: @navbar-float-breakpoint-max) {
		padding: 15px;
		text-align: center;
	}
	> a{
		.btn();
		.btn-primary();
		.btn-lg();
		line-height: 1 !important;
		color: #fff !important;
		vertical-align: baseline;
		font-weight: bold;
	}
}


// Floating Header

body.page-menu-center-vertical:not(.boxed-layout){
	.navbar.navbar-default:not(.navbar-fixed-top){
		@media (min-width: @navbar-float-breakpoint){
			position: absolute;
			width: 100%;
			top:50%;
			left: 0;
			right: 0;
			.translate(0,-50%);
			background: fade(#000, 80%);
			.navbar-brand{
				background: @brand-primary;
			}
		}	
	}
}

.page-menu-transparent{
	.noo-topbar{
		border-color: transparent;
		background-color: rgba(0, 0, 0, 0.1);
		.topbar-right .searchform .searchinput{
			background: transparent;
		}
	}
	.navbar:not(.navbar-fixed-top){
		background: transparent;
		border-color: transparent;
		color: #fff;
	}
}
.navbar-nav{
	&.header-right{
		@media (max-width: @navbar-float-breakpoint-max){
			display: none;
		}
		> li > a{
			cursor: pointer;
			padding: 0 10px;
			&:before{
				display: none;
			}
		}
	}
}

// Header home 1 2 3
.noo-header{
	.navbar-wrapper{
		.navbar{
			ul.navbar-nav{
				> li{
					ul.sub-menu{
						li{
							border-bottom: 1px solid #e5e5e5;
							&:last-child{
								border-bottom: none;
							}
						}
					}
				}
			} 
		} 
	} 
}
.noo-header{
	&.header-2{
		.noo-topbar{
			background:white;
			padding:10px 0px;
			border-bottom: 1px solid #e5e5e5;
			.topbar-left{
				font-size: 14px;
				color: #6f6f6f;
				i{
					color:@brand-primary;
				}
				a{
					&:hover{
						color:@brand-primary;
					}
				}
			}
			.sub-menu{
				display: flex;
				justify-content: flex-end;
				margin:0;
				li{
					padding: 0 15px;
					list-style: none;
					&:first-child{
						border-left:1px solid #f6f6f6;
						border-right:1px solid #f6f6f6;
					}
					a{
						color:#6f6f6f;
						i{
							color:@brand-primary;
						}
					}
				}
			}
		}
		.navbar-wrapper{
			.navbar{
				background: white;
				ul.navbar-nav{
					float: none;
					text-align: center;
					@media screen and (min-width:320px){
						text-align: left;
					}
					@media screen and (min-width:992px){
						text-align: center;
					}
					> li {
						background-color: white;
						>a{
							color: black;
						}
						&:hover{
							>a{
								color:@brand-primary;
								
							}
						}
						ul.sub-menu{
							background: white;
							li{
								background-color: white;
								&.current-menu-item{
									>a{
										color:white;
									}
								}
								>a{
									color:black;
									text-transform: none;
									font-size: 16px;
									text-align: left;
								}
								&:hover{
									>a{
										color:white;
									}
								}
							}
						}
					}
				}
				.navbar-header{
					.navbar-brand{
						padding:0px;
					}
					.navbar-toggle{
						&.collapsed{
							color:black;
						}
					}
				}
				.navbar-collapse{
					float:none;
					@media screen and (min-width:992px){
						width: 75%;
						float:left;
					}
				}
				.navbar-cart{
					float:none;
					@media screen and (min-width:992px){
						float: right;
					}
				}
				&.navbar-fixed-top{
					.navbar-brand{
						background:transparent;
					}
				}
				&.navbar-default:not(.navbar-fixed-top){
					.navbar-brand{
						background: transparent;
					}
					@media (min-width: @navbar-float-breakpoint){
						background: fade(#fff, 100%);
					}	
				}
			}
		}
	}
	&.header-3{
		.navbar-wrapper{
			.navbar {
				background: white;
				
				@media screen and (min-width:992px){
					height: auto;
				}
				ul.navbar-nav{
					float: none;
					text-align: center;
					@media screen and (min-width:320px){
						text-align: left;
					}
					@media screen and (min-width:992px){
						text-align: center;
					}
					> li {
						background-color: white;
						>a{
							color: black;
						}
						&:hover{
							>a{
								color:@brand-primary;
							}
						}
						ul.sub-menu{
							background: white;
							li{
								background-color: white;
								&.current-menu-item{
									>a{
										color:white;
									}
								}
								>a{
									color:black;
									text-transform: none;
									font-size: 16px;
									text-align: left;
								}
								&:hover{
									>a{
										color:white;
									}
								}
							}
						}
					}
					&.navbar-cart{
						float: right;
					}
				}
				.noo-search{
					top:50%;
					transform: translateY(-50%);
					position: absolute;
					@media screen and (min-width:320px){
						display: none;
					}
					@media screen and (min-width:992px){
						display: block;
					}
					.search-button{
						color:black;
						padding-right: 10px;
						font-size: 18px;
						&:hover{
							color:@brand-primary;
						}
					}
					.title-search{
						color:black;
					}
				}
				.navbar-header{
					float: none;
					.navbar-brand{
						padding:0px;
						.noo-logo-img{
							left: 50%;
							position: absolute;
							@media screen and (min-width:320px){
								left: 30px;
							}
							@media screen and( min-width:992px){
								left: 50%;
								transform: translate(-50%,-50%);
							}
						}
					} 
					.navbar-toggle{
						&.collapsed{
							color:black;
						}
					}
				}
				.navbar-collapse{
					@media screen and (min-width:320px){
						width: 100%;
					}
					@media screen and (min-width:992px){
						width: 75%;
					}
				}
				&.navbar-default:not(.navbar-fixed-top){
					.navbar-brand{
						background: transparent;
					}
					@media (min-width: @navbar-float-breakpoint){
						background: fade(#fff, 100%);
					}	
				}
				.navbar-menu{
					&.fix-sticky{
						transform: translateY(0%);
						position: fixed;
						width: 100%;
						margin: 0 auto;
						left: 0;
						background: #fff;
						top: 0;
						box-shadow: 0 0 10px 0px #a8a8a8;
						@media screen and(min-width:320px){
							position: relative;
							display: none;
						}
						@media screen and(min-width:992px){
							position: fixed;
							display: block;
						}
					}
				}
			}	
		}
	}
	&.header-4{
		.navbar-wrapper{
			position: absolute;
   			 width: 100%;
			.navbar{
				background-color: transparent;
				//position: absolute;
				ul.navbar-nav{
					>li{
						background-color: white;
						@media screen and(min-width:320px){
							background-color: white;
						}
						@media screen and(min-width:992px){
							background-color: transparent;
						}
						>a{
							color:black;
						}
						&:hover{
							>a{
								color:@brand-primary;
							}
						}
						ul.sub-menu{
							background: white;
							li{
								background-color: white;
								&.current-menu-item{
									>a{
										color:white;
									}
								}
								>a{
									color:black;
									text-transform: none;
									font-size: 16px;
									text-align: left;
								}
								&:hover{
									>a{
										color:white;
									}
								}
							}
						}
					}
				}
				.navbar-collapse{
					float:none;
					@media screen and (min-width:992px){
						width: 75%;
						text-align: right;
						margin: 0 auto;
					}
				}
				&.navbar-fixed-top{
					background:white;
					.navbar-brand{
						background: none;
					}
				}
				.navbar-header{
					.navbar-toggle{
						&.collapsed{
							color:black;
						}
					}
				}
				&.navbar-default:not(.navbar-fixed-top){
					.navbar-brand{
						background: transparent;
					}
					@media (min-width: @navbar-float-breakpoint){
						background: fade(#fff, 0%);
					}	
				}
				.navbar-cart{
					margin-right:10px;
				}
				.search-cart{
					float: right;
					display: block;
					position: relative;
					.noo-search{
						position: absolute;
						top: 50%;
						right:0px;
						transform: translateY(-50%);
						.search-button{
							color:black;
							&:hover{
								color:@brand-primary;
							}
						}
						@media screen and(min-width:320px){
							display: none;
						}
						@media screen and (min-width:992px){
							display: block;
						}
					}
				}
			}
		}
	}
}
.page-menu-center-vertical{
	.noo-header{
		&.header-4{
			.navbar-wrapper{
				position: inherit;
				.navbar{
					&.navbar-default:not(.navbar-fixed-top){
						.navbar-brand{
							background: transparent;
						}
						@media (min-width: @navbar-float-breakpoint){
							background: fade(#fff, 80%);
						}	
					}
				}
			}
		}
	}
}