/*** COLUMN FLUID GRID by Alessio Carone ***************/

/* Clearfix added to columns */
.cols:before, .cols:after{content:""; display:table;}
.cols:after{clear:both;}
.cols{*zoom:1;} /* IE6/7 */

/* Based on 12 col structure */
.cols{position:relative; margin-bottom:2em; display:table; width:100%;}
.cols > div{display:table-cell; float:none; vertical-align:top; position:relative; box-sizing:content-box;}

/* COLUMNS based on 12 cols structure WITHOUT margin */
.col1{width:8.33333333333333%;}
.col2{width:16.66666666666667%;}
.col3{width:25%;}
.col4{width:33.33333333333333%;}
.col5{width:41.66666666666667%;}
.col6{width:50%;}
.col7{width:58.33333333333333%}
.col8{width:66.66666666666667%}
.col9{width:75%;}
.col10{width:83.33333333333333%;}
.col11{width:91.66666666666667%;}
.col12{width:100%; margin:0;}
.col20per{width:20%;} /*to be able to devide by 5 columns*/

/* MARGIN technique */
.margin{overflow:hidden;}
.margin .wrapper, .margin > .cols{margin-right:-20px;}
.margin .wrapper > .cols > div, .margin > .cols > div{border-right:20px solid #2C3D43;}

/*The color of the border need to match the background color or be setted transparent if individual col[number] don't have background colors*/

/* PADDING technique */
.padding{overflow:hidden;}
.padding .wrapper{margin:0 -10px;}
.padding .wrapper > .cols > div{padding:0 10px;}

@media screen and (max-width:768px){ /* Make the columns appear as single columns (you can set your favourite size) */
  .cols{margin-bottom:0; display:block;}
  .cols > div{display:block; float:none; width:100%;}
  .margin, .padding{overflow:visible;}
  .margin .wrapper, .padding .wrapper{margin:0;}
  .margin .wrapper > .cols > div, .padding .wrapper > .cols > div{padding:0; border:0;}
}