/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
#masthead {
	background: $color-white;
	width: 100%;

	.branding-wrapper {
		height: rem(85);
		margin: 0 auto;
		max-width: rem(1170);
		padding: rem(20) 0;

		@include media(768px) {
			display: flex;
			align-items: center;
		}

		@include media(1070px) {
			padding: 0;
		}
	}
}

// Header Image
.header-image img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

// Site Branding
.site-branding {
	float: left;
	margin-right: rem(20);
	text-align: left;
	text-transform: uppercase;
}

.site-title {
	font-family: $font-serif;
	font-size: rem(30);
	font-weight: 700;
	letter-spacing: rem(1);
	line-height: $line-height-body;
	margin: 0;
	padding: 0;

	a {
		color: $brand-color;

		&:hover {
			color: $color-dark;
		}
	}

	@include media(max-width 1170px) {
		padding-left: rem(20);
	}

	@include media(max-width 900px) {
		padding: 0 rem(20);
	}

	@include media(768px) {
		margin-right: rem(14);
	}
}