/* Extra small mobile phones (for example 240px) */

@media only screen and (max-width:319px) {
  
  .container .grid_1,
  .container .grid_2, 	
  .container .grid_3,
  .container .grid_4, 	
  .container .grid_5, 	
  .container .grid_6,  	
  .container .grid_7, 	
  .container .grid_8,                    
  .container .grid_9,	
  .container .grid_10, 
  .container .grid_11, 
  .container .grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 1%;
	margin-right: 1%; 
}

  .alpha {margin-left: 0%;}
  .omega {margin-right: 0%;}
  
  .container .grid_1, 	
  .container .grid_2 {
	width:48%;
}	

  .container .grid_3, 
  .container .grid_4, 	
  .container .grid_5, 	
  .container .grid_6,  	
  .container .grid_7, 	
  .container .grid_8,                    
  .container .grid_9,	
  .container .grid_10, 
  .container .grid_11, 
  .container .grid_12 {
	width:98%;
}

}

/* Mobile Phones - [Mobile  First approach but starting from 960px fixed Grid - middle] */

@media only screen and (min-width:320px) {
  
  .container .grid_1,
  .container .grid_2, 	
  .container .grid_3,
  .container .grid_4, 	
  .container .grid_5, 	
  .container .grid_6,  	
  .container .grid_7, 	
  .container .grid_8,                    
  .container .grid_9,	
  .container .grid_10, 
  .container .grid_11, 
  .container .grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 1%;
	margin-right: 1%; 
}

  .alpha {margin-left: 0%;}
  .omega {margin-right: 0%;}
  
  .container .grid_1, 	
  .container .grid_2 {
	width:48%;
}	

  .container .grid_3, 
  .container .grid_4, 	
  .container .grid_5, 	
  .container .grid_6,  	
  .container .grid_7, 	
  .container .grid_8,                    
  .container .grid_9,	
  .container .grid_10, 
  .container .grid_11, 
  .container .grid_12 {
	width:98%;
}
  
  .container .prefix_3 {padding-left: 0;}
  
}

/* Tablets */

@media only screen and (min-width:600px) {
  
  .container .grid_1,  
  .container .grid_2 {
    width: 18%;
  }  
   
  .container .grid_3 {width: 23%;}
	
  .container .grid_4 {width: 31.333%;}
  
  .container .grid_5 {width: 39.666%;}
  
  .container .grid_6 {width: 48%;}
  
  .container .grid_7 {width: 56.333%;}
  
  .container .grid_8 {width: 64.666%;}
  
  .container .grid_9,
  .container .grid_10,
  .container .grid_11,
  .container .grid_12 {
	width:98%;
  }
  
  .container .prefix_3 {padding-left:25%;}
  .container .prefix_5 {padding-left:41.666%;}
  
}

/* Tablets & Laptops [80% of original layout in 960px] */

@media only screen and (min-width:768px) {
  
  .container .grid_1 {width: 6.333%;}
  .container .grid_2 {width: 14.666%;}  
  .container .grid_3 {width: 23%;}  
  .container .grid_4 {width: 31.333%;}
  .container .grid_5 {width: 39.666%;}
  .container .grid_6 {width: 48%;}
  .container .grid_7 {width: 56.333%;}
  .container .grid_8 {width: 64.666%;}
  .container .grid_9 {width: 73%;}
  .container .grid_10 {width:81.333%;}
  .container .grid_11 {width:89.666%;}
  .container .grid_12 {width:98%;}
  

/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container .prefix_1 {padding-left:8.333%;}
.container .prefix_2 {padding-left:16.666%;}
.container .prefix_3 {padding-left:25%;}
.container .prefix_4 {padding-left:33.333%;}
.container .prefix_5 {padding-left:41.666%;}
.container .prefix_6 {padding-left:50%;}
.container .prefix_7 {padding-left:58.333%;}
.container .prefix_8 {padding-left:66.666%;}
.container .prefix_9 {padding-left:75%;}
.container .prefix_10 {padding-left:83.333%;}
.container .prefix_11 {padding-left:91.666%;}

/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container .suffix_1 {padding-right:8.333%;}
.container .suffix_2 {padding-right:16.666%;}
.container .suffix_3 {padding-right:25%;}
.container .suffix_4 {padding-right:33.333%;}
.container .suffix_5 {padding-right:41.666%;}
.container .suffix_6 {padding-right:50%;}
.container .suffix_7 {padding-right:58.333%;}
.container .suffix_8 {padding-right:66.666%;}
.container .suffix_9 {padding-right:75%;}
.container .suffix_10 {padding-right:83.333%;}
.container .suffix_11 {padding-right:91.666%;}

/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container .push_1 {left:8.333%;}
.container .push_2 {left:16.666%;}
.container .push_3 {left:25%;}
.container .push_4 {left:33.333%;}
.container .push_5 {left:41.666%;}
.container .push_6 {left:50%;}
.container .push_7 {left:58.333%;}
.container .push_8 {left:66.666%;}
.container .push_9 {left:75%;}
.container .push_10 {left:83.333%;}
.container .push_11 {left:91.666%;}

/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container .pull_1 {left:-8.333%;}
.container .pull_2 {left:-16.666%;}
.container .pull_3 {left:-25%;}
.container .pull_4 {left:-33.333%;}
.container .pull_5 {left:-41.666%;}
.container .pull_6 {left:-50%;}
.container .pull_7 {left:-58.333%;}
.container .pull_8 {left:-66.666%;}
.container .pull_9 {left:-75%;}
.container .pull_10 {left:-83.333%;}
.container .pull_11 {left:-91.666%;}

}	

/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}