/*  GRID OF TWELVE   ============================================================================= */

.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
	width: 91.53%;
}

.span_10_of_12 {
	width: 83.06%;
}

.span_9_of_12 {
	width: 74.6%;
}

.span_8_of_12 {
	width: 66.13%;
}

.span_7_of_12 {
	width: 57.66%; 
}

.span_6_of_12 {
	width: 49.2%; 
}

.span_5_of_12 {
	width: 40.73%; 
}

.span_4_of_12 {
	width: 32.26%; 
}

.span_3_of_12 {
	width: 23.8%;
	margin: 0px 0.5%;
}

.span_2_of_12 {
	width: 15.33%; 
}

.span_1_of_12 {
	width: 6.86%; 
}


/*  GRID OF TWELVE TURNS INTO A GRID OF TWO */
/*@media only screen and (max-width: 960px) {*/
@media only screen and (max-width: 768px) {

.span_12_of_12 {
	width: 100%; 
	margin-left: 0;
}

.span_11_of_12 {
	width: 100%;
	margin-left: 0;
}

.span_10_of_12 {
	width: 100%;
	margin-left: 0;
}

.span_9_of_12 {
	width: 100%;
	margin-left: 0;
}

.span_8_of_12 {
	width: 100%;
	margin-left: 0;
}

.span_7_of_12 {
	width: 100%;
	margin-left: 0;
}

.span_6_of_12 {
	width: 100%;
	margin-left: 0;
}

.span_5_of_12 {
	width: 100%;
	margin-left: 0;
}

.span_4_of_12 {
	width: 100%;
	margin-left: 0;
}

.span_3_of_12 {
	width: 48.4%;
	margin-left: 0;
}

.span_2_of_12 {
	width: 48.4%;
	margin-left: 0;
}

.span_1_of_12 {
	width: 48.4%;
	margin-left: 0;
}

.span_1_of_12:nth-child(2n+1) { 
	clear: both;
	margin-left: 0;
}
}

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

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

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