.no-js {
  	.toggle-main-navigation{display:none;}
}

/*
.pre-icon{position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:9999;opacity:1;visibility:visible;background:$white;z-index:90;}
.fadeOut{animation:fadeOut 1s;animation-delay:0.5s;animation-fill-mode:forwards;}

@keyframes fadeOut{
	from{opacity:1;}
	to{visibility:hidden;opacity:0;}
}
*/

/*
 * Top navigation
 */
header{
	position:relative;
	z-index:1000;
	left:0;
	right:0;
	background:$white;
	
	
	.top-bar{
		
		@include has-shadow();
		position:relative;
		z-index:100;
		
		.top-bar-left,
		.top-bar-right,
		.top-bar-center{
			flex: 0 1 auto;
					
			@include breakpoint(medium down){
				flex: 0 0 100%;
				max-width: 100%;
				//&.top-bar-right__secondary{
			//		display:none;
			//	}
			}
		
		}
		
		.top-bar-left{
			position:relative;
			.logo{
				svg{
					height:2.5rem;
					display:block;
					padding-left:0.5rem;
					@include breakpoint(small only){
						padding:0;
					}
				}
			}
			.toggle-main-navigation{
				
				position:absolute;
				top:0.5rem;
				right:0;
				
				// toggle navigation
				.toggle-menu{
	
					float:right;position:relative;width:1.5rem;height:1.5rem;padding:0;transform:rotate(0deg);transition:.5s ease-in-out;cursor:pointer;

					span{display:block;position:absolute;height:0.125em;width:100%;background:$black;opacity:1;left:0;transform:rotate(0deg);transition:.25s ease-in-out;}
					span:nth-child(1){top:0.125em;}
					span:nth-child(2),
					span:nth-child(3){top:0.625em;}
					span:nth-child(4){top:1.125em;}
		
					&.open span:nth-child(1){top:18px;width:0%;left:50%;}
					&.open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
					&.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
					&.open span:nth-child(4){top:18px;width:0%;left:50%;}

				}
			}
	
	
		}
		
		.top-bar-center,
		.top-bar-right{
			
			li.section{
				position:relative;
				a{
					color:$black;
					font-weight:$global-weight-bold;
					position:relative;
					&:hover,
					&.link__active{
						&::after{content:"";border-bottom:solid 0.125rem $primary-color;position:absolute;bottom:-0.75rem;left:$global-padding;right:$global-padding;}
					}
					//&:hover::after{border-bottom:solid 0.25rem $white;}
				}
			}
			
			li.section__search{border-right:solid 1px $light-gray;}
			li.section__account a{padding-right:0.5rem;}
			li.section__order a,
			li.section__cart a{
				padding-left:0.5rem;
				margin-right:0.25rem;
				
				span.counter{content:"0";background:$primary-color;width:1rem;height:1rem;padding-top:0.125rem;color:$white;position:absolute;top:0.25rem;right:0.5rem;border-radius:50%;text-align:center;font-size:0.625rem;line-height:0.75rem;}

				span.added-to-cart{

					@include animate();
				    animation-name: bounceIn;
					animation-delay: 1s;
				    animation-duration: 2s;
	 
					background:$primary-color;
				    position: absolute;
				    z-index: 1000;
				}				
			}
			
			li.section__search,
			li.section__account,
			li.section__cart,
			li.section__order{
				
				a::after{display:none;}
				
				a:hover{color:$primary-color;}
				a:hover::after{display:none;}
			}
			
			li.section__notifications{
				
				span{background:$secondary-color;width:1rem;height:1rem;padding-top:0.125rem;color:$white;position:absolute;top:0.25rem;right:0.5rem;border-radius:50%;text-align:center;font-size:0.625rem;line-height:0.75rem}
			}
			
			li.section__logoff{
				//border-left:solid 1px $light-gray;
				font-weight:$global-weight-bold;

			    a{
					padding:0.5rem 0.5rem 0.5rem 0.5rem;
	   				//font-weight:$global-weight-normal;
	   				//span.comnpany-name{padding-left:0.25rem;}
					
					&:hover::after{
						display:none;
					};
					
	   			}
				.label{font-weight:$global-weight-bold;}
				
			}
			li.section__tour{
				border-left:solid 1px $light-gray;

				a.toggle-tour{
					position:relative;
					color:$medium-gray;
					padding-top:0.75rem;
					padding-bottom:0;
					&::before{content:"Tour";font-size:0.75rem;position:absolute;top:0;left:0;right:0;text-align:center;}
				}
				a.toggle-tour__active{
					color:$black;
				}
			}
			
			li.section__order{
				//span{color:$primary-color;padding-left:0.5rem;}
				span.counter{right:auto;left:1rem;}
				span.geomiles-count{padding-left:0.375rem;}
				i{width:18px;height:18px;display:inline-block;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Laag 1' viewBox='0 0 512 512'%3E%3Cpath d='m176 370.33 242.72-242.64L310.17 19.14 67.49 261.82 176 370.33z' style='stroke-width:0'/%3E%3Cpath d='M180.75 45.62h107.82v316.75H180.75z' style='fill:%23fff;stroke-width:0' transform='rotate(-135 234.663 203.993)'/%3E%3Cpath d='M72.3 282.64 16.26 410.19s7.73 13.14 8.89 12.75 132.19-57.98 132.19-57.98l-85.03-82.33Z' style='fill:%23fff;stroke-width:0'/%3E%3Cpath d='m67.34 261.67-4.25 10.22L1.34 415.94c-2.04 4.8-.97 10.38 2.71 14.07l3.53 3.53c3.71 3.71 9.3 4.77 14.07 2.71l144.04-61.75 10.22-4.25L67.34 261.68Zm38.81 120.28-8.01 3.43-32.05 13.74-8.01 3.43-30.8 13.2c-.75.32-1.65.14-2.22-.43l-2.77-2.77c-.59-.59-.75-1.47-.43-2.22l13.2-30.8 3.43-8.01 13.74-32.05 3.43-8.01 13.74-32.05 68.81 68.81-32.05 13.74ZM269.03 390.55l242.72-242.64L403.2 39.37 160.52 282.05l108.51 108.5z' style='stroke-width:0'/%3E%3Cpath d='M273.78 65.84H381.6v316.75H273.78z' style='fill:%23fff;stroke-width:0' transform='rotate(-135 327.693 224.22)'/%3E%3Cpath d='m165.33 302.87-56.04 127.55s7.73 13.14 8.89 12.75 132.19-57.98 132.19-57.98l-85.03-82.33Z' style='fill:%23fff;stroke-width:0'/%3E%3Cpath d='m160.37 281.9-4.25 10.22-61.75 144.04c-2.04 4.8-.97 10.38 2.71 14.07l3.53 3.53c3.71 3.71 9.3 4.77 14.07 2.71l144.04-61.75 10.22-4.25L160.37 281.9Zm38.81 120.28-8.01 3.43-32.05 13.74-8.01 3.43-30.8 13.2c-.75.32-1.65.14-2.22-.43l-2.77-2.77c-.59-.59-.75-1.47-.43-2.22l13.2-30.8 3.43-8.01 13.74-32.05 3.43-8.01 13.74-32.05 68.81 68.81-32.05 13.74Z' style='stroke-width:0'/%3E%3C/svg%3E");}
			}
			li.section{
				
				.menu__secondary{
					position:absolute;
					font-size:0.875rem;
					left:0 !important;right:0 !important;top:100%;min-width:0;
					margin-top:0.75rem;
					border:none;
					box-shadow: 0 0.25rem 0.125rem -2px rgba($black,0.25);
					//box-shadow: 0 0.125rem 0.125rem rgba(0,0,0,0.35);
					border-top:solid 1px $light-gray;

					a{padding:0.7rem 1rem;}
					i{float:right;}
				}
				
			}
			
		
		}
		
		.top-bar-right{}
	}
			
	
	@include breakpoint(medium down)
	{
		
	//	position:fixed;
	//	box-shadow:0 0 1.5rem rgba($black,0.25);
	//	z-index:100;
		
		
		.top-bar{
			.top-bar-right,
			.top-bar-left{
				flex: 0 0 100%;
				max-width: 100%;
			}
			
			.top-bar-left{
				
			}
			
			.top-bar-right{
				min-height:100vh;
				ul{margin:3rem 0 1.5rem 0;}
				ul li{border-bottom:solid 1px rgba($white,0.1);text-align:center;}
				ul li:last-child{border:none;margin-left: 0;background:none;}
				ul li a{font-size:1.25rem;margin:0;display:block;padding:1.5rem 0;background:none;}			
			}
			
		}
		
		

		
	}
	

}