#masthead
{
	background: #f2f2f2;
	transition: transform .5s ease, opacity .25s ease;

	color: #09172d;
	font: 700 17px/1 "Barlow Condensed", sans-serif;
	letter-spacing: .09em;
	text-transform: uppercase;
	vertical-align: middle;

	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	padding: 13px calc(50vw - (1176px / 2) + 30px);
	position: fixed;
	 top: 0;
	 left: 0;
	 z-index: 99;

	height: 100px;
	width: 100%;
}

#masthead:after
{
	background: #f2f2f2;

	position: absolute;
	 top: 0;
	 left: 0;
	 z-index: 0;

	height: 100%;
	width: 100%;

	content: "";
	pointer-events: none;
}

@media only screen and (min-width: 1601px)
{
	#masthead
	{
		padding-right: calc(50vw - (1176px / 2));
		padding-left: calc(50vw - (1176px / 2));
	}
}

@media only screen and (min-width: 1177px)
{
	body.hide-masthead:not(.masthead-sub-menu-open) #masthead
	{
		transform: translateY(-100%);
	}
}

@media only screen and (max-width: 1176px)
{
	#masthead
	{
		justify-content: space-between;
		padding: 0 30px;

		height: 55px;
	}

	#masthead:before
	{
		background: #000;
		opacity: .3;
		transition: opacity .25s ease;

		position: fixed;
		 top: 0;
		 left: 0;
		 z-index: 2;

		height: 100%;
		width: 100%;

		content: "";
	}

	body:not(.show-mobile-menu) #masthead:before
	{
		opacity: 0;

		pointer-events: none;
	}

	body.hide-masthead:not(.masthead-sub-menu-open):not(.force-sticky-masthead) #masthead
	{
		transform: translateY(-100%);
	}
}

#masthead .site-branding
{
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	flex-flow: row nowrap;
	justify-content: flex-start;
	z-index: 4;

	height: 100%;
}

#masthead .site-branding .site-title
{
	clip: unset !important;
	
	font: normal 700 18px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	vertical-align: middle;

	display: inline-block;
	margin-left: 20px;
	position: static !important;

	max-width: 225px;
}

#masthead .site-branding .custom-logo
{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	max-height: 100%;
}

#masthead .site-branding img
{
	width: 75px;
	height: 75px;
}

@media only screen and (max-width: 1176px)
{
	#masthead .site-branding
	{
		margin-right: auto;
		margin-left: -5px;
	}

	#masthead .site-branding .site-title
	{
		font-size: 14px;
		font-weight: 500;
		letter-spacing: .05em;
		line-height: 14px;

		margin-left: -5px;

		max-width: 200px;
	}

	#masthead .site-branding .custom-logo
	{
		box-sizing: border-box;
		padding: 5px;
		margin: 0; 
		
		height: 100%;
	}

	#masthead .site-branding
	{
		margin-right: auto;
		margin-left: -5px;
	}
}