.grid_1,
.grid_2,
.grid_3,
.grid_4 {
	display:inline;
	float: left;
	position: relative;
	margin:5px;
}

/* Grid >> 4 Columns
----------------------------------------------------------------------------------------------------*/

     
/*.span_11_of_11 {
	width: 100%;height:14px;
}

.span_10_of_11 {
	width: 90.00%;
}

.span_9_of_11 {
	width: 80.99%;height:14px;
}

.span_8_of_11 {
	width: 71.95%;height:14px;
}
.span_70_of_11 {
	width: 70.00%;height:14px;
}
.span_7_of_11 {
	width: 62.90%; height:14px;
}

.span_6_of_11 {
	width: 53.859%; height:14px;
}

.span_5_of_11 {
	width: 44.813%; height:14px;
}

.span_4_of_11 {
	width: 35.76%; height:14px;
}

.span_3_of_11 {
	width: 26.72%;height:14px;
}

.span_2_of_11 {
	width: 17.67%; height:14px;
}

.span_1_of_11 {
	width: 8.591%; height:14px;
}*/
.span_11_of_11 {
	width: 100%; height:14px;
}
.span_10_of_11 {
	width: 90.09%; height:14px;
}
.span_9_of_11 {
	width: 81.81%; height:14px;
}
.span_8_of_11 {
	width: 72.72%; height:14px;
}
.span_70_of_11 {
	width: 70.00%; height:14px;
}
.span_7_of_11 {
	width: 63.63%; height:14px;
}
.span_6_of_11 {
	width: 54.54%; height:14px;
}

.span_5_of_11 {
	width: 45.45%; height:14px;
}

.span_4_of_11 {
	width: 34.5%; height:14px;
}

.span_3_of_11 {
	width: 27.27%; height:14px;
}

.span_2_of_11 {
	width: 18.18%; height:14px;
}

.span_1_of_11 {
	width: 9.090%; height:14px;
}

.col {
    display: block;
    float: left;
	text-align:left;
    margin:5px;
}

.col .red{color:#F00;}

.span_11_of_11 , .span_10_of_11, .span_9_of_11 .span_8_of_11, .span_7_of_11, .span_6_of_11, .span_5_of_11, .span_4_of_11, .span_3_of_11, .span_2_of_11, .span_1_of_11{ } 

/*  GRID OF THREE   ============================================================================= */
.span_3_of_3, .span_2_of_3, .span_1_of_3{ text-align:left;}  


.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 61.8%; 
}

.span_1_of_3 {
	width: 31.8%;
}

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

/*@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}*/

/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 48.4%;
}

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

/*@media only screen and (max-width: 480px) {
	.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
}*/

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

	
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.20%; 
}

.span_2_of_4 {
	width: 49.3%; 
}

.span_1_of_4 {
	width: 24.40%; 
}


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


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

 @media only screen and (max-width : 768px),
only screen and (max-device-width : 768px){
.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 100.00%; 
}

.span_1_of_3 {
	width: 49.95%;
}

	
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 100%; 
}

.span_2_of_4 {
	width: 100%; 
}


}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

section{ width:95.6%;}

.span_11_of_11 , .span_10_of_11, .span_9_of_11 .span_8_of_11, .span_7_of_11, .span_6_of_11, .span_5_of_11, .span_4_of_11, .span_3_of_11, .span_2_of_11, .span_1_of_11{ height:16px; } 

.col{ margin:15px 0px;}
.span_1_of_4 {
	width: 48.8%; 
}	
.imbmarT0{ margin-top:0px;}
.imbmarB0{ margin-bottom:0px;}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

section{ width:95.6%;}

.span_11_of_11 , .span_10_of_11, .span_9_of_11 .span_8_of_11, .span_7_of_11, .span_6_of_11, .span_5_of_11, .span_4_of_11, .span_3_of_11, .span_2_of_11, .span_1_of_11{ height:20px; } 

.col{ margin:20px 0px;}


.span_1_of_4 {
	width: 48.8%; 
}	

}
/ Pro tips, use inches to specify mobile 
@media  only screen and (max-width: 5in)
{
 	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}  
}

// iPhone sized specific styles
@media  screen and (min-width: 200px) and (max-device-width: 640px) and (orientation:portrait) and (max-width: 5in)
{
    .span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
}

// High end Android device
@media  screen and (min-width: 600px) and (max-device-width: 1280px) and (orientation:portrait) and (max-width: 5in)
{
    .span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
}


@media  screen and (min-width: 600px) and (max-device-width: 1280px) and (orientation:portrait) and (min-width: 6in)
{
    
}

.marL0{ margin-left:0px;}
.marR0{ margin-right:0px;}
.marT0{ margin-top:0px;}
.marB0{ margin-bottom:0px;}