body { 
font-family: 'Lato', sans-serif;
font-size: 15px;
color: #444;
background:#f3f1ed;
/*background: #f3f3f3;*/
text-align: left; 
line-height: 1.9em; 
font-weight:300;
-webkit-font-smoothing: subpixel-antialiased;
}

html {
}

#wrapper { 
width: 1020px; 
margin: auto; 
background:white;
margin-top:0;
} 

header {
width:1020px;
padding:0;
margin:auto;
margin-top:20px;
margin-bottom:10px;
background-image:url(images/nav-bg.png);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.strapline {
color:white;
width:980px;
padding:20px;
margin:auto;
margin-bottom:10px;
background-image:url(images/nav-bg.png);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;	
font-size:24px;
}

.tel {
display:block;
float:right;
padding:20px 10px 0 10px;
font-size: 22px;
font-weight:900;  
color:#fff; 
font-family: "Times New Roman", Times, serif;
}

#content a:link { color: #444; text-decoration: underline;}
#content a:active { color: #444; text-decoration: underline;}
#content a:visited { color: #444; text-decoration: underline;}
#content a:hover { color: #0054a6; text-decoration: none;}
#content a:visited:hover { color: #0054a6; text-decoration: none;}


.logo {
float:left;
display:block;
margin:12px;
}
.logo a:link { 
border:none;
}

#content {
width:1020px;
margin: 0 0 0 0
}

hr.style-two {
    border: 0;
	margin: 0 0 20px 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(150,150,150,0), rgba(150,150,150,0.75), rgba(150,150,150,0)); 
    background-image:    -moz-linear-gradient(left, rgba(150,150,150,0), rgba(150,150,150,0.75), rgba(150,150,150,0)); 
    background-image:     -ms-linear-gradient(left, rgba(150,150,150,0), rgba(150,150,150,0.75), rgba(150,150,150,0)); 
    background-image:      -o-linear-gradient(left, rgba(150,150,150,0), rgba(150,150,150,0.75), rgba(150,150,150,0)); 
}


#main-text{
padding:50px 40px 50px 40px;	

}

#main-patch{
padding:50px 40px 50px 40px;	
}

section {
float:left;
width:220px;
margin: 30px 0 30px 0px;	
padding: 0 47px 0 47px;
font-size:13px;
font-weight:300;
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
-o-animation: fadein 1s; /* Opera */
}

section.last {
margin-left:30px;	
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
-o-animation: fadein 1s; /* Opera */
border-right: 0px;
}

section.contactLeft {
float:left;
width:420px;
margin: 30px 0 30px 0px;	
padding: 0 47px 0 47px;	

}

section.contacRight {
float:right;
width:420px;
margin: 30px 0 30px 0px;	
padding: 0 47px 0 47px;	
border-right: 0 !important;
}


/*image list*/
.thumb {
    position: relative;
    width: 300px;
    height: 197px;
    border: 1px solid #ececec;
    margin: 5px;
    float: left;
}

#main-patch.thumb:nth-child(3n) {
margin:5px 0 0 5px;	
}


.text {
    display: none;
    position: absolute;
	
    left: 0;
    bottom: 0;
    width: 100%;
	color:white;
    background: #0054a6;
    background: rgba(0,84,166,0.9);
    text-align: center;
font-size:13px;
}
.thumb:hover .text {
display: block;
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
-o-animation: fadein 1s; /* Opera */
cursor: pointer;
}

h4 {
font-family: 'Lato', sans-serif;
font-size: 26px;
font-weight:400;
color:#fff; 
margin: 10px 0 10px 10px;
position: absolute;
left: 0;
top: 0;
padding:10px;
background: #0054a6;
background: rgba(0,84,166,0.9);
}

#headImg {
text-align:center;
margin:auto;
margin-bottom:10px;
width:1000px;
height:400px;
border:10px solid white;
background-color:white;
}

.homebanner {
background-image: url(images/home-banner.jpg);	
}

.aboutbanner {
background-image: url(images/banner-about.jpg);	
}

.approachbanner {
background-image: url(images/banner-approach.jpg);	
}

.servicesbanner {
background-image: url(images/banner-services.jpg);	
}

.contactbanner {
background-image: url(images/banner-contact.jpg);	
}

.icon {
display:block;
float:right;
margin: 20px 0 50px 0;	
}

h1 {
font-family: 'Lato', sans-serif;
font-size: 32px;
font-weight:700;
color:#0054a6; 
margin: 0px 0 20px 0;
}

h2 { 
font-family: 'Lato', sans-serif;
font-wight:300;
font-size: 18px; 
color:#555; 
}

h3 {
font-size: 19px;
font-weight:700;
color:#0054a6; 
margin: 15px 100px 30px 0;
}

footer {
width:1000px;
padding:10px;
color:#ffffff;
margin:auto;
margin-top:10px;
font-size:11px;
background:#0054a6;
text-align:center;
}
footer a, a:visited { color: #f1f1f1; font-weight: normal;}
footer a:hover {
text-decoration:none;
color: #f1f1f1;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;	}

ul.boxes {
list-style-type:none;
}
ul li.notick:before {
  content: '\2610';
}
ul li.tick:before {
  content: '\2611';
}

/*//////////////////////////////////navigation/////////////////////////////*/
nav {
margin: 10px 0 0 15px;
width:610px;
float:left;
display:block;
font-family: 'Lato', sans-serif;
font-wight:300;
color:white;
}

ul nav { padding: 0; margin: 0;}
li nav { padding: 0; margin: 0;}

nav li 
{
margin:0 0 0 13px;
display:inline;
padding: 0 0 0 0;
}

nav ul {
list-style-type: none; 
padding: 0;
margin: 0; 
}

nav a
{
color:#fff;
text-decoration: none;
font-weight:300;
font-size: 16px; 
display:inline-block;
padding:8px;

}
nav li#active {color:#fff; }
nav a:hover, nav a:visited:hover { 
color:#f1f1f1;
background: #00468b;
padding: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

text-decoration:none;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-moz-box-shadow:    inset 0 0 10px #003569;
-webkit-box-shadow: inset 0 0 10px #003569;
box-shadow:         inset 0 0 10px #003569;
}
nav a:visited {color:#fff;}

/*current page highlight link*/#home .home, #about .about, #approach .approach, #services .services, #contact .contact {
background: #00468b;
padding: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration:none;
-moz-box-shadow:    inset 0 0 10px #003569;
-webkit-box-shadow: inset 0 0 10px #003569;
box-shadow:         inset 0 0 10px #003569;
}

.clearer {
clear:both;
height:0px;
overflow:hidden;
margin-top:-1px; 
}

/*Form and Contact Page*/

label {
font-size:12px;
padding: 5px 0 5px 0;
display:block;
float:left;
margin:0;
width:210px;
}

input[type=text]  {
float:left;
height: 28px; 
width: 240px;
border: 1px solid #e3e3e3;
padding: 5px;
font-size: 14px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin: 0 30px 20px 0;
background: #f9f9f9;
-moz-text-shadow: 2px 1px 10px #fff000;
-webkit-text-shadow: 2px 1px 10px #fff000;
text-shadow: 2px 1px 10px #fff000;
border-bottom:2px solid #cdcdcd;
}

.textarea { 
float:left;
margin: 0 30px 20px 0;
width: 250px; 
margin-bottom:10px; 
border: 1px solid #e3e3e3;
font-size: 14px; color: #333;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #f9f9f9;
-moz-text-shadow: 2px 1px 10px #fff000;
-webkit-text-shadow: 2px 1px 10px #fff000;
text-shadow: 2px 1px 10px #fff000;
border-bottom:2px solid #cdcdcd;
}
.css3button {
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #050505;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#ebebeb 50%,
		#dbdbdb 50%,
		#b5b5b5);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		color-stop(0.50, #ebebeb),
		color-stop(0.50, #dbdbdb),
		to(#b5b5b5));
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius:5px;
	border: 1px solid #949494;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,1);

clear:left;
float:left;
}

#formErr { 
color:red;
width:280px;
float:right;
padding:20px;

margin-top:40px;
border-bottom:1px dashed #e3e3e3;
}

.blank{display:none;}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}