/*  GRID COLUMN SETUP   ============================================================================= */
.col {display: block;float:left;margin: 1% 0 1% 1.6%;}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/*  GRID OF One   ============================================================================= */
.span_1_of_1 {width: 100%; display: block;float:left;margin: 1% 0 1% 0%;}

/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 {width: 100%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_1_of_2 {width: 49.2%; display: block;float:left;margin: 1% 0 1% 1.6%;}

/*  GRID OF THREE   ============================================================================= */
.span_3_of_3 {width: 100%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_2_of_3 {width: 66.1%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_1_of_3 {width: 32.2%; display: block;float:left;margin: 1% 0 1% 1.6%;}

/*  GRID OF FOUR   ============================================================================= */
.span_4_of_4 {width: 100%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_3_of_4 {width: 74.6%;display: block;float:left;margin: 1% 0 1% 1.6%; }
.span_2_of_4 {width: 49.2%;display: block;float:left;margin: 1% 0 1% 1.6%; }
.span_1_of_4 {width: 23.8%; display: block;float:left;margin: 1% 0 1% 1.6%;}

/*  GRID OF FIVE   ============================================================================= */
.span_5_of_5 {width: 100%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_4_of_5 {width: 79.68%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_3_of_5 {width: 59.36%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_2_of_5 {width: 39.04%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_1_of_5 {width: 18.72%;display: block;float:left;margin: 1% 0 1% 1.6%;}

/*  GRID OF SIX   ============================================================================= */
.span_6_of_6 {width: 100%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_5_of_6 {width: 83.06%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_4_of_6 {width: 66.13%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_3_of_6 {width: 49.2%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_2_of_6 {width: 32.26%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_1_of_6 {width: 15.33%;display: block;float:left;margin: 1% 0 1% 1.6%;}

/*  GRID OF SEVEN   ============================================================================= */
.span_7_of_7 {width: 100%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_6_of_7 {width: 85.48%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_5_of_7 {width: 70.97%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_4_of_7 {width: 56.45%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_3_of_7 {width: 41.92%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_2_of_7 {width: 27.42%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_1_of_7 {width: 12.91%;display: block;float:left;margin: 1% 0 1% 1.6%;}


/*  GRID OF EIGHT   ============================================================================= */
.span_8_of_8 {width: 100%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_7_of_8 {width: 87.3%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_6_of_8 {width: 74.6%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_5_of_8 {width: 61.9%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_4_of_8 {width: 49.2%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_3_of_8 {width: 36.5%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_2_of_8 {width: 23.8%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_1_of_8 {width: 11.1%;display: block;float:left;margin: 1% 0 1% 1.6%; }

/*  GRID OF NINE   ============================================================================= */
.span_9_of_9 {width: 100%;display: block;float:left;margin: 1% 0.8%;}
.span_8_of_9 {width: 88.71%;display: block;float:left;margin: 1% 0.8%;}
.span_7_of_9 {width: 77.42%; display: block;float:left;margin: 1% 0.8%;}
.span_6_of_9 {width: 66.13%; display: block;float:left;margin: 1% 0.8%;}
.span_5_of_9 {width: 54.84%; display: block;float:left;margin: 1% 0.8%;}
.span_4_of_9 {width: 43.55%; display: block;float:left;margin: 1% 0.8%;}
.span_3_of_9 {width: 32.26%;display: block;float:left;margin: 1% 0.8%;}
.span_2_of_9 {width: 20.97%; display: block;float:left;margin: 1% 0.8%;}
.span_1_of_9 {width: 9.68%;display: block;float:left;margin: 1% 0.8%; }

/*  GRID OF TEN   ============================================================================= */
.span_10_of_10 {width: 100%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_9_of_10 {width: 89.84%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_8_of_10 {width: 79.68%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_7_of_10 {width: 69.52%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_6_of_10 {width: 59.36%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_5_of_10 {width: 49.2%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_4_of_10 {width: 39.04%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_3_of_10 {width: 28.88%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_2_of_10 {width: 18.72%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_1_of_10 {width: 8.56%; display: block;float:left;margin: 1% 0 1% 1.6%;}

/*  GRID OF ELEVEN   ============================================================================= */
.span_11_of_11 {width: 100%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_10_of_11 {width: 90.7%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_9_of_11 {width: 81.47%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_8_of_11 {width: 72.24%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_7_of_11 {width: 63.01%;display: block;float:left;margin: 1% 0 1% 1.6%; }
.span_6_of_11 {width: 53.78%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_5_of_11 {width: 44.55%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_4_of_11 {width: 35.32%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_3_of_11 {width: 26.09%;display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_2_of_11 {width: 16.86%; display: block;float:left;margin: 1% 0 1% 1.6%;}
.span_1_of_11 {width: 7.63%; display: block;float:left;margin: 1% 0 1% 1.6%;}

/*  GRID OF TWELVE   ============================================================================= */
.span_12_of_12 {width: 100%;display: block;float:left;margin: 1% 0 1% 1.6%;} /*996px*/
/* 20140224*/.span_12_of_12_no_space {width: 100%;display: block;float:left; margin:0;} /*996px*/
.span_11_of_12 {width: 91.46%;display: block;float:left;margin: 1% 0 1% 1.6%;}/*910px*/
.span_10_of_12 {width: 83%;display: block;float:left;margin: 1% 0 1% 1.6%;}/*826px*/
.span_9_of_12 {width: 74.54%;display: block;float:left;margin: 1% 0 1% 1.6%;}/*724px*/
.span_8_of_12 {width: 66.08%;display: block;float:left;margin: 1% 0 1% 1.6%;}/*658px*/
.span_7_of_12 {width: 57.62%; display: block;float:left;margin: 1% 0 1% 1.6%;}/*576px*/
.span_6_of_12 {width: 49.16%; display: block;float:left;margin: 1% 0 1% 1.6%;}/*489px*/
.span_5_of_12 {width: 40.7%;display: block;float:left;margin: 1% 0 1% 1.6%; }/*405px*/
.span_4_of_12 {width: 32.24%; display: block;float:left;margin: 1% 0 1% 1.6%;}/*321px*/
.span_3_of_12 {width: 23.78%; display: block;float:left;margin: 1% 0 1% 1.6%;}/*236px*/
.span_2_of_12 {width: 15.32%; display: block;float:left;margin: 1% 0 1% 1.6%;}/*152px*/
.span_1_of_12 {width: 6.86%; display: block;float:left;margin: 1% 0 1% 1.6%;}/*68px*/





/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 40em) {
	.col { margin: 1% 0 1% 1.6%;}



/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 {width: 100%;}
.span_1_of_2 {width: 100%;}

/*  GRID OF THREE   ============================================================================= */
.span_3_of_3 {width: 100%; }
.span_2_of_3 {width: 100%; }
.span_1_of_3 {width: 100%; }

/*  GRID OF FOUR   ============================================================================= */
.span_4_of_4 {width: 100%; }
.span_3_of_4 {width: 100%; }
.span_2_of_4 {width: 100%; }
.span_1_of_4 {width: 100%; }

/*  GRID OF FIVE   ============================================================================= */
.span_5_of_5 {width: 100%;}
.span_4_of_5 {width: 100%; }
.span_3_of_5 {width: 100%; }
.span_2_of_5 {width: 100%;}
.span_1_of_5 {width: 100%;}

/*  GRID OF SIX   ============================================================================= */
.span_6_of_6 {width: 100%;}
.span_5_of_6 {width: 100%;}
.span_4_of_6 {width: 100%;}
.span_3_of_6 {width: 100%;}
.span_2_of_6 {width: 100%;}
.span_1_of_6 {width: 100%;}

/*  GRID OF SEVEN   ============================================================================= */
.span_7_of_7 {width: 100%;}
.span_6_of_7 {width: 100%;}
.span_5_of_7 {width: 100%;}
.span_4_of_7 {width: 100%;}
.span_3_of_7 {width: 100%;}
.span_2_of_7 {width: 100%;}
.span_1_of_7 {width: 100%;}


/*  GRID OF EIGHT   ============================================================================= */
.span_8_of_8 {width: 100%;}
.span_7_of_8 {width: 100%; }
.span_6_of_8 {width: 100%; }
.span_5_of_8 {width: 100%; }
.span_4_of_8 {width: 100%; }
.span_3_of_8 {width: 100%;}
.span_2_of_8 {width: 100%; }
.span_1_of_8 {width: 100%; }

/*  GRID OF NINE   ============================================================================= */
.span_9_of_9 {width: 100%;}
.span_8_of_9 {width: 100%;}
.span_7_of_9 {width: 100%; }
.span_6_of_9 {width: 100%; }
.span_5_of_9 {width: 100%; }
.span_4_of_9 {width: 100%; }
.span_3_of_9 {width: 100%;}
.span_2_of_9 {width: 100%; }
.span_1_of_9 {width: 100%; }

/*  GRID OF TEN   ============================================================================= */
.span_10_of_10 {width: 100%;}
.span_9_of_10 {width: 100%;}
.span_8_of_10 {width: 100%;}
.span_7_of_10 {width: 100%; }
.span_6_of_10 {width: 100%; }
.span_5_of_10 {width: 100%; }
.span_4_of_10 {width: 100%; }
.span_3_of_10 {width: 100%;}
.span_2_of_10 {width: 100%; }
.span_1_of_10 {width: 100%; }

/*  GRID OF ELEVEN   ============================================================================= */
.span_11_of_11 {width: 100%;}
.span_10_of_11 {width: 100%;}
.span_9_of_11 {width: 100%;}
.span_8_of_11 {width: 100%;}
.span_7_of_11 {width: 100%; }
.span_6_of_11 {width: 100%; }
.span_5_of_11 {width: 100%; }
.span_4_of_11 {width: 100%; }
.span_3_of_11 {width: 100%;}
.span_2_of_11 {width: 100%; }
.span_1_of_11 {width: 100%; }

/*  GRID OF TWELVE   ============================================================================= */
.span_12_of_12 {width: 100%;}
/* 20140224*/.span_12_of_12_no_space {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%; }

}

	
	
/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT iPhone 5 568px landscape */

/*@media only screen and (min-width: 20em) and (max-width: 35.5em) and (orientation : landscape){ */
@media only screen and (min-width: 20em) and (max-width: 40em) and (orientation : landscape){
	
	.col { margin: 1% 0 1% 0%;}




/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 {width: 100%;}
.span_1_of_2 {width: 100%;}

/*  GRID OF THREE   ============================================================================= */
.span_3_of_3 {width: 100%; }
.span_2_of_3 {width: 100%; }
.span_1_of_3 {width: 100%; }

/*  GRID OF FOUR   ============================================================================= */
.span_4_of_4 {width: 100%; }
.span_3_of_4 {width: 100%; }
.span_2_of_4 {width: 100%; }
.span_1_of_4 {width: 100%; }

/*  GRID OF FIVE   ============================================================================= */
.span_5_of_5 {width: 100%;}
.span_4_of_5 {width: 100%; }
.span_3_of_5 {width: 100%; }
.span_2_of_5 {width: 100%;}
.span_1_of_5 {width: 100%;}

/*  GRID OF SIX   ============================================================================= */
.span_6_of_6 {width: 100%;}
.span_5_of_6 {width: 100%;}
.span_4_of_6 {width: 100%;}
.span_3_of_6 {width: 100%;}
.span_2_of_6 {width: 100%;}
.span_1_of_6 {width: 100%;}

/*  GRID OF SEVEN   ============================================================================= */
.span_7_of_7 {width: 100%;}
.span_6_of_7 {width: 100%;}
.span_5_of_7 {width: 100%;}
.span_4_of_7 {width: 100%;}
.span_3_of_7 {width: 100%;}
.span_2_of_7 {width: 100%;}
.span_1_of_7 {width: 100%;}


/*  GRID OF EIGHT   ============================================================================= */
.span_8_of_8 {width: 100%;}
.span_7_of_8 {width: 100%; }
.span_6_of_8 {width: 100%; }
.span_5_of_8 {width: 100%; }
.span_4_of_8 {width: 100%; }
.span_3_of_8 {width: 100%;}
.span_2_of_8 {width: 100%; }
.span_1_of_8 {width: 100%; }

/*  GRID OF NINE   ============================================================================= */
.span_9_of_9 {width: 100%;}
.span_8_of_9 {width: 100%;}
.span_7_of_9 {width: 100%; }
.span_6_of_9 {width: 100%; }
.span_5_of_9 {width: 100%; }
.span_4_of_9 {width: 100%; }
.span_3_of_9 {width: 100%;}
.span_2_of_9 {width: 100%; }
.span_1_of_9 {width: 100%; }

/*  GRID OF TEN   ============================================================================= */
.span_10_of_10 {width: 100%;}
.span_9_of_10 {width: 100%;}
.span_8_of_10 {width: 100%;}
.span_7_of_10 {width: 100%; }
.span_6_of_10 {width: 100%; }
.span_5_of_10 {width: 100%; }
.span_4_of_10 {width: 100%; }
.span_3_of_10 {width: 100%;}
.span_2_of_10 {width: 100%; }
.span_1_of_10 {width: 100%; }

/*  GRID OF ELEVEN   ============================================================================= */
.span_11_of_11 {width: 100%;}
.span_10_of_11 {width: 100%;}
.span_9_of_11 {width: 100%;}
.span_8_of_11 {width: 100%;}
.span_7_of_11 {width: 100%; }
.span_6_of_11 {width: 100%; }
.span_5_of_11 {width: 100%; }
.span_4_of_11 {width: 100%; }
.span_3_of_11 {width: 100%;}
.span_2_of_11 {width: 100%; }
.span_1_of_11 {width: 100%; }

/*  GRID OF TWELVE   ============================================================================= */
.span_12_of_12 {width: 100%;}
/* 20140224*/.span_12_of_12_no_space {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%; }

}