/* ----------------------------- */ /* ==viewport fixing for RWD */ /* ----------------------------- */ @-webkit-viewport { width: device-width; zoom: 1.0; } @-moz-viewport { width: device-width; zoom: 1.0; } @-ms-viewport { width: device-width; zoom: 1.0; } @-o-viewport { width: device-width; zoom: 1.0; } @viewport { width: device-width; zoom: 1.0; } /* ----------------------------- */ /* ==desktop and retina medias */ /* ----------------------------- */ @media (min-width: 641px) { /* here go rules for big resources and big screens like: background-images, font-faces, etc. */ } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { /* Style adjustments for retina devices */ } /* ---------------------------------- */ /* ==Responsive large / small / tiny */ /* ---------------------------------- */ @media (min-width: 1280px) { /* layouts for large (l) screens */ .large-hidden, .tablet-hidden { display: none !important; } .large-visible { display: block !important; } .large-no-float {float: none; } .large-inbl { display: inline-block; float: none; vertical-align: top; } .large-row { display: table; table-layout: fixed; width: 100% !important; } .large-col { display: table-cell; vertical-align: top; } /* widths for large (l) screens */ .large-w25 { width: 25% !important; } .large-w33 { width: 33.3333% !important; } .large-w50 { width: 50% !important; } .large-w66 { width: 66.6666% !important; } .large-w75 { width: 75% !important; } .large-w100 { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; } /* margins for large (l) screens */ .large-ma0 { margin: 0 !important; } } @media (max-width: 768px) { /* quick tablet reset */ .w600p, .w700p, .w800p, .w960p, .mw960p, .small-wauto { width: auto; float: none; } /* you shall not pass */ div, textarea, table, td, th, code, pre, samp { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } /* layouts for small (s) screens */ .small-hidden, .tablet-hidden { display: none !important; } .small-visible { display: block !important; } .small-no-float {float: none; } .small-inbl { display: inline-block; float: none; vertical-align: top; } .small-row { display: table !important; table-layout: fixed !important; width: 100% !important; } .small-col { display: table-cell !important; vertical-align: top !important; } /* widths for small (s) screens */ .small-w25 { width: 25% !important; } .small-w33 { width: 33.3333% !important; } .small-w50 { width: 50% !important; } .small-w66 { width: 66.6666% !important; } .small-w75 { width: 75% !important; } .small-w100 { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; } /* margins for small (s) screens */ .small-ma0 { margin: 0 !important; } } @media (max-width: 640px) { /* quick smartphone reset */ .mod, .col, fieldset { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; } .w300p, .w400p, .w500p { width: auto; float: none; } .row { display: block !important; width: 100% !important; } /* layouts for tiny (t) screens */ .tiny-hidden, .phone-hidden { display: none !important; } .tiny-visible { display: block !important; } .tiny-no-float {float: none;} .tiny-inbl { display: inline-block; float: none; vertical-align: top; } .tiny-row { display: table !important; table-layout: fixed !important; width: 100% !important; } .tiny-col { display: table-cell !important; vertical-align: top !important; } th, td { display: block !important; width: auto !important; text-align: left !important; } thead { display: none; } /* widths for tiny (t) screens */ .tiny-w25 { width: 25% !important; } .tiny-w33 { width: 33.3333% !important; } .tiny-w50 { width: 50% !important; } .tiny-w66 { width: 66.6666% !important; } .tiny-w75 { width: 75% !important; } .tiny-w100 { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; border: 0; } /* margins for tiny (t) screens */ .tiny-ma0 { margin: 0 !important; } }