/* Stylesheet Navigation
	#1 - Base Styles
	#2 - Header
	#3 - Banners
	#4 - Navigation
	#5 - Footer
	#6 - Home Page Styles
	#7 - Services Page Styles
	#8 - Clients Page Styles
	#9 - Contact Us Page Styles
*/

/* #1 - Base Styles */
body { background-color: #f0f0f0; font-family: 'Raleway', sans-serif; font-size: 15px; color: #444444; }
a { color: #444444; }
h2, h4 { color: #b10041; }
h2 { font-size: 2.25em; margin: 20px 0; }
h4 { font-size: 1.5em; margin: 10px 0; }
p { margin-bottom: 10px; line-height: 1.4em }
.container { max-width: 980px; margin: 0 auto; overflow: hidden; padding: 0 20px; }
ul { list-style-position: inside; }
a.topLink { margin-top: 10px; display: inline-block; }

/* #2 - Header */
header { background-color: #ffffff; position: relative; height: 100px; }
header img { height: 75px; margin: 12.5px 0 0 0; }

@media (max-width: 705px) { 
	header { height: 130px; }
}

/* #3 - Banners */
div.my-slider li { background-position: center center; background-size: cover; height: 300px; }
li.cons { background-image: url(../img/cons.jpg); }
li.plant { background-image: url(../img/image2.jpg); background-position: center 100% !important; }
li.services1 { background-image: url(../img/image5.jpg); background-position: center 90% !important; }
li.services2 { background-image: url(../img/image7.jpg); }
li.clients1 { background-image: url(../img/image6.jpg); }
li.house { background-image: url(../img/image1.jpg); background-position: center 70% !important; }

/* #4 - Navigation */
nav { float: right; }
nav ul { margin: 41px 20px 0 0; font-size: 16px; }
nav ul li { display: inline; padding: 10px; }
nav ul li a { color: inherit; text-decoration: none; }
nav ul li a:hover { text-decoration: underline; }

@media (max-width: 705px) { 
	nav { float: none; }
	nav ul { margin: 0; display: flex; justify-content: space-around; }
	header nav ul li { text-align: justify; }
}

/* #5 - Footer */
footer { background-color: #24221f; margin-top: 20px; color: #ffffff; padding-top: 10px; }
div.copyright {  background-color: #24221f; color: #ffffff; }
div.footer { overflow: hidden; }
div.footer div { float: left; width: 33.333%; }
div.footer p { padding-top: 5px; }
div.footer div.sideMenu { width: 100%; margin-top: 0px; }
div.footer div.sideMenu h4, div.footer div.sideMenu a { color: #ffffff; }

@media screen and (max-width: 700px) {
	div.footer div { width: 100%; }
}

/* #6 - Home Page Styles */

/* #7 - Services Page Styles */
div.sideMenu { float: right; width: 22%; 0 1.5%; margin-top: 20px;}
div.sideMenu ul { list-style: none; }
div.sideMenu ul li { margin-bottom: 10px; }
div.sideMenu ul li:nth-child(3) { margin-bottom: 0; }
div.content { float: left; width: 72%; padding: 0 1.5%; }

div.services div { float: left; width: 31%; margin: 0 1.5%; min-height: 200px; background-size: cover; background-position: center center; position: relative; }
div.services div:first-child { margin: 0 1.5% 0 0; }
div.services div:last-child { margin: 0 0 0 1.5%; }
div.services div#genhealth { background-image: url("../img/services.jpg"); background-position: center 50% !important; }
div.services div#cdm { background-image: url("../img/services1.jpg"); background-position: center 100% !important; }
div.services div#firesafety { background-image: url("../img/services2.jpg"); background-position: center 80% !important; }
div.services div span { background-color: #b10041; color: #ffffff; position: absolute; top: 0px; left: 0px; width: 100%; text-align: center; padding: 10px 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@media screen and (max-width: 480px) {
    div.services div { width: 100%; margin: 0 0 10px 0 !important; }
}

/* #8 - Clients Page Styles */
div.clients { overflow: hidden; }
div.clients div { float: left; width: 245px; min-height: 150px; text-align: center; position: relative; }
div.clients img { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }

@media screen and (max-width: 1039px) {
    div.clients div { width: 33.333%; }
}
@media screen and (max-width: 780px) {
    div.clients div { width: 50%; }
}
@media screen and (max-width: 480px) {
    div.clients div { width: 100%; }
}

/* #9 - Contact Us Page Styles */
#map { height: 300px; background-color: #CCC; margin: 0; }
.contactArea { width: 49%; float: left; }
.contactArea p { padding-top: 5px; }
i { font-size: 30px !important; float: left; width: 40px; }
i.fa-home { height: 115px; }
i.fa-phone { height: 10px; padding-top: 5px;}
input[type=text], textarea, input[type=email] { width: 99%; border-radius: 2px; padding: 10px; border: 1px solid #c9c9c9; margin: 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
textarea { height: 100px; }
input:focus, textarea:focus { outline:none;  }
table#openingTimes { margin-top: 18px; }
table#openingTimes tr { height: 1.4em; }
table#openingTimes tr td:first-child { width: 110px; }
h2#thankYou { text-align: center; }

@media screen and (max-width: 700px) {
    .contactArea { width: 100%; float: left; }
	.contactArea:first-child { margin-bottom: 20px; }
}