@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
	margin: 0;
	font-size: 12px;
}
.logo {
	text-align: center;
	padding: 30px 0 25px 0;
}
h1 {
	background: #222;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5em;
	color: #fff;
	text-align: center;
	line-height: 70px;
	margin: 0;
}
.container {
	overflow: auto;
	width: 1250px;
	margin: 0 auto;
}
section {
	height: 160px;
}
.col-1 {
	margin: 30px 0 0 0;
	position: relative;
}
.col-2 {
	width: 50%;
	float: left;
	position: relative;
}
.col-1:after,
.col-2:after {
	position: absolute;
	content: '';
	top: 0; right: 0; bottom: 0; left: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.7+100 */
    background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-9 */
	opacity: 0;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	z-index: 2;
}
.col-1:hover:after,
.col-2:hover:after {
	opacity: 1;
}
.acura {
	background: url(../images/acura-hero.jpg) no-repeat top right;
	background-size: cover;
}
.honda {
	background: url(../images/honda-hero.jpg) no-repeat top right;
	background-size: cover;
}
.mazda {
	background: url(../images/mazda-hero.jpg) no-repeat top right;
	background-size: cover;
}
.toyota {
	background: url(../images/toyota-hero.jpg) no-repeat top right;
	background-size: cover;
}
.scion {
	background: url(../images/scion-hero.jpg) no-repeat top right;
	background-size: cover;
}
.make {
	padding: 20px 0 0 20px;
}
section h2 {
	position: absolute;
	right: 0;
	top: 50px;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	z-index: 3;
	opacity: 0;
	-webkit-transition: all .35s ease;
	-moz-transition: all .35s ease;
	-ms-transition: all .35s ease;
	-o-transition: all .35s ease;
	transition: all .35s ease;
}
section:hover h2 {
	right: 50px;
	opacity: 1;
}
footer {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	background: #272727;
	color: #fff;
	text-align: center;
	font-family: Helvetica,Arial,sans-serif;
	padding: 15px 0;
}
@media (max-width: 1250px) {
	.container {
		width: 1000px;
	}
	.col-2 {
		width: 100%;
	}
}
@media (max-width: 1050px) {
	.container {
		width: 750px;
	}
}
@media (max-width: 767px) {
	.container {
		width: 100%;
	}
}
@media (max-width: 550px) {
	.logo {
		padding: 30px 10px 25px;
	}
	.logo img {
		max-width: 100%;
	}
	section {
		height: auto;
	}
		section h2,
	.col-1:after,
	.col-2:after {
		display: none;
		opacity: 0;
	}
	.col-1, .col-2 {
		width: 50%;
		float: left;
		margin: 0;
		background: transparent;
	}
	.make {
		padding: 15px;
		max-width: 80%;
	}
	h1 { 
		font-size: 1.2em;
	}
}
@media (max-width: 550px) { 
	h1 {
		font-size: 1em;
	}
}