@charset "utf-8";
/* CSS Document */

@import url("normalize.css");
@import url("nav.css");
@import url("images.css");
@import url("text.css");

*, *:after, *:before {
	box-sizing: border-box;
}

html {
	max-width: 1140px;
	margin: 0 auto; /* center image */ 
	font-family: Roboto, Helvetica, sans-serif;
	margin-top: 1%; 
}

.headerContainer {
	background-color: rgb(33,150,243);
	padding: 2% 1%;
}

.headerInsideContainer {
	padding: 16px 0 32px;
}

.jumboImage {
	margin-bottom: 3%; 
	height: 170px; 
}

.address {
	float: right; 
	margin-top: 15px; 
	margin-right: -20px; 
}

footer {
	margin-top: 50px; 
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 23%;} /* Col 3 needed to be 23% instead of 25%. */ 
.col-4 {width: 32.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 49%;} /* Col 6 needed to be 49% instead of the standard 50% */
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


.reviews .col-5 {
	display: inline-block; 
	padding: 0 1.5%; 
}

.contactBlock {
	background-color: black;
	height: 170px; 
	display: inline-block;
	margin: 0% 0.3%;
}

footer {
	margin: 1.5%;
}












@media only screen and (max-device-width: 768px) {
    /* For mobile phones: */
    .body [class^="col-"] { 
        width: 100%;
		float: left; 
    }
	
	.body .jumboImage {
		margin-left: 1% 1.5%; 
		max-width: 1140px;
		width: 100%; 
	}
	
	.body .quarterPhotos {
		margin: 1% 1.75%; 
	}
	
	.body .contactBlock {
		max-width: 768px; 
		width: 100%; 
	}
	
	main .quarterPhotos {
		width: 46%; 
	}
	
	main .contactBlock {
		margin: 1.5% 0;
	}
}

@media only screen and (max-device-width: 768px) and (orientation: landscape) {

	main.reviews .col-5 {
		width: 49%; 
	}
}