/* CSS Document */

/* LAYOUT */

* {box-sizing:border-box;}

.inner {margin: 0 auto; padding: 0 20px; max-width: 960px; width: 100%;}

.clear {float: none; clear: both;}

body {background-color: #fff;}

a {transition: all 0.2s;}

/* HEADER */

header {background-color:#fff; padding: 0 20px; width: 100%; overflow:hidden;}
header	.logo {width: 15%; margin: 0; float: left;}
header	.logo a {display: block;}
header	.logo a img {width: 100%; padding: 10px 0 0 0;} 
header	.logo p {font-size: 0.85em; margin: -1em 0 0 0; text-align: center; text-transform: uppercase; color: #233C7E; font-weight:bold;}

header .contact-info {width: 50%; background-color: #233C7E; position: relative; margin-left:60%;    z-index: 9; border-radius: 0 0 0 30px; text-align: left;}
header .contact-info:before {content: ""; height: 100%;  left: 100%; position: absolute; top: 0; width: 10000px; background-color: #233C7E;}
header .contact-info ul {list-style-type:none; font-size: 0.9em; padding: 0.5em 0 0.5em 40px; }
header .contact-info ul li {color: #fff; text-align: right; padding: 5px 0;  display: inline-block; text-transform:uppercase;}
header .contact-info ul li a {color: #fff; text-decoration: none; }
header .contact-info ul li a:before {content:"|"; margin: 0 10px;}


    


header nav.primary {width: 80%; float: right; padding: 30px 0 0 0; text-transform: uppercase}
header nav.primary ul {text-align: right;}
header nav.primary ul li {display: inline-block; margin: 0; }
header nav.primary ul li a, header nav.primary ul li a:visited {font-weight: bold; color: #666; font-size: 0.85em; display: block;  padding: 20px 10px;border-bottom: 4px solid #fff;}
header nav.primary ul li:last-child:after {content: ""; margin: 0;}
header nav.primary ul li a:hover, header nav.primary ul li a:active, header nav.primary ul li.current a, header nav.primary ul li.section a {color: #233C7E;border-bottom: 4px solid #233C7E;}

/* SECOND NAV */

nav.secondary {}
nav.secondary h3 {}
nav.secondary ul {list-style-type: none; margin: 0; padding: 0;}
nav.secondary ul li {list-style-type: none; margin: 10px 0; }
nav.secondary ul li a {display: block; padding: 20px 10px; border-radius: 20px 0 20px 0; color: #233C7E; border: 1px solid #233C7E; text-transform: uppercase; font-weight: 600; text-align: center;}
nav.secondary ul li a:hover, nav.secondary ul li a:active, nav.secondary ul li.current a {background-color: #233C7E; color: #fff; box-shadow:#000 0 0 10px; border: #fff 1px solid;}



/* FOOTER */

.main-footer {background-color: #22313f; padding: 80px 0; color: #72868a;}
.main-footer .contact-details h3 {color: #fff; font-weight: 600; font-size: 1.3em; text-transform:uppercase; margin: 0 0 1em 0;}
.main-footer .contact-details h4 {font-size: 1.2em; color: #72868a; font-weight:600; margin: 1.5em 0 0 0;}
.main-footer .about-footer, .main-footer .contact-details {width: 35%; margin-right: 5%; float: left;}
.main-footer .about-footer img {padding: 0 20px; margin: 0 auto 20px auto; max-width: 200px; display: block;}
.main-footer .about-footer p {font-size: 1.2em; line-height:1.4em; letter-spacing:0.05em; color: #72868a; text-align:center;}
.main-footer .contact-details p {margin: 0.5em 0;font-size: 1.2em; line-height:1.4em;}
.main-footer .contact-details p a {color: #72868a;line-height:1.4em;}
.main-footer .contact-details p a:hover {color: #fff;}



footer.footer {     color: #999;    background: #ededed;    padding: 0;    font-size: 11px;    line-height: 1.2em;}
footer .legal-bar {background-color: #222; padding: 10px;}
footer .legal-bar ul {text-align: center;}
footer .legal-bar li {display: inline-block; color: #fff;}
footer .legal-bar li a {color: #fff; text-decoration:none;}
footer .legal-bar p {color: #fff; margin: 10px 0;}
footer .legal-bar p a{color: #fff; text-decoration:none;}

footer .legal-bar li:after {content:"|"; margin-left: 5px; color: #fff;}
footer .legal-bar li:last-child:after {content: ""; margin: 0;}
.footer a:hover {color: #fff; text-decoration:underline;}

/* HERO AREA */

.hero-area {background-repeat: no-repeat; background-size: 100%; width: 100%;background-position: 50%;}
.hero-area .hero-content {padding: 125px 0; text-align: center; background-color:rgba(0,0,0,0.50); color: #fff;}
.hero-area .hero-content h2, .hero-area .hero-content h3 {text-shadow: #000 2px 2px 0; line-height:1.2em;}
.hero-area .hero-content h2 {font-size: 4em; text-transform:uppercase; color: #fff; font-weight: 600; margin: 0.75em auto; display: block;}
.hero-area .hero-content h3 {font-size: 1.8em; text-transform:uppercase; color: #fff; font-weight: 200; margin: 0 auto;}
.hero-area h1, .hero-area p.hero-text {color: #fff; display: block; font-size: 4em; text-shadow: 2px 2px 0 #000; text-align: left; text-transform:uppercase;}
.hero-area .hero-content a {display: inline-block; border: 1px solid #fff; margin: 10px auto; color: #fff; padding: 15px 30px; text-transform: uppercase; font-weight: 700; letter-spacing:0.1em;font-size: 1.1em; border-radius:10px 0 10px 0;}
.hero-area .hero-content a:hover {background-color: #fff; color: #233C7E;}

.hero-area h1 {line-height:1.2em;}



/* CONTENT AREA */

#contentpage article, #homepage article {margin: 80px auto;}


.home-content {width: 65%; float: left;}
 article h2 {font-size: 2.2em; color: #233C7E;; font-weight: 700; line-height: 1.2em; margin: 1em 0 0.5em 0; border-bottom: 1px solid #ccc; padding: 0 0 0.5em 0; display:inline-block;}
 article h3 {font-size: 1.8em; color: #0872b6;; font-weight: 300; line-height: 1.2em;margin: 1em 0 0.5em 0; display:inline-block;}
 article p {font-size: 1.2em; color: #666; letter-spacing: 0.05em; line-height:1.4em; margin: 0.75em 0;}
.content-image {width: 30%;margin: 30px 0 0 5%; display: block; position: relative; float: right;}
.content-image img {width: 100%; border-radius: 20px 0 20px 0; border: none; border: 1px solid #666; }
.content-table {width: 100%; height: 100%; display: table;}
.content-table .content-table-cell {display:table-cell; vertical-align:middle; height: 100%;}
.content-image-text {width: calc(100% - 40px); height: calc(100% - 40px); border-radius: 20px 0 20px 0; position: absolute; top: 18px; left: 18px; background-color: rgba(35,60,126,0.95); color: #fff; padding: 40px; border: 1px solid #fff; box-shadow: #000 0 0 20px;}
.content-image .content-image-text p { font-size: 1.6em; font-weight: 700; line-height: 1.4em; margin: 0; color: #fff;}

#contentpage article ul {font-size: 1.2em; color: #666; margin: 20px 40px;}
#contentpage article ul li {}


/* HOME SERVICES BAR */

.services-bar {background-color: #f7f7f7; padding: 80px 0; text-align:center;}
.services-bar h2 {font-size: 2.2em; color: #233C7E;; font-weight: 700; margin: 0 0 1em 0; text-align: center;}
.services-bar p {margin: 0;}
.services-bar a {display: inline-block; border: 1px solid #233C7E; margin: 10px auto 0 auto; color: #233C7E; padding: 15px 30px; text-transform: uppercase; font-weight: 700; letter-spacing:0.1em;font-size: 1.1em;border-radius:10px 0 10px 0;}
.services-bar a:hover {background-color: #233C7E; color: #fff;}
.services-bar ul {text-align: center; color: #999; width: 98%; margin: 20px auto; padding: 0;  font-size: 1.6em;}
.services-bar ul li { display: inline-block; margin: 10px 0.5em 10px 0em;list-style-type: square;}
.services-bar ul li:first-child:before {content:""; margin: 0;}
.services-bar ul li:before {content:"\2022"; margin: 0 0.5em 0 0;color: #233C7E;}

/* LEFT IMAGE TEXT BAR */

.content-with-left-image {background-color: #fff; padding: 80px 0;}
.content-with-left-image img {float: left; border: 10px solid #eee; border-radius: 20px 0 20px 0; width: 35%;}
.content-with-left-image .snippet-text {width: 100%; margin-left: 0%; text-align: center;}
.content-with-left-image .snippet-text h2 { font-size: 2.2em; color: #233C7E;; font-weight: 700; margin: 1em 0 1em 0; }
.content-with-left-image .snippet-text p {font-size: 1.2em; color: #666; letter-spacing: 0.05em; line-height:1.4em; margin: 0.75em 0;}
.content-with-left-image .snippet-text p a {display: inline-block; border: 1px solid #233C7E; margin: 10px auto 0 auto; color: #233C7E; padding: 15px 30px; text-transform: uppercase; font-weight: 700; letter-spacing:0.1em;font-size: 1.1em;border-radius:10px 0 10px 0;}
.content-with-left-image .snippet-text p a:hover {background-color: #233C7E; color: #fff;}

/* SERVICE HOME PAGE */

ul.service-home-page {margin: 40px 0; text-align: center; width: 100%; padding: 0;}
ul.service-home-page li {display: inline-block; list-style-type:none; text-align: left;width: 32%; margin: 20px 1% 20px 0; border: 1px solid #233C7E;padding: 30px; vertical-align:top; height:200px;}
ul.service-home-page li:hover {box-shadow: #999 0 0 10px; transition: all 0.2s;}
ul.service-home-page li a { color: #233C7E; margin: 0;}
ul.service-home-page li a:hover {text-decoration:underline; }
ul.service-home-page li h3 {font-size: 1.4em; font-weight: 700; margin:0 0 0.5em 0; display: block;}
ul.service-home-page li p {margin: 0 0 0.5em 0;}

/* SERVICE PAGE */

#servicepage {margin: 40px 0 80px 0;}


#servicepage article {margin-left: 5%;}
#servicepage article h1 {font-size:3em; color: #233C7E; border-bottom: 1px solid #ccc; line-height:1.6em;} 
#servicepage article h2 {}
#servicepage article h3 {}
#servicepage article p {}


/* CONTACT BAR */

.contact-bar-outer {background-color: #22313f; width: 90%; padding: 20px; border-radius: 30px 0 30px 0; margin: 20px auto 100px auto; display: block; box-shadow: #000 0 0 20px;}
.contact-bar-outer .contact-bar-inner {background-color: #22313f; border: 1px solid #fff; padding: 30px ; color: #fff; border-radius: 30px 0 30px 0;}
.contact-bar-outer .contact-bar-inner .contact-bar-text {width: 65%; float: left;}
.contact-bar-outer .contact-bar-inner .contact-bar-text h3 {font-size: 2.2em; font-weight: 700; color: #fff; margin: 0.5em 0;}
.contact-bar-outer .contact-bar-inner .contact-bar-text p {font-size: 1.4em; line-height:1.4em; color: #eee;}
.contact-bar-outer .contact-bar-inner .contact-bar-link {float:right; margin-left: 5%; width: 30%;}
.contact-bar-outer .contact-bar-inner .contact-bar-link a {display: inline-block; border: 1px solid #fff; color: #fff; padding: 20px 30px; margin: 25px auto; font-size: 1.4em; font-weight: 600; text-transform:uppercase;border-radius:10px 0 10px 0;}
.contact-bar-outer .contact-bar-inner .contact-bar-link a:hover {background-color: #fff; color: #22313f;}

/* CONTACT PAGE */

.contact-wrap {margin: 80px auto;}

#map {dispay: block; width: 50%; height: 400px; float: left; border: 10px solid #eee;  border-radius: 30px 0 30px 0;}

.contact-details {width: 45%; margin-right: 5%; float:left;}
.contact-details p {}
.contact-details h4 {text-transform: uppercase; font-size: 1.4em; color: #233C7E; font-weight: 900;}
.contact-details p a {color: #233C7E; text-decoration:none;} 
.contact-details p a:hover, .contact-details p a:active {color: #233C7E;; text-decoration:underline;} 


/* FORM */

.webform {border-radius: 20px 0 20px 0; background-color:#22313f; color: #fff; display: block; float: right; padding: 10px;margin: 80px 0 20px 2.5%; width: 35%;}
.webform .form {border-radius: 20px 0 20px 0; background-color:#22313f; color: #fff; border: 1px solid #fff; padding: 10px 20px; display: block;}
.webform .form h3 {text-transform:uppercase; color: #fff; font-size: 1.4em; font-weight: 600; margin: 1em 0 0.5em 0; display: inline-block; border-bottom: 1px solid #ddd; padding-bottom: 0.5em;}
.webform .form form p.Form_LeadForm_error {}
.webform .form form fieldset {}
.webform .form form fieldset {}
.webform .form form fieldset label {text-transform: uppercase; color: #fff; font-size: 1em; margin: 1em 0 0.25em 0; display: block; font-weight: 600; }
.webform .form form fieldset input[type="text"], .webform form fieldset input[type="email"] {font-family: 'Open Sans', sans-serif;border: none; padding: 10px; color: #ccc;  font-size: 1em;background-color: #1a242e; width: 100%;}
.webform .form form fieldset textarea {font-family: 'Open Sans', sans-serif;border: none; padding: 10px; color: #ccc;  font-size: 1em;background-color: #1a242e; width: 100%; height: 120px;}
.webform .form form .Actions {}
.webform .form form .Actions input[type="submit"] {background-color: #233C7E; display: block;border: 1px solid #fff; border-radius: 10px 0 10px 0; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 1em; padding: 10px 15px; margin: 20px 0; transition: all 0.2s;}
.webform form .Actions input[type="submit"]:hover {background-color: #fff; color: #233C7E; border: 1px solid #fff;}


/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 300px) {
	.inner {padding: 0 1%;}
	ul.service-home-page li {width: 80%; margin: 20px auto; padding: 20px; height: auto;}
ul.service-home-page li h3 {font-size: 1.4em; font-weight: 600; }
ul.service-home-page li p {margin: 0 0 0.5em 0;}

}

@media (max-width: 749px) {
	
	.hero-area {background-size: 275%;}
	.hero-area .hero-content {padding: 40px 0; font-size: 0.7em;}
	.hero-area .hero-content h2, .hero-area .hero-content h1 {line-height: 1.2em; margin: 0.25em auto; text-align:center; padding: 0 2%;}
	#contentpage article, #homepage article {margin: 20px 0 20px 0;}
	
	.home-content {float: none; width: 100%;}
	
	.content-image {float: none; width: 50%; margin: 20px auto;}
	
	.content-with-left-image, .services-bar, .main {margin: 20px auto; padding: 40px 0;}
	.main {padding: 0px 0 20px 0;}
	
	.content-container {margin: 0 auto;}
	.contact-bar-outer {font-size: 0.8em;}
	.contact-bar-outer .contact-bar-inner .contact-bar-text, .contact-bar-outer .contact-bar-inner .contact-bar-link {float: none; width: 100%; text-align: center; margin: 0;}
	.contact-bar-outer .contact-bar-inner .contact-bar-text h3 {line-height:1.2em;}
	
	header nav.primary {width: 100%; padding:0;}
	header nav.primary ul li a {padding: 10px 5px;}
	header .contact-info {width: 75%; margin-left: 40%;}
	.webform {display: none;}
	.main-footer {padding: 10px 0;}
	.main-footer .about-footer, .main-footer .contact-details {width: 100%; margin: 20px auto; text-align: center; float: none;}
	.main-footer .about-footer img {max-width: 150px; margin: 10px auto;}
	
	.contact-wrap {margin: 20px auto; text-align: center;}
	.contact-details {width: 98%; margin: 0 auto; float: none;}
	#map {width: 98%; margin: 20px auto;float: none;}
	
	}
	
	@media (max-width: 500px) {
	.content-image {float: none; width: 90%; margin: 20px auto; font-size: 0.8em;}
	.webform {display: none;}
	.contact-info {display: none;}
	header .logo {width: 100%; text-align: center;}
	header .logo a.brand {margin: 10px auto; display: block;}
	header .logo img {max-width: 100px; margin: 0 auto; display: block;}
	header nav.primary {width: 100%; padding:0;}
	header nav.primary ul {text-align: center;}
	header nav.primary ul li a {padding: 10px;}
	
}


/* Larger than phablet */
@media (min-width: 550px) {
	ul.service-home-page li {width: 45%; margin: 20px 2%; padding: 20px; height: 200px;}

	}

/* Larger than tablet */
@media (min-width: 750px) {
	.hero-area {background-size: 200%;}
	
	}

/* Larger than desktop */
@media (min-width: 1000px) {

ul.service-home-page li {padding: 20px;}
ul.service-home-page li h3 {font-size: 1.4em; font-weight: 600; }
ul.service-home-page li p {margin: 0 0 0.5em 0;}
	
	.content-image {width: 30%;margin: 30px 0 0 5%; display: block; position: relative; float: right;}
	
	
	}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	.hero-area {background-size: 125%;}
	ul.service-home-page li {padding: 30px;}
	ul.service-home-page li h3 {font-size: 1.6em; font-weight: 600; }
ul.service-home-page li p {margin: 0 0 0.5em 0; font-size: 1.2em; line-height:1.4em;}


	
	
	}