div,
div * {
    /*border: 1px dotted gray;*/
}
a,
a:link,
a:visited,
a:hover,
a img {
    outline: none;
    border: none;
    color: #136D2D;
}
html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    background: #75B32F;
}

/* ******************** .section#header ******************** */

#header {
    background: url(../images/header_bkg.jpg) center top no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0 0 32% 0;
}
#logo {
    position: relative;
    margin: 0 40px;
    width: 218px;
    height: 154px;
}
#logo img {
    display: block;
    width: 218px;
    height: 154px;
}
img#logoreg {
    position: absolute;
}
img#logohov {
    position: absolute;
    display: none;
}
#logo:hover #logohov {
    display: block;
}
#logo:hover #logoreg {
    display: none;
}
/* ******************** .section#topnav ******************** */

#topnav {
    background: gray;
    position: relative;
    width: 100%;
}
#topnav .control {
    display: flex;
}
.navbox {
    position: relative;
    flex: 1;
    margin: 0;
    padding: 30px 30px 100px 30px;
    color: #fff;
    min-height: 150px;
}
#topnav:after {
    content: " ";
    display: block;
    clear: both;
}
.navbox h3 {
    display: block;
    max-width: 400px;
    margin: 0 auto 25px auto;
    padding: 0 0px;
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
    font-family: "Arial Black", Gadget, sans-serif;
    text-transform: uppercase;
    font-size: 32px;
    letter-spacing: 1px;
}
.navbox .reflow {
    display: inline-block;
    width: 210px;
}
#navworks .reflow {
    display: inline-block;
    width: 244px;
}
.navbox p {
    max-width: 400px;
    margin: 0 auto;
    padding: 0 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 160%;
}
.arrowgo {
    position: absolute;
    bottom: 40px;
    clear: both;
    display: block;
    width: 30%;
    min-width: 35px;
    height: 26px;
}
.arrowgo a {
    margin: 0;
    padding: 0;
    display: block;
}
.arrowgo img {
    width: 35px;
    height: 26px;
}
#navdifferent {
    background: url(../images/navdifferent.png) center center no-repeat #0a6e28;
    background-size: cover;
}
#navworks {
    background: url(../images/navmade.png) center center no-repeat #6baf20;
    background-size: cover;
}
#navmade {
    background: url(../images/navworks.png) center center no-repeat #91cb57;
    background-size: cover;
}
#navdifferent:hover,
#navmade:hover,
#navworks:hover {
    border: 8px solid rgba(255, 255, 255, 1.0);
    background-color: rgba(195, 101, 1, 0.9);
    padding: 22px 22px;
}
.navbox:hover .arrowgo {
    bottom: 32px;
}
/* ******************** .section#expandables ******************** */

#expandables {
    background: gray;
}
.expandbox {
    background: tan;
}
.expandbar {
    position: relative;
    margin-bottom: 0px;
}
#contact .expandbar{
margin-top:-26px;
}
.expandbar span {
    display: block;
    width: 100%;
    background: white;
    margin: 0;
    padding: 40px 0;
    text-align: center;
    text-transform: uppercase;
    color: #006F43;
}
.expandbar:after {
    position: relative;
    top: -2px;
    content: " ";
    display: block;
    position: relative;
    z-index: 9999;
    margin: 0 auto;
    width: 0px;
    border-left: 65px solid transparent;
    border-right: 65px solid transparent;
    border-top: 30px solid #fff;
}
/* *************************************** different */

.expandbox#different {
    background: url(../images/differentbkg.jpg) center center no-repeat;
    background-size: cover;
    padding-bottom: 10px;
}
#diffwrapper {
    margin: 0 100px;
}
#diffwrapper #diffcols {
    text-align: center;
    padding-top: 60px;
    display: flex;
    justify-content: space-around;
}
.diffcol {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    display: inline-block;
    max-width: 550px;
    /*min-height: 400px;*/
    /* depends on content */
    
    margin: 0 auto 50px auto;
    text-align: left;
    background: #fff;
    border-radius: 0px 0px 8px 8px;
}
.diffcol input {
    display: none;
}
#difftwo {
    margin: 0 25px 50px 25px;
}
.diffcol h3 {
    display: block;
    margin: 0;
    padding: 32px 10px 30px 10px;
    color: #fff;
    font-family: "Arial Black", Gadget, sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-size: 21px;
    letter-spacing: 1px;
}
#diffone h3,
#typeone {
    background: url(../images/compostbkg.png) center center no-repeat #157030;
    background-size: cover;
}
#difftwo h3,
#typetwo {
    background: url(../images/compostbkg.png) center bottom no-repeat #8b662c;
    background-size: cover;
}
#diffthree h3,
#typethree {
    background: url(../images/compostbkg.png) center top no-repeat #5d3222;
    background-size: cover;
}
.diffcol p {
    max-width: 400px;
    min-width: 120px;
    margin: 30px auto;
    padding: 0 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 160%;
}
#tabwrapper input,
#tabwrapper label {
    display: none;
}
#chartwrapper {
    display: block;
    margin: 30px 100px 0 100px;
    text-align: center;
}
#chart {
    display: inline-block;
    margin: 0 auto;
    text-align: left;
}
#flexwrapper {
    display: flex;
}
#charttypes {
    margin-top: 0px;
    display: block;
    float: left;
}
#chart h3#extratype {
    display: block;
    width: 280px;
    height: 90px;
}
#chart h3.charttype {
    display: block;
    box-sizing: border-box;
    width: 280px;
    height: 108px;
    margin: 0;
    padding: 40px 10px 10px 10px;
    font-family: "Arial Black", Gadget, sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-size: 19px;
    letter-spacing: 1px;
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
}
#chart h3#typetwo {
    padding-top: 27px;
}
#chart #columns {
    display: inline-block;
    float: left;
}
#chart .tabcontent {
    display: inline-block;
    float: left;
    margin: 0px 0 0 0;
    padding: 0;
    background: url(../images/chartbkg.gif) repeat-x;
}
#chart .column {
    display: inline-block;
    margin: 0;
    padding: 0;
}
#chart .column img {
    box-shadow: 2px 2px 4px #999;
}
/* *************************************** made */

.expandbox#made {
    position: relative;
    color: #fff;
}
.odd {
    -webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
    margin: -115px 0;
    min-height: 466px;
    padding-bottom: 40px;
    position: relative;
}
.even {
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
    margin: -115px 0;
    min-height: 466px;
    padding-bottom: 40px;
    position: relative;
}
#made h3 {
    position: relative;
    z-index: 4;
    padding-top: 80px;
    color: #fff;
    font-family: "Arial Black", Gadget, sans-serif;
    text-transform: uppercase;
    font-size: 38px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px #222;
    width: 100%;
    min-width: 280px;
}
#made p {
    position: relative;
    z-index: 4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 180%;
    min-width: 280px;
}
.stepcontrol {
    width: 40%;
    margin: 0 auto 0 0;
    padding: 0px 10px;
}
.even .stepcontrol {
    margin: 0 0 0 auto;
}
.odd h3,
.odd p {
    text-align: right;
    margin: 0 0 0 auto;
    max-width: 650px;
}
.even h3,
.even p {
    text-align: left;
    margin: 0 auto 0 0;
    max-width: 650px;
}
#stepeight h3,
#stepeight p {
    max-width: 800px;
}
.step {
    z-index: 3;
    position: absolute;
    top: 80px;
    display: block;
    width: 100%;
    height: 154px;
}
#stepone .step {
    top: 50px;
}
#stepeight .step {
    top: 50px;
}
.step img {
    display: block;
    width: 154px;
    height: 154px;
    margin: 0 auto;
    background: none;
}
#dotter {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
    display: block;
    margin: 0px auto 0px auto;
    width: 154px;
    height: 450px;
    background: url(../images/stepline.png) center top repeat-y;
}
#stepone #dotter {
    background: url(../images/stepline.png) center top 18px repeat-y;
}
#stepone {
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 85%, 0 100%);
    margin: -30px 0 0px 0;
    background: #675f4a;
    min-height: 434px;
}
#stepone h3 {
    padding-top: 60px;
}
#steptwo {
    background: #c88d2b;
}
#stepthree {
    background: #946942;
}
#stepfour {
    background: #4f7425;
}
#stepfive {
    background: #366090;
}
#stepsix {
    background: #3a7b6a;
}
#stepseven {
    background: #9b5631;
}
#stepeight {
    -webkit-clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
    padding: 220px 0 120px 0;
    margin: -75px 0 -75px 0;
    background: #494232;
    min-height: 400px;
    text-shadow: 2px 2px 4px #222;
}
#stepeight #dotter {
    display: none;
}
#stepeight h3,
#stepeight p {
    float: none;
    text-align: center;
    width: 80%;
    max-width: 880px;
    min-width: 350px;
    margin: 0 auto;
    padding: 10px 0;
}
#stepeight h3 {
    font-size: 42px;
    padding-top: 0px;
}
#stepeight p {
    text-align: left;
    font-size: 18px;
    margin-top: 10px;
}
.odd .hoverodd,
.even .hovereven {
    /*child of .odd or .even*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: url(../images/step1bkg.jpg) center top no-repeat;
    background-size: cover;
}
#hoverone {
    background-image: url(../images/step1bkg.jpg);
}
#hovertwo {
    background-image: url(../images/step2bkg.jpg);
}
#hoverthree {
    background-image: url(../images/step3bkg.jpg);
}
#hoverfour {
    background-image: url(../images/step4bkg.jpg);
}
#hoverfive {
    background-image: url(../images/step5bkg.jpg);
}
#hoversix {
    background-image: url(../images/step6bkg.jpg);
}
#hoverseven {
    background-image: url(../images/step7bkg.jpg);
}
#hovereight {
    background: url(../images/step8bkg.jpg) center center no-repeat;
    background-size: cover;
}
.odd .hoverodd,
.even .hovereven {
opacity: 0.85;
}
.odd:hover .hoverodd,
.even:hover .hovereven {
    position: absolute;
    display: block;
    opacity: 0.25;
}
.odd h3,
.even h3,
.odd p,
.even p {
    opacity: 0.0;
}
.odd:hover h3,
.even:hover h3,
.odd:hover p,
.even:hover p {
    opacity: 1.0;
}
.odd:hover .step,
.even:hover .step {
    opacity: 0.7;
}
/* *************************************** works */

.expandbox#works {
    background: url(../images/worksbkg.jpg) center top -150px no-repeat;
    background-size: cover;
}
.expandbox#works * {
    /* *****remove later***** */
    
    border: 0px solid yellow;
    /* *****remove later***** */
}
/* *****remove later***** */

#workswrapper {
    position: relative;
    width: 100%;
}
#workscols {
    display: flex;
    margin: -29px 0 0px 0;
}
.workscol {
    position: relative;
    flex: 1;
    padding: 30px 0px 400px 0px;
}
#worksone {
    background: #0a6e28;
    background: rgba(10, 110, 40, 0.92);
}
#workstwo {
    background: #6baf20;
    background: rgba(107, 175, 32, 0.92);
}
#worksthree {
    background: #91cb57;
    background: rgba(145, 203, 87, 0.92);
}
.workscol h3 {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: none;
    text-transform: uppercase;
    font-family: "Arial Black", Gadget, sans-serif;
    text-transform: uppercase;
    font-size: 1px;
    font-size: 0px;
    letter-spacing: 1px;
}
.workscol img {
    width: 90%;
    margin: 20px;
    max-width: 407px;
    min-width: 300px;
}
.workscol p {
    margin: 40px 50px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 160%;
    text-shadow: 1px 1px 1px #666;
}
.workscol span {
    display: block;
    position: absolute;
    bottom: 55px;
    width: 100%;
    height: 275px;
    margin: 0 0px;
    background: #fff;
    background: rgba(255, 255, 255, 0.85);
}
.workscol ul {
    list-style: none;
    margin: 0 0px;
    padding: 30px 50px;
}
.workscol li {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 190%;
    color: #000;
}
/* ******************** .section#facts ******************** */
#facts{
}
.rows {
    width: 100%;
    display: flex;
    border: 1px solid #222;
border-width: 1px 0;
}
#rowone {
    height: 310px;
}
#rowtwo {
    height: 400px;
}
#rowthree {
    height: 485px;
}
.fact {
    flex: 1;
    height: 100%;
    position: relative;
    display: block;
    border: 1px solid #222;
border-width: 0 1px;
}
.facthover {
    /*child of .fact*/
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    opacity: 1.0;
    background: url(../images/factone.jpg) center bottom no-repeat;
    background-size: cover;
}
#rowone .facthover {
}
#rowthree .facthover {
}
.facthover:hover {
    opacity: 0.1;
}
#factone {
    background: #35231d;
}
#facttwo {
    background: #026636;
}
#factthree {
    background: #35231d;
}
#factfour {
    background: #35231d;
    flex: 0.85;
}
#factfive {
    background: #026636;
    flex: 1.15;
}
#factsix {
    background: #35231d;
}
#factseven {
    background: #026636;
    flex: 1.5;
}
#facteight {
    background: #35231d;
}
#facttwo .facthover {
    background-image: url(../images/facttwo.jpg);
    background-position: center center;
}
#factthree .facthover {
    background-image: url(../images/factthree.jpg);
}
#factfour .facthover {
    background-image: url(../images/factfour.jpg);
}
#factfive .facthover {
    background-image: url(../images/factfive.jpg);
}
#factsix .facthover {
    background-image: url(../images/factsix.jpg);
    background-position: center center;
}
#factseven .facthover {
    background-image: url(../images/factseven.jpg);
    background-position: center center;
}
#facteight .facthover {
    background-image: url(../images/facteight.jpg);
}
.fact h3 {
    margin: 45px 0 15px 0;
    padding-bottom: 3px;
    text-align: center;
    color: #fff;
    font-family: "Arial Black", Gadget, sans-serif;
    text-transform: uppercase;
    font-size: 38px;
    letter-spacing: 1px;
    /*text-shadow: 2px 2px 2px #8FC55A;*/
}
.fact p {
    margin: 5% auto 5px auto;
    padding: 0 15px;
    text-align: center;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 19px;
    letter-spacing: px;
    line-height: 180%;
    text-shadow: 0px 0px 2px #000;
}
#factthree p,
#factfour p,
#factsix p {
    font-size: 20px;
    line-height: 180%;
    max-width: 450px;
}
#factfive p {
    font-size: 19px;
}
#factseven h3,
#facteight h3 {
    margin-top: 100px;
}
#factseven p,
#facteight p {
    font-size: 23px;
    line-height: 190%;
    max-width: 500px;
}
/* ******************** .section#footer ******************** */

#footer {}
#contact {
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
    margin: 0;
    padding: 25px 0;
}
/* ******************** #branded ******************** */
#branded{
margin: -30px 0 -10px 0;
border-top: 33px solid #93bc61;
}
#branded #intro{

}
#branded #intro p{
width: 100%;
max-width: 1400px;
margin: 25px auto 0 auto;
padding: 0 20px;
box-sizing: border-box;
font-size: 21px;
line-height: 160%;
}
#branded #locations{
display: flex;
margin: 35px auto 10px auto;
padding: 0 20px;
box-sizing: border-box;
max-width: 1000px;
}
.location{
padding: 0 10px;
}
#one.location{
flex: 1;
}
#two.location{
flex: 2;
}
#three.location{
flex: 1;
}
.location a{
display: block;
height: 100%;
margin:0;
padding:0;
}
.location img{
width: 100%;
}
#one.location img{
max-width: 222px;
}
#two.location img{
max-width: 395px;
}
#three.location img{
max-width: 217px;
}
#branded #findwrapper{
background: #136d2d;
color: #fff;
padding: 25px 0;
}
#find{
box-sizing: border-box;
width: 100%;
max-width: 1000px;
min-width: 810px;
margin: 0 auto;
padding: 0 20px;
overflow: auto;
}
#branded #find p{
width: 500px;
float: left;
margin:0;
font-size: 21px;
font-weight: bold;
line-height: 140%;
}
#branded #find a{
box-sizing: border;
background: #93bc61;
display: block;
width: 250px;
float: right;
margin:0;
padding: 14px 0;
border-radius: 7px;
color: #fff;
text-transform: uppercase;
font-size: 24px;
text-decoration: none;
letter-spacing: 2px;
}
#branded #find a:hover{

}
/* ******************** #regulations ******************** */

#regulations {
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: center;
    margin: 0;
    padding: 25px 0;
}
#regulations p {
    margin: 0;
    line-height: 180%;
}
#regulations p#one {
    font-style: italic;
}
#regulations p#two {
    font-weight: bold;
}
/* ******************** .section#bottomnav ******************** */

#bottomnav {
    display: flex;
}
.bottomnavs {
    flex: 1;
    padding: 30px 10px 10px 10px;
    box-shadow: 0px 3px #222;
}
#bottomnav #one {
    background: #0a6e28;
}
#bottomnav #two {
    background: #3a8e24;
}
#bottomnav #three {
    background: #6baf20;
}
#bottomnav #four {
    background: #7ebd3c;
}
#bottomnav #five {
    background: #91cb57;
}
#bottomnav span {
    display: block;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align: center;
    text-shadow: 0px 0px 2px #888;
}
#bottomnav a {
    display: block;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    padding: 6px 0 20px 0;
    text-shadow: 1px 1px 3px #333;
}
/* ******************** .section#copyright ******************** */

#copyright {
    padding: 6px 0 10px 0;
    background: #000;
    color: #eee;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}
#copyright span {
    opacity: 0.7;
}
/* ******************** .section#backwrapper ******************** */

#backwrapper {
    position: fixed;
    bottom: 0px;
    right: 0px;
    z-index: 99;
}
#back a {
    display: block;
    padding: 4px 10px 10px 4px;
    opacity: 1.0;
}
#back a:hover {
    opacity: 0.9;
}
#back img {
    width: 45px;
    height: 45px;
}



/* ******************** Dealer Locator ******************** */

#storepoint-container{
	text-align: left;
}
#storepoint-container #storepoint-search .storepoint-dropdown ul{
    min-width: 200px;
}
#branded #find #storepoint-container p {
    width: auto;
    float: none;
    margin: 0;
    font-size: inherit;
    font-weight: normal;
    line-height: 1.3;
}
#branded #find #storepoint-container a{
    background: none;
    width: auto;
    float: none;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
}
#storepoint-container .storepoint-location[data-location-tags*=distributor] .storepoint-name, #storepoint-container .storepoint-location-popup[data-location-tags*=distributor] > b:nth-child(1) {
    padding-left: 18px !important;
    position: relative;
}
#storepoint-container .storepoint-location[data-location-tags*=distributor] .storepoint-name:before, #storepoint-container .storepoint-location-popup[data-location-tags*=distributor] > b:nth-child(1):before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 15px;
    height: 15px;
    background-image: url('https://icons-4afe.kxcdn.com/15ff33db8f10d5/1609785606-dd7bcee161192cb8fba765eb595eba87.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#storepoint-container span.tag.tag-distributor span.tag-text{
	color: #cb0f17;
}
#branded #find #storepoint-container #storepoint-map a.storepoint-popup-directions {
    border-radius: 3px;
}
#branded #find #storepoint-container #storepoint-map div.storepoint-location-popup p.storepoint-social-icons{
	padding: 0;
}
#branded #find #storepoint-container #storepoint-map div.storepoint-location-popup p.street-address{
	font-size: 13px;
    margin: 0.25em 0;
}