/*  GRID OF FOUR   ============================================================================= */

	
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
}

.span_1_of_4-right {
	width: 23.8%;
	background-color:#fff;
	opacity:0.8; 
}

.span_1_of_4-text {
	width: 22.8%;
	background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */
	padding:1%;
 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
	.span_1_of_4-right {
		width: 100%; 
	}
	.span_1_of_4-text {
		width: 100%; 
	}
}