/*

substruction grid generator

count          = 4
canvas         = 100.0% = 480px 
column         = 20.0% = 96px 
gutter         = 2.5% = 12px 
margin         = 6.25% = 30px 

*/


* { margin: 0px; padding: 0px; }
*[data-grid~=wrapper] { overflow: hidden; width: 420px; margin: auto; 
    padding-left: 30px; 
    padding-right: 30px; 
    
    }
*[data-grid~=row] { width: 100%; clear: both; overflow: hidden;}


/*
The Grid 
*/

    /* the base grid settings from desktop > phone */
    
    *[data-grid~=column] { margin-right: 12px; float: left; min-height: 12px; position: relative;
    margin-bottom: 0%; }

    *[data-grid~=column]:last-child { margin-right: 0px; }

    
        
        *[data-grid~='phone-1'] { width: 96px; }  
        
        
	        *[data-grid~='phone-1-float-1'] { 
                display: block; overflow: hidden;
                width:108px; }
	        *[data-grid~='phone-1-float-1'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 96px; }
          
        
        
        *[data-grid~='phone-2'] { width: 204px; }  
        
        
	        *[data-grid~='phone-2-float-1'] { 
                display: block; overflow: hidden;
                width:216px; }
	        *[data-grid~='phone-2-float-1'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 96px; }
        
	        *[data-grid~='phone-2-float-2'] { 
                display: block; overflow: hidden;
                width:216px; }
	        *[data-grid~='phone-2-float-2'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 204px; }
          
        
        
        *[data-grid~='phone-3'] { width: 312px; }  
        
        
	        *[data-grid~='phone-3-float-1'] { 
                display: block; overflow: hidden;
                width:324px; }
	        *[data-grid~='phone-3-float-1'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 96px; }
        
	        *[data-grid~='phone-3-float-2'] { 
                display: block; overflow: hidden;
                width:324px; }
	        *[data-grid~='phone-3-float-2'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 204px; }
        
	        *[data-grid~='phone-3-float-3'] { 
                display: block; overflow: hidden;
                width:324px; }
	        *[data-grid~='phone-3-float-3'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 312px; }
          
        
        
        *[data-grid~='phone-4'] { margin-left:0px; width: 420px; }  
        
        
	        *[data-grid~='phone-4-float-1'] { 
                display: block; overflow: hidden;
                width:432px; }
	        *[data-grid~='phone-4-float-1'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 96px; }
        
	        *[data-grid~='phone-4-float-2'] { 
                display: block; overflow: hidden;
                width:432px; }
	        *[data-grid~='phone-4-float-2'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 204px; }
        
	        *[data-grid~='phone-4-float-3'] { 
                display: block; overflow: hidden;
                width:432px; }
	        *[data-grid~='phone-4-float-3'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 312px; }
        
	        *[data-grid~='phone-4-float-4'] { 
                display: block; overflow: hidden;
                width:432px; }
	        *[data-grid~='phone-4-float-4'] > * { 
                display: block; float: left; margin: 0px 12px 12px 0px;
               
                width: 420px; }