/*
 * top bar 
 */
#header{
	z-index:1000;position:fixed;top:0;left:0;right:0;transition: all 0.5s;
	padding:0;margin:0;
	background:$white;
	z-index:1000;
	@include has-shadow();
}

.top-bar{
	
	background:transparent;
	width:100%;
	z-index:250;
	padding:0.5em;
	
	a{color:$black;font-weight:400;}
	a:hover{color:$primary-color;}
			
	.top-bar-left{
	
		padding:0.75em;

		// Logo
		.logo-primary{
	
			display:block;
			float:left;
			height:3rem;
			position:relative;
			svg{
				height:100%;display:block;@include animate-element();		
				//*{fill:$white !important;}
			}
			
			@include breakpoint(small only) {
				height:3rem;
			}
		}
	
		// toggle navigation
		.toggle-navigation{
			
			float:right;margin:0;position:relative;width:3em;height:3em;padding:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;
	
			span{display:block;position:absolute;height:0.125em;width:100%;background:$black;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out;}
			span:nth-child(1){top:0.75em;}
			span:nth-child(2),
			span:nth-child(3){top:1.5em;}
			span:nth-child(4){top:2.25em;}
		
			&.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-right{
		
		padding:0.5em;
	
		ul{background:$white;border:none;}	

		li{ 
			//position:relative;
			
			a{
				position:relative;
				background:none;
				text-transform:uppercase;
				font-size:1rem;
				@include font-for-header();
				color:$primary-color;
				&::after{right:10px !important;}
			}
			ul{
				//margin-top:1.5rem;
			}
			ul > li{
				border-bottom:solid 1px $light-gray;
				&:last-child{border:none;}
				a:hover{color:$primary-color;}
			}
			
			a:hover{color:$primary-color !important;}
		}

		> ul > li{border-right:solid 1px $light-gray;}
		> ul > li:last-child{border:none;}
		
		li.social{
			
			
			border:none;
			padding-left:0.75rem;
			a{font-size:1.5rem;color:$secondary-color;padding:0.5rem;}
						
			
		}
			
	}
	
	@include breakpoint(small only) {
		
		text-align:center;
		
		.top-bar-right ul li{border-bottom:solid 1px $light-gray;}
		.top-bar-right ul li:last-child{border:none;}
		.top-bar-right ul li a{padding:1.5remx;}
		.top-bar-right li::after{display:none;}
		
	}	
}


/*
 * header has scrolled 
 */	
#header.has-scrolled,
#header.no-header-transition,
#header.navigation-open
{	
	background:rgba($white,1);
	@include has-shadow(0.125,3rem);
	
	a{color:$secondary-color;}
	a:hover{color:$primary-color;}
	
	.top-bar-left::after{display:none;}

	svg .st1{fill:$secondary-color !important;}
	svg .st2{fill:$primary-color !important;}
	svg .st3{fill:#004f9e !important;}
	
	.toggle-navigation span{background-color:$black;}

}


#header + div.header-spacer
{
	height:5.5em;
}