/*.ecoContainer div {
	width: 100%;
	}
	*/

.clicked{
    background:red;
}
.ecotool-heading {
    max-width: 1200px;
    text-align: center;
    margin: auto;
    background: #2B8E3B;
    padding: 15px;
}
 .visuallyhidden {
	display: block;
	border: 0px;
	max-width: 1200px;
	padding: .5em; 
	margin: 5px auto;
	background: #FFFFFF; /* this is for older browsers, the first one will be read by older browsers, the 2nd more modern style will be taken by the newer browsers. 1st one is ignored, hence the term 'cascading' style sheet */

	border-radius: 1em; /* CSS3 */
}


 .ecoContainer  img[usemap] {
	border: none;
	height: auto;
	max-width: 100%;
	width: auto;
	margin: auto;
	}




 .ecoContainer  .hidden { 
	display: none; 
	}

.ecoContainer  .unhidden { 
	display: block; 
	    transition: opacity 1s ease-out;

	} 


 .ecoContainer section { width: 100%; float: right;}
 .ecoContainer 	section:nth-child(2n) { background: rgba(255,255,255,0.1); }	/* So it's easier to see each section */

 .ecoContainer  aside { width: 18%; background: rgba(60,50,0,0.2); margin: 1em 0; }

 .ecoContainer footer { clear: both; text-align: center; }

 .ecoContainer  h1 { color: #000; }

.ecoContainer nav ul { list-style: none; margin: 0  0 0 .5em; padding: 0; }

.ecoContainer 	nav ul:after { content: ""; display: block; clear: both; }	
	/* So the ul contains its floated list-items */

.ecoContainer	nav li { float: left; width: 13.8%; margin: 0 .3% .5em 0; /* padding: .3em;  */}
	
.ecoContainer	nav li a { 
		display: block; text-decoration: none; 
		border-radius: 1em;
		background: rgba(118,157,0,0.8); color: #fff; 	/* Make them button-like */
		line-height: 2em; text-align: center;  		/* center that text both V and H */
		}
	.ecoContainer	nav li a:hover, 
	.ecoContainer	nav li a:focus  { background: rgba(0,0,150,0.3); color: #fff;  }
	.ecoContainer	nav li a:active { background: rgba(150,0,0,0.3); color: #fff;  }




 .ecoContainer 		.normalButtons { 
		display: block; text-decoration: none; 
		border-radius: 1em;
		line-height: 2em; text-align: center;  		/* center that text both V and H */
		background: rgba(118,157,0,0.8); color: #fff;  
		}

 .ecoContainer 		.productsContractor { 
		display: block; text-decoration: none; 
		border-radius: 1em;
		line-height: 2em; text-align: center;  		/* center that text both V and H */
		background: rgba(51,102,102,1.3); color: #fff;  
		}

 .ecoContainer 		.productsOn { 
		display: block; text-decoration: none; 
		border-radius: 1em;
		line-height: 2em; text-align: center;  		/* center that text both V and H */
		background: rgba(104,119,25,1.3); color: #fff;  
		}

 .ecoContainer  table {
  table-layout: fixed;

}

 .ecoContainer  .mainWrapper {
	display: block;
	}

 .ecoContainer  .mask h2 {
	padding: 0px 0px 20px 20px;
	}
	
	
	
	
	
	
	
	
	
 .ecoContainer  .mask a {
	padding: 0px 0px 20px 20px;
	}



 .ecoContainer  .MoreInfo {
	float: right;
	font-size: .8em;
	padding: 10px 20px 10px 20px;
	}

.ecoContainer {
	padding: 0px 10px 10px 10px;
	}

 article {
	display: block;
	position: relative;
	top: 0;
	right: 0;
	z-index: 0;
	max-width: 1200px;
	margin: 5px auto;
	border: 0px;
	padding: 0; 
	background: #9e9b72; /* this is for older browsers, the first one will be read by older browsers, the 2nd more modern style will be taken by the newer browsers. 1st one is ignored, hence the term 'cascading' style sheet */
	border-radius: 1em; 
				-webkit-transition: max-height .5s;
			-moz-transition: max-height .5s;
			-o-transition: max-height .5s;
			transition: max-height .5s;
	}

  .ecoTipHome {
	position: absolute;
	top: 0;
	left: 1em;
	border-radius: 1em;
	background: #D9D498; 
	margin: 1em 0;
	width: 35%;
	padding: 10px; 
	float: left;
	z-index: 1;
	}
 .ecoTip0 {
	position: relative;
	top: 0;
	top: 0em;
	border-radius: 1em;
	background: #D9D498; 
	margin: 1em 0;
	width: 40%;
	padding: 10px; 
	float: right;
	z-index: 1;
	}

 .ecoTip {
	position: relative;
	top: 0;
	bottom: 0em;
	border-radius: 1em;
	background: #FFFFFF; 
	margin: 1em 0;
	width: 100%;
	padding: 10px; 
	float: right;
	z-index: 1;
	}
.ecoTip .panel-heading {
    margin-bottom: 20px;
}
.ecoTipLeft {
	position: absolute;
	top: 11em;
	left: 2.0em;
	border-radius: 1em;
	background: #D9D498; 
	margin: 1em 0;
	width: 40%;
	padding: 10px; 
	float: right;
	z-index: 1;
	}

.ecoTip h3 {
	padding: 0px 0px 10px 0px; 
	color: #003333; 
	}

 .ecoTip ul {
	padding: 0px 0px 0px 0px; 
	}

.ecoTip li {
	font-size: .95em;
	line-height: 1.2em;
	padding: 0px 0px 20px 0px; 
	}

 .ecoTip li li {
	padding: 10px 0px 10px 0px; 
	}

  .ecoTip a:link { 
	color: #990000; 
	text-decoration: none;
	}
	
 .ecoTip a:hover {
	color: #990000; 
	text-decoration: underline;
	}



/* 	======================================================== 
	Yeah, I know this ain't mobile first. 
	Let's just agree that it's OK for now, alright?
	======================================================== */
@media only screen and (max-width: 1250px) {
 .ecoTipHome {
	position: relative;
	background: #D9D498; 
	width: 100%;
	left: 0;
	padding: 20px; 
	}


.ecoTip {
	position: relative;
	background: #D9D498; 
	width: 100%;
	left: 0;
	margin: 1em 0;
	padding: 10px; 
	}


}


@media only screen and (max-width: 40em) {

 .ecoContainer	aside, section, nav li, nav li:last-child { float: none; width: auto; }
 .ecoContainer 	section, body > header, footer { margin: .5em 0;  }

 .ecoContainer 	header h1 { padding: .3em 0; }

 .ecoContainer	a.menu {
		display: block;
		width: 1em; height: 21px;
		float: right; cursor: pointer;
		border-bottom: 9px double #fff;
		border-top: 9px double #fff;
		background: rgba(0,0,0,0.1);
		outline: 11px solid #9c9881;
		margin-right: 11px;
		}
	
	
	
	
 .ecoContainer	nav li { float: left; width: 49%; margin: 0 .3% .5em 0; /* padding: .3em;  */}

 .ecoContainer	nav { 
		max-height: 300px; 
		border: 0; border-top-right-radius: 0;
		margin: -1.35em 0 0 0; 
		padding: 0;
			-webkit-transition: max-height .5s;
			-moz-transition: max-height .5s;
			-o-transition: max-height .5s;
			transition: max-height .5s;
		}

 .ecoContainer	nav ul { 
		padding: .5em; opacity: 1;
		-webkit-transition: opacity .5s;
		-moz-transition: opacity .5s;
		-o-transition: opacity .5s;
		transition: opacity .5s;
		}

 .ecoContainer		nav li, nav li:last-child {  margin: .5em 0; }



 .ecoContainer 	.visuallyhidden { 	position: relative;
	min-width: 400px;
	width: 100%;
	max-height: 1000px;  overflow: hidden; margin: 5px 0px 5px 0px;}
	
	




	
			

article {
	min-width: 400px; 
	}

 .ecoContainer .ecoTipHome {
	width: 100%;
	display:inline-block;
	}

 .ecoContainer .ecoTip {
	width: 100%;
	}
 .ecoContainer .mask  {
	font-size: .6em;
	}

}