/*
 * top bar 
 */
#header{z-index:200;background:$white;@include box-shadow(0.25em,0.25em);}

.top-bar{
	background:$white;width:100%;z-index:250;padding:0;transition: all 0.5s;padding:1rem 1rem;
	
	.top-bar-left{
		
		padding:0.5em 0;
		
		.logo-primary{}
		.logo-primary svg{height:4rem;margin:0rem 0 0rem 0;display:block;@include amimate-element();}
		
	}
	
	.top-bar-right{
		
		ul{background:$white;}
		ul ul{padding:0.5em 0;margin-top:2em;}
		li{position:relative;margin:0 0.25em;}
		> ul.menu > li:before{content:"";border-right:solid 1px $light-gray; padding:0 0.25em;position:absolute;top:0;right:-0.25em;height:100%;}
		li:last-child::before{display:none;}
		
		a{color:$black;font-weight:400;font-size:0.9375rem;}
		a.current{font-weight:bold;color:$primary-color;}
		a:hover{color:$primary-color;}
		
		a::after{right:10px !important;}
		
		a.toggle-search{display:block;float:right;padding:0.5em;}
		a.toggle-search > svg{fill: $primary-color;width:1.5em;height:1.5em;overflow:hidden;}
		
		a[href="Offerte-aanvragen"]{background-color:$primary-color;color:$white;border-radius:$global-radius;margin-left:1rem;}

		.contact-us{
			padding:0 0.375rem 0 0;
			margin-bottom:1rem;
			text-align:right;
			
			.questions{font-weight:bold;font-size:1.25rem;}
			a{position:relative;border-left:solid 1px $light-gray;margin-left:0.5rem;padding-left:0.5rem;}
			a i{color:$medium-gray;margin-right:0.25rem;}
			
			.call{}
			.wa{}
			.email{}
		}
		
		
	}
	
		
	
}
.dropdown-menus{
	display:none;
	border-top:solid 1px $light-gray;
	
	.dropdown-pane {
		left:0 !important;
		right:0 !important;
		width:100%;
		display:block !important;
		visibility: visible !important;
		border:none;
	}
	
}


/*
 * search 
 */	
.search-site{
	background:$white;
	transition: max-height 0.5s;  
	overflow: hidden;
	max-height: 0;
	position:absolute;
	z-index:300;
	width:100%;
	@include box-shadow(0.125em,0.25em,0,0.25em);
	
	&.search-visible{ max-height: 300px;}
	> div{padding:1em;border-top:solid 1px $light-gray;}
	&::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;border-top:solid 1px $light-gray;}
	
	
	form{position:relative;}
	input[type="text"]{width:100%;padding:0.375em 2em !important;border:none;font-size:1.25em;max-width:none;margin-bottom:0;box-shadow:none;height:auto;}
	button{border:none;margin:0;background:none;float:left;padding:0;width:2em;position:absolute;top:0.125em;left:0;background:none !important;border:none !important;margin-top:0.125em !important;}
	button:hover{color:$primary-color;background:none;}
	svg{fill: $primary-color;}	
	.close-search{position:absolute;top:0.5em;right:0;width:1.5em;height:1.5em;cursor:pointer;padding:0;}
	.close-search:hover{  fill: #941b80;}	
	
}