.header{
	@include container();
	box-sizing: border-box;
	position: relative;

	display: inline-block;
	// display: flex;
	overflow: visible;
	// flex-direction: row;

	width: 100%;
	height: 110px - 19px;
	padding-bottom: 20px;

	border-bottom: 1px $gray solid;
	min-height: 60px;
	@media screen and (min-width: 0px) and (max-width: 1024px){
		height: 60px;
		padding-left: 3.2679738562%;
		padding-right: 3.2679738562%;
		padding-bottom: 12px;
	}
	&:after{
		font-size: 0;

		display: block;
		visibility: hidden;
		clear: both;

		height: 0;

		content: " ";
	}
	&-logo{
		@include span(2);

		vertical-align: middle;
		img{
			height: 78px;
			width: auto;
		}
		@media screen and (min-width: 0) and (max-width: 1024px){
			@include span(4);
			margin: 0;
			img{
				height: 46px;
				width: auto;
			}
		}
	}
	&-search{
		@include span(6 at 3 of 12);

		position: relative;

		padding: 21px 0 0 0;

		// flex: 1;
		@media screen and (min-width: 0) and (max-width: 1024px){
			display: none;
		}
	}
	&-connect{
		@include span(3 at 9 of 12);

		position: relative;

		// margin-right: span(1) + gutter(4);
		padding: 21px 0 0 0;
		@extend %clearfix;
		// flex: 1;
		@media (max-width: 1024px){
			display: none;
		}
	}
	&-menu{
		display: none;

		flex: 1;
		@media screen and (min-width: 0) and (max-width: 1024px){
			@include span(8 last);
			padding-left: 0;
			padding-right: 0;
			margin-right: 0px;
			display: block;

			text-align: right;
		}
		&-inner{

			display: block;

			height: 32px;

			vertical-align: middle;
		}
	}
	#searchInputBox{
		float: none;
	}
}

.ms-shadow{
	border: 1px $gray solid;
	box-shadow: none !important;
}
.ms-siteicon{
	&-img,
	&-a{
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 100%;
	}
}
#siteIcon{
	line-height: auto;

	width: 100%;
	height: auto;
	margin-right: 0;
	img{
		min-width: 160px;
	}
}

@media screen and (min-width: 0px) and (max-width: 1024px){
	.header{
		// padding-bottom: 10px;
	}
	#s4-titlerow{
		padding-top: 12px;
		height: 60px;
	}
}