@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Jockey+One');

.aboutBanner { background:url("../img/background.jpg") no-repeat fixed center center / 100% }
.awardsBanner { background:url("../img/awards-certification-banner.jpg") no-repeat fixed }
.contactBanner { background:url("../img/contact-banner.jpg") no-repeat fixed }
.galleryBanner { background:url("../img/gallery-page-banner.jpg") fixed }
.qulityBanner { background:url("../img/Quality-Policy-Banner.jpg") no-repeat fixed }
.serviceBanner { background:url("../img/services-page-banner.jpg") no-repeat fixed }

.sustainability_commitment { background:url("../img/sustainability_commitment-banner.jpg") no-repeat fixed }

.etp { background:url("../img/projects/etp-banner.jpg") fixed }
.lab { background:url("../img/projects/lab-banner.jpg") fixed }
.pdw { background:url("../img/projects/pdw-banner.jpg") fixed }
.stp { background:url("../img/projects/stp-banner.jpg") fixed }
.waste { background:url("../img/projects/waste-banner.jpg") fixed }
.wtp { background:url("../img/projects/wtp-banner.jpg") fixed }
.zld { background:url("../img/projects/zld-banner.jpg") fixed }
.pcs { background:url("../img/projects/pcs-banner.jpg") fixed }
.soft { background:url("../img/projects/softdrink-banner.jpg")  fixed }

.galleryCol .subtitile, .galleryCol a:hover .subtitile, .chooseCol, .chooseCol img { transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease }
/* nav {
	background: #fff;
	position: absolute;
	top: 0;
	z-index: 500
} */
header {
	background: #fff;
}
nav { background:#5a7b06 }
.siteName { font-family: 'Jockey One', cursive; }
.siteName a { color:#5a7b06; font-size:30px; font-weight:bold; margin-top:30px }
.top-nav ul {
	padding: 0;
}
.logo {
	margin: 0;
	text-align: center;
	width: 100%;
}
.top-nav li a {
	font-size: 0.9rem;
	/*text-transform: uppercase;*/
}
.top-nav .logo a, .top-nav .logo.active-item a {
	color: #97C135;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1rem;
	font-family:'Ubuntu';
}
.top-nav .logo a strong {
  font-weight: 800;
  line-height: 1.5;
  font-size:2.2rem;
  
}
.top-nav .logo a p {padding:5px; font-size:1.1rem;}

.top-nav {
	text-align: center;
}
.top-nav li a:hover, .top-nav li.active-item a, .top-nav .logo.active-item a:hover {
	background:#4e6b07; color:#fff /*#00B2FC*/
}
.top-nav li.logo a, .top-nav li.logo.active-item a, .top-nav .logo {
	background: none repeat scroll 0 0 #fff; /* border: 1px solid #97C135; */
}
nav ul li ul li {
	text-align: left;
}
.top-nav ul ul {
	background: none repeat scroll 0 0 rgb(0, 30, 34);
}
.top-nav li ul li a {
	background:#638117;
	color:#fff;
	font-size:12px
}
.top-nav li ul li a:hover { background:#fff; color:#799a27 }
#fourth-block h2 {
	color: #5a7b06;
	font-weight:bold;
	font-size:25px;
	margin-bottom:15px
}
#fourth-block p {
	color: #666;
}
#first-block, #second-block, #third-block, #fourth-block {
	text-align: center;
	padding: 3.5rem 0;
}
.whoWeAre { background:#f2f2f2; padding:3em 0; text-align:center }
.whoWeAre h2 { margin-bottom:0.5em }
#carousel {
	background: #fff;
}
#first-block {
	background: #fff;
}
.chooseCol img { margin:0 auto; border:1px solid #e4e4e4 }
.chooseCol:hover img { box-shadow:0px 0px 13px #e1e1e1; -webkit-transform: scale(0.95); -moz-transform: scale(0.95);    -o-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95) }
#second-block {
	
}
#third-block {
	background: #fff;
}
#fourth-block {
	background:#D8D8D8 /* #1E88E5 */
}
/*carouseller.js 0.3b https://github.com/shrue348/responsive.carouseller Open source under the MIT License. Copyright © 2015 Aleksander Alekseev All rights reserved.*/
.carouseller:before, .carouseller:after {  content: " ";  display: table;}
.carouseller:after { clear: both }
.carouseller [class*="span"]{ margin-left: 0.2564102564102564% !important; *margin-left: 0.25109110747408616% !important; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.carouseller [class*="span"]:first-child, .carouseller [class*="span"]:first-child  { margin-left: 0 !important }
.carouseller > .carousel-wrapper > .carousel-items > .span_by5 { width: 1.793789743589745%;}
.carouseller > .carousel-wrapper > .carousel-items > .span12 { width: 10%;}
.carouseller > .carousel-wrapper > .carousel-items > .span6 { width: 4.8837948717948715%;}
.carouseller > .carousel-wrapper > .carousel-items > .span4 { width: 3.1703931623931625%;}
.carouseller > .carousel-wrapper > .carousel-items > .span3 { width: 2.3136923076923077%;}
.carouseller > .carousel-wrapper > .carousel-items > .span2 { width: 1.452991452991453%;}
.carouseller > .carousel-wrapper > .carousel-items > .span1 { width: 0.5982905982905983%;}
/*------Carouseller--------*/
.carouseller { position: relative;}
.carouseller .carousel-items { position: relative; width: 997.4358974358974%;}
.carouseller .carousel-block { display: inline-block; position: relative;}
.carouseller .carousel-block:nth-child(n+7) { display: none;}
.carouseller .carousel-wrapper { overflow: hidden; position: relative; margin: 0 35px}
.carouseller .carousel-button-left, .carouseller .carousel-button-right { position: absolute; margin: 0; bottom:30%;    background: none repeat scroll 0 0 transparent; font-size: 40px; opacity: 0.5; text-align: center; color: #000; text-decoration: none }
.carouseller .carousel-button-left { left: 0;}
.carouseller .carousel-button-right { right: 0;}
.carouseller .carousel-button-left:hover, .carouseller .carousel-button-right:hover { opacity: 0.8;}
.carousel-block { text-align: center;}
.span3 img { width:100%; height:180px }
/*------Responsive-----------*/
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
	.carouseller > .carousel-wrapper > .carousel-items > .span_by5,
	.carouseller > .carousel-wrapper > .carousel-items > .span12,
	.carouseller > .carousel-wrapper > .carousel-items > .span6,
	.carouseller > .carousel-wrapper > .carousel-items > .span4,
	.carouseller > .carousel-wrapper > .carousel-items > .span3,
	.carouseller > .carousel-wrapper > .carousel-items > .span2,
	.carouseller > .carousel-wrapper > .carousel-items > .span1 { width: 3.1623931623931625%; *width: 3.1570740134569924%;}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.carouseller > .carousel-wrapper > .carousel-items > .span_by5,
	.carouseller > .carousel-wrapper > .carousel-items > .span12,
	.carouseller > .carousel-wrapper > .carousel-items > .span6,
	.carouseller > .carousel-wrapper > .carousel-items > .span4,
	.carouseller > .carousel-wrapper > .carousel-items > .span3,
	.carouseller > .carousel-wrapper > .carousel-items > .span2,
	.carouseller > .carousel-wrapper > .carousel-items > .span1 { width: 4.8717948717948715%; *width: 4.8664757228587014%;}
}
/* Landscape phones and down */
@media (max-width: 480px) {
	.carouseller > .carousel-wrapper > .carousel-items > .span_by5,
	.carouseller > .carousel-wrapper > .carousel-items > .span12,
	.carouseller > .carousel-wrapper > .carousel-items > .span6,
	.carouseller > .carousel-wrapper > .carousel-items > .span4,
	.carouseller > .carousel-wrapper > .carousel-items > .span3,
	.carouseller > .carousel-wrapper > .carousel-items > .span2,
	.carouseller > .carousel-wrapper > .carousel-items > .span1 { width: 10%; *width: 9.94680851063829%;}
}

footer {
	background:#5a7b06; /* #1565C0 */
	padding: 1em 0;
}
footer p, footer a:link, footer a:visited, footer a:hover {
	color: #fff;
}
footer p { font-size:13px; float: left; }
.carousel-text {
	display: block;
	position: absolute;
	top: 25%;
	width: 100%;
	z-index: 999;
}
.carousel-text h2 {
	background: none repeat scroll 0 0 #fff;
	color: rgb(0, 30, 34);
	display: inline-block;
	padding: 0.3125rem 0.625rem;
	font-size: 2em;
}
.carousel-text p {
	background: none repeat scroll 0 0 rgba(0, 30, 34, 0.85);
	color: #fff;
	display: inline-block;
	font-size: 1.2rem;
	padding: 0.625rem 0.8rem;
}
#first-block i {
	background:#97C135;
	border-radius: 100px;
	color: #fff;
	display: block;
	line-height: 100px;
	margin: 0 auto;
	width: 100px;
}
section h2 {
	font-size: 2.5rem;
	font-weight: 300;
	margin: 0;
	text-transform: uppercase;
}
.galleryCol { position:relative; margin-bottom:1.2em }
.galleryCol .subtitile { position:absolute; bottom:0; text-align:center; padding:1em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,0.8); margin:0; width:94.5%; font-size:16px }
.galleryCol a:hover .subtitile { background:rgba(255,255,255,0.4); color:#000 }
.galleryCol img { width:100%; height:270px }
p.subtitile { margin:1em 0 2.5em }
section h3 {
	font-size: 1.3rem;
	font-weight: 300;
	margin: 0.8rem 0;
	text-transform: uppercase;
}
.chooseCol h3 { color:#5a7b06; font-weight:bold }
section p {
	font-size: 0.8rem;
}
section h1 {
	color: #fff;
	font-size: 2rem;
	text-transform: uppercase;
}
section h1 span { background:#799a27e6; padding:2px 20px }
#second-block p {
	color: #fff;
}
a.button {
	background: none repeat scroll 0 0 #2fcbe0;
	border: 0 none;
	border-radius: 5px;
	color: rgb(0, 30, 34);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.625rem;
	text-transform: uppercase;
}
#head {
	/* background:rgba(0, 178, 252, 0.4);  rgba(0, 30, 34, 0.85) */
	padding: 7rem 0 7rem;
	text-align: center;
}
#content {
	background: none repeat scroll 0 0 #fff;
	padding: 3rem 0;
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
}
#content h2 {
	font-size: 1.5rem;
	font-weight: 400;
	margin: 1rem 0 0.3rem;
	text-transform: none;
}
.content-block {
	background: none repeat scroll 0 0 rgb(0, 30, 34);
	padding: 2.5rem;
}
.content-block h3 {
	color: #fff;
}
.content-block p {
	color: #fff;
}
#content.left-align {
	text-align: left;
}
#content.contact-page h2 {
	margin: 0 0 0.625rem;
	color:#5a7b06;
	font-weight:bold
}
address { margin-top:2em }
.contact-page p {
	font-size: 1rem;
	font-style: normal;
}
.contact-page h5 { font-style:normal }
.contact-page i {
	background: none repeat scroll 0 0 rgb(0, 30, 34);
	border-radius: 100px;
	display: inline-block;
	height: 35px;
	line-height: 35px;
	margin: 0.3125rem 0.3125rem 0.3125rem 0;
	text-align: center;
	width: 35px;
}
form.customform button {
	background: none repeat scroll 0 0 rgb(0, 30, 34);
	border-radius: 5px;
	transition: background 0.20s linear 0s;
	-o-transition: background 0.20s linear 0s;
	-ms-transition: background 0.20s linear 0s;
	-moz-transition: background 0.20s linear 0s;
	-webkit-transition: background 0.20s linear 0s;
}
form.customform button:hover {
	background: none repeat scroll 0 0 #2fcbe0;
}
form.customform input, form.customform select, form.customform textarea {
	border-radius: 5px;
}
#map-block iframe {
	display: block;
}
@media screen and (max-width: 768px) {
  body {
  	background: none repeat scroll 0 0 rgb(0, 30, 34);
  }
  nav {
  	background: none repeat scroll 0 0 rgb(0, 30, 34);
  	line-height: 1rem;
  	position: relative;
  }
  .top-nav {
  	text-align: left;
  }
  .top-nav li {
  	line-height: 3rem;
  }
  .top-nav .logo {
  	padding: 1.25rem;
  }
  .carousel-text h2 {
  	font-size: 1.3rem;
  }
  .carousel-text p {
  	font-size: 1rem;
  }
  ul.top-ul {
  	padding: 0;
	margin-top:0
  }
  ul.top-ul.right {
  	float: none;
  }
  footer {
  text-align: center;
  }
  footer .right {
  float: none;
  }
}