@charset "utf-8";
/* CSS Document */
body {background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333;}

/* ==========================================================
-------------------------   Container  ---------------------- 
===========================================================*/
@media (min-width: 1180px) {
    .container {max-width:1180px;}
}
.wrap {max-width: 1580px; box-shadow: 0 0 5px rgba(98,98,98,0.75); margin: 0 auto;}
.header-wrap {position: fixed; left: 0; right: 0; top: 0; width: 100%; max-width: 1580px; box-shadow: 0 0 5px rgba(98,98,98,0.75); margin: 0 auto; z-index: 2000;}
.mid-wrap {padding-top:100px;}

#header { min-height: 100px; border-bottom: 1px solid #386192; background: #fff; z-index: 1000;}
.logo {padding: 20px 0; margin: 9px 0; display: block;}
#nav {}
#nav ul {display: block; font-size: 0; text-align: center;}
#nav ul li {display: inline-block; font-size: 13px; margin: 0; position: relative; margin-bottom: 0;}
#nav ul li a {display: block; padding:37px 25px; color: #333333; text-align: center; font: 14px/26px 'Lato', Arial, Helvetica, sans-serif;}
#nav ul li a:hover, #nav ul li.active a {background: #426b9b; color: #fff;}
.contact-number {color: #386192; background: url(../img/icon-phone.png) no-repeat; line-height: 24px; float: right; font: 22px/26px 'Lato', Arial, Helvetica, sans-serif; margin: 37px 0;  padding-left: 30px;}

/* -------- Header on scroll  ---------------- */
.header-scroll #nav ul li a {padding: 25px;}
.header-scroll .logo {padding: 10px 0; margin:7px 0;}
.header-scroll .contact-number {margin: 25px 0;}
#header.header-scroll {min-height: inherit;}

/* =============================================================
------------------         Colors       ------------------------
============================================================= */
.blue {color: #003b7a;}


/* =============================================================
-------------------    Background Styles     -------------------
============================================================== */
.bg-gray-pattern {background: url(../img/pattern-gray.png) repeat left center;}
.bg-blue-pattern {background: url(../img/pattern-blue.png) repeat left top; color: #fff;}
.bg-blue-pattern h1 {color: #fff;}
.bg-about {background: url(../img/bg-about.jpg) no-repeat right top; background-size: contain}
.bg-map {background: url(../img/map.png) no-repeat left top; background-size: cover; background-attachment: fixed; padding: 120px 0; box-shadow:0 -1px 5px rgba(139,139,139,0.5); position: relative;}

/* ==============================================================
------------------         Buttons       ------------------------
============================================================== */
.btn {background-color:#029834; color: #fff; font: 16px/40px 'Lato', Arial, Helvetica, sans-serif; padding: 6px 20px; width: 270px; color: #fff; text-align: center; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow:0 4px 0 #005c1f; max-width: 100%;}
input[type="submit"] {background-color:#029834; color: #fff; font: 16px/22px 'Lato', Arial, Helvetica, sans-serif; padding: 8px 20px; width: 100%; color: #fff; text-align: center; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow:0 4px 0 #005c1f; border: none; max-width: 100%;}
.btn:hover {color: #fff; background: #1C9143; box-shadow:0 4px 0 #05461B}

/* =============================================================
------------------------ 		Icons 			----------------
============================================================= */
.icon-down {height: 40px; width: 40px; background: url(../img/down.png) no-repeat center center; display: inline-block; vertical-align: top;}
.btn .icon-down {margin-left: 5px;}

.areas { top: -80px; margin-bottom: -80px; position: relative;}
.areas ul {display: block; font-size: 0;}
.areas .first {margin-left: 60px;}
.areas ul li {display: inline-block; font-size: 12px; background: #f6faff; max-width: 40%; color: #333333; padding: 35px 20px; border-right: 1px solid #365e8d; vertical-align: bottom; text-align: center; margin-bottom: 1px; position: relative;}
.title-holder {position: absolute; height: 100%; width: 100%; left: 0; top: 0;}
.title-holder:before {  content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */}
.areas ul li h5 {  display: inline-block; vertical-align: middle; position: relative; top: 0;
-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
}
.areas ul li:hover h5 {top:-30%;}
.areas ul li.one {max-width: 23%; background: #f6faff;}
.areas ul li.two {max-width:33%; background: #e0eeff;}
.areas ul li.three {max-width: 24%; background: #e8ecf1;}
.areas ul li.four {max-width: 20%; margin-bottom: 100px; background: #f6faff;}
.areas ul li.five {max-width: 31%; vertical-align: top; height: 190px; background: #e8ecf1;}
.areas ul li.six {max-width: 21%; vertical-align: top; height: 190px; background: #ecf5ff;}
.areas ul li.seven {max-width: 29%; vertical-align: top; height: 190px; background: #f6faff;}
.areas ul li.eight {max-width: 19%; margin-top: -99px; vertical-align: top; height: 289px; background: #e0eeff;}
.areas ul li p {visibility: hidden; opacity: 0;
-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition: all 300ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); 
        transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
}
.areas ul li:hover p {visibility: visible; opacity: 1;}

.people {background: #2b64a7; padding:26px; text-align: center; color: #fff; max-width: 240px; margin: 0 auto;}
.people p { font:300 14px/18px 'Lato', Arial, Helvetica, sans-serif;}
.people a {color: #fff; font:300 14px/40px 'Lato', Arial, Helvetica, sans-serif;}
.address {background: #fff; padding: 50px; text-align: center; color: #000; box-shadow:0 0px 5px rgba(139,139,139,0.9); position: relative; z-index: 2000;}
.map-wrap {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1;}
.map-overlay {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1000;}

.success-message {display: none;}

footer {background: #426b9b; color: #fff; font:300 18px/26px 'Lato', Arial, Helvetica, sans-serif;}
footer a {color: #fff;}
footer a:hover {text-decoration: underline; color: #fff;}
footer ul {display: block; text-align: center;}
footer ul li {display: inline-block; margin: 0 20px; font:300 18px/26px 'Lato', Arial, Helvetica, sans-serif;}
footer .small {font: 300 11px 'Open Sans', Arial, Helvetica, sans-serif;}

/* =================================================================
--------------------------    	Form Elements   --------------------
================================================================== */
input[type="text"], input[type="email"], textarea { border: 1px solid #aaaaaa; width: 100%; display: block; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; margin-bottom:24px; line-height: 20px; padding: 11px 15px;}
textarea {min-height: 112px;}

/* ========================= 		Animated 		============================= */

.gfx1{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 1s;
    -moz-animation-iteration-count: 1;
	animation-duration: 3s;
    animation-delay: 1s;
    animation-iteration-count: 1;
}
.gfx1-2{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1.2s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 1.2s;
    -moz-animation-iteration-count: 1;
	animation-duration: 3s;
    animation-delay: 1.2s;
    animation-iteration-count: 1;
}
.gfx1-4{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1.4s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 1.4s;
    -moz-animation-iteration-count: 1;
	animation-duration: 3s;
    animation-delay: 1.4s;
    animation-iteration-count: 1;
}
.gfx1-6{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1.6s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 1.6s;
    -moz-animation-iteration-count: 1;
	animation-duration: 3s;
    animation-delay: 1.6s;
    animation-iteration-count: 1;
}

.gfx2{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: 1;
	animation-duration: 2s;
    animation-delay: 3s;
    animation-iteration-count: 1;
}
.gfx2-2 {
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2.2s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 2.2s;
    -moz-animation-iteration-count: 1;
	animation-duration: 2.2s;
    animation-delay: 3s;
    animation-iteration-count: 1;
}
.gfx2-4 {
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2.4s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 2.4s;
    -moz-animation-iteration-count: 1;
	animation-duration: 2.4s;
    animation-delay: 3s;
    animation-iteration-count: 1;
}
.gfx2-6 {
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2.6s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 2.6s;
    -moz-animation-iteration-count: 1;
	animation-duration: 2.6s;
    animation-delay: 3s;
    animation-iteration-count: 1;
}
.gfx3{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 3s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 3s;
    -moz-animation-iteration-count: 1;
	animation-duration: 3s;
    animation-delay: 3s;
    animation-iteration-count: 1;
}
.gfx4{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 4s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 4s;
    -moz-animation-iteration-count: 1;
	animation-duration: 3s;
    animation-delay: 4s;
    animation-iteration-count: 1;
}
.gfx5{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 5s;
    -webkit-animation-iteration-count: 1;
	-moz-animation-duration: 3s;
    -moz-animation-delay: 5s;
    -moz-animation-iteration-count: 1;
	animation-duration: 3s;
    animation-delay: 5s;  
    animation-iteration-count: 1;
}


/* =================================================================================
--------------------------    Media queries      -----------------------------------
================================================================================= */

/* ------------ Desktop, Laptop's and Tablets ----------------- */
@media (max-width: 1279px) {
	.areas ul li.seven {max-width: 29.3%;}
	.areas ul li.eight {max-width: 18.7%;}
	#nav ul li a {padding: 37px 18px;}
    .bg-about {background-size: cover; background-attachment: fixed;}
    .trans-white {
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
    }
}
@media (max-width:1023px){
	.wow {
	  visibility: visible !important;
	  -webkit-animation: none !important;
	     -moz-animation: none !important;
	       -o-animation: none !important;
	      -ms-animation: none !important;
	          animation: none !important;
	}
    .header-wrap {position:static;}
	.mid-wrap {padding: 0;}
    .trans-white {background: rgb(255,255,255); background: rgba(255,255,255,0.8);}
}
/* ---------------- Tablets and mobiles ---------- */
@media (max-width: 959px) {
	#nav {text-align: center;}
	#nav ul li a {padding:27px 25px;}
	.areas {top: 0; margin-bottom: 0; margin-top: 30px;}
	.areas ul {margin: 0 !important;}
	.areas ul li {display: inline-block; width: 50% !important; height: 190px !important; max-width: inherit !important; margin: 0 0 1px 0 !important; vertical-align: top;}
    .areas ul li h5 {  display: inline-block; vertical-align: top; position: static;}
    .areas ul li p {visibility: visible; opacity:1;}
	.people {min-height: 182px; margin-bottom: 10px;}
    .title-holder {top:20px;}
	#footer {text-align: center;}
}
/* ---------------- Tablets and mobiles ---------- */
@media (max-width: 767px) {
	#header {text-align: center;}
	#header .logo {margin: 0;}
	.contact-number {float: none; margin: 0;}
	.areas ul li {width: 100% !important; height: auto !important;}
    .map-wrap {display: none;}
}
/* ---------------- mobiles ---------- */
@media (max-width: 599px) {
	#nav {margin-top: 20px;}
	#nav ul li {display: block;}
	#nav ul li a {padding: 10px;}
}
/* ---------------- mobiles ---------- */
@media (max-width: 479px) {
}