﻿ 
#wrapcontent { 
	 margin:  0px auto; padding:0px; 
	text-align:center;  
    background:#ffffff; max-width:1150px;
    width:100%;  
}   

  
#tempareafeature  { text-align:center;  background:#fff;
  margin:0px auto; padding:0px; max-width:1220px;  width: 100%;  
}
  
 

#contentfeature{ text-align:center;background:0;margin:10px auto;padding:0px;  max-width:97%; width:100%;   }
    
     
 
    
#wrapper grid4  { text-align:center; 
  margin:0px auto; padding:0px; max-width:1200px;  width: 100%; 
}
      

 .colfeat {
	background: #c6f0c7; height:450px; 
	float: left;
	margin-left: 1%;
	margin-bottom: 20px;
	border:1px solid #000000; padding:5px;

}

    
.colfeat img {
  float: right;  max-width: 100%;   
  margin: 0 3px 0 2px; padding:5px;
}

.colfeat h1 {
  padding: 5px;  margin: 5px 0px; 
  text-align:left; 
  font:700 12px verdana,arial,helvetica,san-serif;color:#fff; 
  background-color: #1e4822;
  
}

.colfeat h2 {
  padding: 0 2px 0 2px;  margin: 5px 0px; 
  text-align:left; 
  font:400 12px verdana,arial,helvetica,san-serif;color:#000; 
  background-color: #c6f0c7;
}

.fullwidth .colfeat {
	float: none;
	margin-left: 0;
}



/* grid4 col */

.grid4 .colfeat {
	width: 22.2%;
} 
/* clear col */
.grid4 .col:nth-of-type(4n+1) {
	margin-left: 0;
	clear: left;
} 






/* reset cols to 2-column */
@media screen and (max-width: 1200px) {


	/* grid4 */
	.grid4 .colfeat {
		width: 46.4%;
	}
	.grid4 .col:nth-of-type(3n+1) {
		margin-left: 2.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}
	
	
 .colfeat {
	background: #c6f0c7; height:140px; 
	float: left;
	margin-left: 2.2%;
	margin-bottom: 20px;
	border:1px solid #000000;  
}

 
}



/* reset cols to 2-column */
@media screen and (max-width: 800px) {
	/* grid4 */
 
	
 .colfeat {
	background: #c6f0c7; height:170px; 
	float: left;
	margin-left: 2.2%;
	margin-bottom: 20px;
	border:1px solid #000000; 
}

 
}


 


/* reset cols to 2-column */
@media screen and (max-width: 970px) {
	/* grid4 */
  
 .colfeat {
	background: #c6f0c7; height:auto; overflow:hidden
	float: left; height:150px;
	margin-left: 2.0%;
	margin-bottom: 20px;
	border:1px solid #000000;
	width: 20.0%;  
}
  
 
}

 


/* reset cols to 2-column */
@media screen and (max-width: 820px) {
	/* grid4 */
  
 .colfeat {
	background: #c6f0c7; height:200px; 
	float: left;  height:150px;
	margin-left: 1.8%;
	margin-bottom: 20px;
	border:1px solid #000000; 
} 
}




/* reset cols to 2-column */
@media screen and (max-width: 760px) {
	/* grid4 */
  
 .colfeat {
	background: #c6f0c7; height:220px; 
	float: left;
	margin-left: 1.6%;
	margin-bottom: 20px;
	border:1px solid #000000;  
  
 
}




/* reset cols to 2-column */
@media screen and (max-width: 660px) {
	/* grid4 */
  
 .colfeat {
	background: #c6f0c7; height:220px; 
	float: left;
	margin-left: 1.4%;
	margin-bottom: 20px;
	border:1px solid #000000;  
}
  
 
}



/* reset cols to fullwidth */
@media screen and (max-width: 610px) {
	/* grid4 */
	.colfeat {
		width: 96% !important;
		margin-left: 0 !important;
		clear: none !important;  
	}
	
	.colfeat {
	background: #c6f0c7; height:auto;  
	margin: 8px auto;
	border:1px solid #000000; 
}

}

 



/*Media QUeries styles for screen 911px and lower*/
@media screen and (max-width: 1200px) 

{    
 
#wrapcontent { 
	 margin:  0px auto; padding:0px;  
    width:95%; 
  
}  } 
 