body{
	font-family: $primary-font;
	font-weight: 300;
	font-size: 15px;
	line-height: 24px;
	color: $body-color;
}

.site-header{
	z-index: 9999;
	position: relative;

	.header-content{
		background: white;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;

		@include clearfix;
	}

	.branding{
		padding: 30px 0 30px 40px;
		float: left;
		margin-right: 50px;

		@media screen and (max-width: 990px){
			padding: 20px 0;
			margin:0 auto;
			float: none;
			position: relative;
			width: 250px;
		}
		@media screen and (max-width:640px){
			float: left;
		}
	}
	.main-navigation{
		float: left;
	}
	.social-links{
		float: right;
		text-align: right;
		padding: 45px 20px 20px 0;

		@media screen and (max-width:990px){
			padding: 15px 20px 20px;
		}
		@media screen and (max-width: 640px){display: none}

	
	}

}
.slider-collapse{
	.site-header{
		position: absolute;
		width: 100%;
		top:0;
	}
}

.branding{
	.logo{
		float: left;
		margin-right: 20px;
	}
	.site-title,.site-description{display: table}
	.site-title{
		font-size: 1rem;
		margin: 5px 0 0;
		a{
			color: inherit;
			text-decoration: none;
		}
	}
	.site-description{ 
		text-transform: uppercase;
		@include em(10);
	}

}

.main-navigation{
	@media screen and (max-width:990px){margin-left: 20px}
	@media screen and (max-width:640px){
		float: right!important;
		margin-top:30px;
	}

	.menu-toggle{
		border: none;
		background: none;
		font-size: 18px;
		display: none;
		outline: none;

		@media screen and (max-width:640px){
			display: block;
			margin-right: 15px;
		}
	}
	.menu{
		list-style: none;
		margin:0;
		padding: 0;
		
		@media screen and (min-width:641px){
			display: block!important;
		}
		@media screen and (max-width:640px){
			display: none;
			position: absolute;
			top: 80px;
			left:20px;
			right:20px;
			background: white;
			box-shadow: 0 5px 10px rgba(0,0,0,.2);
		}

		li{
			display: inline-block;

			@media screen and (max-width:640px){ display: block }
			a{
				padding: 50px 10px;
				display: block;
				text-transform: uppercase;
				font-weight: 700;
				text-decoration: none;
				color: inherit;
				transition: .3s ease;
				@include em(12);

				@media screen and (max-width:990px){
					padding: 20px 10px;
				}
				@media screen and (max-width:640px){
					padding: 20px 30px;
				}
			}

			&.current-menu-item,&:hover{
				a{color: $accent-color;}
			}
		}
	}
}

.breadcrumbs{
	background: $secondary-color;
	padding:5px 10px;
	border-radius: 3px;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 700;
	a{
		text-decoration: none;
		color: inherit;
		padding: 0 10px;
		display: inline-block;
	}
	span{
		display: inline-block;
		padding: 0 10px;
		color: $accent-color;
	}
}