#wrapper grid3  { text-align:center;
  margin:0px auto; padding:0px; max-width:1200px;  width: 100%; 
}
      

 .col {
	background: #000000; height:340px; 
	float: left;
	margin-top: 20px;
	margin-left: 2.2%;
	margin-bottom: 20px;
	border:1px solid #e5e5e5;

}

    
.col img {
  float: none; text-align:center; max-width:300px; 
  margin:10px 10px 0px 10px; padding:0px;
  border:1px solid #e5e5e5;
}

.col h1 {
  padding: 0px 6px;  margin: 5px 0px; 
  text-align:center; 
  font:700 16px verdana,arial,helvetica,san-serif;color:#e5e5e5; 
  background-color: #000000;
  
}

.col h2 {
  padding:  0px 6px;  margin: 5px 0px; 
  text-align:center; 
  font:400 12px verdana,arial,helvetica,san-serif;color:#e5e5e5; 
  background-color: #000000;
}

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



/* grid3 col */

.grid3 .col {
	width: 31.2%;
} 
/* clear col */
.grid3 .col:nth-of-type(3n+1) {
	margin-left: 0;
	clear: left;
} 








/* reset cols to 2-column */
@media screen and (max-width: 1100px) {
	/* grid3 */
 
	
 .col {
	background-color: #000000; height:320px; 
	float: left;  width:100%; 
	margin-left: 2.2%;
	margin-bottom: 20px;
	border:1px solid #e5e5e5;
}

.col img {
  float: none; text-align:center; max-width:270px; 
  margin:10px 10px 0px 10px; padding:0px;
  border:1px solid #e5e5e5;
}

 
}
 
 
 

/* reset cols to 2-column */
@media screen and (max-width: 1000px) {
	/* grid3 */
 
	
 .col {
	background: #000000; height:320px; 
	float: left;  width:100%; 
	margin-left: 2.2%;
	margin-bottom: 20px;
	border:1px solid #e5e5e5;
}

.col img {
  float: none; text-align:center; max-width:260px; 
  margin:10px 10px 0px 10px; padding:0px;
  border:1px solid #e5e5e5;
}

 
}



/* reset cols to 2-column */
@media screen and (max-width: 950px) {
	/* grid3 */
 
	
 .col {
	background: #000000; height:310px; 
	float: left;  width:100%; 
	margin-left: 2.2%;
	margin-bottom: 20px;
	border:1px solid #e5e5e5;
}

.col img {
  float: none; text-align:center; max-width:230px; 
  margin:10px 10px 0px 10px; padding:0px;
  border:1px solid #e5e5e5;
}

 
}


/* reset cols to 2-column */
@media screen and (max-width: 900px) {
.grid3 .col {
	width: 31.2%;
} 
/* clear col */
.grid3 .col:nth-of-type(3n+1) {
	margin-left: 0;
	clear: left;
} 
	
	
 .col {
	background-color: #000000; height:300px; 
	float: left; width:100%; 
	margin-left: 2.2%;
	margin-bottom: 20px;
	border:1px solid #e5e5e5;
}

.col img {
  float: none; text-align:center; max-width:240px; 
  margin:10px 10px 0px 10px; padding:0px;
  border:1px solid #e5e5e5;
}

.col h1 {
  padding: 0px 6px;  margin: 5px 0px; 
  text-align:center; 
  font:700 12px verdana,arial,helvetica,san-serif;color:#e5e5e5; 
  background-color: #000000;
  
}

.col h2 {
  padding:  0px 6px;  margin: 5px 0px; 
  text-align:center; 
  font:400 11px verdana,arial,helvetica,san-serif;color:#e5e5e5; 
  background-color: #000000;
}

 
}


@media screen and (max-width: 850px) {


 .col {
	background-color: #000000; height:280px; 
	float: left;  width:100%; 
	margin-left: 2.2%;
	margin-bottom: 20px;
	border:1px solid #e5e5e5;
}


.col img {
  float: none; text-align:center; max-width:200px; 
  margin:10px 0px 0px 0px; padding:0px;
  border:1px solid #e5e5e5;
}



}









/* reset cols to fullwidth */
@media screen and (max-width: 750px) {
	/* grid3 */
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
	
	.col {
	background-color: #000000; height:auto; 
	float: left;
	margin-left: 2.2%;
	margin-bottom: 0px;
	border:1px solid #e5e5e5;
}

.col img {
  float: none; text-align:center; max-width:90%; 
  margin:10px 10px 10px 10px; padding:0px;
  border:1px solid #e5e5e5;
}

.col h1 {
  padding: 0px 6px;  margin: 5px 0px; 
  text-align:center; 
  font:700 16px verdana,arial,helvetica,san-serif;color:#e5e5e5; 
  background-color: #000000;
  
}

.col h2 {
  padding:  0px 6px;  margin: 5px 0px; 
  text-align:center; 
  font:400 12px verdana,arial,helvetica,san-serif;color:#e5e5e5; 
  background-color: #000000;
}

}