/*  24 COLUMN : RESPONSIVE GRID SYSTEM
  DEVELOPER : DENIS LEBLANC
  URL : http://responsive.gs
  VERSION : 3.0
  LICENSE : GPL & MIT */


/*  SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/scripts/boxsizing.htc); 
  /*  If you need support for IE7 and lower make 
    sure the boxsizing.htc file is linked properly.
    More info here:  https://github.com/Schepp/box-sizing-polyfill */
}

/*  SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
  content: ""; 
  display: table; 
  clear: both; 
}

/*  DEFAULT ROW STYLES 
  Set bottom padding according to preference */
.row { padding-bottom: 0; }
      
                  
/* DEFAULT COLUMN STYLES */
.col { 
  display: block;
  float: left;
  width: 100%;
}

/*  COLUMN WIDTH ON DISPLAYS +768px 
  You might need to play with media queries here to suite your design. */
@media ( min-width : 769px ) {
  .span_1 { width: 4.16666666667%; }
    .span_2 { width: 8.33333333333%; }
    .span_3 { width:12.5%; }
    .span_4 { width: 16.6666666667%; }
    .span_5 { width: 20.8333333333%; }
    .span_6 { width: 25%; }
    .span_7 { width: 29.1666666667%; }
    .span_8 { width: 33.3333333333%; }
    .span_9 { width: 37.5%; }
    .span_10 { width: 41.6666666667%; }
    .span_11 { width: 45.8333333333%; }
    .span_12 { width: 50%; }
    .span_13 { width: 54.1666666667%; }
    .span_14 { width: 58.3333333333%; }
    .span_15 { width: 62.5%; }
    .span_16 { width: 66.6666666667%; }
    .span_17 { width: 70.8333333333%; }
    .span_18 { width: 75%; }
    .span_19 { width: 79.1666666667%; }
    .span_20 { width: 83.3333333333%; }
    .span_21 { width: 87.5%; }
    .span_22 { width: 91.6666666667%; }
    .span_23 { width: 95.8333333333%; }
    .span_24 { width: 100%; }
}