.container{ width: 1200px; max-width: 94%; margin: 0 auto; } .container.fullwidth{width: 100%; max-width: 100%;} .row{ width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; } .row .col,.col{ padding: 10px; box-sizing: border-box; } .row.small-padding{ width: calc(100% + 10px); margin-left: -5px; margin-right: -5px; } .row.small-padding .col, .col.small-padding{ padding: 5px; box-sizing: border-box; } .container:before,.row:before{display: table;content: " "; clear: both;} .container:after,.row:after{display: table;content: " "; clear: both;} /* helpers */ img{max-width: 100%;} .nopadding{padding: 0px !important;} .nopadding-tb{padding-top: 0px !important; padding-bottom: 0px !important;} .nopadding-lr{padding-left: 0px !important; padding-right: 0px !important;} .nopadding-t{padding-top: 0px !important;} .nopadding-r{padding-right: 0px !important;} .nopadding-b{padding-bottom: 0px !important;} .nopadding-l{padding-left: 0px !important;} .margin-t{margin-top: 10px;} .margin-r{margin-right: 10px;} .margin-b{margin-bottom: 10px;} .margin-l{margin-left: 10px;} .margin-th{margin-top: 5px;} .margin-rh{margin-right: 5px;} .margin-bh{margin-bottom: 5px;} .margin-lh{margin-left: 5px;} .nomargin{margin: 0px;} .nomargin-l{margin-left: 0px;} .nomargin-t{margin-top: 0px;} .nomargin-r{margin-right: 0px;} .nomargin-b{margin-bottom: 0px;} .s1,.m1,.l1{ float: left; } .s2,.m2,.l2{ float: left; } .s3,.m3,.l3{ float: left; } .s4,.m4,.l4{ float: left; } .s5,.m5,.l5{ float: left; } .s6,.m6,.l6{ float: left; } .s7,.m7,.l7{ float: left; } .s8,.m8,.l8{ float: left; } .s9,.m9,.l9{ float: left; } .s10,.m10,.l10{ float: left; } .s11,.m11,.l11{ float: left; } .s12,.m12,.l12{ float: left; } .s0,.m0,.l0{display:none;} .s1{ width: 8.33333%; } .s-offset1{ margin-left: 8.33333%; } .s2{ width: 16.66667%; } .s-offset2{ margin-left: 16.66667%; } .s3{ width: 25%; } .s-offset3{ margin-left: 25%; } .s4{ width: 33.33333%; } .s-offset4{ margin-left: 33.33333%; } .s5{ width: 41.66667%; } .s-offset5{ margin-left: 41.66667%; } .s6{ width: 50%; } .s-offset6{ margin-left: 50%; } .s7{ width: 58.33333%; } .s-offset7{ margin-left: 58.33333%; } .s8{ width: 66.66667%; } .s-offset8{ margin-left: 66.66667%; } .s9{ width: 75%; } .s-offset9{ margin-left: 75%; } .s10{ width: 83.33333%; } .s-offset10{ margin-left: 83.33333%; } .s11{ width: 91.66667%; } .s-offset11{ margin-left: 91.66667%; } .s12{ width: 100%; } .s-offset12{ margin-left: 100%; } .s-offset0{margin-left: 0%;} @media (min-width: 600px){ .m1{ width: 8.33333%; } .m-offset1{ margin-left: 8.33333%; } .m2{ width: 16.66667%; } .m-offset2{ margin-left: 16.66667%; } .m3{ width: 25%; } .m-offset3{ margin-left: 25%; } .m4{ width: 33.33333%; } .m-offset4{ margin-left: 33.33333%; } .m5{ width: 41.66667%; } .m-offset5{ margin-left: 41.66667%; } .m6{ width: 50%; } .m-offset6{ margin-left: 50%; } .m7{ width: 58.33333%; } .m-offset7{ margin-left: 58.33333%; } .m8{ width: 66.66667%; } .m-offset8{ margin-left: 66.66667%; } .m9{ width: 75%; } .m-offset9{ margin-left: 75%; } .m10{ width: 83.33333%; } .m-offset10{ margin-left: 83.33333%; } .m11{ width: 91.66667%; } .m-offset11{ margin-left: 91.66667%; } .m12{ width: 100%; } .m-offset12{ margin-left: 100%; } .m-offset0{margin-left: 0%;} } @media (min-width: 1024px){ .l1{ width: 8.33333%; } .l-offset1{ margin-left: 8.33333%; } .l2{ width: 16.66667%; } .l-offset2{ margin-left: 16.66667%; } .l3{ width: 25%; } .l-offset3{ margin-left: 25%; } .l4{ width: 33.33333%; } .l-offset4{ margin-left: 33.33333%; } .l5{ width: 41.66667%; } .l-offset5{ margin-left: 41.66667%; } .l6{ width: 50%; } .l-offset6{ margin-left: 50%; } .l7{ width: 58.33333%; } .l-offset7{ margin-left: 58.33333%; } .l8{ width: 66.66667%; } .l-offset8{ margin-left: 66.66667%; } .l9{ width: 75%; } .l-offset9{ margin-left: 75%; } .l10{ width: 83.33333%; } .l-offset10{ margin-left: 83.33333%; } .l11{ width: 91.66667%; } .l-offset11{ margin-left: 91.66667%; } .l12{ width: 100%; } .l-offset12{ margin-left: 100%; } .l-offset0{margin-left: 0%;} } .s-visible{display: none;} .m-visible{display: none;} .l-visible{display: none;} @media (min-width: 0px) and (max-width: 599px){ .s-center{text-align: center;} .s-fullwidth{max-width: 100%;} .s-height_auto{height: auto !important;} .s-hidden{display: none;} .s-visible{display: initial;} } @media (min-width: 600px) and (max-width: 1023px){ .m-center{text-align: center;} .m-fullwidth{max-width: 100%;} .m-height_auto{height: auto !important;} .m-hidden{display: none;} .m-visible{display: initial;} } @media (min-width: 1024px){ .l-center{text-align: center;} .l-fullwidth{max-width: 100%;} .l-height_auto{height: auto !important;} .l-hidden{display: none;} .l-visible{display: initial;} }