/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */



@media only screen and (max-width: 480px) {
	.col { /*  responsive grid*/
		margin: 1% 0 1% 0%;
	}
	.span_12_of_12 {
		width: 100%; 
	}
	.span_11_of_12 {
		width: 100%; 
	}
	.span_10_of_12 {
		width: 100%; 
	}
	.span_9_of_12 {
		width: 100%; 
	}
	.span_8_of_12 {
		width: 100%; 
	}
	.span_7_of_12 {
		width: 100%; 
	}
	.span_6_of_12 {
		width: 100%; 
	}
	.span_5_of_12 {
		width: 100%; 
	}
	.span_4_of_12 {
		width: 100%; 
	}
	.span_3_of_12 {
		width: 100%; 
	}
	.span_2_of_12 {
		width: 100%; 
	}
	.span_1_of_12 {
		width: 100%; 
	}
	
	
	.span_1_of_12 {/*  break grid*/
	width: 22.6%;
	margin: 1% 0 1% 3.2%;
    }

    .span_1_of_12:nth-child(4n+1) {/*  break grid*/
	clear: both;
	margin-left: 0;
   }
   
   
}/*  end 480*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}