header{
	position:fixed;
	left:0;right:0;top:0;
	width:100%;
	z-index:1000;
	
	@include breakpoint(medium down) {
		background:$white;
		box-shadow:0 0 1.5rem rgba($black,0.5);
		&::after{display:none;}
	}
//	.midnightHeader.green{
//		.top-bar-right a{color:$secondary-color;}
//	}
	
	
	&::after{
		content:"";
		position:absolute;
		top:0;left:0;right:0;
		background: rgb(37,47,44);
		background: linear-gradient(0deg, rgba(37,47,44,0) 25%, rgba(37,47,44,1) 100%);
		height:10rem;
	}
	
	.top-bar{

		background:none;
		width:100%;
		padding:0 0.75rem;
		z-index:1000;
		position:relative;
		@include animate();
	
		/*
		 * left 
		 */
		.top-bar-left{
			
			
			position:absolute;
			top:0;
			left:50%;
			transform:translateX(-50%);
		    flex: 0 1 auto;
		    max-width: 100%;
			z-index:10;
		
			@include breakpoint(medium down) {
				position:relative;
				flex: 0 0 100%;
				max-width: 100%;
				transform:none;
				left:0;
				top:0;
				
			}
		
		
			.logo{
				
				display:block;
				position:relative;
				background:$white;
				padding:1.5rem;
				border-radius:0 0 0.5rem 0.5rem;
				box-shadow:0 0 3rem rgba($black,0.5);
				margin:auto;
				
				svg{
					position:relative;
					display:block;
					
					height:6rem;display:block;
					@include animate();						
				
				}
				
				@include breakpoint(medium down) {
					width:6rem;
					padding:0.75rem 0;
					box-shadow:none;
					svg{height:4rem;}
				}
			
			
			}
			.toggle-main-navigation{
				
				position:absolute;top:1.5rem;right:0;
				margin-top:0.375rem;
				
				.toggle-menu{
	
					
					width:2rem;height:2rem;
					padding:0;
					transform:rotate(0deg);
					cursor:pointer;
					@include animate();

					span{display:block;position:absolute;height:0.125em;width:100%;background:$black;opacity:1;left:0;transform:rotate(0deg);@include animate();}
					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%;}

				}
			}
			
		}
		
		
		/*
		 * right
		 */
		.top-bar-right{
		
			padding:1.5rem 0;
		    max-width: 100%;
			flex: 0 0 100%;
			overflow:hidden;
			
			//.menu:not(.submenu) > li:nth-child(5){margin-right:2rem;}
			.menu:not(.submenu){
				transform:translateX(1rem);
				width:100%;
			    > li:nth-child(3){
			   		margin-right:13rem;
					@include breakpoint(medium down) {
						margin:0;
					}
			   	}
				
				@include breakpoint(medium down) {
					transform:translateX(0);
				}
			}
			
			
			a{
				color:$white;
				@include trajan-font();
				
				@include breakpoint(medium down) {
					color:$black;
				}
			}
			
			.menu{
				justify-content: center;background:none;
				
				@include breakpoint(medium down) {
					text-align:center;
					li{border-bottom:solid 1px $light-gray;}
					li:last-child{border:none;}
				}
			}
			
			/*.menu ul.submenu{
			
				li{text-align:center;border-bottom:solid 1px $light-gray;}
				li:last-child{border:none;}
				li a{display:block;width:100%;text-transform:none;font-weight:$global-weight-normal;}
				@include breakpoint(large) {
					left:50% !important;
					position:absolute;
					transform:translateX(-50%);
					margin-top:1.5rem;
				}
				
				@include breakpoint(medium down) {
					margin-top:0;
				}
			}*/
			
			
		
		}
		
				
		
	}
	
	&.is-stuck{
		z-index:15;
		.top-bar{
			
			box-shadow:0 0.25rem 1rem rgba($black,0.125);
		}
		
		.top-bar-left .logo{	
			
		}
	}  
	&.sticky{z-index:20;}

}