.tagline {
	font-size: 125%;
	font-weight: bold;
}

.feature-row {
	display: inline-block;
	height: 192px;
	vertical-align: top;
	
	text-align: left;
	text-decoration: none;
	
	background-color: white;
	width: 100%;
}
	.feature-row:hover,
	.feature-row:focus {
		text-decoration: underline;
	}
	
	.feature-row:nth-child(2n) {
		background-color: #e0e0e0;
		text-align: right;
	}
	
	.feature-row .feature-thumbs {
		background-size: cover;
		height: 100%;
		width: 48%;
		max-width: 384px;
		box-shadow: inset -32px 0 16px -16px white;
		
		animation-direction: alternate;
		animation-iteration-count: infinite;
		
		float: left;
	}
		.feature-row:nth-child(2n) .feature-thumbs {
			float: right;
			box-shadow: inset 32px 0 16px -16px #e0e0e0;
		}
	
	.feature-row .feature-text {
		display: inline-flex;
		height: 100%;
		max-width: 47%;
		max-width: calc(52% - 16px);
		
		flex-direction: column;
		justify-content: center;
	}
		.feature-row .feature-text h2 {
			font-size: 200%;
			margin-top: 0;
		}

@media (min-width: 412px) {
	.tagline {
		font-size: 150%;
	}
}
@media (min-width: 560px) {
	.tagline {
		font-size: 175%;
	}
}
@media (min-width: 1320px) {
	.feature-row {
		width: 50%;
	}
		.feature-row:nth-child(2n -1),
		.feature-row:nth-child(2n) {
			text-align: left;
			background-color: white;
		}
			.feature-row:nth-child(2n - 1) .feature-thumbs,
			.feature-row:nth-child(2n) .feature-thumbs {
				float: left;
				box-shadow: inset -32px 0 16px -16px white;
			}
		.feature-row:nth-child(4n - 1),
		.feature-row:nth-child(4n) {
			background-color: #e0e0e0;
			text-align: right;
		}
			.feature-row:nth-child(4n - 1) .feature-thumbs,
			.feature-row:nth-child(4n) .feature-thumbs {
				float: right;
				box-shadow: inset 32px 0 16px -16px #e0e0e0;
			}
}

/* Thumbnail animations */
.feature-2thumbs {
	animation-name: feature-2thumb;
	animation-duration: 10s; /* 2 thumbs * 5 seconds each */
}
.feature-3thumbs {
	animation-name: feature-3thumb;
	animation-duration: 15s; /* 3 thumbs * 5 seconds each */
}
.feature-4thumbs {
	animation-name: feature-4thumb;
	animation-duration: 20s; /* 4 thumbs * 5 seconds each */
}
@keyframes feature-2thumb {
	0%   { background-position: 0% 0%;   }
	48%  { background-position: 0% 0%;   }
	52%  { background-position: 100% 0%; }
	100% { background-position: 100% 0%; }
}
@keyframes feature-3thumb {
	0%   { background-position: 0% 0%;   }
	31%  { background-position: 0% 0%;   }
	35%  { background-position: 50% 0%;  }
	65%  { background-position: 50% 0%;  }
	69%  { background-position: 100% 0%; }
	100% { background-position: 100% 0%; }
}
@keyframes feature-4thumb {
	0%   { background-position: 0% 0%;   }
	23%  { background-position: 0% 0%;   }
	27%  { background-position: 33% 0%;  }
	48%  { background-position: 33% 0%;  }
	52%  { background-position: 67% 0%;  }
	73%  { background-position: 67% 0%;  }
	77%  { background-position: 100% 0%; }
	100% { background-position: 100% 0%; }
}