/*--------------------------------------------------------------
# Responsive grid
--------------------------------------------------------------*/

/*  SECTIONS  */
.section {
  clear: both;
  padding: 0;
  overflow: hidden;
}

/*  COLUMN SETUP  */
.col {
  display: block;
  float:left;
  margin: 0% 0 30px 2%;
}
.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 TWO  */
.span_2_of_2 { width: 100%; }
.span_1_of_2 { width: 48%; height: 100%; }
.span_1_of_2a { width: 58%; height: 100%; }
.span_1_of_2b { width: 38%; height: 100%; }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66%; }
.span_1_of_3 { width: 32%; }

/*  GRID OF FOUR  */
.span_4_of_4 { width: 100%; }
.span_3_of_4 { width: 74.5%; }
.span_2_of_4 { width: 49%; }
.span_1_of_4 { width: 23.5%; }

/*  GRID OF FIVE  */
.span_5_of_5 { width: 100%; }
.span_4_of_5 { width: 79.6%; }
.span_3_of_5 { width: 59.2%; }
.span_2_of_5 { width: 38.8%; }
.span_1_of_5 {  width: 18.4%; }



/* ############ MEDIA QUERIES ############ */

/*
Media query breakpoints:
33.75em 540px
34em  544px
48em  768px
50em  800px
64em  1024px
62em  992px
75em  1200px
*/

@media only screen and (max-width: 48em)  {
	.col { margin: 0 2%; }
	.span_1_of_2 { width: 96%; height: auto; }
	.span_1_of_2a, .span_1_of_2b { width: 96%; height: auto; }
}