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

/* ------------------------------------------------------------------------------- */
/*  Import styles
/* ------------------------------------------------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,500);

/* ------------------------------------------------------------------------------- */
/*  Reset & Clearfix
/* ------------------------------------------------------------------------------- */

html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,small,sub,b,dl,dd,dt,ul,li,label,article,details,footer,header,menu,nav,input,textarea,select{
background:transparent; border:0; outline:0; padding:0; margin:0;
}

ul li {
	list-style:none;
	font-weight:400;
}

/*img {
	width: 100%;
}*/

.clear { clear:both;}

/* ------------------------------------------------------------------------------- */
/*  General
/* ------------------------------------------------------------------------------- */	

html,body{
		background:#fafafa;
		color:#5b6262;
		font-family: 'Roboto', sans-serif;
		font-size:12px;	
		height:100%;
		line-height:18px;
		width:100%;	
		outline: none;
		margin:0px;
		
}	

p { font-size:12px;  line-height:18px; font-family: 'Roboto', sans-serif;  color: #5b6262; font-weight:300; }

/*a, li {
        color: #555555;
        text-decoration: none;
        outline: none;
        -webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
           -moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
            -ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
             -o-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
                transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
}*/

a { text-decoration:none; color:#5b6262;}
a:hover {
	color:#555b5b;
	text-decoration: none;
}

a:focus, a:hover {
	outline: none;
}
strong { font-weight:700;}

/* ------------------------------------------------------------------------------- */
/*  Template css starts here
/* ------------------------------------------------------------------------------- */	
#bg_image { background:url(../images/home-page-banner.jpg) top center no-repeat; height:auto;}
#about-page { background:url(../images/abbout_bg.jpg) top center no-repeat; height:auto;}
#csr-page { background:url(../images/csr-page-banner.jpg) top center no-repeat; height:auto;}
#contactus-page { background:url(../images/contact-page-banner.jpg) top center no-repeat; height:auto;}

.wrapper { width:100%; }
.header-wrapper { width:100%;}
.container { width:1160px; margin:0px auto; padding:0px 20px;}
.top-header { padding:25px 0px 45px 0px;}
.row-one { background-color:#f6f4f2; padding:0px 20px;background: rgba(246, 244, 242, 0.9);}
.logo{ float:left; padding:17px 0px 18px;}
.navigation { float:right;}

.body-wrapper { width:100%; display: flex; min-height:555px;}
.blue-content {background: rgba(120, 206, 240, 0.9); padding:20px; font-size:28px; line-height:36px; font-weight:300; color:#fff; text-transform:uppercase; width:445px; display:inline-block; }

.readmore { margin:10px 0px; background-color:#333c3c; padding:0px 0px 0px 16px; display:table;}
.readmore a { color:#fff;}

.readmore img {
    vertical-align: middle; padding-left:15px;
}

.icon-squares-wrap {}
.icon-squares-wrap ul { margin:0px; padding:0px; list-style-type:none; display:table; margin-left:auto; margin-right:auto;}
.icon-squares-wrap ul li { float:left; padding:12px 11px 12px 11px; width:154px; height:153px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

.icon-squares-wrap ul li:nth-child(1) { background-color:#66c0e5;}
.icon-squares-wrap ul li:nth-child(2) { background-color:#80b439;}
.icon-squares-wrap ul li:nth-child(3) { background-color:#565d5d;}
.icon-squares-wrap ul li:nth-child(4) { background-color:#6ecff6;}
.icon-squares-wrap ul li:nth-child(5) { background-color:#86bb3c;}
icon-squares-wrap li img { width:100%;}
.icon-squares-wrap ul li p { font-weight:300; color:#fff; line-height:16px; font-size:12px; text-transform:uppercase; text-align:center;}

.footer-wrap { width:100%; padding:32px 0px 20px; background-color:#fafafa;}
.footer-logo { float:left; margin-right:37px;}
.column-one { float:left; min-width:150px; margin-left:69px; color:#5b6262;}
.column-one h4 { font-weight:700; color:#5b6262;}
.column-one p{color:#5b6262; font-weight:400;}
.column-one p a { color:#828888; text-decoration:underline;}
.website-by { float:right; color:#cccccc; padding-right:10px; padding-top:36px;}
.website-by a {color:#cccccc; text-decoration:underline;}

h2.page_title{background:rgba(141, 198, 63, 0.73); display:inline-block; padding:23px 25px; min-width:360px; color:#FFFFFF; text-transform:uppercase; font-weight:300; font-size:28px; margin-bottom:15px;}
h2.page_title.oddtitle{background:rgba(110, 207, 246, 0.86);}

/*.about-wrap { margin-bottom:10%;}*/
.about-wrap-left{float:left; background: rgba(232,240,243,0.94); padding:20px; width:530px;}
.content_main h1, .casestudies_content h1, .technology_content h1, .about-wrap-left h1, .about-wrap-right h1 { font-weight:300; font-size:18px; line-height:24px; text-transform:uppercase;}
.content_main p, .about-wrap-left p { margin:15px 0px; font-weight:400;}
.about-wrap-right { float:left; background-color:rgba(91, 98, 98, 0.9); width:352px; padding:20px; margin-left:20px; color:#FFF;}

.content_main{float:left; background: rgba(232,240,243,0.94); padding:20px; width:433px;}

.about-wrap-left ul{padding-left:14px; margin-bottom:12px;}
.about-wrap-left ul li{list-style-image:url(../images/arrow_list.png); line-height:20px;} 
.about-wrap-right ul { margin:16px 0px;}
.about-wrap-right ul li{line-height:18px;}
.no-top-margin { margin-top:0px;}
.csr { margin-bottom:25%;}
.contactus { margin-bottom:3%;}
.contactus p { margin:0px;}
.contactus p a { text-decoration:underline;}
.contactus h1 { margin-bottom:15px;}
.google-map { float:left; margin-left:20px; width:472px;}

.contact-form-wrap { margin:32px 0px 0px;}
.form-row-wrap { margin-bottom:12px;}
.form-row-wrap label { width:75px; line-height:25px; text-align:left; display:inline-block; font-weight:300; color:#5b6262; vertical-align:top;}
.form-row-wrap input { width:265px; height:25px; line-height:25px; padding:0px 5px; background-color:#FFFFFF; font-weight:300;}
.form-row-wrap textarea { width:265px; height:87px; padding:0px 5px; background-color:#FFFFFF; font-weight:300; resize:none;}
.submit-btn, input[type="submit"] { background-color:#b4d785; padding:0px 15px; line-height:25px; border:none; cursor:pointer; font-weight:700; color:#fff; text-transform:uppercase; height:25px; float:right; margin-right:84px;}


/*Technology*/
.technology_content{ float:left; background: rgba(232,240,243,0.94); padding:20px; width:670px; /*overflow-y:scroll;*/ max-height:400px; min-height:225px; overflow:auto;}
.technology_content p { margin:15px 0px; font-weight:300; line-height:18px;}
.technology_content ul{padding-left:8px; margin-bottom:10px;}
.technology_content ul li{list-style-image:url(../images/arrow_list.png); padding-bottom:5px;} 

.technology_content ol li{padding-bottom:5px;} 

.tech_right{float:right; width:430px; margin-left:19px;}
.tech_menu{border-bottom:#6ecff6 5px solid; border-top:#8dc63f 5px solid; background:rgba(253, 252, 252, 0.9); width:290px;}
.tech_menu.case_menu{border-top:#6ecff6 5px solid; border-bottom:#8dc63f 5px solid;}
.tech_menu li a{color:#5b6262; font-size:12px; text-transform:uppercase; display:block; padding:10px 20px; font-weight:500;}
.tech_menu li a:hover, .tech_menu li.current_page_item a{color:#FFFFFF; background-color:#cbcbcb;}
/*Light Box*/
.backdrop{position:fixed; top:0px; left:0px; width:100%; height:100%; background:#000; opacity: .0; filter:alpha(opacity=0); z-index:50; display:none;}
.box_light{position:absolute; top:20%; left:29%; width:38%; color:#FFF; right:29%; height:300px; background:rgba(71, 71, 71, 0.96); z-index:51; padding:30px 2% 5px 2%; -moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.45); box-shadow:0px 2px 4px rgba(0, 0, 0, 0.45); display:none; text-align:center;}
.box_light img{padding-bottom:15px;}
.box_light p{color:rgba(255, 255, 255, 0.92); font-size:14px; padding:9px 0;}
.box_light h5{color:rgba(164, 172, 174, 0.84); font-size:20px; padding:25px 0 20px 0 ; font-weight:normal;}
.box_light h2{color:#87ba43; font-size:35px;  letter-spacing:5px; line-height:30px;}


.casestudies_content{width:473px; float:left; background: rgba(232,240,243,0.94); padding: 20px; max-height: 450px; min-height: 225px; overflow: auto; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} 
.casestudies_content p { margin:16px 0px; font-weight:300; line-height:18px;}
.casestudies_slide{float:left; width:669px; margin-left:18px;}


/*Slider*/
#slideshow{position: relative; width:100%; height: 360px; overflow:hidden;}
#slideshow > div{position:absolute; width:100%; height:100%;}
#slideshow > div img{width:100%; height:360px;}
.casestudies_slide{position:relative; z-index:0;}
.casestudies_slide #prev, .casestudies_slide #next{position:absolute; background:rgba(255,255,255,.56); top:47%; background-repeat:no-repeat; width:25px; height:25px; background-position:center center;}
.casestudies_slide #prev:hover, .casestudies_slide #next:hover{background-color:#828282;}
.casestudies_slide #prev{left:0; background-image:url(../images/slidenav_left.png);}
.casestudies_slide #next{right:0; background-image:url(../images/slidenav_right.png);}

 
 
 
/* nav*/
.toggled-controls{display:none}
 .ensol_nav{float:right; width:600px; text-align:right;}

a.tonnes_carbon{background:#8bbf53; color:#FFFFFF; padding:10px 13px 9px 13px; display:inline-block; font-size:15px; margin-right:7px; margin-bottom:4px;}
a.tonnes_carbon small{font-size:10px; text-transform:uppercase;}
a.tonnes_carbon:hover{background:rgba(120, 206, 240, 0.9);}

.ensolnavagation li{display:inline-block; padding:0 11px;}
.ensolnavagation li:last-child{padding-right:0px;}
.ensolnavagation li a{display: inline-block; padding: 0px 8px; letter-spacing: .5px; font-size: 14px; line-height:50px; font-weight: 400; border-bottom:rgba(110, 207, 246, 0) 5px solid; text-transform:uppercase;}
.ensolnavagation li a:hover{color:#8dc63f; background:url(../images/arrow_nav1.png) center bottom no-repeat; border-bottom:#8dc63f 5px solid;}
.ensolnavagation li.current-menu-parent a, .ensolnavagation li.current-menu-item a{background:url(../images/arrow_nav2.png) center bottom no-repeat; border-bottom:#8dc63f 5px solid; color:#8dc63f;}
.ensolnavagation li.hover a{background:url(../images/arrow_nav2.png) center bottom no-repeat; color:#8dc63f; border-bottom:#8dc63f 5px solid;}
.ensolnavagation li:nth-child(2n+2):hover a{background:url(../images/arrow_nav1.png) center bottom no-repeat;}
.ensolnavagation li:nth-child(2n+2) a:hover{color:#6ecff6; background:url(../images/arrow_nav1.png) center bottom no-repeat; border-color:#6ecff6;}
.ensolnavagation li:nth-child(2n+2).current-menu-item a, .ensolnavagation li:nth-child(2n+2).current-menu-parent a{color:#6ecff6; background:url(../images/arrow_nav1.png) center bottom no-repeat; border-color:#6ecff6;}

/*Sub Navagation*/
.ensolnavagation ul{display:none; position:absolute; background:rgba(255,255,255,.9); text-align:left; border-bottom:#78d0f3 5px solid; padding:5px 7px 6px 0; z-index:999; max-width:237px;}
.ensolnavagation ul:before{content:''; height:5px; border-bottom:#8dc63f 5px solid; top:-10px; width:100%; position:absolute;}
.ensolnavagation ul li{display:block; padding:3px 0px 0px 0px;}
.ensolnavagation ul li a{display:block; line-height:25px; padding:5px; padding:5px 17px; text-transform:uppercase; font-size:12px; border-bottom:none; line-height:18px; color:#5b6262 !important;}
.ensolnavagation ul li a:hover{border-bottom:none; background:none; color:#8dc63f !important;}
.ensolnavagation ul li:nth-child(2n+2) a:hover{color:#6ecff6 !important;}
.ensolnavagation li.hover ul a{background:none; border-bottom:none; color:#5b6262; background-image:none !important;}
.ensolnavagation ul li:nth-child(2n+2) a:hover{background:none;}

.ensolnavagation li:nth-child(2n+2) ul:before{border-bottom:#6ecff6 5px solid}

.toggled-controls{}

/* ========================= RESPONSIVE STYLES ======================== */
/* Responsive Images */


img, img.scale-with-grid { outline: 0; max-width: 100%; height: auto; }

@media only screen and (max-width:1216px) {
.container { width:100%; margin:0px auto; padding:0px 20px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
	/*.icon-squares-wrap ul li { width:20%; height:auto;}*/
	/*.icon-squares-wrap ul li p { font-size:19px;}*/
	* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.blue-content { font-size:25px;}
/*.icon-squares-wrap { margin-top:36%;}*/
.icon-squares-wrap.no-top-margin { margin-top:0;}

.technology_content{width:60%;}
.tech_right{width:38%; margin-left:2%;}

.casestudies_content{width:48%;}
.casestudies_slide{width:50%; margin-left:2%;}

.submit-btn, input[type="submit"]{margin-right:55px;}


.box_light{width:60%; left:19%; right:inherit; overflow:auto; height:350px;}
		
}

@media (max-width: 1000px){
.about-wrap-left{width:60%}
.about-wrap-right{width:36%; margin-left:2%;}
.about-wrap{margin-bottom:10px}
}

@media (max-width: 880px){
.ensolnavagation li{padding:0 4px;}	
.ensolnavagation li a{padding:0px 6px;}
.ensol_nav{width:500px;}
.row-one{padding:0px 10px;}
a.tonnes_carbon{margin-right:0;}
.icon-squares-wrap ul li{width:150px;}
.tech_menu{width:270px;}


#slideshow{height:280px;}
.column-one{margin-left:30px;}

.box_light{width:80%; left:9%; height:300px;}
}


@media (max-width: 768px){
.logo{float:none; text-align:center;}

a.tonnes_carbon{margin-bottom:7px;}
.toggled-controls{display:block;}
.ensol_nav{float:none; width:auto; padding-bottom:8px;}
.ensol_nav nav{background:#555555; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; padding:4px 0;}
.ensolnavagation{background:#555555; display:none; width:100% !important;}
.ensolnavagation li{border-bottom: 1px solid #333333; border-top: 1px solid #777777; display:block; padding:0;}
.ensolnavagation li a{border-bottom:none !important; background-image:none !important; color:#FFF; text-align:center; display:block; line-height:40px;}

.toggled-controls{color:#FFFFFF; text-align:left; padding:10px 13px 10px 13px; font-size: 16px; cursor:pointer; background:#555555;
color: white; text-shadow: 1px 1px 1px black; -webkit-text-shadow: 1px 1px 1px black; -moz-text-shadow: 1px 1px 1px black;}
.toggled-controls .menu_icn{background:url(../images/mobile_icn.png) right center no-repeat;}
.ensolnavagation ul{position:relative; border:none; background:rgba(65, 65, 65, 0.9); padding:0; margin:0;}
.ensolnavagation ul:before{display:none;}	
.ensolnavagation ul li{padding:0;}
.ensolnavagation li.hover ul a{color:rgba(255, 255, 255, 0.71);}
.ensolnavagation li:last-child{border-bottom:none;}

.body-wrapper{min-height:500px; margin-bottom:10px;}

h2.page_title{padding:13px 13px; font-size:20px;}
.blue-content{font-size:20px; line-height:25px;}

.about-wrap-left{width:auto; float:none; max-height:400px; overflow:auto;}
.about-wrap-right{display:none;}

.casestudies_content{float:none; width:100%; max-height:360px;}
.casestudies_slide{width:100%; float:none; margin-left:0; margin-top:20px;}



.icon-squares-wrap ul li{width:20%;}
.column-one{margin-left:20px;}


}

@media (max-width: 720px){
.icon-squares-wrap ul li{width:33%; margin-bottom:1px; text-align:center;}	
.icon-squares-wrap ul li a{display:block; width:100%;}
.icon-squares-wrap ul li img{display:inline-table;}
.icon-squares-wrap ul li p br{display:none;}

.body-wrapper{min-height:300px;}

.blue-content{width:95%;}

.tech_right{float:none; margin:0; width:auto; margin-bottom:20px;}
.tech_menu{width:auto;}
.technology_content{width:auto; float:none; margin-bottom:20px;}

.footer-logo{float:none; margin-bottom:25px;}
.column-one{width:45%; margin-bottom:10px; min-width:inherit;}
.website-by{padding-top:15px;}

.box_light{width:96%; left:2%; height:300px;}
}

@media (max-width: 480px){
h2.page_title{width:auto; min-width:inherit; display:block;}	
.icon-squares-wrap ul li{width:50%;}
.blue-content{font-size:15px; line-height:20px;}

.content_main{width:auto;}
.form-row-wrap label{float:none; width:100%; line-height:20px;}
.form-row-wrap textarea, .form-row-wrap input{float:none; width:100%;}
.submit-btn, input[type="submit"]{margin-right:0;}	
}


@media (max-width: 320px){
.icon-squares-wrap ul li{width:100%;}	
}