/* ======================================

	MediaQuery-Reporter Styles
		
========================================= */

.hero-unit h1:before {
	font-size: 70px;
}
.hero-unit{
	padding:50px;	
}


@media only screen and (min-width: 980px) and (max-width: 1199px) {
	.hero-unit h1:before {
		content: "980px and 1199px";
	}
	
}



@media (max-width: 979px) {
	.hero-unit h1:before{
		content: "768px - iPad Portrait";
		font-size: 60px;
	}
}

@media (max-width: 767px) {
	.hero-unit h1:before{
		content: "Less than 767px";
		font-size: 50px;
	}
}
@media (max-width: 720px) {
	.hero-unit h1:before{
		content: "720px";
	}
}

@media (min-width: 1200px) {
	.hero-unit h1:before{
		content: "1200px and greater";
	}
}
@media (max-width: 610px) {
	.hero-unit h1:before{
		content: "610px";
	}
}
@media (max-width: 520px) {
	.hero-unit h1:before{
		content: "520px";
	}
}
@media (max-width: 500px) {
	.hero-unit h1:before{
		content: "500px";
	}
}
@media (max-width: 480px) {
	.hero-unit h1:before {
		content: "480px - Small Tablet";
		font-size:26px;
		text-align:left;
	}
}

@media (max-width: 400px) {
	.hero-unit h1:before {
		content: "400px - Mobile";
		
	}
	
@media (max-width: 360px) {
	.hero-unit h1:before {
		content: "360px - Mobile";
		line-height:110%;
		
	}
@media (max-width: 320px) {
	.hero-unit h1:before {
		content: "320px - Mobile";
		font-size:20px;
	}
}

@media (max-width: 300px) {
	.hero-unit h1:before{
		content: "300px and less - Tiny Phone";
	}
	.hero-unit h1{
		line-height:0;
		margin-bottom:15px;
	}
	.hero-unit {
    padding: 30px;
}
}