article { 
    display: block;
}

.colwrapper {
	overflow: hidden;
}
 
/************************************************************************************
COLUMN THREE
*************************************************************************************/


.col {
    background:transparent;
    float: left;
    margin-left: 1.5%;
    margin-bottom: 30px;
}

.col img {
  float: left; width:200px; 
  margin: 0 3px 0 0; padding:5px;
}


.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;
}



/************************************************************************************
MEDIA QUERIES
*************************************************************************************/


/* reset cols to fullwidth */
@media screen and (max-width: 400px) {
    /* grid2 */
    .col {
        width: 100% !important;
        margin-left: 0 !important;
        clear: none !important;
    }
}



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


.col h1 { text-align:center; font: normal 16px 'Righteous', 'hobo std',  serif;  color: #000000; background: transparent; margin:8px 0px; padding:0px;}

.col h3 { text-align:center; font: normal 12px verdana, arial, helvetica, sans-serif;  color: #000000; background: transparent; margin:8px 0px; padding:0px;}









/* reset cols to fullwidth */
@media screen and (max-width:950px) {

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

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

.col {
		margin-left: 10px; 
	} 
	
	}


/* reset cols to fullwidth */
@media screen and (max-width:575px) {

	/* grid2 */
	.col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important; height:100%; height:auto; 
		float: none; text-align:center;
	} 
	
	.col img {
  float: none; text-align:center; width:300px; 
  margin: 0 3px 0 0; padding:5px;
}
 
 
.col h2 { text-align:center; font: normal 12px verdana, arial, helvetica, sans-serif;  color: #000000; background: transparent; margin:8px 0px; padding:0px;}

}