/* Fonts */
@import url(navigation.css);
@import url(font-awesome/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Cookie);
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);
/* Fonts */


html { margin: 0; padding: 0;}
body{ margin:0; padding:0; font:400 14px/22px Open Sans; color:#232121; font-weight: 400; background:#fff;}

/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */
div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, select, nav, img {padding:0; margin:0;}
img{border:0;}
ol, ul { list-style: none; }

*{
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;

-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
-ms-transition: background-color 1s;
transition: background-color 1s;
}
*:hover{
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;

-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
-ms-transition: background-color 1s;
transition: background-color 1s;
}

a{color:#84ca11; text-decoration:none;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
-ms-transition: background-color 1s;
transition: background-color 1s;
}
a:hover{text-decoration:underline;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
-ms-transition: background-color 1s;
transition: background-color 1s;
}

.left {float:left;}
.right {float:right;}

.aln-cntr{text-align:center; margin:10px auto 20px; display:block;}
.clear {clear:both;font-size:0;line-height:0;}
.bordr-none{border:none!important;}

ul.bull{list-style-type:none; float:left; margin:0 0 15px 0; clear:both;}
ul.bull li{float:left; clear:both; background:url('../images/bull.png') no-repeat 0 2px; padding-left:25px; margin-bottom:15px; /*text-align:justify;*/}

ol{list-style-type:none; float:left; margin:0 0 15px 0;}
ol li{float:left; clear:both; background:url('../images/bull.png') no-repeat 3px 6px; padding-left:18px; margin-bottom:4px; text-align:justify;}

.mrgn-top0{margin-top:0!important;}

.red{color:red;}

h1, h2, h3, h4, h5, h6{font-weight:500; line-height:100%; font-family:'Lora';}

hr{height:10px; display:block; overflow:hidden; width:100%; background:transparent; border:none; margin:0 0 50px;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07);
-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.07);
}


/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */

.wrap{width:1200px; margin:0 auto; position:relative; clear:both;}

.header-outer{background:#303030; width:100%; float:left;}
.logo{padding:15px; float:left; width:168px; -webkit-transition: 0.3s ease-in-out; /* Safari */ transition: 0.3s ease; text-align:center;}
.logo img{ width:100%; -webkit-transition: 0.3s ease-in-out; /* Safari */transition: 0.3s ease;}


.top-socil-icons{float:right; margin-top:40px;
-webkit-transition: 0.3s ease-in-out; /* Safari */
transition: 0.3s ease;
}
.top-socil-icons li{float:left; text-align:center;}
.top-socil-icons li a{padding:0 6px; display:block; color:#737373; font-size:20px; transition: color 2s;}
.top-socil-icons li a:hover{color:#bad80a;}

.header-navigation{z-index:100; position:relative; padding:30px 0 0 5%; float:left;
-webkit-transition: 0.3s ease-in-out; /* Safari */
transition: 0.3s ease;
}

.fix {
position:fixed; z-index:500;
top: 0;
left: 0;
right: 0;
margin: 0;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
}

.fix .header-navigation{padding-top:10px;}
.fix .logo{padding:7px 15px;}
.fix .logo img{width:60%;}
.fix .top-socil-icons{margin-top:18px;}




/* ----------------------- Banner Area Start ----------------------- */
.banner-area{display:block; clear:both; position:relative; overflow:hidden;}
.banner-area img{width:100%;}




.index-abt-area{margin:0 auto; background:#fff; width:1200px; position:relative; top:-40px; margin-bottom:-40px; z-index:100; display:table;}
.index-abt-area:before, .index-abt-area:after{position:absolute; content:url(../images/index-shadow.png); top:0; left:-80px; z-index:100; }
.index-abt-area:after{left:auto; right:-80px; transform:scaleX(-1);}

.index-abt-area > div{display:table-row; width:100%;}
.index-abt-area > div > div{display:table-cell; text-align:center; vertical-align:middle; color:#574836; box-sizing:border-box;}
.index-abt-area > div > div:first-child{width:47%;}
.index-abt-area > div:last-child > div:first-child{background:#c0c3af; padding:20px 40px;}
.index-abt-area > div:first-child > div:last-child{padding:20px 40px;}
.index-abt-area > div > div img{width:100%; height:100%;}
.index-abt-area > div > div h2{font-family:'Cookie'; font-size:55px; padding:10px 0; margin-bottom:10px; position:relative; text-align:center;}
.index-abt-area > div > div h2:after{display:block; content:url(../images/headre-after-bg.png);}
.index-abt-area > div > div p, .index-abt-area > div > div > div span{display:block; margin-bottom:15px;}
.index-abt-area > div > div span{font-size:26px; line-height:1.2; font-family:'Lora';}
.index-abt-area > div > div a{clear:both; display:inline; font-weight:800; text-transform:uppercase; color:#574836;}
.index-abt-area > div > div a:after{content:'\f0da'; margin-left:10px; font-size:16px; font-family:'FontAwesome'; display:inline;}
.index-abt-area > div > div a:hover{text-decoration:none; color:#368928;}



.inner-mid-area{display:block; background:#c0c3af; clear:both;}
.inner-mid-area > div{margin:0 auto; background:#000 url('../images/inner-bg.jpg') repeat; width:1200px; position:relative; top:-130px; margin-bottom:-130px; padding:15px 30px; z-index:100; display:block; min-height:600px; box-sizing:border-box;}
.inner-mid-area > div:before, .inner-mid-area > div:after{position:absolute; content:url(../images/index-shadow.png); top:0; left:-80px; z-index:100; display:block;}
.inner-mid-area > div:after{left:auto; right:-80px; transform:scaleX(-1);}


.content-area{display:block; color:#fff; overflow:hidden;}
.content-area h1{text-transform:uppercase; display:block; clear:both; margin-bottom:30px; font-size:35px; color:#92da19;}
.content-area h2{display:block; clear:both; margin-bottom:15px; padding:10px 0; font-size:26px; border-bottom:1px rgba(255,255,255,0.3) dotted; position:relative;}
.content-area h2:after{content:""; display:block; position:absolute; left:0; bottom:-2px; width:70px; height:3px; background:#84ca11;}
.content-area p{display:block; text-align:justify; margin-bottom:25px; clear:both;}

.content-area ol{list-style-type:none; float:left; margin:0 0 15px 0;}
.content-area ol li{float:left; clear:both; padding-left:18px; margin-bottom:5px; text-align:justify; position:relative;}
.content-area ol li:before{content:'\f054'; display:block; position:absolute; font-family:'FontAwesome'; left:0; top:1px; font-size:13px;}



.page-path{display:block; overflow:hidden; border-bottom:1px rgba(255,255,255,0.2) solid; padding:5px 0; margin-bottom:20px;}
.page-path li{display:inline-block;}
.page-path li:after{content:'\f101'; display:inline-block; color:#fff; font-family:'FontAwesome'; margin:0 10px;}
.page-path li a{color:#fff;}
.page-path li a:hover{text-decoration:none; color:#92da19;}


.page-number-area{display:block; overflow:hidden; padding:10px; border:1px rgba(255,255,255,0.2) dotted; margin-bottom:45px;}
.page-number-area ul{/*float:right;*/ font-size:15px; display:block; text-align:center;}
.page-number-area ul li{/*float:left;*/ display:inline-block; margin:0 10px; color:#fff;  font-weight:700;}
.page-number-area ul li a{color:#fff; font-weight:normal;}


.products-thumb{display:block; overflow:hidden; clear:both;}
.products-thumb li{background:#fff; float:left; width:27%; margin:0 3% 40px; position:relative; overflow:hidden; border-top:1px #84ca11 solid;}
.products-thumb li img{width:100%; float:left;
-webkit-transition: 0.5s ease-in-out; /* Safari */ 
transition: 0.5s ease;
}
.products-thumb li:hover img{opacity:0.3;}
.products-thumb li:after{content:'\f00e'; font-family:'FontAwesome'; display:block; width:36px; height:36px; background:rgba(0,0,0,0.7); border:1px rgba(0,0,0,0.5) solid; left:50%; top:0%; opacity:0; margin-left:-18px; margin-top:-18px; position:absolute; font-size:16px; line-height:36px; text-align:center; color:#fff;
-webkit-transition: 0.5s ease-in-out; /* Safari */ 
transition: 0.5s ease;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.products-thumb li:hover:after{top:50%; opacity:1;}
.products-thumb li a span{display:block!important; position:absolute; background:rgba(0,0,0,0.4); width:100%; color:#fff; text-align:center; top:-60px; padding:3px 0;
-webkit-transition: 0.5s ease-in-out; /* Safari */ 
transition: 0.5s ease;
}
.products-thumb li:hover a span{top:0;}




.recycled-bags{display:block; overflow:hidden; clear:both; background:#353535; color:#fff;}
.recycled-bags > div{display:table;}
.recycled-bags > div > div{display:table-cell; width:50%; vertical-align:middle;}
.recycled-bags > div > div:first-child{text-align:center;}
.recycled-bags > div > div h3{ font-size:40px; display:block; overflow:hidden; text-transform:uppercase; font-family:'Lora'; padding:12px 0; margin-bottom:15px; border:3px #9f9f9f dotted; border-left:none; border-right:none;}
.recycled-bags > div > div h3 span{font-weight:600; font-size:50px; color:#bad80a;}
.recycled-bags > div > div p{display:block; margin-bottom:15px;}
.recycled-bags > div > div a{clear:both; display:inline; font-weight:700; text-transform:uppercase; color:#bad80a;}
.recycled-bags > div > div a:after{content:'\f0da'; margin-left:10px; font-size:16px; font-family:'FontAwesome'; display:inline; color:#fff;}
.recycled-bags > div > div a:hover{text-decoration:none; color:#fff;}





.gallery-area{display:block; overflow:hidden; min-height:100px; clear:both; background:#97b669 url('../images/gallery-blur-bg.jpg') 50% 50% no-repeat; background-blend-mode:soft-light; position:relative; text-align:center; padding:20px 0 50px;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*.gallery-area:after{ content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; mix-blend-mode:soft-light;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}*/

.gallery-area > div{position:relative; z-index:100;}
.gallery-area > div h4{font-family:'Cookie'; font-size:60px; line-height:1.2; padding:0; margin-bottom:35px; position:relative; text-align:center; color:#fff;}
.gallery-area > div h4:after{display:block; content:url(../images/headre-after-bg2.png); mix-blend-mode: screen;}
.gallery-area > div > a{clear:both; display:inline; font-weight:700; text-transform:uppercase; color:#fff; padding:10px 15px; background:#27291b;}
.gallery-area > div > a:hover{text-decoration:none; color:#000; background:#fff;}

.gallery-area > div ul{display:block; overflow:hidden; clear:both; padding:0 0 35px;}
.gallery-area > div ul li{width:25%; float:left; background:#000; position:relative; overflow:hidden;}
.gallery-area > div ul li img{width:100%; float:left; -webkit-transition: 0.3s ease-in-out; /* Safari */ transition: 0.3s ease;}
.gallery-area > div ul li:hover img{opacity:0.2;}
.gallery-area > div ul li:after{content:'\f00e'; font-family:'FontAwesome'; display:block; width:30px; height:30px; left:50%; top:0%; opacity:0; margin-left:-15px; margin-top:-15px; position:absolute; font-size:30px; color:#fff;
-webkit-transition: 0.5s ease-in-out; /* Safari */ 
transition: 0.5s ease;
}
.gallery-area > div ul li:hover:after{top:50%; opacity:1;}




.footer{display:block; background:#2b2b2b; padding:30px 0 15px; color:#999; clear:both;}
.footer > div{display:table;}
.footer > div > div{display:table-cell; width:25%; box-sizing:border-box; padding:0 25px; border-left:1px rgba(255,255,255,0.2) solid;}
.footer > div > div h5{font-weight:600; font-size:18px; margin-bottom:15px; color:#fff;}
.footer > div > div ul{display:block; overflow:hidden; clear:both;}
.footer > div > div ul li{margin:0 0 5px;}
.footer > div > div ul li a{color:#999;}
.footer > div > div > a{width:30px; height:30px; text-align:center; float:left; background:#646464; color:#2b2b2b; margin-right:3px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.footer > div > div > a i{line-height:30px; font-size:18px;}
.footer > div > div > a:hover{background:#bad80a;}
.footer > div > div > span{clear:both; display:block; padding:10px 0 0; color:#595959;}






/* ------------------- Contact Details ----------------- */

.contact-area{display:table; width:100%;}
.contact-area > div{display:table-cell; padding:0 25px 0 0; box-sizing:border-box; width:50%; vertical-align:top;}
.contact-area > div:last-child{padding-left:25px;}
.contact-area > div span{display:block; overflow:hidden; clear:both; padding:0 0 10px; border-bottom:1px #ddd solid; margin-bottom:20px;}
.contact-area > div span img{width:200px;}
.contact-area > div ul{display:block; clear:both; overflow:hidden; padding-bottom:20px; font-size:17px;}
.contact-area > div ul li{position:relative; padding:0 0 10px 25px;}
.contact-area > div ul li:before{position:absolute; left:3px; top:2px; content:'\f041'; font-size:16px; font-family:'FontAwesome'; color:#4a4a4a;}
.contact-area > div ul li:nth-child(2):before{content:'\f095';}
.contact-area > div ul li:nth-child(3):before{content:'\f1ac';}
.contact-area > div ul li:last-child:before{content:'\f0e0'; font-size:14px;}

.contact-area > div h3{margin-bottom:15px; font-weight:600; display:block;}
.contact-area > div form{display:block; clear:both;}
.contact-area > div form input, .contact-area > div form textarea{width:100%; padding:8px; box-sizing:border-box; border:1px #dedcd7 solid; margin-bottom:10px; font-size:15px;}
.contact-area > div form input:focus, .contact-area > div form textarea:focus{border-color:#84ca11;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
}

.contact-area > div form input[type="submit"]{border:none; background:#4a4a4a; color:#fff; text-transform:uppercase; font-weight:600; cursor:pointer;}
.contact-area > div form input[type="submit"]:hover{background:#e66337;}

.contact-area > div iframe{padding:8px; background:#fff; display:block; margin-top:8px; margin-bottom:10px;
-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
}




.projects-box{display:block; overflow:hidden; clear:both; padding:30px 0;}
.projects-box li{display:block; overflow:hidden; margin-bottom:50px; position:relative; clear:both;}
.projects-box li:last-child{margin-bottom:0;}
.projects-box li img{float:left;}
.projects-box li > div{width:42%; background:#2c2a2b; padding:40px; z-index:100; position:absolute; right:0px; top:8%;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}
.projects-box li > div h2{margin-bottom:20px; color:#fff;}
.projects-box li:nth-child(even) img{float:right;}
.projects-box li:nth-child(even) > div{left:5px;}



.colours{display:block; overflow:hidden; margin-bottom:30px;}
.colours li{width:12.5%; float:left; box-sizing:border-box; padding:10px; text-align:center; border:1px rgba(255,255,255,0.2) dotted;}
.colours li span{display:block; clear:both; overflow:hidden;}





/* Paralex Design */

.parallax {
  min-height: 350px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding:40px 0; border-bottom:25px #fff solid; clear:both;
}


.parallax-1 {background-image: url("../images/blue-bg.jpg");}


.certifications{display:block; overflow:hidden; clear:both;}
.certifications li{width:22.5%; margin:1%; display:inline-table; vertical-align:bottom; text-align:center;}
.certifications li a{display:block; overflow:hidden; /*height:320px;*/ position:relative;}
.certifications li a img{max-height:100%; max-width:100%;}
.certifications li span{min-height:60px; display:block; font-size:14px; padding:5px 10px;}











/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media all and (max-width: 1190px) {
.wrap, .index-abt-area, .inner-mid-area > div{width:98%;}
.index-abt-area:before, .index-abt-area:after, .inner-mid-area > div:after, .inner-mid-area > div:before{display:none;}
}
@media all and (max-width: 1030px) {
.index-abt-area > div > div:first-child{width:50%;}
.index-abt-area > div:last-child > div:first-child, .index-abt-area > div > div:first-child > div:last-child{padding:10px 15px;}
.index-abt-area > div > div span{font-size:22px; line-height:1;}

.aln-cntr img{width:100%;}

}

@media all and (max-width: 810px){
.header-navigation{clear:both; float:none; overflow:hidden; background:#6a6a6a; padding:0; margin:0 0 10px;}
.logo{text-align:center; display:block; overflow:hidden; float:none; border-bottom:1px #4a4a4a solid; width:auto;}
.logo img{width:auto;}
.top-socil-icons{float:none; margin:0 auto; width:175px; padding:15px 0 35px;}

.fix {position:static;}
.fix .header-navigation{padding-top:0;}
.fix .logo{padding:15px;}
.fix .logo img{width:auto;}
.fix .top-socil-icons{margin-top:0;}


.index-abt-area{top:0; margin-bottom:0;}
.index-abt-area > div > div{display:block; clear:both;}
.index-abt-area > div > div:first-child{width:100%;}
.index-abt-area > div:first-child > div:first-child{display:none;}
.index-abt-area > div:last-child > div:last-child{display:none;}

.contact-area > div{display:block; clear:both; padding:0 0 15px!important; width:100%;}
.contact-area > div iframe{margin:0 5px; width:97%; display:block;}


.projects-box li{text-align:center;}
.projects-box li > div{width:100%; position:static; background:none; clear:both; box-sizing:border-box; padding:20px; text-align:left;}
.projects-box li img, .projects-box li:nth-child(even) img{float:none;}

.colours li{width:20%;}

}


@media all and (max-width: 650px){
.recycled-bags > div > div h3{ font-size:36px;}
.recycled-bags > div > div h3 span{font-size:48px;}


.footer{padding:10px 0;}
.footer > div > div{display:block; overflow:hidden; text-align:center; width:auto; border-left:none; border-bottom:1px rgba(255,255,255,0.1) solid; padding:25px 0;}
.footer > div > div:last-child{border-bottom:0;}
.footer > div > div ul li{margin:0 10px 0; display:inline;}
.footer > div > div > a{float:none; display:inline-table;}

.products-thumb li{width:46%; margin:2%;}


.inner-mid-area > div{top:0px; margin-bottom:0px;}

.projects-box li > div{padding:0;}
.projects-box li img{width:100%;}

.colours li{width:25%;}

}


@media all and (max-width: 490px){
.recycled-bags{padding:30px 10px;}
.recycled-bags > div > div{display:block; width:100%;}
.recycled-bags > div > div:first-child{display:none;}

.gallery-area{background-image:none;}
.gallery-area > div ul li{width:50%;}

.content-area h1{font-size:22px;}

.colours li{width:50%;}

}

@media all and (max-width: 370px){
}





/* -------------- Chrome Only ------------------ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}