/*  MAKE LAYOUT RESPONSIVE at 768px FOR IPAD PORTRAIT ================================================================ */


	
		header {
			width: 93.75%; /* 720px / 768px */
		}
		
		nav {
			margin-top: 0.75em;
		}

		nav ul#menu li{
			margin: 0 5px 0 0;
		}
		
		#maincontent{
			width: 93.75%; /* 720px / 768px */
		}

		
		.maincontent{
			width: 93.75%; /* 720px / 768px */
		}

		
		footer {
			width: 93.75%; /* 720px / 768px */
		}
		
/*  GRID OF SIX TURNS INTO A GRID OF THREE */

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

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

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

.span_3_of_6 {
	width: 100%;
	margin: 1% 0 1% 3.2%;
}

.span_2_of_6 {
	width: 60.2%;
	margin: 1% 0 1% 3.2%; 
}

.span_1_of_6 {
	width: 30.1%;
	margin: 1% 0 1% 3.2%; 
}

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