/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

body:after {
	content: "less than 320px";
	font-size: 300%;
	font-weight: bold;
	position: fixed;
	bottom: 60px;
	width: 100%;
	text-align: center;
	background-color: hsla(1,60%,40%,0.7);
	color: #fff;
	display:none;
} /* Media Reporter for testing */

#cp-outer,
#slides,
.bottom-offer,
.newsletter { display:none;}


@media only screen and (min-width: 320px) {
	body:after {
		content: "320 to 480px";
		background-color: hsla(90,60%,40%,0.7);
	} /* Media Reporter for testing */
	
	
}
@media only screen and (min-width: 480px) {
	body:after {
		content: "480 to 768px";
		background-color: hsla(180,60%,40%,0.7);
	} /* Media Reporter for testing */
	
}
@media only screen and (min-width: 768px) {
	body:after {
		content: "768 to 1024px";
		background-color: hsla(270,60%,40%,0.7);
	} /* Media Reporter for testing */
	
}

@media only screen and (min-width: 1024px) {
	body:after {
		content: "1024 and up";
		background-color: hsla(360,60%,40%,0.7);
		display:none;
	} /* Media Reporter for testing */
	
#cp-outer,
#slides,
.bottom-offer,
.newsletter { display:block;} }