.site-header {
	margin-bottom: 0 !important;
	padding-top: 0;
	background: none;
	border-bottom: none;
	position: relative;
	padding-bottom: 0;

	.site-branding {
		float: none;
		margin-bottom: $globalMargin;

		@include responsive('>', 'tablets', (
			width: 21.7391304348% !important,
			float: left,
			position: relative,
			left: 30px,
			top: 20px,
			clear: none,
			z-index: 1
		));

		.logo {
			margin: 0 auto;
			
			@include responsive('>', 'tablets', (
				margin: 0
			));
		}
	}

	.search-input,
	.page-intro {
		clear: left;
	}

	.col-full {
		margin-left:0;
		margin-right:0;
		padding: 0;
		max-width:none;
	}
}

.header-title {
	margin-bottom: $globalPadding;
	font-size: 2.135em;
	line-height: 1em;
	font-weight: bold;
	text-align: center;
	color: white;
	text-shadow:4px 4px 10px rgba(0,0,0,0.2),
				-4px -4px 10px rgba(0,0,0,0.2),
				-4px 4px 10px rgba(0,0,0,0.2),
				4px -4px 10px rgba(0,0,0,0.2);

	&:first-child {
		margin-bottom: 15px;

		@include responsive('>','phones', (
			font-size: 3.6em
		));
	}

}


.header-inner {
	position: relative;
	height: 0;
	margin-bottom: $globalMargin;

	&:after {
		display: block;
		content: '';
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		padding-top: 3.8%;
		background-image: url(./images/curve.svg);
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.search-input {
		z-index: 1;
		position: absolute;
		left: 50%;
		bottom: 20%;
		transform: translateX(-50%);
		width: 100%;
		margin: 0 auto 20px;

		@include responsive('>', 'phones', (
			width: 80%
		));

		@include responsive('>', 'tablets-l', (
			bottom: 30%,
			width: 100%
		));
	}

	// height must be set for parent and child for the carousel
	&--carousel,
	&--carousel .header-inner__fill {
		height: 280px;

		@media (max-width: 500px) {
			height: 180px;
		}
		
		@include responsive('>', 'tablets', (
			height: 350px
		));

		@include responsive('>', 'tablets-l', (
			height: 525px
		));

		@include responsive('>', 'wide-screen', (
			height: 595px
		));
	}

	&--carousel {
		&:after {
			z-index: 2;
		}
		.header-inner__fill {
			z-index: 1;
			background-position: center 20%;
			background-size: cover;
		}

		@media (max-width: 500px) {
			.bx-wrapper .bx-controls-direction a {
				top: 100%;
			}
		}

	}

	&.small {
		padding-bottom: 66%;
		background-position: center;
		background-size: cover;

		@include responsive('>', 'tablets', (
			padding-bottom: 0,
			height: 450px
		));

		&.products {background-image: url(images/header/bg-products.jpg);}

		&.generic {
			background-color: $colorYellow;
		}

		h1.vcenter {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
	}
}