.feature {
	width: 100%;
	overflow: hidden;
	margin-bottom: 40px;
}

.tile {
	background: #333;
	background-position: center;
	background-size: cover;
	float: left;
	position: relative;
	height: 180px;
}

.feature > .tile {
	width: 100%;
	height: 360px;
}

.feature > .tile + .tile {
	height: 180px;
	clear: both;
	width: 33.333333%;
}

.feature .tertiary {
	overflow: auto;
	width: 66.66666%;
}

.feature .tertiary .tile {
	width: 50%;
}

.feature .tile {
	color: #fff;
	text-decoration: none;
}
.feature .overlay {
	transition: opacity 0.2s ease;
}
.feature .tile .overlay {
	opacity: 1;
}
.feature .tile:hover .overlay {
	filter: alpha(opacity=50);
	opacity: 0.5;
}

/*** Basic Tile Text/Icon Small First ***/
.feature .tile-text {
	position: absolute;
	line-height: 1.2;
	bottom: 30px;
	left: 40px;
	right: 40px;
	z-index: 11;
	padding-right: 37px;
}
.feature .tile-header {
	display: block;
	font-size: 22px;
	font-family: "AvenirNextDemi", Arial, sans-serif;
}
.feature .tile-category {
	margin: 0 0 15px;
}
.feature .icn-bg-circle {
	background: rgba(255, 255, 255, 0.2);
	display: inline-block;
	width: 32px;
	height: 32px;
	position: relative;
	border-radius: 50%;
	position: absolute;
	bottom: 0;
	right: 0;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.feature .icn-bg-circle svg {
	position: absolute;
	width: 15px;
	height: 15px;
	margin: -8px 0 0 -6px;
	top: 50%;
	left: 50%;
	fill: #fff;
}
.feature .tile:hover .icn-bg-circle {
	background: rgba(255, 255, 255, 0.1);
	transform: scale(1.2);
}

/** Bigger Features **/
.feature > .tile:first-child .tile-text, .feature.wide > .tile:first-child + .tile .tile-text, .feature.wide.tiles3 .tertiary .tile .tile-text {
	padding-right: 63px;
}
.feature > .tile:first-child .tile-header, .feature.wide > .tile:first-child + .tile .tile-header, .feature.wide.tiles3 .tertiary .tile .tile-header {
	font-size: 34px;
}
.feature > .tile:first-child .icn-bg-circle, .feature.wide > .tile:first-child + .tile .icn-bg-circle, .feature.wide.tiles3 .tertiary .tile .icn-bg-circle {
	width: 48px;
	height: 48px;
}
.feature > .tile:first-child .icn-bg-circle svg, .feature.wide > .tile:first-child + .tile .icn-bg-circle svg, .feature.wide.tiles3 .tertiary .tile .icn-bg-circle svg {
	width: 22px;
	height: 22px;
	margin: -10px 0 0 -10px;
}

/**
 * Variations: Different # of tiles
 */
.feature.tiles1 > .tile + .tile {
	display: none;
}

.feature.tiles2 .tile-header {
	font-size: 34px;
}

.feature.tiles1 .tertiary {
	display: none;
}

.feature.tiles2 > .tile,
.feature.tiles2 > .tile + .tile {
	width: 50%;
	height: 360px;
	clear: none;
}

.feature.tiles2 .tertiary {
	display: none;
}

.feature.tiles3 > .tile + .tile {
	width: 50%;
}

.feature.tiles3 .tertiary {
	width: 50%;
}

.feature.tiles3 .tertiary .tile {
	width: 100%;
}

/**
 * Variation: Wide
 */
.feature.wide {
	margin-bottom: 0;
}

.feature.wide .tile {
	height: 360px;
}

.feature.wide > .tile,
.feature.wide > .tile + .tile {
	width: 33.33333%;
}

.feature.wide > .tile + .tile {
	clear: none;
}

.feature.wide .tertiary {
	width: 33.33333%;
	height: 360px;
}

.feature.wide .tertiary .tile {
	width: 100%;
	height: 50%;
}

/**
 * Variations: Wide with differing # of tiles
 */
.feature.wide.tiles1 > .tile {
	width: 100%;
}

.feature.wide.tiles1 .secondary {
	display: none;
}

.feature.wide.tiles1 .tertiary {
	display: none;
}

.feature.wide.tiles2 > .tile {
	width: 50%;
}

.feature.wide.tiles2 .secondary {
	width: 50%;
}

.feature.wide.tiles2 .secondary > .tile {
	width: 100%;
}

.feature.wide.tiles2 .tertiary {
	display: none;
}

.feature.wide.tiles3 .tertiary .tile {
	height: 100%;
}

.feature.wide.tiles3 .tertiary {
	font-size: 34px;
}

.feature.wide .overlay,
.feature.tiles4 > .tile:first-child .overlay,
.feature.tiles3 > .tile:first-child .overlay,
.feature.tiles2 > .tile .overlay,
.feature.tiles1 > .tile .overlay {
	background: url("../img/bg-features-shadow.png") bottom left repeat-x;
	opacity: 1;
}
.feature.wide .overlay.purple,
.feature.tiles4 > .tile:first-child .overlay.purple,
.feature.tiles3 > .tile:first-child .overlay.purple,
.feature.tiles2 > .tile .overlay.purple,
.feature.tiles1 > .tile .overlay.purple {
	background: #9492c8;
	opacity: 0.8;
}
.feature.wide .overlay.blue,
.feature.tiles4 > .tile:first-child .overlay.blue,
.feature.tiles3 > .tile:first-child .overlay.blue,
.feature.tiles2 > .tile .overlay.blue,
.feature.tiles1 > .tile .overlay.blue {
	background: #7ea7cc;
	opacity: 0.8;
}
.feature.wide .overlay.orange,
.feature.tiles4 > .tile:first-child .overlay.orange,
.feature.tiles3 > .tile:first-child .overlay.orange,
.feature.tiles2 > .tile .overlay.orange,
.feature.tiles1 > .tile .overlay.orange {
	background: #eba75c;
	opacity: 0.8;
}
.feature.wide .overlay.green,
.feature.tiles4 > .tile:first-child .overlay.green,
.feature.tiles3 > .tile:first-child .overlay.green,
.feature.tiles2 > .tile .overlay.green,
.feature.tiles1 > .tile .overlay.green {
	background: #2cac87;
	opacity: 0.8;
}

.feature.tiles3 .tertiary .overlay,
.feature.tiles4 .tertiary .overlay,
.feature.tiles3 > .tile:first-child + .tile .overlay,
.feature.tiles4 > .tile:first-child + .tile .overlay {
	background: url("../img/bg-features-shadow.png") bottom left repeat-x;
}
.feature.tiles3 .tertiary .overlay.purple,
.feature.tiles4 .tertiary .overlay.purple,
.feature.tiles3 > .tile:first-child + .tile .overlay.purple,
.feature.tiles4 > .tile:first-child + .tile .overlay.purple {
	background: #9492c8;
	opacity: 0.8;
}
.feature.tiles3 .tertiary .overlay.blue,
.feature.tiles4 .tertiary .overlay.blue,
.feature.tiles3 > .tile:first-child + .tile .overlay.blue,
.feature.tiles4 > .tile:first-child + .tile .overlay.blue {
	background: #7ea7cc;
	opacity: 0.8;
}
.feature.tiles3 .tertiary .overlay.orange,
.feature.tiles4 .tertiary .overlay.orange,
.feature.tiles3 > .tile:first-child + .tile .overlay.orange,
.feature.tiles4 > .tile:first-child + .tile .overlay.orange {
	background: #eba75c;
	opacity: 0.8;
}
.feature.tiles3 .tertiary .overlay.green,
.feature.tiles4 .tertiary .overlay.green,
.feature.tiles3 > .tile:first-child + .tile .overlay.green,
.feature.tiles4 > .tile:first-child + .tile .overlay.green {
	background: #2cac87;
	opacity: 0.8;
}

.feature.wide .tile:hover .overlay,
.feature.tiles4 > .tile:first-child:hover .overlay,
.feature.tiles3 > .tile:first-child:hover .overlay,
.feature.tiles3 > .tile:first-child + .tile:hover .overlay,
.feature.tiles2 > .tile:hover .overlay,
.feature.tiles1 > .tile:hover .overlay {
	opacity: 0.5;
}
.feature.wide .tile:hover .overlay.purple, .feature.wide .tile:hover .overlay.blue, .feature.wide .tile:hover .overlay.orange, .feature.wide .tile:hover .overlay.green,
.feature.tiles4 > .tile:first-child:hover .overlay.purple,
.feature.tiles4 > .tile:first-child:hover .overlay.blue,
.feature.tiles4 > .tile:first-child:hover .overlay.orange,
.feature.tiles4 > .tile:first-child:hover .overlay.green,
.feature.tiles3 > .tile:first-child:hover .overlay.purple,
.feature.tiles3 > .tile:first-child:hover .overlay.blue,
.feature.tiles3 > .tile:first-child:hover .overlay.orange,
.feature.tiles3 > .tile:first-child:hover .overlay.green,
.feature.tiles3 > .tile:first-child + .tile:hover .overlay.purple,
.feature.tiles3 > .tile:first-child + .tile:hover .overlay.blue,
.feature.tiles3 > .tile:first-child + .tile:hover .overlay.orange,
.feature.tiles3 > .tile:first-child + .tile:hover .overlay.green,
.feature.tiles2 > .tile:hover .overlay.purple,
.feature.tiles2 > .tile:hover .overlay.blue,
.feature.tiles2 > .tile:hover .overlay.orange,
.feature.tiles2 > .tile:hover .overlay.green,
.feature.tiles1 > .tile:hover .overlay.purple,
.feature.tiles1 > .tile:hover .overlay.blue,
.feature.tiles1 > .tile:hover .overlay.orange,
.feature.tiles1 > .tile:hover .overlay.green {
	opacity: 0.5;
}

.feature.wide > .tertiary .overlay,
.feature.wide > .tile .overlay {
	opacity: 1;
}

@media (max-width: 1023px) {
	.feature.tiles4 > .tile:first-child + .tile .overlay {
		background: url("../img/bg-features-shadow.png") bottom left repeat-x;
		opacity: 1;
	}
	.feature.tiles4 > .tile:first-child + .tile .overlay.purple {
		background: #9492c8;
		opacity: 0.8;
	}
	.feature.tiles4 > .tile:first-child + .tile .overlay.blue {
		background: #7ea7cc;
		opacity: 0.8;
	}
	.feature.tiles4 > .tile:first-child + .tile .overlay.orange {
		background: #eba75c;
		opacity: 0.8;
	}
	.feature.tiles4 > .tile:first-child + .tile .overlay.green {
		background: #2cac87;
		opacity: 0.8;
	}
	.feature.tiles4 > .tile:first-child + .tile:hover .overlay {
		opacity: 0.5;
	}
}
@media (max-width: 639px) {
	.feature.tiles3 .tertiary .overlay,
	.feature.tiles4 .tertiary .overlay,
	.feature.tiles3 > .tile:first-child + .tile .overlay,
	.feature.tiles4 > .tile:first-child + .tile .overlay {
		display: block;
	}
}
/********** Tablet ***********/
@media (max-width: 1023px) {
	.feature .tile,
	.feature > .tile + .tile {
		width: 50%;
		clear: none;
	}
	.feature > .tile + .tile {
		height: 360px;
	}
	.feature .tertiary {
		width: 100%;
	}
	.feature.tiles3 .tertiary {
		width: 100%;
	}
	.feature .tertiary .tile {
		height: 180px;
	}
	/**
	 * Variation: Wide
	 */
	.feature.wide > .tile,
	.feature.wide > .tile + .tile {
		width: 50%;
		height: 360px;
	}
	.feature.tiles1 > .tile {
		width: 100%;
	}
	.feature.wide .tertiary {
		width: 100%;
		height: auto;
	}
	.feature.wide .tertiary .tile {
		height: 180px;
		width: 50%;
	}
	.feature > .tile:first-child + .tile .tile-text, .feature.tiles3 .tertiary .tile .tile-text {
		padding-right: 63px;
	}
	.feature > .tile:first-child + .tile .tile-header, .feature.tiles3 .tertiary .tile .tile-header {
		font-size: 34px;
	}
	.feature > .tile:first-child + .tile .icn-bg-circle, .feature.tiles3 .tertiary .tile .icn-bg-circle {
		width: 48px;
		height: 48px;
	}
	.feature > .tile:first-child + .tile .icn-bg-circle svg, .feature.tiles3 .tertiary .tile .icn-bg-circle svg {
		width: 22px;
		height: 22px;
		margin: -10px 0 0 -10px;
	}
	/*** 3 Tile Bug Fix ***/
	.feature.tiles3 .tile:first-child {
		width: 100%;
	}
	.feature.tiles3 > .tertiary {
		width: 50%;
		height: 360px;
	}
	.feature.tiles3 > .tertiary .tile {
		height: 100%;
	}
}
/********** Phone/Mobile **********/
@media (max-width: 639px) {
	.feature .tile,
	.feature > .tile + .tile,
	.feature .tertiary .tile {
		width: 100%;
	}
	.feature.tiles3 .tertiary,
	.feature.tiles3 > .tile + .tile {
		width: 100%;
	}
	.feature.tiles3 .tertiary {
		height: 180px;
	}
	.feature.wide.tiles2 > .tile {
		width: 100%;
	}
	.feature > .tile,
	.feature > .tile + .tile {
		height: 220px;
	}
	.feature .tertiary .tile {
		height: 180px;
	}
	.feature .tile .tile-text,
	.feature > .tile:first-child .tile-text,
	.feature.wide > .tile:first-child + .tile .tile-text,
	.feature > .tile:first-child + .tile .tile-text,
	.feature.wide.tiles3 .tertiary .tile .tile-text,
	.feature.tiles3 .tertiary .tile .tile-text {
		left: 30px;
		right: 30px;
		padding-right: 37px;
	}
	.feature .tile .tile-header,
	.feature > .tile:first-child .tile-header,
	.feature.wide > .tile:first-child + .tile .tile-header,
	.feature > .tile:first-child + .tile .tile-header,
	.feature.wide.tiles3 .tertiary .tile .tile-header,
	.feature.tiles3 .tertiary .tile .tile-header {
		font-size: 22px;
		font-weight: 600;
	}
	.feature .tile .icn-bg-circle,
	.feature > .tile:first-child .icn-bg-circle,
	.feature.wide > .tile:first-child + .tile .icn-bg-circle,
	.feature > .tile:first-child + .tile .icn-bg-circle,
	.feature.wide.tiles3 .tertiary .tile .icn-bg-circle,
	.feature.tiles3 .tertiary .tile .icn-bg-circle {
		width: 32px;
		height: 32px;
	}
	.feature .tile .icn-bg-circle svg,
	.feature > .tile:first-child .icn-bg-circle svg,
	.feature.wide > .tile:first-child + .tile .icn-bg-circle svg,
	.feature > .tile:first-child + .tile .icn-bg-circle svg,
	.feature.wide.tiles3 .tertiary .tile .icn-bg-circle svg,
	.feature.tiles3 .tertiary .tile .icn-bg-circle svg {
		width: 15px;
		height: 15px;
		margin: -8px 0 0 -6px;
	}
	/**
	 * Variation: Wide
	 */
	.feature.wide > .tile,
	.feature.wide > .tile + .tile,
	.feature.wide .tertiary .tile {
		width: 100%;
	}
	.feature.wide > .tile,
	.feature.wide > .tile + .tile {
		height: 220px;
	}
	.feature.wide .tertiary .tile {
		height: 180px;
	}
	.feature.tiles2 > .tile,
	.feature.tiles2 > .tile + .tile {
		width: 100%;
		height: 220px;
	}
}