@charset "utf-8";
/* CSS Document */

/*font link*/
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Varela);


html{height:100%;}
body{background: #fff; font-family: 'Lato', sans-serif; color:#767d84; font-size:13px; margin:0; padding:0; height:100%}
a{color:#62b5b4; text-decoration:none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
a:hover{text-decoration:none;}
a:focus{text-decoration:none; outline:none; color: #62b5b4}
input, select, textarea{font-family: 'Lato', sans-serif; /*-webkit-appearance: none; -webkit-border-radius: 0;*/}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: #999;}
img{max-width:100%;}
p{padding-bottom: 20px; margin: 0; line-height: 21px}
h1{font-family: 'Montserrat', sans-serif;}
blockquote{border-color: #52a09f; font-size: 32px; color: #767d84; font-style: italic; padding: 0 20px 5px; margin-bottom: 40px}
blockquote p{line-height: normal; padding: 0; margin: 0}

/*repeated classes*/
.button{background: #62b5b4; padding: 10px 40px; display: inline-block; color: #fff; font-size: 14px; text-transform: uppercase; font-family: 'Varela', sans-serif; border-radius: 3px;}
.socialList a.button:hover {color:#565d67!important;}
.button:hover{color: #fff}
.button-grey{background: #565d67}

/*wrapper*/
.wrapper{min-height:100%; position:relative}

/*---header
================*/
.mainHeader{background: #fff; height:184px; z-index:99; padding-top: 22px}
.mainHeader .container{position: relative}

.border-top {width:100%;height:1px;background:#cbcbcb;position:absolute;top:140px;}

/*logo*/
h1.logo{margin: 0; padding: 0; position: absolute; z-index: 99; top: 0; left: 45%; margin-left: -45px}
h1.logo a{background: url("../images/logo.jpg") no-repeat; width: 228px; height: 92px; display:block; text-indent: -1000000px;}

/*social list*/
.mainHeader ul.socialList{margin: 0; padding: 0; position: absolute; top: 1px; right: 0}
.mainHeader ul.socialList li{margin: 0 15px; font-size:16px; display: inline-block}
.mainHeader ul.socialList li a{color: #565d67;}
.mainHeader ul.socialList li:hover a{color: #52a09f}

/*---navigation
============================*/
.navigation{background:#565d67 !important; padding:22px 15px; position: absolute; top: -22px; left: 15px; width: 200px; height: 498px; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; z-index: 99}
.navigation ul{list-style:none; margin:0; padding:0; display:block;}
.navigation ul li{text-transform: capitalize; font-size:14px; position: relative; margin-bottom: 22px;}
.navigation ul li a{color:#fff; display:block}
.navigation ul li a:hover, .navigation ul li.active>a{color:#62b5b4}

.navigation h3{font-size: 14px; color: #ffffff; text-transform: uppercase; margin: 0 0 40px; padding: 0}
.navigation h3 i{color: #539798}

/*---content
==================*/
.content{padding: 0 0 130px}

/*home banner*/
/* old banner */
/*.banner {background: url("../images/banner.jpg") no-repeat top center fixed; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; height: 433px; position: relative}*/
.banner {border-top:1px solid #cbcbcb;background:#060606 url("../images/banner.jpg") no-repeat top center;height: 433px; position: relative}
.bannerIn{/*background: rgba(71,97,120,.8);*/ position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center}
.bannerIn h1{font-size: 47px; color: #fff; text-transform: uppercase; font-weight: 400; margin: 0; padding: 150px 0 0; display: inline-block}
.bannerIn h2{font-size: 25px; text-transform: uppercase; color: #fff; letter-spacing: 6px; font-family: 'Varela', sans-serif; display: block}
.bannerIn h2:before{content: ''; border-top: 1px solid #52a09f; width: 30px; display: inline-block; position: relative; top: -8px; left: -30px}
.bannerIn h2:after{content: ''; border-top: 1px solid #52a09f; width: 30px; display: inline-block; position: relative; top: -8px; right: -30px}

/*services Section*/
.servicesSection{padding-top: 40px}
.servicesSection .boxIn{position: relative; padding: 0 0 50px 50px}
.servicesSection h2{font-size: 16px; text-transform: uppercase; color: #565d67; font-weight: 700; margin: 0; padding: 0 0 10px}
.servicesSection i{ display: block; position: absolute; top: 2px; left: 0}
.servicesSection p{line-height: 20px; padding: 0; font-size: 12px}
.servicesSection ul{margin: 0; padding: 0 0 0 15px}
.servicesSection ul li{margin-top: 5px; font-size: 12px;}

/*clients Section*/
.clientsSection{border-top: 1px solid #f0f0f0; padding-top: 30px; text-align: center}
.clientsSection h2{font-size: 16px; text-transform: uppercase; color: #55676e; font-weight: 700; margin: 0; padding: 0 0 30px;}
.clientsList{border-right: 1px solid #f0f0f0; margin-top: 10px;}
.clientsList ul{list-style: none; margin: 0; padding: 0;}
.clientsList li{height: 85px; /*width: 12.5%;*/ float: left; border-left: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; padding: 15px 5px 0;}
.clientsList li img{display: block; margin: 0 auto; -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
    filter: grayscale(100%); }
.clientsList li img:hover{ -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    filter: grayscale(0); filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0' /></filter></svg>#greyscale");}

/*contact section*/
.contactUsSection{background: url("../images/contact-bg.jpg") fixed bottom no-repeat; background-size: 100% 100%; height: 198px; position: relative; margin-top: 55px}
.innerTrans{background: rgba(71,97,120,.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding-top: 45px}
.contactUsSection h1{font-size: 28px; color: #fff; margin: 0; padding: 0 0 25px}

/*sub page*/
.subPageBanner{height: 155px}
.subPageBanner h1{padding-top: 45px}
.subPageBanner h1:after{border-bottom: 1px solid #52a09f; content: ''; display: block; width: 110%; margin: 0 auto; margin-left: -5%; margin-top: 5px}

.rightContent{padding: 50px 35px 0 300px}

.rightContent .boxIn{padding-bottom: 30px;}
.rightContent h2{font-size: 24px; color: #565d67; text-transform: uppercase; margin: 0; padding: 0 0 20px}
.rightContent .boxIn ul{margin: 0; padding: 0 0 20px 15px; font-weight: 700}
.rightContent h3{font-size: 18px; text-transform: uppercase; margin: 0; padding: 0 0 15px; color: #565d67;}

/*mid section*/
.midSection{background: url("../images/mid-img.jpg") top center fixed no-repeat; height: 332px; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; text-align: center}
.midSectionIn{padding-left: 300px;}
.midSection h1{font-size: 47px; color: #fff; text-transform: uppercase; font-weight: 400; margin: 0; padding: 100px 0 50px; display: block; text-align: left}


/*---footer
================*/
.mainFooter{height:110px; width:100%; position:absolute; left:0; bottom:0;}
.mainFooter .mainFooterIn{border-top: 2px solid #f0f0f0; padding-top: 25px; text-align: center}
.mainFooter p{font-size: 11px; font-family: 'Montserrat', sans-serif; color: #5f7077; margin: 0; padding-bottom: 15px}
.mainFooter strong{display: block; font-weight: 700; color: #62b5b4; font-size: 11px}