/*	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 */ }

/*	MAIN CONTAINER 
	Set the width to whatever you want the width of your site to be. */
	/*
.container { 
	max-width:960px;
	margin: 0 auto; 
}
@media ( min-width : 768px ) {
	.container{
		width:960px;
	}
}
*/
/*	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%; }

@media (min-width: 768px) {
  .gutters .col {
    margin-left: 2%; }

  .gutters .col:first-child {
    margin-left: 0; } }
/*	COLUMN WIDTH ON DISPLAYS +768px 
	You might need to play with media queries here to suite your design. */
@media (min-width: 768px) {
  .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%; }

  .gutters .span_1 {
    width: 2.25%; }

  .gutters .span_2 {
    width: 6.5%; }

  .gutters .span_3 {
    width: 10.75%; }

  .gutters .span_4 {
    width: 15.0%; }

  .gutters .span_5 {
    width: 19.25%; }

  .gutters .span_6 {
    width: 23.5%; }

  .gutters .span_7 {
    width: 27.75%; }

  .gutters .span_8 {
    width: 32.0%; }

  .gutters .span_9 {
    width: 36.25%; }

  .gutters .span_10 {
    width: 40.5%; }

  .gutters .span_11 {
    width: 44.75%; }

  .gutters .span_12 {
    width: 49.0%; }

  .gutters .span_13 {
    width: 53.25%; }

  .gutters .span_14 {
    width: 57.5%; }

  .gutters .span_15 {
    width: 61.75%; }

  .gutters .span_16 {
    width: 66.0%; }

  .gutters .span_17 {
    width: 70.25%; }

  .gutters .span_18 {
    width: 74.5%; }

  .gutters .span_19 {
    width: 78.75%; }

  .gutters .span_20 {
    width: 83.0%; }

  .gutters .span_21 {
    width: 87.25%; }

  .gutters .span_22 {
    width: 91.5%; }

  .gutters .span_23 {
    width: 95.75%; }

  .gutters .span_24 {
    width: 100%; } }