@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro=300,400,600');



* {
	margin:0;
	padding:0;box-sizing: border-box; font-family:"Source Sans Pro", Arial;box-sizing: border-box;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;
}
body {
	width:100%;   color:#000000; font-family:"Source Sans Pro";font-size:16px; font-weight:300; line-height:28px; overflow-x:hidden; background:#f1f1f1;
}
.topcontact img{ margin:0 0 0 5px}
.topHeaderContainer{ width:100%; float:left; padding:20px;  background:#fff}
.logo{ float:left}
.rightTop{ float:right; border-bottom:1px solid #f1f1f1}
.rightTop img{ vertical-align:middle}

.boxFifty{ padding:50px; width:50%; float:left}
.boxFifty h2{ float:left}

.fullWidthBox{padding:50px; width:100%; float:left}

.subHeading{ font-weight:bold; text-transform:uppercase; font-size:18px; color:#1b728f}

.customList.all li{ width:100%}

.customList{ list-style: none}
.customList li{ float:left; width:33.33%; background:url(images/bullet.png) no-repeat left 10px; padding:3px 20px 3px 30px; line-height:normal}

.boxFifty input[type="text"], .boxFifty input[type="email"], .boxFifty textarea, select {
    width: 90%;
    margin: 0 5% 0 0;
    margin-bottom: 0px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 5px;
    font-family: Oxygen;
    font-weight: 300;
    font-size: 15px;
}
.boxFifty input[type="submit"] {
    background: #999999;
    color: #fff;
    width: 90%;
    margin: 0 5%;
    padding: 12px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border-radius: 5px;
    font-family: Oxygen;
    font-size: 14px;
    border: 0;
    cursor: pointer;
}
#contact-loader{ display:none}
.facebook:link,.facebook:visited{ background:url(images/social-media.png); width:27px; height:27px; display:inline-block}
.facebook:hover{ background:url(images/social-media.png) left -27px; }

.linkedin:link,.linkedin:visited{ background:url(images/social-media.png) -34px top; width:27px; height:27px; display:inline-block; margin:0 5px}
.linkedin:hover{ background:url(images/social-media.png) -34px -27px; }

.youtube:link,.youtube:visited{ background:url(images/social-media.png) right top; width:27px; height:27px; display:inline-block}
.youtube:hover{ background:url(images/social-media.png) right -27px; }

.email{ margin-left:15px}
.topcontact{ margin-top:-3px; float:left; margin-right:30px}

.topScoial,.rightHeaderTop{ float:right}

ul.topMenus{ list-style:none; float:right}
ul.topMenus li{ display:inline-block; margin:17px 17px 10px 17px}

ul.topMenus li a:link,ul.topMenus li a:visited{ color:#666666; text-decoration:none; text-transform:uppercase; font-weight:400}
ul.topMenus li a:hover{ color:#d52c35}

.cls{ clear:both}

.bannerImgBox{ width:100%; float:left; position:relative}
.bannerImgBox img{ float:right}
.bannerImgBox p{ position:absolute; background:#fff; padding:15px 30px; width:500px; color:#1b728f; font-size:40px; border-left:10px solid #d52c35; font-weight:400; top:50%; margin-top:-80px; left:5%; line-height:60px}

.servicesContainer{ float:left; width:100%; position:relative; margin:100px 0}
.servicesImg{ float:left}
.aboutbox{ background:#fff; position:absolute; left:35%; padding:50px; right:10%; margin-top:-50px}
.aboutbox.vision{left:45%;right:6%;}
h1{color:#1b728f; font-size:32px; font-weight:400; text-transform:uppercase; margin-bottom:30px }

h2{color:#1b728f; font-size:32px; font-weight:400; text-transform:uppercase; margin:50px auto 30px auto; background:url(images/line.jpg) center bottom no-repeat; text-align:center; padding-bottom:10px }

.aboutbox p{ font-size:18px; line-height:30px; text-align:justify}
.viewmore:link,.viewmore:visited{ background:#1b728f; padding:7px 15px; color:#fff; text-decoration:none; float:right; margin-top:15px}
.viewmore:hover{ background:#d52c35}

.workAreas{ float:left; width:100%; background:url(images/bluebg.png) center bottom; height:400px}
.workAreas p{ font-size:32px; font-weight:bold; color:#fff; text-align:center; padding:100px 15% 20px 15%; line-height:38px;}
.workAreas .viewmore:link,.workAreas .viewmore:visited{ float:none; margin:20px auto; width:160px;display: inherit; text-align:center; background:#3bb2d0; padding:10px 16px; font-size:20px}
.workAreas .viewmore:hover{ background:#d52c35}

.p1{ color:#666666; font-size:26px; padding-bottom:15px; text-align:center !important}

.boxouter{ width:27.33%; float:left; margin:0 3% 20px 3%}
.whiteBox{ float:left; width:100%; padding:40px; background:#fff; margin-top:-30px; position:relative; z-index:0;  }
.whiteBox p{ text-align:justify;color:#666666;}


.blueBg{ border-radius:200px; background:#296d8b; width:121px; height:121px; margin:0 auto; position:relative; z-index:1}
.readmore{ background:url(images/readmore.png); float:right; height:22px; display:block; width:101px}
.readmore:hover{background:url(images/readmore.png) left -23px;}

.boxouter:hover .readmore{background:url(images/readmore.png) left -23px}
.boxouter:hover .whiteBox{ box-shadow:0 0px 7px rgba(0,0,0,0.2)}
.boxouter:hover .p1{color:#d52c35;}
.boxouter:hover .blueBg{ background:#d52c35}

.footer{ background:#1b85a0; float:left; width:100%; padding:30px}

.footerMenus{ list-style:none}
.footerMenus li{ background:url(images/arrow-white.png) no-repeat left center; padding-left:16px}
.footerMenus li a:link,.footerMenus li a:visited{ color:#fff; text-decoration:none}
.footerMenus li:hover a{ color:#99ccff; padding-left:2px}

.col1{ width:25%; float:left}
.col1.ccol{width:25%; float:left}
.col2.ccol{width:30%; float:right;}
.col2.ccol p{ color:#fff}

.footerBottom{ background:#296d8b; padding:10px 20px; width:100%; float:left}
.c1{ float:left; width:50%; color:#fff; font-size:12px}
.c2{ float:left; width:50%}
.c2 img{ float:right; padding-top:5px}

.menuIcon,.hideforDesktop{ display:none}


@media screen and (max-width:750px) {
	.topMenusContainer.showMenusMobile{ display:block; z-index:9999999999999999}
	.topMenusContainer{ display:none}
	.menuIcon{ cursor:pointer}
	.menuIcon,.hideforDesktop{ display:block}
	.email{ margin-left:0}
	.rightHeaderTop{ width:100%}
	.rightTop{ border:0}
	.menuIcon{float: right;position: absolute;right: 20px;top: 30px;}
	.topMenusContainer{ position:absolute; background:#1b728f; top:68px; right:20px; z-index:99; width:200px}
	.topMenusContainer ul li{ width:100%; border-bottom:1px solid #125e77; padding:0; margin:0}
	.topMenusContainer ul li a:link,.topMenusContainer ul li a:visited{ color:#fff; text-decoration:none; padding:10px 20px; margin:0; float:left; width:100%}
	.rightTop{ width:100%}
	h1{ margin-bottom:20px; margin-top:20px;}
	.bannerImgBox,.bannerImgBox img{ width: 100%;float: left;margin-top: -10px;margin-bottom: 15px;}
	.bannerImgBox p{ position:relative; font-size:24px;top:auto;margin-top:0px;left: 0;line-height:normal; padding:10px; width:100%; bottom:0; z-index:-1}
	.bx-wrapper .bx-controls-direction a{bottom: 50px;}
	.boxouter{ width:94%}
	.col1,.col1.ccol{ width:50%}
	.col2.ccol{ width:100%; margin-top:30px}
	.c1,.c2{ width:100%}
	.c2 img{ float:left}
	.aboutbox{ position:relative; left:0; right:0;}
	.servicesImg{ z-index:999}
	.aboutbox{ padding:10px 20px}
	.servicesImg{ margin-bottom:30px}
	.servicesImg{ float:none}
	.servicesContainer{ margin:10px 0}
	.aboutbox.vision{ left:0; right:0}
	.workAreas p{ padding:30px 20px; font-size:22px; font-weight:normal; line-height:30px}
	.bx-wrapper .bx-controls-direction a{ bottom:auto; top:20px}
	.fullWidthBox{ padding:20px}
	.customList li,.servicesImg img{ width:100%}
	.logo img{ width:200px}
	.rightHeaderTop{ margin-top:10px}
	.boxFifty{ width:100%; padding:20px}
	.infotop{ display:none}
}