/*
 * top bar 
 */
#header{
	position:fixed;width:100%;z-index:200;transition: all 0.5s;
	
	.top-bar{background:none;width:100%;z-index:250;transition: all 0.5s;padding:1em;transition: all 0.5s;}

	.top-bar-left
	{
		//padding-left:0.5em;
		.logo-primary{display:block;float:left;height:4em;}
		.logo-primary svg{position:relative;fill:$white;width:auto;height:100%;display:block;transition: all 1.5s;}
		
	}
	
	.top-bar-right{
		
		ul{background:transparent;}

		li{position:relative;}
		li::after{content:"";border-right:solid 1px rgba($white,0.25);padding-left:1rem;position:absolute;right:0;top:0%;height:100%;}		
		li:nth-child(4)::after,
		li:nth-child(5)::after,
		li:last-child::after{display:none;}
		
		li.search{display:none;}
		
		.dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after{right:10px;border-color: $white transparent transparent;}

		a{color:$white;font-weight:400;@include font-for-header(700);text-transform:uppercase;font-size:1.25rem;position:relative;}
		a.current{color:$primary-color;}
		a:hover{color:$primary-color;}


		a.toggle-search{display:block;float:right;}
		a.toggle-search > svg{fill: $white;width:1.25rem;height:1.25rem;overflow:hidden;}
		
		.menu.is-dropdown-submenu{background:$white;}
		.menu.is-dropdown-submenu a{color:$secondary-color;}
		
		
		li:nth-child(5) a{@include button-style();}
		
	}
	
}


/*
 * header has scrolled 
 */	
#header.has-scrolled,
#header.no-header-transition
{
	background:$white;@include has-shadow();
	
	.top-bar-left{
		.logo-primary{}
		.epact-pink{fill:$primary-color;}
		.epact-gray{fill:$secondary-color;}
	}
	
	.top-bar-right{
		a{color:$black;}
		li::after{border-color:$light-gray;}
	}
	
	a.toggle-search > svg{fill: $primary-color;}
	
	a.current{color:$primary-color;}
	
	.dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after{right:10px;border-color: $primary-color transparent transparent;}
	
	.toggle-navigation span{background:$black;}
	
}

#header.no-header-transition + div.header-spacer{height:6em;}


/*
 * search 
 */	
.search-site{
	
	background:$white;
	transition: max-height 0.5s;  
	overflow: hidden;
	max-height: 0;
	position:relative;
	z-index:300;
	&.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:2rem;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;}	
	
}