/* SECTIONS ============================================================================= */ .section { clear: both; padding: 0px; margin: 0px; } /* GROUPING ============================================================================= */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ } /* GRID COLUMN SETUP ==================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col-noml{ display: block; float:left; margin: 0% 0 0% 0; } .col:nth-child(2n+1) { margin-left: 0; } /* all browsers except IE6 and lower */ /* GRID OF TWELVE ============================================================================= */ .span_12_of_12 { width: 100%; } .span_11_of_12 { width: 91.53%; } .span_10_of_12 { width: 83.06%; } .span_9_of_12 { width: 74.6%; } .span_8_of_12 { width: 66.13%; } .span_7_of_12 { width: 57.66%; } .span_6_of_12 { width: 49.2%; } .span_5_of_12 { width: 40.73%; } .span_4_of_12 { width: 32.26%; } .span_3_of_12 { width: 23.8%; } .span_2_of_12 { width: 15.33%; } .span_1_of_12 { width: 6.86%; } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @media only screen and (max-width: 768px) { .col { margin: 1% 0 1% 0%; } .span_12_of_12 { width: 100%; } .span_11_of_12 { width: 100%; } .span_10_of_12 { width: 100%; } .span_9_of_12 { width: 100%; } .span_8_of_12 { width: 100%; } .span_7_of_12 { width: 100%; } .span_6_of_12 { width: 100%; } .span_5_of_12 { width: 100%; } .span_4_of_12 { width: 100%; } .span_3_of_12 { width: 100%; } .span_2_of_12 { width: 100%; } .span_1_of_12 { width: 100%; } }