/* .fitgrd - responsive grid system open http://www.fitgrd.com for more information download at https://github.com/jayalai/fitgrd Licensed under GPL and MIT. */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* remember: box-sizing is not supported by IE7 :( */ outline: none; vertical-align: top; } .center { max-width: 65em; margin: 0 auto; position: relative; } .row { margin: 0 .5em; padding: 0.5% 1em 0; overflow: hidden; height: 1%; *zoom: 1; min-height: 1%; } .clearfix { height:0; clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } /* ======================================= columns w/ margin ======================================= */ .fg1,.fg2,.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 { margin:0 2% 0; padding:0; /* in case of IE7 it's better not to use a padding because of the box-model issue */ float:left; position:relative; } .fg12 { width:96%; } .fg11 { width:87.66%; } .fg10 { width:79.33%; } .fg9 { width:71%; } .fg8 { width:62.66%; } .fg7 { width:54.33%; } .fg6 { width:46%; } .fg5 { width:37.66%; } .fg4 { width:29.33%; } .fg3 { width:21%; } .fg2 { width:12.66%; } .fg1 { width:4.33%; } /* ======================================= push w/ columns ======================================= */ .push12 { margin-left:100%; } .push11 { margin-left:93.66%; } .push10 { margin-left:85.33%; } .push9 { margin-left:77%; } .push8 { margin-left:68.66%; } .push7 { margin-left:60.33%; } .push6 { margin-left:52%; } .push5 { margin-left:43.66%; } .push4 { margin-left:35.33%; } .push3 { margin-left:27%; } .push2 { margin-left:18.66%; } .push1 { margin-left:10.33%; } /* ======================================= columns w/o margin ======================================= */ .fg-no-gutter{ padding: 0 3.5%; margin-top: 0; margin-bottom: 0; } .fg-no-gutter > [class*="fg"] { margin:0; padding:0; float:left; position:relative; } .fg-no-gutter img{ max-width: 100%; max-height: 100%; } .fg-no-gutter .fg12 { width:100%; } .fg-no-gutter .fg11 { width:91.66%; } .fg-no-gutter .fg10 { width:83.33%; } .fg-no-gutter .fg9 { width:75%; } .fg-no-gutter .fg8 { width:66.66%; } .fg-no-gutter .fg7 { width:58.33%; } .fg-no-gutter .fg6 { width:50%; } .fg-no-gutter .fg5 { width:41.66%; } .fg-no-gutter .fg4 { width:33.33%; } .fg-no-gutter .fg3 { width:25%; } .fg-no-gutter .fg2 { width:16.66%; } .fg-no-gutter .fg1 { width:8.33%; } /* ======================================= push columns w/o margin ======================================= */ .fg-no-gutter .push12 { margin-left:100%; } .fg-no-gutter .push11 { margin-left:91.66%; } .fg-no-gutter .push10 { margin-left:83.33%; } .fg-no-gutter .push9 { margin-left:75%; } .fg-no-gutter .push8 { margin-left:66.66%; } .fg-no-gutter .push7 { margin-left:58.33%; } .fg-no-gutter .push6 { margin-left:50%; } .fg12 .push5 { margin-left:41.66%; } .fg-no-gutter .push4 { margin-left:33.33%; } .fg-no-gutter .push3 { margin-left:25%; } .fg-no-gutter .push2 { margin-left:16.66%; } .fg-no-gutter .push1 { margin-left:8.33%; } .fg-no-mobile{ display: block !important; } .fg-no-desktop{ display: none !important; } /* ======================================= media queries ======================================= */ /* tablet size */ @media screen and (max-width: 48em ) { .row{ padding: 0 1em; margin: 0; } .fg1,.fg2{ width: 46%; margin-bottom: 1em; } .fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 { margin:0 2% 1em; padding:0; width:96%; } .fg-no-gutter > [class*="fg"] { width: 50%; } .fg-no-mobile{ display: none !important; } .fg-no-desktop{ display: block !important; } }