.header{
	position:fixed;
	left:0;top:0;right:0;
	z-index:100;
	@include animate();
	
	&::before{
		content:"";
		position:absolute;
		top:0;
		left:0;
		right:0;
		height:7rem;
		z-index:0;
		background: linear-gradient(180deg, rgba(0,0,0,0.8463586118040967) 15%, rgba(0,0,0,0) 100%); 
		@include animate();
	}
	
	.top-bar{padding:1.25rem 0.75rem;}
	.top-bar-left{padding-left:0.75rem;z-index:200;}
	
	.top-bar-left,
	.top-bar-right{
		flex: 0 1 auto;
		margin:0;
	}
	
	.top-bar-right{
		padding-right:0.75rem;
		
		a{color:$white;padding:0.5rem 0.75rem;}
		.button{
			position:relative;
			margin-left:1.5rem;
			padding:0.5rem 1.5rem;
			font-family:$header-font-family;
			text-transform:uppercase;
			font-weight:$header-font-weight;
			font-size:0.875rem;
			&::before{content:"";position:absolute;top:0;bottom:0;left:-1.125rem;border-left:solid 1px $white;}
		}
		
		@include breakpoint(small only){
			padding-right:0;
		}
		
	}
	
	.top-bar__center{
		
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		flex: 0 1 auto;
		max-width: 100%;
		z-index: 10;
		padding-right:0;

		a.logo{
			display: block;
			position: relative;
			margin: auto;
			padding: 0.75rem 1.5rem;
			text-align: center;
		
			svg{
				display:block;margin:auto;height:4.5rem;
				@include breakpoint(small only){
					height:3rem;
				}
				@include animate();
				
			}
		}
	
	}

	.toggle-main-navigation{
		
		margin-top:-0.125rem;
	
		.toggle-menu{

			width:1.5rem;height:1.5rem;padding:0;transform:rotate(0deg);transition:.5s ease-in-out;cursor:pointer;margin-top:-0.125rem;

			span{display:block;position:absolute;height:0.125em;width:100%;background:$white;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.625rem;}
			span:nth-child(4){top:1.25rem;}
		
			/*&::after{
				content:"MENU";color:$white;line-height:1rem;margin-left:2rem;
				@include breakpoint(small only){
					display:none;
				}
			}*/
		}
		.toggle-menu__open{
			span{background-color:$black;}
			span:nth-child(1){top:18px;width:0%;left:50%;}
			span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
			span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
			span:nth-child(4){top:18px;width:0%;left:50%;}
			&::after{color:$black;}
		}
	}
	
	
}

.header__has-scrolled{
	background:$black;
	@include has-shadow();
	&::before{display:none;}
	
	.top-bar__center a.logo svg{height:3rem;}
}

.off-canvas{
	.off-canvas-wrapper{
		padding:6rem 3.5rem 3.5rem 3.5rem;
	}	
	
	.menu{
		li.menu-section{border-bottom:solid 1px rgba($light-gray,0.5);}
		li.menu-section:last-child{border:none;}
		
		a{
			color:$black;
			&:hover{color:$primary-color;};
		}
		
		a.section-link{
			position:relative;
			font-size:1.25rem;
			padding:1rem 1rem 1rem 0;

		
		}
		.submenu-toggle{
			top:0;
			height:3rem;
			
			&::before,
			&::after{content:"";
				margin:0;
				display:block;
				position:absolute;
				height:0.0625em;
				width:0.875rem;
				background:$primary-color;
				opacity:1;
				right:0;
				transform:rotate(0deg);
				transition:.25s ease-in-out;
				border:none;
				top:auto;
				bottom:auto;
			}
			&::after{
				transform:rotate(90deg);
			}
			&[aria-expanded=true]{
				&::before,
				&::after{transform: rotate(180deg);}
			}
		}
	}
	.submenu{
		margin-left:0.5rem;
		margin-bottom:1rem;
		
		.link-nested{
			position:relative;
			&:before{content:"-";padding-right:0.75rem;}
		}
	}

	.menu__secondary{
		background:$white;
		position:absolute;
		bottom:2.5rem;left:3.5rem;right:3.5rem;
		a{padding:0;display:block;line-height:1.5rem;}
		
		.social-links{
			font-size:2rem;margin-top:0.375rem;
			a{display:inline;color:$primary-color;}
		}
	}
	
}