.oc-landingpageHighlight {
	background-color: #133e8d;
}

.highlightImageContainer {
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover; /** In case the text is higher then the photo, still make it look good */
}

/** Claim the right proportions (1:2) for the image. */
.highlightFakeImage {
	padding-bottom: 50%;
	height: 0; /** Trigger hasLayout in IE */
}

.highlightTexts {
	padding: 20px;
}

.highlightBody h2,
.highlightBody h3 {
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.highlightBody h2 {
	font-size: 21px;
	color: #fff;
}

.highlightTexts__titleItem {
	display: block;
}

.highlightTexts__titleItem:before {
	content: "\00b7";
	position: absolute;
	margin-left: -.5em;
	opacity: .7;
}

.highlightBody h3 {
	margin-bottom: .2em;
	font-size: 17px;
	color: #fec34b;
}

@media screen and (min-width: 650px) {
	/**
	 * Place text next to picture on larger screens
	 * align text in the vertical middle of the picture
	 */

	.oc-landingpageHighlight {
		display: table;
		width: 100%;
	}

	.highlightImageContainer,
	.highlightBody {
		display: table-cell;
		vertical-align: middle;
	}

	.highlightImageContainer {
		width: 56.92%;
	}

	.highlightTexts {
		box-sizing: border-box;
		padding: 8% 20px 12% 10%;
		max-width: 460px;
	}
}

/** Optimize text sizes for various screen sizes */

@media screen and (min-width: 760px) {
	.highlightBody h2 {
		margin-bottom: 1.3em;
		font-size: 26px;
	}

	.highlightBody h3 {
		margin-bottom: .5em;
	}
}

@media screen and (min-width: 980px) {
	.highlightBody h2 {
		font-size: 32px;
	}
}