header{

	z-index:1000;
	box-shadow:0 0 1rem rgba($black,0.125);
	
	@include breakpoint(medium down){
		position:fixed;
		top:0;left:0;right:0;
	}
	.top-bar{

		//margin-top:1rem;
		background:$white;
		width:100%;
		padding:0.5rem;
		z-index:1000;
		position:relative;
	    flex-wrap: wrap;
		
		@include animate();
	

		.top-bar-left{
			padding-left:0.75rem;			
			.logo{
	
				display:block;
				height:3.5rem;
				position:relative;
				margin-bottom:0.75rem;
				
				svg{
					position:relative;
					display:block;
					height:100%;display:block;
					@include animate();						
				
				}
			
			
			}
			.toggle-main-navigation{
				
				position:absolute;
				top:1.25rem;right:1rem;
				margin-top:0.375rem;
				
				.toggle-menu{
	
					float:right;position:relative;width:2rem;height:2rem;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:0rem;}
					span:nth-child(2),
					span:nth-child(3){top:0.75rem;}
					span:nth-child(4){top:1.5rem;}
		
					&.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{
			
	
			
			ul{
				li{border-right:solid 1px $light-gray;}
				li:last-child{border:none;}
				a.link{font-weight:400;}
				a.link__active{
					color: $secondary-color;
				}
			}
			.submenu.is-dropdown-submenu{
				
				background-color:$secondary-color;
				margin-top:0.75rem;
				left:50% !important;
				margin-left:-128px !important;
				border-left:solid 0.25rem $white;
				border-right:solid 0.25rem $white;
								
				&::before{
					background:transparent url(/images/pointer-top-blue.png) no-repeat 50% 100%;
					background-size:1.5rem auto;
					top:-25px;content:"";display:block;height:25px;left:50%;margin-left:-100px;position:absolute;width:200px;}
				
				li{border:none;border-bottom:solid 1px $white;}
				a{color:$white;text-align:center;}
				
			}			
			
			@include breakpoint(medium down){
				margin:1.5rem 0;
				ul{text-align:center;}
				ul li{border-bottom:solid 1px $light-gray;border-right:none;}
			}
		
		}
				
		
		@include breakpoint(medium down){
			margin-top:0;
			padding-bottom:0;
			
			.top-bar-left{
				
		
		
			}
			

		}
	}
	
	&.is-stuck{z-index:100 !important;}  
	&.sticky{z-index:200 !important;}

}