.oc-landingpageFeature {
	display: table;
	width: 100%;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid #c7dfe9;
	table-layout: fixed;
}

.featureImageContainer,
.featureBody {
	display: table-cell;
	vertical-align: top;
}

.featureImageContainer,
.featureImage {
	width: 80px;
}

.featureImage {
	display: block;
	margin-bottom: 0;
}

.featureBody {
	vertical-align: middle;
	width: 100%;
}

.featureText {
	overflow: hidden;
	padding-left: 15px;
}

/** optimize type */

.oc-landingpageFeature h2 {
	font-size: 22px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.oc-landingpageFeature h3 {
	margin-top: -.8em;
	margin-bottom: 1.1em;
}

@media screen and (min-width: 650px) {
	.featureImageContainer,
	.featureImage {
		width: 170px;
	}

	.featureBody {
		vertical-align: top;
	}

	.featureText {
		padding-left: 40px;
	}
}

@media screen and (max-width: 649px) {
	.oc-landingpageFeature h3 {
		margin-bottom: 0;
	}

	.oc-landingpageFeature p {
		display: none; /** don't show the description on mobile phones */
	}

	/**
	 * Change the button to an arrow on mobile phones
	 * todo: maybe make generic?
	 */

	.featureText {
		margin-right: 25px; /** Make room for the arrow */
	}

	.oc-landingpageFeature .button {
		visibility: hidden;
		position: absolute;
		right: 0;
		top: 50%;
		width: 20px;
		height: 20px;
		margin-top: -22px;
		padding: 0;
		overflow: hidden;
		text-align: center;
		transition: right .2s;
	}

	.oc-landingpageFeature .button:before {
		font-family: "icons";
		font-style: normal;
		font-weight: normal;
		speak: none;
		display: inline-block;
		text-decoration: inherit;
		width: 1em;
		margin-right: 0;
		text-align: center;
		font-variant: normal;
		text-transform: none;
		line-height: 1em;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		content: '\21d2';
		visibility: visible;
		color: #1586be;
	}

	/** Hover styling */
	.oc-landingpageFeature:hover h2,
	.oc-landingpageFeature:hover .button:before {
		color: #c6285f;
	}

	.oc-landingpageFeature:hover .button {
		right: -4px;
	}
}