.container{		
    width:96%;
    max-width: 1020px;
		margin: 0 auto;
    clear: both;
	}  

.col { 
		margin:10px 0;
    padding:10px 0.8%;
    display: block;
    float:left;
    position:relative;
  }

.span1of2, .span2of2, .span1of3, .span2of3, .span3of3, .span1of4, .span2of4, .span3of4, .span4of4 {
    width:98.4%;
  }  


@media only screen and (max-width: 480px) { 
  
}

@media only screen and (min-width: 600px) {
  /* ------------ 2 col layout ------------ */
  
  .span1of2 {
    width:48.4%;
  }
  
  .span2of2 {
    width: 98.4%;
  } 
}

@media only screen and (min-width: 768px) {	 

  
  
  /* ------------ 3 col layout ------------ */
  
	.span1of3 {
    width: 31.7%;
  }
  
  .span2of3 {
    width: 65%;
  }
  
  .span3of3 {
    width: 98.4%;
  }  

  
  /* ------------ 4 col layout ------------ */
  
  .span1of4 {
    width: 23.4%; 
  }
  
  .span2of4 {
    width: 48.4%; 
  }
  
  .span3of4 {
    width: 73.4%; 
  }
  
  .span4of4 {
    width: 98.4%; 
  }   
}


@media only screen and (min-width: 1020px) {

}