.max-width-1540 { display: none; }
.max-width-1240 { display: none; }
.max-width-940 { display: none; }
.max-width-640 { display: none; }
.max-width-480 { display: none; }

@media only screen and (max-width: 1540px) {
	/* when the viewport width is 1540px or less, a page width of 1500px is too much: drop down to 1200px */
	.max-width-1540 { display: block; }
	body { width: 1200px; background-image: url('../_images/header-bg-small.png'); }
	#header h2 { margin-left: 400px; }
	#footer div { width: 1180px; }
	#hero { width: 1100px; }
	.homepage .services { width: 671px; height: 368px; }
	.homepage .service { height: 324px; }
	.homepage .casestudies { width: 365px; height: 368px; }
	.homepage .casestudy { height: 324px; }
	.what-we-do .service { width: 487px; height: 162px; }
	.what-we-do ul { width: 850px; }
	.what-they-say .casestudy { width: 328px; height: 340px; }
	.contact.meet-us { width: 400px; }
	.contact.meet-us img { width: 90px; }
	.contact.contact-us { width: 306px; }
	.contact.contact-us textarea { width: 300px; }
	.contact.find-us { width: 328px; }
}

@media only screen and (max-width: 1240px) {
	/* when the viewport width is 1240px or less, a page width of 1200px is too much: drop down to 900px */
	.max-width-1240 { display: block; }
	body { width: 900px; }
	#header { height: 128px; }
	#header h1 { margin-top: 20px; }
	#header h2 { margin-left: 260px; }
	#footer div { width: 880px; }
	#hero { width: 800px; }
	#hero .badges { right: 50px; }
	.homepage .services { width: 400px; height: 510px; }
	.homepage .service { height: 466px; }
	.homepage .casestudies { width: 325px; height: 510px; }
	.homepage .casestudy { height: 466px; }
	.what-we-do .service { width: 337px; height: 210px; }
	.what-we-do ul { width: 550px; }
	.what-they-say .casestudy { float: none; margin: 0 0 20px 0; width: auto; height: auto; }
	.contact.contact-us { float: right; width: 366px; margin-right: 0; margin-bottom: 20px; }
	.contact.contact-us input[type="text"], .contact.contact-us input[type="email"] { width: 160px; }
	.contact.contact-us textarea { width: 340px; }
	.contact.contact-us::after { content: "."; display: block; clear: both; height: 0px; overflow: hidden; }
	.contact.find-us { clear: left; float: none; margin: 0px auto; width: 640px; }
	.prizedraw textarea { width: 320px; }
}

@media only screen and (max-width: 940px) {
	/* when the viewport width is 940px or less, a page width of 900px is too much: drop down to 600px */
	.max-width-940 { display: block; }
	body { width: 600px; }
	#header { background-color: rgba(255,255,255,0.5); }
	#header h2 { margin-left: 0; font-size: 180%; }
	#footer div { width: 580px; }
	#hero { width: 500px; }
	#hero .badges { display: none; }
	.homepage .services { margin: 10px 0px; border-style: none; padding: 0px; width: auto; height: auto; }
	.homepage .service { height: auto; }
	.homepage .casestudies { display: none; }
	.what-we-do .service { float: none; margin: 20px 0 0 0; width: auto; height: auto; }
	.what-we-do .first.service {  margin: 0; }
	.what-we-do .badges { float: none; }
	.what-we-do ul { float: none; padding: 0; width: auto; list-style-type: circle; list-style-position: inside; }
	.what-we-do li { padding: 0 0 10px 0; }
	.what-they-say .portfolio a { font-size: 90%; }
	.contact { float: none !important; clear: both !important; margin: 0 0 20px 0 !important; width: auto !important; height: auto !important; }
	.contact.meet-us > .last::after { content: "."; display: block; clear: both; height: 0px; overflow: hidden; }
	.contact.meet-us img { margin-left: 60px; }
	.contact.meet-us > .first img { margin-left: 0; }
	.contact.contact-us input[type="text"], .contact.contact-us input[type="email"] { width: 200px; }
	.contact.contact-us textarea { width: 500px; }
}

@media only screen and (max-width: 640px) {
	/* when the viewport width is 640px or less, a page width of 600px is too much: drop down to 400px */
	.max-width-640 { display: block; }
	body { width: 400px; padding: 0 2px; background-image: none; }
	#header { padding: 0; height: auto; }
	#header h1 { float: none; margin: 0; border-bottom: 1px solid #ddd; padding: 20px 0; text-align: center; }
	#header h2 { float: none; margin: 0; padding: 20px 0; text-align: center; }
	#header h3 { display: none; }
	#nav a { display: block; margin: 5px auto; width: 90%; text-align: center; }
	#main { padding-bottom: 120px; }
	#footer { height: auto; }
	#footer > div { width: 380px; height: auto; }
	#hero { display: none; }
	.contact.meet-us div { clear: left; margin-top: 0; padding-top: 20px; }
	.contact.meet-us img { margin-left: 0; }
	.contact.contact-us form p { display: block; width: auto; }
	.contact.contact-us input[type="text"], .contact.contact-us input[type="email"] { width: 200px; }
	.contact.contact-us textarea { width: 200px; }
}

@media only screen and (max-width: 480px) {
	/* when the viewport width is 480px or less, just use auto widths */
	.max-width-480 { display: block; }
	.min-width-480 { display: none; }
	body { width: auto; border: none; background-image: none; }
	.logo { float: none !important; }
	#header h1 a { display: block; font-size: 0; }
	.content { border: none; padding: 0; height: auto; }
	#footer > div { width: auto; height: 55px; }
	.homepage .services { display: none; }
	.what-we-do .service { height: auto; }
	.contact { padding: 0 !important; }
	.contact.contact-us { padding-top: 20px !important; }
	.contact.find-us { padding-top: 20px !important; }
}

@media handheld {
	#footer { position: relative; bottom: inherit; width: inherit; z-index: auto; }
}