header{

	position:fixed;
	left:0;right:0;top:0;
	width:100%;
	z-index:1000;
	@include animate();
	
	&.has-scrolled{
		
		.top-bar-ribbon{
			margin-top:-2.25rem;
		}
		
	}
	
	
	.top-bar-ribbon{	
		@include animate();
		background-color:$white;		
		p{
			margin:0.375rem 0;font-size:0.875rem;
			line-height:1.5rem;
			i{color:$primary-color;}
		}

		.cell__social-media p{margin-bottom:0;}		
		.cell__social-media i{font-size:1.25rem;padding-left:0.5rem;}
		
	}
	
	.top-bar{

		background:$white;
		
		padding:1rem 1rem;
		z-index:1000;
		position:relative;
		max-width:$global-width;
		margin:auto;
		margin-top:1.5rem;
		border-radius:$global-radius;
		box-shadow:0 0 1rem rgba($black,0.125);
		@include animate();
	
		&::after{content:"";position:absolute;top:0;bottom:0;right:-25%;width:50%;background:$white;z-index:-1;}
		
		.top-bar-left,
		.top-bar-right,
		.top-bar-center{
			flex: 0 1 auto;
		}
		
		.top-bar-left{
						
			@include breakpoint(medium down) {
				position:relative;
				flex: 0 0 100%;
				max-width: 100%;
				transform:none;
				left:0;
				top:0;
				padding-top:0.375rem;
				padding-bottom:0.375rem;
			}
		
		
			.logo{
				
								
				svg{
					position:relative;
					display:block;
					
					height:3rem;display:block;
					@include animate();						
					
					@include breakpoint(medium down) {
						height:2rem;
						//padding:0.75rem 0;
						padding-left:0.375rem;
					}
			
				}
				
				
			
			}
			.toggle-main-navigation{
				
				position:absolute;top:0rem;right:0.5rem;
				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%;}

				}
			}
			
		}
		
		

			
		/*
		 * center
		 */
		.top-bar-center{
			
			a{
				color:$black;
				font-weight:700;
				font-size:0.875rem;
				padding-top:0.85rem;
			}
		
		}
		
		.top-bar-right{
			a{margin:0;font-weight:700;}
		}
			
				
		
	}
	
	@include breakpoint(medium down)
	{
		position:fixed;
		
		.top-bar-ribbon{display:none;}
		
		&.has-scrolled{background: $white;}
	
		.top-bar{
			margin:0;
			border-radius:0;			
			&::after{display:none;}
						
			.top-bar-right{display:none;}
			.top-bar-right,
			.top-bar-left{
				flex: 0 0 100%;
				max-width: 100%;
			}
		
			.top-bar-left{
				z-index:10;
			}
		
			.top-bar-center{
				min-height:100vh;
				background: $white;
				position: absolute;
				top: 0;
			    right: 0;
			    left: 0;
				  
				
				> div{
					@include vertical-center();
					left:0;right:0;
				}
				
				ul{margin:0;padding:0 2rem;}
				ul li{text-align:center;border:none;}
				ul li:last-child{margin-left: 0;background:none;}
				ul li a{font-size:1.25rem;margin:0;display:block;padding:1.5rem 0;background:none;}			
			}
		
		}
	
	

	
	}

}