header{

	z-index:1000;
	.top-bar{

		//margin-top:1rem;
		background:$white;
		width:100%;
		padding:0.5rem;
		z-index:1000;
		position:relative;
	    flex-wrap: wrap;
		
		@include animate();
	
		/*
		 * left 
		 */
		.top-bar-left{
			
			padding:0.5rem;
			
			.logo{
	
				display:block;
				float:left;
				height:2.5rem;
				position:relative;
				transform:translateY(-0.5rem);
				
				svg{
					position:relative;
					display:block;
					height:3.5rem;display:block;
					@include animate();						
				
				}
			
			
			}
			.toggle-main-navigation{
				
				float:right;
				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%;}

				}
			}
			
		}
		
		
		/*
		 * right
		 */
		.top-bar-right{
			
			padding-right:0.5rem;
			
			ul{
				
				//background:none;
						
				a{
					color:$dark-gray;
					position:relative;
					font-size:1rem;
					padding-left:2rem;
				}
				.submenu{
					a{padding:$global-menu-padding;}
					@include breakpoint(large up){
						border-top:solid 1px $light-gray;
						margin-top:1rem;
						text-align:center;
						margin-left:50%;
						transform:translate(-50%,1px);
						box-shadow:0 1rem 1rem rgba($black,0.125);
					}

				}
				
				a.link__button{
					@include button();
					//@include gradient();
					
					font-weight:$global-weight-bold;
					padding:0.5rem 1rem;
					margin:0.2rem 0 0.2rem 1rem;
					background: url(/images/icons/locked.svg) no-repeat 0.75rem 50%;
					background-size:0.75rem;
					padding-left:2rem;

					&::before{content:"";}
				}
					
				a.link__active::after{
					@include breakpoint(large up){
						content:"";bottom:calc(-1rem - 1px);left:2rem;right:1rem;border-bottom:solid 2px $primary-color;z-index:1;position:absolute;
					}
				}
			
				@include breakpoint(medium down){
					
					padding-right:0;
					
					li{
						border-bottom:solid 1px rgba($light-gray,0.5);
						text-align:center;
						&:last-child{border:none;}
					}
					
					li a{
						//font-size:1.125rem;padding:1rem;
						&.is-active{font-weight:400;}
					}
					
					
					li ul{
						margin:0 0 1.5rem 0;
						background:$white;
						a{font-size:1rem;}
					}
					li ul li:last-child{border:none;};
					
					&::after{
						top:auto;
						bottom:-0.5rem;
						border:none;
						width:100%;
						background-position:50% 50%;
						background-size: auto 1.5rem;
						height:3rem;
					}
					
				}
							
				
		
			}
			
			
		}
		
		
		.top-bar-left,
		.top-bar-right{
			flex: 0 1 auto;
			ul li a.lang{padding:0.7rem 0.5rem;color:$medium-gray;}
			
			@include breakpoint(medium down){
				flex: 0 0 100%;
				max-width: 100%;
				&.top-bar-right__secondary{
					display:none;
				}
			}
		}
		.top-bar__center{
			margin:0;
			padding: 0.5rem;
			
			ul.large-horizontal > li:last-child{
				display:none;visibility:hidden;
				
				@include breakpoint(medium down){
				
					display:block;
					visibility:visible;
				
					a{
						@include button();
						font-weight:$global-weight-bold;
						padding:0.5rem 1rem;
						margin:0.75rem 0 0.75rem 1rem;
						background: url(/images/icons/locked.svg) no-repeat 0.75rem 50%;
						background-size:0.75rem;
						padding-left:2rem;
						&::before{content:"";}
					}
				}
				
			}
			
			@include breakpoint(medium down){
				&::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:$white;height:100vh;z-index:-100;}
			}
			
		
		}
		
		
		@include breakpoint(medium down){
			margin-top:0;
			//padding-top:1.5rem;
			padding-bottom:0;
			
			.top-bar-left{
				
				.logo{transform:translateY(-0.25rem);height:auto;}
				.logo svg{height:3rem}
			}

		}
	}
	
	&.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;}

}