header,
footer {
	background-color:black;
	color:white;
	padding-top:1em;
	padding-bottom:1em;
	text-align:center;

}

h1{
	width: center;
}
hgroup p {
	margin:0;
}

h2 {
	color:gray;
}

h3{
	width: center;
}
p{
	color:white;
}



dl {

}
dt {
	font-weight:bold;
	font-size:1.5rem;
	display:inline-block;
	vertical-align:top;
	color:green;
	width:150px;
}
dl dl dt {
	font-size:1rem;
}
dd {
	display:inline-block;
	margin:0;
	vertical-align:top;

	width:calc(100% - 150px);
}




.hero-hover {
	text-align:center;
	background-color:transparent;
	transition:background-color .3s;
	overflow:hidden;
}
.hero-hover img {
	max-height:500px;
	opacity:1;
	transition:opacity .3s;
}
.hero-hover:hover {
	background-color:black;
}

.hero-hover:hover img {
	opacity:0.4;
}
.hero-hover>div {
	position:relative;
}
.hover-description {
	position:center;
	bottom:40px;
	right:90px;
	color:white;
	width:100%;
}
.hover-description h3,
.hover-description p {
	position:relative;
	top:30px;
	opacity:0;
}
.hover-description h3 {
	transition:all .3s;
}
.hover-description p {
	transition:all .9s;
}
.hero-hover:hover .hover-description h3,
.hero-hover:hover .hover-description p {
	top:0;
	opacity:1;
}

/*/*INTRODUCE BLUE CAR*/

.heroblue-hover:hover {
	background-color:#0b52e3;
}
.heroyellow-hover:hover {
	background-color:#ffd02b;
}
.herored-hover:hover {
	background-color:#921720;
}

/* media query */
/* all designs above are default */

/* mobile first */
@media (min-width:320px){ /* changes */ }
/* mobile landscape */
@media (min-width:600px){ }
/* tablet */
@media (min-width:800px){ }
/* small desktop */
@media (min-width:1024px){ }
/* large desktop */
@media (min-width:1200px){ }


/* desktop first */
@media (max-width:1200px){ /* changes */ }
@media (max-width:1024px){ /* changes */ }
@media (max-width:800px){ /* changes */ }
@media (max-width:600px){ /* changes */ 
	dt {
		display:block;
		width:100%;
	}
	dd {
		width:100%;
	}

	.hero-hover {
		background-color:black;
	}

	.hero-hover:hover img {
		opacity:1;
	}
	.hover-description h3,
	.hover-description p {
		top:0;
		opacity:1;
	}
}
@media (max-width:320px){ /* changes */ }