/* Smartphones (portrait and landscape) ----------- */

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



/*  REMOVE MARGINS IF YOU WANT ALL TO GO ONE COLUMN */


.col {
	margin: 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%;
}

.XXspan_1_of_4 {
 width: 49.18033%%; /* This is just % value of 1_of_4 if gutter remains the same */
	margin-left: 1.63934%;
}

.XXspan_1_of_4:nth-child(2n+1) {
	/* This is grabs the gutter column after every 4th column and clears it  - Only needed if you are splitting rows*/
	clear: both;
	margin-left: 0;
}

/*  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%;
}

.XXspan_1_of_8 {
	width: 23.8%; /* This is just % value of 1_of_4 if gutter remains the same */
	margin-left: 1.6%;
}

.XXspan_1_of_8:nth-child(4n+1) {
	/* This is grabs the gutter column after every 4th column and clears it  - Only needed if you are splitting rows*/
	clear: both;
	margin-left: 0;
}

/*  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%;
}

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