/* RESPONSIVE STYLING STARTS AT 480​ PX */


 
/*  RESPONSIVE COLUMNS  */
.section {
      clear: both;
      padding: 0px;
      margin: 0px;
}
 
/*  COLUMN SETUP  */
.col {
      display: block;
      float:left;
      margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
 
 
/*  GROUPING  */
.group:before,
.group:after {
      content:"";
      display:table;
}
.group:after {
      clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
 
/*  GRID OF FOUR  */
.span_4_of_4 {
      width: 100%;
}
.span_3_of_4 {
      width: 71.4%;
}
.span_2_of_4 {
      width: 47.6%;
}
.span_1_of_4 {
      width: 23.8%;
}​





/*  GRID OF THREE  */
.span_3_of_3 {
      width: 100%;
}
.span_2_of_3 {
      width: 66.1%;
}
.span_1_of_3 {
      width: 32.2%;
}
 
/*  GRID OF TWO  */
.span_2_of_2 {
      width: 49%;
}
.span_1_of_2 {
      width: 49%;
}
 
 
 
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 
@media only screen and (max-width: 480px) {
      .col { 
            margin: 1% 0 1% 0%;
      }
}
 
@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%;
      }
      .span_1_of_2 {
           width: 100%;
      }
     .span_2_of_2 {
         width: 100%;
     }
 .span_4_of_4 {
      width: 100%;
}
.span_3_of_4 {
      width: 100%;
}
.span_2_of_4 {
      width: 100%;
}
.span_1_of_4 {
      width: 100%;
}
 
}
 


 
 
 /*
 
HTML
 

<div class="section group">
      <div class="col span_1_of_4">
      This is column 1
      </div>
      <div class="col span_1_of_4">
      This is column 2
      </div>
      <div class="col span_1_of_4">
      This is column 3
      </div>
      <div class="col span_1_of_4">
      This is column 4
      </div>
</div>



<div class="section group">
      <div class="col span_1_of_3">
      This is column 1
      </div>
      <div class="col span_1_of_3">
      This is column 2
      </div>
      <div class="col span_1_of_3">
      This is column 3
      </div>
</div>
 
 
<div class="section group">
      <div class="col span_1_of_2">
      This is column 1
      </div>
      <div class="col span_2_of_2">
      This is column 2
      </div>
</div>
 

*/