/* 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 {
margin: 0 auto;
}
/* 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;
background-color: transparent;
float: left;
width: 100%;
}
@media ( min-width : 769px ) {
.gutters .col {
margin-left: 2%;
}
.gutters .col:first-child {
margin-left: 0;
}
}
/* COLUMN WIDTH ON DISPLAYS +769px
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%; }
.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%; }
}
@media ( max-width : 768px ) {
.span_1,
.span_2,
.span_3,
.span_4,
.span_5,
.span_6,
.span_7,
.span_8,
.span_9,
.span_10,
.span_11,
.span_12,
.span_13,
.span_14,
.span_15,
.span_16,
.span_17,
.span_18,
.span_19,
.span_20,
.span_21,
.span_22,
.span_23,
.span_24,
.gutters .span_1,
.gutters .span_2,
.gutters .span_3,
.gutters .span_4,
.gutters .span_5,
.gutters .span_6,
.gutters .span_7,
.gutters .span_8,
.gutters .span_9,
.gutters .span_10,
.gutters .span_11,
.gutters .span_12,
.gutters .span_13,
.gutters .span_14,
.gutters .span_15,
.gutters .span_16,
.gutters .span_17,
.gutters .span_18,
.gutters .span_19,
.gutters .span_20,
.gutters .span_21,
.gutters .span_22,
.gutters .span_23,
.gutters .span_24 { width:100%; margin-bottom:10px; }
}
@media ( min-width : 481px ) {
.gutters .col.tp2 {
margin-left: 2%;
}
.gutters .col.tp2:first-child {
margin-left: 0;
}
}
@media ( min-width : 481px ) {
.span_1.tp2 { width: 4.16666666667%; }
.span_2.tp2 { width: 8.33333333333%; }
.span_3.tp2 { width:12.5%; }
.span_4.tp2 { width: 16.6666666667%; }
.span_5.tp2 { width: 20.8333333333%; }
.span_6.tp2 { width: 25%; }
.span_7.tp2 { width: 29.1666666667%; }
.span_8.tp2 { width: 33.3333333333%; }
.span_9.tp2 { width: 37.5%; }
.span_10.tp2 { width: 41.6666666667%; }
.span_11.tp2 { width: 45.8333333333%; }
.span_12.tp2 { width: 50%; }
.span_13.tp2 { width: 54.1666666667%; }
.span_14.tp2 { width: 58.3333333333%; }
.span_15.tp2 { width: 62.5%; }
.span_16.tp2 { width: 66.6666666667%; }
.span_17.tp2 { width: 70.8333333333%; }
.span_18.tp2 { width: 75%; }
.span_19.tp2 { width: 79.1666666667%; }
.span_20.tp2 { width: 83.3333333333%; }
.span_21.tp2 { width: 87.5%; }
.span_22.tp2 { width: 91.6666666667%; }
.span_23.tp2 { width: 95.8333333333%; }
.span_24.tp2 { width: 100%; }
.gutters .span_1.tp2 { width: 2.25%; }
.gutters .span_2.tp2 { width: 6.5%; }
.gutters .span_3.tp2 { width: 10.75%; }
.gutters .span_4.tp2 { width: 15.0%; }
.gutters .span_5.tp2 { width: 19.25%; }
.gutters .span_6.tp2 { width: 23.5%; }
.gutters .span_7.tp2 { width: 27.75%; }
.gutters .span_8.tp2 { width: 32.0%; }
.gutters .span_9.tp2 { width: 36.25%; }
.gutters .span_10.tp2 { width: 40.5%; }
.gutters .span_11.tp2 { width: 44.75%; }
.gutters .span_12.tp2 { width: 49.0%; }
.gutters .span_13.tp2 { width: 53.25%; }
.gutters .span_14.tp2 { width: 57.5%; }
.gutters .span_15.tp2 { width: 61.75%; }
.gutters .span_16.tp2 { width: 66.0%; }
.gutters .span_17.tp2 { width: 70.25%; }
.gutters .span_18.tp2 { width: 74.5%; }
.gutters .span_19.tp2 { width: 78.75%; }
.gutters .span_20.tp2 { width: 83.0%; }
.gutters .span_21.tp2 { width: 87.25%; }
.gutters .span_22.tp2 { width: 91.5%; }
.gutters .span_23.tp2 { width: 95.75%; }
.gutters .span_24.tp2 { width: 100%; }
}
@media ( max-width : 480px ) {
.span_1.tp2,
.span_2.tp2,
.span_3.tp2,
.span_4.tp2,
.span_5.tp2,
.span_6.tp2,
.span_7.tp2,
.span_8.tp2,
.span_9.tp2,
.span_10.tp2,
.span_11.tp2,
.span_12.tp2,
.span_13.tp2,
.span_14.tp2,
.span_15.tp2,
.span_16.tp2,
.span_17.tp2,
.span_18.tp2,
.span_19.tp2,
.span_20.tp2,
.span_21.tp2,
.span_22.tp2,
.span_23.tp2,
.span_24.tp2,
.gutters .span_1.tp2,
.gutters .span_2.tp2,
.gutters .span_3.tp2,
.gutters .span_4.tp2,
.gutters .span_5.tp2,
.gutters .span_6.tp2,
.gutters .span_7.tp2,
.gutters .span_8.tp2,
.gutters .span_9.tp2,
.gutters .span_10.tp2,
.gutters .span_11.tp2,
.gutters .span_12.tp2,
.gutters .span_13.tp2,
.gutters .span_14.tp2,
.gutters .span_15.tp2,
.gutters .span_16.tp2,
.gutters .span_17.tp2,
.gutters .span_18.tp2,
.gutters .span_19.tp2,
.gutters .span_20.tp2,
.gutters .span_21.tp2,
.gutters .span_22.tp2,
.gutters .span_23.tp2,
.gutters .span_24.tp2 { width:100%; margin-bottom:30px; }
}