/*
 * Header
 */
.header{
	
	z-index:100;
	width:100%;
	top:0;
	left:0;
	right:0;
	background:$white;
	border-top:solid 1rem $black;
	@include animate();
	@include max-width-container();
	

	/*
	 * Top bar 
	 */
	.top-bar{
		
		//@include max-width-container();
		margin:auto;
		background:transparent;
		width:100%;
		padding:1.5rem 1.5rem 0 1.5rem;
		z-index:1000;
		position:relative;
		align-items: end;
		@include animate();
		
		@include breakpoint(medium down) {
			padding:1.5rem 0 0 0;
		}
		
		/*
		 * left 
		 */
		.top-bar-left{
		
			.logo{
				display:block;
				height:7rem;
				width:7rem;
				position:relative;
				z-index:100;		
				img{
					position:absolute;
					display:block;
					height:8rem;
					display:block;
					
				}
			
				@include breakpoint(medium down) {
					height:4.5rem;
					img{height:6rem}
				}			
			
			}
			
			.toggle-main-navigation{position:absolute;top:2.25rem;right:0;}
	
			// toggle navigation
			.toggle-menu{
	
				float:right;margin:0;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%;}

			}
			
			
		}
		
		
		/*
		 * right
		 */
		.top-bar-right{
						
			ul.menu:not(.submenu){
				background:none;
				margin-bottom:0.75rem;
				background:$white;
				
				&::after{
					content:"";
					background:$white;
					left:-1.5rem;
					right:-1.5rem;
					bottom:-1.75rem;
					height:1.5rem;
					position:absolute;
				}
				> li{
					
					padding-right:0rem;
					
					@include breakpoint(large up){
						position:relative;
						&:last-child::after{display:none;}
						&::after{
							height:1rem;
							content:"•";
							display:block;
							position:absolute;
							right:-0.125rem;top:0.5rem;
						}
					}
					
				}
				
				li a{
					line-height:1.5rem;
					padding:0.5rem 0.75rem;
					font-weight:$global-weight-bold;
					color:$black;
					text-align:center;			
								
										
					&.is-active{color:$primary-color;}
					
					@include breakpoint(large up){
						+ ul{margin:0 0 1.5rem 0;}
						+ ul li:last-child{border:none;}
						+ ul li a{font-weight:400;}
					}
					&.link__active{color:$primary-color}

				}
						
					
			}
				
			@include breakpoint(medium down) {
				//margin:1.5rem 0;
			}		
			
		}

		
	}
	
}

/*
.header__has-scrolled,
.header__navigation-open{
	
	&::before{display:none;}
	
	.top-bar{
		background:$white;
		box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.125);
		
		.top-bar-left{
			.logo svg{
				.st0{fill:$secondary-color}
				.st1{fill:$primary-color}
				.st2{fill:#0c54a0}
			}
		}
		.top-bar-right{
			ul li a{
				color:$secondary-color;
				&:hover{color:$primary-color;}
				&:hover::after{border-bottom:solid 0.25rem $primary-color;}
			}
	 		li.search-site{
		
	 			label{color:$light-gray !important;}
	 			input{
	 				background-color: $white !important;
	 				box-shadow:inset 0 0 0.5rem $light-gray !important;
	 				border:solid 1px $light-gray !important;
	 			}
			
	 		}
		}
		
		
	}
	
}*/