body{background-color:#f5f5f6; font-family: 'Barlow', sans-serif; color:#464b3e; background-image:URL(/img/site-bak.jpg);}
header{background-image:URL(/img/foot-bak.jpg); width:100%; position:absolute; z-index:10}
a{color:#bed786; text-decoration:none; transition:color 300ms;}
a:hover{color:#fff;}
.row{margin:auto;}
.col{padding:auto;}
.clearBoth{clear:both;}
h1{color:#889d63; font-weight:700; font-size:42px; margin:10px 0 15px 0;}
h1.dark{color:#152D10;}
h2{color:#889d63; font-size:56px; font-weight:700; text-align:center;}
/*Header*/
nav{padding:40px 20px 33px 20px; max-width:1440px; margin:auto;}
nav .logo{width:366px;}
nav .nav-account{margin-top:-8px;}
nav .main-nav{margin-top:31px; list-style:none; margin-left:0; padding:0; display:flex; justify-content: right;}
nav .main-nav li ul{display:none; }
nav .main-nav li ul li{background-color: #fff; padding: .3em 0.6em .4em 0.6em; border: solid 1px #000; width:103px;}
nav .main-nav li:hover ul{display:block; position:absolute; left:0px; padding:0;}
nav .main-nav li ul li a{color:#bbb; font-size:19px;}
nav .main-nav li ul li:hover a{color:#829D64;}
nav .main-nav li{list-style:none; padding:0; margin:0; margin-right:40px; font-weight:600; font-size:21px; color:#bed786; position:relative;}
nav .main-nav li:hover{color:#fff;}
nav .nav-links a{font-weight:600; font-size:21px; display:inline-block;}
nav .nav-links a.thisPage{color:#fff;}
nav .nav-links .social{margin-right:0; margin-top:-5px;}
nav a.social.facebook{margin:-5px 8px 0 8px;}
nav a.social img{width:38px;  transition: 300ms;}
nav a.social img.cart{width:46px; height:auto;}
nav a.social:hover{filter: brightness(220%) saturate(20%);}
nav a.account{font-size:18px;}
nav .navburger-mobile{display:none;}
.mobile-nav{display:none;}
.button{display:inline-block; padding:10px 35px 12px 35px; background-color:#1b2c0f; border-radius:7px; font-weight:600; font-size:26px; cursor:pointer;}
.buttonGreen{display:inline-block; padding:10px 35px 10px 35px; background-color:#889d63; color:#fff; border-radius:7px; font-weight:600; font-size:26px; cursor:pointer}
.buttonGreen:hover{color:#1b2c0f;}
main{max-width:1440px; margin:auto; padding-top:200px;}
/*Home*/
#home{z-index:1; padding-top:155px;}
#home main{padding-top:0;}
#home .homeHero{width:100%; height:auto;}
#home hr{opacity:1; margin:auto; border-bottom:dotted 2px #3f5d39; width:95%; border-top:none; border-left:none; border-right:none; margin-top:40px; clear:both;}
#home .bigboy{font-size:80px; line-height:66px; display:inline-block; padding:5px 0 5px 0;}
#home .homeCol{width:33.3%; float:left; display:inline-block; text-align:center; font-size:28px; font-weight:600; line-height:27px; margin:40px 0 40px 0;}
#home .homeCol1{padding-top:30px;}
#home .homeCol1 span.smallBoy{font-size:20px;}
#home .homeCol3{padding-top:15px;}
#home .homeCol2 img{width:110px; height:auto; margin-top:15px;}
#home .homeCol3 img{width:70%; height:auto; margin-bottom:10px;}
#home h1{color:#152D10; margin-top:50px;}
#home h2{color:#152D10; font-size:36px; margin-top:50px;}
#home h3{color:#152D10; font-size:21px; margin-top:10px; font-weight:600;}
#home .ecoDifference{width:100%; min-height:300px; border:dotted 2px #3f5d39; border-radius:40px; background-image:URL('img/eco-difference-dot.png'); background-repeat:repeat; margin-top:100px; position:relative;}
#home .ecoDifference img{position:absolute; left:calc(50% - 75px); top:-67.5px; width:150px; height:auto;}
#home .ecoDifference .colContain{font-size:16px; padding:10px 50px 30px 50px; line-height:22px;}
#home .ecoDifference .colContain strong{font-size:20px; display:block; padding-bottom:10px;}
#home .ecoDifference .colSide{display:inline-block; width:25%; float:left; padding:20px 15px 10px 15px;}
#home .ecoDifference .colMid{display:inline-block; width:50%; float:left; padding:20px 55px 10px 55px;}
#home .btnContain{padding:45px 0 45px 0}
/*About*/
#about{width:100%; padding:0px 20px 20px 20px; text-align:center; max-width:1100px; margin:auto; font-size:24px; line-height:34px; font-weight:500;}
#about .about-products{width:60%; margin:25px 0 25px 0;}
#about-chart{width:100%; padding:0px; max-width:1260px; margin:auto;}
#about-chart .line-row{margin:70px 0 50px 0;}
#about-chart .line-row img{margin-bottom:-31px;}
#about-chart .line-col{border-bottom:solid 2px #889d63; width:46%;}
#about-chart .line-col-icon{width:8%; text-align:center;}
#about-chart .black-center-34{margin:20px auto 0 auto; font-size:34px; line-height:38px; font-weight:500; text-align:center; width:55%;}
/*About-Chart*/
#chart{color:#6c6d68; font-weight:600; font-size:22px; margin-top:40px;}
#chart h4{color:#75816a; font-weight:700; font-size:28px;}
#chart h4.black{font-size:37px;}
#chart .black{color:#464b3e; font-weight:700;}
#chart span{font-weight:700; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
#chart .chartRow1{background-image:URL('/img/chart-good-bak.png');}
#chart .chartGood span{font-size:50px; color:#7c8673;}
#chart .chartRow2{background-image:URL('/img/chart-better-bak.png');}
#chart .chartBetter span{font-size:52px; font-weight:700; color:#1b2c0f;}
#chart .chartRow3{background-image:URL('/img/chart-best-bak.png');}
#chart .chartBest span{font-size:70px; color:#bfd888;}
#chart .chartTextCol{position:relative;}
#chart .chartText{width:85%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
#chart .chartTextFoot{width:85%; position:absolute; top:55%; left:50%; transform: translate(-50%, -50%);}
#chart .chartRow4{background-color:#1b2c0f; margin-top:-2px;}
#chart .chartColNoPadding{padding:0; position:relative;}
#chart .chartColIcon{position:relative}
#chart .chartColIcon img{width: 55%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#chart img.chartFoot{width:87%; margin:50px 0 50px 0;}
#chart img.chartFootLogo{width:715px;}
#chart .chartFootSub{color:#fff; font-size:46px; font-weight:700; padding-top:12px; display:block; margin-bottom:5px;}
#chart .chartFootText{color:#889d63; font-size:29px; line-height:36px; padding-bottom:25px;}
/*Learn More*/
#learn-more{width:100%; padding:20px 40px 120px 40px; max-width:1300px; margin:auto; font-size:17.5px; line-height:25px; font-weight:600;}
#learn-more h2{font-size:39px; margin:70px 0 30px 0; text-align:left;}
#learn-more span{font-size:29px; font-weight:600; color:#889d63; text-decoration:underline; margin:20px 0 12px 0; display:inline-block;}
/*Products*/
#products{font-size:16px; line-height:26px; font-weight:600; width:100%; padding:20px 40px 120px 40px; max-width:1440px; margin:auto}
#products h1{font-size:38px; margin:0 0 35px 0;}
#products h2{font-size:24px; text-align:left; margin-top:35px;}
#products img{width:100%;}
#products .product-thumb-wrap{padding:40px 0 0 0;}
#products .product-thumb{width:21%; float:left; margin-right:5.3%; padding:0;}
#products .product-space{width:5.3%; float:left; padding:0;}
#products .productImageWrap{width:47%;}
#products .productSpacer{width:6%;}
#products .productProdsWrap{width:47%;}
#products .product-item{text-align:center; width:22%; margin-right:3.33%; display:inline-block; float:left; color:#879c62;}
#products .itemTitle{display:block; font-size:22px; margin-top:5px;}
#products .itemCount{display:block; font-size:14px; line-height:14px;}
#products .itemCost{display:block; font-size:22px; margin-top:15px;}
#products .productImg{width:100%;}
#products .itemQty{padding:10px 0 10px 20px; text-align:left; border:solid 2px #879c62; color:#879c62; font-weight:600; margin-top:5px;}
#products .itemQtyTitle{}
#products .itemAdd{display:block; font-size:14px; color:#1b2c0f; text-decoration:underline; margin-top:4px;}
#products .productTotalWrap{margin-top:25px;}
#products .productTotalCol{padding-top:9px; text-align:center;}
#products .cartTotalTitle{font-size:30px;}
#products .cartTotal{font-size:30px; margin-left:20px; color:#879c62;}
#products .customRow{margin-top:60px;}
#products .customCol{font-size:16px; line-height:20px;}
#products .cartNote{font-size:24px; color:#879c62; font-weight:600;}
#products .buttonGreen{font-size:20px;}
#products .badgesRow{text-align:right; font-size:12px; margin-top:50px; color:#879c62; font-weight:700; line-height:22px; padding-right:45px;}
#products .badgesImg{width:296px; margin:6px 0 6px 0;}
#products .no-margin{margin:0;}
#products .openingSoon{font-size:1.3em; margin-top:2em;}
/*Media*/
#media h1{text-align:center; font-size:48px; margin: 10px 0 0px 0;}
#media h2{color:#1b2c0f; text-align:center; font-weight:500; font-size:33px;}
#media .mediaWrap{margin:60px 0 50px 0; padding:0 2% 0 2%; text-align:right;}
#media .mediaWrap .row{padding-bottom:22px;}
#media img{width:100%; opacity:.5; cursor:pointer;}
#media a .mediaTitle{display:block; font-size:33px; color:#889d63; font-weight:700; line-height:33px; padding-top:12px; cursor:pointer;}
#media a .mediaDate{display:block; font-size:18px; color:#1b2c0f; font-weight:600; cursor:pointer;}
#media a:hover .mediaDate{opacity:.5;}
#media a:hover .mediaTitle{opacity:.7;}
#media a:hover img{opacity:1;}
#media a.mediaTitle{display:block; font-size:33px; color:#889d63; font-weight:700; line-height:33px; margin-top:12px; cursor:pointer;}
#media a.mediaDate{display:block; font-size:18px; color:#1b2c0f; font-weight:600; cursor:pointer;}
#media .pd-2{padding:0 2% 0 2%;}
/*Contact*/
#contact{padding:0 40px 0 40px;}
#contact h1{font-weight:600; font-size:44px;}
#contact h2{font-weight:600; font-size:28px; text-align:left;}
#contact h3{font-size:33px; color:#889d63; padding-bottom:15px;}
#contact .contactWrap{}
#contact form{margin:30px 0 40px 0;}
#contact label{color:#1b2c0f; display:block; font-weight:600; font-size:21px; line-height:40px;}
#contact input{width:100%; border:solid 2px #889d63; padding:10px; margin-bottom:15px;}
#contact textarea{width:100%; border:solid 2px #889d63; padding:10px; margin-bottom:15px; height:120px;}
#contact .btnContain{text-align:right; width:50%;}
#contact a.button{padding: 5px 30px 6px 30px; font-size:20px;}
#contact .directlyWrap{padding-bottom:60px;}
#contact .directCol{width:50%; float:left; font-size:21px; font-weight:600; line-height:35px;}
#contact .directCol a{color:#1b2c0f;}
#contact .directCol a:hover{opacity:.6;}
#contact .contactStack{width:50%;}
#contact .contactStackCol{width:45%; float:left;}
#contact .contactStackColMargin{margin-left:10%;}
/*Footer*/
footer{text-align:center; background-image:URL(/img/foot-bak.jpg); width:100%; padding-top:35px;}
footer .footLogo{width:245px; height:121px;}
footer a.social{width:30px; margin:12px 2px 0 2px;}
footer a.social:hover{filter: brightness(220%) saturate(20%);}
footer .footNav a{font-size:16px; display:inline-block; margin:15px 15px 10px 15px; font-weight:600; line-height:14px;}
footer .footSocial{margin-top:27px;}
footer .footSocial img{width:29px;}
footer .copyright{color:#bfd888; font-size:11.5px; padding:28px 0 15px 0;}
	
@media (max-width: 1300px) {
	/*Header*/
	nav{padding:30px 20px 30px 20px;}
	nav .nav-links a{font-size:15.5px;}
	nav .main-nav li{font-size:15.5px; margin-right:30px;}
	nav a.account{font-size:14px;}
	nav a.social img.cart{width:36px; height:auto;}
	nav a.social img{width:28px;}
	/*Home*/
	#home{padding-top:142px;}
	/* All Pages*/
	main{padding-top:170px;}
	/*Learn-More*/
	#learn-more{padding:0px 40px 80px 40px;}
	/*Products*/
	#products .cartTotalTitle{font-size:26px;}
	#products .cartTotal{font-size:26px; margin-left:10px;}
	#products .button{font-size:20px;}
	
}
@media (max-width: 1100px) {
	/*Header*/
	nav{padding:30px 20px 25px 20px;}
	nav .logo{width:300px;}
	nav .nav-links a{font-size:14px;}
	nav .nav-links li{font-size:14px; margin-right:20px;}
	nav .nav-account{margin-top:-4px;}
	nav .main-nav{margin-top:22px;}
	nav a.account{font-size:12px;}
	nav a.social img.cart{width:30px; height:auto;}
	nav a.social img{width:28px;}
	nav .nav-links a.social{margin-top:-2px;}
	nav a.social.facebook{margin:-2px 8px 0 8px;}
	/*Home*/
	#home{padding-top:122px;}
	#home h1{color:#152D10; margin-top:50px;}
	#home #about{font-size:20px;}
	#home .bigboy{font-size:60px; line-height:60px; padding:0;}
	#home .homeCol1{padding-top:30px;}
	#home .homeCol1 span.smallBoy{font-size:20px;}
	#home .homeCol3{padding-top:15px;}
	#home .homeCol2 img{width:100px;}
	#home .homeCol3 img{width:60%;}
	#home .button{font-size:22px;}
	/* All Pages*/
	main{padding-top:150px;}
	/*About*/
	h2{font-size:42px;}
	#chart .chartText{font-size:19px; line-height:24px;}
	#chart h4{font-size:26px;}
	#about-chart .line-col{width:45%;}
	#about-chart .line-col-icon{width:10%;}
	/*Learn More*/
	#learn-more{font-size:15px; line-height:23px; padding:0 40px 80px 40px;}
	#learn-more span{font-size:24px;}
	#learn-more h2{font-size:35px; margin:60px 0 20px 0;}
	/*Products*/
	#products .button{font-size:16px;}
	#products .buttonGreen{font-size:16px;}
	#products .cartNote{font-size:20px;}
	#products .customCol{font-size:12px; line-height:14px;}
	#products .itemAdd {font-size:13px;}
	#products .customRow{margin-top:40px;}
	/*Media*/
	#media a .mediaTitle{font-size:28px;}
	/*Contact*/
	#contact h1.dark{font-size:38px;}
}
@media (max-width: 1000px) {
	h1{font-size:35px;}
	h2{font-size:32px;}
	.buttonGreen{font-size:20px; padding:6px 20px 6px 20px;}
	.nav-links{display:none;}
	nav .navburger-mobile{display:block;}
	.mobile-nav{margin-top:20px;}
	.mobile-nav a{display:block; font-size:17px; font-weight:600; border-top:solid 1px #fff; padding:20px;}
	.navburger{display:inline-block; float:right; margin-top:8px;}
	.navburger img{width:50px;}
	/*Home*/
	#home h3{font-size:18px; display:block; padding: 0 20px 0 20px;}
	#home .ecoDifference .colContain{padding:10px 20px 10px 20px; font-size:14px;}
	#home .ecoDifference .colContain strong{font-size:16px;}
	#home .ecoDifference .colSide{padding:20px 10px 20px 10px; width:30%;}
	#home .ecoDifference .colMid{padding:20px; width:40%}
	/*About*/
	#about-chart .black-center-34{font-size:25px; width:80%; line-height:28px;}
	#about-chart .line-col{width:42%;}
	#about-chart .line-col-icon{width:16%;}
	#chart .chartGood span{font-size:26px;}
	#chart .chartBetter span{font-size:26px;}
	#chart .chartBest span{font-size:40px;}
	#chart img.chartFootLogo{width:360px;}
	#chart .chartFootSub{font-size:23px;}
	#chart .chartFootText{font-size:20px; line-height:26px; padding-bottom:10px;}
	#chart .chartText{font-size:12px; line-height:16px;}
	#chart h4{font-size:16px; margin-bottom:0;}
	#chart h4.black{font-size:16px; margin-bottom:0;}
	#about .about-products{width:70%;}
	/*Products*/
	#products .productImageWrap{width:100%;}
	#products .productProdsWrap{width:100%;}
	#products .productSpacer{display:none;}
	#products h1{font-size:30px;}
	/*Media*/
	#media a .mediaTitle{font-size:20px; padding-top:8px; line-height:20px;}
	#media a .mediaDate{font-size:14px;}
	/*Contact*/
	#contact h1.dark{font-size:33px;}
	#contact h2{font-size:24px;}
	#contact .directCol{width:100%; padding-bottom:20px;}
	#contact .btnContain{width:75%;}
	#contact .contactStack{width:75%;}
}
@media (max-width: 700px) {
	h1{font-size:26px;}
	h2{font-size:26px;}
	/*Home*/
	#home h2{font-size:30px;}
	#home .bigboy{font-size:40px; line-height:40px; padding:0;}
	#home .homeCol1{padding-top:30px; font-size:16px; line-height:20px;}
	#home .homeCol1 span.smallBoy{font-size:14px;}
	#home .homeCol3{padding-top:30px; font-size:16px; line-height:20px;}
	#home .homeCol2{font-size:16px; line-height:20px;}
	#home .homeCol2 img{width:80px;}
	#home .homeCol3 img{width:60%;}
	
	/*About*/
	#about{font-size:20px; line-height:28px;}
	#about-chart .line-col{width:41%;}
	#about-chart .line-col-icon{width:18%;}
	/*Learn More*/
	#learn-more span{font-size:20px;}
	#learn-more h2{font-size:26px; margin:60px 0 20px 0;}
	/*Media*/
	#media h1{font-size:40px}
	#media h2{font-size:25px;}
	#media .mediaWrap {padding: 0;}
	#media a .mediaTitle{font-size:16px; padding-top:8px; line-height:20px;}
	#media a .mediaDate{font-size:12px;}
	/*Contact*/
	#contact{padding: 0 25px 0 25px;}
	#contact h1.dark{font-size:24px;}
	#contact h2{font-size:18px;}
	#contact .directCol{font-size:18px;}
	#contact label{font-size:19px;}
	#contact .btnContain{width:100%;}
	#contact .contactStack{width:100%;}
}
@media (max-width: 500px) {
	.button{font-size:16px; padding:4px 15px 4px 15px;}
	.buttonGreen{font-size:16px; padding:4px 15px 4px 15px;}
	main{padding-top:130px;}
	nav .logo{width:230px;}
	.navburger{margin-top:6px;}
	.navburger img{width:40px;}
	/*Home*/
	#home{padding-top:106px;}
	#home h1{font-size:22px; margin-top:40px;}
	#home #about{font-size:16px; line-height:20px;}
	#home .bigboy{font-size:35px; line-height:35px; padding:0;}
	#home .homeCol1{padding-top:30px; font-size:16px; line-height:20px; width:100%; margin:20px 0 25px 0;}
	#home .homeCol1 span.smallBoy{font-size:14px;}
	#home .homeCol3{padding-top:0; font-size:16px; line-height:20px; width:100%; margin:20px 0 40px 0;}
	#home .homeCol2{font-size:16px; line-height:20px; width:100%; margin:20px 0 25px 0;}
	#home .homeCol2 img{width:80px; margin-top:10px;}
	#home .homeCol3 img{width:40%;}
	#home h2{font-size:25px;}
	#home .button{font-size:18px; padding:15px 25px 15px 25px;}
	#home h3{font-size:16px; display:block; padding: 0 20px 0 20px;}
	#home .ecoDifference .colContain{padding:10px 20px 30px 20px; font-size:14px;}
	#home .ecoDifference .colContain strong{font-size:16px; padding-bottom:0px;}
	#home .ecoDifference .colSide{padding:10px; width:100%;}
	#home .ecoDifference .colMid{padding:10px; width:100%}
	/*About*/
	#about .about-products{width:90%;}
	#chart img.chartFootLogo{width:260px;}
	#about{font-size:16px; line-height:22px;}
	#chart .chartGood span{font-size:18px;}
	#chart .chartBetter span{font-size:18px;}
	#chart .chartBest span{font-size:28px;}
	#about-chart .line-row{margin:40px 0 50px 0;}
	#about-chart .line-col{width:37%;}
	#about-chart .line-col-icon{width:26%;}
	#about-chart .black-center-34{width:90%; font-size:22px;}
	#chart .chartFootSub{font-size:17px;}
	#chart .chartFootText{font-size:15px; line-height:20px; padding-bottom:3px;}
	#chart .chartColIcon{display:none}
	#chart .col-6.chartTextCol{width:75%;}
	#chart h4{font-size:13px;}
	#chart .chartText{font-size:11px; font-weight:400; line-height:13px; width:90%;}
	/*Learn More*/
	#learn-more{font-size:14px; line-height:20px; padding:15px 25px 60px 30px;}
	#learn-more span{font-size:18px;}
	#learn-more h2{font-size:26px; margin:50px 0 20px 0;}
	/*Products*/
	#products h1{font-size:25px;}
	#products{padding:20px 15px 60px 15px;}
	#products .col-6{width:100%; margin-bottom:10px; text-align:left;}
	#products .customCol{font-size:14px;}
	#products .badgesImg{width:100%;}
	#products .itemTitle{font-size:18px;}
	#products .itemQty{padding:5px 0 5px 5px;}
	#products .product-item{width:45%; margin-right:5%; float:left; margin-bottom:20px;}
	#products .openingSoon{font-size:1em; margin-top:1.5em; line-height:1.3em;}
	/*Media*/
	#media h1{font-size:26px}
	#media h2{font-size:18px;}
	#media .mediaWrap {margin: 40px 15px 30px 15px;}
	#media .col-4{width:100%!important;}
	#media a .mediaTitle{font-size:24px; padding-top:12px; line-height:28px;}
	#media a .mediaDate{font-size:16px; padding-bottom:25px;}
	/*Contact*/
	#contact h1.dark{font-size:16px;}
	#contact h2{font-size:14px;}
	#contact h3{font-size:26px;}
	#contact a.button{font-size:16px;}
	#contact .directCol{font-size:14px; line-height:22px;}
	#contact label{font-size:16px;}
	#contact textarea {padding:5px; width:100%;}
	#contact label{font-size:16px; line-height:25px;}
	#contact .btnContain{width:100%;}
	#contact .directlyWrap{padding-bottom:40px;}
	#contact input{font-size:12px;}
	#contact .btnContain{width:100%;}
	#contact .contactStack{width:100%;}
	#contact .contactStackCol{width:45%; float:left;}
	#contact .contactStackColMargin{margin-left:10%;}
}