/* =========================================== Jrole User Interface CSS Framework Output : Uncompressed Theme : Taihu File : jui-responsive.css Version : 1.1.0 Author : Netcomposite http://www.netcomposite.com/ =========================================== */ /* * * I. Break point for large screens | Desktop | TV | . Push to horizontal layout. Large fonts. More white space * */ @media (min-width: 1200px) { html{font-size:110.01% !important; margin:0 auto;} [data-viewport="w:110"] {width: auto; height: 90px;} /* height for the fixed header */ [data-viewport-position="offset::cover"]{height: 90px !important;} [data-viewport-position="fixed::top::header"] {padding-top: 0.5em !important;} [data-image-rendition="primary-logo"] {position: absolute; left: 15px; top: 20%; width: 100%; max-width: 170px !important; z-index: 9099900000 !important;} [data-image-rendition="mobile-logo"] {display:none !important;visibility:hidden !important;} [data-viewport-role="box::logo::layout"] {visibility:visible;} [data-viewport-role="box::nav::bar"] {visibility:visible;min-height:2em !important;} [data-viewport-role="label::mnw::break"]{visibility: hidden;} [data-viewport-role="option::mnw::opt-1"]{visibility:visible;} [data-viewport-role="option::mnw::opt-2"]{visibility:visible;} [data-viewport-role="option::mnw::opt-3"]{visibility:visible;} [data-viewport-role="option::mnw::opt-4"]{visibility:visible;} [data-viewport-role="option::mnw::opt-5"]{visibility:visible;} [data-viewport-role="option::mnw::opt-6"]{visibility:visible;} [data-viewport-role="option::mnw::hero"]{visibility:visible; margin-left: 2em !important; padding-left: 0.5em !important; padding-right: 0.5em !important; font-size: 70% !important; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;} [data-viewport-role="option::mnw::hero"]:hover {color: #ff0000 !important;} [data-viewport-role="label::mnw::hero"] {visibility:visible;} [data-viewport-role="option::mnw::opt-s"]{visibility:visible; position: absolute !important; right: 0 !important; z-index: 100; top: 5px;} [data-viewport-role="option::mnw::menu"] {visibility:visible;} [data-viewport-role="label::mnw::menu"] {display:none !important;visibility:hidden !important;} [data-viewport-role="label:ctrl::1c"] {visibility: hidden;} [data-viewport-role="label::ctl::2c"] {visibility:visible;} [data-viewport-role="label::ctrl::4c"] {visibility:visible;} [data-viewport-role="label::ctrl::6c"] {visibility:visible;} [data-viewport-role="label::ctrl::sorting"] {visibility:visible;} [data-viewport-role="label::ctrl::filters"] {visibility:visible;} [data-card-theme="card::cover"] [data-card-theme="card::slide"] .jp-card-layer { position: absolute !important; top: 0 !important; left: 50% !important; width: 50% !important; height: 100%; } [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:logo"] {padding: 0em; padding-left: 2em; padding-bottom: 0em; padding-top: 1em;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:logo"] img {width: 100%; max-width: 250px;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:address"] {text-align: left; padding: 0em; padding-bottom: 1em; padding-top: 1.5em;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:social"] {text-align: right; padding-right: 2.0em;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:signup"] {text-align: left; padding-left: 2.0em; border-left: 1px solid #666;} [data-viewport-role="footer::section::imprint"] {font-size: 80% !important; padding: 1em; color: #fff; padding-bottom: 0em;} [data-viewport-role="footer::section::imprint"] p {margin: 0;} } /* * * II. Break point for medium screens | Tablets | Laptops . Push to horizontal layout. Normal fonts. * Pay attention to labels and lines length * */ @media (min-width:801px) and (max-width:1199px) { html{font-size:100.01%;} [data-viewport="w:110"] {width: auto; height: 80px;} /* height for the fixed header */ [data-viewport-position="offset::cover"]{height: 80px !important;} [data-viewport-position="fixed::top::header"] {padding-top: 0.5em !important;} [data-image-rendition="primary-logo"] {position: absolute; left: 15px; top: 20%; width: 100%; max-width: 150px !important; z-index: 9099900000 !important;} [data-image-rendition="mobile-logo"] {display:none !important;visibility:hidden !important;} [data-viewport-role="box::nav::bar"] {visibility:visible;min-height: 1.5em !important;} [data-viewport-role="box::nav::bar"] .jp-nav-label {padding: 0 .25em !important;} [data-viewport-role="label::mnw::break"]{visibility: hidden; display: none;} [data-viewport-role="option::mnw::opt-1"]{visibility:visible;} [data-viewport-role="option::mnw::opt-2"]{visibility:visible;} [data-viewport-role="option::mnw::opt-3"]{visibility:visible;} [data-viewport-role="option::mnw::opt-4"]{visibility:visible;} [data-viewport-role="option::mnw::opt-5"]{visibility:visible;} [data-viewport-role="option::mnw::opt-6"]{visibility:visible;} [data-viewport-role="option::mnw::hero"]{visibility:visible; margin-left: 1em !important; padding-left: 0.5em !important; padding-right: 0.5em !important; font-size: 70% !important;} [data-viewport-role="option::mnw::hero"]:hover {color: #ff0000 !important;} [data-viewport-role="label::mnw::hero"] {visibility:visible;} [data-viewport-role="option::mnw::point"] {position: absolute; bottom: -25px; left: 0; right: 0; z-index: 9999999 !important;} [data-viewport-role="option::mnw::opt-s"]{visibility:visible; position: absolute !important; right: 0 !important; z-index: 100; top: 10px; font-size: 14px !important;} [data-viewport-role="option::mnw::menu"] {visibility:visible;} [data-viewport-role="label::mnw::menu"] {display:none !important;visibility:hidden !important;} [data-viewport-role="label:ctrl::1c"] {visibility: hidden;} [data-viewport-role="label::ctl::2c"] {visibility:visible;} [data-viewport-role="label::ctrl::4c"] {visibility:visible;} [data-viewport-role="label::ctrl::6c"] {visibility:visible;} [data-viewport-role="label::ctrl::sorting"] {visibility:visible;} [data-viewport-role="label::ctrl::filters"] {visibility:visible;} [data-card-theme="card::cover"] [data-card-theme="card::slide"] .jp-card-layer { position: absolute !important; top: 0 !important; left: 50% !important; width: 50% !important; height: 100%; } /* Product cover card reset */ [data-card-theme="card::hero"] .jp-card-tile {max-width: 480px !important; font-size: 90% !important;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:logo"] {padding: 0em; padding-left: 2em; padding-bottom: 1em; padding-top: 1em;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:logo"] img {width: 100%; max-width: 250px;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:address"] {text-align: left; padding: 0em; padding-bottom: 1em; padding-top: 1.5em;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:social"] {text-align: right; padding-right: 2.0em;} [data-viewport-role="footer::section::imprint"] {font-size: 80% !important; padding: 1em; background: #222; color: #fff; padding-bottom: 3em;} [data-viewport-role="footer::section::imprint"] p {margin: 0;} } @media (min-width:481px) and (max-width:800px){ html{font-size:100.01%;} [data-viewport="w:110"] {width: auto; height: 70px;} /* height for the fixed header */ [data-viewport-position="offset::cover"]{height: 70px !important;} [data-viewport-position="fixed::top::search"] { top: 90px !important;} [data-image-rendition="primary-logo"] {display:none !important;visibility:hidden !important;} [data-image-rendition="mobile-logo"] {position: absolute; margin-left: auto; margin-right: auto; top: 15px; left: 0; right: 0; width: 100%; max-width: 120px !important; z-index: 9099900000 !important;} [data-viewport-role="box::nav::bar"] {visibility:visible;min-height: 1.5em !important;} [data-viewport-role="label::mnw::break"]{visibility: hidden; display: none;} [data-viewport-role="option::mnw::opt-1"]{display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-2"]{display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-3"] {display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-4"] {display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-5"]{display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-6"]{display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::hero"]{visibility:visible; position: absolute !important; right: 55px !important; z-index: 100; top: 8px; font-size: 11px !important;} [data-viewport-role="label::mnw::hero"] {display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-s"]{visibility:visible; position: absolute !important; right: 0 !important; z-index: 100; top: 10px; font-size: 13px !important;} [data-viewport-role="option::mnw::menu"] {visibility:visible; position: absolute; left: 10px; top: 0px; z-index: 9099900000 !important; font-size: 18px !important;} [data-viewport-role="label::mnw::menu"] {visibility:visible;} /* Navigation blackout */ .jp-child-padding-200 .jp-frame { padding-left: 42px; position: fixed; width: 100%; transition: 600ms;} .jp-child-padding-200 > .jp-frame::after { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 90003; } [data-viewport-role="label:ctrl::1c"] {visibility:visible;} [data-viewport-role="label::ctl::2c"] {visibility:visible;} [data-viewport-role="label::ctrl::4c"] {visibility: hidden; display:none !important;} [data-viewport-role="label::ctrl::6c"] {visibility: hidden; display:none !important;} [data-viewport-role="label::ctrl::sorting"] {visibility: hidden; display:none !important;} [data-viewport-role="label::ctrl::filters"] {visibility: hidden; display:none !important;} [data-card-theme="card::cover"] [data-card-theme="card::slide"] .jp-card-layer { position: absolute !important; top: 0 !important; left: 50% !important; width: 50% !important; height: 100%;s} [data-card-theme="card::cover"] [data-card-theme="card::slide"] .jp-card-title {font-size: 1.8em !important;} /* Product cover card reset */ [data-card-theme="card::hero"] .jp-card-tile {max-width: 100% !important; position: relative !important; left: 0% !important; transform: translate(0, 0) !important;} [data-card-theme="card::hero"] .jp-card-content { background: #ffe2ec !important; border-bottom: 10px solid #fff; transition: 1s;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:address"] {text-align: left; padding: 0em; padding-bottom: 1em; padding-top: 1.5em;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:social"] {text-align: center !important; padding-bottom: 1.5em; } [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:signup"] {text-align: center; border: 1px solid #fff;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:signup"] .jp-wfl-form-render-embedded { margin: 0 auto;} [data-viewport-role="footer::section::imprint"] {font-size: 80% !important; padding: 1em; background: #222; color: #fff; padding-bottom: 0em;} [data-viewport-role="footer::section::imprint"] p {margin: 0;} [data-table-layout="1::1"] [data-io-layout="cell"]{clear:both;float:none !important;display:block;width:100%;} [data-table-layout="2::2"] [class*="jp-cell"]{clear:both;float:none !important;display:block;width:100%;} [data-table-layout="3::3"] [data-io-layout="cell"] {clear:both !important;float:none !important;display:block;width:100%;} [data-viewport-layout="1:1:G"] [class*="jp-column"]{display:block;width:100% !important;height:auto !important;float:left !important;clear:both !important;} [data-viewport-layout="1:2:G"] [class*="jp-column"]{display:block;width:100% !important;height:auto !important;float:left !important;clear:both !important;} [data-viewport-layout="1:3:G"] [class*="jp-column"]{display:block;width:100% !important;height:auto !important;float:left !important;clear:both !important;} [data-viewport-layout="1:4:G"] [class*="jp-column"]{display:block;width:100% !important;height:auto !important;float:left !important;clear:both !important;} } @media (max-width: 479px) { [data-viewport="w:110"] {width: auto; height: 70px;} /* height for the fixed header */ [data-viewport-position="offset::cover"]{height: 70px !important;} [data-viewport-position="fixed::top::search"] { top: 90px !important;} [data-image-rendition="primary-logo"] {display:none !important;visibility:hidden !important;} [data-image-rendition="mobile-logo"] {position: absolute; margin-left: auto; margin-right: auto; top: 15px; left: 0; right: 0; width: 100%; max-width: 120px !important; z-index: 9099900000 !important;} [data-viewport-role="box::nav::bar"] {visibility:visible;min-height: 1.5em !important;} [data-viewport-role="label::mnw::break"]{visibility: hidden; display: none;} [data-viewport-role="option::mnw::opt-1"]{display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-2"]{display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-3"] {display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-4"] {display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-5"]{display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-6"]{display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::hero"]{visibility:visible; position: absolute !important; right: 55px !important; z-index: 100; top: 8px; font-size: 10px !important;} [data-viewport-role="label::mnw::hero"] {display:none !important;visibility:hidden !important;} [data-viewport-role="option::mnw::opt-s"]{visibility:visible; position: absolute !important; right: 0 !important; z-index: 100; top: 10px; font-size: 12px !important;} [data-viewport-role="option::mnw::menu"] {visibility:visible; position: absolute; left: 10px; top: 0px; z-index: 9099900000 !important; font-size: 18px !important;} [data-viewport-role="label::mnw::menu"] {visibility:visible;} [data-card-theme="card::cover"] [data-card-theme="card::slide"] .jp-card-layer { height: 100%; background: rgba(0,0,0,0.5) !important; } /* Navigation blackout */ .jp-child-padding-200 .jp-frame { padding-left: 42px; position: fixed; width: 100%; transition: 600ms;} .jp-child-padding-200 > .jp-frame::after { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 90003; } [data-viewport-role="label:ctrl::1c"] {visibility:visible;} [data-viewport-role="label::ctl::2c"] {visibility:visible;} [data-viewport-role="label::ctrl::4c"] {visibility: hidden; display:none !important;} [data-viewport-role="label::ctrl::6c"] {visibility: hidden; display:none !important;} [data-viewport-role="label::ctrl::sorting"] {visibility: hidden; display:none !important;} [data-viewport-role="label::ctrl::filters"] {visibility: hidden; display:none !important;} [data-card-theme="card::cover"] [data-card-theme="card::slide"] .jp-card-layer { position: absolute !important; top: 0 !important; left:0 !important; width: 100% !important; height: 100%;} [data-card-theme="card::cover"] [data-card-theme="card::slide"] .jp-card-title {font-size: 1.8em !important;} /* Product cover card reset */ [data-card-theme="card::hero"] .jp-card-tile {position: relative !important; left: 0% !important; transform: translate(0, 0) !important;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:logo"] {padding: 0em; padding-left: 2em; padding-bottom: 1em; padding-top: 1em;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:logo"] img {width: 100%; max-width: 250px;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:address"] {text-align: left; padding: 0em; padding-bottom: 1em; padding-top: 1.5em;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:social"] {text-align: center; padding-bottom: 1.5em; } [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:signup"] {text-align: center; border-left: 1px solid #666; border-right: 1px solid #666;} [data-viewport-role="box::spread::footer"] [data-viewport-role="box::section:signup"] .jp-wfl-form-render-embedded {margin: 0 auto;} [data-viewport-role="footer::section::imprint"] {font-size: 80% !important; padding: 1em; padding-bottom: 3em;} [data-viewport-role="footer::section::imprint"] p {color: #fff; margin: 0;} [data-table-layout="1::1"] [data-io-layout="cell"]{clear:both;float:none !important;display:block;width:100%;} [data-table-layout="2::2"] [class*="jp-cell"]{clear:both;float:none !important;display:block;width:100%;} [data-table-layout="3::3"] [data-io-layout="cell"] {clear:both !important;float:none !important;display:block;width:100%;} [data-viewport-layout="1:1:G"] [class*="jp-column"]{display:block;width:100% !important;height:auto !important;float:left !important;clear:both !important;} [data-viewport-layout="1:2:G"] [class*="jp-column"]{display:block;width:100% !important;height:auto !important;float:left !important;clear:both !important;} [data-viewport-layout="1:3:G"] [class*="jp-column"]{display:block;width:100% !important;height:auto !important;float:left !important;clear:both !important;} [data-viewport-layout="1:4:G"] [class*="jp-column"]{display:block;width:100% !important;height:auto !important;float:left !important;clear:both !important;} }