*{
	font-family: 'Montserrat', sans-serif;
	margin: 0; 
	padding: 0; 
}

html, body{ height: 100%; }

body{ background: url('/images/background.jpg') no-repeat top center; background-size: auto 100%; }

.attn{ color: #0099ff; }

.clearsBoth{ clear: both; }

.minHeight{ height: 12px; }

.header{ clear: both; margin: auto; text-align: center; padding-top: 15%; width: 100%; } 
.headerNav{ clear: both; text-align: center; margin: auto; width: 100%; }
.headerNav ul{ list-style-type: none; clear: both; margin: auto; text-align: center; width: 500px; }
.headerNav ul li{ clear: none; float: left; margin-left: 18px; }
.headerNav ul li a{ color: #0099ff; }

.slogan{ clear: both; margin: auto; text-align: center; font-size: 40px; padding-top: 24px; color: red; }

.contactInfo{ clear: both; margin: auto; text-align: center; font-size: 24px; padding-top: 24px; color: #000; }

@media screen and (min-width: 360px) and (max-width: 760px){
	.headerNav ul { max-width: 80%; text-align: center; line-height: 36px; padding-top: 36px; }
	.headerNav ul li{ margin-left: 24px; }
	.headerNav ul li:first-child{ margin-left: 48px; }
	.slogan{ font-size: 28px; max-width: 95%; margin: auto; }	
	.contactInfo{ font-size: 22px; padding-top: 48px; max-width: 95%; margin: auto; margin-bottom: 8px; }
	iframe{ width: 100%; min-height: 200px; height: auto; }
}

@media screen and (min-width: 1600px ){
	body{ background-size: 100% 100%; }
	.slogan{ max-width: 85%; }
	.contactInfo{ max-width: 85%; }
}
