/********************************/ /* General */ /********************************/ body { /*-webkit-text-size-adjust: none;*/ padding: 0px; margin: 0px; background-color: var(--color-footer, transparent); } /* Chrome-Only hack */ @supports (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*") { body { image-rendering: -webkit-optimize-contrast; } } body.mz_rtl { direction: rtl; unicode-bidi: embed; } iframe { max-width: 100%; max-width: 100%; } .clear { clear: both; } .cf:after { content: ' '; display: table; clear: both; } input.mz_notforhumans { position: absolute; display: block; width: 1px !important; height: 1px !important; padding: 0px !important; margin: 0px !important; border: none !important; background-color: rgba(255, 255, 255, 0); opacity: 0.01; /* for macos safari */ } a.mz_notforhumans { position: absolute; bottom: 0px; display: block; width: 1px !important; height: 1px !important; padding: 0px !important; margin: 0px !important; border: none !important; overflow: hidden; color: rgba(0, 0, 0, 0); } .mz_notforhumans:focus { outline: 0; } img { border: none; } #title a { text-decoration: none; } /* to accommodate extra long words that break width */ .mz_editable h1 { word-wrap: break-word; } .mz_editable h1:first-child, .mz_editable h2:first-child, .mz_editable h3:first-child, .mz_editable p { margin-top: 0; } /********************************/ /* Formatting framework */ /********************************/ body { font-size: 16px; color: var(--color-text, #383838); } body.design-textsize-s { font-size: 15px; } body.design-textsize-l { font-size: 17px; } body.design-textsize-xl { font-size: 18px; } body:not(.design-underlined-links) .mz_editable a:not(:hover), body.design-underlined-links .mz_editable a:hover, .mz_catalogcategories li a, .mz_editable h1 a, .mz_catalog .cat-thumb a { text-decoration: none; } /* hyperlinks */ a, .mz_editable a { color: #447CE4; color: var(--color-link, #447CE4); } /* main text */ .mz_editable { line-height: 1.7; color: #383838; color: var(--color-text, #383838); } .mz_editable b { font-weight: bold; /* override buggy Firefox behavior with invalid default styles for b */ } .mz_editable p { margin-bottom: 1.6em; } .mz_editable p:last-child, .mz_editable h1:last-child, .mz_editable h2:last-child, .mz_editable h3:last-child { margin-bottom: 0; } .mz_editable h1, .mz_editable h1.moze-megatitle { margin-bottom: 0.60em; margin-top: 0; line-height: 1.3; font-size: 2.6em; } .mz_editable h1, .mz_editable h1 a { color: var(--color-h1, inherit); } .mz_editable p + h1 { margin-top: 0.80em; } .mz_editable h2, .sidebox h2 { margin-top: 0.85em; line-height: 1.3; font-size: 1.6em; color: var(--color-h2, inherit); } .mz_editable h2, .sidebox h2, .sidebox h2:last-child { margin-bottom: 0.65em; } .sidebox h2 { margin-bottom: 1em; font-size: 1.35em; } .mz_editable h2:first-child, .sidebox h2 { margin-top: 0px; } .mz_editable h3 { line-height: 1.3; font-size: 1.25em; color: var(--color-h3, inherit); } .mz_editable .moze-tiny { font-size: 0.80em; } .mz_editable .moze-small { font-size: 0.90em; } .mz_editable .moze-normal { font-size: 1.00em; } .mz_editable .moze-large { font-size: 1.10em; } .mz_editable .moze-huge { font-size: 1.22em; } .mz_editable .moze-gigantic { font-size: 1.36em; } .section-accordion-size-s .subgrid-cell.one { font-size: 0.90em; } .section-accordion-size-m .subgrid-cell.one { font-size: 1.00em; } .section-accordion-size-l .subgrid-cell.one { font-size: 1.10em; } .section-accordion-size-xl .subgrid-cell.one { font-size: 1.22em; } .mz_editable .moze-left { text-align: left; } .mz_editable .moze-center { text-align: center; } .mz_editable .moze-right { text-align: right; } .mz_editable .moze-justify { text-align: justify; } .mz_editable .moze-secondary { font-size: 94%; } /* blockquote */ .mz_editable .moze-blockquote.moze-tiny { font-size: calc(0.80em*1.1); } .mz_editable .moze-blockquote.moze-small { font-size: calc(0.90em*1.1); } .mz_editable .moze-blockquote.moze-normal { font-size: calc(1.00em*1.1); } .mz_editable .moze-blockquote.moze-large { font-size: calc(1.10em*1.1); } .mz_editable .moze-blockquote.moze-huge { font-size: calc(1.22em*1.1); } .mz_editable .moze-blockquote.moze-gigantic { font-size: calc(1.36em*1.1); } .mz_editable .moze-blockquote { font-style: italic; margin-bottom: 1.6em; display: block; padding: 0 2.5em 0 2.5em; position: relative; font-size: 1.1em; } .mz_editable .moze-blockquote:before { content: "\201C"; position: absolute; top: 0; left: 0; font-size: 4em; line-height: 1; opacity: 0.5; top: -0.05em; } /* general text and form text */ .section-text-color-1:not(#top) .mz_editable .moze-wysiwyg-editor, .section-text-color-1 .mz_editable .moze-wysiwyg-editor h1, .section-text-color-1 .mz_editable .moze-wysiwyg-editor h2, .section-text-color-1 .mz_editable .moze-wysiwyg-editor h3, .section-text-color-1 .moze-form * { color: #FFFFFF; color: var(--color-text-1, #FFFFFF); } /* store items */ .design-v2 .mz_catalog .cat-thumb-title { color: var(--color-text); } .section.section-text-color-1 .cat-thumb-title, /* .section to override .design-v2 */ .section.section-text-color-1 .cat-thumb-price { color: #FFFFFF; color: var(--color-text-1, #FFFFFF); } /* links */ .section-text-color-1 .mz_editable .moze-wysiwyg-editor a:not(.moze-button-large):not(.moze-button) { color: #FFFFFF; color: var(--color-text-1, #FFFFFF); opacity: 0.7; } /* important text */ .mz_editable .moze-important { background-color: rgba(0, 0, 0, 0.05); background-color: var(--color-text-highlight, rgba(0, 0, 0, 0.05)); color: rgba(0, 0, 0, 0.95); color: var(--color-text-strong, rgba(0, 0, 0, 0.95)); } .section-text-color-1 .mz_editable .moze-important { background-color: rgba(255, 255, 255, 0.17); background-color: var(--color-text-1-highlight, rgba(255, 255, 255, 0.17)); color: #FFFFFF; color: var(--color-text-1, #FFFFFF); } /* secondary text */ .mz_editable .moze-secondary { opacity: 0.6; } /* code - normal */ .mz_editable .moze-code { font-family: 'Courier New', Courier, monospace; line-height: 1.4; padding: 8px; display: block; background-color: var(--color-text-highlight, rgba(0, 0, 0, 0.05)); margin: 16px 0px 16px 0px; /*color: rgba(0, 0, 0, 0.5);*/ border: 0px solid rgba(150, 150, 150, 0.1); } /* code - for dark background */ .section-text-color-1 .mz_editable .moze-code { background-color: var(--color-text-1-highlight, rgba(255, 255, 255, 0.17)); } /* tables - normal */ .mz_editable table { border-spacing: 0px; /*border-collapse: collapse;*/ } .mz_editable table td { padding: 9px; margin: 0px; border-bottom: 1px solid; border-color: var(--color-text-border, rgba(0, 0, 0, 0.15)); } .mz_editable table .moze-th, .mz_catalog table#cat-cart tbody td::before { background-color: var(--color-text-highlight, rgba(0, 0, 0, 0.05)); color: var(--color-text-strong); } /* tables - for dark background */ .section-text-color-1 .mz_editable table td { border-color: rgba(255, 255, 255, 0.1); border-color: var(--color-text-1-highlight, rgba(255, 255, 255, 0.17)); } .section-text-color-1 .mz_editable table .moze-th { color: var(--color-text-1, #FFFFFF); background-color: var(--color-text-1-highlight, rgba(255, 255, 255, 0.17)); } /********************************/ /* Buttons */ /********************************/ .design-buttons-rounded .moze-button { border-radius: 4px; } .design-buttons-rounded .moze-form input, .design-buttons-rounded .moze-form select, .design-buttons-rounded .moze-form textarea, .design-buttons-rounded .moze-form .cat-item-variant-buttons a { border-radius: 4px; } .design-buttons-rounded .moze-form .moze-formbutton, .design-buttons-rounded .moze-button-large, .design-buttons-rounded #menu ul ul, .design-buttons-rounded #languages ul, .design-buttons-rounded #shopbar, .design-buttons-round #languages ul, .design-buttons-round #menu ul ul, .design-buttons-round #shopbar { border-radius: 6px; } .design-buttons-round .moze-form input, .design-buttons-round .moze-form select, .design-buttons-round .moze-form textarea, .design-buttons-round .moze-form .cat-item-variant-buttons a { border-radius: 6px; } .design-buttons-round .moze-button, .design-buttons-round .moze-form .moze-formbutton, .design-buttons-round .moze-button-large { border-radius: 30px; } .moze-button, .moze-button-large, .moze-form .moze-formbutton { display: inline-block; text-decoration: none !important; -webkit-appearance: none; line-height: 1.5; border: none; font-weight: normal; text-align: center; box-sizing: border-box; } .moze-button { min-width: 6.5em; padding: 0.55em 1em; font-size: 0.95em; } .moze-button-large, .moze-form .moze-formbutton { min-width: 9.7em; padding: 0.9em 1.45em; font-size: 1em; } .moze-form .moze-formbutton { margin: 0.9em 0 0 0; } .moze-button.disabled, .moze-button-large.disabled, .moze-form .moze-formbutton.disabled { opacity: 0.7; cursor: default; pointer-events:none; } /* all buttons, all states */ .moze-button, .moze-button-large, .moze-form .moze-formbutton, .mz_editable .moze-button, .mz_editable .moze-button-large, .mz_editable .moze-button:not(.btn-alt) *, /* legacy */ .mz_editable .moze-button-large:not(.btn-alt) * /* legacy */ { color: #FFFFFF; color: var(--color-button-text, #FFFFFF); } .moze-button:hover, .moze-button-large:hover, .moze-form .moze-formbutton:hover, .mz_editable .moze-button:hover, .mz_editable .moze-button-large:hover { color: #FFFFFF; color: var(--color-button-text-hover, #FFFFFF); } /* default button colors */ .moze-form .moze-formbutton, .moze-button, .moze-button-large { background-color: #447CE4; background-color: var(--color-button, #447CE4); } .moze-form .moze-formbutton:hover, .moze-button:hover, .moze-button-large:hover { background-color: #333333; background-color: var(--color-button-hover, #333333); } .moze-button.btn-alt, .moze-button-large.btn-alt { color: #447CE4; color: var(--color-button, #447CE4); } .moze-button.btn-alt:hover, .moze-button-large.btn-alt:hover { color: #333333; color: var(--color-button-hover, #333333); } /* menu button */ #header-side .moze-button.menu-button { background-color: var(--color-menu-text, #666666); color: var(--color-header, #FFFFFF); } #header-side .moze-button.menu-button:hover { background-color: var(--color-menu-text-selected, #000000); } #header-side .moze-button.menu-button.btn-alt { color: var(--color-menu-text, #666666); } #header-side .moze-button.menu-button.btn-alt:hover { color: var(--color-menu-text-selected, #000000); } /* default button colors - special section button color overrides */ .section-text-color-1 .mz_editable .moze-formbutton, .section-text-color-1 .mz_editable .moze-button, .section-text-color-1 .mz_editable .moze-button-large:not([class*="btn-"]) { background-color: #FFFFFF; background-color: var(--color-text-1-button, #FFFFFF); color: #222222; color: var(--color-text-1-button-text, #222222); } .section-text-color-1 .mz_editable .moze-button.btn-alt, .section-text-color-1 .mz_editable .moze-button-large.btn-alt { color: #FFFFFF; color: var(--color-text-1-button, #FFFFFF); background: transparent; } .section-text-color-1 .mz_editable .moze-formbutton:hover, .section-text-color-1 .mz_editable .moze-button:hover, .section-text-color-1 .mz_editable .moze-button-large:hover, .transparentnavi .menu-button:hover { opacity: 0.8; } /* button of color 0 (default) */ .moze-button-large.btn-color-0, .moze-button-large.btn-color-0:hover { color: #447CE4; color: var(--color-button-text, #447CE4); background-color: #FFFFFF; background-color: var(--color-button, #FFFFFF); } /* button of color 1 */ .moze-button-large.btn-color-1, .moze-button-large.btn-color-1:hover { color: #333333; color: var(--color-text-1-button-text, #333333); background-color: #FFFFFF; background-color: var(--color-text-1-button, #FFFFFF); } /* monochrome ghost button */ .moze-button-large.btn-alt-mono, .moze-button-large.btn-alt-mono:hover { color: #333333; color: var(--color-text-strong, #333333); } .section-text-color-1 .moze-button-large.btn-alt-mono, .section-text-color-1 .moze-button-large.btn-alt-mono:hover { color: #FFFFFF; color: var(--color-text-1, #FFFFFF); } /* colored ghost button */ .moze-button-large.btn-alt-monotext, .moze-button-large.btn-alt-monotext:hover { border-color: #447CE4; border-color: var(--color-button, #447CE4); color: #333333; color: var(--color-text-strong, #333333); } .section-text-color-1 .moze-button-large.btn-alt-monotext, .section-text-color-1 .moze-button-large.btn-alt-monotext:hover { border-color: #FFFFFF; border-color: var(--color-text-1-button, #FFFFFF); color: #FFFFFF; color: var(--color-text-1, #FFFFFF); } /* hover effects */ .moze-button-large[class*=btn-color]:hover { opacity: 0.8; } .moze-button-large[class*=btn-alt-]:hover { opacity: 0.7; } /* default button sizings */ .moze-button.btn-alt { padding-top: 0.42em; padding-bottom: 0.42em; } .moze-button-large[class*=btn-alt] { padding-top: 0.76em; padding-bottom: 0.76em; } .moze-button.btn-alt, .moze-button-large[class*=btn-alt] { border-width: 2px; border-style: solid; background-color: transparent; background-image: none; box-shadow: none; } .moze-button.btn-alt:hover, .moze-button-large[class*=btn-alt]:hover { background-color: transparent; background-image: none; box-shadow: none; } .mz_inlinebuttons { padding-top: 40px; } .gridrow.section-footer .mz_inlinebuttons { padding-top: 0; } /* covers all cases except mentioned below */ .bigbar-overlay-buttons .moze-button-large, .mz_inlinebuttons .moze-button-large { margin-left: 5px; margin-right: 5px; } /* reset margins for left and right aligned layouts */ .bigbar-overlay-container:not(.overlay-align-center) .moze-button-large, .section:not(.section-align-center) .mz_inlinebuttons .moze-button-large { margin-left: 0px; margin-right: 0px; } /* if more than 1 button */ .bigbar-overlay-buttons .moze-button-large:not(:last-child), .mz_inlinebuttons .moze-button-large:not(:last-child) { margin-bottom: 10px; } /* if more than 1 button and left or right align */ .bigbar-overlay-container:not(.overlay-align-center) .bigbar-overlay-buttons .moze-button-large:not(:last-child), .section:not(.section-align-center) .mz_inlinebuttons .moze-button-large:not(:last-child) { margin-left: 0px; margin-right: 10px; } .mz_rtl .bigbar-overlay-container:not(.overlay-align-center) .bigbar-overlay-buttons .moze-button-large:not(:last-child), .mz_rtl .section:not(.section-align-center) .mz_inlinebuttons .moze-button-large:not(:last-child) { margin-right: 0; margin-left: 10px; } @media screen and (max-width: 750px) { .moze-button-large, .moze-form .moze-formbutton { min-width: 120px; } } /********************************/ /* Banner */ /********************************/ #bigbar.keep-aspect { -moz-box-sizing: border-box; box-sizing: border-box; } #bigbar .mz_banner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .mz_banner .moze-banner { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; } .mz_banner .moze-banner { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; } .mz_banner .moze-banner-slide-left, .mz_banner .moze-banner-slide-right { background: rgba(0, 0, 0, 0.4) no-repeat center center; background-size: 25px; position: absolute; opacity: 0; top: 50%; width: 50px; height: 50px; margin-top: -25px; display: block; z-index: 50; } .mz_banner .moze-banner-slide-left { background-image: url("/libs/icons/icon-arrow-left-white.svg"); left: 0; } .mz_banner .moze-banner-slide-right { background-image: url("/libs/icons/icon-arrow-right-white.svg"); right: 0; } div:hover > .mz_banner .moze-banner-slide-right, div:hover > .mz_banner .moze-banner-slide-left { opacity: 1; } @media screen and (max-width: 600px) { div:hover > .mz_banner .moze-banner-slide-right, div:hover > .mz_banner .moze-banner-slide-left { opacity: 0; } } .bigbar-h1 { word-wrap: break-word; } .bigbar-h1 .mz_wysiwyg { margin: 0px; line-height: 1.3; } .bigbar-h2 .mz_wysiwyg { line-height: 1.5; } #bigbar-down { animation: jumpy 0.5s ease 1s infinite alternate; -webkit-animation: jumpy 0.5s ease 1s infinite alternate; /* Safari and Chrome */ } .bigbar-overlay-buttons { text-align: center; left: 0; right: 0; padding-top: 40px; /*display: none;*/ } /* if buttons are not part of central alignment layout, do not center, otherwise always center */ .bigbar-overlay-container:not(.overlay-align-center) .bigbar-overlay-buttons { text-align: inherit; } .bigbar-overlay-container { position: relative; display: flex; flex-direction: column; /*min-height: 350px;*/ justify-content: flex-end; align-items: flex-start; box-sizing: border-box; } @media screen and (max-width: 1200px) { .keep-aspect .bigbar-overlay-container { min-height: 370px !important; } } @media screen and (min-width: 1800px) { .keep-aspect .bigbar-overlay-container { min-height: 580px !important; } } [class*="overlay-align-"] { padding: 40px; max-width: 80%; } .overlay-align-center { align-items: center; justify-content: center; margin: 0 auto; } .overlay-align-center .bigbar-h1 .mz_wysiwyg, .overlay-align-center .bigbar-h2 .mz_wysiwyg { text-align: center; float: none; } .overlay-align-center .bigbar-h1, .overlay-align-center .bigbar-h2 { float: none; } .overlay-align-left { justify-content: flex-end; align-items: flex-start !important; max-width: 45%; text-align: left !important; } .bigbar-overlay-container .overlay-align-left #bigbar-overlay { text-align: left; align-items: flex-start; } .overlay-align-right { justify-content: flex-end; align-items: flex-start; max-width: 45%; left: auto; float: right; } #bigbar-container:after, #bigbar:after { content: " "; display: table; clear: both; } .overlay-align-right #bigbar-overlay { text-align: left; } #bigbar-overlay { padding: 25px; box-sizing: border-box; } .bigbar-h1 .mz_wysiwyg { margin-bottom: 0.2em; } @media screen and (max-width: 1200px) { .overlay-align-left, .overlay-align-right { max-width: 50%; } } @media screen and (max-width: 1024px) { [class*="overlay-align-"] { justify-content: flex-end; } .overlay-align-left, .overlay-align-right { max-width: 60%; } } @media screen and (min-width: 751px) { .bigbar-overlay-container.overlay-with-buttons { padding: 50px; justify-content: center; } } @media screen and (max-width: 750px) { [class*="overlay-align-"] { padding: 20px; } .bigbar-overlay-container { min-height: auto !important; } .bigbar-overlay-container.overlay-with-buttons { padding: 20px; } .bigbar-overlay-buttons { padding-top: 20px; } .overlay-align-center { max-width: none; } .overlay-align-left, .overlay-align-right { max-width: 70%; } #bigbar-overlay { margin-top: 230px !important; padding: 20px; } } @media screen and (max-width: 500px) { .overlay-align-center, .overlay-align-left, .overlay-align-right { max-width: none; } } @keyframes jumpy { from { background-position: center 0px; } to { background-position: center 10px; } } @-webkit-keyframes jumpy { /* Safari and Chrome */ from { background-position: center 0px; } to { background-position: center 10px; } } /********************************/ /* Header, title, toptext, languages */ /********************************/ .design-boxed #wrap { margin: 0 auto; max-width: 1260px; } #title { margin: 14px 0px; } #title .mz_wysiwyg { line-height: 1; color: var(--color-title, inherit); font-size: 2.3em; } #header, #bottom, #bigbar-container, #menu-container, #submenu { margin: 0 auto; clear: both; padding: 20px 40px; } #submenubox { background-color: var(--color-submenu, transparent); } .mobile-header #submenu ul { background-color: var(--color-submenu, var(--color-background, #FFFFFF)); } #bottom { padding: 40px; } #header { transition: padding 0.1s; } #header:after { content: ' '; display: table; clear: both; } #bigbar-container, #submenu { padding-top: 0px; padding-bottom: 0px; } #submenu > ul { margin-left: -14px; margin-right: -14px; } .container, #header, #bottom, #bigbar-container, #menu-container, #submenu { max-width: 1260px; box-sizing: border-box; } .design-width-narrow .container, .design-width-narrow #header, .design-width-narrow #bottom, .design-width-narrow #submenu, .design-width-narrow #menu-container { max-width: 1140px; } .design-width-narrow.design-boxed #wrap { max-width: 1140px; } .design-width-s .container, .design-width-s #header, .design-width-s #bottom, .design-width-s #submenu, .design-width-s #bigbar-container, .design-width-s #menu-container { max-width: 1060px; } .design-width-s.design-boxed #wrap { max-width: 1060px; } .design-width-l .container, .design-width-l #header, .design-width-l #bottom, .design-width-l #submenu, .design-width-l #bigbar-container, .design-width-l #menu-container { max-width: 1460px; } .design-width-l.design-boxed #wrap { max-width: 1460px; } .design-width-xl .container, .design-width-xl #header, .design-width-xl #bottom, .design-width-xl #submenu, .design-width-xl #bigbar-container, .design-width-xl #menu-container { max-width: 1660px; } .design-width-xl.design-boxed #wrap { max-width: 1660px; } .design-menu-fullwidth #header { max-width: none; } .design-boxed #bottom { box-sizing: content-box; } [class*="header-menu-"].design-boxed #header, .design-boxed #submenu { box-sizing: content-box; } #title, #toptext { clear: both; text-align: center; } #title .mz_wysiwyg, #toptext .mz_wysiwyg { margin: 0 auto; display: inline-block; } #toptext .mz_wysiwyg * { color: var(--color-menu-text); } #title .moze-wysiwyg-editor { min-height: 30px; min-width: 1em; } /* Toptext */ #toptext .mz_wysiwyg { margin: 11px 0px; } #toptext .mz_wysiwyg a { opacity: 0.65; } /* Side menu */ #header-side { margin-left: 35px; display: flex; align-items: center; } #header-side a { color: #666666; fill: #666666; color: var(--color-menu-text, #666666); fill: var(--color-menu-text, #666666); } #shopicons { display: flex; align-items: center; } .menu-button { min-width: 120px; } #topbutton { margin: 0; margin-left: 1.6em; } .mz_rtl #topbutton { margin: 0; margin-right: 1.6em; } @media screen and (min-width: 751px) { /* hide by dfault */ #top:not(.sticky.is-fat):not(.sticky.is-semifat) ~ div #shopbar { visibility: hidden; z-index: 0; } } #header-side .shopbar-cart { position: relative; } #header-side .shopbar-cart span:empty { display: none; } #header-side .shopbar-cart span { position: absolute; top: -8px; right: -3px; color: #FFFFFF; background-color: #B02032; border-radius: 30px; display: flex; width: 25px; height: 25px; text-align: center; font-size: 0.8em; align-items: center; justify-content: center; line-height: 1; z-index: 2; } .mz_rtl #header-side { margin-left: 0; margin-right: 35px; } #languages ul { list-style: none outside none; padding: 0px; margin: 0px; } #languages li { display: inline-block; line-height: 1; margin: 0px; padding: 0px; text-align: center; } #languages ul li a { padding: 5px; text-decoration: none; } body:not(.design-languages-dropdown) #languages > a, body.mobile-header #languages > a { display: none; } .design-languages-dropdown:not(.mobile-header) #languages ul { display: none; } .design-languages-dropdown:not(.mobile-header) #languages > a { display: flex; align-items: center; } .design-languages-dropdown:not(.mobile-header) #languages ul { position: absolute; padding: 10px; box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.1); z-index: 500; background-color: #FFFFFF; background-color: var(--color-header, #FFFFFF); border-radius: 3px; } .design-languages-dropdown:not(.mobile-header) #languages li { display: block; text-align: start; } .design-languages-dropdown:not(.mobile-header) #languages li a { padding: 10px 15px; display: block; text-decoration: none !important; } .design-languages-dropdown:not(.mobile-header) #languages:hover ul, .design-languages-dropdown:not(.mobile-header) #languages > a:focus + ul { display: block; } .menu-icon img, .menu-icon svg { width: 24px; height: 24px; box-sizing: border-box; display: inline-block; } .menu-icon { padding: 0.6em; display: flex; align-items: center; cursor: pointer; text-decoration: none; } /* Header */ #header::after { content: " "; clear: both; display: table; } #top { background-color: var(--color-header, transparent); } #top, #bottom { /* necessary for backend to position editing button, but cannot use .backend to avoid override */ position: relative; } .transparentnavi #wrap { position: relative; } .transparentnavi #top { position: absolute; left: 0; right: 0; z-index: 1; background-color: transparent; border: 0; } .transparentnavi #top:not(.sticky).section-text-color-1 #header:not(.floating) #title .mz_wysiwyg, .transparentnavi #top:not(.sticky).section-text-color-1 #header:not(.floating) #toptext .mz_wysiwyg *, .transparentnavi #top:not(.sticky).section-text-color-1 #menu > ul > li > a, .transparentnavi #top:not(.sticky).section-text-color-1 #menu > ul > li.selected > a, .transparentnavi #top:not(.sticky).section-text-color-1 #header-side a.menu-icon, .transparentnavi:not(.design-languages-dropdown) #top:not(.sticky).section-text-color-1 #languages li a, .transparentnavi #top:not(.sticky).section-text-color-1 #header:not(.floating) .mobile-menu-opener svg * { color: var(--color-text-1, #FFFFFF); fill: var(--color-text-1, #FFFFFF); background-color: transparent; } .transparentnavi #top:not(.sticky).section-text-color-1 #header-side .shopbar-cart span, .transparentnavi #top:not(.sticky).section-text-color-1 #header-side .menu-button { background-color: var(--color-text-1-button, #FFFFFF); color: var(--color-text-1-button-text, #222222); } .transparentnavi #top:not(.sticky).section-text-color-1 #header-side .menu-button.btn-alt { background-color: transparent; color: var(--color-text-1-button, #FFFFFF); } .transparentnavi #top:not(.sticky).section-text-color-1 #menu > ul > li > a:hover, .transparentnavi #top:not(.sticky).section-text-color-1 #menu > ul > li.selected > a, .transparentnavi #top:not(.sticky).section-text-color-1 #header-side a.menu-icon:hover, .transparentnavi:not(.design-languages-dropdown) #top:not(.sticky).section-text-color-1 #languages li.selected a, .transparentnavi:not(.design-languages-dropdown) #top:not(.sticky).section-text-color-1 #languages li a:hover { opacity: 0.7; } .transparentnavi #top:not(.sticky) #header:not(.floating) #title .mz_wysiwyg, .transparentnavi #top:not(.sticky) #header:not(.floating) #toptext .mz_wysiwyg *, .transparentnavi #top:not(.sticky) #menu > ul > li > a, .transparentnavi #top:not(.sticky) #header-side a.menu-icon, .transparentnavi:not(.design-languages-dropdown) #top:not(.sticky) #languages li a, .transparentnavi #top:not(.sticky) #header:not(.floating) .mobile-menu-opener svg * { color: var(--color-text-strong, #222222); fill: var(--color-text-strong, #222222); } .transparentnavi #top:not(.sticky) #header-side .shopbar-cart span, .transparentnavi #top:not(.sticky) #header-side .menu-button { background-color: var(--color-text-strong, #222222); color: var(--color-background, #FFFFFF); } .transparentnavi #top:not(.sticky) #header-side .menu-button.btn-alt { background-color: transparent; color: var(--color-text-strong, #222222); } .transparentnavi #top:not(.sticky) #menu > ul > li > a:hover, .transparentnavi #top:not(.sticky) #menu > ul > li.selected > a, .transparentnavi #top:not(.sticky) #header-side a.menu-icon:hover, .transparentnavi:not(.design-languages-dropdown) #top:not(.sticky) #languages li.selected a, .transparentnavi:not(.design-languages-dropdown) #top:not(.sticky) #languages li a:hover { opacity: 0.7; } /* Switchable menu layouts for the top of the page */ @media screen and (min-width: 751px) and (min-height:501px) { #header-main { min-height: 74px; } #top.sticky #header-main { min-height: auto; } [class*="header-menu-"] #header { display: flex; position: relative; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-end; align-content: end; } [class*="header-menu-"] #header-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; flex: 1 1 auto; } .header-menu-center #header-main { flex: 1 1 100%; justify-content: center; } .header-menu-begin #header-main, .header-menu-down #header-main { justify-content: flex-start; } .header-menu-corner #header-main, .header-menu-middle #header-main { flex-wrap: nowrap; } .header-menu-corner #header, .header-menu-middle #header { justify-content: space-between; } .header-menu-corner #header-main { max-width: 60%; } .header-menu-middle #header-main { max-width: 80%; } .header-menu-middle #header-side { margin: 0; } #title > a { display: block; width: 100%; } .header-menu-corner #title { width: 33.3%; word-break: break-word; } .header-menu-middle #menu { /* allow as much space as possible for this to avoid flickers */ width: 75%; } .header-menu-middle #title { text-align: left; } .mz_rtl .header-menu-middle #title { text-align: right; } .header-menu-corner #menu { width: 66.6%; } .header-menu-middle #title { width: 25%; } .header-menu-corner #title { order: 2; margin-left: 0; margin-right: 0; } .header-menu-corner #menu > ul { text-align: initial; } [class*="header-menu-"] #header-side { order: 2; flex: 0 1 auto; } .header-menu-begin #header-side, .header-menu-end #header-side { margin: 0; margin-left: 2em; } .mz_rtl.header-menu-begin #header-side, .mz_rtl.header-menu-end #header-side { margin: 0; margin-right: 2em; } .header-menu-center #header-side { margin: 0; } .header-menu-middle .menu-wrapped #header-main { max-width: none; } .header-menu-down #header-side, .header-menu-begin .menu-wrapped #header-side, .header-menu-end .menu-wrapped #header-side { position: absolute; right: 40px; top: 0px; margin-top: 20px; } .header-menu-center #toptext, .header-menu-begin #toptext, .header-menu-end #toptext, .header-menu-middle #toptext, .header-menu-corner #toptext { display: none; } .mz_rtl.header-menu-down #header-side, .mz_rtl.header-menu-begin .menu-wrapped #header-side, .mz_rtl.header-menu-end .menu-wrapped #header-side { right: auto; left: 40px; } [class*="header-menu-"]:not(.mz_rtl):not(.header-menu-center):not(.header-menu-corner):not(.header-menu-middle) #title { margin-right: 2.6em; } [class*="header-menu-"].mz_rtl:not(.header-menu-center):not(.header-menu-corner):not(.header-menu-middle) #title { margin-left: 2.6em; } .header-menu-center #title { margin-left: 0; margin-right: 0; flex: 1 1 100%; text-align: center; } .header-menu-center #title .mz_wysiwyg { display: inline-block; } /* .header-menu-down #title, .header-menu-begin .menu-wrapped #title, .header-menu-end .menu-wrapped #title { -margin-top: 0px; } */ .header-menu-center #toptext { text-align: center; } .header-menu-begin #menu, .header-menu-end #menu, .header-menu-middle #menu { flex: 1 1 auto; } .header-menu-center #menu, .header-menu-down #menu { flex: 1 1 100%; } .header-menu-center #menu { display: flex; justify-content: center; } .header-menu-end #menu > ul { text-align: right } .mz_rtl.header-menu-end #menu > ul { text-align: left } .header-menu-begin #menu > ul, .header-menu-down #menu > ul, .header-menu-end .menu-wrapped #menu > ul { text-align: left; } .mz_rtl.header-menu-begin #menu > ul, .mz_rtl.header-menu-down #menu > ul, .mz_rtl.header-menu-end .menu-wrapped #menu > ul { text-align: right; } } /* fixed menu for top */ @media screen and (min-width: 751px) and (min-height:501px) { body.design-v2:not(.mobile-header) #top.sticky { background-color: var(--color-header); } body:not(.mobile-header) #top.sticky:not(.legacy-sticky-menu), body:not(.mobile-header) #top.sticky.legacy-sticky-menu #menu { left: 0; right: 0; top: 0; bottom: auto !important; position: fixed !important; z-index: 51; box-shadow: 0px 1px 5px rgba(0,0,0,0.17); -webkit-backface-visibility: hidden; /* fix for Chrome scrolling bug */ } #mz_customizer[style*="block"] ~ #top.sticky:not(.legacy-sticky-menu), #mz_customizer[style*="block"] ~ #top.sticky.legacy-sticky-menu #menu, #mz_customizer[style*="block"] ~ div #top.sticky:not(.legacy-sticky-menu), #mz_customizer[style*="block"] ~ div #top.sticky.legacy-sticky-menu #menu { left: 200px !important; } body.backend:not(.mobile-header) #top.sticky:not(.legacy-sticky-menu), body.backend:not(.mobile-header) #top.sticky.legacy-sticky-menu #menu { left: 95px !important; } body:not(.mobile-header) #top.sticky.legacy-sticky-menu #menu { margin-top: 0; } #top.sticky.is-semifat #header-side, #top.sticky.is-fat #header-side, #top.sticky.is-fat #title, #top.sticky.is-fat #toptext, #top.sticky.has-menubox #header, #top.sticky.is-fat #bigbar-overlay .bigbar-h1 { display: none; } #top.scrolled-deep:not(.legacy-sticky-menu) #header { padding-top: 0px; padding-bottom: 0px; /*transition: padding 0.3s;*/ } #top.scrolled-deep.resize-logo:not(.legacy-sticky-menu) #title .mz_wysiwyg img { max-height: 50px; width: auto !important; } #top.scrolled-deep #title { display: flex; align-items: center; min-height: 40px; } .header-menu-middle #top.scrolled-deep #title .mz_wysiwyg { margin: 0; } } @media screen and (max-width: 750px), screen and (max-height:500px) { #header-side, .mz_rtl #header-side { float: none; margin: 0 0 25px 0 !important; padding: 0 !important; justify-content: center; } #languages ul, .mz_rtl #languages ul { margin-left: 0 !important; margin-right: 0 !important; margin-top: 5px !important; margin-bottom: 0px !important; } .mobile-header #header-side { position: absolute; } } /********************************/ /* Menu Bones */ /********************************/ /* All levels */ .mz_menu ul { list-style: none; padding: 0; margin: 0; } .mz_menu ul:after { content: ""; clear: both; display: block; } #menu ul li { display: block; float: left; text-align: center; line-height: 1; } #menu ul li a { text-decoration: none; color: #666666; color: var(--color-menu-text, #666666); } #menu ul li > a:hover, #menu ul li.selected > a, #header-side li.selected > a, #header-side a:hover { color: #000000; fill: #000000; color: var(--color-menu-text-selected, #000000); fill: var(--color-menu-text-selected, #000000); } #header-side .shopbar-cart span { background-color: var(--color-menu-text, #000000); color: var(--color-header, transparent); } .mz_rtl #menu ul li { float: right; } /* Top level */ #menu > ul > li, .mz_rtl #menu > ul > li { position: relative; display: inline-block; float: none; } #menu > ul > li > a { display: inline-block; padding: 8px 15px; } .design-menu-selected-underline1 #menu > ul > li.selected > a, .design-menu-selected-underline1 #menu > ul > li > a:hover, .design-menu-selected-underline1 #submenu li:hover > a, .design-menu-selected-underline1 #submenu li.selected > a, .design-menu-selected-underline1 #languages li.selected a, .design-menu-selected-underline1 #languages li a:hover { text-decoration-line: underline; text-underline-offset: 0.5em; text-decoration-thickness: 1px; } .design-menu-selected-underline2 #menu > ul > li.selected > a, .design-menu-selected-underline2 #menu > ul > li > a:hover, .design-menu-selected-underline2 #submenu li:hover > a, .design-menu-selected-underline2 #submenu li.selected > a, .design-menu-selected-underline2 #languages li.selected a, .design-menu-selected-underline2 #languages li a:hover { text-decoration-line: underline; text-underline-offset: 0.5em; text-decoration-thickness: 2px; } #submenu li.selected > a, #submenu li:hover > a { text-decoration-color: var(--color-submenu-accent); } body:not(.transparentnavi) #top:not(.sticky) #menu ul li > a:hover, body:not(.transparentnavi) #top:not(.sticky) #menu ul li.selected > a, body:not(.transparentnavi) #top:not(.sticky) #languages li.selected a, body:not(.transparentnavi) #top:not(.sticky) #languages li a:hover, #top.sticky #menu ul li > a:hover, #top.sticky #menu ul li.selected > a, #top.sticky #languages li.selected a, #top.sticky #languages li a:hover { text-decoration-color: var(--color-menu-accent); } /* Popup mechanism */ #menu ul ul { display: none; z-index: 500; padding: 10px 0; } #menu ul li:hover > ul { display: block; } /* Lower levels */ #menu ul ul li a { display: block; padding: 13px 30px; } #menu ul ul { position: absolute; top: 100%; min-width: 180px; background-color: #FFFFFF; background-color: var(--color-header, #FFFFFF); box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.1); } #menu ul ul li { float: none; position: relative; margin: 0px; white-space: nowrap; text-align: left; } .mz_rtl #menu ul ul li { float: none; text-align: right; } #menu ul ul ul { position: absolute; left: 100%; top:0; } .mz_rtl #menu ul ul ul { left: auto; right: 100%; } /* menu definitions for mobile phones */ @media screen and (max-width: 750px), screen and (max-height:500px) { #menu > ul > li { display: inline-block !important; float: none !important; } #menu { width: auto; text-align: center; } .mobile-header #menu { text-align: center; } #menu-placeholder { display: none; } } /********************************/ /* Menu Design & Burger Menu */ /********************************/ #menu { line-height: 1; clear: both; margin: 12px 0px; margin-left: -15px; margin-right: -15px; } #menu > ul { text-align: center; } #menu:after { content: ' '; display: table; clear: both; } #menu-container { padding-top: 0px; padding-bottom: 0px; } .mobile-menu-closer { display: none !important; } #menu-opener, #languages-opener, .mobile-menu-arrow { display: none; } @media screen and (max-width: 750px), screen and (max-height:500px) { .mobile-header #menu-container { padding: 0; } .mobile-header #languages ul li { text-align: right; display: block; } .mobile-header.mz_rtl #languages ul li { text-align: left; } .mobile-header #languages ul li > a { font-size: 16px; } #languages ul li.mobile-menu-closer a { text-align: right; } .mz_rtl #languages ul li.mobile-menu-closer a { text-align: left; } .mobile-menu-opener { width: 55px; height: 55px; cursor: pointer; } .mobile-menu-opener svg * { transition: fill 0.5s ease; } #mobile-menu-bar { display: none; /*background-color: none; left: 0px; right: 0px; width: auto; height: 0; z-index: 51; position: fixed; transition: background-color 0.5s ease;*/ } #menu-opener { z-index: 52; order: 0; } #languages-opener { z-index: 53; order: 2; } #menu-opener, #languages-opener { display: block; } .mobile-menu-closer { display: block !important; } .mobile-menu-opener img, .mobile-menu-opener svg { width: 55px; height: 55px; padding: 16px; box-sizing: border-box; } .mobile-menu-closer img, .mobile-menu-closer svg { width: 23px; height: 23px; box-sizing: border-box; } .mobile-menu-closer a { padding-top: 0 !important; padding-bottom: 0 !important; cursor: pointer; } #menu > ul > li > a { position: relative; } .mobile-menu-arrow { position: absolute; top: 0; right: 0; bottom: 0; width: 55px; } .mobile-menu-arrow img, .mobile-menu-arrow svg { position: absolute; top: 0; right: 0; max-width: 100%; max-height: 100%; padding: 14px; box-sizing: border-box; } .mz_rtl .mobile-menu-arrow, .mz_rtl .mobile-menu-arrow img, .mz_rtl .mobile-menu-arrow svg { left: 0; right: auto; } .mobile-header #menu, .mobile-header #languages, .mobile-header #submenu > ul { display: none; position: fixed; float: none; top: 0; bottom: 0; z-index: 155; /* even over gui */ width: 100%; overflow-y: auto; } .mobile-header #menu, .mobile-header #languages { max-width: 420px; padding: 0px !important; margin: 0px !important; box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.3); } .mobile-header #submenu > ul { text-align: left; left: 0; right: 0; box-sizing: border-box; } .mz_rtl.mobile-header #submenu > ul { text-align: right; } .mobile-header #menu, .mobile-header #languages { border: none; transition: 0.2s; } .mobile-header:not(.mz_rtl) #menu, .mobile-header.mz_rtl #languages { left: -300px; } .mobile-header.mz_rtl #menu, .mobile-header:not(.mz_rtl) #languages { right: -300px; } .mobile-header:not(.mz_rtl) #menu.visible, .mobile-header.mz_rtl #languages.visible { left: 0px; } .mobile-header.mz_rtl #menu.visible, .mobile-header:not(.mz_rtl) #languages.visible { right: 0px; } .mobile-header #menu ul ul { padding: 0 !important; margin: 0 !important; background-color: transparent; position: static; display: none; box-shadow: none; } .mobile-menu-arrow.unfold { display: block; } .mobile-menu-arrow.fold { display: none; } .mobile-header #menu > ul, .mobile-header #languages ul, .mobile-header #submenu > ul { margin: 0; padding: 15px; } .mobile-header #menu > ul, .mobile-header #languages ul { display: block !important; } .mobile-header #menu > ul > li > a, .mobile-header #languages ul li > a, .mobile-header #submenu > ul > li > a { border: none; padding: 15px !important; } .mobile-header #menu ul { border: none; border-radius: 0; } .mobile-header #menu ul li { display: block; float: none; text-align: left; border: none; padding: 0; margin: 0; } .mobile-header.mz_rtl #menu ul li { text-align: right; } .mobile-header #menu ul li a, .mobile-header #languages ul li > a, .mobile-header #submenu ul li a { margin: 0px !important; display: block !important; border-radius: 0 !important; text-shadow: none; transition: none; letter-spacing: normal; line-height: 1.3; border: none; } .mobile-header #menu > ul > li > a:hover, .mobile-header #menu > ul > li.selected > a, .mobile-header #menu ul ul li:hover a, .mobile-header #menu ul ul li.selected a, .mobile-header #menu ul ul li:hover, .mobile-header #menu ul ul li.selected, .mobile-header #languages li.selected > a, .mobile-header #languages li > a:hover, .mobile-header #submenu ul li a:hover { border: none; background: none; box-shadow: none; text-shadow: none; border-radius: 0; } .mobile-header #menu ul li:hover > ul { animation: none; display: none; } .mobile-header li.expanded .mobile-menu-arrow.unfold { display: none; } .mobile-header li.expanded .mobile-menu-arrow.fold { display: block; } .mobile-header #menu ul li.expanded ul, .mobile-header #submenu ul li.expanded ul { display: block; } .mobile-header #menu ul ul li a, .mobile-header #submenu ul ul li a { padding: 7px 15px 7px 45px !important; text-transform: none; } .mobile-header #menu ul ul li a { background: none; } .mobile-header.mz_rtl #menu ul ul li a { padding-left: 15px !important; padding-right: 45px !important; } .mobile-header #menu ul ul ul li a { padding-left: 65px !important; } .mobile-header.mz_rtl #menu ul ul ul li a { padding-left: 15px !important; padding-right: 65px !important; } .mobile-header #menu > ul > li::after { content: ""; } .mobile-header #menu > ul > li { display: block !important; } .mobile-header #menu > ul > li > ul { padding-bottom: 10px !important; } } .design-menu-caps #menu > ul > li > a { text-transform: uppercase; } /********************************/ /* Submenu */ /********************************/ body:not(.header-menu-down):not(.header-menu-begin) #submenu, body.mobile-header #submenu { text-align: center; } #submenu ul { padding-top: 15px; padding-bottom: 15px; } #submenu a { text-decoration: none; display: inline-block; padding: 10px; margin-left: 4px; margin-right: 4px; color: var(--color-submenu-text, #447CE4); } #submenu li.selected > a, #submenu li:hover > a { color: var(--color-submenu-text-selected, #333333); } .mobile-header #submenu svg * { fill: var(--color-submenu-text, #333333); } #submenu ul li { float: none; display: inline; } #submenu ul ul { display: none; } #submenu ul + ul { padding-top: 0; } #submenu ul + ul a { font-size: 0.85em; } body:not(.mobile-header) #submenu li.selected ul { display: block; } #submenu-opener { border: 1px solid transparent; display: none; margin: 20px; position: relative; cursor: pointer; border-color: var(--color-submenu-text, #333333); color: var(--color-submenu-text, #333333); fill: var(--color-submenu-text, #333333); } #submenu-opener span { display: block; padding: 10px; padding-right: 48px; } #submenu-opener img, #submenu-opener svg { width: 48px; padding: 10px; position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; max-width: 100%; max-height: 100%; } @media screen and (max-width: 750px), screen and (max-height:500px) { #submenu ul li { display: block; } #submenu ul li a { display: block; position: relative; } #submenu-opener { display: inline-block; } } /**********************************/ /* Outer grid and document widths */ /**********************************/ .section { clear: both; } .section.section-banner .container { padding-bottom: 0px; } .container { margin: 0 auto; padding: 40px; } .section.section-backend-bottom .container { padding-top: 0px !important; padding-bottom: 40px; } /* Height */ .section-height-s { } .section-height-m { padding-top: 3.75em; padding-bottom: 3.75em; } .section-height-l { padding-top: 10em; padding-bottom: 10em; } .section-height-xl { padding-top: 16.25em; padding-bottom: 16.25em; } .section-height-m .gridrow.section-header { padding-bottom: 2.5em; } .section-height-m .gridrow.section-footer { padding-top: 2.5em; } .section-height-l .gridrow.section-header { padding-bottom: 3.75em; } .section-height-l .gridrow.section-footer { padding-top: 3.75em; } .section-height-xl .gridrow.section-header { padding-bottom: 5em; } .section-height-xl .gridrow.section-footer { padding-top: 5em; } /* Width */ .section-width-s:not(.section-bigimg) .container { max-width: 800px; } .design-width-s .section-width-s:not(.section-bigimg) .container { max-width: 600px; } .design-width-l .section-width-s:not(.section-bigimg) .container { max-width: 1000px; } .design-width-xl .section-width-s:not(.section-bigimg) .container { max-width: 1200px; } .section-width-m:not(.section-bigimg) .container { max-width: 1000px; } .design-width-s .section-width-m:not(.section-bigimg) .container { max-width: 800px; } .design-width-l .section-width-m:not(.section-bigimg) .container { max-width: 1200px; } .design-width-xl .section-width-m:not(.section-bigimg) .container { max-width: 1400px; } .design-boxed .section-width-s.section-bigimg.section-nobox .container { max-width: 1100px; } .design-boxed .section-width-m.section-bigimg.section-nobox .container { max-width: 1100px; } .design-boxed .section-width-l.section-bigimg.section-nobox .container { max-width: 1200px; } .section-width-l .container { } @media screen and (max-width: 750px) { /* Height */ .section-height-s { } .section-height-m { padding-top: 1.6em; padding-bottom: 1.6em; } .section-height-l { padding-top: 3.2em; padding-bottom: 3.2em; } .section-height-xl { padding-top: 4.8em; padding-bottom: 4.8em; } .section-height-m .gridrow.section-header { padding-bottom: 1.6em; } .section-height-m .gridrow.section-footer { padding-top: 1.6em; } .section-height-l .gridrow.section-header { padding-bottom: 3.2em; } .section-height-l .gridrow.section-footer { padding-top: 3.2em; } .section-height-xl .gridrow.section-header { padding-bottom: 4.8em; } .section-height-xl .gridrow.section-footer { padding-top: 4.8em; } } /* Image banner section */ .section-bigimg { z-index: 0; position: relative; } .section-bigimg.section-width-s:not(.section-halved) .textbox { max-width: 35%; } .section-bigimg.section-width-m:not(.section-halved) .textbox { max-width: 50%; } .section-bigimg.section-width-l:not(.section-halved) .textbox { max-width: 70%; } @media screen and (min-width: 751px) { .section-bigimg.section-halved.section-width-s .textbox { width: 70%; } .section-bigimg.section-halved.section-width-m .textbox { width: 80%; } .section-bigimg.section-halved.section-width-l .textbox { width: 90%; } .section-bigimg.section-halved.section-align-right.section-width-l .textbox { width: 100%; } .section-bigimg.section-halved .halfbox { width: 50%; } } @media screen and (max-width: 750px) { .section-bigimg.section-halved .halfbox { width: 100%; } } .section-bigimg.section-width-s.section-align-center .textbox { max-width: 50%; } .section-bigimg.section-width-m.section-align-center .textbox { max-width: 70%; } .section-bigimg.section-width-l.section-align-center .textbox { max-width: 90%; } .section-bigimg:not(.section-boxed) .container { display: flex; } .section-align-left:not(.section-boxed) .container { justify-content: flex-start; } .section-align-right:not(.section-boxed) .container { justify-content: flex-end; } .section-align-center:not(.section-boxed) .container { justify-content: center; } .section-bigimg .imagebox { display: flex; position: relative; align-items: center; box-sizing: border-box; padding: 6.25em 5em; } .section-box-height-s .imagebox { padding: 2.5em 3.75em; min-height: auto; } .section-box-height-m .imagebox { padding: 6.25em 3.75em; } .section-box-height-l .imagebox { padding: 7.5em 3.75em; min-height: 34.4em; } .section-box-height-xl .imagebox { /*padding: 240px 60px;*/ padding: 7.5em 3.75em; min-height: 43.75em; } @media screen and (max-width: 750px) { .section-box-height-s .imagebox { padding: 1.25em 1.25em; } .section-box-height-m .imagebox { padding: 2.5em 1.25em; min-height: 18.75em; } .section-box-height-l .imagebox { padding: 3.75em 1.25em; min-height: 25em; } .section-box-height-xl .imagebox { padding: 3.75em 1.25em; min-height: 31.25em; } } .section-bigimg.section-boxed:first-child .container { padding-top: 0px; } .section-align-left .imagebox { justify-content: flex-start; } .section-align-right .imagebox { justify-content: flex-end; } .section-align-center .imagebox { justify-content: center; } .section-bigimg-colorizer { display: none; } .section-bigimg-container, .section-bigimg-colorizer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } @media screen and (min-width: 751px) { .section-halved.section-align-left .section-bigimg-container, .mz_rtl .section-halved.section-align-right .section-bigimg-container { left: 50%; right: 0; } .section-halved.section-align-right .section-bigimg-container, .mz_rtl .section-halved.section-align-left .section-bigimg-container { right: 50%; left: 0; } } .section-bigimg-container { background: url('') no-repeat center center; background-size: cover; } .section-bigimg-fixed { background-attachment: fixed; } /* ios only */ @supports (-webkit-touch-callout: none) { .section-bigimg-fixed { background-attachment: initial; } } .textbox { padding: 1.7em 0; box-sizing: border-box; min-width: 300px; } .section-halved .textbox { min-width: auto; } [class*="section-bg-"].textbox { padding: 2.1em; } @media screen and (min-width: 751px) { .section-halved [class*="section-bg-"].textbox { padding-left: 0; padding-right: 0; } .section-halved.section-align-right [class*="section-bg-"].textbox { padding-left: 10%; } } .section-text-transparent .textbox { background-color: transparent; padding: 0; } .section-text-transparent .section-bigimg-colorizer { display: block; } .section-align-center .textbox { text-align: center } @media screen and (max-width: 750px) { .section-bigimg.section-width-s .textbox, .section-bigimg.section-width-s.section-align-center .textbox { max-width: 70%; } .section-bigimg.section-width-m .textbox, .section-bigimg.section-width-l .textbox, .section-bigimg.section-width-m.section-align-center .textbox, .section-bigimg.section-width-l.section-align-center .textbox { max-width: 100%; } .section-bigimg.section-halved .container { justify-content: flex-start; } .section-bigimg:not(.section-align-center):not(.section-boxed) { padding-bottom: 0; padding-top: 290px; } /*.section-bigimg:not(.section-align-center):not(.section-boxed).section-halved.section-align-left { padding-bottom: 290px; padding-top: 0; }*/ .section-bigimg-container, .section-bigimg-colorizer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .section-halved/*.section-align-right*/ .section-bigimg-container, .section-halved/*.section-align-right*/ .section-bigimg-colorizer { bottom: auto; height: 290px; } /*.section-halved.section-align-left .section-bigimg-container, .section-halved.section-align-left .section-bigimg-colorizer { top: auto; height: 290px; }*/ } @media screen and (max-width: 600px) { .section-bigimg.section-width-s .textbox, .section-bigimg.section-width-m .textbox, .section-bigimg.section-width-l .textbox, .section-bigimg.section-width-s.section-align-center .textbox, .section-bigimg.section-width-m.section-align-center .textbox, .section-bigimg.section-width-l.section-align-center .textbox { max-width: 100%; } } /* Table section / component */ .subgrid-section { padding: 1.25em 0; border-bottom: 1px solid var(--color-text-highlight, rgba(0, 0, 0, 0.05)); } .subgrid-section:first-child { padding-top: 0; } .subgrid-section:last-child { padding-bottom: 0; border: none; } .section-text-color-1 .subgrid-section { border-color: var(--color-text-1-highlight, rgba(255, 255, 255, 0.17)); } .subgrid-row { display: flex; flex-direction: row; position: relative; } .subgrid-cell { display: flex; flex-direction: column; padding-right: 2.5em; } .subgrid-cell:last-child { padding-right: 0; } .mz_accordion .subgrid-row { flex-direction: column; } .mz_accordion .subgrid-cell { padding: 0; } .mz_accordion .subgrid-cell.one { padding-right: 2.5em; cursor: pointer; position: relative; } .mz_rtl .mz_accordion .subgrid-cell.one { padding-right: 0; padding-left: 2.5em; } .mz_accordion .subgrid-cell.two { margin-top: 2.5em; } .mz_accordion .subgrid-row:not(.expanded) .subgrid-cell.two, .mz_accordion .subgrid-row:not(.expanded) .arrow.fold, .mz_accordion .subgrid-row.expanded .arrow.unfold { display: none; } .mz_accordion .arrow { fill: var(--color-text); width: 1.5em; position: absolute; top: 0; bottom: 0; right: 0; display: flex; align-items: center; } .mz_accordion .arrow svg{ width: 100%; } .mz_rtl .mz_accordion .arrow { left: 0; right: auto; } .section-text-color-1 .mz_accordion .arrow { fill: var(--color-text-1); } /*@media screen and (min-width: 751px) { */ .mz_table .subgrid-cell { flex: 1; } .mz_table .subgrid-cell.two { text-align: right; } .section-table-ratio-2-1 .mz_table .subgrid-cell.one, .section-table-ratio-1-2 .mz_table .subgrid-cell.two { flex: 2; } .section-table-ratio-3-1 .mz_table .subgrid-cell.one, .section-table-ratio-1-3 .mz_table .subgrid-cell.two { flex: 3; } /*}*/ /*@media screen and (max-width: 750px) { .subgrid-row { flex-direction: column; } .subgrid-cell { display: flex; flex-direction: column; padding-right: 0px; padding-bottom: 1.25em; } .subgrid-cell:last-child { padding-bottom: 0; } }*/ /* Images */ .section-image .mz_component img { max-width: 100%; width: 100%; } /* Video */ figure.mz_inlinevideobox { width: 100%; position: relative; padding-bottom: 56.3%; height: 0; margin: 0; } figure.mz_inlinevideobox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Section catalog */ .gridrow.center-horizontally { display: flex; align-items: center; flex-wrap: wrap; } /* Extra spacing between image and text when side by side */ @media screen and (min-width: 751px) { .gridrow.center-horizontally > div:first-child > div, .mz_rtl .gridrow.center-horizontally > div:last-child > div { margin-left: 0; margin-right: 20px; } .gridrow.center-horizontally > div:last-child > div, .mz_rtl .gridrow.center-horizontally > div:first-child > div { margin-left: 20px; margin-right: 0; } } /* Menu section */ .section-menu .gridrow .gridrow [class^="column-"]:last-child { text-align: right; } .menu-columns-2 { column-count: 2; column-width: 300px; column-gap: 80px; } .tablerow { margin-bottom: 30px; display: inline-block; width: 100%; } .tablerow > div { display: flex; justify-content: space-between; } .tablerow:last-child { margin-bottom: 0; } .tablecell { width: calc(90%*0.75); break-inside: avoid; box-sizing: border-box; } .tablecell + .tablecell { width: calc(90%*0.25); text-align: right; } .mz_rtl .tablecell + .tablecell { text-align: left; } .section-menu-ratio-1-1 .tablecell { width: calc(90%*0.5); } .section-menu-ratio-1-1 .tablecell + .tablecell { width: calc(90%*0.5); } .section-menu-ratio-2-1 .tablecell { width: calc(90%*0.66); } .section-menu-ratio-2-1 .tablecell + .tablecell { width: calc(90%*0.33); } .section-menu-ratio-3-1 .tablecell { width: calc(90%*0.75); } .section-menu-ratio-3-1 .tablecell + .tablecell { width: calc(90%*0.25); } .section-menu-ratio-4-1 .tablecell { width: calc(90%*0.80); } .section-menu-ratio-4-1 .tablecell + .tablecell { width: calc(90%*0.20); } /* Colors */ #wrap, .section-bg-none { background-color: #FFFFFF; background-color: var(--color-background, #FFFFFF); } .section-bg-1 { background-color: #F3F4F7; background-color: var(--color-section-bg-1, #F3F4F7); } .section-bg-2 { background-color: #447CE4; background-color: var(--color-section-bg-2, #447CE4); } .section-bg-3 { background-color: #333333; background-color: var(--color-section-bg-3, #333333); } /*.spacing-ex #bottom, .spacing-ex #header, .spacing-ex #bigbar-container, .spacing-ex #menu-container, .spacing-ex #submenu > ul { padding: 24px 48px; } .spacing-ex .container, .spacing-ex #header, .spacing-ex #bottom, .spacing-ex #bigbar-container, .spacing-ex #menu-container, .spacing-ex #submenu > ul { max-width: 1244px; } .spacing-ex .design-boxed #wrap { max-width: 1244px; } */ /*.spacing-ex .container { margin: 0 auto; padding: 24px 40px; } .spacing-ex .section:first-child .container { padding-top: 40px; } .spacing-ex .section:last-child .container { padding-bottom: 40px; } .spacing-ex .section.section-backend-bottom .container { padding-top: 0px !important; padding-bottom: 40px; } .spacing-ex [class^="column-"] { padding: 20px; } .spacing-ex .gridrow { margin: -20px; }*/ /********************************/ /* Inner grid */ /********************************/ [class^="column-"] { float: left; -moz-box-sizing: border-box; box-sizing: border-box; padding: 2em; } [class^="column-"] .mz_wysiwyg { overflow-wrap: break-word; } .mz_rtl [class^="column-"] { float: right; } .column-1-12 { width: 8.3%; } .column-2-12 { width: 16.6%; } .column-1-4, .column-3-12 { width: 25%; } .column-1-3, .column-4-12 { width: 33.3%; } .column-5-12 { width: 41.6%; } .column-1-2, .column-6-12 { width: 50%; } .column-7-12 { width: 58.3%; } .column-2-3, .column-8-12 { width: 66.6%; } .column-9-12 { width: 75%; } .column-10-12 { width: 83.3%; } .column-11-12 { width: 91.6%; } .column-1, .column-12-12 { width: 100%; } .gridrow { clear: both; margin: -2em; } .gridrow:after, .textbox:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /********************************/ /* Sidebar */ /********************************/ .mainblock { flex-grow: 1; box-sizing: border-box; order: 0; } .sidebar-reverse .mainblock { order: 1; } .sidebar-none .mainblock { width: 100% !important; } .sidebar-none #sidebar { display: none; } #sidebar-wrap { position: relative; display: flex; justify-content: space-between; } #sidebar { width: 29%; min-width: 250px; padding: 0 0 0 40px; box-sizing: border-box; order: 1; flex-shrink: 0; } .mz_rtl #sidebar-wrap { flex-direction: row-reverse; } .sidebar-reverse #sidebar { padding: 0 40px 0 0; } .sidebar-reverse #sidebar { order: 0; } .design-width-narrow #sidebar { width: 31%; } #sidebar .sidebox { margin-bottom: 25px; } #sidebar .sidebox:last-child { margin-bottom: 0px; } body:not(.mz_rtl) .mz_catalogcategories { padding-right: 25px; } body.mz_rtl .mz_catalogcategories { padding-left: 25px; } /********************************/ /* Footer at the page bottom */ /********************************/ /* Bottom */ #bottom { display: flex; flex-wrap: wrap; /*align-items: center;*/ justify-content: space-between; flex-direction: column; text-align: center; line-height: 1.6; } #bottom .mz_wysiwyg { color: var(--color-footer-text, #333333); } #bottom a { color: var(--color-footer-link, #447CE4); } #bottom a:hover, #footmenu li.selected a { color: var(--color-footer-link-hover, #666666); } #footmenu { margin-bottom: 1.5em; } #footmenu ul li { display: inline-block; margin: 0.3em 1.5em 0.3em 0; } #footmenu a { text-decoration: none; } .mz_rtl #footmenu ul li { margin: 0.3em 0 0.3em 1.5em; } body:not(.mz_rtl) #footmenu ul li:last-child { margin-right: 0; } .mz_rtl #footmenu ul li:last-child { margin-left: 0; } #footer { display: flex; align-items: center; flex-direction: column; } #social { margin-top: 1.5em; } @media screen and (min-width: 751px) and (min-height:501px) { [class*=footer-menu-] #bottom, .footer-classic #bottom { flex-direction: row; text-align: left; } [class*=footer-menu-].mz_rtl #bottom, .footer-classic.mz_rtl #bottom { text-align: right; } /* Classic */ .footer-classic #footmenu { flex: 1 1 100%; } .footer-classic #footer { flex-direction: row; align-items: flex-end; width: 100%; } .footer-classic #foottext { flex: 1 1 30%; } .footer-classic #social { margin: 0 0 0 2em; } .mz_rtl.footer-classic #social { margin: 0 2em 0 0; } /* Menu begin */ .footer-menu-begin #bottom { align-items: flex-start; justify-content: flex-end; /* in case no menu exists */ } .footer-menu-begin #footmenu { flex: 1 1 63%; margin: 0 3% 0 0; } .mz_rtl.footer-menu-begin #footmenu { margin: 0 0 0 3%; } .footer-menu-begin #footer { max-width: 33%; align-items: flex-end; } .footer-menu-begin #footer:first-child /* Menu end */ .footer-menu-end #bottom { align-items: flex-start; } .footer-menu-end #footmenu { max-width: 63%; margin: 0 0 0 3%; order: 1; } .mz_rtl.footer-menu-end #footmenu { margin: 0 3% 0 0; } .footer-menu-end #footer { max-width: 33%; align-items: flex-start; order: 0; } .footer-menu-columns #footmenu ul { line-height: 1.3; display: flex; flex-direction: column; flex-wrap: wrap; max-height: 100px; align-content: flex-start; } .footer-menu-columns #footmenu ul li { display: inline-block; margin-right: 60px; margin-bottom: 0.5em; } } .design-footmenu-caps #footmenu > ul > li > a { text-transform: uppercase; } /********************************/ /* Social buttons at the bottom */ /********************************/ #social .twitter:hover { fill: #212932; } #social .facebook:hover { fill: #3B5998; } #social .pinterest:hover { fill: #CB2027; } #social .linkedin:hover { fill: #0275B6; } #social .rss:hover { fill: #F88B02; } #social .draugiem:hover { fill: #E66B19; } #social .vk:hover { fill: #5A7CA0; } #social .instagram:hover { fill: #C82D94; } #social .youtube:hover { fill: #FF0000; } #social .tiktok:hover { fill: #FE2C55; } #footer .mz_social svg, #footer .mz_social a { display: inline-block; width: 2.0em; height: 1.7em; } #footer .mz_social a { padding: 4px; fill: var(--color-footer-link); } /********************************/ /* Blog */ /********************************/ .mz_editable .moze-comment { margin: 2em 0; } .mz_editable .moze-comment div { margin-bottom: 5px; } .mz_editable .moze-comment div:last-child { margin-bottom: 0px; } .moze-post { margin-bottom: 45px; } .moze-post::after { content: ""; display: table; clear: both; } .moze-post > h1:first-of-type, .moze-post-container > h1:first-of-type { margin-bottom: 0em; } .mz_editable .moze-postdetails { margin-top: 0.2em; margin-bottom: 1.6em; } /*.mz_editable .moze-postdetails a { text-decoration: none; }*/ /*.mz_editable .moze-postdetails, .mz_editable .moze-postdetails a, .mz_recentposts ul li span { color: rgba(0,0,0,0.45); opacity: 0.55; }*/ /*.design-inverted .mz_editable .moze-postdetails, .design-inverted .mz_editable .moze-postdetails a, .design-inverted .mz_recentposts ul li span { color: rgba(255, 255, 255, 0.5); }*/ .moze-lighter { opacity: 0.55; } .mz_recentposts a { text-decoration: none; margin-bottom: 2px; display: inline-block; } .mz_recentposts a:hover { color: var(--color-sidemenu-text-hover, var(--color-link)); } .mz_recentposts ul { padding: 0; margin-bottom: 1.5em; } .mz_recentposts ul li { margin-bottom: 0.7em; line-height: 1.4; } .mz_recentposts ul li span { font-size: 0.90em; } /********************************/ /* Misc components */ /********************************/ .mz_editable hr.moze-more-divider { display: none; } .mz_editable .moze-strike { text-decoration: line-through; } .mz_editable iframe { border: none; } .moze-social { margin-bottom: 25px; margin-top: 15px; } .moze-social > span { vertical-align: middle; } .moze-maps, .moze-iframe, .moze-inserted-code, .moze-raw-script { max-width: 100%; } /* image */ .mz_editable img { display: block; max-width: 100%; box-sizing: border-box; } #footer .mz_editable img { display: inline-block; } .mz_editable td img { max-width: none; } /* fixes issue with google maps */ .mz_editable .moze-maps img { max-width: none; border: none; box-shadow: none; } /*.mz_editable div.ui-wrapper:first-child,*/ .mz_editable .moze-wysiwyg-editor > img:first-child { margin-top: 0 !important; } /*.mz_editable div.ui-wrapper:last-child,*/ .mz_editable .moze-wysiwyg-editor > img:last-child { margin-bottom: 0 !important; } .mz_editable .moze-img-right { float: right; margin: 20px 0px 20px 20px !important; } .mz_editable .moze-img-left { float: left; margin: 20px 20px 20px 0px !important; } .mz_editable .moze-img-center { display: block; margin: 20px auto !important; } /* always clear editable box */ .mz_editable div.moze-wysiwyg-editor::after { content: " "; clear: both; display: table; } @media screen and (max-width: 750px) { .mz_editable img, .mz_editable img.moze-img-right, .mz_editable img.moze-img-left { float: none; display: block; margin-left: auto; margin-right: auto; } } .mz_recentposts ul li { list-style: none; } /********************************/ /* Form */ /********************************/ .moze-form { margin: 1.6em 0px; } .section-customizable .moze-form { margin-bottom: 0; } .moze-form input[type="text"], .moze-form input[type="email"], .moze-form select { width: 100%; min-width: 250px; /*max-width: 350px;*/ box-sizing: border-box; } .moze-form textarea { width: 100%; min-width: 250px; /*max-width: 700px;*/ height: 100px; box-sizing: border-box; background-color: #FFFFFF; } .moze-form label { display: inline-block; margin: 0px 0px 0.25em 0px; color: var(--color-text); } .moze-form input:not([type="checkbox"]):not([type="submit"]), .moze-form select, .moze-form textarea { padding: 0.7em; font-size: 1em; margin-bottom: 1.25em; } .moze-form input, .moze-form select, .moze-form textarea { border: 1px solid var(--color-text-border, rgba(0, 0, 0, 0.15)); background-color: #FFFFFF; background-color: var(--color-background, #FFFFFF); color: var(--color-text-strong, #222222); } .moze-form .moze-checkbox { line-height: 1.5em; margin-bottom: 1.25em; } .mz_form.comment textarea { height: 130px; } .mz_form span { vertical-align: top; } @media screen and (max-width: 750px) { .moze-form input[type="text"], .moze-form input[type="email"], .moze-form select, .moze-form textarea { width: 100%; max-width: none; } } .moze-error { color: #D7263D; font-weight: bolder; } /* forms - for dark background */ .section-text-color-1 .moze-form input, .section-text-color-1 .moze-form textarea, .section-text-color-1 .moze-form select { border: 0; background-color: var(--color-text-1-highlight, rgba(255, 255, 255, 0.17)); } .section-text-color-1 .moze-form option { color: #222222; } /********************************/ /* Checkout form */ /********************************/ #cat-order.moze-form input[type="text"], #cat-order.moze-form input[type="email"], #cat-order.moze-form select, #cat-order.moze-form textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 3.2em; max-width: none; min-width: auto; margin-bottom: 18px; } #cat-order.moze-form label.check input[type="checkbox"] { margin: 3px 0; position: absolute; left: 0; } .mz_rtl #cat-order.moze-form label.check input[type="checkbox"] { left: auto; right: 0; } #cat-order.moze-form label.check { margin-bottom: 16px; position: relative; width: 100%; padding-left: 20px; box-sizing: border-box; } .mz_rtl #cat-order.moze-form label.check { padding-left: 0; padding-right: 20px; } #cat-order.moze-form textarea { height: auto; } #cat-discount-success { visibility: hidden; display: inline-block; background: url(/libs/icons/icon-check-green.svg) no-repeat center center; width: 16px; background-size: cover; height: 16px; vertical-align: middle; margin: 0 5px; } #cat-discount.moze-form input { font-size: 1em; padding: 0.6em; margin: 0; box-sizing: border-box; width: 200px; } #cat-discount.moze-form { position: relative; } #cat-discount.moze-form .moze-formbutton { width: auto; margin-left: 5px; cursor: pointer; } .mz_rtl #cat-discount.moze-form .moze-formbutton { margin-left: 0px; margin-right: 5px; } #cat-order.moze-form label { /*white-space: nowrap; text-overflow: ellipsis;*/ overflow: hidden; max-width: 100%; width: 100%; margin-bottom: 0; line-height: 1.3; } label[for="std_addr_zip"] { white-space: nowrap; text-overflow: ellipsis; } #cat-order.moze-form h3 { margin-bottom: 1em; } #cat-loading-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: url(misc/spinner.gif) no-repeat #FFFFFF center center; display: none; } /*#cat-loading-screen.small { margin: auto auto; width: 120px; height: 120px; border-radius: 120px; }*/ #cat-loading-screen div { bottom: 50%; position: absolute; padding-bottom: 80px; text-align: center; width: 100%; } /********************************/ /* Catalog */ /********************************/ /* catalog - cart */ .mz_catalogcart td { vertical-align: middle; padding: 10px 7px; } .mz_catalogcart td.name { width: 100%; } .mz_catalogcart td.qty { padding: 3px 0px; width: 5%; } .mz_catalogcart td.qty a.delete { background: #EEEEEE url(./icons/icon-delete-gray.svg) no-repeat center center; background-size: 10px; display: block; border-radius: 15px; width: 20px; height: 20px; padding-top: 0; margin-right: -5px; margin-left: 3px; } .qty .relative { display: flex; align-items: center; } .qty a.plus, .qty a.minus { text-decoration: none; text-align: center; min-width: 25px; color: unset; } .mz_rtl .mz_catalogcart td.qty a.delete { margin-left: -5px; margin-right: 3px; } /*.mz_catalogcart .moze-form input[type="text"]:focus + div.delete, .mobile-header .mz_catalogcart td.qty div.delete, .mz_catalogcart tr:hover td.qty div.delete { opacity: 1; }*/ .mz_catalogcart div.relative { position: relative; float: left; } .mz_rtl .mz_catalogcart div.relative { float: right; } .mz_catalogcart td.pic { width: 48px; padding: 0 6px 0 0; } .mz_rtl .mz_catalogcart td.pic { padding: 0 0 0 6px; } /*.mz_catalogcart td.cost { text-align: right; padding: 3px 0px; font-weight: bold; }*/ .mz_catalogcart td span.cost { font-weight: bold; } /*.mz_catalogcart td.cost, */ .mz_catalogcart div.totalcost { white-space: nowrap; } /*.mz_rtl .mz_catalogcart td.cost { text-align: left; }*/ .mz_catalogcart .summary { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; } .mz_catalogcart div.total { padding: 17px 10px 0px 0px; } .mz_rtl .mz_catalogcart div.total { padding: 17px 0px 0px 10px; } .mz_catalogcart div.totalcost { padding: 17px 0px 0px 0px; font-weight: bold; text-align: right; } .mz_rtl .mz_catalogcart div.totalcost { text-align: left; } .mz_catalogcart .moze-button-large { text-align: center; display: block !important; } .mz_catalogcart .moze-form input[type="text"] { width: 2.2em; padding: 5px 1px; margin-bottom: 0px; display: block; float: left; text-align: center; min-width: auto; max-width: none; } .mz_rtl .mz_catalogcart .moze-form input[type="text"] { float: right; } .mz_eurocalc .moze-form input[type="text"] { width: 20%; padding: 5px 2px; text-align: center; margin-bottom: 0px; } .mz_catalogcart .moze-form, .mz_eurocalc .moze-form { padding: 0px; border: none; box-shadow: none; background: none; } .mz_catalogcart table { width: 100%; } /* catalog - cats */ .mz_catalogcategories ul { list-style: none; margin: 0; padding: 0; line-height: 1.7; } .mz_catalogcategories ul li a { margin-bottom: 0.6em; display: inline-block; } .mz_catalogcategories ul li ul li { margin-left: 1.5em; font-size: 0.95em; } .mz_catalogcategories ul li.selected > a { font-weight: 600; } .design-v2 .mz_catalogcategories ul li a { color: var(--color-sidemenu-text, var(--color-link)); } .design-v2 .mz_catalogcategories ul li.selected > a { color: var(--color-sidemenu-text-hover, var(--color-link)); } .design-v2 .mz_catalogcategories ul li a:hover { color: var(--color-sidemenu-text-hover, var(--color-link)); } .mz_catalogcategories li.dropdown { position: relative; } .mz_catalogcategories li.dropdown span { cursor: pointer; padding: 0 8px; transform: rotate(90deg); position: absolute; top: -0.1em; right: -25px; font-size: 1.2em; } .mz_rtl .mz_catalogcategories li.dropdown span { right: auto; left: -25px; transform: rotate(-90deg); } /* catalog - general */ .mz_catalog .cat-thumb-pic { margin: 0.75em 0; padding-top: 80%; /*background: url(/backend/css/cat-default-product.png) no-repeat center center; background-size: contain;*/ position: relative; overflow: hidden; cursor: pointer; /* otherwisein backend does not work */ } .mz_catalog .cat-thumb-pic img { max-height: none; max-width: none; min-width: 1px; min-height: 1px; width: 100%; height: auto; position: absolute; top: -100%; bottom: -100%; left: -100%; right: -100%; margin: auto; transition: transform 0.3s; } .mz_catalog .cat-thumb-pic img.taller80 { height: 100%; width: auto; } .mz_catalog .cat-thumb a:hover .cat-thumb-pic img { transform: scale(1.05); } /*.mz_catalog.cat-images-square .cat-thumb-pic img, .mz_catalog.cat-images-wide .cat-thumb-pic img, .mz_catalog.cat-images-tall .cat-thumb-pic img { max-width: none; max-height: none; }*/ .mz_catalog.cat-images-square .cat-thumb-pic, .mz_catalog.cat-images-square .cat-more-item-images a.thumb { padding-top: 100%; } .mz_catalog.cat-images-square .cat-thumb-pic img { height: 100%; width: auto; } .mz_catalog.cat-images-square .cat-thumb-pic img.portrait { height: auto; width: 100%; } .mz_catalog.cat-images-wide .cat-thumb-pic, .mz_catalog.cat-images-wide .cat-more-item-images a.thumb { padding-top: 66%; } .mz_catalog.cat-images-wide .cat-thumb-pic img { width: 100%; height: auto; } .mz_catalog.cat-images-wide .cat-thumb-pic img.wider { width: auto; height: 100%; } .mz_catalog.cat-images-tall .cat-thumb-pic, .mz_catalog.cat-images-tall .cat-more-item-images a.thumb { padding-top: 150%; } .mz_catalog.cat-images-tall .cat-thumb-pic img { height: 100%; width: auto; } .mz_catalog.cat-images-tall .cat-thumb-pic img.taller { height: auto; width: 100%; } .cat-grid { margin: -1.5%; display: flex; flex-wrap: wrap; } .cat-grid:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .cat-message { padding: 2em 1.5%; width: 100%; } /* 3 images - default */ .mz_catalog .cat-thumb { position: relative; width: 33.3%; box-sizing: border-box; padding: 1.5%; display: flex; flex-direction: column; justify-content: space-between; } .mz_catalog.cat-images-1 .cat-thumb { width: 100%; padding: 1.5%; } /* 2 images */ @media screen and (min-width: 481px) { .mz_catalog.cat-images-2 .cat-thumb { width: 50%; padding: 1.5%; } } /* 4 images */ @media screen and (min-width: 901px) { .mz_catalog.cat-images-4 .cat-thumb { width: 25%; padding: 1.5%; } } @media screen and (max-width: 900px) { .mz_catalog .cat-thumb { width: 33.3%; padding: 3%; } } @media screen and (max-width: 750px) { .mz_catalog .cat-thumb { width: 50%; padding: 3%; } } @media screen and (max-width: 480px) { .mz_catalog .cat-thumb { width: 100%; padding: 3%; } } .mz_catalog .cat-thumb-title { display: block; margin: 15px 15px 0px 15px; text-align: center; transition: opacity 0.3s; } .mz_catalog .cat-thumb a:hover .cat-thumb-title { opacity: 0.8; } .mz_catalog .cat-thumb-price { margin: 2px 15px 15px 15px; text-align: center; } .mz_catalog .cat-eprel-link { font-size: 0.8em; margin: 0 0.5em; } .mz_catalog .cat-eprel-label { display: flex; margin-top: 0.4em; } .mz_catalog .cat-thumb-price .cat-eprel-label { justify-content: center; } .mz_catalog .moze-price-box .cat-eprel-label { margin-top: 0.6em; } .mz_catalog .cat-eprel-label img { display: inline; height: 22px; } .mz_catalog .moze-price-box .cat-eprel-label img { height: 26px; } .mz_catalog .moze-price { font-weight: 600; } .section-text-color-none .mz_catalog .moze-price { color: var(--color-price); } .mz_catalog .cat-item-inventory { margin-bottom: 12px; } .mz_catalog .cat-item-inventory:before { content:"\A"; width: 10px; height: 10px; border-radius: 50%; background: #4CB963; display: inline-block; margin-right: 0.5em; } .mz_rtl .mz_catalog .cat-item-inventory:before { margin-right: 0; margin-left: 0.5em; } .mz_catalog .cat-item-inventory.inventory-in-stock:before, .mz_catalog .cat-item-inventory.inventory-in-stock-x:before { background: #4CB963; } .mz_catalog .cat-item-inventory.inventory-can-order:before { background: #F5C744; } .mz_catalog .cat-item-inventory.inventory-out-of-stock:before { background: #D7263D; } .mz_catalog .cat-item-reviews { position: relative; } .mz_catalog .cat-item-reviews h2 { margin-bottom: 0px; } .mz_catalog .cat-item-stars { font-size: 25px; color: #FFB41D; margin-right: 10px; } .mz_catalog .cat-item-rating { margin-bottom: 30px; margin-top: -20px; } .mz_catalog .cat-review { margin: 40px 0; position: relative; } .mz_catalog .cat-item-buy .moze-price { font-size: 1.35em; } .mz_catalog .cat-item-buy .moze-form { margin: 0; } .mz_catalog .cat-item-buy s, .mz_catalog .cat-item-buy .moze-price, .mz_catalog .cat-item-buy .moze-button { vertical-align: middle; } /*.mz_catalog .cat-item-text h1 { margin-bottom: 0.4em; }*/ .cat-item-price { margin-bottom: 30px; } .cat-item-spacer { height: 15px; } .mz_catalog .cat-item-text .cat-item-buy { /*margin: 25px 0 45px 0;*/ margin: 0 0 45px 0; } .cat-item-buy .moze-button-large { width: 100%; } .moze-form .cat-item-variants { width: 100%; min-width: auto; } .cat-item-variant-buttons { display: flex; flex-wrap: wrap; margin: -5px; margin-bottom: 20px; } .cat-item-variant-buttons a { padding: 0.5em 0.7em; border: 1px solid var(--color-text-border); margin: 5px; text-decoration: none; color: var(--color-text-strong); text-align: center; box-sizing: border-box; display: inline-block; min-width: 42px; } .cat-item-variant-buttons.colors a { height: 42px; display: flex; align-items: center; justify-content: center; } .cat-item-variant-buttons a:hover, .cat-item-variant-buttons a.selected { outline: 1px solid var(--color-text-strong); border-color: var(--color-text-strong); } .cat-item-variant-buttons.colors a:hover, .cat-item-variant-buttons.colors a.selected { border-width: 2px; outline-width: 2px; border-color: var(--color-background); } .cat-item-variant-buttons:not(.colors) a.disabled:not(:hover) { opacity: 0.5; } .cat-item-variant-buttons.colors a.disabled:after { content: "\2716"; color: #FFFFFF; font-size: 1.1em; text-shadow: -1px -1px 1px rgba(70,70,70,0.5), /* Top-left shadow */ 1px -1px 1px rgba(70,70,70,0.5), /* Top-right shadow */ -1px 1px 1px rgba(70,70,70,0.5), /* Bottom-left shadow */ 1px 1px 1px rgba(70,70,70,0.5); /* Bottom-right shadow */ } @media screen and (min-width: 751px) { .mz_catalog.cat-legacy-view .cat-item-images { width: 36%; float: right; margin: 0 0 0 4%; } .mz_rtl .mz_catalog.cat-legacy-view .cat-item-images { float: left; margin: 0 4% 0 0; } .cat-item-buy .moze-button-large { width: auto; min-width: 250px; } .moze-form .cat-item-variants { width: auto; max-width: none; min-width: auto; } .mz_catalog.cat-image-right .cat-item-view, .mz_catalog.cat-image-left .cat-item-view { display: flex; justify-content: space-between; } .mz_catalog.cat-image-right .cat-item-images, .mz_rtl .mz_catalog.cat-image-left .cat-item-images { width: 48%; margin: 0 0 0 6%; order: 1; } .mz_catalog.cat-image-left .cat-item-images, .mz_rtl .mz_catalog.cat-image-right .cat-item-images { width: 48%; margin: 0 6% 0 0; order: 0; } .mz_catalog.cat-image-right .cat-item-text { width: 46%; order: 0; } .mz_catalog.cat-image-left .cat-item-text { width: 46%; order: 1; } .mz_catalog.cat-image-right .cat-item-images > a > img, .mz_catalog.cat-image-left .cat-item-images > a > img { max-height: none; } } .mz_catalog .cat-item-images > a > img { margin: 0px auto; max-height: 700px; } .mz_catalog .cat-more-item-images a.thumb { display: block; padding-top: 89%; background: none no-repeat center center; background-size: contain; border: none; position: relative; box-sizing: border-box; overflow: hidden; } .mz_catalog .cat-more-item-images { display: flex; flex-wrap: wrap; margin: 10px -10px; } .mz_catalog .cat-more-item-images .cat-thumb-pic { margin: 0; padding: 10px; width: 50%; box-sizing: border-box; } .mz_catalog.cat-image-left .cat-more-item-images .cat-thumb-pic, .mz_catalog.cat-image-right .cat-more-item-images .cat-thumb-pic { width: 33.3%; } .mz_catalog.cat-buttons-none .cat-thumb-button { display: none; } .mz_catalog .cat-thumb-button { display: block; text-align: center; } .mz_catalog .cat-thumb-button a { margin-top: 0.7em; margin-bottom: 1.4em; min-width: 150px; } /* catalog - cart */ @media screen and (max-width: 750px) { .mz_catalog table#cat-cart { position: relative; } .mz_catalog table#cat-cart thead { display: none; } .mz_catalog table#cat-cart tbody td { display: flex; min-width: 100%; box-sizing: border-box; } .mz_catalog table#cat-cart tbody tr { padding-bottom: 20px; display: block; } .mz_catalog table#cat-cart td { padding-left: 0; padding-right: 0; } .mz_catalog table#cat-cart tbody td::before { content: attr(label); width: 120px; min-width: 120px; text-align: start; padding: 10px; margin: -9px 0; margin-right: 20px; } .mz_catalog table#cat-cart tfoot tr { display: flex; justify-content: space-between; } .mz_catalog table#cat-cart tfoot td { border: none; } .mz_catalog table#cat-cart tfoot td.total { width: auto; } } .mz_catalog #cat-cart { width: 100%; } .mz_catalog #cat-cart td.count, .mz_catalog #cat-cart td.cost, .mz_catalog #cat-cart td.discounted, .mz_catalog #cat-cart td.total { text-align: right; width: 14%; } .mz_rtl .mz_catalog #cat-cart td.count, .mz_rtl .mz_catalog #cat-cart td.cost, .mz_rtl .mz_catalog #cat-cart td.discounted, .mz_rtl .mz_catalog #cat-cart td.total { text-align: left; } .mz_catalog #cat-cart td.cost, .mz_catalog #cat-cart td.totalcost, .mz_catalog #cat-cart td.discounted, .mz_catalog #cat-cart td.total { white-space: nowrap; } .mz_catalog #cat-cart td.totalcost { text-align: right; font-weight: bold; } .mz_rtl .mz_catalog #cat-cart td.totalcost { text-align: left; } td div.tinypic { height: 48px; width: 48px; background: url(/backend/css/cat-default-product.svg) no-repeat center center; background-size: contain; } .mz_catalog #cat-cart div.tinypic { height: 64px; width: 64px; min-width: 64px; } .mz_catalog #cat-cart td.name > div { display: flex; align-items: center; } #cat-cart div.tinypic { margin: 0 1em 0 0; } .mz_rtl #cat-cart div.tinypic { margin: 0 0 0 1em; } .mz_catalogcart.sidebox:empty { display: none; } .moze-cart-form td, .moze-cart-form input[type="text"] { font-size: 0.95em; } @media screen and (max-width: 900px) { #sidebar .mz_catalogcart td.cost, #sidebar .mz_catalogcart td.totalcost, .mz_catalog #cat-cart td.cost, .mz_catalog #cat-cart td.totalcost, .mz_catalog #cat-cart td.discounted, .mz_catalog #cat-cart td.total { white-space: normal; } } @media screen and (max-width: 750px) { .mz_catalog .cat-item-images { width: auto; margin-left: 0; } .mz_catalog .cat-item-text { clear: both; word-break: break-word; } .mz_catalog .cat-item-images > a > img { max-height: 900px; } .mz_catalog .cat-more-item-images .cat-thumb-pic { width: 33.3%; } } #cat-order .cat-order-half { width: 50%; float: left; box-sizing: border-box; } #cat-order .row-container { margin: 0 -8px; } #cat-order .row { padding-left: 8px; padding-right: 8px; } #cat-order .payment-logos { margin-top: 26px; } #cat-order .payment-logos img { max-width: 55px; display: inline; margin: 3px; } #cat-order .payment-logos img[data-key="paysera"] { max-width: 135px; } .mz_rtl #cat-order .cat-order-half { float: right; } @media screen and (max-width: 750px) { #cat-order .cat-order-half { width: auto !important; float: none; padding: 0px; } #cat-order br.special { display: none; } } /* catalog - sort navigation */ .cat-breadcrumb { margin: 0; padding: 0; flex-grow: 1; } .cat-breadcrumb li { padding: 0 1.2em 0 0; margin: 0 0.6em 0 0; display: inline-block; position: relative; } .mz_rtl .cat-breadcrumb li { padding: 0 0 0 1.2em; margin: 0 0 0 0.6em; } .cat-breadcrumb li:not(:last-child):after { padding: 0; margin: 0; display: inline-block; position: absolute; content: "/"; right: 0; opacity: 0.3; } .mz_rtl .cat-breadcrumb li:not(:last-child):after { right: auto; left: 0; } #cat-nav { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 2em; flex-wrap: wrap; } #cat-nav .moze-form.cat-sort { display: flex; justify-content: center; align-items: center; margin: 0; flex-wrap: wrap; } .cat-sort select { width: auto; min-width: auto; margin: 0; } .cat-sort label { margin: 0 1em; } .cat-filter-toggle { flex-shrink: 0; cursor: pointer; } .cat-filter-toggle div { display: inline-block; vertical-align: middle; } .cat-filter-toggle div.counter { font-weight: bolder; } .cat-filter-toggle svg, .cat-filter-toggle img { width: 48px; height: 48px; padding: 11px; display: inline-block; box-sizing: border-box; vertical-align: middle; fill: var(--color-text); } #cat-filter .moze-form label { padding: 0.4em 0; margin: 0; width: 100%; cursor: pointer; } #cat-filter .moze-form .moze-checkbox input { margin-right: 1em; } .mz_rtl #cat-filter .moze-form .moze-checkbox input { margin-right: auto; margin-left: 1em; } .cat-filter-group { margin: 1.5em 0; } .cat-filter-group h3 { margin-bottom: 0.5em; } @media screen and (max-width: 750px) { #cat-nav { justify-content: center; } /*.mz_catalog .cat-breadcrumb { text-align: center } .mz_catalog:not(.cat-mode-item) .cat-breadcrumb { display: none; }*/ } /* catalog - searchbox */ .mz_catalogsearchbox input.search-query { box-sizing: border-box; width: 100%; padding-right: 35px; background-image: url('/libs/icons/icon-find-grey.svg'); background-repeat: no-repeat; background-position: 98% center; background-size: 20px 20px; min-width: auto; margin-bottom: 0; } .mz_catalogsearchbox div.search-btn { width: 32px; height: 32px; cursor: pointer; position: absolute; top: 1px; right: 1px; } .moze-catalog-searchbox-form { border: 0 !important; padding: 0 !important; box-shadow: none !important; background: none !important; margin-bottom: 0; } /* catalog - side widget for cart */ #shopbar { display: none; position: fixed; right: 0; top: 25%; box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.1); } #shopbar button { color: inherit; } #shopbar img, #shopbar svg, .sliding-panel-close img, .sliding-panel-close svg, .sliding-panel-toolbutton img, .sliding-panel-toolbutton svg { width: 48px; padding: 11px; display: block; box-sizing: border-box; transition-duration: 0.2s; } #shopbar .shopbar-search, #shopbar .shopbar-cart { text-align: center; position: relative; cursor: pointer; display: block; padding: 0; background: none; border: none; } #shopbar .shopbar-search:hover svg, #shopbar .shopbar-cart:hover svg, .sliding-panel-close:hover svg, .sliding-panel-toolbutton:hover svg { transform: scale(1.2); } #shopbar-sidecart-base > div.mz_editable { display: none; } #shopbar .separator { position: absolute; left: 20%; right: 20%; bottom: 0; height: 1px; opacity: 0.3; } #shopbar .shopbar-cart span { padding: 0 5px 10px 5px; display: block; } body:not(.mz_rtl) #shopbar { border-top-right-radius: 0; border-bottom-right-radius: 0; } .mz_rtl #shopbar { right: auto; left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } #cat-search-panel { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 500; background-color: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; } #shopbar-searchform { position: relative; padding: 40px; width: 90%; max-width: 500px; background-color: #FFFFFF; } .mz_rtl #shopbar-searchform { right: auto; left: 0; padding-right: 7px; padding-left: 48px; } body:not(.mz_rtl) #shopbar-searchform input { padding-right: 40px; } .mz_rtl #shopbar-searchform input { padding-left: 40px; } #shopbar-searchform input, #shopbar-searchform .search-btn { width: 100%; padding: 5px; box-sizing: border-box; height: 38px; line-height: 38px; text-align: start; } #shopbar-searchform .search-btn { position: absolute; top: 40px; right: 40px; height: 38px; width: 38px; background: url('/libs/icons/icon-find-grey.svg') no-repeat center center; background-size: 50%; cursor: pointer; display: block; border: none; padding: 0; } .mz_rtl #shopbar-searchform .search-btn { right: auto; left: 34px; } #shopbar-searchform .close-btn { position: absolute; border: none; width: 40px; height: 40px; right: 0; top: 0; background-color: transparent; padding: 10px; cursor: pointer; } @media screen and (max-width: 1300px) { #shopbar img, #shopbar svg { padding: 7px; width: 34px; } } @media screen and (max-width: 750px) { #shopicons { display: none; } body { margin-bottom: 60px; } #shopbar, .mz_rtl #shopbar { top: auto; left: 0; right: 0; bottom: 0; z-index: 54; border-radius: 0 !important; } #shopbar .shopbar-search, #shopbar .shopbar-cart { width: auto; float: left; z-index: 51; } #shopbar .shopbar-search { float: right; z-index: 52; } #shopbar img, #shopbar svg { float: left; padding: 12px; width: 48px; } #shopbar .separator { display: none; /*left: auto; right: 0; top: 20%; bottom: 20%; height: auto; width: 1px;*/ } #shopbar .shopbar-cart span { float: left; padding: 0; line-height: 48px; } } /* catalog - side shopping cart & filter */ .sliding-panel { display: none; position: fixed; top: 0; bottom: 0; max-width: 430px; width: 100%; z-index: 155; /* even over gui */ box-shadow: 0px 0px 6px 0 rgba(0, 0, 0, 0.3); transition: 0.2s; box-sizing: border-box; background-color: #FFFFFF; background-color: var(--color-background, #FFFFFF); } .sliding-panel-header { padding: 30px 40px; } .sliding-panel-body { position: absolute; top: 90px; width: 100%; box-sizing: border-box; bottom: 0; padding: 0 40px 40px 40px; overflow-y: auto; } .sliding-panel-header h2 { margin: 0; font-size: 1.5em !important; } .sliding-panel { right: -430px; left: auto; } .mz_rtl .sliding-panel { right: auto; left: -430px; } body:not(.mz_rtl) .sliding-panel.visible { right: 0px; } .mz_rtl .sliding-panel.visible { left: 0px; } .sliding-panel form{ margin: 0; } .sliding-panel-close, .sliding-panel-toolbutton { position: absolute; right: 20px; top: 20px; cursor: pointer; display: block; border: none; background: transparent; padding: 0; fill: var(--color-text-strong); } .sliding-panel-toolbutton{ right: 68px; } .mz_rtl .sliding-panel-close { right: auto; left: 20px; } .sliding-panel .noUi-handle, .sliding-panel .noUi-connect { background-color: var(--color-text); } /* Scrollbars for Chromium */ /* Looks and works differently in FireFox */ .sliding-panel-body { scrollbar-width: thin; } .sliding-panel-body::-webkit-scrollbar { width: 10px; } .sliding-panel-body::-webkit-scrollbar-track { background: transparent; } .sliding-panel-body::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); border-radius: 10px; } .sliding-panel-body::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.15); } #cookie-notification { z-index: 55 !important; } /********************************/ /* Gallery */ /********************************/ ul.mz_gallery { width: 100%; } ul.moze-gallery a, ul.moze-gallery a:hover { text-decoration: none; background-color: rgba(0,0,0,0); /* fixes IE bug when transparent elements are not clickable */ } ul.moze-gallery { list-style-type: none; margin: 0; padding: 0; } ul.moze-gallery li { background-color: #222222; float: left; list-style-type: none !important; position: relative; } .mz_rtl ul.moze-gallery li { float: right; } ul.moze-gallery li .moze-gallery-overlay { position: absolute; opacity: 0; top: 0; left: 0; right: 0; bottom: 0; } ul.moze-gallery li:hover .moze-gallery-overlay { opacity: 1; } ul.moze-gallery li:hover img, ul.moze-gallery li:hover .moze-gallery-group-icon { opacity: 0.35; } ul.moze-gallery li div.title { display: table; table-layout: fixed; width: 100%; height: 100%; overflow: hidden; } ul.moze-gallery li div.title span { display: table-cell; vertical-align: middle; text-align: center; padding: 15px; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; } body.backend ul.moze-gallery.pictures li div.title span { cursor: default; } ul.moze-gallery li img { display: block; position: absolute; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; top: 0; } /* Default - max 4 images side by side */ ul.moze-gallery { display: flex; flex-wrap: wrap; position: relative; margin: -1.25%; } ul.moze-gallery li { margin: calc(1.25% - 0.01%); /* smaller value needed to work around ui-sortable bug which calculates helper size in full rounded pixels */ width: 22.5%; padding-top: 22.5%; } /* Max 3 images side by side at this resolution */ @media screen and (max-width: 750px) { ul.moze-gallery { margin: -1.66%; } ul.moze-gallery li { margin: calc(1.66% - 0.02%); width: 30%; padding-top: 30%; } } /* Max 2 images side by side at this resolution */ @media screen and (max-width: 480px) { ul.moze-gallery { margin: -2%; } ul.moze-gallery li { margin: calc(2% - 0.04%); width: 46%; padding-top: 46%; } } /* Max 3 images side by side */ @media screen and (min-width: 750px) { .gallery-max-3 ul.moze-gallery { margin: -1.66%; } .gallery-max-3 ul.moze-gallery li { margin: calc(1.66% - 0.03%); width: 30%; padding-top: 30%; } } /********************************/ /* Table */ /********************************/ .mz_editable table td { min-width: 20px; } /********************************/ /* Small screen */ /********************************/ @media screen and (max-width: 750px), screen and (max-height:500px) { #title { float: none; text-align: center; margin: 0px !important; padding: 0px !important; } #title .mz_wysiwyg, .mz_rtl #title .mz_wysiwyg { margin: 0px 0px 25px 0px !important; word-wrap: break-word; } .mobile-header #title .mz_wysiwyg img:not([src$=".svg"]):not([src*=".svg?"]) { width: auto !important; } .mobile-header #title .mz_wysiwyg img { max-height: 32px; max-width: 240px; } .mobile-header #title .mz_wysiwyg img.tall { max-height: 72px; padding: 5px 0; } .mobile-header #title .mz_wysiwyg, .mobile-header.mz_rtl #title .mz_wysiwyg { margin: 0 !important; } .mz_rtl #title { float: none; } #title .mz_wysiwyg { display: inline-block; /*width: 100%;*/ } #toptext, .mz_rtl #toptext { float: none; margin: 0 !important; } #toptext .mz_wysiwyg, .mz_rtl #toptext .mz_wysiwyg { display: block; text-align: center; margin: 0px 0 25px 0 !important; } .mobile-header #toptext .mz_wysiwyg, .mobile-header.mz_rtl #toptext .mz_wysiwyg { margin: 15px 0 0 0 !important; } #toptext .mz_wysiwyg .moze-wysiwyg-editor, .mz_rtl #toptext .mz_wysiwyg .moze-wysiwyg-editor { display: block; height: auto; } #menu { margin: 0px 0px 5px 0px; margin-top: 0px !important; } #menu-container { padding: 0px 20px; } .mobile-header #header { padding: 5px !important; display: flex; align-items: center; justify-content: space-between; } .mobile-header #header.floating { position: fixed; width: 100%; box-sizing: border-box; z-index: 51; transition: background-color 0.5s ease; } .mobile-header #header.floating #toptext { display: none; } .mobile-header #header-main { order: 1; flex: 1 1 auto; min-height: auto; } .mobile-header #title { order: 1; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; } } @media screen and (max-width: 750px) { html { font-size: 14px; } #header { position: relative; } #bottom, #header { padding: 20px 20px !important; } #bigbar-container { padding: 0 20px; } .container, .design-boxed .container { padding: 20px; } .section:first-child .container { padding-top: 20px; } .section:last-child .container { padding-bottom: 20px; } .section.section-backend-bottom .container { padding-top: 0px !important; padding-bottom: 20px; } [class^="column-"] { padding: 20px 10px; } .gridrow { margin: -20px -10px; } #sidebar-wrap { position: static; display: block; } #submenu { /*display: block;*/ } [class^="column-"] { width: 100%; } .mainblock, .mz_rtl .mainblock { float: none; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } #sidebar, .sidebar-reverse #sidebar { padding: 25px 0 0 0; float: none; clear: both; margin-left: 0px; margin-right: 0px; width: auto !important; position: static; } #sidebar .sidebox { margin: 0px 0px 25px 0px; } } @media screen and (max-width: 600px) { html { font-size: 13px; } } @media screen and (max-width: 420px) { #title .mz_wysiwyg img { max-width: 220px; } } @media screen and (max-width: 370px) { #title .mz_wysiwyg img { max-width: 100%; } } /********************************/ /* Animations */ /********************************/ .moze-button:hover, .moze-button-large:hover, .moze-form .moze-formbutton:hover, .mz_editable .moze-gallery .moze-gallery-overlay, #social a, #languages ul li a:hover, #menu ul li a:hover, #header-side .menu-icon:hover { transition-property: color, background-color, opacity, border-color, fill; transition-duration: 0.3s; transition-timing-function: ease; } #top.sticky #menu { transition: background-color 0.3s ease; } /* do not show default if 2 logos possible */ #top .mz_logo * + .logo-default { display: none; } /* hide all but default on sticky menu */ #top.sticky .mz_logo img:not(.logo-default), #header.floating .mz_logo img:not(.logo-default) { display: none; } /* allways show default when menu sticky */ #top.sticky .mz_logo img.logo-default, #header.floating .mz_logo img.logo-default { display: block; } #menu-container { margin: 0 auto; } #mz_customizer[style*="block"] ~ #top.sticky #menu ul li a, #mz_customizer[style*="block"] ~ #top.sticky #menu, #mz_customizer[style*="block"] ~ div #top.sticky #menu ul li a, #mz_customizer[style*="block"] ~ div #top.sticky #menu { transition: none; } #menu ul li:hover > ul { animation: fadein 0.3s; -webkit-animation: fadein 0.3s; /* Safari and Chrome */ } ul.moze-gallery li img { transition: opacity 0.3s ease; } .animate-button-loading span { display: flex !important; align-items: center; justify-content: space-evenly; transition: justify-content 2s; } .animate-button-loading span:before { animation: load-rotate infinite linear 1s; content: ""; width: 15px; height: 15px; border: 2px solid; display: block; border-top-color: transparent; border-radius: 50px; } @keyframes load-rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); opacity: .35; } 100% { transform: rotate(360deg); } } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } }