.container { position: relative; width: 960px; margin: 0 auto; padding: 0 } .span1, .one.column, .one.columns { width: 40px } .span2, .two.columns { width: 100px } .span3, .three.columns { width: 160px } .span4, .four.columns { width: 220px } .span5, .five.columns { width: 280px } .span6, .six.columns { width: 340px } .span7, .seven.columns { width: 400px } .span8, .eight.columns { width: 460px } .span9, .nine.columns { width: 520px } .span10, .ten.columns { width: 580px } .span11, .eleven.columns { width: 640px } .span12, .twelve.columns { width: 700px } .span13, .thirteen.columns { width: 760px } .span14, .fourteen.columns { width: 820px } .span15, .fifteen.columns { width: 880px } .span16, .sixteen.columns { width: 940px } .one-third.column { width: 300px } .two-thirds.column { width: 620px } .one-third.column.alpha, .one-third.column.omega { width: 300px } .two-thirds.column.alpha, .two-thirds.column.omega { width: 620px } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px } .column.alpha, .columns.alpha { margin-left: 0 } .column.omega, .columns.omega { margin-right: 0 } .offset-by-half { padding-left: 30px } .offset1, .offset-by-one { padding-left: 60px } .offset2, .offset-by-two { padding-left: 120px } .offset3, .offset-by-three { padding-left: 180px } .offset4, .offset-by-four { padding-left: 240px } .offset5, .offset-by-five { padding-left: 300px } .offset6, .offset-by-six { padding-left: 360px } .offset7, .offset-by-seven { padding-left: 420px } .offset8, .offset-by-eight { padding-left: 480px } .offset9, .offset-by-nine { padding-left: 540px } .offset10, .offset-by-ten { padding-left: 600px } .offset11, .offset-by-eleven { padding-left: 660px } .offset12, .offset-by-twelve { padding-left: 720px } .offset13, .offset-by-thirteen { padding-left: 780px } .offset14, .offset-by-fourteen { padding-left: 840px } .offset15, .offset-by-fifteen { padding-left: 900px } @media only screen and (min-width: 768px) and (max-width: 959px) { .container { position: relative; width: 768px; margin: 0 auto; padding: 0 } .span1, .one.column, .one.columns { width: 28px } .span2, .two.columns { width: 76px } .span3, .three.columns { width: 124px } .span4, .four.columns { width: 172px } .span5, .five.columns { width: 220px } .span6, .six.columns { width: 268px } .span7, .seven.columns { width: 316px } .span8, .eight.columns { width: 364px } .span9, .nine.columns { width: 412px } .span10, .ten.columns { width: 460px } .span11, .eleven.columns { width: 508px } .span12, .twelve.columns { width: 556px } .span13, .thirteen.columns { width: 604px } .span14, .fourteen.columns { width: 652px } .span15, .fifteen.columns { width: 700px } .span16, .sixteen.columns { width: 748px } .one-third.column { width: 236px } .two-thirds.column { width: 492px } .one-third.column.alpha, .one-third.column.omega { width: 246px } .two-thirds.column.alpha, .two-thirds.column.omega { width: 502px } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px } .column.alpha, .columns.alpha { margin-left: 0 } .column.omega, .columns.omega { margin-right: 0 } .offset-by-half { padding-left: 24px } .offset1, .offset-by-one { padding-left: 48px } .offset2, .offset-by-two { padding-left: 96px } .offset3, .offset-by-three { padding-left: 144px } .offset4, .offset-by-four { padding-left: 192px } .offset5, .offset-by-five { padding-left: 240px } .offset6, .offset-by-six { padding-left: 288px } .offset7, .offset-by-seven { padding-left: 336px } .offset8, .offset-by-eight { padding-left: 384px } .offset9, .offset-by-nine { padding-left: 432px } .offset10, .offset-by-ten { padding-left: 480px } .offset11, .offset-by-eleven { padding-left: 528px } .offset12, .offset-by-twelve { padding-left: 576px } .offset13, .offset-by-thirteen { padding-left: 624px } .offset14, .offset-by-fourteen { padding-left: 672px } .offset15, .offset-by-fifteen { padding-left: 720px } } @media only screen and (max-width: 767px) { .container { position: relative; width: 300px; margin: 0 auto; padding: 0 } .one.column, .one.columns, .span1, .two.columns, .span2, .three.columns, .span3, .four.columns, .span4, .five.columns, .span5, .six.columns, .span6, .seven.columns, .span7, .eight.columns, .span8, .nine.columns, .span9, .ten.columns, .span10, .eleven.columns, .span11, .twelve.columns, .span12, .thirteen.columns, .span13, .fourteen.columns, .span14, .fifteen.columns, .span15, .sixteen.columns, .span16, .one-third.column, .two-thirds.column, .col, .one-third.column.alpha, .one-third.column.omega, .two-thirds.column.alpha, .two-thirds.column.omega { width: 280px; /* padding-left: 10px; padding-right: 10px; margin-left:0; margin-right:0;*/ } .one_half, .one_third, .two_thirds, .three_fourths, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { width: 100% !important } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px } .column.alpha, .columns.alpha { margin-left: 0 } .column.omega, .columns.omega { margin-right: 0 } .container .offset-by-one, .container .offset1, .container .offset-by-two, .container .offset2, .container .offset-by-three, .container .offset3, .container .offset-by-four, .container .offset4, .container .offset-by-five, .container .offset5, .container .offset-by-six, .container .offset6, .container .offset-by-seven, .container .offset7, .container .offset-by-eight, .container .offset8, .container .offset-by-nine, .container .offset9, .container .offset-by-ten, .container .offset10, .container .offset-by-eleven, .container .offset11, .container .offset-by-twelve, .container .offset12, .container .offset-by-thirteen, .container .offset13, .container .offset-by-fourteen, .container .offset14, .container .offset-by-fifteen, .container .offset15 { padding-left: 0 } } @media only screen and (min-width: 480px) and (max-width: 767px) { .container { position: relative; width: 420px; margin: 0 auto; padding: 0 } .one.column, .one.columns, .span1, .two.columns, .span2, .three.columns, .span3, .four.columns, .span4, .five.columns, .span5, .six.columns, .span6, .seven.columns, .span7, .eight.columns, .span8, .nine.columns, .span9, .ten.columns, .span10, .eleven.columns, .span11, .twelve.columns, .span12, .thirteen.columns, .span13, .fourteen.columns, .span14, .fifteen.columns, .span15, .sixteen.columns, .span16, .one-third.column, .two-thirds.column, .col, .one-third.column.alpha, .one-third.column.omega, .two-thirds.column.alpha, .two-thirds.column.omega { width: 400px } .one_half, .one_third, .two_thirds, .three_fourths, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { width: 100% !important } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px } .column.alpha, .columns.alpha { margin-left: 0 } .column.omega, .columns.omega { margin-right: 0 } .container .offset-by-one, .container .offset1, .container .offset-by-two, .container .offset2, .container .offset-by-three, .container .offset3, .container .offset-by-four, .container .offset4, .container .offset-by-five, .container .offset5, .container .offset-by-six, .container .offset6, .container .offset-by-seven, .container .offset7, .container .offset-by-eight, .container .offset8, .container .offset-by-nine, .container .offset9, .container .offset-by-ten, .container .offset10, .container .offset-by-eleven, .container .offset11, .container .offset-by-twelve, .container .offset12, .container .offset-by-thirteen, .container .offset13, .container .offset-by-fourteen, .container .offset14, .container .offset-by-fifteen, .container .offset15 { padding-left: 0 } } .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden } .clearfix:before, .clearfix:after, .row:before, .row:after { content: "\0020"; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0 } .row:after, .clearfix:after { clear: both } .row, .clearfix { zoom: 1 } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0 } .one_half { width: 48% } .one_third { width: 30.66% } .two_thirds { width: 65.33% } .one_fourth { width: 22% } .three_fourths { width: 74% } .one_fifth { width: 16.8% } .two_fifth { width: 37.6% } .three_fifth { width: 58.4% } .four_fifth { width: 79.2% } .one_sixth { width: 12.3% } .five_sixth { width: 82.67% } .one_half, .one_third, .two_thirds, .three_fourths, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { position: relative; margin-right: 4%; margin-bottom: 20px; float: left } .last { margin-right: 0 !important }