/* Mixins ================================================== The `mixins.less` file contains the imports to all mixin documents that simplify the work with Shopware. Mixin specific documentation can be found inside each mixin file. Mixins can be used by adding the mixin class onto an element inside Shopware. **Example:**<br/> `.border-radius(3px);` */ /* Appearance mixin ============================================ The mixins provides you a cross-browser compatible method to set the appearance of the element. Please refer to <http://caniuse.com/appearance> to see the browser support table of the feature. ######Example: `.appearance([value]);` `@param {String} type The type you want to use` */ /* Backface visibility mixin ============================================ The mixins provides you a cross-browser compatible method to set the backface-visibility of the element. Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature. ######Example: `.backface-visibility([value]);` `@param {String} visibility The visibility you want to use` */ /* Border-radius mixin ============================================= The mixins provides you a cross-browser compatible method to set a border-radius. Please refer to <http://caniuse.com/border-radius> to see the browser support table of the feature. ######Syntax: `@param {String} radius The radius you want to set`<br/> ######Example: Same border-radius for all edges: <br/> `.border-radius([pixel-value]);`<br/> Different border-radius:<br/> `.border-radius-multi([pixel-value-leftTop], [pixel-value-rightTop], [pixel-value-rightBottom], [pixel-value-leftBottom]);`<br/> Resetting border radius:<br/> `.reset-border-radius();` */ /* Box shadow mixin ============================================== The mixins provides you a cross-browser compatible method to set a box-shadow. Please refer to <http://caniuse.com/css-boxshadow> to see the browser support table of the feature. ######Example: `.box-shadow([h-shadow-value], [v-shadow-value], [blur-amount], [spread-amount], [shadow-color]);` `@param: {Number} x: Offset to the x axis (Default: 0)`<br/> `@param: {Number} y: Offset to the y axis (Default: 0)`<br/> `@param: {Number} blur: Bluring radius (Default: 1px)`<br/> `@param: {String} color: Color of the shadow (Default: #000)`<br/> */ /* Box-sizing mixin ======================================== The mixins provides you a cross-browser compatible method to set the box-sizing which supports IE starting from version 8 to the newest one. Please refer to <http://caniuse.com/css3-boxsizing> to see the browser support table of the feature. ######Example: `.box-sizing:([value]);` `@param: {String} box-sizing: Box model, which should be used (Default: border-box)` */ /* Clearfix mixin ================================ The clearfix mixin allows the easy integration of the floating-solution method. The clearfix resolves the problem that occurs when two floating elements are nested inside a parent element, then sometimes the parent elements height disappears. Add the `.clearfix` class to the parent element. ######Example: `.clearfix();` */ /* Gradient mixin ==================================================== The mixins provides you a cross-browser compatible method to set a linear gradient which goes from top to bottom. Please refer to <http://caniuse.com/css-gradients> to see the browser support table of the feature. Shopware 5 also provides gradient mixins based on the basic color variables that can be changed in the backend theme configuration tool. ######Basic gradients: `.primary-gradient();`<br/> `.secondary-gradient();`<br/> `.white-gradient();`<br/> ######Linear Gradient Example: `.linear-gradient([startcolor-value], [endcolor-value]);` `@param {String} start The start color of the gradient`<br/> `@param {String} end The end color of the gradient` */ /* Opacity =============================================== The mixins provides you a cross-browser compatible opacity which supports IE starting from version 8 to the newest one. Safari, Chrome and Firefox are supported in all versions. Please refer to <http://caniuse.com/css-opacity> to see the browser support table of the feature. ######Example: `.opacity([value]);` `@param: {Number} opacity: Value of the opacity, starting from 0 to 1` */ /* Rotate mixin =============================================== The mixins provides you a cross-browser compatible method to set a transformation which rotates the element. Keep in mind that you can not mix different transformations. Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature. ######Example: `.rotate([value]);` `@param {String} degree The degree value you want to set. Please keep in mind that you need to suffix the unit.` */ /* Scale mixin =============================== The mixins provides you a cross-browser compatible method to set a transformation which scales the element. Keep in mind that you can not mix different transformations. Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature. ######Example: `.scale([value]);` `@param {String} scale-value The scale value, you want to set` */ /* Touch callout mixin =========================================== Disables the default callout shown when you touch and hold a touch target. ######Support: - iOS 2.0<br/> ######Example: `.touch-callout([value]);` `@param: {String} type: The type you want to set (Default: none)` */ /* Transform style mixin ====================================== The mixins provides you a cross-browser compatible method to set a transformation style. Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature. ######Example: `.transform-style([value]);` `@param {String} Style The style you want for your transformation (Default: preserve-3d)` */ /* Transform origin mixin ====================================== The mixins provides you a cross-browser compatible method to set the transform origin position. Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature. ######Example: `.transform-origin([x-value],[y-value],[z-value]);` `@param: x: Sets the origin position on the x axis (Default: 50%)`<br/> `@param: y: Sets the origin position on the y axis (Default: 50%)`<br/> `@param: z: Sets the origin position on the z axis (Default: 0)` */ /* Transition mixin ========================================= The mixins provides you a cross-browser compatible method to set a transition. Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature. ######Example: `.transition([property], [duration-value], [easing]);` `@param: {String} properties: The properites which should be animated (Default: all)`<br/> `@param: {String} duration: Duration of the transition including the unit (Default: 0.3s)`<br/> `@param: {String} easing: The easing which should be used for the transition (Default: ease-out)` */ /* Translate mixin ============================================ The mixins provides you a cross-browser compatible method to set a transition. Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature. Keep in mind, that 3d translations are needing an perspective, otherwise the translated elements get skewed up. ######Example: `.translate([x-value],[y-value],[z-value]);` `@param: {String} rotateX: The rotation on the x-axis`<br/> `@param: {String} rotateY: The rotation on the y-axis`<br/> `@param: {String} rotateZ: The rotation on the z-axis`<br/> */ /* Unitize mixin ================================================ The unitize mixins converts values from px-units to the relative rem-units, providing all the benefits of units like em and rem, without you having to do any calculations yourself. ######Syntax: `@property` = the property that should be unitized.<br/> `@value` = pixel-value<br/> `@baseValue` (optional) = default browser font-size (@remScaleFactor in most cases)<br/> ######Example Unitize mixin with custom property `.unitize(@property, @value);`<br/> `.unitize(font-size, 16);` ######Specific built-in functions In addition to the general `.unitize()` mixin, Shopware contains specific mixins to quickly calculate values which (for example) have more than one property.<br/> <br/> `.unitize-height(@value)`<br/> `.unitize-width(@value)`<br/> `.unitize-max-height(@value)`<br/> `.unitize-max-width(@value)`<br/> `.unitize-min-width(@value)`<br/> `.unitize-padding(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/> `.unitize-margin(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/> `.unitize-variable(@value)`<br/> */ /* User-select mixin =============================== The mixins provides you a cross-browser compatible method to set a user selection mode. Please refer to <http://caniuse.com/user-select-none> to see the browser support table of the feature. ######Example: `.user-select([value]);` `@param: {String} type: The type you want to set (Default: none)` */ /* Transform mixin ============================================== The mixins provides you a cross-browser compatible method to set a transformation. Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature. ######Example: `.transform([value]);` `@param: {String} properties: The transformation(s) that should be applied` */ /* Tab highlighting mixin =========================== Sets the color of the highlighting when a link was clicked / tapped. Please refer to <http://www.browsersupport.net/CSS/-webkit-tap-highlight-color> to see the browser support table of the feature. ######Example: `.tap-highlight-color([color-value]);` `@param: {String} color: The color you want to set (Default: rgba(0, 0, 0, 0))` */ /* Keyframe mixin ============================================= The mixins provides you a cross-browser compatible method to set a keyframe. Please refer to <http://caniuse.com/#search=keyframe> to see the browser support table of the feature. ######Example: `.keyframes([name-value], [frames-value]);` `@param: {String} name: The keyframe animation name`<br/> `@param: {String} roules: the animation frames` */ @-webkit-keyframes keyframe--spin { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes keyframe--spin { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes keyframe--spin-reverse { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes keyframe--spin-reverse { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0); transform: rotate(0); } } /* Animations mixin ============================================ The mixins provides you a cross-browser compatible method to set animation values. Please refer to <http://caniuse.com/css-animation> to see the browser support table of the feature. ######Example: `.animation([value]);` `@param: {String} value: All animation values` */ /* Column count mixin ============================================= This mixin provides you a cross-browser compatible method to set the column count property. Please refer to <http://caniuse.com/multicolumn> to see the browser support table of the feature. ######Example: `.column-count([value]);` `@param: {Number} count: The amount of columns you want to set (Default: auto)` */ /* Hypheration mixin ====================================== The mixins provides you a cross-browser compatible method to set the hyphenation. Please refer to <http://caniuse.com/css-hyphens> to see the browser support table of the feature. ######Example: `.hyphens([value]);` `@param: {String} hyphenation: The hyphenation that should be used (Default: auto)` */ /* Grabbing cursor ================================== This mixin provides you a cross-browser compatible method to set the cursor grabbing behavior. ######Example: `.cursorGrab();`<br/> `.cursorGrabbing();`<br/> */ /* Clear form button mixin ======================== This mixin removes styles from the button element and makes it look like a text link. */ /* All.less ====================================== The `all.less` file imports all style components that will display on the page. It includes the plugins `normalize` and `pocketgrid`, the open-sans fontface and the specific less files. */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner, button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* PocketGrid 1.1.0 * Copyright 2013 Arnaud Leray * MIT License */ /* Border-box-sizing */ .block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix */ .block-group { zoom: 1; /* ul/li compatibility */ list-style-type: none; padding: 0; margin: 0; /** Nested grid */ } .block-group:before, .block-group:after { display: table; content: ""; line-height: 0; } .block-group:after { clear: both; } .block-group > .block-group { clear: none; float: left; margin: 0 !important; } /* Default block */ .block { float: left; width: 100%; } /* BEGIN Light */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans Light'), local('OpenSans-Light'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.woff2?bfe41b29baca935f7ff650f92e2d2b55') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.woff?bbae30013d1604e33cad2a56c3655a57') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.ttf?5cd6e52363476bf84901862752073aeb') format('truetype'); font-weight: 300; font-style: normal; } /* END Light */ /* BEGIN Regular */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans Regular'), local('Open Sans'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.woff2?983f7f0331219e12ab2cbccd12851127') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.woff?8955f43099963b12dae2d2cbf70d8dc4') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.ttf?c19a03ef2b46b29e9e2596d670df34b9') format('truetype'); font-weight: normal; font-style: normal; } /* END Regular */ /* BEGIN Semibold */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans Semibold'), local('OpenSans-SemiBold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.woff2?5dc0893b67cda57655cdef988a683ed4') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.woff?777ddb1c4e3bb5f8826f0cdda50be375') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.ttf?7cb072a736b99265c2bc02927f903121') format('truetype'); font-weight: 600; font-style: normal; } /* END Semibold */ /* BEGIN Bold */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.woff2?08449533cdd149800074fdec0435cdad') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.woff?5461ca40491bbd620a0d2d5279cb1d3a') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.ttf?aec87834acf395ba9de5c8d43362fd60') format('truetype'); font-weight: bold; font-style: normal; } /* END Bold */ /* BEGIN Extrabold */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.woff2?c6b814ba795469a39877a2faf8f74269') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.woff?59eb33212f85e86c09821a40f85436b2') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.ttf?fd4a82e879cd51e0b8602b33abbdc9a0') format('truetype'); font-weight: 800; font-style: normal; } /* END Extrabold */ /* Variables ================================================== The `variables.less` file contains the imports to all variables that Shopware uses. Most variables are controllable by using the backend theme manager. Mixin specific documentation can be found inside each mixin file. */ /* Structure ================================ The variables define the widths for the different viewports. **Structure**<br/> `@phoneLandscapeViewportWidth` - viewport phone-landscape width *(default: 480px)*<br/> `@tabletViewportWidth` - viewport tablet width *(default: 768px)*<br/> `@tabletLandscapeViewportWidth` - viewport tablet-landscape width *(default: 1024px)*<br/> `@desktopViewportWidth` - viewport desktop width *(default: 1260px)*<br/> */ /* Typography ================================ The variables define the sizes and weights for typographic elements. The values can be changed with the backend theme manager. **Base configuration**<br/> `@font-size-base` - basic font-size *(default: 14)*<br/> `@font-base-weight` - basic font-weight *(default: 500)*<br/> `@font-light-weight` - basic light font-weight *(default: 300)*<br/> `@font-base-stack` - basic font-family stack *(default: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif)*<br/> `@font-headline-stack` - basic headline font-family stack *(default: @font-base-stack)*<br/> **Headling font sizes**<br/> `@font-size-h1` - h1 element font-size *(default: 26)*<br/> `@font-size-h2` - h2 element font-size *(default: 21)*<br/> `@font-size-h3` - h3 element font-size *(default: 18)*<br/> `@font-size-h4` - h4 element font-size *(default: 16)*<br/> `@font-size-h5` - h5 element font-size *(default: @font-size-base)*<br/> `@font-size-h6` - h6 element font-size *(default: 12)*<br/> **Shopware font directory**<br/> `@font-directory` - font-directory folder (default: "../../fonts") **Open Sans font directory**<br/> `@OpenSansPath` - "Open Sans" font-directory folder (default: "./../fonts/open-sans-fontface") */ /* Z-Index ================================ The z-index variables list all different values for the z-index layers used inside the Shopware responsive theme. **badge.less**<br/> `@zindex-badge` - *(default: 500)*<br/> **checkbox.less**<br/> `@zindex-checkbox-state` - *(default: 60)*<br/> `@zindex-checkbox-element` - *(default: 65)*<br/> **collapse.less**<br/> `@zindex-collapse-content` - *(default: 1000)*<br/> `@zindex-collapse-header` - *(default: 1100)*<br/> `@zindex-collapse-content-collapsed` - *(default: 1200)*<br/> `@zindex-collapse-header-active` - *(default: 1300)*<br/> **collapse-cart.less**<br/> `@zindex-collapse-cart` - *(default: 3000)*<br/> `@zindex-collapse-cart-offcanvas` - *(default: 8000)*<br/> **datepicker.less**<br/> `@zindex-datepicker` - *(default: 8100)*<br/> **emotions.less**<br/> `@zindex-emotion-mapping-link` - *(default: 110)*<br/> `@zindex-emotion-image-slider-title` - *(default: 100)*<br/> `@zindex-emotion-product-slider-content` - *(default: 400)*<br/> `@zindex-emotion-product-slider-title` - *(default: 500)*<br/> `@zindex-emotion-overlay` - *(default: 1000)*<br/> `@zindex-emotion-video-element` - *(default: 1000)*<br/> `@zindex-emotion-video-text` - *(default: 1100)*<br/> `@zindex-emotion-video-play-btn` - *(default: 1200)*<br/> `@zindex-emotion-video-cover` - *(default: 1300)*<br/> **filter-panel.less**<br/> `@zindex-filter-panel-flyout` - *(default: 500)*<br/> `@zindex-filter-panel-flyout-collapsed` - *(default: 800)*<br/> `@zindex-filter-panel-checkbox` - *(default: 65)*<br/> `@zindex-filter-panel-checkbox-state` - *(default: 60)*<br/> `@zindex-filter-panel-radio` - *(default: 65)*<br/> `@zindex-filter-panel-radio-state` - *(default: 60)*<br/> `@zindex-filter-panel-media-checkbox` - *(default: 65)*<br/> `@zindex-filter-panel-rating-star` - *(default: 65)*<br/> **image-gallery.less**<br/> `@zindex-image-gallery-button` - *(default: 1)*<br/> **image-slider.less**<br/> `@zindex-image-slider` - *(default: 1000)*<br/> `@zindex-image-slider-arrow` - *(default: 1000)*<br/> **image-zoom.less**<br/> `@zindex-image-zoom-flyout` - *(default: 2500)*<br/> **loading-indicator.less**<br/> `@zindex-loading-indicator` - *(default: 6000)*<br/> **menu-scroller.less**<br/> `@zindex-menu-scoller-arrow` - *(default: 750)*<br/> **modal.less**<br/> `@zindex-modalbox` - *(default: 7000)*<br/> **offcanvas-menu.less**<br/> `@zindex-offcanvas` - *(default: 8000)*<br/> `@zindex-offcanvas-higher-viewport` - *(default: 1000)*<br/> **overlay.less**<br/> `@zindex-overlay` - *(default: 5000)*<br/> **panel.less**<br/> `@zindex-panel-arrow` - *(default: 2000)*<br/> `@zindex-panel-link` - *(default: 2000)*<br/> **product-slider.less**<br/> `@zindex-product-slider` - *(default: 750)*<br/> ###Modules **cart.less**<br/> `@zindex-cart-product-image-element` - *(default: 500)*<br/> `@zindex-cart-premium-product-badge` - *(default: 750)*<br/> **compare.less**<br/> `@zindex-compare-list` - *(default: 4000)*<br/> **configuration.less**<br/> `@zindex-configurator-option-label` - *(default: 500)*<br/> `@zindex-configurator-option-input` - *(default: 1000)*<br/> **configurator.less**<br/> `@zindex-configurator-option-label` - *(default: 500)*<br/> `@zindex-configurator-option-input` - *(default: 1000)*<br/> **detail.less**<br/> `@zindex-detail-notification-field-focus` - *(default: 1)*<br/> **footer.less**<br/> `@zindex-footer-newsletter-field-focus` - *(default: 1)*<br/> **header.less**<br/> `@zindex-header-search-form` - *(default: 3000)*<br/> `@zindex-header-search-button` - *(default: 2)*<br/> `@zindex-header-search-results` - *(default: 3500)*<br/> `@zindex-header-language-flag` - *(default: 900)*<br/> `@zindex-header-service-list` - *(default: 3500)*<br/> **listing.less**<br/> `@zindex-listing-filter-header` - *(default: 1100)*<br/> `@zindex-listing-filter-header-active` - *(default: 1300)*<br/> **product-box.less**<br/> `@zindex-product-box-image-element` - *(default: 500)*<br/> `@zindex-product-box-product-badge` - *(default: 750)*<br/> **sidebar.less**<br/> `@zindex-sidebar-language-flag` - *(default: 900)*<br/> `@zindex-sidebar-offcanvas-overlay` - *(default: 1200)*<br/> `@zindex-sidebar-offcanvas-overlay-background` - *(default: 1100)*<br/> `@zindex-sidebar-offcanvas-higher-viewport` - *(default: 1000)*<br/> */ /* Icons ================================ These variables define the character for each icon. You can use them in your less instead of the `icon--`-classes. The variable name is always that of the icon prefixed with `sw-`. Example: ```less content: @sw-icon-grid; content: @sw-icon-facebook; ``` The variable `@sw-icon-fontname` contains the name of the font which will be used for all icons. For an overview of available variables, visit the <a href="https://developers.shopware.com/styletile/components.html#icon-set">docs on available icons</a>. */ /* Mixins ================================================== The `mixins.less` file contains the imports to all mixin documents that simplify the work with Shopware. Mixin specific documentation can be found inside each mixin file. Mixins can be used by adding the mixin class onto an element inside Shopware. **Example:**<br/> `.border-radius(3px);` */ /* Icon-element mixin ===================================================== This mixin provides you a method to set any webfont icon from the Shopware icon-set as a before element. ######Example: `.icon-element([icon-name], [icon-size]);` */ .visible--s, .visible-inline--s, .visible-inline-block--s, .visible--m, .visible-inline--m, .visible-inline-block--m, .visible--l, .visible-inline--l, .visible-inline-block--l, .visible--xl, .visible-inline--xl, .visible-inline-block--xl { display: none !important; } .visible--xs { display: block !important; } table.visible--xs { display: table !important; } tr.visible--xs { display: table-row !important; } th.visible--xs, td.visible--xs { display: table-cell !important; } .visible-inline--xs { display: inline !important; } table.visible-inline--xs { display: table !important; } tr.visible-inline--xs { display: table-row !important; } th.visible-inline--xs, td.visible-inline--xs { display: table-cell !important; } .visible-inline-block--xs { display: inline-block !important; } table.visible-inline-block--xs { display: table !important; } tr.visible-inline-block--xs { display: table-row !important; } th.visible-inline-block--xs, td.visible-inline-block--xs { display: table-cell !important; } .hidden--s, .hidden--m, .hidden--l, .hidden--xl { display: inherit !important; } .hidden--xs { display: none !important; } @media screen and (min-width: 30em) { .visible--xs, .visible-inline--xs, .visible-inline-block--xs, .visible--m, .visible-inline--m, .visible-inline-block--m, .visible--l, .visible-inline--l, .visible-inline-block--l, .visible--xl, .visible-inline--xl, .visible-inline-block--xl { display: none !important; } .visible--s { display: block !important; } table.visible--s { display: table !important; } tr.visible--s { display: table-row !important; } th.visible--s, td.visible--s { display: table-cell !important; } .visible-inline--s { display: inline !important; } table.visible-inline--s { display: table !important; } tr.visible-inline--s { display: table-row !important; } th.visible-inline--s, td.visible-inline--s { display: table-cell !important; } .visible-inline-block--s { display: inline-block !important; } table.visible-inline-block--s { display: table !important; } tr.visible-inline-block--s { display: table-row !important; } th.visible-inline-block--s, td.visible-inline-block--s { display: table-cell !important; } .hidden--xs, .hidden--m, .hidden--l, .hidden--xl { display: inherit !important; } .hidden--s { display: none !important; } } @media screen and (min-width: 48em) { .visible--xs, .visible-inline--xs, .visible-inline-block--xs, .visible--s, .visible-inline--s, .visible-inline-block--s, .visible--l, .visible-inline--l, .visible-inline-block--l, .visible--xl, .visible-inline--xl, .visible-inline-block--xl { display: none !important; } .visible--m { display: block !important; } table.visible--m { display: table !important; } tr.visible--m { display: table-row !important; } th.visible--m, td.visible--m { display: table-cell !important; } .visible-inline--m { display: inline !important; } table.visible-inline--m { display: table !important; } tr.visible-inline--m { display: table-row !important; } th.visible-inline--m, td.visible-inline--m { display: table-cell !important; } .visible-inline-block--m { display: inline-block !important; } table.visible-inline-block--m { display: table !important; } tr.visible-inline-block--m { display: table-row !important; } th.visible-inline-block--m, td.visible-inline-block--m { display: table-cell !important; } .hidden--xs, .hidden--s, .hidden--l, .hidden--xl { display: inherit !important; } .hidden--m { display: none !important; } } @media screen and (min-width: 64em) { .visible--xs, .visible-inline--xs, .visible-inline-block--xs, .visible--s, .visible-inline--s, .visible-inline-block--s, .visible--m, .visible-inline--m, .visible-inline-block--m, .visible--xl, .visible-inline--xl, .visible-inline-block--xl { display: none !important; } .visible--l { display: block !important; } table.visible--l { display: table !important; } tr.visible--l { display: table-row !important; } th.visible--l, td.visible--l { display: table-cell !important; } .visible-inline--l { display: inline !important; } table.visible-inline--l { display: table !important; } tr.visible-inline--l { display: table-row !important; } th.visible-inline--l, td.visible-inline--l { display: table-cell !important; } .visible-inline-block--l { display: inline-block !important; } table.visible-inline-block--l { display: table !important; } tr.visible-inline-block--l { display: table-row !important; } th.visible-inline-block--l, td.visible-inline-block--l { display: table-cell !important; } .hidden--xs, .hidden--s, .hidden--m, .hidden--xl { display: inherit !important; } .hidden--l { display: none !important; } } @media screen and (min-width: 78.75em) { .visible--xs, .visible-inline--xs, .visible-inline-block--xs, .visible--s, .visible-inline--s, .visible-inline-block--s, .visible--m, .visible-inline--m, .visible-inline-block--m, .visible--l, .visible-inline--l, .visible-inline-block--l { display: none !important; } .visible--xl { display: block !important; } table.visible--xl { display: table !important; } tr.visible--xl { display: table-row !important; } th.visible--xl, td.visible--xl { display: table-cell !important; } .visible-inline--xl { display: inline !important; } table.visible-inline--xl { display: table !important; } tr.visible-inline--xl { display: table-row !important; } th.visible-inline--xl, td.visible-inline--xl { display: table-cell !important; } .visible-inline-block--xl { display: inline-block !important; } table.visible-inline-block--xl { display: table !important; } tr.visible-inline-block--xl { display: table-row !important; } th.visible-inline-block--xl, td.visible-inline-block--xl { display: table-cell !important; } .hidden--xs, .hidden--s, .hidden--m, .hidden--l { display: inherit !important; } .hidden--xl { display: none !important; } } /* Components ==================================== The `components.less` contains the imports to all styled elements of Shopware. The files are destinated inside the `_components` folder. */ /* Buttons =================================================================== ######Basic button layout Creates a basic button. Button type classes can be added by using multiple classes on the `.btn` element. Adding the class `is--disabled` changes the element to a disabled button. ``` <button class="btn"> Basic button </button> <button class="btn is--disabled"> Disabled button </button> ``` */ .btn { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2rem; border-radius: 3px; background-clip: padding-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 0.875rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); -webkit-font-smoothing: inherit; display: inline-block; position: relative; font-weight: 700; text-decoration: none; text-align: left; cursor: pointer; border: 1px solid #c8c8c8; color: #113c62; /** Button icon font size */ /** Larger icon */ /* ######Icon alignment To work properly the button needs the class `is--icon-left` or `is--icon-right` and an `icon` inside it. ``` <button class="btn is--icon-left"> <i class="icon--account"></i> Icon left </button> <button class="btn is--icon-right"> <i class="icon--account"></i> Icon right </button> ``` */ /* ######Button size class Adding a button-size class creates a larger or smaller button or changes the button properies. Options: `is--large`, `is--small`, `is--full`, `is--center` ``` <button class="btn is--large"> Large button </button> <button class="btn is--small"> Small button </button> ``` */ /** State: Small button */ /** State: Medium button */ /** State: Large button */ /** State: Button with 100% width */ /** State: Button with text align center */ } .btn [class^="icon--"] { font-size: 0.625rem; } .btn .is--large { font-size: 1rem; } .btn.is--icon-right { padding-right: 2.25rem; } .btn.is--icon-right [class^="icon--"] { height: 1rem; line-height: 2rem; margin: -1rem 0rem 0rem 0rem; right: 0.75rem; font-weight: 500; display: block; position: absolute; top: 50%; } .btn.is--icon-left { padding-left: 2.25rem; } .btn.is--icon-left [class^="icon--"] { height: 1rem; line-height: 2rem; margin: -1rem 0rem 0rem 0rem; left: 0.75rem; font-weight: 500; display: block; position: absolute; top: 50%; } .btn:disabled, .btn:disabled:hover, .btn.is--disabled, .btn.is--disabled:hover { opacity: 0.5; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); border: 1px solid #c8c8c8; color: #113c62; cursor: not-allowed; } .btn:hover { background: #ffffff; color: #113c62; border-color: #113c62; } .btn:focus { outline: none; } .btn.is--small { line-height: 1.75rem; } .btn.is--medium { line-height: 2rem; height: 2.375rem; } .btn.is--large { line-height: 2.25rem; height: 2.625rem; } .btn.is--full { display: block; } .btn.is--center { text-align: center; } /* ######Button type class Options: `is--primary`, `is--secondary` ``` <button class="btn is--primary"> Primary </button> <button class="btn is--secondary"> Secondary </button> ``` */ .is--primary { padding: 0.125rem 0.75rem 0.125rem 0.75rem; line-height: 2.125rem; background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); border: 0 none; color: #ffffff; /** State: Small button */ /** State: Large button */ } .is--primary:hover { background: #113c62; color: #ffffff; } .is--primary.is--small { line-height: 1.875rem; } .is--primary.is--large { line-height: 2.375rem; } .is--secondary { padding: 0.125rem 0.75rem 0.125rem 0.75rem; line-height: 2.125rem; background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); border: 0 none; color: #ffffff; /** State: Small button */ /** State: Large button */ } .is--secondary:hover { background: #009033; color: #ffffff; } .is--secondary.is--small { line-height: 1.875rem; } .is--secondary.is--large { line-height: 2.375rem; } .is--link { padding: 0.125rem 0.75rem 0.125rem 0.75rem; line-height: 2.125rem; border: 0 none; background: transparent; color: #00cc00; /** State: Small button */ /** State: Large button */ } .is--link:hover { color: #113c62; } .is--link.is--small { line-height: 1.875rem; } .is--link.is--large { line-height: 2.375rem; } /* Basic layout container ====================================== The container element is the parent element for the content section of Shopware 5. It contains the other content elements and keeps them in place. It has a set `unitize-max-width` of `1260px` and the clearfix mixin assigned. ``` <div class="container"> <p>Container element</p> </div> ``` */ .container { max-width: 78.75rem; background: #fff; margin: 0 auto; width: 100%; } .container:after { content: ""; display: table; clear: both; } .container::after { content: ""; display: table; clear: both; } #cookie-consent { width: 17.5rem; -webkit-transition: transform 0.45s cubic-bezier(0.3, 0, 0.15, 1); transition: transform 0.45s cubic-bezier(0.3, 0, 0.15, 1); } #cookie-consent.off-canvas { position: fixed; z-index: 8000; background: #ffffff; } #cookie-consent.block-transition { transition: none; } #cookie-consent .cookie-consent--header { cursor: pointer; } #cookie-consent .cookie-consent--description { padding: 0.9375rem 0.625rem 0.9375rem 0.625rem; } #cookie-consent .cookie-consent--configuration .cookie-consent--group { padding: 0.9375rem 0.625rem 0.9375rem 0.625rem; border-bottom: 1px solid #c8c8c8; position: relative; } #cookie-consent .cookie-consent--configuration .cookie-consent--group:after { content: ""; display: table; clear: both; } #cookie-consent .cookie-consent--configuration .cookie-consent--group::after { content: ""; display: table; clear: both; } #cookie-consent .cookie-consent--configuration .cookie-consent--group-title { cursor: pointer; float: left; width: 85%; } #cookie-consent .cookie-consent--configuration .cookie-consent--group-title.is--active .cookie-consent--group-arrow { transform: rotate(90deg); } #cookie-consent .cookie-consent--configuration .cookie-consent--configuration-header-text { padding: 0.9375rem 0.625rem 0.9375rem 0.625rem; font-weight: 700; color: #113c62; border-bottom: 1px solid #c8c8c8; } #cookie-consent .cookie-consent--configuration .cookie-consent--group-description { margin-left: 2.625rem; color: #1c64a3; } #cookie-consent .cookie-consent--cookie { padding: 0.9375rem 0rem 0.9375rem 0rem; position: relative; } #cookie-consent .cookie-consent--cookie:after { content: ""; display: table; clear: both; } #cookie-consent .cookie-consent--cookie::after { content: ""; display: table; clear: both; } #cookie-consent .cookie-consent--cookie .cookie--label { cursor: pointer; } #cookie-consent .cookie-consent--group-container { padding-top: 0.625rem; float: none; clear: both; } #cookie-consent .cookie-consent--group-arrow { right: 0.9375rem; font-size: 0.75rem; top: 1.125rem; position: absolute; } #cookie-consent .cookie-consent--save { padding: 0.9375rem 0.625rem 0.9375rem 0.625rem; } #cookie-consent .cookie-consent--save .cookie-consent--save-button { text-align: center; width: 100%; } #cookie-consent .cookie-consent--configuration-main { background: #fff; } #cookie-consent .cookie-consent--state-label { margin-left: 2.5rem; } .cookie-consent--state-input { display: block; position: absolute; } .cookie-consent--state-input.cookie-consent--cookie-state { top: calc(50% - 10px); } .cookie-consent--state-input.cookie-consent--required { opacity: 0.4; } .cookie-consent--state-input.cookie-consent--required .cookie-consent--state-input-element { cursor: default; } .cookie-consent--state-input .cookie-consent--state-input-element { height: 1.25rem; width: 1.25rem; border-radius: 0.1875rem; border: 1px solid #c8c8c8; cursor: pointer; display: block; position: relative; } .cookie-consent--state-input input { display: none; } .cookie-consent--state-input input:checked + .cookie-consent--state-input-element { background: #4a4a4a; } .cookie-consent--state-input input:checked + .cookie-consent--state-input-element::after { width: 0.625rem; height: 0.3125rem; top: 0.25rem; left: 0.1875rem; border: 2px solid #fff; border-top: none; border-right: none; background: transparent; content: ''; position: absolute; transform: rotate(-45deg); } .cookie-consent--state-input input:indeterminate + .cookie-consent--state-input-element { background: #4a4a4a; } .cookie-consent--state-input input:indeterminate + .cookie-consent--state-input-element::after { width: 0.625rem; height: 0.3125rem; top: 0.1875rem; left: 0.25rem; border: 2px none #fff; border-bottom-style: solid; background: transparent; content: ''; position: absolute; } /* Delivery information ========================================= Defines the delivery status for products (e.g. detail page, note). The styling includes the base styling and the delivery states. ``` <div class="product--delivery"> <p class="delivery--information"> <span class="delivery--text delivery--text-available"> <i class="delivery--status-icon delivery--status-available"></i> delivery--text-available </span> </p> </div> <div class="product--delivery"> <p class="delivery--information"> <span class="delivery--text delivery--text-more-is-coming"> <i class="delivery--status-icon delivery--status-more-is-coming"></i> delivery--text-more-is-coming </span> </p> </div> <div class="product--delivery"> <p class="delivery--information"> <span class="delivery--text delivery--text-shipping-free"> <i class="delivery--status-icon delivery--status-shipping-free"></i> delivery--text-shipping-free </span> </p> </div> <div class="product--delivery"> <p class="delivery--information"> <span class="delivery--text delivery--text-not-available"> <i class="delivery--status-icon delivery--status-not-available"></i> delivery--text-not-available </span> </p> </div> ``` */ .product--delivery { font-size: 0.875rem; } .product--delivery p { margin: 0; } .product--delivery .delivery--status-icon { border-radius: 0.5625rem; background-clip: padding-box; margin: 0rem 0.3125rem 0rem 0rem; width: 0.5625rem; height: 0.5625rem; line-height: 0.625rem; display: inline-block; position: relative; } .product--delivery .delivery--status-shipping-free { background: #4aa3df; } .product--delivery .delivery--text-shipping-free { color: #4aa3df; } .product--delivery .delivery--status-available { background: #2ecc71; } .product--delivery .delivery--text-available { color: #2ecc71; } .product--delivery .delivery--status-more-is-coming { background: #f1c40f; } .product--delivery .delivery--text-more-is-coming { color: #f1c40f; } .product--delivery .delivery--status-not-available { background: #e74c3c; } .product--delivery .delivery--text-not-available { color: #e74c3c; } .product--delivery .delivery--text { margin: 0; display: inline-block; } /* Emotions ========================================= Contains the basic styles for the Shopware 5 shopping worlds and its elements. Shopware 5 provides 11 integrated elements inside the shopping worlds that can be chosen and modified inside the backend shopping world editor such as sliders, video elements and blog-articles. */ .content-main.is--fullscreen { box-shadow: none; max-width: none; padding: 0; margin: 0; } .content-main.is--fullscreen .content, .content-main.is--fullscreen .content-main--inner { padding: 0; margin: 0 auto; } .content-main.is--fullscreen .content--breadcrumb, .content-main.is--fullscreen .tagcloud--content, .content-main.is--fullscreen .last-seen-products { display: none; } .content-main.is--fullscreen .listing--wrapper { max-width: 72.5rem; padding: 1.25rem 0.625rem 1.25rem 0.625rem; margin: 0 auto; } @media screen and (min-width: 48em) { .content-main.is--fullscreen .listing--wrapper { padding: 1.25rem 1.875rem 1.25rem 1.875rem; } } @media screen and (min-width: 78.75em) { .content-main.is--fullscreen .listing--wrapper { padding: 1.25rem 0rem 1.25rem 0rem; } } .emotion--overlay { width: 3.125rem; height: 3.125rem; top: 3.125rem; border-radius: 3px; background-clip: padding-box; margin: 0 auto; position: relative; left: 0; z-index: 1000; } .emotion--overlay .emotion--loading-indicator { padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .emotion--overlay ~ .content-main { min-height: 125rem; visibility: hidden; } .emotion--loading-indicator { width: 1.3125rem; height: 1.3125rem; padding: 3.125rem 0rem 3.125rem 0rem; margin: 0 auto; display: block; position: relative; box-sizing: content-box; } .emotion--loading-indicator:before { border-radius: 100%; background-clip: padding-box; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; width: 100%; height: 100%; box-sizing: border-box; display: block; content: ""; border-width: 2px; border-style: solid; border-color: #333 #CCC #CCC #CCC; } .content--emotions { display: block; } body.emotion--preview { background: #ffffff; } body.emotion--preview .content-main { box-shadow: none; margin: 0; } .emotion--show-listing { margin: 1.25rem 0rem 1.25rem 0rem; } .emotion--wrapper { display: block; margin: 0 auto; max-width: 1160px; overflow: hidden; } .emotion--wrapper.is--fullscreen { max-width: none; } .emotion--container { display: block; position: relative; top: 0; left: 0; background: #fff; } .emotion--container:after { content: ""; display: table; clear: both; } .emotion--container::after { content: ""; display: table; clear: both; } .emotion--container.emotion--mode-resize { -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; } .emotion--container.emotion--mode-rows .emotion--sizer, .emotion--container.emotion--mode-rows .emotion--sizer-xs, .emotion--container.emotion--mode-rows .emotion--sizer-s, .emotion--container.emotion--mode-rows .emotion--sizer-m, .emotion--container.emotion--mode-rows .emotion--sizer-l, .emotion--container.emotion--mode-rows .emotion--sizer-xl { display: none; } .emotion--container.emotion--mode-rows .emotion--row:after { content: ""; display: table; clear: both; } .emotion--container.emotion--mode-rows .emotion--row::after { content: ""; display: table; clear: both; } .emotion--container.emotion--column-1 .col-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-1 { left: 0%; } .emotion--container.emotion--column-1 .col-xs-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-xs-1 { left: 0%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-1 .col-s-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-s-1 { left: 0%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-1 .col-m-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-m-1 { left: 0%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-1 .col-l-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-l-1 { left: 0%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-1 .col-xl-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-xl-1 { left: 0%; } } .emotion--container.emotion--column-2 .col-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-1 { left: 0%; } .emotion--container.emotion--column-2 .col-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-2 { left: 50%; } .emotion--container.emotion--column-2 .col-xs-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-2 .col-xs-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-xs-2 { left: 50%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-2 .col-s-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-2 .col-s-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-s-2 { left: 50%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-2 .col-m-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-2 .col-m-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-m-2 { left: 50%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-2 .col-l-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-2 .col-l-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-l-2 { left: 50%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-2 .col-xl-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-2 .col-xl-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-xl-2 { left: 50%; } } .emotion--container.emotion--column-3 .col-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-1 { left: 0%; } .emotion--container.emotion--column-3 .col-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-3 { left: 66.66666667%; } .emotion--container.emotion--column-3 .col-xs-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-3 .col-xs-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-xs-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-xs-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-xs-3 { left: 66.66666667%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-3 .col-s-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-3 .col-s-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-s-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-s-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-s-3 { left: 66.66666667%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-3 .col-m-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-3 .col-m-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-m-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-m-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-m-3 { left: 66.66666667%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-3 .col-l-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-3 .col-l-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-l-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-l-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-l-3 { left: 66.66666667%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-3 .col-xl-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-3 .col-xl-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-xl-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-xl-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-xl-3 { left: 66.66666667%; } } .emotion--container.emotion--column-4 .col-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-1 { left: 0%; } .emotion--container.emotion--column-4 .col-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-2 { left: 25%; } .emotion--container.emotion--column-4 .col-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-3 { left: 50%; } .emotion--container.emotion--column-4 .col-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-4 { left: 75%; } .emotion--container.emotion--column-4 .col-xs-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-4 .col-xs-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-xs-2 { left: 25%; } .emotion--container.emotion--column-4 .col-xs-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-xs-3 { left: 50%; } .emotion--container.emotion--column-4 .col-xs-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-xs-4 { left: 75%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-4 .col-s-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-4 .col-s-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-s-2 { left: 25%; } .emotion--container.emotion--column-4 .col-s-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-s-3 { left: 50%; } .emotion--container.emotion--column-4 .col-s-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-s-4 { left: 75%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-4 .col-m-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-4 .col-m-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-m-2 { left: 25%; } .emotion--container.emotion--column-4 .col-m-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-m-3 { left: 50%; } .emotion--container.emotion--column-4 .col-m-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-m-4 { left: 75%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-4 .col-l-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-4 .col-l-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-l-2 { left: 25%; } .emotion--container.emotion--column-4 .col-l-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-l-3 { left: 50%; } .emotion--container.emotion--column-4 .col-l-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-l-4 { left: 75%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-4 .col-xl-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-4 .col-xl-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-xl-2 { left: 25%; } .emotion--container.emotion--column-4 .col-xl-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-xl-3 { left: 50%; } .emotion--container.emotion--column-4 .col-xl-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-xl-4 { left: 75%; } } .emotion--container.emotion--column-5 .col-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-1 { left: 0%; } .emotion--container.emotion--column-5 .col-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-2 { left: 20%; } .emotion--container.emotion--column-5 .col-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-3 { left: 40%; } .emotion--container.emotion--column-5 .col-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-4 { left: 60%; } .emotion--container.emotion--column-5 .col-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-5 { left: 80%; } .emotion--container.emotion--column-5 .col-xs-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-5 .col-xs-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-xs-2 { left: 20%; } .emotion--container.emotion--column-5 .col-xs-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-xs-3 { left: 40%; } .emotion--container.emotion--column-5 .col-xs-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-xs-4 { left: 60%; } .emotion--container.emotion--column-5 .col-xs-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-xs-5 { left: 80%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-5 .col-s-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-5 .col-s-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-s-2 { left: 20%; } .emotion--container.emotion--column-5 .col-s-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-s-3 { left: 40%; } .emotion--container.emotion--column-5 .col-s-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-s-4 { left: 60%; } .emotion--container.emotion--column-5 .col-s-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-s-5 { left: 80%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-5 .col-m-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-5 .col-m-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-m-2 { left: 20%; } .emotion--container.emotion--column-5 .col-m-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-m-3 { left: 40%; } .emotion--container.emotion--column-5 .col-m-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-m-4 { left: 60%; } .emotion--container.emotion--column-5 .col-m-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-m-5 { left: 80%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-5 .col-l-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-5 .col-l-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-l-2 { left: 20%; } .emotion--container.emotion--column-5 .col-l-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-l-3 { left: 40%; } .emotion--container.emotion--column-5 .col-l-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-l-4 { left: 60%; } .emotion--container.emotion--column-5 .col-l-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-l-5 { left: 80%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-5 .col-xl-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-5 .col-xl-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-xl-2 { left: 20%; } .emotion--container.emotion--column-5 .col-xl-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-xl-3 { left: 40%; } .emotion--container.emotion--column-5 .col-xl-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-xl-4 { left: 60%; } .emotion--container.emotion--column-5 .col-xl-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-xl-5 { left: 80%; } } .emotion--container.emotion--column-6 .col-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-1 { left: 0%; } .emotion--container.emotion--column-6 .col-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-4 { left: 50%; } .emotion--container.emotion--column-6 .col-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-6 { left: 83.33333333%; } .emotion--container.emotion--column-6 .col-xs-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-6 .col-xs-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-xs-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-xs-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-xs-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-xs-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-xs-4 { left: 50%; } .emotion--container.emotion--column-6 .col-xs-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-xs-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-xs-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-xs-6 { left: 83.33333333%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-6 .col-s-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-6 .col-s-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-s-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-s-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-s-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-s-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-s-4 { left: 50%; } .emotion--container.emotion--column-6 .col-s-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-s-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-s-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-s-6 { left: 83.33333333%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-6 .col-m-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-6 .col-m-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-m-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-m-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-m-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-m-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-m-4 { left: 50%; } .emotion--container.emotion--column-6 .col-m-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-m-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-m-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-m-6 { left: 83.33333333%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-6 .col-l-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-6 .col-l-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-l-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-l-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-l-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-l-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-l-4 { left: 50%; } .emotion--container.emotion--column-6 .col-l-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-l-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-l-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-l-6 { left: 83.33333333%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-6 .col-xl-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-6 .col-xl-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-xl-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-xl-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-xl-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-xl-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-xl-4 { left: 50%; } .emotion--container.emotion--column-6 .col-xl-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-xl-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-xl-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-xl-6 { left: 83.33333333%; } } .emotion--container.emotion--column-7 .col-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-1 { left: 0%; } .emotion--container.emotion--column-7 .col-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-7 { left: 85.71428571%; } .emotion--container.emotion--column-7 .col-xs-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-7 .col-xs-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-xs-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-xs-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-xs-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-xs-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-xs-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-xs-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-xs-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-xs-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-xs-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-xs-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-xs-7 { left: 85.71428571%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-7 .col-s-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-7 .col-s-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-s-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-s-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-s-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-s-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-s-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-s-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-s-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-s-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-s-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-s-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-s-7 { left: 85.71428571%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-7 .col-m-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-7 .col-m-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-m-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-m-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-m-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-m-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-m-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-m-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-m-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-m-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-m-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-m-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-m-7 { left: 85.71428571%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-7 .col-l-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-7 .col-l-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-l-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-l-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-l-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-l-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-l-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-l-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-l-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-l-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-l-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-l-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-l-7 { left: 85.71428571%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-7 .col-xl-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-7 .col-xl-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-xl-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-xl-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-xl-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-xl-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-xl-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-xl-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-xl-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-xl-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-xl-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-xl-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-xl-7 { left: 85.71428571%; } } .emotion--container.emotion--column-8 .col-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-1 { left: 0%; } .emotion--container.emotion--column-8 .col-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-3 { left: 25%; } .emotion--container.emotion--column-8 .col-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-5 { left: 50%; } .emotion--container.emotion--column-8 .col-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-7 { left: 75%; } .emotion--container.emotion--column-8 .col-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-8 { left: 87.5%; } .emotion--container.emotion--column-8 .col-xs-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-8 .col-xs-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-xs-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-xs-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-xs-3 { left: 25%; } .emotion--container.emotion--column-8 .col-xs-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-xs-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-xs-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-xs-5 { left: 50%; } .emotion--container.emotion--column-8 .col-xs-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-xs-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-xs-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-xs-7 { left: 75%; } .emotion--container.emotion--column-8 .col-xs-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-xs-8 { left: 87.5%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-8 .col-s-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-8 .col-s-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-s-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-s-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-s-3 { left: 25%; } .emotion--container.emotion--column-8 .col-s-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-s-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-s-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-s-5 { left: 50%; } .emotion--container.emotion--column-8 .col-s-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-s-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-s-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-s-7 { left: 75%; } .emotion--container.emotion--column-8 .col-s-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-s-8 { left: 87.5%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-8 .col-m-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-8 .col-m-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-m-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-m-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-m-3 { left: 25%; } .emotion--container.emotion--column-8 .col-m-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-m-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-m-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-m-5 { left: 50%; } .emotion--container.emotion--column-8 .col-m-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-m-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-m-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-m-7 { left: 75%; } .emotion--container.emotion--column-8 .col-m-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-m-8 { left: 87.5%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-8 .col-l-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-8 .col-l-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-l-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-l-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-l-3 { left: 25%; } .emotion--container.emotion--column-8 .col-l-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-l-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-l-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-l-5 { left: 50%; } .emotion--container.emotion--column-8 .col-l-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-l-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-l-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-l-7 { left: 75%; } .emotion--container.emotion--column-8 .col-l-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-l-8 { left: 87.5%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-8 .col-xl-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-8 .col-xl-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-xl-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-xl-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-xl-3 { left: 25%; } .emotion--container.emotion--column-8 .col-xl-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-xl-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-xl-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-xl-5 { left: 50%; } .emotion--container.emotion--column-8 .col-xl-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-xl-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-xl-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-xl-7 { left: 75%; } .emotion--container.emotion--column-8 .col-xl-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-xl-8 { left: 87.5%; } } .emotion--container.emotion--column-9 .col-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-1 { left: 0%; } .emotion--container.emotion--column-9 .col-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-9 { left: 88.88888889%; } .emotion--container.emotion--column-9 .col-xs-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-9 .col-xs-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-xs-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-xs-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-xs-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-xs-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-xs-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-xs-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-xs-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-xs-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-xs-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-xs-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-xs-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-xs-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-xs-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-xs-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-xs-9 { left: 88.88888889%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-9 .col-s-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-9 .col-s-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-s-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-s-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-s-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-s-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-s-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-s-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-s-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-s-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-s-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-s-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-s-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-s-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-s-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-s-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-s-9 { left: 88.88888889%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-9 .col-m-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-9 .col-m-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-m-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-m-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-m-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-m-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-m-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-m-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-m-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-m-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-m-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-m-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-m-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-m-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-m-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-m-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-m-9 { left: 88.88888889%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-9 .col-l-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-9 .col-l-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-l-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-l-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-l-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-l-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-l-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-l-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-l-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-l-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-l-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-l-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-l-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-l-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-l-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-l-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-l-9 { left: 88.88888889%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-9 .col-xl-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-9 .col-xl-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-xl-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-xl-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-xl-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-xl-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-xl-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-xl-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-xl-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-xl-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-xl-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-xl-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-xl-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-xl-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-xl-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-xl-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-xl-9 { left: 88.88888889%; } } .emotion--container.emotion--column-10 .col-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-1 { left: 0%; } .emotion--container.emotion--column-10 .col-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-2 { left: 10%; } .emotion--container.emotion--column-10 .col-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-3 { left: 20%; } .emotion--container.emotion--column-10 .col-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-4 { left: 30%; } .emotion--container.emotion--column-10 .col-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-5 { left: 40%; } .emotion--container.emotion--column-10 .col-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-6 { left: 50%; } .emotion--container.emotion--column-10 .col-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-7 { left: 60%; } .emotion--container.emotion--column-10 .col-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-8 { left: 70%; } .emotion--container.emotion--column-10 .col-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-9 { left: 80%; } .emotion--container.emotion--column-10 .col-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-10 { left: 90%; } .emotion--container.emotion--column-10 .col-xs-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-10 .col-xs-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-xs-2 { left: 10%; } .emotion--container.emotion--column-10 .col-xs-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-xs-3 { left: 20%; } .emotion--container.emotion--column-10 .col-xs-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-xs-4 { left: 30%; } .emotion--container.emotion--column-10 .col-xs-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-xs-5 { left: 40%; } .emotion--container.emotion--column-10 .col-xs-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-xs-6 { left: 50%; } .emotion--container.emotion--column-10 .col-xs-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-xs-7 { left: 60%; } .emotion--container.emotion--column-10 .col-xs-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-xs-8 { left: 70%; } .emotion--container.emotion--column-10 .col-xs-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-xs-9 { left: 80%; } .emotion--container.emotion--column-10 .col-xs-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-xs-10 { left: 90%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-10 .col-s-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-10 .col-s-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-s-2 { left: 10%; } .emotion--container.emotion--column-10 .col-s-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-s-3 { left: 20%; } .emotion--container.emotion--column-10 .col-s-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-s-4 { left: 30%; } .emotion--container.emotion--column-10 .col-s-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-s-5 { left: 40%; } .emotion--container.emotion--column-10 .col-s-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-s-6 { left: 50%; } .emotion--container.emotion--column-10 .col-s-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-s-7 { left: 60%; } .emotion--container.emotion--column-10 .col-s-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-s-8 { left: 70%; } .emotion--container.emotion--column-10 .col-s-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-s-9 { left: 80%; } .emotion--container.emotion--column-10 .col-s-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-s-10 { left: 90%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-10 .col-m-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-10 .col-m-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-m-2 { left: 10%; } .emotion--container.emotion--column-10 .col-m-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-m-3 { left: 20%; } .emotion--container.emotion--column-10 .col-m-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-m-4 { left: 30%; } .emotion--container.emotion--column-10 .col-m-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-m-5 { left: 40%; } .emotion--container.emotion--column-10 .col-m-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-m-6 { left: 50%; } .emotion--container.emotion--column-10 .col-m-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-m-7 { left: 60%; } .emotion--container.emotion--column-10 .col-m-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-m-8 { left: 70%; } .emotion--container.emotion--column-10 .col-m-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-m-9 { left: 80%; } .emotion--container.emotion--column-10 .col-m-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-m-10 { left: 90%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-10 .col-l-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-10 .col-l-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-l-2 { left: 10%; } .emotion--container.emotion--column-10 .col-l-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-l-3 { left: 20%; } .emotion--container.emotion--column-10 .col-l-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-l-4 { left: 30%; } .emotion--container.emotion--column-10 .col-l-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-l-5 { left: 40%; } .emotion--container.emotion--column-10 .col-l-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-l-6 { left: 50%; } .emotion--container.emotion--column-10 .col-l-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-l-7 { left: 60%; } .emotion--container.emotion--column-10 .col-l-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-l-8 { left: 70%; } .emotion--container.emotion--column-10 .col-l-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-l-9 { left: 80%; } .emotion--container.emotion--column-10 .col-l-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-l-10 { left: 90%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-10 .col-xl-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-10 .col-xl-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-xl-2 { left: 10%; } .emotion--container.emotion--column-10 .col-xl-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-xl-3 { left: 20%; } .emotion--container.emotion--column-10 .col-xl-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-xl-4 { left: 30%; } .emotion--container.emotion--column-10 .col-xl-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-xl-5 { left: 40%; } .emotion--container.emotion--column-10 .col-xl-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-xl-6 { left: 50%; } .emotion--container.emotion--column-10 .col-xl-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-xl-7 { left: 60%; } .emotion--container.emotion--column-10 .col-xl-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-xl-8 { left: 70%; } .emotion--container.emotion--column-10 .col-xl-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-xl-9 { left: 80%; } .emotion--container.emotion--column-10 .col-xl-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-xl-10 { left: 90%; } } .emotion--container.emotion--column-11 .col-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-1 { left: 0%; } .emotion--container.emotion--column-11 .col-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-11 { left: 90.90909091%; } .emotion--container.emotion--column-11 .col-xs-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-11 .col-xs-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-xs-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-xs-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-xs-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-xs-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-xs-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-xs-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-xs-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-xs-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-xs-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-xs-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-xs-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-xs-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-xs-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-xs-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-xs-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-xs-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-xs-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-xs-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-xs-11 { left: 90.90909091%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-11 .col-s-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-11 .col-s-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-s-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-s-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-s-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-s-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-s-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-s-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-s-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-s-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-s-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-s-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-s-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-s-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-s-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-s-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-s-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-s-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-s-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-s-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-s-11 { left: 90.90909091%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-11 .col-m-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-11 .col-m-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-m-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-m-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-m-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-m-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-m-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-m-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-m-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-m-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-m-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-m-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-m-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-m-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-m-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-m-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-m-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-m-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-m-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-m-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-m-11 { left: 90.90909091%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-11 .col-l-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-11 .col-l-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-l-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-l-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-l-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-l-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-l-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-l-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-l-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-l-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-l-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-l-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-l-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-l-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-l-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-l-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-l-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-l-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-l-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-l-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-l-11 { left: 90.90909091%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-11 .col-xl-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-11 .col-xl-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-xl-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-xl-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-xl-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-xl-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-xl-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-xl-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-xl-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-xl-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-xl-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-xl-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-xl-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-xl-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-xl-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-xl-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-xl-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-xl-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-xl-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-xl-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-xl-11 { left: 90.90909091%; } } .emotion--container.emotion--column-12 .col-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-1 { left: 0%; } .emotion--container.emotion--column-12 .col-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-4 { left: 25%; } .emotion--container.emotion--column-12 .col-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-7 { left: 50%; } .emotion--container.emotion--column-12 .col-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-10 { left: 75%; } .emotion--container.emotion--column-12 .col-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-12 { left: 91.66666667%; } .emotion--container.emotion--column-12 .col-xs-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-12 .col-xs-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-xs-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-xs-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-xs-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-xs-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-xs-4 { left: 25%; } .emotion--container.emotion--column-12 .col-xs-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-xs-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-xs-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-xs-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-xs-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-xs-7 { left: 50%; } .emotion--container.emotion--column-12 .col-xs-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-xs-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-xs-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-xs-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-xs-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-xs-10 { left: 75%; } .emotion--container.emotion--column-12 .col-xs-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-xs-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-xs-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-xs-12 { left: 91.66666667%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-12 .col-s-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-12 .col-s-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-s-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-s-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-s-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-s-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-s-4 { left: 25%; } .emotion--container.emotion--column-12 .col-s-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-s-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-s-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-s-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-s-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-s-7 { left: 50%; } .emotion--container.emotion--column-12 .col-s-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-s-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-s-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-s-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-s-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-s-10 { left: 75%; } .emotion--container.emotion--column-12 .col-s-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-s-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-s-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-s-12 { left: 91.66666667%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-12 .col-m-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-12 .col-m-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-m-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-m-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-m-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-m-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-m-4 { left: 25%; } .emotion--container.emotion--column-12 .col-m-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-m-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-m-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-m-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-m-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-m-7 { left: 50%; } .emotion--container.emotion--column-12 .col-m-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-m-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-m-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-m-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-m-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-m-10 { left: 75%; } .emotion--container.emotion--column-12 .col-m-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-m-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-m-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-m-12 { left: 91.66666667%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-12 .col-l-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-12 .col-l-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-l-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-l-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-l-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-l-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-l-4 { left: 25%; } .emotion--container.emotion--column-12 .col-l-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-l-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-l-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-l-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-l-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-l-7 { left: 50%; } .emotion--container.emotion--column-12 .col-l-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-l-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-l-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-l-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-l-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-l-10 { left: 75%; } .emotion--container.emotion--column-12 .col-l-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-l-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-l-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-l-12 { left: 91.66666667%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-12 .col-xl-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-12 .col-xl-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-xl-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-xl-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-xl-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-xl-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-xl-4 { left: 25%; } .emotion--container.emotion--column-12 .col-xl-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-xl-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-xl-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-xl-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-xl-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-xl-7 { left: 50%; } .emotion--container.emotion--column-12 .col-xl-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-xl-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-xl-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-xl-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-xl-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-xl-10 { left: 75%; } .emotion--container.emotion--column-12 .col-xl-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-xl-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-xl-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-xl-12 { left: 91.66666667%; } } .emotion--container .is--hidden-s, .emotion--container .is--hidden-m, .emotion--container .is--hidden-l, .emotion--container .is--hidden-xl { display: block; } .emotion--container .is--hidden-xs { display: none; } .emotion--container .emotion--sizer-s, .emotion--container .emotion--sizer-m, .emotion--container .emotion--sizer-l, .emotion--container .emotion--sizer-xl { display: none; } .emotion--container .emotion--sizer-xs { display: block; } .emotion--container .emotion--sizer-xs ~ .emotion--sizer { display: none; } @media screen and (min-width: 30em) { .emotion--container .is--hidden-xs, .emotion--container .is--hidden-m, .emotion--container .is--hidden-l, .emotion--container .is--hidden-xl { display: block; } .emotion--container .is--hidden-s { display: none; } .emotion--container .emotion--sizer-xs, .emotion--container .emotion--sizer-m, .emotion--container .emotion--sizer-l, .emotion--container .emotion--sizer-xl { display: none; } .emotion--container .emotion--sizer-s { display: block; } .emotion--container .emotion--sizer-s ~ .emotion--sizer { display: none; } } @media screen and (min-width: 48em) { .emotion--container .is--hidden-xs, .emotion--container .is--hidden-s, .emotion--container .is--hidden-l, .emotion--container .is--hidden-xl { display: block; } .emotion--container .is--hidden-m { display: none; } .emotion--container .emotion--sizer-s, .emotion--container .emotion--sizer-xs, .emotion--container .emotion--sizer-l, .emotion--container .emotion--sizer-xl { display: none; } .emotion--container .emotion--sizer-m { display: block; } .emotion--container .emotion--sizer-m ~ .emotion--sizer { display: none; } } @media screen and (min-width: 64em) { .emotion--container .is--hidden-xs, .emotion--container .is--hidden-s, .emotion--container .is--hidden-m, .emotion--container .is--hidden-xl { display: block; } .emotion--container .is--hidden-l { display: none; } .emotion--container .emotion--sizer-xs, .emotion--container .emotion--sizer-s, .emotion--container .emotion--sizer-m, .emotion--container .emotion--sizer-xl { display: none; } .emotion--container .emotion--sizer-l { display: block; } .emotion--container .emotion--sizer-l ~ .emotion--sizer { display: none; } } @media screen and (min-width: 78.75em) { .emotion--container .is--hidden-xs, .emotion--container .is--hidden-s, .emotion--container .is--hidden-m, .emotion--container .is--hidden-l { display: block; } .emotion--container .is--hidden-xl { display: none; } .emotion--container .emotion--sizer-s, .emotion--container .emotion--sizer-xs, .emotion--container .emotion--sizer-m, .emotion--container .emotion--sizer-l { display: none; } .emotion--container .emotion--sizer-xl { display: block; } .emotion--container .emotion--sizer-xl ~ .emotion--sizer { display: none; } } .emotion--element { display: block; position: absolute; top: 0; left: 0; } .emotion--container.emotion--mode-rows .emotion--element { position: relative; top: 0; left: 0; float: left; vertical-align: top; } .emotion--banner { height: 100%; width: 100%; position: relative; overflow: hidden; } .emotion--banner .banner--content { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; position: absolute; top: 50%; left: 50%; } .emotion--banner .banner--content.left.top { -webkit-transform: translate(0, 0); transform: translate(0, 0); left: 0; top: 0; } .emotion--banner .banner--content.left.center { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); left: 0; top: 50%; } .emotion--banner .banner--content.left.bottom { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); left: 0; top: 100%; } .emotion--banner .banner--content.center.top { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; top: 0; } .emotion--banner .banner--content.center.bottom { -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); left: 50%; top: 100%; } .emotion--banner .banner--content.right.top { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); left: 100%; top: 0; } .emotion--banner .banner--content.right.center { -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); left: 100%; top: 50%; } .emotion--banner .banner--content.right.bottom { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); left: 100%; top: 100%; } .emotion--mode-rows .emotion--banner { height: auto; } .emotion--mode-rows .emotion--banner .banner--content, .emotion--mode-rows .emotion--banner .banner--content.left.top, .emotion--mode-rows .emotion--banner .banner--content.left.center, .emotion--mode-rows .emotion--banner .banner--content.left.bottom, .emotion--mode-rows .emotion--banner .banner--content.center.top, .emotion--mode-rows .emotion--banner .banner--content.center.bottom, .emotion--mode-rows .emotion--banner .banner--content.right.top, .emotion--mode-rows .emotion--banner .banner--content.right.center, .emotion--mode-rows .emotion--banner .banner--content.right.bottom { -webkit-transform: translate(0, 0); transform: translate(0, 0); position: relative; left: 0; top: 0; float: none; } .emotion--mode-rows .emotion--banner .banner--image-src { max-height: none; width: 100%; } .emotion--banner .banner--image { width: 100%; } .emotion--banner .banner--link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 110; } .emotion--banner .banner--mapping { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .emotion--banner .banner--mapping-link { position: absolute; display: block; z-index: 110; background: rgba(0, 0, 0, 0); } .emotion--banner-slider { width: 100%; height: 100%; } .emotion--mode-rows .emotion--banner-slider { height: auto; } .emotion--mode-rows .emotion--banner-slider .banner-slider--container, .emotion--mode-rows .emotion--banner-slider .banner-slider--slide { height: auto; } .emotion--mode-rows .emotion--banner-slider .banner-slider--item { vertical-align: middle; } .emotion--mode-rows .emotion--banner-slider .banner-slider--banner { -webkit-transform: none; transform: none; position: relative; top: 0; left: 0; width: 100%; } .emotion--banner-slider .banner-slider--title { padding: 0.625rem 1.25rem 0.625rem 1.25rem; display: block; width: 100%; position: absolute; top: 0; left: 0; z-index: 100; color: #fff; font-weight: 700; background: rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-align: center; text-overflow: ellipsis; } .emotion--banner-slider .banner-slider--container, .emotion--banner-slider .banner-slider--slide { width: 100%; height: 100%; } .emotion--banner-slider .banner-slider--container .arrow { display: block; } .emotion--banner-slider .banner-slider--item { width: 100%; height: 100%; position: relative; overflow: hidden; } .emotion--banner-slider .banner-slider--banner { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; position: absolute; top: 50%; left: 50%; z-index: 100; } .emotion--banner-slider .banner-slider--image { width: 100%; } .emotion--banner-slider .banner-slider--link { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 200; text-indent: 200%; white-space: nowrap; overflow: hidden; } .emotion--banner-slider .image-slider--dots { display: none; } .emotion--product-slider { width: 100%; height: 100%; position: relative; } .emotion--mode-rows .emotion--product-slider { height: 22.5rem; } .emotion--product-slider .product-slider--title { height: 3.4375rem; position: relative; top: 0; left: 0; z-index: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emotion--product-slider .product-slider--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 400; } .emotion--product-slider .product-slider--title ~ .product-slider--content { padding-top: 4.0625rem; } .emotion--product-slider .product-slider--arrow.arrow--next { border-right: 0 none; } .emotion--product-slider .product-slider--arrow.arrow--prev { border-left: 0 none; } .emotion--product-slider .box--emotion { width: 100%; height: 100%; padding: 0; text-align: center; } .emotion--product-slider .box--emotion .box--content { padding: 0; border: 0 none; } .emotion--product-slider .box--emotion .product--info { height: 100%; position: relative; overflow: hidden; } .emotion--product-slider .box--emotion .product--image { height: 60%; margin: 0 auto; } .emotion--product-slider .box--emotion .product--details { max-height: 35%; width: 100%; margin-top: 5%; } .emotion--product-slider .box--emotion .product--title { font-size: 0.875rem; font-weight: 500; white-space: normal; } .emotion--product-slider .box--emotion .product--price-info .price--unit { height: 0.9375rem; font-size: 0.625rem; } .emotion--product-slider .box--emotion .product--price .price--default { font-size: 0.875rem; } .emotion--product { width: 100%; height: 100%; } .emotion--mode-rows .emotion--product { height: 22.5rem; } .emotion--product.is--no-border .box--content { border: 0 none; } .emotion--product .product--box { width: 100%; height: 100%; padding: 0; float: none; } .emotion--product .product--box .box--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .emotion--product .product--box .product--info { height: 100%; position: relative; overflow: hidden; } .emotion--product .product--box .product--image { height: 70%; margin: 0 auto; } .emotion--product .product--box .product--image.is--large { height: 100%; } .emotion--product .product--box .product--details { max-height: 30%; width: 100%; position: absolute; bottom: 0; left: 0; } .emotion--product .product--box .product--title { text-overflow: ellipsis; } .emotion--category-teaser { width: 100%; height: 100%; } .emotion--mode-rows .emotion--category-teaser { height: 22.5rem; } .emotion--category-teaser .category-teaser--link { display: block; width: 100%; height: 100%; position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: transparent; } .emotion--category-teaser .category-teaser--title { padding: 0.625rem 1.25rem 0.625rem 1.25rem; display: block; width: 100%; position: absolute; bottom: 0; left: 0; color: #fff; font-weight: 700; background: rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emotion--manufacturer { width: 100%; height: 100%; position: relative; } .emotion--mode-rows .emotion--manufacturer { height: 16.25rem; } .emotion--manufacturer .manufacturer--title { height: 3.4375rem; position: relative; top: 0; left: 0; z-index: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emotion--manufacturer .manufacturer--content { padding: 0.625rem 1.25rem 0.625rem 1.25rem; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 400; } .emotion--manufacturer .manufacturer--title ~ .manufacturer--content { padding-top: 4.0625rem; } .emotion--manufacturer .manufacturer--slider { height: 100%; } .emotion--manufacturer .manufacturer--slider .arrow--next { right: -1.25rem; border-right: 0 none; } .emotion--manufacturer .manufacturer--slider .arrow--prev { left: -1.25rem; border-left: 0 none; } .emotion--manufacturer .manufacturer--item { padding: 0.625rem 0.9375rem 0.625rem 0.9375rem; text-align: center; vertical-align: middle; } .emotion--manufacturer .manufacturer--link { font-size: 1.125rem; display: block; width: 100%; height: 100%; color: #113c62; font-weight: 700; position: relative; } .emotion--manufacturer .manufacturer--link:hover { color: #113c62; } .emotion--manufacturer .manufacturer--image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .emotion--youtube { width: 100%; height: 100%; } .emotion--mode-rows .emotion--youtube { height: 22.5rem; } .emotion--video { width: 100%; height: 100%; overflow: hidden; position: relative; } .emotion--mode-rows .emotion--video { height: auto; } .emotion--mode-rows .emotion--video .video--element { height: auto; position: relative; } .emotion--video video::-moz-media-controls, .emotion--video video::-webkit-media-controls { bottom: 15%; } .emotion--video .video--element { width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0; z-index: 1000; } .emotion--video .video--cover { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1300; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: #000; text-align: center; } .emotion--video .video--cover .video--play-icon { width: 6.25rem; height: 6.25rem; font-size: 6.25rem; display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-shadow: 0 0 5px rgba(0, 0, 0, 0.6); color: #fff; } .emotion--video .video--play-btn { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; top: 1.5625rem; right: 1.5625rem; line-height: 2.5rem; font-size: 1.3125rem; width: 2.625rem; height: 2.625rem; border-radius: 100%; background-clip: padding-box; position: absolute; cursor: pointer; color: #fff; border: 2px solid #fff; text-align: center; z-index: 1200; } .emotion--video .video--text { width: 100%; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1100; color: #fff; text-align: center; } .emotion--video .video--text.no--events { pointer-events: none; } .emotion--iframe { width: 100%; height: 100%; } .emotion--mode-rows .emotion--iframe { height: 22.5rem; } .emotion--blog { width: 100%; height: 100%; overflow: auto; } .emotion--mode-rows .emotion--blog { height: auto; } .emotion--mode-rows .emotion--blog .blog--image { height: 10rem; } .emotion--blog .blog--container { height: 100%; margin: 0 0 0 -1%; } .emotion--blog .blog--entry { height: 100%; padding-left: 1%; } .emotion--blog .blog--image { height: 40%; width: 100%; display: block; background-position: center center; background-size: cover; margin-bottom: 2%; } .emotion--blog .blog--title { font-size: 0.875rem; display: block; font-weight: 700; color: #113c62; margin-bottom: 2%; } .emotion--blog .blog--title:hover { color: #113c62; } .emotion--blog .blog--description { font-size: 0.875rem; line-height: 1.25rem; color: #113c62; height: auto; max-height: 60%; } .emotion--html { width: 100%; height: 100%; position: relative; overflow: auto; } .emotion--mode-rows .emotion--html { height: auto; } .emotion--html .html--content :last-child { margin-bottom: 0; } @media screen and (min-width: 48em) { .emotion--blog { overflow: hidden; } } @media screen and (min-width: 78.75em) { .emotion--banner-slider .image-slider--dots { bottom: 0.625rem; top: auto; left: 0; display: block; position: absolute; width: 100%; text-align: center; padding: 0; } .emotion--banner-slider .image-slider--dots .dot--link { border-radius: 100%; margin: 0rem 0.125rem 0rem 0.125rem; width: 1.25rem; height: 1.25rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background: #008000; display: inline-block; border: 5px solid rgba(255, 255, 255, 0.5); cursor: pointer; text-indent: -99999em; background-clip: padding-box; } .emotion--banner-slider .image-slider--dots .dot--link.is--active { background: #113c62; background-clip: padding-box; } } /* Input Types ========================================== Defines the basic styling of the Shopware input element types. It contains the different states of the input fields. ``` <div> <input type="text" placeholder="Text Input"> </div> <div> <input type="password" placeholder="Password Input"> </div> <div class="textarea"> <textarea placeholder="Textarea"></textarea> </div> ``` */ textarea, input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], #paypal-acdc-form .field { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 3px; background-clip: padding-box; box-sizing: border-box; line-height: 1.1875rem; font-size: 0.875rem; width: 18.125rem; padding: 0.625rem 0.625rem 0.5625rem 0.625rem; box-shadow: inset 0 1px 1px #7d7d7d; background: #969696; border: 1px solid #c8c8c8; border-top-color: #bbbbbb; color: #1c64a3; text-align: left; } textarea:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus { box-shadow: 0 0 0 transparent; outline: none; border-color: #113c62; background: #ffffff; color: #00cc00; } textarea.has--error, input[type="text"].has--error, input[type="search"].has--error, input[type="password"].has--error, input[type="number"].has--error, input[type="email"].has--error, input[type="tel"].has--error, #paypal-acdc-form .field.has--error { color: #e74c3c; background: #faeceb; border-color: #e74c3c; } textarea.input--field, input[type="text"].input--field, input[type="search"].input--field, input[type="password"].input--field, input[type="number"].input--field, input[type="email"].input--field, input[type="tel"].input--field { margin-bottom: 0.625rem; width: 100%; } textarea.input--field.input--field-zipcode, input[type="text"].input--field.input--field-zipcode, input[type="search"].input--field.input--field-zipcode, input[type="password"].input--field.input--field-zipcode, input[type="number"].input--field.input--field-zipcode, input[type="email"].input--field.input--field-zipcode, input[type="tel"].input--field.input--field-zipcode { width: 30%; float: left; } textarea.input--field.input--field-city, input[type="text"].input--field.input--field-city, input[type="search"].input--field.input--field-city, input[type="password"].input--field.input--field-city, input[type="number"].input--field.input--field-city, input[type="email"].input--field.input--field-city, input[type="tel"].input--field.input--field-city { width: 68%; float: left; } textarea.input--field.input--spacer, input[type="text"].input--field.input--spacer, input[type="search"].input--field.input--spacer, input[type="password"].input--field.input--spacer, input[type="number"].input--field.input--spacer, input[type="email"].input--field.input--spacer, input[type="tel"].input--field.input--spacer { margin-right: 2%; } textarea.is--small, input[type="text"].is--small, input[type="search"].is--small, input[type="password"].is--small, input[type="number"].is--small, input[type="email"].is--small, input[type="tel"].is--small { height: 2.125rem; } textarea.is--medium, input[type="text"].is--medium, input[type="search"].is--medium, input[type="password"].is--medium, input[type="number"].is--medium, input[type="email"].is--medium, input[type="tel"].is--medium { height: 2.375rem; } textarea.is--large, input[type="text"].is--large, input[type="search"].is--large, input[type="password"].is--large, input[type="number"].is--large, input[type="email"].is--large, input[type="tel"].is--large { height: 2.625rem; } textarea { resize: vertical; } label { font-size: 0.875rem; color: #113c62; } label.has--error { color: #e74c3c; background: #faeceb; } /* Selectfield ========================================== Creates a styled combobox selection for the basic select element. ``` <div class="select-field"> <select> <option selected="selected" disabled="disabled" value="">Disabled Option</option> <option>Option 1</option> <option>Option 2</option> </select> </div> ``` */ .select-field, .js--fancy-select { max-width: 18.125rem; height: 2.625rem; width: 100%; display: inline-block; position: relative; overflow: hidden; } .select-field:hover, .js--fancy-select:hover { color: #113c62; } .select-field select, .js--fancy-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0rem 2.5rem 0rem 0.625rem; line-height: 2.5rem; border-radius: 3px; background-clip: padding-box; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); height: 100%; width: 100%; display: block; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; border: 1px solid #c8c8c8; } .select-field select option, .js--fancy-select select option { padding: 0.25rem 0.5rem 0.25rem 0.5rem; color: #113c62; background: #fff; } .select-field select::-ms-expand, .js--fancy-select select::-ms-expand { display: none; } .select-field select:hover, .js--fancy-select select:hover { color: #113c62; border-color: #113c62; background: #fff; } .select-field select:focus, .js--fancy-select select:focus { outline: none; color: #113c62; border-color: #113c62; } .select-field select:focus::-ms-value, .js--fancy-select select:focus::-ms-value { color: #113c62; background: none; } .select-field select:disabled, .js--fancy-select select:disabled { opacity: 0.5; cursor: not-allowed; } .select-field select.has--error, .js--fancy-select select.has--error { color: #e74c3c; border-color: #e74c3c; background: #faeceb; } .select-field:after, .js--fancy-select:after { width: 1.875rem; height: 2.5rem; top: 0.0625rem; -webkit-user-select: none; user-select: none; line-height: 40px; max-height: 100%; display: block; content: "\e612"; position: absolute; right: 0; font-size: 5px; border-left: 1px solid #c8c8c8; text-align: center; font-family: 'shopware'; pointer-events: none; } .select-field:after:hover, .js--fancy-select:after:hover { color: #113c62; } .select-field.is--disabled select, .js--fancy-select.is--disabled select, .select-field.is--disabled:after, .js--fancy-select.is--disabled:after { opacity: 0.5; cursor: not-allowed; } .select-field.has--error select, .js--fancy-select.has--error select { color: #e74c3c; border-color: #e74c3c; background: #faeceb; } .select-field.has--error:after, .js--fancy-select.has--error:after { color: #e74c3c; border-color: #e74c3c; } @media screen and (min-width: 48em) { /* Standard input fields. */ .input--field { margin-bottom: 0.9375rem; } .input--field .input--field-zipcode { margin-right: 2%; width: 20%; } .input--field .input--field-city { width: 78%; } } @media screen and (min-width: 78.75em) { .input--field { margin-bottom: 0.9375rem; } } /* Icon set ============================================ ######Shopware Icon set elements Accessable with the `i` element and the `icon--` class. Example: `<i class="icon--cart"></i>` ``` <table style="width: 80%;margin: 20px auto;text-align: center;"> <tbody> <tr> <td><i class="icon--percent2"></i><br/> icon--percent2 </td> <td><i class="icon--percent"></i><br/> icon--percent </td> <td><i class="icon--coupon"></i><br/> icon--coupon </td> <td><i class="icon--truck"></i><br/> icon--truck </td> <td><i class="icon--logout"></i><br/> icon--logout </td> <td><i class="icon--grid"></i><br/> icon--grid </td> <td><i class="icon--filter"></i><br/> icon--filter </td> </tr> <tr> <td><i class="icon--clock"></i><br/> icon--clock </td> <td><i class="icon--arrow-up"></i><br/> icon--arrow-up </td> <td><i class="icon--arrow-right"></i><br/> icon--arrow-right </td> <td><i class="icon--arrow-left"></i><br/> icon--arrow-left </td> <td><i class="icon--arrow-down"></i><br/> icon--arrow-down </td> <td><i class="icon--star"></i><br/> icon--star </td> <td><i class="icon--star-half"></i><br/> icon--star-half </td> </tr> <tr> <td><i class="icon--star-empty"></i><br/> icon--star-empty </td> <td><i class="icon--shopware"></i><br/> icon--shopware </td> <td><i class="icon--service"></i><br/> icon--service </td> <td><i class="icon--search"></i><br/> icon--search </td> <td><i class="icon--numbered-list"></i><br/> icon--numbered-list </td> <td><i class="icon--menu"></i><br/> icon--menu </td> <td><i class="icon--mail"></i><br/> icon--mail </td> </tr> <tr> <td><i class="icon--list"></i><br/> icon--list </td> <td><i class="icon--layout"></i><br/> icon--layout </td> <td><i class="icon--heart"></i><br/> icon--heart </td> <td><i class="icon--cross"></i><br/> icon--cross </td> <td><i class="icon--compare"></i><br/> icon--compare </td> <td><i class="icon--check"></i><br/> icon--check </td> <td><i class="icon--basket"></i><br/> icon--basket </td> </tr> <tr> <td><i class="icon--account"></i><br/> icon--account </td> <td><i class="icon--chain"></i><br/> icon--chain </td> <td><i class="icon--delicious"></i><br/> icon--delicious </td> <td><i class="icon--delicious2"></i><br/> icon--delicious2 </td> <td><i class="icon--digg"></i><br/> icon--digg </td> <td><i class="icon--phone"></i><br/> icon--phone </td> <td><i class="icon--mobile"></i><br/> icon--mobile </td> </tr> <tr> <td><i class="icon--mouse"></i><br/> icon--mouse </td> <td><i class="icon--directions"></i><br/> icon--directions </td> <td><i class="icon--paperplane"></i><br/> icon--paperplane </td> <td><i class="icon--pencil"></i><br/> icon--pencil </td> <td><i class="icon--feather"></i><br/> icon--feather </td> <td><i class="icon--paperclip"></i><br/> icon--paperclip </td> <td><i class="icon--drawer"></i><br/> icon--drawer </td> </tr> <tr> <td><i class="icon--reply"></i><br/> icon--reply </td> <td><i class="icon--reply-all"></i><br/> icon--reply-all </td> <td><i class="icon--forward"></i><br/> icon--forward </td> <td><i class="icon--users"></i><br/> icon--users </td> <td><i class="icon--user-add"></i><br/> icon--user-add </td> <td><i class="icon--vcard"></i><br/> icon--vcard </td> <td><i class="icon--export"></i><br/> icon--export </td> </tr> <tr> <td><i class="icon--location"></i><br/> icon--location </td> <td><i class="icon--map"></i><br/> icon--map </td> <td><i class="icon--compass"></i><br/> icon--compass </td> <td><i class="icon--location2"></i><br/> icon--location2 </td> <td><i class="icon--target"></i><br/> icon--target </td> <td><i class="icon--share"></i><br/> icon--share </td> <td><i class="icon--sharable"></i><br/> icon--sharable </td> </tr> <tr> <td><i class="icon--thumbsup"></i><br/> icon--thumbsup </td> <td><i class="icon--thumbsdown"></i><br/> icon--thumbsdown </td> <td><i class="icon--chat"></i><br/> icon--chat </td> <td><i class="icon--comment"></i><br/> icon--comment </td> <td><i class="icon--quote"></i><br/> icon--quote </td> <td><i class="icon--house"></i><br/> icon--house </td> <td><i class="icon--popup"></i><br/> icon--popup </td> </tr> <tr> <td><i class="icon--flashlight"></i><br/> icon--flashlight </td> <td><i class="icon--printer"></i><br/> icon--printer </td> <td><i class="icon--bell"></i><br/> icon--bell </td> <td><i class="icon--link"></i><br/> icon--link </td> <td><i class="icon--cog"></i><br/> icon--cog </td> <td><i class="icon--tools"></i><br/> icon--tools </td> <td><i class="icon--trophy"></i><br/> icon--trophy </td> </tr> <tr> <td><i class="icon--tag"></i><br/> icon--tag </td> <td><i class="icon--camera"></i><br/> icon--camera </td> <td><i class="icon--megaphone"></i><br/> icon--megaphone </td> <td><i class="icon--moon"></i><br/> icon--moon </td> <td><i class="icon--palette"></i><br/> icon--palette </td> <td><i class="icon--leaf"></i><br/> icon--leaf </td> <td><i class="icon--music"></i><br/> icon--music </td> </tr> <tr> <td><i class="icon--music2"></i><br/> icon--music2 </td> <td><i class="icon--new"></i><br/> icon--new </td> <td><i class="icon--graduation"></i><br/> icon--graduation </td> <td><i class="icon--book"></i><br/> icon--book </td> <td><i class="icon--newspaper"></i><br/> icon--newspaper </td> <td><i class="icon--bag"></i><br/> icon--bag </td> <td><i class="icon--airplane"></i><br/> icon--airplane </td> </tr> <tr> <td><i class="icon--lifebuoy"></i><br/> icon--lifebuoy </td> <td><i class="icon--eye"></i><br/> icon--eye </td> <td><i class="icon--clock2"></i><br/> icon--clock2 </td> <td><i class="icon--microphone"></i><br/> icon--microphone </td> <td><i class="icon--calendar"></i><br/> icon--calendar </td> <td><i class="icon--bolt"></i><br/> icon--bolt </td> <td><i class="icon--thunder"></i><br/> icon--thunder </td> </tr> <tr> <td><i class="icon--droplet"></i><br/> icon--droplet </td> <td><i class="icon--cd"></i><br/> icon--cd </td> <td><i class="icon--briefcase"></i><br/> icon--briefcase </td> <td><i class="icon--air"></i><br/> icon--air </td> <td><i class="icon--hourglass"></i><br/> icon--hourglass </td> <td><i class="icon--gauge"></i><br/> icon--gauge </td> <td><i class="icon--language"></i><br/> icon--language </td> </tr> <tr> <td><i class="icon--network"></i><br/> icon--network </td> <td><i class="icon--key"></i><br/> icon--key </td> <td><i class="icon--battery"></i><br/> icon--battery </td> <td><i class="icon--bucket"></i><br/> icon--bucket </td> <td><i class="icon--magnet"></i><br/> icon--magnet </td> <td><i class="icon--drive"></i><br/> icon--drive </td> <td><i class="icon--cup"></i><br/> icon--cup </td> </tr> <tr> <td><i class="icon--rocket"></i><br/> icon--rocket </td> <td><i class="icon--brush"></i><br/> icon--brush </td> <td><i class="icon--suitcase"></i><br/> icon--suitcase </td> <td><i class="icon--cone"></i><br/> icon--cone </td> <td><i class="icon--earth"></i><br/> icon--earth </td> <td><i class="icon--keyboard"></i><br/> icon--keyboard </td> <td><i class="icon--browser"></i><br/> icon--browser </td> </tr> <tr> <td><i class="icon--publish"></i><br/> icon--publish </td> <td><i class="icon--progress-3"></i><br/> icon--progress-3 </td> <td><i class="icon--progress-2"></i><br/> icon--progress-2 </td> <td><i class="icon--progress-1"></i><br/> icon--progress-1 </td> <td><i class="icon--progress-0"></i><br/> icon--progress-0 </td> <td><i class="icon--sun"></i><br/> icon--sun </td> <td><i class="icon--sun2"></i><br/> icon--sun2 </td> </tr> <tr> <td><i class="icon--adjust"></i><br/> icon--adjust </td> <td><i class="icon--code"></i><br/> icon--code </td> <td><i class="icon--screen"></i><br/> icon--screen </td> <td><i class="icon--infinity"></i><br/> icon--infinity </td> <td><i class="icon--light-bulb"></i><br/> icon--light-bulb </td> <td><i class="icon--creditcard"></i><br/> icon--creditcard </td> <td><i class="icon--database"></i><br/> icon--database </td> </tr> <tr> <td><i class="icon--voicemail"></i><br/> icon--voicemail </td> <td><i class="icon--clipboard"></i><br/> icon--clipboard </td> <td><i class="icon--box"></i><br/> icon--box </td> <td><i class="icon--ticket"></i><br/> icon--ticket </td> <td><i class="icon--rss"></i><br/> icon--rss </td> <td><i class="icon--signal"></i><br/> icon--signal </td> <td><i class="icon--thermometer"></i><br/> icon--thermometer </td> </tr> <tr> <td><i class="icon--droplets"></i><br/> icon--droplets </td> <td><i class="icon--uniE680"></i><br/> icon--uniE680 </td> <td><i class="icon--statistics"></i><br/> icon--statistics </td> <td><i class="icon--pie"></i><br/> icon--pie </td> <td><i class="icon--bars"></i><br/> icon--bars </td> <td><i class="icon--graph"></i><br/> icon--graph </td> <td><i class="icon--lock"></i><br/> icon--lock </td> </tr> <tr> <td><i class="icon--lock-open"></i><br/> icon--lock-open </td> <td><i class="icon--login"></i><br/> icon--login </td> <td><i class="icon--minus"></i><br/> icon--minus </td> <td><i class="icon--plus"></i><br/> icon--plus </td> <td><i class="icon--cross2"></i><br/> icon--cross2 </td> <td><i class="icon--minus2"></i><br/> icon--minus2 </td> <td><i class="icon--cross3"></i><br/> icon--cross3 </td> </tr> <tr> <td><i class="icon--minus3"></i><br/> icon--minus3 </td> <td><i class="icon--plus3"></i><br/> icon--plus3 </td> <td><i class="icon--erase"></i><br/> icon--erase </td> <td><i class="icon--blocked"></i><br/> icon--blocked </td> <td><i class="icon--info"></i><br/> icon--info </td> <td><i class="icon--info2"></i><br/> icon--info2 </td> <td><i class="icon--question"></i><br/> icon--question </td> </tr> <tr> <td><i class="icon--help"></i><br/> icon--help </td> <td><i class="icon--warning"></i><br/> icon--warning </td> <td><i class="icon--cycle"></i><br/> icon--cycle </td> <td><i class="icon--cw"></i><br/> icon--cw </td> <td><i class="icon--ccw"></i><br/> icon--ccw </td> <td><i class="icon--shuffle"></i><br/> icon--shuffle </td> <td><i class="icon--arrow"></i><br/> icon--arrow </td> </tr> <tr> <td><i class="icon--arrow2"></i><br/> icon--arrow2 </td> <td><i class="icon--retweet"></i><br/> icon--retweet </td> <td><i class="icon--loop"></i><br/> icon--loop </td> <td><i class="icon--history"></i><br/> icon--history </td> <td><i class="icon--back"></i><br/> icon--back </td> <td><i class="icon--list2"></i><br/> icon--list2 </td> <td><i class="icon--add-to-list"></i><br/> icon--add-to-list </td> </tr> <tr> <td><i class="icon--layout2"></i><br/> icon--layout2 </td> <td><i class="icon--list3"></i><br/> icon--list3 </td> <td><i class="icon--text"></i><br/> icon--text </td> <td><i class="icon--text2"></i><br/> icon--text2 </td> <td><i class="icon--document"></i><br/> icon--document </td> <td><i class="icon--docs"></i><br/> icon--docs </td> <td><i class="icon--landscape"></i><br/> icon--landscape </td> </tr> <tr> <td><i class="icon--pictures"></i><br/> icon--pictures </td> <td><i class="icon--video"></i><br/> icon--video </td> <td><i class="icon--music3"></i><br/> icon--music3 </td> <td><i class="icon--folder"></i><br/> icon--folder </td> <td><i class="icon--archive"></i><br/> icon--archive </td> <td><i class="icon--trash"></i><br/> icon--trash </td> <td><i class="icon--upload"></i><br/> icon--upload </td> </tr> <tr> <td><i class="icon--download"></i><br/> icon--download </td> <td><i class="icon--disk"></i><br/> icon--disk </td> <td><i class="icon--install"></i><br/> icon--install </td> <td><i class="icon--cloud"></i><br/> icon--cloud </td> <td><i class="icon--upload2"></i><br/> icon--upload2 </td> <td><i class="icon--bookmark"></i><br/> icon--bookmark </td> <td><i class="icon--bookmarks"></i><br/> icon--bookmarks </td> </tr> <tr> <td><i class="icon--book2"></i><br/> icon--book2 </td> <td><i class="icon--play"></i><br/> icon--play </td> <td><i class="icon--pause"></i><br/> icon--pause </td> <td><i class="icon--record"></i><br/> icon--record </td> <td><i class="icon--stop"></i><br/> icon--stop </td> <td><i class="icon--next"></i><br/> icon--next </td> <td><i class="icon--previous"></i><br/> icon--previous </td> </tr> <tr> <td><i class="icon--first"></i><br/> icon--first </td> <td><i class="icon--last"></i><br/> icon--last </td> <td><i class="icon--resize-enlarge"></i><br/> icon--resize-enlarge </td> <td><i class="icon--resize-shrink"></i><br/> icon--resize-shrink </td> <td><i class="icon--volume"></i><br/> icon--volume </td> <td><i class="icon--sound"></i><br/> icon--sound </td> <td><i class="icon--mute"></i><br/> icon--mute </td> </tr> <tr> <td><i class="icon--flow-cascade"></i><br/> icon--flow-cascade </td> <td><i class="icon--flow-branch"></i><br/> icon--flow-branch </td> <td><i class="icon--flow-tree"></i><br/> icon--flow-tree </td> <td><i class="icon--flow-line"></i><br/> icon--flow-line </td> <td><i class="icon--flow-parallel"></i><br/> icon--flow-parallel </td> <td><i class="icon--arrow-left2"></i><br/> icon--arrow-left2 </td> <td><i class="icon--arrow-down2"></i><br/> icon--arrow-down2 </td> </tr> <tr> <td><i class="icon--arrow-up-upload"></i><br/> icon--arrow-up-upload </td> <td><i class="icon--arrow-right2"></i><br/> icon--arrow-right2 </td> <td><i class="icon--arrow-left3"></i><br/> icon--arrow-left3 </td> <td><i class="icon--arrow-down3"></i><br/> icon--arrow-down3 </td> <td><i class="icon--arrow-up2"></i><br/> icon--arrow-up2 </td> <td><i class="icon--arrow-right3"></i><br/> icon--arrow-right3 </td> <td><i class="icon--arrow-left4"></i><br/> icon--arrow-left4 </td> </tr> <tr> <td><i class="icon--arrow-down4"></i><br/> icon--arrow-down4 </td> <td><i class="icon--arrow-up3"></i><br/> icon--arrow-up3 </td> <td><i class="icon--arrow-right4"></i><br/> icon--arrow-right4 </td> <td><i class="icon--arrow-left5"></i><br/> icon--arrow-left5 </td> <td><i class="icon--arrow-down5"></i><br/> icon--arrow-down5 </td> <td><i class="icon--arrow-up4"></i><br/> icon--arrow-up4 </td> <td><i class="icon--arrow-right5"></i><br/> icon--arrow-right5 </td> </tr> <tr> <td><i class="icon--arrow-left6"></i><br/> icon--arrow-left6 </td> <td><i class="icon--arrow-down6"></i><br/> icon--arrow-down6 </td> <td><i class="icon--arrow-up5"></i><br/> icon--arrow-up5 </td> <td><i class="icon--arrow-right6"></i><br/> icon--arrow-right6 </td> <td><i class="icon--menu2"></i><br/> icon--menu2 </td> <td><i class="icon--ellipsis"></i><br/> icon--ellipsis </td> <td><i class="icon--dots"></i><br/> icon--dots </td> </tr> <tr> <td><i class="icon--dot"></i><br/> icon--dot </td> <td><i class="icon--cc"></i><br/> icon--cc </td> <td><i class="icon--cc-by"></i><br/> icon--cc-by </td> <td><i class="icon--cc-nc"></i><br/> icon--cc-nc </td> <td><i class="icon--cc-sa"></i><br/> icon--cc-sa </td> <td><i class="icon--cc-nd"></i><br/> icon--cc-nd </td> <td><i class="icon--cc-pd"></i><br/> icon--cc-pd </td> </tr> <tr> <td><i class="icon--cc-zero"></i><br/> icon--cc-zero </td> <td><i class="icon--cc-share"></i><br/> icon--cc-share </td> <td><i class="icon--cc-share2"></i><br/> icon--cc-share2 </td> <td><i class="icon--danielbruce"></i><br/> icon--danielbruce </td> <td><i class="icon--danielbruce2"></i><br/> icon--danielbruce2 </td> <td><i class="icon--github"></i><br/> icon--github </td> <td><i class="icon--github2"></i><br/> icon--github2 </td> </tr> <tr> <td><i class="icon--flickr"></i><br/> icon--flickr </td> <td><i class="icon--flickr2"></i><br/> icon--flickr2 </td> <td><i class="icon--vimeo"></i><br/> icon--vimeo </td> <td><i class="icon--vimeo2"></i><br/> icon--vimeo2 </td> <td><i class="icon--twitter"></i><br/> icon--twitter </td> <td><i class="icon--twitter2"></i><br/> icon--twitter2 </td> <td><i class="icon--facebook"></i><br/> icon--facebook </td> </tr> <tr> <td><i class="icon--facebook2"></i><br/> icon--facebook2 </td> <td><i class="icon--facebook3"></i><br/> icon--facebook3 </td> <td><i class="icon--googleplus"></i><br/> icon--googleplus </td> <td><i class="icon--googleplus2"></i><br/> icon--googleplus2 </td> <td><i class="icon--pinterest"></i><br/> icon--pinterest </td> <td><i class="icon--pinterest2"></i><br/> icon--pinterest2 </td> <td><i class="icon--tumblr"></i><br/> icon--tumblr </td> </tr> <tr> <td><i class="icon--tumblr2"></i><br/> icon--tumblr2 </td> <td><i class="icon--linkedin"></i><br/> icon--linkedin </td> <td><i class="icon--linkedin2"></i><br/> icon--linkedin2 </td> <td><i class="icon--dribbble"></i><br/> icon--dribbble </td> <td><i class="icon--dribbble2"></i><br/> icon--dribbble2 </td> <td><i class="icon--stumbleupon"></i><br/> icon--stumbleupon </td> <td><i class="icon--stumbleupon2"></i><br/> icon--stumbleupon2 </td> </tr> <tr> <td><i class="icon--lastfm"></i><br/> icon--lastfm </td> <td><i class="icon--lastfm2"></i><br/> icon--lastfm2 </td> <td><i class="icon--rdio"></i><br/> icon--rdio </td> <td><i class="icon--rdio2"></i><br/> icon--rdio2 </td> <td><i class="icon--spotify"></i><br/> icon--spotify </td> <td><i class="icon--spotify2"></i><br/> icon--spotify2 </td> <td><i class="icon--qq"></i><br/> icon--qq </td> </tr> <tr> <td><i class="icon--instagram3"></i><br/> icon--instagram3 </td> <td><i class="icon--dropbox"></i><br/> icon--dropbox </td> <td><i class="icon--evernote"></i><br/> icon--evernote </td> <td><i class="icon--flattr"></i><br/> icon--flattr </td> <td><i class="icon--skype"></i><br/> icon--skype </td> <td><i class="icon--skype2"></i><br/> icon--skype2 </td> <td><i class="icon--renren"></i><br/> icon--renren </td> </tr> <tr> <td><i class="icon--sina-weibo"></i><br/> icon--sina-weibo </td> <td><i class="icon--paypal"></i><br/> icon--paypal </td> <td><i class="icon--picasa"></i><br/> icon--picasa </td> <td><i class="icon--soundcloud"></i><br/> icon--soundcloud </td> <td><i class="icon--mixi"></i><br/> icon--mixi </td> <td><i class="icon--behance"></i><br/> icon--behance </td> <td><i class="icon--circles"></i><br/> icon--circles </td> </tr> <tr> <td><i class="icon--vk"></i><br/> icon--vk </td> <td><i class="icon--smashing"></i><br/> icon--smashing </td> <td><i class="icon--feed"></i><br/> icon--feed </td> <td><i class="icon--feed2"></i><br/> icon--feed2 </td> <td><i class="icon--instagram"></i><br/> icon--instagram </td> <td><i class="icon--instagram2"></i><br/> icon--instagram2 </td> <td><i class="icon--xing"></i><br/> icon--xing </td> </tr> <tr> <td><i class="icon--xing2"></i><br/> icon--xing2 </td> <td><i class="icon--youtube"></i><br/> icon--youtube </td> <td><i class="icon--youtube2"></i><br/> icon--youtube2 </td> </tr> </tbody> </table> ``` */ @font-face { font-family: 'shopware'; font-display: block; src: url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff2?a2f8e0b722ef40e61c46ad1eaf0e8948') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff?14d939399e79e4eb634ee59c4f756a34') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.ttf?a63aad32418410ba49cc2088e4a9cabf') format('truetype'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.svg?e3d3b7474afd3d576a8e7194929fd12e') format('svg'); font-weight: normal; font-style: normal; } [class^="icon--"], [class*=" icon--"] { font-family: 'shopware'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon--percent2:before { content: "\e723"; } .icon--percent:before { content: "\e722"; } .icon--coupon:before { content: "\e71c"; } .icon--truck:before { content: "\e71d"; } .icon--logout:before { content: "\e614"; } .icon--grid:before { content: "\e615"; } .icon--filter:before { content: "\e616"; } .icon--clock:before { content: "\e617"; } .icon--arrow-up:before { content: "\e610"; } .icon--arrow-right:before { content: "\e60f"; } .icon--arrow-left:before { content: "\e611"; } .icon--arrow-down:before { content: "\e612"; } .icon--star:before { content: "\e600"; } .icon--star-half:before { content: "\e71e"; } .icon--star-empty:before { content: "\e601"; } .icon--shopware:before { content: "\e602"; } .icon--service:before { content: "\e603"; } .icon--search:before { content: "\e604"; } .icon--numbered-list:before { content: "\e605"; } .icon--menu:before { content: "\e606"; } .icon--mail:before { content: "\e607"; } .icon--list:before { content: "\e608"; } .icon--layout:before { content: "\e609"; } .icon--heart:before { content: "\e60a"; } .icon--cross:before { content: "\e60d"; } .icon--compare:before { content: "\e60b"; } .icon--check:before { content: "\e60c"; } .icon--basket:before { content: "\e60e"; } .icon--account:before { content: "\e613"; } .icon--chain:before { content: "\f0c1"; } .icon--delicious:before { content: "\f1a5"; } .icon--delicious2:before { content: "\e721"; } .icon--digg:before { content: "\f1a6"; } .icon--phone:before { content: "\e619"; } .icon--mobile:before { content: "\e61d"; } .icon--mouse:before { content: "\e61e"; } .icon--directions:before { content: "\e61f"; } .icon--paperplane:before { content: "\e620"; } .icon--pencil:before { content: "\e618"; } .icon--feather:before { content: "\e621"; } .icon--paperclip:before { content: "\e622"; } .icon--drawer:before { content: "\e623"; } .icon--reply:before { content: "\e624"; } .icon--reply-all:before { content: "\e625"; } .icon--forward:before { content: "\e626"; } .icon--users:before { content: "\e627"; } .icon--user-add:before { content: "\e628"; } .icon--vcard:before { content: "\e629"; } .icon--export:before { content: "\e62a"; } .icon--location:before { content: "\e62b"; } .icon--map:before { content: "\e62c"; } .icon--compass:before { content: "\e62d"; } .icon--location2:before { content: "\e62e"; } .icon--target:before { content: "\e62f"; } .icon--share:before { content: "\e630"; } .icon--sharable:before { content: "\e631"; } .icon--thumbsup:before { content: "\e632"; } .icon--thumbsdown:before { content: "\e633"; } .icon--chat:before { content: "\e634"; } .icon--comment:before { content: "\e61a"; } .icon--quote:before { content: "\e635"; } .icon--house:before { content: "\e636"; } .icon--popup:before { content: "\e637"; } .icon--flashlight:before { content: "\e638"; } .icon--printer:before { content: "\e639"; } .icon--bell:before { content: "\e63a"; } .icon--link:before { content: "\e63b"; } .icon--flag:before { content: "\e63c"; } .icon--cog:before { content: "\e63d"; } .icon--tools:before { content: "\e63e"; } .icon--trophy:before { content: "\e63f"; } .icon--tag:before { content: "\e640"; } .icon--camera:before { content: "\e641"; } .icon--megaphone:before { content: "\e642"; } .icon--moon:before { content: "\e643"; } .icon--palette:before { content: "\e644"; } .icon--leaf:before { content: "\e645"; } .icon--music:before { content: "\e646"; } .icon--music2:before { content: "\e647"; } .icon--new:before { content: "\e648"; } .icon--graduation:before { content: "\e649"; } .icon--book:before { content: "\e64a"; } .icon--newspaper:before { content: "\e64b"; } .icon--bag:before { content: "\e64c"; } .icon--airplane:before { content: "\e64d"; } .icon--lifebuoy:before { content: "\e64e"; } .icon--eye:before { content: "\e64f"; } .icon--clock2:before { content: "\e650"; } .icon--microphone:before { content: "\e651"; } .icon--calendar:before { content: "\e652"; } .icon--bolt:before { content: "\e653"; } .icon--thunder:before { content: "\e654"; } .icon--droplet:before { content: "\e655"; } .icon--cd:before { content: "\e656"; } .icon--briefcase:before { content: "\e657"; } .icon--air:before { content: "\e658"; } .icon--hourglass:before { content: "\e659"; } .icon--gauge:before { content: "\e65a"; } .icon--language:before { content: "\e65b"; } .icon--network:before { content: "\e65c"; } .icon--key:before { content: "\e65d"; } .icon--battery:before { content: "\e65e"; } .icon--bucket:before { content: "\e65f"; } .icon--magnet:before { content: "\e660"; } .icon--drive:before { content: "\e661"; } .icon--cup:before { content: "\e662"; } .icon--rocket:before { content: "\e663"; } .icon--brush:before { content: "\e664"; } .icon--suitcase:before { content: "\e665"; } .icon--cone:before { content: "\e666"; } .icon--earth:before { content: "\e667"; } .icon--keyboard:before { content: "\e668"; } .icon--browser:before { content: "\e669"; } .icon--publish:before { content: "\e66a"; } .icon--progress-3:before { content: "\e66b"; } .icon--progress-2:before { content: "\e66c"; } .icon--progress-1:before { content: "\e66d"; } /* for backwards-compatibility @deprecated */ .icon--brogress-1:before { content: "\e66d"; } .icon--progress-0:before { content: "\e66e"; } .icon--sun:before { content: "\e66f"; } .icon--sun2:before { content: "\e670"; } .icon--adjust:before { content: "\e671"; } .icon--code:before { content: "\e672"; } .icon--screen:before { content: "\e673"; } .icon--infinity:before { content: "\e674"; } .icon--light-bulb:before { content: "\e675"; } .icon--creditcard:before { content: "\e676"; } .icon--database:before { content: "\e677"; } .icon--voicemail:before { content: "\e678"; } .icon--clipboard:before { content: "\e679"; } .icon--box:before { content: "\e67a"; } .icon--ticket:before { content: "\e67b"; } .icon--rss:before { content: "\e67c"; } .icon--signal:before { content: "\e67d"; } .icon--thermometer:before { content: "\e67e"; } .icon--droplets:before { content: "\e67f"; } .icon--uniE680:before { content: "\e680"; } .icon--statistics:before { content: "\e681"; } .icon--pie:before { content: "\e682"; } .icon--bars:before { content: "\e683"; } .icon--graph:before { content: "\e684"; } .icon--lock:before { content: "\e685"; } .icon--lock-open:before { content: "\e686"; } .icon--login:before { content: "\e687"; } .icon--minus:before { content: "\e688"; } .icon--plus:before { content: "\e689"; } .icon--cross2:before { content: "\e68a"; } .icon--minus2:before { content: "\e68b"; } .icon--plus2:before { content: "\e68c"; } .icon--cross3:before { content: "\e68d"; } .icon--minus3:before { content: "\e68e"; } .icon--plus3:before { content: "\e68f"; } .icon--erase:before { content: "\e690"; } .icon--blocked:before { content: "\e691"; } .icon--info:before { content: "\e61b"; } .icon--info2:before { content: "\e692"; } .icon--question:before { content: "\e693"; } .icon--help:before { content: "\e694"; } .icon--warning:before { content: "\e695"; } .icon--cycle:before { content: "\e696"; } .icon--cw:before { content: "\e697"; } .icon--ccw:before { content: "\e698"; } .icon--shuffle:before { content: "\e699"; } .icon--arrow:before { content: "\e69a"; } .icon--arrow2:before { content: "\e69b"; } .icon--retweet:before { content: "\e69c"; } .icon--loop:before { content: "\e69d"; } .icon--history:before { content: "\e69e"; } .icon--back:before { content: "\e69f"; } .icon--list2:before { content: "\e6a0"; } .icon--add-to-list:before { content: "\e6a1"; } .icon--layout2:before { content: "\e6a2"; } .icon--list3:before { content: "\e6a3"; } .icon--text:before { content: "\e6a4"; } .icon--text2:before { content: "\e6a5"; } .icon--document:before { content: "\e6a6"; } .icon--docs:before { content: "\e6a7"; } .icon--landscape:before { content: "\e6a8"; } .icon--pictures:before { content: "\e6a9"; } .icon--video:before { content: "\e6aa"; } .icon--music3:before { content: "\e6ab"; } .icon--folder:before { content: "\e6ac"; } .icon--archive:before { content: "\e6ad"; } .icon--trash:before { content: "\e6ae"; } .icon--upload:before { content: "\e6af"; } .icon--download:before { content: "\e6b0"; } .icon--disk:before { content: "\e6b1"; } .icon--install:before { content: "\e61c"; } .icon--cloud:before { content: "\e6b2"; } .icon--upload2:before { content: "\e6b3"; } .icon--bookmark:before { content: "\e6b4"; } .icon--bookmarks:before { content: "\e6b5"; } .icon--book2:before { content: "\e6b6"; } .icon--play:before { content: "\e6b7"; } .icon--pause:before { content: "\e6b8"; } .icon--record:before { content: "\e6b9"; } .icon--stop:before { content: "\e6ba"; } .icon--next:before { content: "\e6bb"; } .icon--previous:before { content: "\e6bc"; } .icon--first:before { content: "\e6bd"; } .icon--last:before { content: "\e6be"; } .icon--resize-enlarge:before { content: "\e6bf"; } .icon--resize-shrink:before { content: "\e6c0"; } .icon--volume:before { content: "\e6c1"; } .icon--sound:before { content: "\e6c2"; } .icon--mute:before { content: "\e6c3"; } .icon--flow-cascade:before { content: "\e6c4"; } .icon--flow-branch:before { content: "\e6c5"; } .icon--flow-tree:before { content: "\e6c6"; } .icon--flow-line:before { content: "\e6c7"; } .icon--flow-parallel:before { content: "\e6c8"; } .icon--arrow-left2:before { content: "\e6c9"; } .icon--arrow-down2:before { content: "\e6ca"; } .icon--arrow-up-upload:before { content: "\e6cb"; } .icon--arrow-right2:before { content: "\e6cc"; } .icon--arrow-left3:before { content: "\e6cd"; } .icon--arrow-down3:before { content: "\e6ce"; } .icon--arrow-up2:before { content: "\e6cf"; } .icon--arrow-right3:before { content: "\e6d0"; } .icon--arrow-left4:before { content: "\e6d1"; } .icon--arrow-down4:before { content: "\e6d2"; } .icon--arrow-up3:before { content: "\e6d3"; } .icon--arrow-right4:before { content: "\e6d4"; } .icon--arrow-left5:before { content: "\e6d5"; } .icon--arrow-down5:before { content: "\e6d6"; } .icon--arrow-up4:before { content: "\e6d7"; } .icon--arrow-right5:before { content: "\e6d8"; } .icon--arrow-left6:before { content: "\e6d9"; } .icon--arrow-down6:before { content: "\e6da"; } .icon--arrow-up5:before { content: "\e6db"; } .icon--arrow-right6:before { content: "\e6dc"; } .icon--menu2:before { content: "\e6dd"; } .icon--ellipsis:before { content: "\e6de"; } .icon--dots:before { content: "\e6df"; } .icon--dot:before { content: "\e6e0"; } .icon--cc:before { content: "\e6e1"; } .icon--cc-by:before { content: "\e6e2"; } .icon--cc-nc:before { content: "\e6e3"; } .icon--cc-nc-eu:before { content: "\e6e4"; } .icon--cc-nc-jp:before { content: "\e6e5"; } .icon--cc-sa:before { content: "\e6e6"; } .icon--cc-nd:before { content: "\e6e7"; } .icon--cc-pd:before { content: "\e6e8"; } .icon--cc-zero:before { content: "\e6e9"; } .icon--cc-share:before { content: "\e6ea"; } .icon--cc-share2:before { content: "\e6eb"; } .icon--danielbruce:before { content: "\e6ec"; } .icon--danielbruce2:before { content: "\e6ed"; } .icon--github:before { content: "\e6ee"; } .icon--github2:before { content: "\e6ef"; } .icon--flickr:before { content: "\e6f0"; } .icon--flickr2:before { content: "\e6f1"; } .icon--vimeo:before { content: "\e6f2"; } .icon--vimeo2:before { content: "\e6f3"; } .icon--twitter:before { content: "\e6f4"; } .icon--twitter2:before { content: "\e6f5"; } .icon--facebook:before { content: "\e6f6"; } .icon--facebook2:before { content: "\e6f7"; } .icon--facebook3:before { content: "\e6f8"; } .icon--googleplus:before { content: "\e6f9"; } .icon--googleplus2:before { content: "\e6fa"; } .icon--pinterest:before { content: "\e6fb"; } .icon--pinterest2:before { content: "\e6fc"; } .icon--tumblr:before { content: "\e6fd"; } .icon--tumblr2:before { content: "\e6fe"; } .icon--linkedin:before { content: "\e6ff"; } .icon--linkedin2:before { content: "\e700"; } .icon--dribbble:before { content: "\e701"; } .icon--dribbble2:before { content: "\e702"; } .icon--stumbleupon:before { content: "\e703"; } .icon--stumbleupon2:before { content: "\e704"; } .icon--lastfm:before { content: "\e705"; } .icon--lastfm2:before { content: "\e706"; } .icon--rdio:before { content: "\e707"; } .icon--rdio2:before { content: "\e708"; } .icon--spotify:before { content: "\e709"; } .icon--spotify2:before { content: "\e70a"; } .icon--qq:before { content: "\e70b"; } .icon--instagram3:before { content: "\e70c"; } .icon--dropbox:before { content: "\e70d"; } .icon--evernote:before { content: "\e70e"; } .icon--flattr:before { content: "\e70f"; } .icon--skype:before { content: "\e710"; } .icon--skype2:before { content: "\e711"; } .icon--renren:before { content: "\e712"; } .icon--sina-weibo:before { content: "\e713"; } .icon--paypal:before { content: "\e714"; } .icon--picasa:before { content: "\e715"; } .icon--soundcloud:before { content: "\e716"; } .icon--mixi:before { content: "\e717"; } .icon--behance:before { content: "\e718"; } .icon--circles:before { content: "\e719"; } .icon--vk:before { content: "\e71a"; } .icon--smashing:before { content: "\e71b"; } .icon--feed:before { content: "\e71f"; } .icon--feed2:before { content: "\e720"; } .icon--instagram:before { content: "\e903"; } .icon--instagram2:before { content: "\e902"; } .icon--xing:before { content: "\e901"; } .icon--xing2:before { content: "\e900"; } .icon--youtube:before { content: "\e905"; } .icon--youtube2:before { content: "\e904"; } /* Navigation list styling ========================================= Defines a global component for navigation lists. Navigation lists can be extended by custom styling declarations. ``` <ul class="navigation--list"> <li class="navigation--entry is--active"> <a class="navigation--link" href=""> List entry </a> </li> <li class="navigation--entry"> <a class="navigation--link" href=""> <span>List entry</span> </a> </li> <li class="navigation--entry"> <a class="navigation--link" href=""> <span>List entry</span> </a> </li> </ul> ``` */ .navigation--list { list-style: none; } /* Off-canvas menu ======================================= The off-canvas menu is the default shopping cart menu in Shopware. It is an expanding menu that displays the shopping cart at the right side of the screen. It can be enabled/disabled inside the Shopware 5 backend. The functionality is provided by the `jquery.off-canvas-menu.js` file. */ .off-canvas { -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 17.5rem; background: #fff; position: fixed; top: 0; bottom: 0; display: none; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 8000; } .off-canvas.is--left { -webkit-transform: translateX(-100%); transform: translateX(-100%); left: 0; } .off-canvas.is--right { -webkit-transform: translateX(100%); transform: translateX(100%); right: 0; } .off-canvas.is--active { display: block; } .off-canvas.is--open { -webkit-transform: translateX(0); transform: translateX(0); } .off-canvas.is--full-screen { width: 100%; } .off-canvas.no--transitions { -webkit-transition: none; transition: none; } .off-canvas .buttons--off-canvas { display: block; } .off-canvas .close--off-canvas { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); display: block; color: #fff; font-weight: 700; cursor: pointer; } .off-canvas .close--off-canvas:after { content: ""; display: table; clear: both; } .off-canvas .close--off-canvas::after { content: ""; display: table; clear: both; } .off-canvas .close--off-canvas .icon--arrow-left { margin: 0rem 0.625rem 0rem 0rem; font-size: 0.6875rem; } .off-canvas .link--go-main { font-size: 1rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 2.625rem; font-weight: 700; display: block; width: 100%; } .off-canvas .link--go-main .icon--menu { font-size: 1.25rem; margin-right: 0.625rem; float: left; } .off-canvas .sidebar--navigation .navigation--link { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; } .off-canvas .sidebar--navigation .navigation--link .is--icon-right { margin-top: 0; } .off-canvas .sidebar--navigation .navigation--link .is--icon-left { margin: 0rem 0.625rem 0rem 0rem; float: left; } .buttons--off-canvas { display: none; } .page-wrap { -webkit-transition: left 400ms cubic-bezier(0.16, 0.04, 0.14, 1); transition: left 400ms cubic-bezier(0.16, 0.04, 0.14, 1); position: relative; left: 0; } .navigation--smartphone .navigation--entry { padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #fff; } .navigation--smartphone .navigation--link { display: block; } .navigation--smartphone .entry--close-off-canvas, #cookie-consent .cookie-consent--header { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); } .navigation--smartphone .entry--close-off-canvas .navigation--link, #cookie-consent .cookie-consent--header { font-size: 0.875rem; color: #969696; font-weight: 700; } .navigation--smartphone .entry--close-off-canvas .navigation--link:after { content: ""; display: table; clear: both; } .navigation--smartphone .entry--close-off-canvas .navigation--link::after { content: ""; display: table; clear: both; } .navigation--smartphone .entry--close-off-canvas .navigation--link:active { color: #646464; } .navigation--smartphone .entry--close-off-canvas .icon--arrow-right, #cookie-consent .cookie-consent--header .icon--arrow-right { margin: 0.75rem 0rem 0rem 0rem; font-size: 0.6875rem; float: right; } .navigation--headline, .sidebar--navigation { margin: 0rem 0.625rem 0rem 0.625rem; } .navigation--headline { margin: 1rem 0.625rem 0.375rem 0.625rem; line-height: 1.625rem; color: #113c62; font-weight: 700; font-size: 1em; } .sidebar--navigation { border-radius: 3px; background-clip: padding-box; background: #fff; border: 1px solid #c8c8c8; } .sidebar--navigation .navigation--entry { border-bottom: 1px solid #c8c8c8; } .sidebar--navigation .navigation--entry:last-child { border-bottom: 0 none; } .sidebar--navigation .navigation--link { color: #113c62; overflow: hidden; text-overflow: ellipsis; } @media screen and (min-width: 48em) { .off-canvas { -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: none; transition: none; display: block; background: transparent; position: relative; width: auto; height: auto; top: 0; left: 0; z-index: 1000; } .off-canvas .sidebar--navigation .navigation--link { padding: 0.625rem 0.625rem 0.625rem 0.625rem; line-height: inherit; } .off-canvas .account--menu .navigation--link { padding: 0.3125rem 0rem 0.3125rem 0rem; line-height: inherit; } .sidebar-main .entry--close-off-canvas { display: none; } .sidebar-main .icon--arrow-right, .sidebar-main .icon--arrow-left { display: none; } } /* Panels =================================================================== ######Basic panel component for boxes and bordered containers. The panel can be used with different content structures. Styling options: `has--border` and `has--shadow` ``` <div class="panel"> <div class="panel--body"> Basic panel element </div> </div> <div class="panel has--border"> <div class="panel--body"> Basic panel with border </div> </div> ``` */ .panel { display: block; background: #e8f1f6; } .panel.has--shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } .panel.has--border { border: 1px solid #c8c8c8; } /* <h6>A header box for a panel.</h6> <p>Can be used by adding the `panel--header`-element and `primary` or `secondary` classes.</p> ``` <div class="panel"> <div class="panel--header primary">Panel header primary</div> <div class="panel--header secondary">Panel header secondary</div> <div class="panel--body"> Panel body </div> </div> ``` */ .panel--header { padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 0.875rem; background: #969696; display: block; margin: 0; font-weight: 700; color: #113c62; border-bottom: 1px solid #c8c8c8; } .panel--header.secondary { color: #113c62; background: #fff; } .panel--header.primary { color: #113c62; background: #fff; } /* <h6>A title heading for a panel.</h6> <p>The `panel--title` can be used as an alternative to the `panel--header` element.</p> <p>When using the `panel--title` element, make sure that the `panel--body` element has the class `is--wide` assigned in order to work properly. Also the `is--underline` class was added here. ``` <div class="panel"> <h3 class="panel--title is--underline">Panel title</h3> <div class="panel--body is--wide"> Panel body </div> </div> ``` */ .panel--title { padding: 1.25rem 0rem 0rem 0rem; margin: 0rem 1.25rem 0rem 1.25rem; font-size: 1rem; display: block; font-weight: 700; color: #113c62; } .panel--title.is--underline { padding: 1.25rem 0rem 0.625rem 0rem; border-bottom: 1px solid #c8c8c8; text-decoration: none !important; } .panel--title.is--secondary { color: #113c62; } .panel--title.is--primary { color: #113c62; } /* <h6>The content body for a panel</h6> <p>Styling options: `is--slim`, `is--wide`, `is--flat`, `is--embossed`.</p> ``` <div class="panel"> <div class="panel--body is--wide">Panel content ...</div> </div> ``` */ .panel--body { padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 0.875rem; line-height: 1.5rem; display: block; position: relative; } .panel--body.has--border { border: 1px solid #c8c8c8; } .panel--body.is--slim { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } .panel--body.is--wide { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .panel--body.is--flat { background: #646464; } .panel--body.is--embossed { box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); background: #646464; } /* ######A container for action elements ``` <div class="panel--actions"> <a href="" class="btn">Action Link</a> <a href="" class="btn">Action Link</a> </div> ``` */ .panel--actions { padding: 0.625rem 0.625rem 0.625rem 0.625rem; line-height: 2.5rem; display: block; } .panel--actions.has--border { margin: 0.625rem 0rem 0rem 0rem; padding: 0.625rem 0rem 0rem 0rem; border-top: 1px solid #c8c8c8; } .panel--actions.is--slim { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } .panel--actions.is--wide { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .panel--actions .btn { margin: 0rem 0.375rem 0rem 0rem; } /* ######A table inside a panel. ``` <div class="panel panel--table"> <div class="panel--tr"> <div class="panel--th">Column 1</div> <div class="panel--th">Column 2</div> <div class="panel--th">Column 3</div> </div> <div class="panel--tr"> <div class="panel--td">Value 1</div> <div class="panel--td">Value 2</div> <div class="panel--td">Value 3</div> </div> </div> ``` */ .panel--table { width: 100%; display: block; border-collapse: collapse; border-spacing: 0; empty-cells: show; } .panel--table:after { content: ""; display: table; clear: both; } .panel--table::after { content: ""; display: table; clear: both; } .panel--table.has--border { border: 1px solid #c8c8c8; } .panel--tr { display: block; width: 100%; border-width: 0 0 1px 0; border-style: solid; border-color: #c8c8c8; } .panel--tr:after { content: ""; display: table; clear: both; } .panel--tr::after { content: ""; display: table; clear: both; } .panel--tr:last-child { border-width: 0; } .panel--tr.is--odd { background: #d9e8f0; } .panel--tr.is--secondary { background: #d9e8f0; } .panel--tr.is--primary { color: #113c62; } .panel--th, .panel--td { padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 0.875rem; line-height: 1.5rem; display: inline-block; float: left; } .panel--th:after, .panel--td:after { content: ""; display: table; clear: both; } .panel--th::after, .panel--td::after { content: ""; display: table; clear: both; } .panel--th.has--border, .panel--td.has--border { border-width: 0 1px 0 0; border-style: solid; border-color: #c8c8c8; } .panel--th.has--border:last-child, .panel--td.has--border:last-child { border-width: 0; } .panel--th p, .panel--td p { margin: 0; } .panel--th { font-weight: 700; color: #113c62; } /* ######A small dot navigation for example for a slider panel. ``` <div class="panel--dot-nav"> <a href=""></a> <a href="" class="is--active"></a> <a href=""></a> </div> ``` */ .panel--dot-nav { height: 0.6875rem; position: relative; } .panel--dot-nav .dot--link, .panel--dot-nav a { border-radius: 11px; background-clip: padding-box; margin: 0rem 0.3125rem 0rem 0.3125rem; width: 0.6875rem; height: 0.6875rem; display: inline-block; border: 1px solid #c8c8c8; } .panel--dot-nav .dot--link.is--active, .panel--dot-nav a.is--active { border-color: #113c62; background: #113c62; } /* ######A paging navigation for pagination content. ``` <div class="panel--paging"> <a href=""><i class="icon--arrow-left"></i></a> <a href="">1</a> <a href="">2</a> <a href="">...</a> <a href=""><i class="icon--arrow-right"></i></a> </div> ``` */ .panel--paging { line-height: 2rem; display: inline-block; } .panel--paging .paging--link { padding: 0rem 0.625rem 0rem 0.625rem; margin: 0rem 0.0625rem 0rem 0.0625rem; font-size: 0.875rem; line-height: 1.875rem; border-radius: 3px; background-clip: padding-box; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); display: inline-block; font-weight: 500; text-align: center; border: 1px solid #c8c8c8; color: #113c62; } .panel--paging .paging--link [class^="icon--"] { font-size: 0.625rem; } .panel--paging .paging--link.is--active, .panel--paging .paging--link.is--active:hover { line-height: 2rem; background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); color: #ffffff; border: 0 none; font-weight: 700; cursor: default; } .panel--paging .paging--link:hover { background: #ffffff; color: #113c62; border-color: #113c62; } /* Form ============================ Contains the general layout and styling for the Shopware form elements and fieldsets. The fieldset padding size is defined with the unitize mixin. ``` <fieldset> <form> <table> <tr> <td>Table cell</td> </tr> <tr> <td>Table cell</td> </tr> <tr> <td>Table cell</td> </tr> <table> <form> </fieldset> ``` */ form, #paypal-acdc-form { display: block; } form table { width: 100%; } form table td { padding: 10px; } fieldset { padding: 0.625rem 0.625rem 0.625rem 0.625rem; border: 1px solid #c8c8c8; } /* Alerts =================================================================== ######Displays an alert box for status messages to the user. Alerts always have to have the `.alert` class assigned, and in addition one of four color schemes. Options: `is--success`, `is--info`, `is--warning`, `is--error`. ``` <p class="alert is--success">Success message</p> <p class="alert is--info">Info message</p> <p class="alert is--warning">Warning message</p> <p class="alert is--error">Error message</p> ``` */ .alert { font-size: 0.875rem; line-height: 1.5rem; position: relative; overflow: hidden; /* ######With an Icon inside of the box.</h6> ``` <div class="alert is--success is--rounded"> <div class="alert--icon"> <i class="icon--element icon--check"></i> </div> <div class="alert--content"> Success message with Icon </div> </div> <div class="alert is--warning is--rounded"> <div class="alert--icon"> <i class="icon--element icon--warning"></i> </div> <div class="alert--content"> Warning message with Icon </div> </div> ``` */ } .alert:after { content: ""; display: table; clear: both; } .alert::after { content: ""; display: table; clear: both; } .alert.is--success { color: #208e4e; background: #def2e7; } .alert.is--success .alert--icon { background: #2ecc71; } .alert.is--info { color: #217dbb; background: #e9f2f8; } .alert.is--info .alert--icon { background: #4aa3df; } .alert.is--warning { color: #ae8e0a; background: #fbf5db; } .alert.is--warning .alert--icon { background: #f1c40f; } .alert.is--error { color: #e74c3c; background: #faeceb; } .alert.is--error .alert--icon { background: #e74c3c; } .alert.no--cookies { position: fixed; z-index: 99999; top: 0; left: 0; right: 0; } .alert.no--cookies a.close--alert { float: right; } .alert.no--cookies a.close--alert:hover { cursor: pointer; text-decoration: underline; } .alert .alert--close { position: absolute; top: 1.0625rem; right: 1.25rem; font-size: 0.625rem; color: #113c62; cursor: pointer; } .alert .icon--element { position: absolute; top: 50%; left: 0; width: 15%; margin-top: -9px; } .alert .alert--icon, .alert .alert--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; float: left; } .alert .alert--icon p, .alert .alert--content p { margin-bottom: 0rem; } .alert .alert--icon { font-size: 1.125rem; line-height: 1.625rem; width: 15%; text-align: center; font-weight: 700; color: #fff; padding-bottom: 9999em; margin-bottom: -9999em; } .alert .alert--content { width: 85%; } .alert .alert--content.is--strong { font-weight: 700; } .alert .alert--list { list-style: none; } .alert .list--entry { display: block; } .container--ajax-cart:not(.off-canvas) .alert { margin: 0.625rem; } .container--ajax-cart .alert .alert--close { right: 0.9375rem; } .container--ajax-cart .alert .alert--content { padding: 0.625rem 1.25rem 0.625rem 1.25rem; } @media screen and (min-width: 48em) { .alert .alert--icon, .alert .icon--element { width: 8%; } .alert .alert--content { width: 92%; } } /* Counter Badges ========================================== ######Creates a badge to display counts. The `span` can be modified with 3 different color schemes. Options: `is--primary`, `is--secondary`, `is--minimal` ``` <p><span class="badge is--primary">1</span> Primary Badge</p> <p><span class="badge is--secondary">2</span> Secondary Badge</p> <p><span class="badge is--minimal">3</span> Minimal Badge</p> ``` */ .badge { padding: 0rem 0.3125rem 0rem 0.3125rem; margin: 0rem 0.3125rem 0rem 0.3125rem; height: 1.25rem; min-width: 0.625rem; line-height: 1.25rem; font-size: 0.75rem; border-radius: 50px; background-clip: padding-box; box-sizing: content-box; display: inline-block; white-space: nowrap; z-index: 500; font-weight: 700; text-align: center; background: #fff; color: #113c62; border: 1px solid #c8c8c8; } .badge.is--primary { background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); color: #fff; border-color: #fff; } .badge.is--secondary { background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); color: #fff; border-color: #fff; } .badge.is--minimal { border: 0 none; } /* Labels =================================================================== ######Creates a label for displaying a status. To work properly the `span`-element needs the general `label`-class and a color scheme option: Options: `success`, `info`, `warning`, `error`. ``` <span class="label success">Success!</span> <span class="label info">Info!</span> <span class="label warning">Warning!</span> <span class="label error">Error!</span> ``` */ .label { padding: 0.1875rem 0.5rem 0.1875rem 0.5rem; margin: 0rem 0.3125rem 0rem 0.3125rem; font-size: 0.875rem; line-height: 1.125rem; border-radius: 3px; background-clip: padding-box; display: inline-block; text-align: center; white-space: nowrap; color: #113c62; background: #113c62; } .label.success { background: #2ecc71; } .label.info { background: #4aa3df; } .label.warning { background: #f1c40f; } .label.error { background: #e74c3c; } /* Collapse Box ================================================ A collapse box for panels and text elements. Displays a folding box that responds if the content does not fit the element. ``` <div class="collapse--header"> Collapse box title <span class="collapse--toggler"> </span> </div> <div class="collapse--content is--collapsed"> This content will be shown by the is--collapsed class. </div> <div class="collapse--header"> Collapse box title <span class="collapse--toggler"> </span> </div> <div class="collapse--content"> Lorem ipsum dolor </div> <div class="collapse--header"> Collapse box title <span class="collapse--toggler"> </span> </div> <div class="collapse--content"> Lorem ipsum dolor </div> ``` */ .collapse--header { padding: 0.625rem 1.25rem 0.625rem 1.25rem; margin: 0.625rem 0rem 0rem 0rem; font-size: 1rem; line-height: 1rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); border-radius: 3px; background-clip: padding-box; box-shadow: 0 1px 1px 0 rgba(236, 238, 241, 0.8); display: block; position: relative; z-index: 1100; border: 1px solid #c8c8c8; cursor: pointer; } .collapse--header .collapse--toggler { height: 1rem; top: 0.625rem; right: 1.25rem; font-size: 0.375rem; line-height: 1rem; position: absolute; font-weight: 500; font-family: 'shopware'; } .collapse--header .collapse--toggler:before { content: "\e612"; } .collapse--header:hover { color: #113c62; } .collapse--header.is--active { background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); box-shadow: 0 1px 3px 0 rgba(95, 114, 133, 0.5); color: #fff; font-weight: 700; border-width: 0 0 1px 0; border-style: solid; border-color: #a2a2a2; z-index: 1300; } .collapse--header.is--active .collapse--toggler:before { content: "\e610"; } .collapse--content { padding: 0.3125rem 0rem 0rem 0rem; top: -0.3125rem; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-clip: padding-box; box-shadow: 0 1px 1px 0 rgba(236, 238, 241, 0.8); display: none; position: relative; z-index: 1000; background: #fff; border-width: 0 1px 1px 1px; border-style: solid; border-color: #c8c8c8; } .collapse--content.is--collapsed { display: block; z-index: 1200; } .js--collapse-target { display: none; } .js--collapse-target.is--collapsed { display: block; } /* Product Slider =================================================== ######Shopware Product slider element The Shopware product slider element displays a selection of articles the user chooses inside a slim slider element. The product slider uses the product box component for displaying and sliding articles. The slider has `is--vertical` and `is-horizontal` properties to set the layout of the element. For initializing a product slider the outer `product-slider` wrapper has to have the attribute `data-product-slider="true"`. ``` <div class="product-slider" data-product-slider="true"> <a class="product-slider--arrow arrow--next is--horizontal"></a> <a class="product-slider--arrow arrow--prev is--horizontal"></a> <div class="product-slider--container is--horizontal"> <div class="product-slider--item"> <!-- Product box will be placed here. --> </div> </div> </div> ``` */ .product-slider { display: block; padding: 0; position: relative; top: 0; left: 0; } .product-slider--container { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; width: 100%; height: 100%; font-size: 0; position: relative; top: 0; left: 0; overflow: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; } .product-slider--container:after { content: ""; display: table; clear: both; } .product-slider--container::after { content: ""; display: table; clear: both; } .product-slider--container::-webkit-scrollbar { width: 0; height: 0; } .product-slider--container.is--vertical { overflow-y: scroll; overflow-x: hidden; white-space: normal; } .product-slider--container.is--vertical .product-slider--item { display: block; width: 100%; } .product-slider--container.is--horizontal { overflow-y: hidden; overflow-x: scroll; white-space: nowrap; } .product-slider--container.is--horizontal .product-slider--item { height: 100%; display: inline-block; } .is--ie .product-slider--container, .is--firefox .product-slider--container, .product-slider--container.is--no-scroll { overflow-y: hidden; overflow-x: hidden; } .product-slider--item { padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem; font-size: 1rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; top: 0; left: 0; overflow: hidden; text-align: center; width: 100%; display: inline-block; } .product-slider--arrow { width: 1.875rem; height: 3.75rem; margin: -1.875rem 0rem 0rem 0rem; line-height: 3.75rem; font-size: 0.75rem; border-radius: 3px; background-clip: padding-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.5); display: block; position: absolute; top: 50%; z-index: 750; font-family: 'shopware'; text-align: center; color: #113c62; border: 1px solid #c8c8c8; cursor: pointer; } .product-slider--arrow.arrow--prev { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; left: 0; } .product-slider--arrow.arrow--prev:before, .product-slider--arrow.arrow--prev::before { content: "\e611"; } .product-slider--arrow.arrow--next { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; right: 0; } .product-slider--arrow.arrow--next:before { content: "\e60f"; } .product-slider--arrow:hover { color: #113c62; border-color: #113c62; background: rgba(255, 255, 255, 0.8); } .product-slider--arrow.is--vertical { width: 3.75rem; height: 1.875rem; margin: 0rem 0rem 0rem -1.875rem; line-height: 1.875rem; font-size: 0.375rem; left: 50%; top: auto; } .product-slider--arrow.is--vertical.arrow--prev { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-clip: padding-box; top: 0; } .product-slider--arrow.is--vertical.arrow--prev:before, .product-slider--arrow.is--vertical.arrow--prev::before { content: "\e610"; } .product-slider--arrow.is--vertical.arrow--next { bottom: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; } .product-slider--arrow.is--vertical.arrow--next:before { content: "\e612"; } @media screen and (min-width: 30em) { .product-slider--item { width: 50%; } } @media screen and (min-width: 48em) { .product-slider--item { width: 33.33%; } } @media screen and (min-width: 64em) { .product-slider--item { width: 25%; } } @media screen and (min-width: 78.75em) { .product-slider--container.is--horizontal, .product-slider--container.is--vertical { overflow: hidden; } } /* Modalbox ============================================== Creates a transitioned fixed modalbox overlay that displays above all other elements. The `sizing--content` class lets the modal window get its height from the inner content. The inline styles are generated by the `jquery.modal.js` file. ``` <div class="js--modal sizing--content" style="width: 600px; height: auto; display: block; opacity: 1;"> <div class="header"> <div class="title">This is the header</div> </div> <div class="content"> This is the content </div> <div class="btn icon--cross is--small btn--grey modal--close"> </div> </div> <div class="js--overlay" style="opacity: 0.8; display: block; cursor: pointer;"></div> ``` */ .js--modal { -webkit-transition: all 0.5s; transition: all 0.5s; box-shadow: 0px 0px 0px 7px rgba(0, 0, 0, 0.25); box-sizing: content-box; opacity: 0; position: fixed; right: 0; left: 0; top: 0; bottom: 0; margin: auto; background: padding-box #ffffff; max-height: 100%; max-width: 100%; z-index: 7000; overflow-x: hidden; overflow-y: auto; } .js--modal .header { padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 2.625rem; border-bottom: 1px solid #c8c8c8; } .js--modal .header .title { font-size: 1rem; font-weight: 700; } .js--modal .modal--close { height: 1.875rem; width: 1.875rem; line-height: 1.875rem; font-size: 0.625rem; right: 0.625rem; top: 0.4375rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; text-align: center; position: absolute; } .js--modal .content { width: 100%; height: 100%; position: relative; overflow: auto; -webkit-overflow-scrolling: touch; } .js--modal .content .content--iframe { padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 100%; height: 100%; border: 0 none; display: block; } .js--modal.sizing--auto.is--fullscreen { height: 100% !important; width: 100% !important; } .js--modal.sizing--fixed { max-height: none !important; max-width: none !important; } .js--modal.sizing--content { position: fixed; bottom: auto; top: auto; height: auto; } .js--modal.no--header .header { display: none; } .js--modal.no--border-radius { border-radius: 0; } @media screen and (min-width: 48em) { .js--modal { border-radius: 3px; background-clip: padding-box; } } /* Loading indicator ============================================= Displays a spinning circle to indicate a loading status. Can be imported by using the `i` tag with the `icon--loading-indicator` class. `<i class="icon--loading-indicator"></i>` The functionality is provided by the `jquery.loading-indicator.js` file. */ .js--is-loading { position: relative; } .js--loading-indicator { position: absolute; display: none; z-index: 6000; top: 50%; left: 50%; } body > .js--loading-indicator { position: fixed; } .js--loading-indicator.indicator--relative { width: 1.875rem; height: 1.875rem; padding-top: 3.125rem; padding-bottom: 3.125rem; background: none; position: relative; display: block; left: 50%; top: auto; border: 0 none; } .js--loading-indicator.indicator--absolute { width: 1.875rem; height: 1.875rem; padding-top: 3.125rem; padding-bottom: 3.125rem; background: none; position: relative; display: block; left: 50%; top: auto; border: 0 none; position: absolute; padding: 0; top: 50%; } .js--loading-indicator.indicator--absolute.js--loading-indicator { margin: -0.9375rem 0rem 0rem -0.9375rem; } .has--cssanimations .js--loading-indicator { margin: -0.8125rem 0rem 0rem -0.8125rem; } .has--cssanimations .js--loading-indicator div[class^="icon--"] { width: 1.625rem; height: 1.625rem; display: block; } .has--cssanimations .js--loading-indicator .icon--default:before, .has--cssanimations .js--loading-indicator .icon--default::before { width: 1.375rem; height: 1.375rem; border-radius: 100%; background-clip: padding-box; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; display: block; content: ""; border: 2px solid #c8c8c8; border-top: 2px solid #888888; } .has--no-cssanimations .js--loading-indicator { margin: -0.8125rem 0rem 0rem -0.8125rem; } .has--no-cssanimations .js--loading-indicator div[class^="icon--"] { width: 1rem; height: 1rem; display: block; background-repeat: no-repeat; background-size: 100% 100%; } .has--no-cssanimations .js--loading-indicator .icon--default { height: 1rem; width: 1rem; background-image: url('../../themes/Frontend/Responsive/frontend/_public/src/img/icons/loading-indicator.gif?02f1aab01cb0fcc34420d09bb0d4b382'); } /* Overlay ================================================ Creates a fixed full-screen overlay. The `js--overlay` element is used when a modal window is shown. The `js--overlay` element is empty while the html of the modal box will be created just before the closing body-tag. The opacity of the full-screen overlay can be modified with javascript. The functionality is provided by the `jquery.overlay.js` file. ``` <div class="js--overlay" style="opacity: 0.8; display: block; cursor: pointer;"></div> ``` default color:`#000000` default opacity (alpha):`0.7` */ .js--overlay-relative { position: relative; } .js--overlay { -webkit-transition: opacity 0.45s cubic-bezier(.3,0,.15,1), visibility 0.45s linear; transition: opacity 0.45s cubic-bezier(.3,0,.15,1), visibility 0.45s linear; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0.01; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 5000; visibility: hidden; } .js--overlay.theme--dark { background: rgba(0, 0, 0, 0.7); } .js--overlay.theme--light { background: rgba(255, 255, 255, 0.7); } .js--overlay.is--open { -webkit-transition-delay: 0; transition-delay: 0; opacity: 1; visibility: visible; } .js--overlay.is--closable { cursor: pointer; } body > .js--overlay { position: fixed; } /* Language Flags ================================================== Displays a country flag the size of 14px x 11px used for language selections purposes. inspired by: https://github.com/dhanishgajjar/css-flags en_GB: we need to use svg for en_GB, cause it's smaller than the CSS-Version */ .language--flag { height: 0.6875rem; width: 0.875rem; display: inline-block; text-indent: 100%; white-space: nowrap; overflow: hidden; } .language--flag.de_DE { background-position: 0 0; background-image: linear-gradient(to bottom, #000000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%); } .language--flag.en_GB { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='640' height='480'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M-85 0h682v512H-85z'%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path='url%28%23a%29' transform='translate%2880%29 scale%28.94%29'%3E%3Cpath fill='%23006' d='M-256 0H768v512H-256z'%2F%3E%3Cpath fill='%23fff' d='M-256 0v57l910 455h114v-57L-141 0h-115zM768 0v57l-909 455h-115v-57L654 0h114z'%2F%3E%3Cpath fill='%23fff' d='M171 0v512h170V0H171zm-427 171v170H768V171H-256z'%2F%3E%3Cpath fill='%23c00' d='M-256 205v102H768V205H-256zM205 0v512h102V0H205zm-461 512L85 341h77l-342 171h-76zm0-512L85 171H9L-256 38V0zm606 171L692 0h76L427 171h-77zm418 341L427 341h76l265 133v38z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .language--flag.nl_NL { background-position: 0 0; background-image: linear-gradient(to bottom, #dd0000 33%, #ffffff 33%, #ffffff 66%, #21468b 66%); } .language--flag.fr_FR { background-position: 0 0; background-image: linear-gradient(to right, #21468b 33%, #ffffff 33%, #ffffff 66%, #dd0000 66%); } .language--flag.es_ES { background-position: 0 0; background-image: linear-gradient(#dd0000 25%, #ffce00 25%, #ffce00 75%, #dd0000 75%); } .language--flag.it_IT { background-position: 0 0; background-image: linear-gradient(to right, #009246 33%, #ffffff 33%, #ffffff 66%, #dd0000 66%); } /* Tagcloud ============================================= The tagcloud element shows recent keywords inside a box, ordered in importance by font-size. ``` <div class="panel has--border tagcloud--content"> <div class="panel--body is--wide tagcloud"> <a href="#" title="tagcloud-item" class="tag0">Tagcloud-Item</a> <a href="#" title="tagcloud-item" class="tag1">Tagcloud-Item</a> <a href="#" title="tagcloud-item" class="tag2">Tagcloud-Item</a> <a href="#" title="tagcloud-item" class="tag3">Tagcloud-Item</a> </div> </div> ``` */ .tagcloud a { color: #113c62; margin: 0rem 0.625rem 0rem 0rem; } .tagcloud a:hover { color: #113c62; } .tagcloud .tag0 { font-size: 1.3125rem; line-height: 1.3125rem; } .tagcloud .tag1 { font-size: 1rem; line-height: 1rem; font-weight: 700; } .tagcloud .tag2 { font-size: 0.875rem; line-height: 0.875rem; } .tagcloud .tag3 { font-size: 0.75rem; line-height: 0.75rem; font-weight: 700; } /* Last-seen products element ======================================================= The Last-seen products element fetches the recently viewed articles of the user and displays them inside a slider-element. The slider contains a title element and a product box with the article-image and price. */ .last-seen-products { margin: 0.625rem 0rem 0rem 0rem; clear: both; } .last-seen-products:after { content: ""; display: table; clear: both; } .last-seen-products::after { content: ""; display: table; clear: both; } .last-seen-products .last-seen-products--title { padding: 0.625rem 0rem 0.625rem 0rem; border-bottom: 1px solid #c8c8c8; font-size: 1rem; display: block; font-weight: 700; color: #113c62; } .last-seen-products--slider { border-radius: 3px; background-clip: padding-box; height: auto; } .last-seen-products--slider .product--box .product--title { text-align: center; margin: 0; padding: 0; } .last-seen-products--slider, .last-seen-products--container { position: relative; overflow: hidden; } .last-seen-products--container { padding: 0.625rem 0rem 0.625rem 0rem; } .last-seen-products-item--image { line-height: 7.5rem; display: block; } .last-seen-products--item { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } @media screen and (min-width: 48em) { .last-seen-products { margin: 1.875rem 0rem 0rem 0rem; } } /* Lightbox ========================================= Defines the properties for the lightbox container and image elements. The lightbox creates a fullscreen overlay to preview product images. Both components are required in order to make the element work properly. */ .lightbox--container { display: block; width: 100%; height: 100%; background: #FFFFFF; position: relative; } .lightbox--image { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; vertical-align: middle; } /* Lists =============================== Example of the default styling for an unordered list. The `ul` element has to have the `list--unordered` class assigned in order to work properly. In addition there are 8 list style types Shopware 5 provides that you can choose from. **Example:**<br/> `<ul class="list--unordered is--checked">` ``` <ul class="list--unordered"> <li>Default list</li> </ul> <ul class="list--unordered is--checked"> <li>is--checked</li> </ul> <ul class="list--unordered is--disc"> <li>is--disc</li> </ul> <ul class="list--unordered is--arrow-right"> <li>is--arrow-right</li> </ul> <ul class="list--unordered is--star"> <li>is--star</li> </ul> <ul class="list--unordered is--cross"> <li>is--cross</li> </ul> <ul class="list--unordered is--tag"> <li>is--tag</li> </ul> <ul class="list--unordered is--plus"> <li>is--plus</li> </ul> ``` */ .list--unordered { padding-left: 1.25rem; list-style-type: none; } .list--unordered li { position: relative; line-height: 1.5rem; } .list--unordered li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e6b9"; position: absolute; top: 0; } .list--unordered.is--disc li { position: relative; } .list--unordered.is--disc li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e656"; position: absolute; top: 0; } .list--unordered.is--checked li { position: relative; } .list--unordered.is--checked li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e60c"; position: absolute; top: 0; } .list--unordered.is--arrow-right li { position: relative; } .list--unordered.is--arrow-right li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e60f"; position: absolute; top: 0; } .list--unordered.is--star li { position: relative; } .list--unordered.is--star li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e600"; position: absolute; top: 0; } .list--unordered.is--cross li { position: relative; } .list--unordered.is--cross li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e60d"; position: absolute; top: 0; } .list--unordered.is--tag li { position: relative; } .list--unordered.is--tag li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e640"; position: absolute; top: 0; } .list--unordered.is--plus li { position: relative; } .list--unordered.is--plus li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e689"; position: absolute; top: 0; } .list--unstyled { list-style: none; } .list--inline { list-style: none; } .list--inline li { display: inline; } /* Image slider element ============================================ Defines the styles for the image slider element that is a part of the basic Shopware 5 shopping world elements. The element can be added by using the Shopware 5 backend shopping world editor. The element contains thumbnail image previews, navigation dots and navigation arrows to change the current active image. It contains the viewport specific styles inside media queries. */ .image-slider { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; z-index: 1000; position: relative; } .image-slider:after { content: ""; display: table; clear: both; } .image-slider::after { content: ""; display: table; clear: both; } .force--3d { backface-visibility: hidden; } .image-slider--container { height: 12.5rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; position: relative; top: 0; left: 0; overflow: hidden; } .image-slider--container .arrow { width: 1.875rem; height: 4.375rem; margin-top: -2.1875rem; line-height: 4.25rem; font-size: 1rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5); position: absolute; top: 50%; z-index: 1000; font-family: 'shopware'; text-align: center; color: #113c62; cursor: pointer; display: none; } .image-slider--container .arrow.is--left { left: 0rem; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; } .image-slider--container .arrow.is--left:before, .image-slider--container .arrow.is--left::before { content: "\e611"; } .image-slider--container .arrow.is--right { right: 0rem; border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; } .image-slider--container .arrow.is--right:before { content: "\e60f"; } .image-slider--container .arrow:hover { color: #113c62; border-color: rgba(17, 60, 98, 0.5); } .image-slider--container.is--dragging .image-slider--item { cursor: move; } .image-slider--slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; height: 100%; position: relative; top: 0; left: 0; white-space: nowrap; font-size: 0; -ms-touch-action: pan-y; } .image-slider--slide:after { content: ""; display: table; clear: both; } .image-slider--slide::after { content: ""; display: table; clear: both; } .image-slider--item { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: inline-block; height: 100%; width: 100%; position: relative; text-align: center; cursor: pointer; } .image-slider--item .image--element { display: inline-block; max-width: 100%; height: 100%; } .image-slider--item .image--media { margin: 0 auto; text-align: center; } .image-slider--item .image--media.image--svg img { height: 100%; } .image-slider--dots { padding: 0.625rem 0rem 0.625rem 0rem; text-align: center; } .image-slider--thumbnails { height: 4.375rem; top: 27.5rem; display: none; width: 100%; overflow: hidden; white-space: nowrap; position: absolute; left: 0; } .image-slider--thumbnails .image-slider--thumbnails-slide { position: absolute; top: 0; left: 0; } .image-slider--thumbnails .thumbnail--link { width: 4.375rem; height: 4.375rem; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; margin: 0rem 0.625rem 0rem 0rem; line-height: 3.5625rem; border-radius: 3px; background-clip: padding-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: inline-block; text-align: center; border: 1px solid #c8c8c8; } .image-slider--thumbnails .thumbnail--link.is--active { border-color: #113c62; } .image-slider--thumbnails .thumbnail--image { display: inline; vertical-align: middle; } .image-slider--thumbnails .thumbnails--arrow { width: 1.25rem; height: 4.375rem; line-height: 4.375rem; font-size: 0.875rem; border-radius: 3px; background-clip: padding-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); display: none; position: absolute; z-index: 1000; font-family: 'shopware'; text-align: center; color: #113c62; border: 1px solid rgba(255, 255, 255, 0.85); cursor: pointer; background: rgba(255, 255, 255, 0.85); } .image-slider--thumbnails .thumbnails--arrow:hover { color: #113c62; border-color: rgba(17, 60, 98, 0.85); } .image-slider--thumbnails .thumbnails--arrow.is--top, .image-slider--thumbnails .thumbnails--arrow.is--bottom { font-size: 0.5rem; width: 4.375rem; height: 1.5rem; padding: 0.125rem 0rem 0rem 0rem; line-height: 1.125rem; left: 0; } .image-slider--thumbnails .thumbnails--arrow.is--top { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-clip: padding-box; top: 0; } .image-slider--thumbnails .thumbnails--arrow.is--top::before { content: "\e610"; } .image-slider--thumbnails .thumbnails--arrow.is--bottom { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; bottom: 0; } .image-slider--thumbnails .thumbnails--arrow.is--bottom::before { content: "\e612"; } .image-slider--thumbnails .thumbnails--arrow.is--left { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; width: 1.5rem; top: 0; left: 0; } .image-slider--thumbnails .thumbnails--arrow.is--left::before { content: "\e611"; } .image-slider--thumbnails .thumbnails--arrow.is--right { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; width: 1.5rem; top: 0; right: 0; } .image-slider--thumbnails .thumbnails--arrow.is--right::before { content: "\e60f"; } .image-slider--thumbnails .thumbnails--arrow.is--active { display: block; } @media screen and (min-width: 48em) { .image-slider--container { height: 25rem; } .image-slider--container .arrow { display: block; } } @media screen and (min-width: 64em) { .image-slider--thumbnails { display: block; } .image-slider--container { height: 25rem; margin-bottom: 6.875rem; } .image-slider--container.no--thumbnails { margin-bottom: 0; } .image-slider--container.no--image .image-slider--item { cursor: default; } .image-slider--dots { top: 25.3125rem; position: absolute; width: 100%; } } @media screen and (min-width: 78.75em) { .image-slider--container { height: 26.875rem; margin-bottom: 0; } .image-slider--thumbnails { width: 4.375rem; height: 26.875rem; margin: 0rem 1.25rem 0rem 0rem; position: relative; top: 0; left: 0; float: left; } .image-slider--thumbnails .thumbnail--link { margin: 0rem 0rem 1.25rem 0rem; display: block; } .image-slider--dots { padding: 0.625rem 0rem 0.625rem 5.625rem; position: relative; top: auto; display: block; } } /* Image-zoom ==================================================== Defines the styles for the Shopware 5 image-zoom element. It displays a magnifying glass when hovering the article images on the product detail page. The functionality is provided by the `jquery.image-zoom.js` file. */ .js--img-zoom--container { position: relative; top: 0; left: 0; } .js--img-zoom--lens { border-radius: 3px; background-clip: padding-box; display: none; background: rgba(255, 255, 255, 0.4); border: 1px solid #c8c8c8; position: absolute; top: 0; left: 0; cursor: pointer; } .js--img-zoom--flyout { width: 28.75rem; height: 21.25rem; right: -30.625rem; border-radius: 3px; background-clip: padding-box; display: none; position: absolute; top: 0; z-index: 2500; overflow: hidden; background: #FFFFFF; border: 1px solid #c8c8c8; } .js--img-zoom--title { padding: 0.3125rem 1.25rem 0.3125rem 1.25rem; font-size: 0.875rem; line-height: 1rem; background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); color: #fff; font-weight: 700; text-align: center; background: rgba(0, 0, 0, 0.5); } /* Menu scroller ================================== Some styling rules can also be found in the hacks.less! */ .js--menu-scroller { position: relative; } .navigation--list-wrapper { position: relative; overflow: hidden; } .js--menu-scroller--list { max-width: none; overflow-x: scroll; position: relative; white-space: nowrap; left: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .js--menu-scroller--list::-webkit-scrollbar { display: none; } .js--menu-scroller--arrow { width: 1.375rem; height: 2.3125rem; line-height: 2.25rem; font-size: 0.75rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); top: 0.0625rem; border: 1px solid #c8c8c8; position: absolute; font-family: 'shopware'; text-align: center; color: #113c62; cursor: pointer; z-index: 750; display: none; } .js--menu-scroller--arrow:hover, .js--menu-scroller--arrow:active { color: #113c62; border-color: #113c62; background: #ffffff; } .js--menu-scroller--arrow.left--arrow { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; border-left: 0 none; left: 0; } .js--menu-scroller--arrow.right--arrow { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; border-right: 0 none; right: 0; } @media screen and (min-width: 78.75em) { .js--menu-scroller--arrow.left--arrow { border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; left: 0; } .js--menu-scroller--arrow.left--arrow:hover { border-color: #113c62; } .js--menu-scroller--arrow.right--arrow { border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; right: 0; } .js--menu-scroller--arrow.right--arrow:hover { border-color: #113c62; } } /* Filter Panel =========================================== Defines the styling of the filter panel element. The styling includes the collapsed and expanded styling and the panel component properties. ``` <div class="filter-panel"> <div class="filter-panel--flyout"> <label class="filter-panel--title"> Preis </label> <span class="filter-panel--icon"></span> <div class="filter-panel--content"> test test </div> </div> </div> ``` */ .filter-panel { height: 2.375rem; margin-bottom: 0.625rem; border-radius: 3px; background-clip: padding-box; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; position: relative; border: 1px solid #c8c8c8; } .filter-panel:hover { border: 1px solid #113c62; background: #FFF; } .filter-panel:hover .filter-panel--icon, .filter-panel:hover .filter-panel--title { color: #113c62; } .filter-panel.is--disabled { background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); opacity: 0.5; border: 1px solid #c8c8c8; color: #113c62; } .filter-panel.is--disabled:hover { border: 1px solid #c8c8c8; color: #113c62; } .filter-panel.is--disabled:hover .filter-panel--icon, .filter-panel.is--disabled:hover .filter-panel--title { color: #113c62; } .filter-panel.is--disabled .filter-panel--title { color: #113c62; } .filter-panel.is--collapsed { height: auto; border: 0 none; } .filter-panel.is--collapsed .filter-panel--flyout { height: auto; border: 1px solid #113c62; background: #FFF; overflow: visible; z-index: 800; } .filter-panel.is--collapsed .filter-panel--title { color: #113c62; } .filter-panel.is--collapsed .filter-panel--icon:before { color: #113c62; content: "\e610"; } .filter-panel .flatpickr-wrapper { position: relative; display: block; } .filter-panel .flatpickr-wrapper .flatpickr-calendar.static { top: 2.8125rem; display: block; width: 100%; } .filter-panel .flatpickr-wrapper .flatpickr-calendar.static .flatpickr-rContainer { display: block; } .filter-panel .flatpickr-wrapper .flatpickr-calendar.static .flatpickr-innerContainer { display: block; width: 100%; } .filter-panel .flatpickr-wrapper .flatpickr-calendar.static .flatpickr-innerContainer .flatpickr-days { width: 100%; } .filter-panel--flyout { height: 2.375rem; border-radius: 3px; background-clip: padding-box; display: block; width: 100%; overflow: hidden; z-index: 500; } .filter-panel--title { height: 2.25rem; line-height: 2.25rem; padding: 0rem 1.875rem 0rem 0.625rem; margin: 0rem 0rem 0.3125rem 0rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .filter-panel--icon { width: 1rem; height: 1rem; top: 0.5rem; right: 0.625rem; font-size: 0.375rem; line-height: 1rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: inline-block; position: absolute; font-family: 'shopware'; text-align: center; cursor: pointer; pointer-events: none; } .filter-panel--icon:before { content: "\e612"; } .filter-panel--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; } .filter-panel--option-list { padding-bottom: 0.3125rem; list-style: none; } .filter-panel--option-list.sub-level { margin: 0rem 0rem 0rem 0.5rem; padding: 0rem 0rem 0rem 1.125rem; border-left: 1px solid #c8c8c8; } .filter-panel--option { display: block; position: relative; } .value-tree--option { margin: 0rem 0rem 0.625rem 0rem; } .sub-level .value-tree--option { margin: 0; } .filter-panel--label { padding: 0.25rem 0rem 0.25rem 1.875rem; line-height: 1.125rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filter-panel--range-info { padding: 0.625rem 0rem 0.3125rem 0rem; text-align: center; } .filter-panel--range-info .range-info--label { color: #113c62; font-weight: 700; } .filter--date .input-type--date .filter-panel--input { display: block; width: 100%; } .filter-panel--checkbox, .filter-panel--radio { width: 1rem; height: 1rem; padding: 0.0625rem 0.0625rem 0.0625rem 0.0625rem; border-radius: 3px; background-clip: padding-box; display: inline-block; border: 1px solid #c8c8c8; cursor: pointer; position: relative; vertical-align: top; } .filter-panel--checkbox:hover, .filter-panel--radio:hover { border-color: #113c62; } .filter-panel--checkbox input[type="checkbox"], .filter-panel--radio input[type="checkbox"] { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .filter-panel--checkbox input[type="checkbox"]:checked ~ .input--state, .filter-panel--radio input[type="checkbox"]:checked ~ .input--state, .filter-panel--checkbox input[type="checkbox"]:checked ~ .checkbox--state, .filter-panel--radio input[type="checkbox"]:checked ~ .checkbox--state { background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); } .filter-panel--checkbox input[type="checkbox"]:checked ~ .input--state:before, .filter-panel--radio input[type="checkbox"]:checked ~ .input--state:before, .filter-panel--checkbox input[type="checkbox"]:checked ~ .checkbox--state:before, .filter-panel--radio input[type="checkbox"]:checked ~ .checkbox--state:before { width: 0.75rem; height: 0.75rem; line-height: 0.75rem; font-size: 0.4375rem; display: block; font-family: 'shopware'; font-weight: 500; text-align: center; color: #fff; content: "\e60c"; } .filter-panel--checkbox input[type="checkbox"]:checked ~ .filter-panel--label, .filter-panel--radio input[type="checkbox"]:checked ~ .filter-panel--label { color: #113c62; font-weight: 700; } .filter-panel--checkbox input[type="checkbox"]:disabled ~ .input--state, .filter-panel--radio input[type="checkbox"]:disabled ~ .input--state, .filter-panel--checkbox input[type="checkbox"]:disabled ~ .checkbox--state, .filter-panel--radio input[type="checkbox"]:disabled ~ .checkbox--state { background: #ffffff; } .filter-panel--checkbox input[type="checkbox"]:disabled ~ .filter-panel--label, .filter-panel--radio input[type="checkbox"]:disabled ~ .filter-panel--label { color: #1c64a3; } .filter-panel--checkbox .input--state, .filter-panel--radio .input--state, .filter-panel--checkbox .checkbox--state, .filter-panel--radio .checkbox--state, .filter-panel--checkbox .radio--state, .filter-panel--radio .radio--state { border-radius: 3px; background-clip: padding-box; display: block; width: 100%; height: 100%; position: relative; z-index: 60; } .filter-panel--checkbox.filter-panel--radio, .filter-panel--radio.filter-panel--radio { border-radius: 11px; background-clip: padding-box; } .filter-panel--checkbox input[type="radio"], .filter-panel--radio input[type="radio"] { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .filter-panel--checkbox input[type="radio"]:checked ~ .input--state, .filter-panel--radio input[type="radio"]:checked ~ .input--state, .filter-panel--checkbox input[type="radio"]:checked ~ .radio--state, .filter-panel--radio input[type="radio"]:checked ~ .radio--state { background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); } .filter-panel--checkbox input[type="radio"]:checked ~ .filter-panel--label, .filter-panel--radio input[type="radio"]:checked ~ .filter-panel--label { color: #113c62; font-weight: 700; } .filter-panel--checkbox input[type="radio"]:disabled .input--state, .filter-panel--radio input[type="radio"]:disabled .input--state, .filter-panel--checkbox input[type="radio"]:disabled .radio--state, .filter-panel--radio input[type="radio"]:disabled .radio--state { background: #ffffff; } .filter-panel--checkbox input[type="radio"]:disabled .filter-panel--label, .filter-panel--radio input[type="radio"]:disabled .filter-panel--label { color: #113c62; } .filter-panel--checkbox input[type="radio"] + .input--state, .filter-panel--radio input[type="radio"] + .input--state, .filter-panel--checkbox input[type="radio"] + .radio--state, .filter-panel--radio input[type="radio"] + .radio--state { border-radius: 11px; background-clip: padding-box; } .input-type--media:after { content: ""; display: table; clear: both; } .input-type--media::after { content: ""; display: table; clear: both; } .input-type--media .option--container { height: 2.8125rem; max-width: 2.8125rem; width: 18%; margin: 0 0 2% 2%; display: block; position: relative; float: left; } .input-type--media .option--container .filter-panel--label { padding: 0; } .input-type--media .option--container input.is--disabled ~ label { opacity: 0.2; } .input-type--media .option--container input[type="checkbox"], .input-type--media .option--container input[type="radio"] { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .input-type--media .option--container input[type="checkbox"]:hover ~ .filter-panel--label, .input-type--media .option--container input[type="radio"]:hover ~ .filter-panel--label { border-color: #113c62; } .input-type--media .option--container input[type="checkbox"]:checked ~ .filter-panel--label, .input-type--media .option--container input[type="radio"]:checked ~ .filter-panel--label { border-color: #113c62; } .input-type--media .option--container input[type="checkbox"]:checked ~ .filter-panel--label:after, .input-type--media .option--container input[type="radio"]:checked ~ .filter-panel--label:after { width: 1rem; height: 1rem; line-height: 1rem; font-size: 0.4375rem; top: -0.25rem; right: -0.25rem; background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); border-radius: 8px; background-clip: padding-box; display: block; position: absolute; font-family: 'shopware'; font-weight: 500; text-align: center; color: #fff; content: "\e60c"; } .input-type--media .option--container input[type="checkbox"]:disabled .filter-panel--label, .input-type--media .option--container input[type="radio"]:disabled .filter-panel--label { opacity: 0.2; } .filter--multi-selection .option--container:hover .filter-panel--label, .filter--value .option--container:hover .filter-panel--label, .filter--value-tree .option--container:hover .filter-panel--label { color: #113c62; } .filter--multi-selection .option--container:hover .filter-panel--input, .filter--value .option--container:hover .filter-panel--input, .filter--value-tree .option--container:hover .filter-panel--input { border-color: #113c62; } .filter--multi-selection .option--container:hover .filter-panel--input.is--disabled, .filter--value .option--container:hover .filter-panel--input.is--disabled, .filter--value-tree .option--container:hover .filter-panel--input.is--disabled { border-color: #c8c8c8; } .filter--multi-selection .filter-panel--checkbox, .filter--value .filter-panel--checkbox, .filter--value-tree .filter-panel--checkbox, .filter--multi-selection .filter-panel--radio, .filter--value .filter-panel--radio, .filter--value-tree .filter-panel--radio { top: 0.3125rem; left: 0rem; position: absolute; } .filter--multi-selection .filter-panel--checkbox.is--disabled ~ .filter-panel--label, .filter--value .filter-panel--checkbox.is--disabled ~ .filter-panel--label, .filter--value-tree .filter-panel--checkbox.is--disabled ~ .filter-panel--label, .filter--multi-selection .filter-panel--radio.is--disabled ~ .filter-panel--label, .filter--value .filter-panel--radio.is--disabled ~ .filter-panel--label, .filter--value-tree .filter-panel--radio.is--disabled ~ .filter-panel--label { color: #7d7d7d; } .filter--multi-selection .filter-panel--checkbox.is--disabled:hover, .filter--value .filter-panel--checkbox.is--disabled:hover, .filter--value-tree .filter-panel--checkbox.is--disabled:hover, .filter--multi-selection .filter-panel--radio.is--disabled:hover, .filter--value .filter-panel--radio.is--disabled:hover, .filter--value-tree .filter-panel--radio.is--disabled:hover { border-color: #c8c8c8; } .filter-panel--star-rating { height: 5.625rem; margin-bottom: 0.625rem; position: relative; } .filter-panel--star-rating:after { content: ""; display: table; clear: both; } .filter-panel--star-rating::after { content: ""; display: table; clear: both; } .filter-panel--star-rating .rating-star--outer-container { width: 13.75rem; margin-left: auto; margin-right: auto; cursor: pointer; } .filter-panel--star-rating .rating-star--outer-container:after { content: ""; display: table; clear: both; } .filter-panel--star-rating .rating-star--outer-container::after { content: ""; display: table; clear: both; } .filter-panel--star-rating .rating-star--outer-container .icon--star, .filter-panel--star-rating .rating-star--outer-container .icon--star-empty { font-size: 1.125rem; } .filter-panel--star-rating .rating-star--outer-container .icon--star { color: #f1c40f; } .filter-panel--star-rating .rating-star--outer-container .icon--star-empty { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #7d7d7d; } .filter-panel--star-rating .rating-star--outer-container .rating-star--suffix { margin-left: 0.3125rem; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .filter-panel--star-rating .rating-star--outer-container.is--active .icon--star-empty { color: #113c62; } .filter-panel--star-rating .rating-star--outer-container.is--active .rating-star--suffix { font-weight: 700; } .filter-panel--star-rating .rating-star--outer-container.is--disabled { opacity: 0.3; } .filter-panel--star-rating .rating-star--outer-container:hover .icon--star-empty { color: #113c62; } .filter-panel--star-rating .rating-star--outer-container:hover .rating-star--suffix { color: #113c62; } .filter-panel--star-rating .rating-star--outer-container:hover .is--disabled ~ .icon--star-empty { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #7d7d7d; } .filter-panel--star-rating .rating-star--outer-container:hover .is--disabled ~ .rating-star--suffix { color: #113c62; } .filter--set-title { margin: 1.875rem 0rem 0.625rem 0rem; font-size: 0.875rem; line-height: 1.5rem; margin-left: 1%; margin-right: 1%; border-bottom: 1px solid #c8c8c8; clear: both; } .filter--value { background: #fff; } .filter--value .filter-panel--input { top: 0.625rem; left: 0.625rem; } .filter--value .filter-panel--title { padding: 0rem 1.875rem 0rem 2.5rem; } .filter--value.is--disabled .filter-panel--input:hover { border-color: #c8c8c8; } .filter--range .filter-panel--content { padding: 0.625rem 1.25rem 0.625rem 1.25rem; } .filter--active-container { padding: 1.25rem 0rem 0rem 0rem; } .filter--active, .search--cat-filter .cat-filter--reset { padding: 0rem 0.625rem 0rem 0.625rem; margin: 0rem 0.625rem 0.625rem 0rem; line-height: 1.5rem; font-size: 0.8125rem; border-radius: 3px; background-clip: padding-box; display: inline-block; border: 1px solid #c8c8c8; color: #113c62; background: #FFF; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .filter--active .filter--active-icon { margin: 0rem 0.625rem 0rem 0rem; font-size: 0.5rem; top: -0.0625rem; position: relative; font-family: 'shopware'; color: #113c62; } .filter--active .filter--active-icon:before { content: "\e60d"; } .filter--active .icon--star { color: #f1c40f; } .filter--active .icon--star-empty { color: #113c62; } .filter--active:hover, .filter--active[data-filter-param="reset"] { color: #113c62; border-color: #113c62; } .filter--active:hover .filter--active-icon, .filter--active[data-filter-param="reset"] .filter--active-icon { color: #113c62; } .action--filter-options.off-canvas.is--open .filter--active { max-width: 100%; } .filter--actions { padding: 0.625rem 0rem 0.625rem 0rem; margin-bottom: 0.625rem; clear: both; } .filter--btn-apply { position: relative; font-weight: 700; width: 100%; } .filter--btn-apply.is--icon-right [class^="icon--"] { font-size: 0.875rem; line-height: 1rem; margin: -0.5rem 0rem 0rem 0rem; } .filter--btn-apply.is--loading [class^="icon--"] { -webkit-animation: keyframe--spin-reverse 1s linear infinite; animation: keyframe--spin-reverse 1s linear infinite; } .filter--btn-apply .filter--count { font-weight: 700; } .filter--facet-container { padding: 0.625rem 0rem 0rem 0rem; } .filter--facet-container:after { content: ""; display: table; clear: both; } .filter--facet-container::after { content: ""; display: table; clear: both; } .action--filter-options.is--active-filter .filter--active-container { padding: 0.9375rem 0rem 0.3125rem 0rem; display: block; } .filter--active-container { display: none; } .listing--wrapper { width: 100%; } .listing--wrapper.has--sidebar-filter .listing--paging { clear: both; } .listing--wrapper.has--sidebar-filter .action--filter-btn { display: block; } .listing--wrapper.has--sidebar-filter .action--sort { line-height: 2rem; margin: 0rem 0.625rem 0.625rem 0rem; width: 100%; } .listing--wrapper.has--sidebar-filter .action--sort .sort--label { display: none; } .listing--wrapper.has--sidebar-filter .action--sort .sort--select { width: 100%; vertical-align: top; } .listing--wrapper .filter--actions.filter--actions-top { margin: 0; } .listing--wrapper.with--fullscreen-emotion .sidebar-main.off-canvas { padding-top: 0; } .listing--wrapper.with--fullscreen-emotion .listing--wrapper-inner { margin-left: 16.25rem; } @media screen and (min-width: 48em) { .filter-panel { width: 49%; margin-left: 1%; float: left; } .filter-panel.is--collapsed { height: 2.375rem; } .filter-panel .flatpickr-wrapper { position: static; } .filter-panel .flatpickr-wrapper .flatpickr-calendar.static { top: 100%; } .is--no-sidebar .filter-panel { width: 32%; } .filter-panel--flyout { position: absolute; top: 0; left: 0; } .filter-panel--content { max-height: 12.5rem; overflow-x: hidden; overflow-y: auto; } .filter--active-container { padding: 0; margin-left: 1%; margin-right: 1%; } .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]), .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]):hover { color: #113c62; border-color: #c8c8c8; cursor: default; } .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]) .filter--active-icon, .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]):hover .filter--active-icon { color: #113c62; } .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]) .filter--active-icon:before, .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]):hover .filter--active-icon:before { content: "\e60c"; } .filter--actions { margin-left: 1%; margin-right: 1%; } .filter--btn-apply { width: auto; } .filter--facet-container, .filter--actions-bottom { display: none; } .filter--actions.filter--actions-top { display: none; } .listing--wrapper.has--sidebar-filter .action--filter-btn { display: none; } .listing--wrapper.has--sidebar-filter .action--sort .sort--select { max-width: 12.5rem; vertical-align: top; } } @media screen and (min-width: 64em) { .filter-panel { width: 32%; } } @media screen and (min-width: 78.75em) { .filter-panel--star-rating .rating-star--input { width: 1.25rem; height: 1.25rem; } .filter-panel--star-rating .rating-star--label { width: 1.25rem; height: 1.25rem; line-height: 1.25rem; font-size: 1.25rem; } .listing--wrapper.has--sidebar-filter .action--sort .sort--label { margin: 0rem 0.625rem 0rem 0rem; display: inline-block; font-weight: 700; } } /* Range Slider ========================================== ######Range Slider The range slider element lets the user filter elements by a price-span they decide on. The slider handlers can be dragged to the numeric value that the user intends. The value is displayed below the element. The functionality is provided by the `jquery.range-slider.js` file. ``` <div class="range-slider" data-range-slider="true" data-startmin="37.99" data-startmax="349.99" data-rangemin="37.99" data-rangemax="349.99"> <div class="range-slider--container"> <div class="range-slider--range-bar" style="left: 0%; width: 100%;"> <div class="range-slider--handle is--min"></div> <div class="range-slider--handle is--max"></div> </div> </div> <input type="hidden" id="min" name="min" data-range-input="min" value="37.99" disabled="disabled"> <input type="hidden" id="max" name="max" data-range-input="max" value="349.99" disabled="disabled"> <div class="range-slider--currency" data-range-currency="0,00 €"></div> <div class="filter-panel--range-info"> <span class="range-info--min">von</span> <label class="range-info--label" for="min" data-range-label="min">35,00 €</label> <span class="range-info--max">bis</span> <label class="range-info--label" for="max" data-range-label="max">350,00 €</label> </div> </div> ``` */ .range-slider { -webkit-touch-callout: none; } .range-slider--container { height: 0.75rem; border-radius: 6px; background-clip: padding-box; display: block; width: 100%; background: #ffffff; box-shadow: inset 0 1px 1px #f0f0f0; border: 1px solid #c8c8c8; -ms-touch-action: none; } .range-slider--range-bar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: inset 0 0 3px #103a5f; height: 100%; width: 100%; position: relative; background: #113c62; } .range-slider--handle { width: 1.25rem; height: 1.25rem; border-radius: 3px; background-clip: padding-box; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: absolute; border: 1px solid #c8c8c8; cursor: pointer; } .range-slider--handle.is--min { left: -0.625rem; top: -0.25rem; } .range-slider--handle.is--max { right: -0.625rem; top: -0.25rem; } .range-slider--handle:hover, .range-slider--handle.is--dragging { border-color: #113c62; } .range-slider--format { display: none; } /* Datepicker ========================================= The datepicker is a calendar overlay tool that simplyfies the selection of dates for input elements. It creates a calendar widget that simplifies the selection of dates for date input elements. The datepicker is based on the jQuery Plugin [flatpickr](https://github.com/chmln/flatpickr). */ .flatpickr-calendar { width: 19.6875rem; font-size: 0.875rem; line-height: 1.5rem; border-radius: 5px; background-clip: padding-box; overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; text-align: center; padding: 0; animation: none; direction: ltr; border: 0; position: absolute; box-sizing: border-box; background: #fff; box-shadow: 1px 0 0 #7d7d7d, -1px 0 0 #7d7d7d, 0 1px 0 #7d7d7d, 0 -1px 0 #7d7d7d, 0 3px 13px rgba(0, 0, 0, 0.2); } .flatpickr-calendar.open, .flatpickr-calendar.inline { max-height: 40rem; opacity: 1; visibility: visible; overflow: visible; } .flatpickr-calendar.open { display: inline-block; animation: flatpickrFadeInDown 300ms cubic-bezier(0, 1, 0.5, 1); z-index: 8100; } .flatpickr-calendar.inline { top: 0.125rem; display: block; position: relative; } .flatpickr-calendar.static { position: absolute; top: calc(102%); } .flatpickr-calendar.static.open { z-index: 999; display: block; } .flatpickr-calendar.hasWeeks { width: auto; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { height: 2.5rem; border-top: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; } .flatpickr-calendar:before, .flatpickr-calendar:after { left: 1.375rem; position: absolute; display: block; pointer-events: none; border: solid transparent; content: ''; height: 0; width: 0; } .flatpickr-calendar.rightMost:before, .flatpickr-calendar.rightMost:after { right: 1.375rem; left: auto; } .flatpickr-calendar:before { margin: 0rem -0.3125rem 0rem -0.3125rem; border-width: 5px; } .flatpickr-calendar:after { margin: 0rem -0.25rem 0rem -0.25rem; border-width: 4px; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { bottom: 100%; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #e6e6e6; } .flatpickr-calendar.arrowTop:after { border-bottom-color: #fff; } .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { top: 100%; } .flatpickr-calendar.arrowBottom:before { border-top-color: #e6e6e6; } .flatpickr-calendar.arrowBottom:after { border-top-color: #fff; } .flatpickr-wrapper { position: relative; display: inline-block; } .flatpickr-month { height: 2.5rem; line-height: 1.5rem; -webkit-user-select: none; user-select: none; background: transparent; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); text-align: center; position: relative; } .flatpickr-prev-month, .flatpickr-next-month { height: 1rem; line-height: 1rem; top: 0.9375rem; text-decoration: none; cursor: pointer; position: absolute; } .flatpickr-prev-month i, .flatpickr-next-month i { position: relative; } .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-next-month.flatpickr-prev-month { /*rtl:begin:ignore*/ left: calc(2.07%); /*rtl:end:ignore*/ } .flatpickr-prev-month.flatpickr-next-month, .flatpickr-next-month.flatpickr-next-month { /*rtl:begin:ignore*/ right: calc(2.07%); /*rtl:end:ignore*/ } .flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: #959ea9; } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #f64747; } .flatpickr-prev-month svg, .flatpickr-next-month svg { width: 0.875rem; } .flatpickr-prev-month svg path, .flatpickr-next-month svg path { transition: fill 0.1s; fill: inherit; } .numInputWrapper { position: relative; height: auto; } .numInputWrapper input, .numInputWrapper span { display: inline-block; } .numInputWrapper input { width: 100%; } .numInputWrapper input::-ms-clear, .numInputWrapper input::-ms-expand { display: none; } .numInputWrapper span { width: 0.875rem; padding: 0rem 0.25rem 0rem 0.125rem; position: absolute; right: 0; height: 50%; line-height: 50%; opacity: 0; cursor: pointer; border: 1px solid rgba(57, 57, 57, 0.05); box-sizing: border-box; } .numInputWrapper span:hover { background: rgba(0, 0, 0, 0.1); } .numInputWrapper span:active { background: rgba(0, 0, 0, 0.2); } .numInputWrapper span:after { display: block; content: ""; position: absolute; top: 33%; } .numInputWrapper span.arrowUp { top: 0; border-bottom: 0; } .numInputWrapper span.arrowUp:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid rgba(57, 57, 57, 0.6); } .numInputWrapper span.arrowDown { top: 50%; } .numInputWrapper span.arrowDown:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(57, 57, 57, 0.6); } .numInputWrapper span svg { width: inherit; height: auto; } .numInputWrapper span svg path { fill: rgba(0, 0, 0, 0.5); } .numInputWrapper:hover { background: rgba(0, 0, 0, 0.05); } .numInputWrapper:hover span { opacity: 1; } .flatpickr-current-month { top: 0.625rem; font-size: 135%; line-height: inherit; font-weight: 500; color: inherit; position: absolute; width: 75%; left: 12.5%; display: inline-block; text-align: center; } .flatpickr-current-month span.cur-month { margin-right: 0.625rem; font-family: inherit; font-weight: 700; color: inherit; display: inline-block; padding: 0; max-width: 50%; } .flatpickr-current-month .numInputWrapper { width: 4.375rem; display: inline-block; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month input.cur-year { background: transparent; box-sizing: border-box; color: inherit; cursor: default; padding: 0 0 0 0.5ch; margin: 0; display: inline; font-size: inherit; font-family: inherit; font-weight: 500; line-height: inherit; height: initial; border: 0; border-radius: 0; vertical-align: initial; } .flatpickr-current-month input.cur-year:focus { outline: 0; } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgba(0, 0, 0, 0.5); background: transparent; pointer-events: none; } .flatpickr-weekdays { background: transparent; text-align: center; overflow: hidden; } .flatpickr-days, .flatpickr-weeks { padding: 0.0625rem 0rem 0rem 0rem; } .flatpickr-days { width: 19.6875rem; padding: 0; outline: 0; text-align: left; box-sizing: border-box; display: inline-block; display: -ms-flexbox; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-around; } .flatpickr-day { line-height: 2.5rem; height: 2.5rem; border-radius: 3px; background-clip: padding-box; background: none; border: 0 none; margin: 0; box-sizing: border-box; color: #113c62; cursor: pointer; font-weight: 500; width: 14.2857143%; flex-basis: 14.2857143%; display: inline-block; position: relative; justify-content: center; text-align: center; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange { cursor: pointer; outline: 0; background: #646464; border-color: #646464; } .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { cursor: pointer; outline: 0; background: #646464; border-color: #646464; } .flatpickr-day.today { border-color: #959ea9; } .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: #959ea9; background: #959ea9; color: #fff; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: #113c62; color: #fff; border-color: #113c62; } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; } .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 3px; background-clip: padding-box; } .flatpickr-day.inRange { border-radius: 0; box-shadow: -5px 0 0 #646464, 5px 0 0 #646464; } .flatpickr-day.inRange.endRange { box-shadow: -5px 0 0 #646464; } .flatpickr-day.inRange.startRange { box-shadow: 5px 0 0 #646464; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover { pointer-events: none; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(57, 57, 57, 0.3); background: transparent; border-color: transparent; cursor: default; } span.flatpickr-weekday { line-height: 1.5rem; cursor: default; font-size: 90%; color: #113c62; height: 27.333333333333332px; margin: 0; background: transparent; text-align: center; display: block; float: left; width: 14.28%; font-weight: 700; padding-top: 3.333333333333333px; } .rangeMode .flatpickr-day { margin-top: 0.0625rem; } .flatpickr-weekwrapper { display: inline-block; float: left; } .flatpickr-weekwrapper .flatpickr-weeks { padding: 0.0625rem 0.75rem 0rem 0.75rem; box-shadow: 1px 0 0 #e6e6e6; } .flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; } .flatpickr-weekwrapper span.flatpickr-day { display: block; width: 100%; max-width: none; } .flatpickr-innerContainer { display: block; display: flex; box-sizing: border-box; overflow: hidden; } .flatpickr-rContainer { display: inline-block; padding: 0; box-sizing: border-box; } .flatpickr-time { line-height: 2.5rem; max-height: 2.5rem; -webkit-transition: height 0.33s cubic-bezier(0, 1, 0.5, 1); transition: height 0.33s cubic-bezier(0, 1, 0.5, 1); display: block; display: flex; text-align: center; outline: 0; height: 0; box-sizing: border-box; overflow: hidden; } .flatpickr-time:after { content: ""; display: table; clear: both; } .flatpickr-time .numInputWrapper { height: 2.5rem; flex: 1; width: 40%; float: left; } .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #00cc00; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #00cc00; } .flatpickr-time.hasSeconds .numInputWrapper { width: 26%; } .flatpickr-time.time24hr .numInputWrapper { width: 49%; } .flatpickr-time input { font-size: 0.875rem; background: transparent; box-shadow: none; border: 0; border-radius: 0; margin: 0; padding: 0; height: inherit; line-height: inherit; cursor: pointer; color: #113c62; position: relative; box-sizing: border-box; text-align: center; } .flatpickr-time input::-ms-clear, .flatpickr-time input::-ms-expand { display: none; } .flatpickr-time input.flatpickr-hour { font-weight: 700; } .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { font-weight: 500; } .flatpickr-time input:focus { outline: 0; border: 0; } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { -webkit-user-select: none; user-select: none; height: inherit; display: inline-block; float: left; line-height: inherit; color: #113c62; font-weight: 700; width: 2%; } .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 500; } .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: #f0f0f0; } .hasWeeks .flatpickr-days, .hasTime .flatpickr-days { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .hasWeeks .flatpickr-days { border-left: 0; } @media all and (-ms-high-contrast: none) { .flatpickr-month svg { top: 0 !important; } } .flatpickr-input[readonly] { cursor: pointer; } .slideRight, .slideLeft { display: none; } @-moz-keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } } @-webkit-keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } } @-o-keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } } @keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } } /* Collapse cart ======================================= The collapse cart element is an alternative to the offcanvas shopping cart inside Shopware 5. The collapse cart displays a shopping cart dropdown element similar to the default Shopware 4 cart. The Settings can be modified in the backend theme manager. The collapse cart element contains the current items in the users shopping cart and the subtotal price amount. */ .container--ajax-cart { top: 3.125rem; margin-right: 0.625rem; padding: 0.9375rem 0rem 0rem 0rem; position: absolute; text-align: left; right: 0; z-index: 3000; display: none; } .container--ajax-cart.off-canvas { width: 17.5rem; -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); margin-right: 0; display: block; height: 100%; left: auto; position: fixed; top: 0; padding: 0; background: #fff; z-index: 8000; } .container--ajax-cart.off-canvas .icon--loading-indicator { width: 2.375rem; height: 2.375rem; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } .container--ajax-cart .icon--loading-indicator { width: 1.3125rem; height: 1.3125rem; padding: 1.25rem 0rem 1.25rem 0rem; margin: 0 auto; display: block; position: relative; box-sizing: content-box; } .container--ajax-cart .icon--loading-indicator:before { border-radius: 100%; background-clip: padding-box; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; width: 100%; height: 100%; box-sizing: border-box; display: block; content: ""; border: 2px solid #CCC; border-top: 2px solid #333; } .container--ajax-cart .product--essential-features { margin-left: 3rem; } .ajax--cart { width: 28.125rem; border-radius: 3px; background-clip: padding-box; font-size: 0.875rem; border: 1px solid #c8c8c8; position: relative; background: #fff; } .ajax--cart:after, .ajax--cart:before { right: 0.625rem; bottom: 100%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .ajax--cart:after { right: 0.6875rem; border-width: 0.5625rem; border-bottom-color: #fff; } .ajax--cart:before { border-width: 0.625rem; border-bottom-color: #c8c8c8; } .ajax--cart .content--loader { width: 1.3125rem; height: 1.3125rem; padding: 1.25rem 0rem 1.25rem 0rem; box-sizing: content-box; margin: 0 auto; } .ajax--cart .item--container { padding: 0rem 0.625rem 0rem 0.625rem; max-height: 22.0625rem; overflow-y: auto; } .ajax--cart .alert { border-radius: 0; margin-bottom: 0.625rem; } .ajax--cart .alert .alert--icon, .ajax--cart .alert .icon--element { width: 15%; } .ajax--cart .alert .alert--icon .is--warning, .ajax--cart .alert .icon--element .is--warning { color: #f1c40f; background: #f9f3dd; } .ajax--cart .alert .alert--icon .is--success, .ajax--cart .alert .icon--element .is--success { color: #2ecc71; background: #def2e7; } .ajax--cart .alert .alert--content { width: 85%; } .ajax--cart .cart--item { padding: 0.625rem 0rem 0.625rem 0rem; line-height: 2.375rem; border-bottom: 1px solid #c8c8c8; overflow: hidden; } .ajax--cart .cart--item:last-child { border: 0 none; } .ajax--cart .cart--item.is--empty { padding-bottom: 0; } .ajax--cart .cart--item .thumbnail--container { margin: 0rem 0.625rem 0rem 0rem; width: 2.375rem; height: 2.375rem; border-radius: 3px; background-clip: padding-box; float: left; position: relative; } .ajax--cart .cart--item .thumbnail--container.has--image { border: 1px solid #c8c8c8; background: #FFFFFF; } .ajax--cart .cart--item .thumbnail--container .cart--badge { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; width: 0.875rem; display: block; position: absolute; height: 100%; top: 0; left: 0; background: #113c62; } .ajax--cart .cart--item .thumbnail--container .cart--badge .badge--free { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 0.5rem; line-height: 0.75rem; width: 2.5rem; color: #fff; text-transform: uppercase; text-align: center; font-weight: 700; display: block; position: absolute; padding: 0; margin: 0; top: 0; bottom: 0; } .ajax--cart .cart--item .thumbnail--container .basket--badge { line-height: 2.3125rem; font-size: 0.75rem; border-radius: 100%; background-clip: padding-box; height: 2.1875rem; width: 2.1875rem; margin: 0 auto; text-align: center; font-weight: 700; background: #113c62; color: #fff; } .ajax--cart .cart--item .thumbnail--container .basket--badge .icon--arrow-right { font-size: 0.625rem; } .ajax--cart .cart--item .thumbnail--container .basket--badge .icon--coupon { font-size: 1.25rem; line-height: 2.3125rem; } .ajax--cart .cart--item .thumbnail--image { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .ajax--cart .cart--item .item--link { color: #113c62; } .ajax--cart .cart--item .item--quantity { margin: 0rem 0.3125rem 0rem 0rem; font-weight: 700; } .ajax--cart .cart--item .item--price { font-weight: 700; float: right; } .ajax--cart .cart--item .action--container { width: 1.3125rem; height: 1.3125rem; margin: 0.625rem 0rem 0rem 0.625rem; line-height: 1; float: right; } .ajax--cart .cart--item .action--container .btn { height: 1.3125rem; width: 1.3125rem; padding: 0.25rem 0.3125rem 0.25rem 0.3125rem; font-size: 0.5rem; line-height: 0.875rem; } .ajax--cart .cart--item .action--container *[class*="icon--"] { margin: 0; padding: 0; } .ajax--cart .prices--container { padding: 0.625rem 0.625rem 0.625rem 0.625rem; border-top: 1px solid #c8c8c8; } .ajax--cart .prices--container .prices--articles-amount { float: right; } .ajax--cart .prices--container .prices--articles { color: #113c62; font-weight: 700; } .ajax--cart .prices--container .prices--tax { font-size: 12px; font-size: 0.75rem; margin: 0; } .ajax--cart .button--container { padding: 0.625rem 0.625rem 0.625rem 0.625rem; overflow: hidden; } .ajax--cart .button--container *[class*="button--"] { width: 13.125rem; border-radius: 3px; background-clip: padding-box; text-align: center; } .ajax--cart .button--container .button--checkout { float: right; } .ajax--cart .button--container .button--open-basket *[class^="icon--"] { display: none; } .ajax--cart .small--information { font-size: 0.75rem; } .ajax--cart .small--information .small--prices { float: right; } .ajax--cart .context--shipping-costs { margin-left: 0.625rem; } .ajax--cart .table--shipping-costs-trigger { font-size: 0.75rem; margin-bottom: 0.3125rem; font-weight: 700; } .ajax--cart .table--shipping-costs-trigger-no-action { font-size: 0.75rem; margin-bottom: 0.3125rem; } .ajax--cart .table--shipping-costs { font-size: 0.75rem; } .ajax--cart .table--shipping-costs .select-field { max-height: 2.5rem; margin: 0.3125rem 0.625rem 0.3125rem 0rem; } .ajax--cart .table--shipping-costs label { font-size: 0.75rem; font-weight: 700; margin: 0.3125rem 6.25rem 0rem 0rem; float: left; } .off-canvas .ajax--cart { font-size: 0.875rem; background: #fff; width: auto; position: absolute; left: 0; right: 0; border: 0 none; min-height: 100%; } .off-canvas .ajax--cart .item--container { max-height: none; } .off-canvas .ajax--cart .cart--item { line-height: 1.1875rem; } .off-canvas .ajax--cart .cart--item .item--link { width: 9.3125rem; display: inline-block; } .off-canvas .ajax--cart .cart--item .item--price { float: none; display: block; } .off-canvas .ajax--cart .prices--container { background: #fff; border-bottom: 0 none; } .off-canvas .ajax--cart .action--container, .off-canvas .ajax--cart .action--container .action--remove { width: 2.375rem; height: 2.375rem; } .off-canvas .ajax--cart .action--container { margin: 0; } .off-canvas .ajax--cart .action--container .action--remove { font-size: 0.875rem; text-align: center; vertical-align: middle; } .off-canvas .ajax--cart .action--container .icon--loading-indicator { width: 1.3125rem; height: 1.3125rem; margin: 0.5625rem 0rem 0rem 0rem; position: relative; margin-left: auto; margin-right: auto; } .off-canvas .ajax--cart .action--container *[class*="icon--"] { line-height: 1.75rem; margin: 0; padding: 0; } .off-canvas .ajax--cart .button--container { text-align: left; } .off-canvas .ajax--cart .button--container *[class*="button--"] { margin: 0.625rem 0rem 0rem 0rem; width: 100%; } .off-canvas .ajax--cart .button--container .button--checkout { margin: 0; } .off-canvas .ajax--cart .button--container .button--open-basket { padding-right: 1.875rem; } .off-canvas .ajax--cart .button--container .button--open-basket *[class^="icon--"] { display: block; right: 0.625rem; } .off-canvas .ajax--cart .product--essential-features { margin-top: 0.3125rem; } .product--essential-features { line-height: 1.125rem; font-size: 0.75rem; } @media screen and (min-width: 48em) { .container--ajax-cart.is--shown { display: block; } } @media screen and (min-width: 78.75em) { .container--ajax-cart { margin-right: 0; } } /* Table ========================= Defines the basic table styles. ``` <table> <th> <tr> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>Heading</th> </tr> </th> <tb> <tr> <td>Table Content</td> <td>Table Content</td> <td>Table Content</td> <td>Table Content</td> </tr> <tr> <td>Table Content</td> <td>Table Content</td> <td>Table Content</td> <td>Table Content</td> </tr> </tb> </table> ``` */ table { border-collapse: separate; border-spacing: 1px; } table th, table thead td { background: #00cc00; color: #ffffff; font-weight: 700; text-align: center; } table td { padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; background: #ffffff; color: #00cc00; border: 1px solid #ffffff; } table tr:nth-child(even) td { background: #f5f5f5; } /* Checkboxes ========================================== ######Checkboxes elements Changes the default Checkboxes to custom-themed ones that contain the Shopware color variables. The checkboxes can be used in a `span` element containing an `input` tag or inside a anchor element. (Example inside a panel element) ``` <div class="panel"> <div class="panel--body"> <span class="checkbox"> <input type="checkbox" /> <span class="checkbox--state"></span> </span> Option (actual checkbox)<br/> <span class="checkbox"> <input type="checkbox" /> <span class="checkbox--state"></span> </span> Option (actual checkbox)<br/> <a href="#"> <span class="checkbox"> <span class="checkbox--state"></span> </span> </a> Option (inside a link)<br/> <a href="#"> <span class="checkbox"> <span class="checkbox--state"></span> </span> </a> Option (inside a link)<br/> </div> </div> ``` */ .checkbox { width: 1rem; height: 1rem; padding: 0.0625rem 0.0625rem 0.0625rem 0.0625rem; line-height: 1rem; border-radius: 3px; background-clip: padding-box; display: inline-block; position: relative; vertical-align: middle; border: 1px solid #c8c8c8; cursor: pointer; } .checkbox .checkbox--state { border-radius: 3px; background-clip: padding-box; display: block; width: 100%; height: 100%; position: relative; z-index: 60; } .checkbox input[type="checkbox"] { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .checkbox input[type="checkbox"]:checked ~ .checkbox--state { background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); } .checkbox input[type="checkbox"]:checked ~ .checkbox--state:before { width: 0.75rem; height: 0.75rem; line-height: 0.75rem; font-size: 0.4375rem; display: inline-block; font-family: 'shopware'; font-weight: 500; text-align: center; vertical-align: top; color: #fff; content: "\e60c"; } .checkbox input[type="checkbox"]:disabled ~ .checkbox--state { background: #ffffff; } .checkbox.is--active .checkbox--state, a:hover .checkbox .checkbox--state { background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); } .checkbox.is--active .checkbox--state:before, a:hover .checkbox .checkbox--state:before { width: 0.75rem; height: 0.75rem; line-height: 0.75rem; font-size: 0.4375rem; display: inline-block; font-family: 'shopware'; font-weight: 500; text-align: center; vertical-align: top; color: #fff; content: "\e60c"; } /* Off-canvas menu button ======================================= Defines the styling of the off-canvas menu trigger button that is used for the shopping off-canvas cart. The Shopware 5 off-canvas menu can be enabled/disabled inside the Shopware backend. The functionality is provided by the `jquery.off-canvas-button.js` file. */ .js--off-canvas-button { padding: 0.625rem 0.625rem 0.625rem 0.625rem; margin-bottom: 0.625rem; border-radius: 3px; background-clip: padding-box; position: relative; border: 1px solid #c8c8c8; cursor: pointer; display: block; } .js--off-canvas-button .tab--header { margin-bottom: 0.625rem; position: relative; } .js--off-canvas-button .tab--title:after { font-size: 0.75rem; right: 0.3125rem; margin-top: -0.375rem; content: "\e60f"; } .js--off-canvas-button .tab--preview { display: block; } .js--off-canvas-button .tab--preview p:last-child { margin-bottom: 0; } .js--off-canvas-button .tab--content { cursor: default; } .js--off-canvas-button:hover .tab--title { color: #113c62; } /* Tab-menu ========================================== The Shopware tab-menu allows the creation of multiple tabs filled with content that the user can swtich between. The functionality is provided by the `jquery.tab-menu.js` file. <div class="tab-menu--product js--tab-menu"> <div class="tab--navigation"> <a href="#" class="tab--link is--active" title="Tab-1">First Tab</a> <a href="#" class="tab--link" title="Tab-2">Second Tab</a> </div> <div class="tab--container-list"> <div class="tab--container is--active"> </div> <div class="tab--container"> </div> </div> </div> */ .js--tab-menu .tab--navigation { list-style: none; } .js--tab-menu .tab--link { padding: 0.625rem 0.9375rem 0.625rem 0.9375rem; margin: 0rem 0.3125rem 0rem 0rem; line-height: 1.5rem; font-size: 0.875rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; top: 0.0625rem; display: none; position: relative; font-weight: 700; text-align: center; color: #113c62; border: 1px solid #c8c8c8; white-space: nowrap; } .js--tab-menu .tab--link:hover { color: #113c62; background: #fff; } .js--tab-menu .tab--link:focus { outline: none; } .js--tab-menu .tab--link.is--active { color: #113c62; border-bottom-color: #fff; background: #fff; } .js--tab-menu .tab--link.is--active:hover { color: #113c62; } .js--tab-menu .tab--link.has--content { display: inline-block; } .js--tab-menu.js--menu-scroller .tab--navigation { overflow: hidden; } .js--tab-menu.js--menu-scroller .tab--navigation .js--menu-scroller--item { top: 0; } .js--tab-menu.js--menu-scroller .js--menu-scroller--arrow { line-height: 2.875rem; height: 2.875rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; } .js--tab-menu.js--menu-scroller .js--menu-scroller--arrow:hover { border-color: #113c62; } .js--tab-menu .tab--container-list .tab--container { border: 1px solid #c8c8c8; display: none; } .js--tab-menu .tab--container-list .tab--container.has--content.is--active { display: block; } /* Image gallery element ==================================================== Defines the styles for the image gallery element that shows thumbnails of the product pictures in a slim slider element. It is displayed on the product detail page. */ .image--gallery .image-slider--container { bottom: 5.625rem; position: absolute; top: 0; left: 0; right: 0; height: auto; margin: 0; } .image--gallery.no--thumbnails .image-slider--container { bottom: 0; } .image--gallery .image-slider--item { display: inline-block; height: 100%; width: 100%; position: relative; text-align: center; cursor: default; } .image--gallery .image-slider--item .image--element { display: block; max-width: 100%; height: auto; width: auto; } .image--gallery .image-slider--item .image--media, .image--gallery .image-slider--item img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .image--gallery .image-slider--thumbnails { padding: 0.625rem 0rem 0.625rem 0rem; height: 5.625rem; background: #fff; top: auto; bottom: 0; width: 100%; margin: 0; position: absolute; display: block; } .image--gallery .image-slider--thumbnails .thumbnails--arrow { top: 0.625rem; } .image--gallery .image-slider--thumbnails .thumbnails--arrow.is--left { border-left: 0 none; } .image--gallery .image-slider--thumbnails .thumbnails--arrow.is--right { border-right: 0 none; } .image--gallery .image-slider--thumbnails-slide { margin: 0rem 0.625rem 0rem 0.625rem; left: auto; top: auto; } .image--gallery .thumbnail--link { margin: 0rem 0.625rem 0rem 0rem; display: inline-block; } .image--gallery .button--zoom-in, .image--gallery .button--zoom-out, .image--gallery .button--zoom-reset { top: 0.625rem; left: 0.625rem; font-size: 1.25rem; padding: 0.125rem 0.375rem 0.125rem 0.375rem; position: absolute; } .image--gallery .button--zoom-in:hover, .image--gallery .button--zoom-out:hover, .image--gallery .button--zoom-reset:hover { z-index: 1; } .image--gallery .button--zoom-out { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; } .image--gallery .button--zoom-reset { left: 2.6875rem; border-radius: 0; } .image--gallery .button--zoom-in { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; left: 4.75rem; } .image-gallery--modal .modal--close { top: 0.625rem; width: 2.125rem; height: 2.125rem; line-height: 2rem; } @media screen and (min-width: 78.75em) { .js--image-gallery { width: 80%; height: 80%; } } /* Product quick-view ====================================== Defines the styling of the product quick-view page. The product quick-view is an element during the checkout process in Shopware 5 that displays the user the important information of his product without having to switch to the product detail page and interrupt the checkout. */ .product--quick-view { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .product--quick-view .quick-view--image { height: 12.5rem; border-radius: 3px; background-clip: padding-box; margin: 0rem 0rem 1.25rem 0rem; border: 1px solid #c8c8c8; width: 100%; display: block; position: relative; float: left; } .product--quick-view .quick-view--image img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .product--quick-view .quick-view--title { font-size: 1.125rem; color: #009033; display: block; font-weight: 700; } .product--quick-view .quick-view--title:hover { color: #113c62; } .product--quick-view .quick-view--supplier { font-size: 0.875rem; padding: 0.625rem 0rem 0.3125rem 0rem; font-weight: 700; } .product--quick-view .quick-view--description-title { font-size: 1rem; padding-bottom: 0.3125rem; margin-top: 0.9375rem; color: #009033; border-bottom: 1px solid #c8c8c8; font-weight: 700; clear: both; } .product--quick-view .quick-view--description { font-size: 0.875rem; padding-top: 0.625rem; color: #00cc00; } .product--quick-view .quick-view--description, .product--quick-view .quick-view--description > p { margin: 0; } @media screen and (min-width: 30em) { .product--quick-view { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .product--quick-view .quick-view--image { width: 50%; } .product--quick-view .quick-view--header { padding-left: 1.25rem; width: 50%; float: right; } .product--quick-view .quick-view--description-title { margin-top: 0; } } /* Hidden Captcha ====================================== Hides a form field so a human will omit it while a bot still fills it in and thus identifies as bot. Is used to hide the label as well. */ .c-firstname-confirmation { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Modules ================================================== The `modules.less` file contains the imports to all module elements of Shopware. Mixin specific documentation can be found inside each mixin file. */ /* Global ========================================== Defines the global styles of Shopware. It contains the global modifier classes that help working with the Shopware elements and the typographic styles. ######Global modifier classes Add a `is--` class to an element to easily change the properties. `.is--rounded` - changes the border-radius to 3pxgi<br/> `.is--block` - sets element to display: block<br/> `.is--inline` - sets element to display: inline<br/> `.is--inline-block` - sets element to display: inline-block<br/> `.is--hidden` - sets element to display: none<br/> `.is--invisible` - sets element to visibility: none<br/> `.is--align-left` - sets element to text-align: left;<br/> `.is--align-right` - sets element to text-align: right<br/> `.is--align-center` - sets element to text-align: center<br/> `.is--underline` - sets element to text-decoration: underline<br/> `.is--line-through` - sets element to text-decoration: line-through<br/> `.is--uppercase` - sets element to text-transform: uppercase<br/> `.is--strong` - sets element to font-weight: @font-bold-weight<br/> `.is--bold` - sets element to font-weight: @font-bold-weight<br/> `.is--italic` - sets element to font-style: italic<br/> `.is--nowrap` - sets element to white-space: nowrap<br/> `.is--dark` - changes color to @text-color-dark<br/> `.is--light` - changes color to darken(@gray-dark, 20%)<br/> `.is--soft` - changes color to @gray-dark<br/> */ * { box-sizing: border-box; } html { width: 100%; height: 100%; } html.no--scroll { position: relative; overflow: hidden; } html.no--scroll body { overflow: hidden; } body { font-size: 0.875rem; font-family: "Eurostile", "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 500; color: #113c62; background: #ffffff; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; max-height: 100%; height: auto; } a { color: #113c62; text-decoration: none; } ul { margin: 0; padding: 0; } .product--rating i[class^=icon] { color: #f1c40f; } .product--rating i.icon--star-empty { color: #c8c8c8; } h1, h2, h3, h4, h5, h6 { line-height: 1.625rem; margin: 1.75rem 0rem 0.625rem 0rem; font-family: "Eurostile", "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 700; color: #113c62; } h1 { font-size: 1.625rem; line-height: 1.75rem; margin: 2.125rem 0rem 1.25rem 0rem; color: #113c62; } h2 { font-size: 1.3125rem; } h3 { font-size: 1.125rem; } h4 { font-size: 1rem; } h5 { font-size: 0.875rem; } h6 { font-size: 0.75rem; } p { font-size: 0.875rem; line-height: 1.5rem; margin: 0rem 0rem 1.25rem 0rem; } blockquote { padding: 0.625rem 0.625rem 0.625rem 0.625rem; border-radius: 3px; background-clip: padding-box; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); background: #646464; text-align: left; margin: 0; } .ajax-loader { display: none; } .is--rounded { border-radius: 3px; background-clip: padding-box; } .is--block { display: block !important; } .is--inline { display: inline !important; } .is--inline-block { display: inline-block !important; } .is--hidden { display: none !important; } .is--invisible { visibility: hidden !important; } .is--align-left { text-align: left !important; } .is--align-right { text-align: right !important; } .is--align-center { text-align: center !important; } .is--underline { text-decoration: underline !important; } .is--line-through { text-decoration: line-through !important; } .is--uppercase { text-transform: uppercase !important; } .is--strong { font-weight: 700 !important; } .is--bold { font-weight: 700 !important; } .is--italic { font-style: italic; } .is--nowrap { white-space: nowrap !important; } .is--dark { color: #113c62 !important; } .is--light { color: #4a4a4a !important; } .is--soft { color: #7d7d7d !important; } .is--fluid { width: 100% !important; } .left { float: left; } .right { float: right; } ::-moz-placeholder { color: #1c64a3; } ::-webkit-input-placeholder { color: #1c64a3; } :-ms-input-placeholder { color: #1c64a3; } .page-wrap { min-width: 20rem; } .content-main:after, .content--wrapper:after { content: ""; display: table; clear: both; } .content-main::after, .content--wrapper::after { content: ""; display: table; clear: both; } .content-main--inner { padding: 0rem 0.625rem 1rem 0.625rem; } .content-main--inner:after { content: ""; display: table; clear: both; } .content-main--inner::after { content: ""; display: table; clear: both; } .content { width: 100%; float: left; } @media screen and (min-width: 48em) { .content-main { box-shadow: 0 0 4px 1px #c8c8c8; } .content-main:not(.is--small) { min-height: 46.875rem; } .content-main--inner { padding: 0rem 1.875rem 1rem 1.875rem; width: 100%; } } @media screen and (min-width: 78.75em) { .content-main { margin-top: 1.25rem; margin-bottom: 2.8125rem; } .content-main:not(.is--small) { min-height: 43.75rem; } .content-main--inner { padding: 0rem 3.125rem 3.125rem 3.125rem; } } /* Header ========================================== Defines the styles of the Shopware storeview header and its components. It contains the viewport specific styles inside media queries. The header sizes are defined by the unitize mixin. More precise designations are commented inside the document. */ .header-main { padding-bottom: 0.625rem; background: #fff; border-bottom: 1px solid #113c62; } .header-main .top-bar { display: none; } .header-main .logo-main { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .header-main .logo-main .logo--link { height: 2.1875rem; display: inline-block; max-width: 100%; } .header-main .logo-main .logo--shop { height: 2.1875rem; width: 50%; } .header-main .logo-main .logo--supportinfo { display: none; } .header-main .header--navigation { position: relative; } .is--ctl-checkout.is--minimal-header .header-main, .is--ctl-register.is--minimal-header .header-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main { border-bottom: 1px solid #113c62; } .is--ctl-checkout.is--minimal-header .header-main .logo-main, .is--ctl-register.is--minimal-header .header-main .logo-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main { width: 100%; } .is--ctl-checkout.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop { width: 50%; } .is--ctl-checkout.is--minimal-header .header-main .logo--link, .is--ctl-register.is--minimal-header .header-main .logo--link, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--link { margin-top: 0.625rem; } .is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo, .is--ctl-register.is--minimal-header .header-main .logo--supportinfo, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo { display: none; } .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop, .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop { margin-top: 0.625rem; width: 40%; float: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shop--navigation { position: relative; } .shop--navigation .navigation--list { width: 100%; text-align: right; } .shop--navigation .navigation--entry { margin-right: 0.3125rem; display: inline-block; } .shop--navigation .navigation--entry .btn { height: 2.5rem; width: 2.5rem; vertical-align: middle; } .shop--navigation .navigation--entry .cart--link { padding: 0.125rem 0.625rem 0.125rem 0.375rem; } .shop--navigation .navigation--entry .account--link { padding: 0.125rem 0.625rem 0.125rem 0.5rem; } .shop--navigation .navigation--entry .account--link.account--user-loggedin:after { width: 1rem; height: 1rem; top: -0.3125rem; right: -0.3125rem; line-height: 1.125rem; font-size: 0.5rem; border-radius: 50%; background-clip: padding-box; content: "\e60c"; display: inline-block; position: absolute; background: #2ecc71; font-family: 'shopware'; color: #fff; } .shop--navigation .navigation--entry .icon--basket, .shop--navigation .navigation--entry .icon--account { font-size: 1.3125rem; display: inline; position: relative; vertical-align: middle; top: 0; left: 0; } .shop--navigation .navigation--entry .icon--heart { font-size: 1.125rem; vertical-align: middle; } .shop--navigation .navigation--entry .icon--search { font-size: 1.375rem; vertical-align: middle; } .shop--navigation .cart--quantity, .shop--navigation .notes--quantity { top: -0.25rem; left: 1.4375rem; position: absolute; margin: 0; } .shop--navigation .entry--link { text-align: center; text-decoration: none; } .shop--navigation .main-search--form, .shop--navigation .account--display, .shop--navigation .cart--display, .shop--navigation .cart--amount, .shop--navigation .search--display { display: none; } .shop--navigation .entry--search .is--active.btn { background: #ffffff; color: #113c62; border-color: #113c62; } .shop--navigation .entry--account { position: relative; } .shop--navigation .entry--cart { margin-right: 0.75rem; position: relative; } .shop--navigation .entry--menu-left { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 0; left: 0; position: absolute; display: block; font-weight: 700; text-align: left; } .shop--navigation .entry--menu-left .btn { padding-left: 3rem; line-height: 2.1875rem; font-size: 1.0625rem; height: 2.5rem; color: #00cc00; width: auto; background: 0 none; border: 0 none; } .shop--navigation .entry--menu-left .icon--menu { font-size: 1.25rem; } .main-search--form { padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 100%; left: 0; top: 0; position: absolute; z-index: 3000; } .main-search--form .main-search--field { padding: 0.5625rem 2.375rem 0.5625rem 0.5625rem; height: 2.5rem; background: #fff; vertical-align: middle; width: 100%; position: relative; } .main-search--form .main-search--button { -webkit-appearance: none; -moz-appearance: none; appearance: none; top: 0.625rem; bottom: 0.625rem; right: 0.625rem; font-size: 1.25rem; padding: 0rem 0.625rem 0rem 0.625rem; line-height: 1; position: absolute; z-index: 2; border: 0 none; background: transparent; color: #113c62; outline: none; } .main-search--form .main-search--text { display: none; } .account--menu.is--personalized .navigation--logout-personalized { display: inline-block; } .account--menu.is--personalized .navigation--logout { display: block; } .account--menu.is--personalized .navigation--link.navigation--personalized { padding-top: 0.5625rem; padding-left: 1.4375rem; padding-bottom: 0.5625rem; line-height: 1.25rem; position: relative; color: #113c62; font-weight: 500; } .account--menu.is--personalized .navigation--link.navigation--personalized:before, .account--menu.is--personalized .navigation--link.navigation--personalized::before { width: 1rem; height: 1rem; left: 0.125rem; content: "\e614"; font-family: 'shopware'; position: absolute; } .account--menu.is--personalized .navigation--link.navigation--personalized [class^="icon--"] { margin: 0rem 0.3125rem 0rem 0rem; display: inline-block; } .account--menu.is--personalized .navigation--link.navigation--personalized .icon--logout { position: relative; top: 0.625rem; } .account--menu.is--personalized .navigation--link.navigation--personalized:hover { color: #113c62; } .off-canvas .account--menu.is--personalized .navigation--signin { border-bottom: none; } .account--dropdown-navigation { display: none; text-align: left; } .account--dropdown-navigation .navigation--logout-personalized { display: inline-block; } .account--dropdown-navigation .navigation--logout { display: block; } .account--dropdown-navigation .navigation--signin { padding-top: 0.9375rem; padding-bottom: 0.9375rem; margin-top: 0.4375rem; border-bottom: 1px solid #c8c8c8; display: block; text-align: center; } .account--dropdown-navigation .navigation--signin .navigation--signin-btn.btn { margin-bottom: 0.3125rem; width: 95%; text-align: center; } .account--dropdown-navigation .navigation--register { font-size: 0.8125rem; } .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized { line-height: 1.25rem; padding-left: 2.0625rem; color: #113c62; font-weight: 500; } .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized:before, .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized::before { left: 0.625rem; } .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized:hover { color: #113c62; } .account--dropdown-navigation.off-canvas { background: #646464; } .account--dropdown-navigation.off-canvas .account--menu, .account--dropdown-navigation.off-canvas .sidebar--navigation { text-align: left; } .account--dropdown-navigation.off-canvas .account--menu .navigation--entry, .account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry { display: block; margin: 0; } .account--dropdown-navigation.off-canvas .account--menu .navigation--entry .navigation--link.link--logout.navigation--personalized, .account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry .navigation--link.link--logout.navigation--personalized { padding-top: 0.5625rem; padding-bottom: 0.5625rem; } .account--dropdown-navigation.off-canvas .account--menu .navigation--entry .navigation--link.link--logout.navigation--personalized [class^="icon--"], .account--dropdown-navigation.off-canvas .sidebar--navigation .navigation--entry .navigation--link.link--logout.navigation--personalized [class^="icon--"] { margin: 0rem 0.3125rem 0rem 0rem; display: inline-block; } .account--dropdown-navigation.off-canvas .account--close-off-canvas { color: #fff; font-weight: 700; } .has--csstransforms .entry--search .entry--trigger.is--active::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 0.9375rem; height: 0.9375rem; margin-top: 0.5rem; margin-left: 0.0625rem; background: #5f5f5f; content: ''; display: block; } .entry--search.is--active .main-search--form { top: 3.125rem; background: #5f5f5f; left: 0; display: block; position: absolute; } .header-main.is--active-searchfield { padding-bottom: 4.375rem; } .has--cssanimations .form--ajax-loader { top: 1.25rem; right: 3.4375rem; position: absolute; display: none; } .has--cssanimations .form--ajax-loader::before { width: 1rem; height: 1rem; border-radius: 100%; background-clip: padding-box; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; border: 2px solid #c8c8c8; border-top: 2px solid #494949; display: block; content: ""; } .has--no-cssanimations .form--ajax-loader { top: 1.5rem; right: 3.4375rem; width: 1rem; height: 1rem; position: absolute; display: none; background-image: url('../../themes/Frontend/Responsive/frontend/_public/src/img/icons/loading-indicator.gif?02f1aab01cb0fcc34420d09bb0d4b382'); } .main-search--results { top: 6.875rem; position: absolute; width: 100%; left: 0; text-align: left; z-index: 3500; display: none; } .main-search--results:after { content: ""; display: table; clear: both; } .main-search--results::after { content: ""; display: table; clear: both; } .results--list { padding: 0.625rem 0.625rem 0.625rem 0.625rem; box-shadow: 0 10px 25px -15px #000000; border-top: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8; background: #fff; -ms-touch-action: manipulation; } .results--list::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 0.75rem; height: 0.75rem; top: -0.375rem; content: ''; display: block; position: absolute; background: #fff; left: 48%; border: 1px solid #c8c8c8; border-top: 0 none; border-right: 0 none; } .results--list .list--entry, .results--list .entry--all-results { display: block; } .results--list .entry--all-results.is--active { font-weight: 700; } .results--list .entry--all-results.is--active .entry--all-results-number { font-weight: 700; } .results--list .list--entry { line-height: 1.875rem; border-bottom: 1px solid #c8c8c8; } .results--list .list--entry:last-child { border: 0 none; } .results--list .entry--no-results { width: 100%; text-align: center; list-style: none; font-weight: 500; } .results--list .is--active, .results--list .list--entry:hover { color: #113c62; } .results--list .is--active .entry--name, .results--list .list--entry:hover .entry--name, .results--list .is--active .entry--price, .results--list .list--entry:hover .entry--price { color: #113c62; } .results--list .search-result--link { padding: 0.375rem 0rem 0.375rem 0rem; display: block; } .results--list .search-result--link:after { content: ""; display: table; clear: both; } .results--list .search-result--link::after { content: ""; display: table; clear: both; } .results--list .entry--name, .results--list .entry--all-results-link, .results--list .entry--all-results-number { height: 1.875rem; line-height: 1.875rem; display: block; } .results--list .price--unit { font-size: 0.6875rem; line-height: 1.125rem; float: right; } .results--list .entry--media { height: 1.875rem; width: 10%; min-width: 10%; position: relative; text-align: center; } .results--list .entry--media .media--image { display: inline-block; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } .results--list .entry--name { padding-left: 0.625rem; width: 60%; color: #113c62; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .results--list .entry--price, .results--list .entry--all-results-number { width: 30%; text-align: right; color: #113c62; white-space: nowrap; } .results--list .entry--all-results { padding: 0.375rem 0.3125rem 0.375rem 0.3125rem; font-weight: 500; } .results--list .entry--all-results-link { width: 70%; padding: 0; } .results--list .entry--all-results-link .icon--arrow-right { top: -0.0625rem; margin: 0rem 0.5rem 0rem 0rem; position: relative; } .results--list .entry--all-results-number { font-weight: 500; color: #113c62; } .off-canvas .mobile--switches .navigation--entry { padding: 0; border: none; background: none; } @media screen and (min-width: 30em) { .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop, .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop { width: auto; } .entry--search { display: inline-block; position: absolute; left: 26%; width: 40%; } .entry--search.is--active .main-search--form { top: 0; display: inline-block; } .entry--search .entry--trigger { display: none; } .entry--search .main-search--form { box-shadow: 0 0 0 transparent; border-bottom: 0 none; padding: 0; display: inline-block; position: relative; } .entry--search .main-search--form .main-search--field { background: #969696; } .entry--search .main-search--form .main-search--field:focus { background: #fff; } .entry--search .main-search--form .main-search--button { top: 0rem; bottom: 0rem; right: 0rem; padding: 0rem 0.625rem 0rem 0.625rem; height: 2.5rem; } .main-search--results { top: 3.125rem; width: 28.125rem; margin-left: -6.875rem; } .main-search--results:after { content: ""; display: table; clear: both; } .main-search--results::after { content: ""; display: table; clear: both; } .results--list { border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; background: #fff; } .header-main.is--active-searchfield { padding-bottom: 0.625rem; } .has--cssanimations .form--ajax-loader { top: 0.625rem; right: 2.8125rem; position: absolute; } .has--no-cssanimations .form--ajax-loader { top: 0.875rem; right: 2.8125rem; position: absolute; } } @media screen and (min-width: 48em) { .header-main.is--active-searchfield { padding-bottom: 0; } .header-main { padding-bottom: 0; border-bottom: 0 none; } .header-main .container:after { content: ""; display: table; clear: both; } .header-main .container::after { content: ""; display: table; clear: both; } .header-main .top-bar { padding: 0.25rem 0rem 0.25rem 0rem; display: block; } .header-main .top-bar--navigation { width: auto; float: right; } .header-main .top-bar--navigation .navigation--entry { padding: 0rem 0.9375rem 0rem 0.9375rem; line-height: 1.5625rem; float: left; display: block; } .header-main .top-bar--navigation .navigation--entry li { line-height: normal; } .header-main .top-bar--navigation .navigation--entry, .header-main .top-bar--navigation .navigation--link { color: #113c62; cursor: pointer; } .header-main .top-bar--navigation .navigation--entry:hover, .header-main .top-bar--navigation .navigation--link:hover { color: #113c62; } .header-main .top-bar--navigation .field--select, .header-main .top-bar--navigation .navigation--entry { height: 1.5625rem; } .header-main .top-bar--navigation .field--select { position: relative; } .header-main .top-bar--navigation .select-field { height: 1.5625rem; } .header-main .top-bar--navigation .select-field select { border-radius: 0; padding: 0rem 1.125rem 0rem 0rem; line-height: 1.5625rem; background: none; border: 0 none; } .header-main .top-bar--navigation .select-field:after { height: 1.5625rem; line-height: 1.5rem; width: auto; border: 0 none; } .header-main .top-bar--navigation .top-bar--language .select-field { width: 2rem; } .header-main .top-bar--navigation .top-bar--language .select-field select { text-indent: -9999px; } .header-main .top-bar--navigation .top-bar--language .language--flag { margin-top: -0.375rem; position: absolute; z-index: 900; top: 50%; left: 0; pointer-events: none; } .header-main .top-bar--navigation .entry--service { position: relative; } .header-main .top-bar--navigation .entry--service:after, .header-main .top-bar--navigation .entry--service::after { top: -0.1875rem; margin-left: 0.3125rem; content: "\e612"; font-family: 'shopware'; position: relative; } .header-main .top-bar--navigation .entry--service.js--is--dropdown-active { color: #113c62; } .header-main .top-bar--navigation .service--list { min-width: 9.375rem; padding: 0.3125rem 0rem 0.3125rem 0rem; top: 2rem; right: 0.75rem; text-align: left; position: absolute; display: none; list-style: none; background: #fff; z-index: 3500; border: 1px solid #c8c8c8; } .header-main .top-bar--navigation .service--list::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 0.5rem; height: 0.5rem; top: -0.3125rem; right: 1.125rem; content: ''; display: block; position: absolute; background: #fff; border-color: #c8c8c8; border-width: 0 0 1px 1px; border-style: solid; } .header-main .top-bar--navigation .service--list .service--link { padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; display: block; color: #113c62; } .header-main .top-bar--navigation .service--list .service--link:hover { color: #113c62; } .header-main .top-bar--navigation .js--is--dropdown-active .service--list { display: block; } .header-main .header--navigation { padding: 0.625rem 0rem 0.625rem 0rem; } .header-main .logo-main { padding: 0rem 0rem 0rem 0.625rem; width: 35%; } .header-main .logo-main .logo--link { height: 3.125rem; } .header-main .logo-main .logo--shop { height: 3.125rem; width: 82%; } .is--ctl-checkout.is--minimal-header .header-main, .is--ctl-register.is--minimal-header .header-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main { box-shadow: 0 1px 2px 0 #c8c8c8; } .is--ctl-checkout.is--minimal-header .header-main .logo-main, .is--ctl-register.is--minimal-header .header-main .logo-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main { padding-right: 0.625rem; width: 100%; } .is--ctl-checkout.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop { width: 35%; } .is--ctl-checkout.is--minimal-header .header-main .logo--link, .is--ctl-register.is--minimal-header .header-main .logo--link, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--link { margin-top: 0; width: 80%; } .is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo, .is--ctl-register.is--minimal-header .header-main .logo--supportinfo, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo { padding: 0.3125rem 0rem 0.3125rem 0rem; display: block; width: 35%; } .logo-main, .shop--navigation { float: left; } .shop--navigation { width: 65%; } .shop--navigation .navigation--list { background-image: none; text-align: right; } .shop--navigation .navigation--entry { border-radius: 3px; background-clip: padding-box; border: 0 none; width: auto; float: none; display: inline-block; } .shop--navigation .entry--cart .entry--link { padding: 0; display: inline-block; } .shop--navigation .entry--link { font-weight: 500; } .shop--navigation .entry--menu-left { display: none; } .shop--navigation .cart--quantity, .shop--navigation .search--display, .shop--navigation .entry--account { display: inline-block; } .shop--navigation .entry--search { font-size: 0.875rem; position: absolute; left: 3%; margin-right: 10%; background: #fff; padding: 0; border: 0 none; width: 50%; } .shop--navigation .entry--search .entry--trigger { display: none; } .shop--navigation .main-search--form { box-shadow: 0 0 0 transparent; display: block; padding: 0; border: 0 none; } .main-search--form { left: auto; } .account--dropdown-navigation { min-width: 12.5rem; max-width: 15.625rem; padding: 0.3125rem 0rem 0.3125rem 0rem; top: 2.8125rem; display: none; position: absolute; right: 0; z-index: 3500; text-align: left; } .js--is--dropdown-active .account--dropdown-navigation { display: block; } .account--dropdown-navigation .navigation--signin { padding-bottom: 0.375rem; margin-bottom: 0.375rem; margin-top: 0.3125rem; padding-top: 0; } .account--dropdown-navigation .navigation--signin .navigation--signin-btn.btn { width: 100%; margin-bottom: 0; } .account--dropdown-navigation .navigation--smartphone { display: none; } .account--dropdown-navigation .account--menu { text-align: left; background: #fff; } .account--dropdown-navigation .account--menu::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 0.5rem; height: 0.5rem; right: 1.125rem; content: ''; display: block; position: absolute; background: #fff; border-color: #c8c8c8; border-width: 0 0 1px 1px; border-style: solid; top: 0; } .account--dropdown-navigation .account--menu .sidebar--navigation { text-align: left; } .account--dropdown-navigation .account--menu .sidebar--navigation .navigation--entry { display: block; } .account--dropdown-navigation .account--menu .sidebar--navigation .navigation--link { padding: 0.1875rem 0rem 0.1875rem 0rem; } .account--dropdown-navigation .account--menu .sidebar--navigation .link--logout { padding: 0.625rem 0rem 0rem 1.4375rem; } .account--dropdown-navigation .account--menu .sidebar--navigation .link--logout:before { left: 0.125rem; } .account--dropdown-navigation .account--menu .sidebar--navigation .link--abort { padding-top: 0rem; margin-top: 0rem; border-top: 0 none; white-space: nowrap; } .main-search--results { width: 28.125rem; margin-left: -14.0625rem; top: 3.4375rem; left: 50%; } .main-search--results:after { content: ""; display: table; clear: both; } .main-search--results::after { content: ""; display: table; clear: both; } } @media screen and (min-width: 64em) { .header-main .logo-main { width: 30%; } .header-main .shop--navigation { width: 70%; } .shop--navigation .entry--search { width: 40%; margin-right: 8%; } .is--ctl-checkout.is--minimal-header .header-main, .is--ctl-register.is--minimal-header .header-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main { box-shadow: 0 1px 2px 0 #c8c8c8; } .is--ctl-checkout.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop { width: 30%; } .is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo, .is--ctl-register.is--minimal-header .header-main .logo--supportinfo, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo { width: 35%; } .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop, .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop { display: inline-block; float: right; } .navigation--list .navigation--entry .btn { width: auto; } .navigation--list .entry--cart .cart--link { padding-left: 3.125rem; } .navigation--list .entry--cart .cart--link .cart--quantity { display: inline-block; } .navigation--list .entry--cart .cart--link .cart--amount { display: inline-block; color: #113c62; font-weight: 700; } .navigation--list .entry--cart .icon--basket { left: 0.5rem; display: block; position: absolute; top: 50%; } .navigation--list .entry--account .account--link { padding-left: 2.25rem; } .navigation--list .entry--account .account--link.account--user-loggedin:after { content: none; display: none; } .navigation--list .entry--account .icon--account { left: 0.5rem; display: block; position: absolute; top: 50%; } .navigation--list .account--display { display: inline-block; } .navigation--list .account--display.navigation--personalized { line-height: 1rem; font-size: 0.75rem; max-width: 5.625rem; margin-top: 0.125rem; text-align: left; } .navigation--list .account--display.navigation--personalized .account--display-greeting { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 700; } } @media screen and (min-width: 78.75em) { .header-main .top-bar { margin-bottom: 0.125rem; } .header-main .logo--shop { width: 75%; } .is--ctl-checkout.is--minimal-header .header-main, .is--ctl-register.is--minimal-header .header-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main { box-shadow: 0 1px 2px 0 #c8c8c8; } .is--ctl-checkout.is--minimal-header .header-main .logo-main, .is--ctl-register.is--minimal-header .header-main .logo-main, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo-main { padding-right: 0; } .is--ctl-checkout.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header .header-main .logo--shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--shop { width: 30%; } .is--ctl-checkout.is--minimal-header .header-main .logo--supportinfo, .is--ctl-register.is--minimal-header .header-main .logo--supportinfo, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .logo--supportinfo { width: 35%; } .is--ctl-checkout.is--minimal-header .header-main .btn--back-top-shop, .is--ctl-register.is--minimal-header .header-main .btn--back-top-shop, .is--ctl-register.is--minimal-header.is--target-checkout .header-main .btn--back-top-shop { display: inline-block; float: right; } .shop--navigation { width: 75%; } .shop--navigation .navigation--link { padding: 0.5rem 1rem 1rem 1rem; } .shop--navigation .entry--link { font-size: 0.875rem; } .shop--navigation .entry--trigger { margin-right: 0.875rem; } .shop--navigation .entry--search { width: 40%; } .shop--navigation .entry--cart { margin-right: 0; } .account--menu.is--personalized .navigation--link.navigation--personalized { padding-bottom: 0; } .header-main .top-bar--navigation .service--list { right: 0; } .header-main .top-bar--navigation .navigation--entry:last-child { padding-right: 0; } .cart--display { margin: 0rem 1.5625rem 0rem 0.3125rem; font-weight: 700; color: #113c62; } } /* Main navigation ========================================== Contains the styles of the main navigation of the Shopware storefront. The main navigation is positioned above the content section. It contains the viewport specific styles inside media queries. */ .navigation-main { background: #fff; display: none; } @media screen and (min-width: 48em) { .navigation-main { border-bottom: 1px solid #113c62; display: block; position: relative; } .navigation-main .navigation--list { padding: 0rem 0.625rem 0rem 0.625rem; margin: 0; position: relative; white-space: nowrap; } .navigation-main .navigation--list:after { content: ""; display: table; clear: both; } .navigation-main .navigation--list::after { content: ""; display: table; clear: both; } .navigation-main .navigation--entry { display: inline-block; -ms-touch-action: none; } .navigation-main .navigation--link { -webkit-transition: none; transition: none; padding: 0.5rem 0.875rem 0.5rem 0.875rem; font-size: 1rem; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; margin: 0; display: block; cursor: pointer; color: #113c62; } .navigation-main .navigation--link:hover { color: #113c62; } .navigation-main .is--active .navigation--link { background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); font-weight: 700; color: #fff; } .navigation-main .is--active .navigation--link:hover { color: #fff; } } @media screen and (min-width: 78.75em) { .navigation-main .navigation--list { padding: 0; } } /* Breadcrumb ================================= Defines the styling for the content breadcrumb elements that display the page location. Every breadcrumb entry is followed by a breadcrumb separator list-entry with an arrow icon. The main breadcrumb is positioned below the main navigation bar. ``` <nav class="content--breadcrumb"> <ul class="breadcrumb--list" role="menu"> <li class="breadcrumb--entry" role="menuitem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="breadcrumb--link" href="" itemprop="url"> <span class="breadcrumb--title" itemprop="title"> Breadcrumb entry 1 </span> </a> </li> <li class="breadcrumb--separator"> <i class="icon--arrow-right"></i> </li> <li class="breadcrumb--entry" role="menuitem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="breadcrumb--link" href="" itemprop="url"> <span class="breadcrumb--title" itemprop="title"> Breadcrumb entry 2 </span> </a> </li> </ul> </nav> ``` */ .content--breadcrumb { font-size: 0.875rem; display: block; float: none; border-bottom: 1px solid #c8c8c8; } .content--breadcrumb:after { content: ""; display: table; clear: both; } .content--breadcrumb::after { content: ""; display: table; clear: both; } .content--breadcrumb .breadcrumb--list { overflow: hidden; } .content--breadcrumb .breadcrumb--entry, .content--breadcrumb .breadcrumb--separator { display: none; float: left; list-style: none; white-space: nowrap; overflow: hidden; } .content--breadcrumb .breadcrumb--entry:last-child, .content--breadcrumb .breadcrumb--separator:last-child { display: list-item; } .content--breadcrumb .breadcrumb--link, .content--breadcrumb .breadcrumb--separator { line-height: 1.5rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .content--breadcrumb .breadcrumb--separator { font-size: 0.5625rem; } .content--breadcrumb .breadcrumb--link { display: block; color: #113c62; } .content--breadcrumb .breadcrumb--link:hover { color: #113c62; } .content--breadcrumb .is--active .breadcrumb--link { color: #113c62; } .content--breadcrumb .breadcrumb--button { padding: 0.625rem 0rem 0.625rem 0.625rem; display: inline-block; float: left; list-style: none; } .content--breadcrumb .breadcrumb--button .breadcrumb--title { padding-right: 1.25rem; border-right: 1px solid #c8c8c8; } .content--breadcrumb .breadcrumb--button .icon--arrow-left { font-size: 0.5625rem; margin-right: 0.625rem; } @media screen and (min-width: 48em) { .content--breadcrumb { padding: 0rem 1.25rem 0rem 1.25rem; } .content--breadcrumb .breadcrumb--list { padding-left: 0; } .content--breadcrumb .breadcrumb--entry, .content--breadcrumb .breadcrumb--separator { display: list-item; } .content--breadcrumb .breadcrumb--button { margin-right: 0.625rem; padding: 0.625rem 1.875rem 0.625rem 0.625rem; } .content--breadcrumb .breadcrumb--button .breadcrumb--title { padding-right: 0rem; border-right: 0 none; } } @media screen and (min-width: 78.75em) { .content--breadcrumb { padding: 0rem 2.5rem 0rem 2.5rem; } } /* Detail ======================================= Defines the styling for the Shopware 5 detail page elements. It contains the product actions, the product information such as pictures and details and the user ratings of the product. */ .product--details .product--actions { margin: 0rem 0rem 0.625rem 0rem; padding: 0rem 0rem 0.625rem 0rem; border-top: 0 none; border-bottom: 1px solid #c8c8c8; } .product--details .product--actions:after { content: ""; display: table; clear: both; } .product--details .product--actions::after { content: ""; display: table; clear: both; } .product--details .product--actions .js--off-canvas-button { display: inline-block; } .product--details .product--header { padding: 0.625rem 0rem 0.625rem 0rem; min-height: 4.375rem; box-sizing: content-box; } .product--details .product--header:after { content: ""; display: table; clear: both; } .product--details .product--header::after { content: ""; display: table; clear: both; } .product--details .product--header .product--title { font-size: 1.3125rem; margin: 0; padding: 0; font-weight: 700; color: #113c62; } .product--details .product--supplier, .product--details .product--rating-container { width: 50%; } .product--details .product--rating-link { display: inline-block; } .product--details .product--rating-link.js--off-canvas-button { border: none; margin: unset; padding: unset; } .product--details .product--rating { font-size: 1.1875rem; display: block; letter-spacing: -1px; color: #113c62; } .product--details .product--rating:after { content: ""; display: table; clear: both; } .product--details .product--rating::after { content: ""; display: table; clear: both; } .product--details .product--rating .rating--count-wrapper { font-size: 1rem; margin-left: 0.625rem; line-height: 1.5625rem; vertical-align: text-top; letter-spacing: 1px; } .product--details .product--supplier { height: 2.1875rem; text-align: right; float: right; margin: 0; } .product--details .product--supplier .product--supplier-link { height: 2.1875rem; display: inline-block; max-width: 100%; } .product--details .product--supplier.image--svg img { height: 100%; } .product--details .product--rating-container { margin: 0.3125rem 0rem 0rem 0rem; float: left; } .product--details .product--image-container { margin: 0rem 0rem 1.25rem 0rem; width: 100%; } .product--details .product--image-container .image-slider--slide { margin-right: -0.5px; } .product--details .alert { margin: 0rem 0rem 0.625rem 0rem; } .product--details .product--tax { font-size: 0.75rem; margin: 0; } .product--details .product--buybox { margin: 0rem 0rem 0.625rem 0rem; width: 100%; } .product--details .product--buybox .product--price { margin: 0; } .product--details .product--buybox .price--label { font-weight: 700; } .product--details .product--buybox .price--line-through { text-decoration: line-through; } .product--details .product--buybox .price--discount .price--content { color: #e74c3c; } .product--details .product--buybox .price--content { font-size: 1.75rem; white-space: nowrap; color: #113c62; font-weight: 700; display: inline-block; line-height: 1; } .product--details .product--buybox .content--discount { font-size: 0.875rem; padding: 0.25rem 0rem 0.25rem 0rem; white-space: nowrap; display: inline-block; } .product--details .product--buybox .price--regulation { font-size: 0.875rem; padding: 0.25rem 0rem 0.25rem 0rem; white-space: nowrap; } .product--details .product--buybox .price--discount-icon { padding: 0.375rem 0.4375rem 0.375rem 0.4375rem; margin: 0rem 0.3125rem 0rem 0.3125rem; font-size: 0.8125rem; border-radius: 0.1875rem; display: inline-block; position: relative; background: #e74c3c; color: #ffffff; text-align: center; font-weight: 700; vertical-align: top; } .product--details .product--configurator .reset--configuration { margin: 0rem 0rem 1.25rem 0rem; white-space: nowrap; } .product--details .product--configurator .alert { margin: 0.625rem 0rem 0rem 0rem; } .product--details .buybox--form { padding: 0.625rem 0rem 0.625rem 0rem; } .product--details .buybox--quantity { margin: 0 2% 0 0; width: 35%; } .product--details .buybox--quantity .select-field select { font-size: 1rem; font-weight: 700; } .product--details .buybox--button { font-size: 1rem; white-space: nowrap; width: 63%; } .product--details .product--base-info { margin: 0.625rem 0rem 0.625rem 0rem; font-size: 0.875rem; } .product--details .product--base-info .entry--label { margin: 0rem 0.5rem 0rem 0rem; width: 35%; display: inline-block; } .product--details .content--description, .product--details .content--product-reviews, .product--details .content--related-products, .product--details .content--similar-products { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .product--details .product--properties { margin: 0rem 0rem 0.625rem 0rem; } .product--details .product--properties .product--properties-table { width: 100%; background: #ffffff; } .product--details .product--properties td { padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; width: 50%; border: 0 none; } .product--details .product--properties tr:nth-child(even) td { background: #f5f5f5; } .product--details .content--title { font-size: 1.125rem; margin: 0.625rem 0rem 0.3125rem 0rem; font-weight: 700; color: #113c62; } .product--details .content--title.title--description-supplier { margin-top: 1.5625rem; } .product--details .content--link [class^=icon] { font-size: 0.625rem; margin: -0.125rem 0.5rem 0rem 0rem; } .product--details .block-prices--container { margin: 0rem 0rem 0.75rem 0rem; display: block; } .product--details .block-prices--container .block-prices--table { width: 100%; } .product--details .block-prices--container .block-prices--table td, .product--details .block-prices--container .block-prices--table th { padding: 0.25rem 0.625rem 0.25rem 0.625rem; } .product--details .block-prices--container .block-prices--table th { color: #fff; text-align: left; } .product--details .listing .product--box .panel--body { border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; } .product--details .action--form { float: left; } .product--details .action--link { background: none; border: none; margin: 0; padding: 0; font-size: 0.875rem; margin: 0rem 2.1875rem 0.3125rem 0rem; color: #113c62; white-space: nowrap; } .product--details .action--link.action--compare { display: none; } .product--details .action--link:last-child { margin-right: 0; } .product--details .action--link:hover { color: #113c62; } .product--details .action--link *[class^="icon"] { font-size: 0.75rem; margin: 0rem 0.3125rem 0rem 0rem; } .product--details .action--link *[class="icon--star"] { font-size: 0.875rem; margin: 0rem 0.3125rem 0rem 0rem; } .product--details .action--compare { display: none; } .product--details .link--notepad:focus { outline: none; } .product--details .link--notepad.js--is-saved { color: #2ecc71; } .product--details .price--unit { font-size: 0.75rem; } .product--details .delivery--text { font-size: 0.875rem; } .product--details .similar--content .product-slider, .product--details .viewed--content .product-slider, .product--details .bought--content .product-slider, .product--details .related--content .product-slider, .product--details .product-streams--content .product-slider { padding: 0.625rem 0.625rem 0.625rem 0.625rem; min-height: 16.875rem; } .product--details .similar--content .product-slider--arrow.arrow--prev, .product--details .viewed--content .product-slider--arrow.arrow--prev, .product--details .bought--content .product-slider--arrow.arrow--prev, .product--details .related--content .product-slider--arrow.arrow--prev, .product--details .product-streams--content .product-slider--arrow.arrow--prev { border-left: 0 none; } .product--details .similar--content .product-slider--arrow.arrow--next, .product--details .viewed--content .product-slider--arrow.arrow--next, .product--details .bought--content .product-slider--arrow.arrow--next, .product--details .related--content .product-slider--arrow.arrow--next, .product--details .product-streams--content .product-slider--arrow.arrow--next { border-right: 0 none; } .product--navigation { display: none; } .review--form .review--field { margin: 0rem 0rem 0.625rem 0rem; width: 100%; } .review--form .review--field.select-field { max-width: 100%; } .review--form .review--notice { font-size: 0.75rem; } .product--description ol, .product--description ul { margin: 0rem 1rem 1rem 1rem; padding: 0; } .product--description ol li, .product--description ul li { margin: 0rem 0rem 0rem 0.375rem; } .review--entry { border-radius: 3px; background-clip: padding-box; margin: 0rem 0rem 1.5625rem 0rem; padding: 1.25rem 1.25rem 1.25rem 1.25rem; font-size: 0.875rem; background: #fff; border: 1px solid #c8c8c8; } .review--entry.is--last { margin: 0rem 0rem 1.875rem 0rem; } .review--entry.has--answer { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; margin: 0; } .review--entry .entry--header, .review--entry .product--rating { margin-bottom: 0.625rem; } .review--entry .content--label { margin: 0rem 0.5rem 0rem 0rem; float: left; } .review--entry .content--field:after { content: ""; display: table; clear: both; } .review--entry .content--field::after { content: ""; display: table; clear: both; } .review--entry .content--title { font-size: 1rem; } .review--entry .review--content { font-size: 0.875rem; margin: 0; } .review--entry.is--answer { margin: 0rem 0.625rem 1.875rem 0.625rem; padding: 1.25rem 0.625rem 1.25rem 0.625rem; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-clip: padding-box; background: #646464; border-top: 0; } .review--entry.is--answer .entry--header { position: relative; border: 0 none; } .review--entry.is--answer .entry--header::after { -webkit-transform: rotate(225deg); transform: rotate(225deg); top: -0.5625rem; background: #646464; } .content--product-reviews .alert { margin: 0rem 0rem 1rem 0rem; } .content--product-reviews .captcha--notice { font-size: 0.75rem; line-height: 1.2; } .product--rating-count { margin-left: 0.5rem; padding: 0.125rem 0.4375rem 0.125rem 0.4375rem; border-radius: 3px; background-clip: padding-box; background: #00cc00; color: #fff; font-weight: 700; } .product--notification { margin: 0rem 0rem 1rem 0rem; } .product--notification .alert { margin: 0rem 0rem 0.5rem 0rem; word-wrap: break-word; } .product--notification .notification--field { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; margin: 0rem 0rem 0.625rem 0rem; position: relative; width: 80%; } .product--notification .notification--field:focus { z-index: 1; } .product--notification .notification--button { padding: 0.1875rem 0.625rem 0.1875rem 0.625rem; margin: 0rem 0rem 0.625rem 0rem; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; margin-left: -0.0625rem; position: relative; width: 20%; } .product--notification .notification--button .icon--mail { font-size: 0.75rem; } .product--notification .privacy-information { margin: 0rem 0rem 0rem 0rem; } .configurator--form { padding: 0.625rem 0rem 0.625rem 0rem; } .configurator--form .select-field { max-width: 100%; } .configurator--label { margin: 0.375rem 0rem 0.25rem 0rem; font-size: 0.875rem; font-weight: 700; } .is--ctl-detail .content-main--inner { background: #fff; position: relative; } .link--prev-button, .link--next-button { display: none; } .base-info--entry { margin: 0rem 0rem 0.3125rem 0rem; } .tab--navigation { display: none; } .tab--title { color: #113c62; font-weight: 700; } .tab--title:hover { color: #113c62; } .tab--title:after { right: 0.625rem; font-size: 1.125rem; position: absolute; top: 50%; margin-top: -9px; content: ""; font-family: 'shopware'; } .tab-menu--cross-selling .tab--container { margin: 0rem 0rem 0.625rem 0rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; display: none; } .tab-menu--cross-selling .tab--container.has--content { display: block; } .tab-menu--cross-selling .tab--container:last-child { margin: 0rem 0rem 0rem 0rem; } .tab-menu--cross-selling .tab--header.is--active { border-bottom: 1px solid #c8c8c8; } .tab-menu--cross-selling .tab--header.is--active .tab--title:after { content: "\e68e"; } .tab-menu--cross-selling .tab--title { padding: 0.625rem 2.375rem 0.625rem 0.625rem; line-height: 1.25rem; position: relative; display: block; } .tab-menu--cross-selling .tab--title:after { content: "\e68f"; } @media screen and (min-width: 30em) { .product--details .configurator--form .select-field { height: 2.375rem; max-width: 80%; } .product--details .configurator--form .select-field select { line-height: 2.25rem; } .product--details .configurator--form .select-field:after { height: 2.25rem; } .product--details .configurator--form, .product--details .buybox--form { width: 80%; } .tab-menu--product { margin: 0rem 0rem 0.625rem 0rem; } .tab-menu--product .tab--navigation { display: block; } .tab-menu--product .tab--header, .tab-menu--product .tab--preview { display: none; } } @media screen and (min-width: 48em) { .product--details .product--header { padding: 1.875rem 0rem 1.25rem 0rem; } .product--details .product--header .product--title { font-size: 1.75rem; line-height: 1.875rem; width: 80%; float: left; border: 0 none; } .product--details .product--supplier { height: 4.375rem; width: 20%; float: right; } .product--details .product--supplier .product--supplier-link { height: 4.375rem; } .product--details .action--link.action--compare { display: inline-block; } .product--details .product--rating-container { width: 80%; float: left; } .product--details .product--image-container { width: 100%; } .product--details .product--base-info .entry--label { margin: 0rem 0.5rem 0rem 0rem; } .product--details .content--description, .product--details .content--product-reviews { padding: 1.875rem 1.875rem 1.875rem 1.875rem; } .product--details .content--related-products, .product--details .content--similar-products { padding: 1.25rem 2.1875rem 1.25rem 2.1875rem; } .product--details .product--properties { margin: 0rem 0rem 1.25rem 0rem; } .product--details .block-prices--container { margin-top: 0.75rem; } .product--details .tab--navigation { display: block; } .product--details .tab--header, .product--details .tab--preview { display: none; } .product--details .review--entry { padding: 1.875rem 1.875rem 1.875rem 1.875rem; } .product--details .review--entry.is--answer { padding: 1.875rem 1.25rem 1.875rem 1.25rem; } .product--details .tab--container { margin: 0rem 0rem 0rem 0rem; } .product--details .tab-menu--product { margin: 0rem 0rem 1.875rem 0rem; } .product--details .tab-menu--cross-selling .tab--container { display: none; } .product--details .review--form-container { width: 80%; } } @media screen and (min-width: 64em) { .product--details .product--image-container { width: 58%; margin-right: 4%; float: left; } .product--details .product--buybox { width: 38%; } .product--details .configurator--form { padding: 0.625rem 0rem 0.625rem 0rem; } .product--details .buybox--inner { width: 100%; float: none; } .product--details .product--base-info { margin: 0.625rem 0rem 1.25rem 0rem; padding: 0; width: 100%; float: none; } .product--details .product--properties { width: 50%; } .product--details .action--link { margin-right: 1.5625rem; } .product--details .review--form-container { width: 70%; } .product--details .product--actions { padding: 0rem 0rem 0.3125rem 0rem; border-bottom: 1px solid #c8c8c8; } .product--details .product--buybox { border-bottom: 0 none; } .product--details .configurator--form, .product--details .buybox--form { width: 100%; } } @media screen and (min-width: 78.75em) { .is--ctl-detail .page-wrap { overflow-x: hidden; } .product--details .product--header { padding-top: 2.8125rem; } .product--details .review--form-container { width: 60%; } .product--navigation { display: block; position: relative; } .product--navigation .navigation--link { top: 8.75rem; display: none; position: absolute; } .product--navigation .link--prev-button, .product--navigation .link--next-button { width: 2.5rem; height: 15.9375rem; line-height: 15.9375rem; font-size: 1.5625rem; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; background: rgba(0, 204, 0, 0.1); text-align: center; color: #fff; display: block; } .product--navigation .link--prev-button .link--prev-inner, .product--navigation .link--next-button .link--prev-inner, .product--navigation .link--prev-button .link--next-inner, .product--navigation .link--next-button .link--next-inner { display: none; } .product--navigation .image--wrapper { padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem; width: 12.5rem; height: 15.9375rem; float: left; background: #fff; position: relative; } .product--navigation .image--container { -webkit-transition: all 0.45s cubic-bezier(0.16, 0.04, 0.14, 1); transition: all 0.45s cubic-bezier(0.16, 0.04, 0.14, 1); width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; position: relative; } .product--navigation .link--prev-button { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; float: left; } .product--navigation .link--prev-button:before { font-family: 'shopware'; content: "\e611"; } .product--navigation .link--next-button { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; float: right; } .product--navigation .link--next-button:before { font-family: 'shopware'; content: "\e60f"; } .product--navigation .link--prev, .product--navigation .link--next { -webkit-transition: all 0.38s cubic-bezier(0.16, 0.04, 0.14, 1); transition: all 0.38s cubic-bezier(0.16, 0.04, 0.14, 1); } .product--navigation .link--prev:hover .link--prev-button, .product--navigation .link--next:hover .link--prev-button, .product--navigation .link--prev:hover .link--next-button, .product--navigation .link--next:hover .link--next-button { background: rgba(0, 204, 0, 0.2); } .product--navigation .link--prev { left: -2.5rem; } .product--navigation .link--prev .image--container { left: 3.125rem; } .product--navigation .link--prev.can--slide:hover { left: -8.75rem; } .product--navigation .link--prev.can--slide:hover .image--container { left: 0; } .product--navigation .link--next { right: -2.5rem; } .product--navigation .link--next .image--container { right: 3.125rem; } .product--navigation .link--next.can--slide:hover { right: -8.75rem; } .product--navigation .link--next.can--slide:hover .image--container { right: 0; } .product--supplier { height: 4.375rem; } .product--supplier .product--supplier-link { height: 4.375rem; } .content--description, .content--product-reviews { padding: 0.625rem 2.8125rem 2.8125rem 2.8125rem; } .content--related-products, .content--similar-products { padding: 1.875rem 2.8125rem 1.25rem 2.8125rem; } .product--notification { margin: 0rem 0rem 1.25rem 0rem; } .product--notification .alert { margin: 0rem 0rem 0.625rem 0rem; } } /* Footer ========================================== Defines the styles for the storefront footer and its components. Contains the footer columns, the navigation elements and the vat notice/logo at the bottom of the page. It contains the viewport specific styles inside media queries. The footer element sizes are defined with the unitize mixin. */ .footer-main { background: #fff; } .footer-main .footer--phone-link { font-size: 1.1875rem; font-weight: 700; color: #00cc00; } .footer-main .footer--column { padding: 0rem 0.625rem 0rem 0.625rem; border-top: 1px solid #c8c8c8; } .footer-main .footer--column.is--last { border-bottom: 1px solid #c8c8c8; } .footer-main .column--headline { -webkit-user-select: none; user-select: none; padding: 0.5rem 0rem 0.5rem 0rem; margin: 0; font-weight: 700; color: #113c62; cursor: pointer; font-size: 1rem; line-height: 1.625rem; } .footer-main .column--headline.is--active::after { content: "\e68e"; } .footer-main .column--headline::after { font-size: 1.125rem; font-family: 'shopware'; color: #113c62; font-weight: 700; content: "\e68f"; float: right; } .footer-main .column--content { display: none; } .footer-main .column--content.is--active { display: block; } .footer-main .footer--bottom { font-size: 0.75rem; padding: 1.33333333rem 1rem 0rem 1rem; text-align: center; } .footer-main .footer--copyright { font-size: 0.8125rem; } .footer-main .footer--logo { font-size: 1.75rem; color: #009fe3; } .footer-main .navigation--list { padding: 0rem 0rem 1rem 0rem; } .footer-main .navigation--list .is--level1 { padding-bottom: 0.625rem; } .footer-main .navigation--list .is--level1 .navigation--entry { margin-left: 0.625rem; } .footer-main .navigation--link { padding: 0.625rem 0rem 0.625rem 0rem; display: block; color: #113c62; cursor: pointer; } .footer-main .navigation--link:hover { color: #113c62; } .footer-main .newsletter--form { padding: 0rem 0rem 1rem 0rem; } .footer-main .newsletter--form:after { content: ""; display: table; clear: both; } .footer-main .newsletter--form::after { content: ""; display: table; clear: both; } .footer-main .newsletter--field { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; margin: 0rem 0rem 0.625rem 0rem; position: relative; width: 87.5%; float: left; } .footer-main .newsletter--field:focus { z-index: 1; } .footer-main .newsletter--button { box-shadow: 0 0 0 transparent; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; margin: 0rem 0rem 0.625rem 0rem; padding: 0.1875rem 0.3125rem 0.1875rem 0.3125rem; margin-left: -0.0625rem; position: relative; width: 12.5%; text-align: center; float: left; } .footer-main .newsletter--button .icon--mail { font-size: 0.875rem; margin-right: 0rem; } .footer-main .newsletter--button .button--text { display: none; } .footer-main .footer--logo { padding: 0.625rem 0rem 0.625rem 0rem; } .footer-vat { margin-top: 0.625rem; padding: 0rem 0.3125rem 0rem 0.3125rem; background: transparent; } .footer--vat-info .vat-info--text { font-size: 0.75rem; margin-bottom: 0.625rem; text-align: center; } .footer-minimal { font-size: 0.8125rem; padding: 2.5rem 0.625rem 1.25rem 0.625rem; background: transparent; text-align: center; } .footer-main .footer-minimal { padding: 0; } .footer-minimal .footer--service-menu .service--list { list-style-type: none; padding: 0; margin: 0; } .footer-minimal .footer--service-menu .service--list .service--link { padding: 0.5rem 0.125rem 0.5rem 0.125rem; display: inline-block; } .footer-minimal .footer--service-menu .service--list .service--entry { display: inline-block; } .footer-minimal .footer--service-menu .service--list .service--entry:after { height: 0.625rem; width: 0.0625rem; margin: 0rem 0.3125rem 0rem 0.3125rem; border-left: 1px solid #afafaf; display: inline-block; content: ''; } .footer-minimal .footer--service-menu .service--list .service--entry:last-child:after { display: none; } .footer-minimal .footer--vat-info { margin: 0.9375rem 0rem 0.625rem 0rem; } .footer-minimal .footer--vat-info .vat-info--text { line-height: 1.125rem; margin: 0; } @media screen and (min-width: 48em) { .footer-main .footer-minimal { display: none; } } @media screen and (min-width: 48em) { .footer-main { border-top: 1px solid #c8c8c8; } .footer-main .column--headline { margin: 1.75rem 0rem 0.625rem 0rem; padding: 0; cursor: text; } .footer-main .column--headline::after { display: none; } .footer-main .footer--column { padding: 0rem 0.625rem 0rem 0rem; width: 25%; border: 0 none; } .footer-main .footer--column.is--last { padding-right: 0; border-bottom: 0 none; } .footer-main .footer--columns { padding: 0rem 1.875rem 0rem 1.875rem; border-bottom: 1px solid #c8c8c8; } .footer-main .column--content { display: block; } .footer-main .navigation--list .is--level1 { display: none; } .footer-main .navigation--entry { padding: 0; } .footer-main .navigation--link { line-height: 1.7; padding: 0; } .footer-main .newsletter--field { width: 80%; } .footer-main .newsletter--button { width: 20%; } .footer-main .newsletter--button .icon--mail { font-size: 0.75rem; } .footer-vat { padding: 0; } .footer--vat-info .vat-info--text { margin-bottom: 1.25rem; } } @media screen and (min-width: 78.75em) { .footer-main .footer--columns { padding: 0rem 0rem 1.25rem 0rem; } .footer-main .footer--bottom { font-size: 0.9375rem; } .footer-minimal { padding-top: 0; } } /* Sidebar ============================================== Defines the styling of the storefront sidebar navigation and its components. The sidebar is displayed inside the off-canvas menu on small devices. ``` <ul class="sidebar--navigation"> <li class="navigation--entry is--active has--sub-categories has--sub-children"> <a class="navigation--link is--active has--sub-categories"> Sidebar Head </a> <ul class="sidebar--navigation is--level1"> <li class="navigation--entry has--sub-children" role="menuitem"> <a class="navigation--link"> Navigation entry </a> <a class="navigation--link"> Navigation entry </a> <a class="navigation--link"> Navigation entry </a> </li> </ul> </li> </ul> ``` */ body > .sidebar-main { padding-bottom: 1.25rem; border-right: #c8c8c8; } body > .sidebar-main:after { content: ""; display: table; clear: both; } body > .sidebar-main::after { content: ""; display: table; clear: both; } .sidebar-main.off-canvas, #cookie-consent { background: #646464; } .mobile--switches { padding: 0.375rem 0.625rem 0.375rem 0.625rem; height: 2.6875rem; display: block; } .mobile--switches:after { content: ""; display: table; clear: both; } .mobile--switches::after { content: ""; display: table; clear: both; } .mobile--switches .navigation--entry { margin-right: 1.25rem; float: left; } .mobile--switches .field--select, .mobile--switches .navigation--entry { height: 1.875rem; } .mobile--switches .field--select { position: relative; } .mobile--switches .select-field { height: 1.875rem; } .mobile--switches .select-field select { border-radius: 0; padding: 0rem 1.125rem 0rem 0rem; line-height: 1.75rem; font-size: 1rem; background: none; border: 0 none; } .mobile--switches .select-field:after { height: 1.5625rem; line-height: 1.75rem; width: auto; border: 0 none; } .mobile--switches .top-bar--language .select-field { width: 2rem; } .mobile--switches .top-bar--language .select-field select { text-indent: -9999px; } .mobile--switches .top-bar--language .language--flag { margin-top: -0.375rem; position: absolute; z-index: 900; top: 50%; left: 0; pointer-events: none; } .campaign--box { display: none; } .sidebar--navigation { border-radius: 0; margin: 0; border-left: 0 none; border-right: 0 none; } .sidebar--navigation .navigation--entry { position: relative; } .sidebar--navigation .navigation--link { padding: 0.625rem 1.25rem 0.625rem 1.25rem; width: 100%; height: 100%; display: block; } .sidebar--navigation .navigation--link .is--icon-right { margin-top: 0.3125rem; font-size: 0.625rem; display: inline-block; float: right; } .sidebar--navigation .navigation--link:hover { color: #113c62; } .sidebar--navigation.show--active-items .navigation--link.is--active { color: #113c62; font-weight: 700; } .offcanvas--overlay { width: 17.5rem; top: 2.625rem; background: #646464; position: absolute; overflow-x: hidden; overflow-y: auto; left: 0; padding: 0; z-index: 1200; bottom: 0; } .offcanvas--overlay.background { z-index: 1100; } .offcanvas--overlay .overlay--headline { margin-bottom: 0.625rem; border-bottom: 1px solid #c8c8c8; width: 100%; background: #fff; } .offcanvas--overlay .overlay--category { margin: 1rem 0.625rem 0.375rem 0.625rem; line-height: 1.625rem; } .offcanvas--overlay .overlay--category .category--headline { font-size: 0.875rem; color: #113c62; margin: 0; padding: 0; font-weight: 700; } .offcanvas--overlay .is--icon-left { margin-top: 0.3125rem; margin-right: 0.3125rem; font-size: 0.625rem; display: inline-block; } .offcanvas--overlay .is--icon-right { margin-top: 0.3125rem; font-size: 0.625rem; display: inline-block; float: right; } .offcanvas--overlay .is--back-button { font-weight: 700; } .offcanvas--overlay .is--display-button { color: #113c62; font-weight: 700; } .has--cssanimations .sidebar--ajax-loader { top: 0.75rem; right: 0.9375rem; position: absolute; display: none; } .has--cssanimations .sidebar--ajax-loader::before { width: 1rem; height: 1rem; border-radius: 100%; background-clip: padding-box; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; display: block; content: ""; border: 2px solid #c8c8c8; border-top: 2px solid #494949; } .sidebar--ajax-loader { top: 0.75rem; right: 0.9375rem; position: absolute; display: none; } .sidebar--ajax-loader::before { width: 1rem; height: 1rem; border-radius: 100%; background-clip: padding-box; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; display: block; content: ""; border: 2px solid #c8c8c8; border-top: 2px solid #494949; } .listing--sidebar { overflow: hidden; width: 0; height: 0; margin-bottom: 1.25rem; } .listing--sidebar .sidebar-filter .off-canvas.is--open.is--ajax-reload { overflow: hidden; } .listing--sidebar .sidebar-filter .off-canvas.is--open.is--ajax-reload .filter--container { overflow: auto; position: absolute; top: 43px; width: 100%; bottom: 0; left: 0; right: 0; } .listing--sidebar .sidebar-filter .off-canvas.is--open.is--ajax-reload .filter--close-btn { position: absolute; width: 100%; z-index: 10; } .listing--sidebar .sidebar-filter .action--filter-options { border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; } .listing--sidebar .sidebar-filter .filter--active { max-width: 100%; } .listing--sidebar .sidebar-filter .filter--container { padding: 0.625rem 0.625rem 0.625rem 0.625rem; margin: 0; } .listing--sidebar .sidebar-filter .filter--container .filter-panel { margin: 0rem 0rem 0.625rem 0rem; float: none; width: auto; } .listing--sidebar .sidebar-filter .filter--actions { width: auto; padding: 0; margin: 0; } .listing--sidebar .sidebar-filter .filter--actions.filter--actions-top { margin: 0; } .listing--sidebar .sidebar-filter .filter--actions .filter--btn-apply { width: 100%; } .listing--sidebar .sidebar-filter #filter { display: block; padding: 0; } @media screen and (min-width: 48em) { .listing--sidebar { width: 14.375rem; height: auto; display: block; float: left; } .listing--sidebar + .content--wrapper { margin-left: 16.25rem; } .is--no-sidebar .listing--sidebar { display: none; } .is--no-sidebar .listing--sidebar + .content--wrapper { margin: 0; } .offcanvas--overlay { display: none; } .sidebar-main { width: 14.375rem; margin: 0rem 0rem 0rem 0rem; padding-top: 1.875rem; display: none; float: left; } .is--ctl-listing .sidebar-main, .is--ctl-forms .sidebar-main, .is--ctl-tellafriend .sidebar-main, .is--ctl-newsletter .sidebar-main, .is--ctl-sitemap .sidebar-main, .is--ctl-custom .sidebar-main, .is--ctl-note.is--user .sidebar-main, .is--ctl-address .sidebar-main, .is--ctl-account.is--user .sidebar-main { display: block; } .is--ctl-listing .sidebar-main + .content--wrapper, .is--ctl-forms .sidebar-main + .content--wrapper, .is--ctl-tellafriend .sidebar-main + .content--wrapper, .is--ctl-newsletter .sidebar-main + .content--wrapper, .is--ctl-sitemap .sidebar-main + .content--wrapper, .is--ctl-custom .sidebar-main + .content--wrapper, .is--ctl-note.is--user .sidebar-main + .content--wrapper, .is--ctl-address .sidebar-main + .content--wrapper, .is--ctl-account.is--user .sidebar-main + .content--wrapper { margin-left: 16.25rem; } .is--ctl-blog .sidebar-main, .is--ctl-note .sidebar-main, .is--ctl-note.is--user.is--one-time-account .sidebar-main, .is--ctl-index .sidebar-main, .is--ctl-detail .sidebar-main, .is--ctl-search .sidebar-main, .is--ctl-checkout .sidebar-main, .is--ctl-register .sidebar-main, .is--ctl-campaign .sidebar-main, .is--ctl-account.is--act-logout .sidebar-main, .is--ctl-account.is--act-abort .sidebar-main, .is--ctl-account.is--act-password .sidebar-main, .is--ctl-account.is--act-resetpassword .sidebar-main, .is--ctl-listing.is--no-sidebar .sidebar-main { display: none; } .is--ctl-blog .sidebar-main + .content--wrapper, .is--ctl-note .sidebar-main + .content--wrapper, .is--ctl-note.is--user.is--one-time-account .sidebar-main + .content--wrapper, .is--ctl-index .sidebar-main + .content--wrapper, .is--ctl-detail .sidebar-main + .content--wrapper, .is--ctl-search .sidebar-main + .content--wrapper, .is--ctl-checkout .sidebar-main + .content--wrapper, .is--ctl-register .sidebar-main + .content--wrapper, .is--ctl-campaign .sidebar-main + .content--wrapper, .is--ctl-account.is--act-logout .sidebar-main + .content--wrapper, .is--ctl-account.is--act-abort .sidebar-main + .content--wrapper, .is--ctl-account.is--act-password .sidebar-main + .content--wrapper, .is--ctl-account.is--act-resetpassword .sidebar-main + .content--wrapper, .is--ctl-listing.is--no-sidebar .sidebar-main + .content--wrapper { margin: 0; } .is--ctl-note .sidebar-main .categories--headline, .is--ctl-address .sidebar-main .categories--headline, .is--ctl-account .sidebar-main .categories--headline, .is--ctl-note .sidebar-main .categories--navigation, .is--ctl-address .sidebar-main .categories--navigation, .is--ctl-account .sidebar-main .categories--navigation, .is--ctl-note .sidebar-main .shop-sites--container, .is--ctl-address .sidebar-main .shop-sites--container, .is--ctl-account .sidebar-main .shop-sites--container { display: none; } .sidebar-main .mobile--switches, .sidebar-main .filter--container, .sidebar-main .navigation--smartphone { display: none; } .sidebar-main .sidebar--categories-wrapper { display: block; } .navigation--headline { margin: 1.25rem 0.625rem 0.625rem 0.625rem; } .campaign--box { margin: 0rem 0rem 1.25rem 0rem; display: block; } .categories--headline { display: none; } .categories--navigation.is--level0 .navigation--entry:first-child .navigation--link.is--active { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; } .categories--navigation.is--level1 .navigation--entry:first-child .navigation--link.is--active { border-radius: 0; } .sidebar--categories-navigation { margin-bottom: 1.25rem; } .sidebar--navigation { border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; } .sidebar--navigation .navigation--entry { padding: 0rem 0rem 0rem 0rem; margin: 0rem 0.625rem 0rem 0.625rem; } .sidebar--navigation ul.sidebar--navigation { border-radius: 0; } .sidebar--navigation ul.sidebar--navigation .navigation--entry { margin: 0rem 0rem 0rem 0.625rem; } .sidebar--navigation .navigation--link { padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; } .sidebar--navigation .navigation--link:hover { color: #113c62; } .sidebar--navigation .navigation--link.is--active { color: #113c62; font-weight: 700; } .sidebar--navigation .navigation--link .is--icon-right { display: none; } .sidebar--navigation .is--level1 { margin-bottom: 0.625rem; border: 0 none; } .sidebar--navigation .is--level1 .navigation--entry { margin: 0rem 0rem 0rem 0rem; border: 0 none; } .sidebar--navigation .is--level1 .navigation--link { padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; } .sidebar--navigation .is--level1 .navigation--link.is--active { font-weight: 700; text-shadow: none; color: #113c62; background: transparent; border: 0 none; } .sidebar--navigation .is--level2 { font-size: 0.75rem; } .sidebar--navigation .navigation--level-high { border: 0 none; } .shop-sites--container { padding: 0.9375rem 0.625rem 0.9375rem 0.625rem; margin-bottom: 1.25rem; border: 1px solid #c8c8c8; } .shop-sites--container .shop-sites--headline { padding-bottom: 0.66666667rem; font-size: 1rem; margin-top: 0; border-bottom: 1px solid #c8c8c8; color: #113c62; font-weight: 700; } .shop-sites--container .shop-sites--navigation, .shop-sites--container .navigation--entry { border: 0 none; } .shop-sites--container .shop-sites--navigation .navigation--link, .shop-sites--container .navigation--entry .navigation--link { padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; } .sidebar-filter .filter--active-container { margin: 0; padding: 0; } .sidebar-filter .is--instant-filter .filter--facet-container .filter-panel:last-child { margin-bottom: 0; } .sidebar-filter .filter--facet-container, .sidebar-filter .filter--actions-bottom, .sidebar-filter .filter--active-container { display: block; } .sidebar-filter .filter--facet-container { padding: 0; } .listing--sidebar .sidebar-filter .filter-panel.is--collapsed { height: auto; } .listing--sidebar .sidebar-filter .filter-panel.is--collapsed .filter-panel--flyout { position: relative; } .listing--sidebar + .search--results { margin-left: 16.25rem; } .listing--sidebar + .search--results .listing--wrapper { float: left; } } @media screen and (min-width: 48em) { .is--ctl-forms .sidebar-main .sidebar--categories-navigation, .is--ctl-custom .sidebar-main .sidebar--categories-navigation { display: none; } .is--ctl-forms .sidebar-main .shop-sites--container, .is--ctl-custom .sidebar-main .shop-sites--container { display: block; } .sidebar-main .shop-sites--container { display: none; } .sidebar-main.off-canvas, #cookie-consent { background: transparent; } } @media screen and (min-width: 78.75em) { .sidebar-main { padding-top: 2.8125rem; display: block; } .sidebar-main.off-canvas, #cookie-consent { position: relative; top: 0; left: 0; z-index: 1000; } } /* Listing ========================================== Contains the styles of the product listing and its components. The styling defines the listing components such as the product filter element. It contains the viewport specific styles inside media queries. */ .listing--content { margin: 1.25rem 0rem 1.25rem 0rem; } .banner--container { margin: 0rem 0rem 1.25rem 0rem; } .category--teaser { margin: 0rem 0rem 1.25rem 0rem; } .category--teaser .hero--text { padding: 0.625rem 1.25rem 0.625rem 1.25rem; } .category--teaser .offcanvas--content { padding: 1.25rem; } .category--teaser .offcanvas--content .content--title { font-size: 1.125rem; margin: 0.625rem 0rem 0.9375rem 0rem; font-weight: 700; color: #113c62; } .vendor--info { margin: 0rem 0rem 1.25rem 0rem; } .vendor--info:after { content: ""; display: table; clear: both; } .vendor--info::after { content: ""; display: table; clear: both; } .vendor--info .vendor--image-wrapper { margin: 0rem 0rem 0.625rem 0rem; max-width: 12.5rem; height: 4.375rem; margin-left: auto; margin-right: auto; } .vendor--info .vendor--image { margin: 0 auto; height: 100%; } .vendor--info .vendor--text { margin: 0rem 0rem 1.25rem 0rem; } .listing--actions { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .listing--actions:after { content: ""; display: table; clear: both; } .listing--actions::after { content: ""; display: table; clear: both; } .listing--wrapper.js--is-loading .js--loading-indicator { top: 9.375rem; } .listing { -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; opacity: 1; } .listing.is--loading { opacity: 0; } .action--filter-btn { margin-bottom: 0.625rem; } .action--filter-btn .filter--trigger { height: 2.125rem; padding: 0.25rem 0.25rem 0.25rem 0.625rem; line-height: 1.5rem; display: block; position: relative; overflow: hidden; } .action--filter-btn .filter--trigger .icon--filter { margin-right: 0.5rem; } .action--filter-btn .filter--trigger .action--collapse-icon { padding: 0rem 0.625rem 0rem 0.625rem; line-height: 1.5rem; background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); border-radius: 3px; background-clip: padding-box; display: inline-block; color: #fff; float: right; } .action--filter-options .filter--container { padding: 0rem 0.625rem 0rem 0.625rem; } .action--filter-options .filter--close-btn { padding: 0.75rem 0.625rem 0.75rem 0.625rem; background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); display: block; color: #fff; font-weight: 700; } .action--filter-options .filter--close-btn:hover { color: #fff; } .action--filter-options .filter--close-btn .icon--arrow-right { margin: 0.1875rem 0rem 0rem 0rem; float: right; } .action--filter-options .filter--btn-apply { clear: both; } .action--filter-options .filter--list { list-style: none; } .action--filter-options .filter--entry { padding: 0.625rem 1.25rem 0.625rem 1.25rem; font-size: 1rem; display: block; border-bottom: 1px solid #c8c8c8; } .action--filter-options .filter--entry:last-child { border: 0 none; } .action--filter-options .filter--link { color: #113c62; } .action--filter-options .filter--link:hover { color: #113c62; } .action--sort { margin-bottom: 1.25rem; display: block; } .action--sort .sort--label { display: none; } .action--sort .sort--select { height: 2.125rem; max-width: 100%; } .action--sort .sort--select:after, .action--sort .sort--select .sort--field { line-height: 2.125rem; } .action--per-page { display: none; } .listing--paging { padding: 0.625rem 0rem 0.625rem 0rem; display: block; } .listing--paging:after { content: ""; display: table; clear: both; } .listing--paging::after { content: ""; display: table; clear: both; } .listing--paging .paging--label { display: none; } .listing--paging .paging--display { line-height: 1.875rem; margin-left: 0.625rem; } .listing--bottom-paging { margin: 0.625rem 0rem 1.25rem 0rem; } .listing--container { overflow: hidden; } .listing { margin: -2% 0 0 -2%; padding: 0 0 2% 0; } .listing:after { content: ""; display: table; clear: both; } .listing::after { content: ""; display: table; clear: both; } .infinite--actions { width: 100%; margin: 0 auto; text-align: center; } .infinite--actions .js--load-more, .infinite--actions .js--load-previous { margin-bottom: 1.25rem; } @media screen and (min-width: 48em) { .category--teaser .hero--headline { font-size: 1.625rem; padding: 2.5rem 0rem 0rem 0rem; margin: 0rem 2.5rem 0rem 2.5rem; } .category--teaser .hero--text { padding: 1.5625rem 2.5rem 0.625rem 2.5rem; } .listing--content { margin: 1.875rem 0rem 1.875rem 0rem; } .listing--content:after { content: ""; display: table; clear: both; } .listing--content::after { content: ""; display: table; clear: both; } .vendor--info .vendor--image-wrapper { margin: 0rem 1.25rem 1.25rem 0rem; float: left; } .vendor--info .vendor--image-wrapper + .vendor--text { margin: 0rem 0rem 0rem 15.625rem; } .vendor--info .vendor--image-wrapper .vendor--image { margin: 0; } .listing--actions { border-radius: 3px; background-clip: padding-box; margin: 0rem 0rem 1.25rem 0rem; padding-top: 0.625rem; border: 1px solid #c8c8c8; background: #939393; } .listing--actions .listing--paging { padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; border-top: 1px solid #c8c8c8; } .listing--actions.without-facets.without-sortings.without-pagination { display: none; } .listing--actions.without-facets.without-sortings { padding-top: 0rem; border-top: none; } .action--per-page { line-height: 2rem; display: inline-block; width: 30%; text-align: right; float: right; } .action--per-page .per-page--label { display: none; } .action--per-page .per-page--select { width: 5rem; height: 2rem; vertical-align: top; } .action--per-page .per-page--select:after, .action--per-page .per-page--select .per-page--field { line-height: 1.875rem; text-align: center; } .action--sort { width: 12.5rem; margin: 0rem 0.625rem 0rem 0rem; display: inline-block; text-align: right; float: right; } .action--sort .sort--select { max-width: 12.5rem; } .action--filter-btn { width: 11.875rem; margin: 0rem 1.25rem 0.625rem 0.625rem; float: left; } .action--filter-btn .filter--trigger .action--collapse-icon { display: none; } .action--filter-btn .filter--trigger:before, .action--filter-btn .filter--trigger:after { -webkit-transition: margin-top 0.4s cubic-bezier(0.02, 0.01, 0.47, 1); transition: margin-top 0.4s cubic-bezier(0.02, 0.01, 0.47, 1); width: 1rem; height: 1rem; right: 0.625rem; margin-top: -0.5rem; font-size: 0.375rem; line-height: 1rem; font-family: 'shopware'; content: "\e612"; position: absolute; text-align: center; background: none; color: inherit; top: 50%; } .action--filter-btn .filter--trigger:after { margin-top: -3rem; content: "\e610"; } .action--filter-btn .filter--trigger.is--active { padding: 0.125rem 0.75rem 0.125rem 0.75rem; line-height: 2.125rem; background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); border: 0 none; color: #ffffff; /** State: Small button */ /** State: Large button */ background-color: #00CC00; background-image: none; } .action--filter-btn .filter--trigger.is--active:hover { background: #113c62; color: #ffffff; } .action--filter-btn .filter--trigger.is--active.is--small { line-height: 1.875rem; } .action--filter-btn .filter--trigger.is--active.is--large { line-height: 2.375rem; } .action--filter-btn .filter--trigger.is--active:before { margin-top: 2.5rem; } .action--filter-btn .filter--trigger.is--active:after { margin-top: -0.5rem; } .action--filter-options { width: auto; height: auto; padding: 0; overflow: visible; position: relative; background: #fff; border: 0 none; clear: both; } .action--filter-options.is--collapsed, .action--filter-options.is--active-filter { border-width: 1px 0 0 0; border-style: solid; border-color: #c8c8c8; } .action--filter-options.is--active-filter .filter--active-container { display: block; } .action--filter-options.is--instant-filter-active .filter--active-container { display: block; } .action--filter-options .filter--close-btn { display: none; } .action--filter-options .filter--container { margin-left: -2%; padding-left: 3%; } .action--filter-options .filter--container:after { content: ""; display: table; clear: both; } .action--filter-options .filter--container::after { content: ""; display: table; clear: both; } .action--filter-options .filter--group { height: 2.375rem; width: 31%; margin: 0 2% 2% 0; position: relative; float: left; } .action--filter-options .filter--header { width: 100%; position: absolute; top: 0; left: 0; z-index: 1100; } .action--filter-options .filter--header.is--active { z-index: 1300; } .action--filter-options .filter--content { top: 2.375rem; width: 100%; position: absolute; left: 0; } .action--filter-options #filter:after { content: ""; display: table; clear: both; } .action--filter-options #filter::after { content: ""; display: table; clear: both; } .listing--bottom-paging { padding: 0rem 0.625rem 0rem 0.625rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; background: #939393; } } @media screen and (min-width: 78.75em) { .listing--content { padding-top: 2.8125rem; margin: 0rem 0rem 0rem 0rem; } .action--filter-btn { width: 20%; margin-right: 2%; } .action--filter-btn .filter--trigger { font-size: 0.875rem; } .action--filter-btn .filter--trigger .action--collapse-icon { margin-top: -0.5rem; } .action--filter-options { background: #fff; } .action--filter-options.is--collapsed, .action--filter-options.is--active-filter { border-width: 1px 0 0 0; } .action--sort { line-height: 2rem; margin: 0rem 0.625rem 0.625rem 0rem; width: 40%; } .action--sort .sort--label { margin: 0rem 0.625rem 0rem 0rem; display: inline-block; font-weight: 700; } .action--sort .sort--select { max-width: 12.5rem; vertical-align: top; } .action--per-page .per-page--label { margin: 0rem 0.625rem 0rem 0rem; display: inline-block; font-weight: 700; } .listing--paging { display: block; clear: both; } .listing--paging .paging--label { margin: 0rem 0.625rem 0rem 0rem; font-weight: 700; } .listing--paging .paging--display { line-height: 1.875rem; } } /* Product-box =============================== Defines the element styles of the Shopware product boxes. Shopware provides 3 product box types:<br/> `box-basic`<br/> `box-minimal`<br/> `box-image` ``` <div class="product--box"> <div class="box--content is--rounded"> <div class="product--info"> <a href="" class="product--image"> <!-- Article images --> </a> <div class="product--rating-container"> <!-- Product rating stars --> </div> <a href="" class="product--title" title=""> Product title </a> <div class="product--description"> Dux texo propino, hic tres, casus Ubertas, pax Alumnus catena, ut, acer tero an, per edo in is arx Arma querul. </div> <div class="product--price-info"> <div class="price--unit"> </div> <div class="product--price"> <span class="price--default is--nowrap"> 35,00 € </span> </div> </div> <div class="product--btn-container""> <!-- Product buy button </div> <div class="product--actions"> <!-- Product action links e.g. product compare </div> </div> </div> </div> ``` */ .product--box { display: block; width: 100%; padding: 2% 0 0 2%; float: left; /* Product Badges ========================================== Creates a corner product badge on a product-box. ``` <div class="product--box"> <div class="product--badges"> <div class="product--badge badge--discount"> <i class="icon--percent2"></i> </div> </div> </div> ``` */ } .product--box:after { content: ""; display: table; clear: both; } .product--box::after { content: ""; display: table; clear: both; } .product--box .box--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 100%; border: 1px solid #c8c8c8; position: relative; } .product--box .product--image { height: 11.25rem; margin: 0rem 0rem 0.3125rem 0rem; display: block; text-align: center; } .product--box .product--image .image--element { height: 100%; width: 100%; display: block; margin: 0 auto; position: relative; } .product--box .product--image .image--element img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: inline-block; vertical-align: middle; z-index: 500; } .product--box .product--rating-container { height: 1.5625rem; display: block; } .product--box .product--title { height: 2.5rem; margin: 0rem 0rem 0.3125rem 0rem; font-size: 1rem; line-height: 1.25rem; display: block; width: 100%; color: #113c62; font-weight: 700; overflow: hidden; } .product--box .product--title:hover { color: #113c62; } .product--box .variant--description { height: 2.5rem; margin: 0rem 0rem 0.3125rem 0rem; font-size: 0.75rem; line-height: 1.25rem; display: block; width: 100%; color: #113c62; overflow: hidden; font-weight: 500; } .product--box .variant--description .variant--groupName { font-weight: 700; } .product--box .variant--description .variant--description--line { white-space: nowrap; } .product--box .product--description { height: 4.5rem; margin: 0rem 0rem 0.625rem 0rem; font-size: 0.875rem; line-height: 1.125rem; display: block; width: 100%; overflow: hidden; } .product--box .product--price-info { height: 3.125rem; } .product--box .product--price-info .price--unit { height: 1.25rem; font-size: 0.6875rem; line-height: 1rem; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .product--box .product--price-info .price--unit[title] { user-select: none; } .product--box .product--price-info .price--unit[title]:hover { user-select: auto; } .product--box .product--price { height: 1.875rem; } .product--box .product--price .price--default { font-size: 1.125rem; line-height: 1.25rem; display: inline-block; color: #113c62; font-weight: 700; } .product--box .product--price .price--default.is--discount { color: #e74c3c; } .product--box .product--price .price--pseudo { font-size: 0.75rem; line-height: 1.25rem; } .product--box .product--price .price--discount { font-size: 0.75rem; line-height: 1.25rem; display: inline-block; text-decoration: line-through; vertical-align: baseline; } .product--box .buybox--form { height: 2.625rem; margin-top: 0.4375rem; } .product--box .buybox--form i.icon--basket { display: none; } .product--box .product--detail-btn { height: 2.625rem; margin-top: 0.4375rem; } .product--box .product--actions { margin: 0.9375rem 0rem 0rem 0rem; font-size: 0.875rem; line-height: 1.5rem; overflow: auto; } .product--box .product--actions form { display: inline-block; } .product--box .product--action { background: none; border: none; margin: 0; padding: 0; margin: 0rem 1.25rem 0rem 0rem; font-size: 0.875rem; line-height: 1.5rem; display: inline-block; color: #113c62; word-break: keep-all; white-space: nowrap; } .product--box .product--action [class^="icon--"] { margin: 0rem 0.3125rem 0rem 0rem; font-size: 0.75rem; } .product--box .product--action:hover { color: #113c62; } .product--box .action--compare { display: none; } .product--box .action--note:focus { outline: none; } .product--box .action--note.js--is-saved { color: #2ecc71; } .product--box .product--badges { top: 1.25rem; left: -0.0625rem; position: absolute; z-index: 750; } .product--box .product--badges .product--badge { padding: 0.1875rem 0.625rem 0.1875rem 0.625rem; margin: 0rem 0rem 0.3125rem 0rem; font-size: 0.875rem; line-height: 1rem; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; display: block; float: left; position: relative; text-align: center; font-weight: 700; clear: both; } .product--box .product--badges .badge--discount { color: #ffffff; background: #e74c3c; } .product--box .product--badges .badge--recommend { color: #ffffff; background: #2ecc71; } .product--box .product--badges .badge--newcomer { color: #ffffff; background: #f1c40f; } .product--box .product--badges .badge--esd { background: #4aa3df; color: #ffffff; } .box--minimal { width: 50%; } .box--minimal .product--image { height: 7.5rem; } .box--minimal .product--price-info { height: 4.375rem; } .box--minimal .product--price-info .price--unit { height: 1.875rem; font-size: 0.625rem; line-height: 0.875rem; display: block; } .box--minimal .product--price-outer { height: 2.5rem; position: relative; } .box--minimal .product--price { line-height: 1.25rem; position: absolute; bottom: 0; left: 0; height: auto; } .box--minimal .product--price .price--default { font-size: 1rem; line-height: 1.25rem; margin: 0rem 0.3125rem 0rem 0rem; vertical-align: bottom; float: left; } .box--minimal .product--price .price--pseudo, .box--minimal .product--price .price--discount { font-size: 0.625rem; line-height: 0.875rem; } .box--minimal .buybox--form .buy-btn--cart-text { display: none; } .box--minimal .buybox--form i.icon--basket { left: 0.125rem; top: 0.0625rem; font-size: 0.875rem; display: inline-block; position: relative; } .box--image .product--image { margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 12.5rem; } .box--image .product--info { padding: 0; } .box--slider { display: block; padding: 0; position: relative; text-align: center; float: none; } .box--slider:hover .product--title { color: #113c62; } .box--slider .box--content { border: 0 none; padding: 0; } .box--slider .product--price-info { height: auto; } .box--slider .product--price-info .price--unit { height: 0.875rem; font-size: 0.625rem; } .box--slider .product--price-info .price--default { font-size: 0.875rem; } .box--slider .product--price-info .price--regulation { height: 1.1875rem; font-size: 0.875rem; } .box--slider .product--price-info .is--discount { font-weight: 700; } .box--slider .product--image { height: 8.75rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin-bottom: 0.625rem; display: block; text-align: center; position: relative; } .box--slider .image--element { height: 100%; width: 100%; display: block; margin: 0 auto; position: relative; } .box--slider .image--element img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: inline-block; vertical-align: middle; z-index: 500; } .box--slider .product--title { font-size: 0.875rem; height: 2.5rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; color: #113c62; font-weight: 500; white-space: normal; } .box--list .buybox--form { max-width: 17.5rem; } .box--list .product--detail-btn { max-width: 17.5rem; } @media screen and (min-width: 30em) { .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 10rem; } .box--basic .product--info { position: relative; padding: 0rem 0rem 0rem 11.25rem; } .box--minimal { width: 33.3%; } .box--image .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 50%; } .box--image .product--info { position: relative; padding-left: 52%; } .box--image .product--price-info { height: 3.75rem; } .box--image .product--price-info .price--unit { height: 2.5rem; } .box--list .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 11.25rem; } .box--list .product--info { position: relative; padding: 0rem 0rem 0rem 12.5rem; } } @media screen and (min-width: 48em) { .product--box .action--compare { display: inline-block; } .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 10rem; } .box--basic .product--info { position: relative; padding: 0rem 0rem 0rem 11.25rem; } .box--image .product--image { margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 15rem; } .box--image .product--info { padding: 0; } .box--image .product--price-info { height: 2.5rem; } .box--image .product--price-info .price--unit { height: 1.25rem; } .is--ctl-search .box--basic, .is--ctl-listing.is--no-sidebar .box--basic { width: 50%; } .is--ctl-search .box--basic .product--image, .is--ctl-listing.is--no-sidebar .box--basic .product--image { margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 11.25rem; } .is--ctl-search .box--basic .product--info, .is--ctl-listing.is--no-sidebar .box--basic .product--info { padding: 0; } .is--ctl-search .box--minimal, .is--ctl-listing.is--no-sidebar .box--minimal { width: 25%; } .is--ctl-search .box--minimal .product--image, .is--ctl-listing.is--no-sidebar .box--minimal .product--image { height: 11.25rem; } .is--ctl-search .box--image, .is--ctl-listing.is--no-sidebar .box--image { width: 50%; } .is--ctl-search .has--sidebar-filter .box--basic, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic { width: 100%; } .is--ctl-search .has--sidebar-filter .box--basic .product--image, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 10rem; } .is--ctl-search .has--sidebar-filter .box--basic .product--info, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info { position: relative; padding: 0rem 0rem 0rem 11.25rem; } .is--ctl-search .has--sidebar-filter .box--minimal, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--minimal { width: 33.3%; } } @media screen and (min-width: 64em) { .box--basic { width: 50%; } .box--basic .product--image { margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 11.25rem; } .box--basic .product--info { padding: 0; } .box--minimal { width: 25%; } .box--image { width: 50%; } .box--image .product--image { margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 17.5rem; } .box--image .product--info { padding: 0; } .is--ctl-search .box--basic .product--image, .is--ctl-listing.is--no-sidebar .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 10.625rem; } .is--ctl-search .box--basic .product--info, .is--ctl-listing.is--no-sidebar .box--basic .product--info { position: relative; padding: 0rem 0rem 0rem 11.875rem; } .is--ctl-search .box--minimal, .is--ctl-listing.is--no-sidebar .box--minimal { width: 20%; } .is--ctl-search .box--image, .is--ctl-listing.is--no-sidebar .box--image { width: 33.3%; } .is--ctl-search .has--sidebar-filter .box--basic, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic { width: 50%; } .is--ctl-search .has--sidebar-filter .box--basic .product--image, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image { margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 11.25rem; } .is--ctl-search .has--sidebar-filter .box--basic .product--info, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info { padding: 0; } .is--ctl-search .has--sidebar-filter .box--minimal, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--minimal { width: 25%; } } @media screen and (min-width: 78.75em) { .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 10.625rem; } .box--basic .product--info { position: relative; padding: 0rem 0rem 0rem 11.875rem; } .box--basic .box--content { padding: 1.25rem 0.625rem 1.25rem 0.625rem; } .box--minimal { width: 25%; } .box--minimal .buybox--form .buy-btn--cart-text { display: inline-block; } .box--minimal .buybox--form i.icon--basket { display: none; } .box--image .product--image { margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 18.75rem; } .box--image .product--info { padding: 0; } .is--ctl-search .box--minimal, .is--ctl-listing.is--no-sidebar .box--minimal { width: 20%; } .is--ctl-search .has--sidebar-filter .box--basic .product--image, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 10.625rem; } .is--ctl-search .has--sidebar-filter .box--basic .product--info, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info { position: relative; padding: 0rem 0rem 0rem 11.875rem; } } /* Last-viewed ============================================== Defines the styling of the `.viewlast` element. The viewlast element displays the users recently viewed products inside a slim element that is usually displayed at the bottom of the listing and detail pages. It contains a thumbnail image and the product name. */ .viewlast { clear: both; } /* Tell-a-friend ========================================== Contains the tell-a-friend element styling that can be used to share products. The option can be enabled in the Shopware backend and is disabled by default. */ .tellafriend--content { padding-top: 0.625rem; width: 100%; } .tellafriend--content .tellafriend--field { margin: 0rem 0rem 0.625rem 0rem; width: 100%; } .tellafriend--content .tellafriend--buttons:after { content: ""; display: table; clear: both; } .tellafriend--content .tellafriend--buttons::after { content: ""; display: table; clear: both; } .tellafriend--content .captcha--placeholder { margin-bottom: 0.625rem; } .tellafriend--content .captcha--notice { margin-bottom: 0.625rem; display: block; } .tellafriend--content .alert { margin-top: 1.875rem; } .tellafriend--content .review--notice { margin-bottom: 0.625rem; font-size: 0.875rem; } @media screen and (min-width: 48em) { .tellafriend--content { padding-top: 1.25rem; width: 100%; } .tellafriend--content .tellafriend--field { margin-bottom: 0.9375rem; } .tellafriend--content .alert { margin: 0rem 0rem 1rem 0rem; } } @media screen and (min-width: 78.75em) { .tellafriend--content { padding-top: 2.8125rem; } } /* Topseller ========================= The topseller element is a modified product slider that is used to display a selection of best selling articles inside a slim slider element. */ .topseller { margin: 0rem 0rem 1.25rem 0rem; } .topseller:after { content: ""; display: table; clear: both; } .topseller::after { content: ""; display: table; clear: both; } .topseller .topseller--content { padding: 0rem 0.625rem 0rem 0.625rem; } .topseller .product-slider--arrow.arrow--next { right: -0.0625rem; } .topseller .product-slider--arrow.arrow--prev { left: -0.0625rem; } .topseller--product { text-align: center; } .topseller--product:hover .badge { background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); color: #fff; text-shadow: 0 1px 1px #AD1200; } .topseller--product:hover .product--title { color: #113c62; } .topseller--number { margin: 0.625rem 0rem 0.3125rem 0rem; } /* Register ========================================== Contains the styles of the registration process form and its components. The user can see the registration steps, advantages and required information. */ .register--message { margin-top: 1.25rem; } .register--content { margin: 0.625rem 0rem 0.625rem 0rem; width: 100%; display: none; } .register--content:after { content: ""; display: table; clear: both; } .register--content::after { content: ""; display: table; clear: both; } .register--content.is--collapsed { display: block; } .register--content .alert { margin: 1.25rem 1.125rem 1.25rem 1.125rem; } .register--content .register--check { padding-bottom: 0.5rem; } .register--content .register--action { margin: 1.25rem 1.25rem 1.25rem 1.25rem; } .register--content .register--action .register--submit { width: 100%; text-align: center; } .register--content .register--required-info { padding-bottom: 1.875rem; margin: 0rem 1.625rem 1rem 1.625rem; font-size: 0.875rem; } .register--content .select-field { margin-bottom: 0.625rem; max-width: 100%; } .register--content .register--field { margin-bottom: 0.625rem; width: 100%; } .register--content .register--customertype { display: block; } .register--content .register--zip-city .register--field-zipcode { width: 28%; float: left; } .register--content .register--zip-city .register--field-city { width: 70%; float: left; } .register--content .register--zip-city .register--field-city:after { content: ""; display: table; clear: both; } .register--content .register--zip-city .register--field-city::after { content: ""; display: table; clear: both; } .register--content .register--zip-city .register--spacer { margin-right: 2%; } .register--content .birthday--label { margin: 0rem 0rem 0.3125rem 0rem; display: block; font-weight: 700; } .register--content .birthday--label:after { content: ""; display: table; clear: both; } .register--content .birthday--label::after { content: ""; display: table; clear: both; } .register--content .register--password-description { padding-bottom: 1.25rem; } .register--content .register--birthdate .select-field { margin-bottom: 0.9375rem; max-width: 100%; float: left; } .register--content .register--birthdate .datepicker { margin-bottom: 0.9375rem; width: 100%; max-width: 100%; float: left; } .register--content .register--birthdate .register--birthyear, .register--content .register--birthdate .register--birthyear.select-field { margin-right: 0rem; } .register--content .register--privacy { padding: 1.25rem 1.25rem 1.25rem 1.25rem; margin: 0rem 1.25rem 1.25rem 1.25rem; font-size: 0.875rem; border: 1px solid #c8c8c8; } .register--content .register--privacy input[type="checkbox"] { margin: 0rem 0.625rem 0rem 0rem; } .register--content .register--personal { padding-bottom: 0.625rem; } .register--content .register--personal:after { content: ""; display: table; clear: both; } .register--content .register--personal::after { content: ""; display: table; clear: both; } .register--content #billingCountryBlockedAlert { margin-top: 0; margin-left: 0; } .register--login:after { content: ""; display: table; clear: both; } .register--login::after { content: ""; display: table; clear: both; } .register--login .register--new-customer { margin: 1.25rem 0rem 1.25rem 0rem; } .register--login .register--new-customer .new-customer-btn { display: block; width: 100%; text-align: center; position: relative; } .register--login .register--new-customer .new-customer-btn:after { width: 1rem; height: 1rem; line-height: 1rem; margin-top: -0.5rem; font-size: 0.375rem; right: 0.625rem; position: absolute; font-family: 'shopware'; font-weight: 500; content: "\e612"; color: inherit; top: 50%; } .register--login .register--new-customer .new-customer-btn.is--active:after { content: "\e610"; } .register--login .register--login-field { margin-bottom: 0.625rem; width: 100%; } .register--login .register--login-description { padding-bottom: 1.25rem; } .register--login .register--login-lostpassword { padding-bottom: 1.25rem; } .register--login .register--login-btn { width: 100%; text-align: center; } .register--advantages { display: none; } .password--success { margin: 0.625rem 0rem 1.25rem 0rem; } .steps--container { background: transparent; } .steps--content { padding-top: 1rem; display: table; border-top: 1px solid #c8c8c8; width: 100%; } .steps--content .steps--list { display: table-row; } .steps--content .steps--list:after { content: ""; display: table; clear: both; } .steps--content .steps--list::after { content: ""; display: table; clear: both; } .steps--content .steps--entry { padding: 0rem 0.625rem 0rem 0.625rem; display: table-cell; list-style: none; vertical-align: top; text-align: center; } .steps--content .steps--spacer { display: none; vertical-align: middle; } .steps--content .steps--entry .icon { background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); border-radius: 22px; background-clip: padding-box; padding: 0.625rem 1rem 0.625rem 1rem; width: 2.875rem; font-size: 1.25rem; display: inline-block; text-align: center; color: #fff; font-weight: 700; } .steps--content .is--active .icon { background-color: #1e567f; background-image: linear-gradient(to bottom, #1e567f 0%, #113c62 100%); color: #fff; } .steps--content .steps--entry .text { margin: 0rem 0rem 0rem 0.625rem; height: 3.25rem; position: relative; top: -2px; display: none; vertical-align: middle; } .steps--content .steps--entry .text::after { content: ''; height: 100%; } .steps--content .is--active .text { color: #113c62; display: inline-block; font-weight: 700; } .steps--content .steps--entry .text--inner, .steps--content .steps--entry .text::after { display: inline-block; vertical-align: middle; } .account--change-payment .payment--method { padding: 0.625rem 0rem 0.625rem 0rem; } .account--change-payment .payment--selection-input { width: 2.5rem; float: left; text-align: center; } .account--change-payment .payment--selection-label, .account--change-payment .payment--description, .account--change-payment .payment--content { padding: 0rem 0rem 0rem 2.5rem; width: 100%; } .account--change-payment .payment--content input { max-width: 100%; } @media screen and (min-width: 48em) { .register--message { margin-top: 2.8125rem; } .register--content { margin-top: 3.125rem; width: 64%; float: right; display: block; } .register--content .select-field { margin-bottom: 0.9375rem; } .register--content .select-field .register--birthday { margin-right: 2%; } .register--content .register--field { margin-bottom: 0.9375rem; } .register--content .register--check { padding-bottom: 0.5rem; } .register--content .select-field { max-width: 18.125rem; } .register--content .register--birthdate .select-field { width: 32%; margin-right: 2%; } .register--content .register--action { text-align: right; } .register--content .register--action .register--submit { width: 35%; } .steps--content { padding: 1.875rem 0rem 1.5rem 0rem; background: transparent; border: none; } .steps--content .steps--spacer { width: 5rem; display: table-cell; text-align: center; } .steps--content .steps--entry .text { margin: 0rem 0.625rem 0rem 0.625rem; display: inline-block; font-weight: 700; } .register--login { margin-top: 3.125rem; width: 34%; float: left; } .register--login .register--new-customer { display: none; } .register--login .register--login-field { margin-bottom: 0.9375rem; } .register--login .register--login-btn { width: auto; text-align: left; } .register--advantages { display: block; width: 34%; float: left; } .register--advantages:after { content: ""; display: table; clear: both; } .register--advantages::after { content: ""; display: table; clear: both; } .register--advantages .panel--title { margin: 0rem 0rem 0.625rem 0rem; } } @media screen and (min-width: 78.75em) { .steps--content .steps--entry.step--payment { width: 30%; } .steps--content .steps--entry .text { margin: 0rem 0rem 0rem 0.625rem; width: 70%; text-align: left; } .steps--content .steps--spacer { width: 15%; } } /* Shopping cart ============================================== Defines the basic styling of the Shopware 5 shopping cart element. Shopware offers two different shopping cart element options that can be selected in the Shopware backend. **Shopping Cart options:** [`off-canvas cart`](./_components-offcanvas-menu.html>) [`collapse-cart`](./_components-collapse-cart.html>) */ .is--ctl-checkout .panel--body > .alert { margin: 1.875rem 0rem 1.875rem 0rem; } .is--ctl-checkout .basket--info-messages { margin-top: 0.625rem; } .is--ctl-checkout .account--billing-address.register--content, .is--ctl-checkout .account--shipping-address.register--content, .is--ctl-checkout .account--change-billing.register--content, .is--ctl-checkout .account--change-shipping.register--content { float: none; width: 100%; } .is--act-shippingpayment .add-product--form { display: none; } .is--act-shippingpayment .product--table { margin-top: 0; } .is--act-shippingpayment .product--table .panel--body { padding: 1.25rem 1.25rem 0rem 1.25rem; } .is--act-shippingpayment .payment--method-list { margin-top: 0.625rem; } .product--table { margin-top: 0.625rem; } .product--table .alert { margin-bottom: 0.625rem; } .product--table .is--no-star { margin-left: -0.375rem; } .product--table .panel { border: 0 none; } .product--table .panel--body { padding: 0; } .product--table .premium-product.panel { margin: 0.625rem 0rem 0rem 0rem; border: 1px solid #c8c8c8; } .product--table .delivery--status-icon { display: none; } .product--table .table--actions { margin-top: 0.625rem; position: relative; } .product--table .table--actions:after { content: ""; display: table; clear: both; } .product--table .table--actions::after { content: ""; display: table; clear: both; } .product--table .table--actions .btn--checkout-proceed, .product--table .table--actions .btn--checkout-continue { width: 100%; text-align: center; margin-bottom: 0.625rem; } .product--table .actions--bottom .main--actions { margin-bottom: 0rem; } .product--table .table--header { display: none; } .product--table .table--tr { padding: 0.625rem 0rem 0.5rem 0rem; position: relative; border-bottom: 1px solid #c8c8c8; width: 100%; height: 100%; } .product--table .table--tr:after { content: ""; display: table; clear: both; } .product--table .table--tr::after { content: ""; display: table; clear: both; } .product--table .table--media, .product--table .table--content { float: left; } .product--table .column--product { padding-left: 0; width: 90%; } .product--table .column--product .column--image { padding: 0.625rem 0rem 0.625rem 0rem; float: left; width: 26%; } .product--table .table--media { width: 100%; position: relative; } .product--table .table--media .table--media-outer { border-radius: 2px; background-clip: padding-box; max-width: 4.375rem; max-height: 4.375rem; border: 1px solid #c8c8c8; margin: 0 auto; } .product--table .table--media .table--media-inner { width: 100%; position: relative; padding-bottom: 100%; height: 0; } .product--table .table--media img { padding: 5%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .product--table .table--content { font-size: 0.75rem; width: 70%; } .product--table .delivery--status-icon { font-size: 0.75rem; margin: 0; } .product--table .delivery--information { font-size: 0.875rem; } .product--table .content--title { font-size: 1rem; font-weight: 700; color: #113c62; } .product--table .column--actions { padding-right: 0; position: absolute; width: 20%; top: 10px; right: 0; text-align: right; } .product--table .column--actions .column--actions-link { line-height: 2.5rem; padding: 0rem 0.875rem 0rem 0.9375rem; } .product--table .column--actions .icon--cross { font-size: 0.75rem; } .product--table .column--label { color: #113c62; text-align: left; margin: 0%; float: left; font-weight: 700; } .product--table .column--label.quantity--label { margin-top: 0.6875rem; } .product--table .row--rebate .column--label, .product--table .row--premium-product .column--label, .product--table .row--voucher .column--label { margin: 0; } .product--table .row--rebate .table--media, .product--table .row--premium-product .table--media, .product--table .row--voucher .table--media { width: 4.375rem; margin: 0 auto; float: none; } .product--table .row--rebate .column--image, .product--table .row--premium-product .column--image, .product--table .row--voucher .column--image { padding: 0.625rem 0rem 0.625rem 0rem; width: 24%; } .product--table .row--rebate .table--content, .product--table .row--premium-product .table--content { padding-top: 1.3125rem; } .product--table .column--total-price { font-weight: 700; } .product--table .column--product:after { content: ""; display: table; clear: both; } .product--table .column--product::after { content: ""; display: table; clear: both; } .product--table .column--product .column--image { float: left; width: 24%; } .product--table .column--quantity .select-field { min-width: 6.25rem; max-width: 10rem; width: auto; } .product--table .column--quantity, .product--table .column--unit-price, .product--table .column--total-price, .product--table .column--tax-price { padding: 0.3125rem 0rem 0.3125rem 0.625rem; margin-left: 22%; width: 78%; } .product--table .column--quantity { padding: 0rem 0rem 0rem 0.625rem; } .product--table .column--unit-price { padding: 0rem 0rem 0.5625rem 0.625rem; } .product--table .product--delivery { margin: 0; } .product--table .cart--badge { border-radius: 3px 0 0 3px; background-clip: padding-box; display: block; position: absolute; width: 20px; height: 100%; top: 0; left: 0; background: #113c62; } .product--table .cart--badge span { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); text-align: center; line-height: 20px; color: white; text-transform: uppercase; font-weight: 700; display: block; position: absolute; width: 70px; top: 0; bottom: 0; } .product--table .basket--badge { line-height: 3rem; font-size: 1rem; border-radius: 128px; background-clip: padding-box; height: 3rem; width: 3rem; margin: 0 auto; text-align: center; font-weight: 700; background: #113c62; color: #fff; } .product--table .basket--badge .icon--arrow-right { font-size: 0.8125rem; } .product--table .basket--badge .icon--coupon { font-size: 1.75rem; line-height: 3.125rem; } .product--table .row--premium-product .basket--badge { font-size: 0.6875rem; } .product--table .table--actions + .alert { margin-top: 0.625rem; } .product--table .content { font-size: 0.875rem; margin: 0; } .product--table .add-product--form { margin: 1.25rem 0rem 1.25rem 0rem; } .product--table .add-product--field, .product--table .add-voucher--field { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; height: 2.375rem; width: 90%; } .product--table .add-voucher--field { background: #fff; } .product--table .add-product--button, .product--table .add-voucher--button { height: 2.375rem; padding: 0.1875rem 0rem 0.1875rem 0rem; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; width: 10%; } .product--table .add-voucher--form { margin: 0rem 0rem 0.75rem 0rem; } .product--table .add-voucher--panel { margin: 0.625rem 0rem 0rem 0rem; } .product--table .table--aggregation { margin: 0rem -0.625rem 0rem -0.625rem; padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #969696; border-color: #c8c8c8; border-style: solid; border-width: 1px 0 0 0; } .product--table .table--shipping-costs label { font-weight: 700; } .product--table .table--shipping-costs .select-field { height: 2.375rem; line-height: 2.25rem; max-width: 100%; } .product--table .table--shipping-costs-trigger { font-weight: 700; } .product--table .main--actions:after { content: ""; display: table; clear: both; } .product--table .main--actions::after { content: ""; display: table; clear: both; } .product--table .table--footer { font-size: 0.875rem; } .product--table .table--footer .benefit--text { font-size: 0.875rem; } .product--table .benefit--headline { font-size: 0.875rem; color: #113c62; font-weight: 700; } .aggregation--list { margin: 0rem -0.625rem 0rem -0.625rem; padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #969696; border-bottom: 1px solid #c8c8c8; } .aggregation--list .list--entry { list-style: none; } .aggregation--list .entry--label { width: 70%; } .aggregation--list .entry--value { width: 30%; text-align: right; } .aggregation--list .entry--total { font-weight: 700; color: #113c62; } .aggregation--list .entry--totalnet, .aggregation--list .entry--taxes { font-size: 0.75rem; } .premium-product.panel { margin: 0.625rem 0rem 0.625rem 0rem; } .premium-product--content { height: 20rem; } .premium-product--content .product-slider--container { padding: 0; } .premium-product p { margin: 0.625rem 0rem 0.625rem 0rem; } .premium-product .premium-product--difference { border-color: #c8c8c8; display: block; } .premium-product .premium-product--difference .difference--price { font-size: 0.875rem; } .premium-product .product-slider--arrow.arrow--next { right: -0.0625rem; } .premium-product .product-slider--arrow.arrow--prev { left: -0.0625rem; } .premium-product .product--inner { padding: 0.3125rem 1.875rem 0.3125rem 1.875rem; margin: 0rem 0rem 0.625rem 0rem; } .premium-product .product--inner .product--image { border-radius: 3px; background-clip: padding-box; height: 10.9375rem; margin: 0rem 0rem 0.9375rem 0rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; border: 1px solid #c8c8c8; position: relative; text-align: center; } .premium-product .product--inner .product--image .image--element { height: 100%; width: 100%; display: block; margin: 0 auto; position: relative; } .premium-product .product--inner .product--image .image--element img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: inline-block; vertical-align: middle; z-index: 500; } .premium-product .product--inner .premium-product--badge { border-radius: 38px; background-clip: padding-box; height: 2.375rem; width: 2.375rem; line-height: 2.375rem; top: -1.1875rem; right: -1.1875rem; background: #113c62; position: absolute; color: #fff; font-weight: 700; z-index: 750; } .premium-product .product--inner .premium-product--free { color: #2ecc71; font-weight: 700; text-align: left; } .premium-product .product--inner .btn { width: 100%; } .premium-product .product--inner .premium--variant:after { content: ""; display: table; clear: both; } .premium-product .product--inner .premium--variant::after { content: ""; display: table; clear: both; } .premium-product .product--inner .premium--variant .premium--button { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; height: 2.375rem; margin-left: -0.125rem; width: 20%; } .premium-product .product--inner .premium--variant .select-field { margin-right: 0.125rem; max-width: 80%; float: left; } .premium-product .product--inner .premium--variant .select-field .premium--selection { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; line-height: 2.375rem; height: 2.375rem; font-weight: 700; } .premium-product .product--inner .premium--variant .select-field:after { height: 2.25rem; } .js--modal .modal--checkout-add-article .link--article-image .image--media { display: block; width: 100%; height: 100%; position: relative; } .js--modal .modal--checkout-add-article .link--article-image .image--media img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .js--modal .modal--checkout-add-article .modal--title { padding: 0.625rem 2.5rem 0.625rem 1.25rem; font-size: 1rem; font-weight: 700; border-bottom: 1px solid #c8c8c8; } .js--modal .modal--checkout-add-article .modal--error { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .js--modal .modal--checkout-add-article .modal--article { padding: 1.25rem; } .js--modal .modal--checkout-add-article .article--info { margin-left: 5rem; } .js--modal .modal--checkout-add-article .article--info:after { content: ""; display: table; clear: both; } .js--modal .modal--checkout-add-article .article--info::after { content: ""; display: table; clear: both; } .js--modal .modal--checkout-add-article .article--image { padding: 0.3125rem; width: 5rem; height: 5rem; border-radius: 3px; background-clip: padding-box; float: left; border: 1px solid #c8c8c8; } .js--modal .modal--checkout-add-article .article--name { width: 100%; } .js--modal .modal--checkout-add-article .list--name { margin-left: 0.9375rem; } .js--modal .modal--checkout-add-article .list--name .entry--name { margin-bottom: 0.625rem; } .js--modal .modal--checkout-add-article .list--name .link--name { color: #113c62; font-weight: 700; } .js--modal .modal--checkout-add-article .article--price { margin: 0.9375rem 0rem 0rem 0.9375rem; width: 100%; } .js--modal .modal--checkout-add-article .list--price .entry--price { margin-bottom: 0.625rem; color: #113c62; font-weight: 700; } .js--modal .modal--checkout-add-article .modal--actions { margin: 0rem 0rem 1.25rem 0rem; padding: 0.625rem 1.25rem 0rem 1.25rem; } .js--modal .modal--checkout-add-article .modal--actions:after { content: ""; display: table; clear: both; } .js--modal .modal--checkout-add-article .modal--actions::after { content: ""; display: table; clear: both; } .js--modal .modal--checkout-add-article .modal--actions .btn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .js--modal .modal--checkout-add-article .modal--actions .btn:last-child { margin-top: 0.625rem; } .js--modal .modal--checkout-add-article .modal--actions .is--left { padding-left: 2.1875rem; } .js--modal .modal--checkout-add-article .modal--cross-selling { padding: 0rem 1.25rem 1.25rem 1.25rem; margin: 0; } .js--modal .modal--checkout-add-article .modal--cross-selling .product-slider--container { padding: 0; } .js--modal .modal--checkout-add-article .modal--cross-selling .item--image { padding-bottom: 0.625rem; height: 10.625rem; border-bottom: 1px solid #c8c8c8; margin: 0 auto; text-align: center; } .js--modal .modal--checkout-add-article .modal--cross-selling .link--image, .js--modal .modal--checkout-add-article .modal--cross-selling .link--image span { overflow: hidden; display: block; height: 100%; } .js--modal .modal--checkout-add-article .modal--cross-selling .link--image img { margin: 0 auto; } .js--modal .modal--checkout-add-article .modal--cross-selling .image--slider-item, .js--modal .modal--checkout-add-article .modal--cross-selling .image--no-picture { display: inline-block; vertical-align: middle; text-align: center; } .js--modal .modal--checkout-add-article .modal--cross-selling .link--name { color: #113c62; font-weight: 700; } .js--modal .modal--checkout-add-article .modal--cross-selling .item--price-unit { font-size: 0.6875rem; } .js--modal .modal--checkout-add-article .modal--cross-selling .price--normal { font-size: 1.0625rem; color: #113c62; font-weight: 700; } .js--modal .modal--checkout-add-article .modal--cross-selling .price--reduced { color: #e74c3c; } .js--modal .modal--checkout-add-article .modal--cross-selling .price--pseudo { font-size: 0.625rem; text-decoration: line-through; } .content--confirm .alert { margin-top: 0.625rem; } .content--confirm .has--border { border: 1px solid #c8c8c8; } .content--confirm .confirm--actions .main--actions { text-align: center; width: 100%; } .content--confirm .payment--method-list, .content--confirm .dispatch--method-list { margin-bottom: 0.625rem; } .content--confirm .payment--method, .content--confirm .dispatch--method { padding-bottom: 0.625rem; margin-bottom: 0.625rem; border-bottom: 1px solid #c8c8c8; } .content--confirm .payment--method .method_last, .content--confirm .dispatch--method .method_last { border: 0 none; } .content--confirm .payment--method.method_last, .content--confirm .dispatch--method.method_last { border: 0 none; } .content--confirm .method--input { width: 2.5rem; text-align: center; float: left; } .content--confirm .method--label { padding-left: 2.5rem; width: 100%; } .content--confirm .method--description { padding-left: 2.5rem; } .content--confirm .payment--method-logo { margin-left: 2.5rem; } .content--confirm .method--bankdata { padding-left: 2.5rem; } .content--confirm .method--bankdata input[type="text"] { max-width: 100%; } .content--confirm .table--aggregation, .content--confirm .add-product--form, .content--confirm .add-product--field, .content--confirm .add-product--button { display: none; } .content--confirm .aggregation--list { font-size: 0.875rem; line-height: 1.5rem; margin: 0rem -0.625rem 0rem -0.625rem; border-top: 1px solid #c8c8c8; } @media screen and (min-width: 30em) { .product--table .column--label { text-align: right; width: 100%; margin: 0; } .product--table .table--tr { padding: 0.625rem 0rem 1.25rem 0rem; } .product--table .table--content { width: 85%; } .product--table .table--actions .btn--checkout-proceed, .product--table .table--actions .btn--checkout-continue { width: 49%; text-align: center; margin-bottom: 0rem; } .product--table .column--product .column--image { width: 15%; } .product--table .column--quantity, .product--table .column--unit-price, .product--table .column--total-price { float: left; width: 28.83%; } .product--table .column--quantity { padding-right: 0.625rem; margin-left: 13.5%; } .product--table .column--quantity .quantity--label { margin: 0rem 0rem 0.1875rem 0rem; text-align: left; } .product--table .column--quantity .select-field { float: left; font-weight: 700; } .product--table .column--unit-price { padding-right: 0.625rem; margin: 0; } .product--table .column--unit-price .unit-price--label { margin-bottom: 0.75rem; } .product--table .column--total-price { padding: 0rem 0.625rem 0.3125rem 0.625rem; margin: 0; } .product--table .column--total-price .total-price--label { margin-bottom: 0.75rem; } .product--table .column--tax-price { margin: 0; } .product--table .column--tax-price .tax-price--label { margin-bottom: 0.75rem; } .product--table .row--rebate .column--label, .product--table .row--premium-product .column--label, .product--table .row--voucher .column--label { margin: 0; } .product--table .row--rebate .column--image, .product--table .row--premium-product .column--image, .product--table .row--voucher .column--image { width: 15%; } .product--table .row--rebate .column--total-price, .product--table .row--premium-product .column--total-price, .product--table .row--voucher .column--total-price { float: right; } .product--table .add-product--field { width: 55%; } .product--table .actions--bottom .main--actions { margin-bottom: 0.625rem; } .js--modal .modal--checkout-add-article .article--name { width: 75%; float: left; } .js--modal .modal--checkout-add-article .article--price { width: 25%; float: right; margin: 0; } .js--modal .modal--checkout-add-article .modal--actions { margin: 0rem 0rem 1.25rem 0rem; padding: 0.625rem 1.25rem 0rem 1.25rem; } .js--modal .modal--checkout-add-article .modal--actions:after { content: ""; display: table; clear: both; } .js--modal .modal--checkout-add-article .modal--actions::after { content: ""; display: table; clear: both; } .js--modal .modal--checkout-add-article .modal--actions .btn { width: 49%; } .js--modal .modal--checkout-add-article .modal--actions .btn:last-child { margin-top: 0; } .js--modal .modal--checkout-add-article .modal--actions .is--left { padding-left: 2.1875rem; } } @media screen and (min-width: 48em) { .is--ctl-checkout .basket--info-messages { margin: 1.25rem 0rem 0.25rem 0rem; } .is--ctl-checkout .account--change-billing.register--content, .is--ctl-checkout .account--change-shipping.register--content { width: 75%; } .is--act-shippingpayment .product--table .table--actions { margin-top: 1.25rem; } .is--act-shippingpayment .payment--method-list { margin-top: 0; } .is--act-shippingpayment .basket--footer .aggregation--list { padding-right: 1.25rem; } .product--table { margin: 1.25rem 0rem 1.25rem 0rem; } .product--table .alert { margin-bottom: 1.25rem; } .product--table .row--voucher, .product--table .row--premium-product { height: 100%; } .product--table .panel--body { padding: 1.25rem 1.25rem 1.25rem 1.25rem; border: 1px solid #c8c8c8; } .product--table .premium-product--content { height: 20.625rem; border: 0 none; } .product--table .premium-product.panel { margin: 1.25rem 0rem 0rem 0rem; } .product--table .column--actions { position: static; bottom: auto; float: right; } .product--table .column--label { display: none; } .product--table .table--header { margin: 0rem 0rem 0.625rem 0rem; border-bottom: 1px solid #c8c8c8; display: block; } .product--table .table--header .table--column { font-size: 1rem; padding-bottom: 0; font-weight: 700; color: #113c62; } .product--table .table--header .panel--th { padding: 0.3125rem 0.625rem 0.5625rem 0.625rem; font-size: 1rem; } .product--table .table--header .column--product { padding-left: 0; width: 52%; } .product--table .column--product { float: left; width: 52%; } .product--table .column--product .column--image { width: 8%; } .product--table .table--tr { padding: 0; border-bottom: 1px solid #c8c8c8; } .product--table .is--centered { display: inline-block; vertical-align: middle; } .product--table .column--actions { width: 8%; padding-right: 0; } .product--table .column--product .column--image { width: 20%; } .product--table .table--media, .product--table .table--content { float: left; } .product--table .table--media { width: 100%; } .product--table .table--media .table--media-outer { margin: 0; } .product--table .table--content { width: 74%; } .product--table .column--quantity { padding: 0.625rem 0.625rem 0.625rem 0.625rem; float: left; width: 11%; margin: 0; } .product--table .column--quantity .select-field { float: right; font-weight: 700; padding: 0rem 0rem 0rem 1rem; } .product--table .column--unit-price, .product--table .column--total-price { padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 14.5%; } .product--table .row--product .column--quantity { padding-top: 1.625rem; } .product--table .row--product .column--unit-price, .product--table .row--product .column--total-price { line-height: 2.625rem; padding-top: 1.625rem; } .product--table .row--product .column--actions { padding-top: 1.625rem; } .product--table .content--title { font-size: 1rem; font-weight: 700; color: #113c62; } .product--table .column--total-price { float: left; font-weight: 700; } .product--table .basket--badge { width: 3rem; margin: 0 auto; } .product--table .row--rebate .table--media, .product--table .row--premium-product .table--media, .product--table .row--voucher .table--media { float: left; } .product--table .row--rebate .column--total-price, .product--table .row--premium-product .column--total-price, .product--table .row--voucher .column--total-price { margin-left: 25.5%; float: left; } .product--table .row--rebate .column--tax-price, .product--table .row--premium-product .column--tax-price, .product--table .row--voucher .column--tax-price { margin: 0; } .product--table .row--rebate .column--actions, .product--table .row--premium-product .column--actions, .product--table .row--voucher .column--actions { padding-top: 0.8125rem; } .product--table .row--rebate .table--content, .product--table .row--premium-product .table--content { padding-top: 1.3125rem; } .product--table .row--rebate .column--total-price, .product--table .row--premium-product .column--total-price { padding-top: 1.375rem; } .product--table .row--voucher .column--total-price { padding-top: 1.375rem; } .product--table .row--premium-product .column--product, .product--table .row--rebate .column--product { width: 77.5%; } .product--table .row--premium-product .column--image, .product--table .row--rebate .column--image { width: 13.3%; } .product--table .row--premium-product .column--total-price, .product--table .row--rebate .column--total-price { margin-left: 0; } .product--table .add-product--form { margin: 0.9375rem 0rem 1.25rem 0rem; width: 35%; } .product--table .add-product--field { width: 80%; } .product--table .add-product--button { width: 16%; } .product--table .basket--footer { margin: 0rem -1.25rem -1.25rem -1.25rem; border-top: 1px solid #c8c8c8; background: #969696; } .product--table .basket--footer:after { content: ""; display: table; clear: both; } .product--table .basket--footer::after { content: ""; display: table; clear: both; } .product--table .aggregation--list, .product--table .table--aggregation { padding: 1.25rem 1.25rem 1.25rem 1.25rem; padding-right: 11%; border: 0 none; background: transparent; margin: 0; float: left; width: 50%; } .product--table .table--actions { padding-bottom: 1.25rem; margin: 0; } .product--table .table--actions .is--secondary { margin-right: 1.25rem; } .product--table .table--actions .btn--inquiry { margin-left: -8.125rem; width: 16.25rem; top: 0; position: absolute; left: 50%; } .product--table .table--actions .btn--checkout-proceed, .product--table .table--actions .btn--checkout-continue { width: 25%; text-align: center; margin-bottom: 0rem; } .product--table .actions--bottom .main--actions { margin-top: 1.25rem; } .product--table .table--footer { display: block; } .footer--benefit { font-size: 0.875rem; padding: 0rem 1.25rem 0rem 0rem; width: 33.33332%; } .footer--benefit.is--last { padding: 0; } .js--modal .modal--checkout-add-article .article--price { margin-top: 0; margin-left: 0; } .js--modal .modal--checkout-add-article .modal--actions .btn { width: 35%; margin-bottom: 0; } .js--modal .modal--checkout-add-article .modal--actions .btn:last-child { margin-top: 0; } .content--confirm .alert { margin: 0; } .content--confirm .table--aggregation { visibility: hidden; display: block; } .content--confirm .confirm--inner-container .payment--method-list, .content--confirm .confirm--inner-container .dispatch--method-list { margin-bottom: 1.25rem; } .content--confirm .confirm--inner-container .panel--body { border: 0 none; } .content--confirm .confirm--inner-container .has--border { border: 1px solid #c8c8c8; } .content--confirm .confirm--inner-container .basket--footer { border: 1px solid #c8c8c8; margin: 0; } .content--confirm .confirm--actions .main--actions { width: 25%; } } @media screen and (min-width: 64em) { .product--table .table--actions .btn--inquiry { left: 50%; } .product--table .column--product .column--image { width: 16%; } .product--table .column--product .table--content { width: 84%; } .product--table .row--premium-product .column--product .column--image, .product--table .row--rebate .column--product .column--image { width: 10.7%; } .product--table .add-product--form { width: 25%; } .product--table .aggregation--list { float: right; padding-right: 10.5%; } .product--table .table--aggregation { width: 45%; } } @media screen and (min-width: 78.75em) { .is--ctl-checkout .basket--info-messages { margin: 2.8125rem 0rem 0rem 0rem; } .is--act-shippingpayment .product--table { margin-top: 1.5625rem; } .product--table { margin-top: 2.8125rem; } .product--table .column--actions { width: 4%; } .product--table .table--header .column--product { width: 55%; } .product--table .column--product { width: 55%; } .product--table .column--product .column--image { width: 14%; } .product--table .column--product .table--content { width: 86%; } .product--table .row--rebate .column--actions, .product--table .row--premium-product .column--actions, .product--table .row--voucher .column--actions { padding-top: 1.3125rem; } .product--table .row--product .column--actions { padding-top: 2.125rem; } .product--table .table--tr .column--actions .column--actions-link { line-height: 1.125rem; padding: 0rem 0.3125rem 0.125rem 0.3125rem; } .product--table .table--tr .column--actions .icon--cross { font-size: 0.5625rem; } .product--table .row--premium-product .column--product, .product--table .row--rebate .column--product { width: 80.5%; } .product--table .row--premium-product .column--product .column--image, .product--table .row--rebate .column--product .column--image { width: 9.5%; } .product--table .aggregation--list { padding-right: 7.3%; } } /* Checkout finish ========================================== Contains the styles for the finish page. It is displayed after the Shopware checkout process is finished and contains the important order information, the users information and option to print the order confirmation. */ .is--act-finish .content-main { margin-top: 1.25rem; } .finish--content { padding-top: 0.625rem; } .finish--content .information--panel-item { margin-bottom: 1.25rem; } .finish--content .information--panel-item:after { content: ""; display: table; clear: both; } .finish--content .information--panel-item::after { content: ""; display: table; clear: both; } .finish--content .information--panel-item .panel--body:after { content: ""; display: table; clear: both; } .finish--content .information--panel-item .panel--body::after { content: ""; display: table; clear: both; } .finish--content .information--panel-item.information--panel-address .shipping--panel { text-align: center; } .finish--content .product--table { margin-top: 0; } .finish--teaser { margin: 0rem 0rem 1.25rem 0rem; } .teaser--btn-back { margin: 0rem 0rem 1.25rem 0rem; } .teaser--btn-print, .teaser--btn-back { text-align: center; width: 100%; } .teaser--btn-print *[class^="icon--"], .teaser--btn-back *[class^="icon--"] { margin: 0.25rem 0rem 0rem 0rem; float: left; } .finish--table .panel--body { border: 1px solid #c8c8c8; } .finish--table .table--tr { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .finish--table .column--quantity, .finish--table .column--total-price { padding-right: 0; } .finish--table .table--aggregation { display: none; } .finish--table .aggregation--list { margin: 0; border-bottom: 0 none; } .finish--table .basket--footer { border-top: 1px solid #c8c8c8; } .finish--table .is--last-row { border-bottom: 0 none; } @media screen and (min-width: 30em) { .finish--table .table--tr .column--quantity { margin-left: 42.3%; } .finish--table .table--tr .column--quantity .column--label { margin-bottom: 0.75rem; text-align: right; } } @media screen and (min-width: 48em) { .teaser--btn-print { text-align: left; width: auto; } .is--act-finish .content-main { margin-top: 2.5rem; } .finish--content { padding-top: 1.25rem; } .finish--content .information--panel-wrapper { margin: -2% 0 0 -2%; margin-bottom: 1.25rem; } .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-billing { width: 50%; } .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-billing .panel { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-shipping { padding-left: 0; width: 50%; } .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-shipping .panel { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .finish--content .information--panel-wrapper .information--panel { margin: 0; } .finish--content .information--panel-wrapper .information--panel-item { padding: 2% 0 0 2%; width: 100%; float: left; margin-bottom: 0; } .finish--content .information--panel-address .panel--body:after { content: ""; display: table; clear: both; } .finish--content .information--panel-address .panel--body::after { content: ""; display: table; clear: both; } .finish--content .information--panel-address .panel--body .billing--panel { float: left; width: 50%; } .finish--content .information--panel-address .panel--body .shipping--panel { float: right; width: 50%; } .teaser--btn-back { margin: 0rem 1.25rem 0rem 0rem; width: auto; } .finish--table { margin: 1.25rem 0rem 0rem 0rem; } .finish--table .table--header .panel--th { padding-right: 0; } .finish--table .panel--body { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .finish--table .column--total-price { width: 37%; } .finish--table .table--tr { padding: 0; } .finish--table .table--tr:last-child { border: 0 none; } .finish--table .table--tr .column--quantity { line-height: 2.625rem; margin: 0; } .finish--table .row--rebate .column--total-price, .finish--table .row--premium-product .column--total-price { width: 22.5%; } .finish--table .row--voucher .column--total-price { margin-left: 0; width: 48%; } .finish--table .table--aggregation { display: block; width: 50%; } .finish--table .aggregation--list { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } } @media screen and (min-width: 64em) { .finish--content .information--panel-wrapper { margin-bottom: 1.25rem; } .finish--content .information--panel-wrapper .information--panel-item { width: 33.3%; } .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-billing, .finish--content .information--panel-wrapper .information--panel-item.information--panel-item-shipping { width: 33.3%; } .finish--content .information--panel-wrapper .information--panel-item.information--panel-address { width: 66.6%; } .finish--content .information--panel-wrapper .information--panel-item-billing .panel { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .finish--content .information--panel-wrapper .information--panel-item-shipping { padding-left: 0; } .finish--content .information--panel-wrapper .information--panel-item-shipping .panel { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } } @media screen and (min-width: 78.75em) { .finish--content { padding-top: 2.8125rem; } .finish--content .column--total-price { width: 34%; } .finish--content .finish--table .table--header .column--product { width: 55%; } .finish--content .finish--table .row--premium-product .column--total-price, .finish--content .finish--table .row--rebate .column--total-price { width: 19.5%; } .finish--content .finish--table .row--voucher .column--total-price { width: 45%; } } @media print { body { width: auto; height: auto; overflow: auto; background: #ffffff; } .container { max-width: none; } .is--act-finish .content-main { margin-top: 0; } .finish--teaser, .navigation-main, .footer--columns, .shop--navigation, .top-bar, .btn--back-top-shop, .header-main .container--ajax-cart { display: none; } .is--ctl-checkout.is--minimal-header .header-main, .header-main { border-bottom: none; margin: 0; padding: 0; } .content-main { margin-bottom: 0; } .finish--table { clear: both; } .finish--table .table--tr { page-break-inside: avoid; } .finish--table .table--content { width: 85%; } .finish--table .column--product .column--image { width: 15%; } .finish--table .column--label.quantity--label { margin: 0; } .finish--table .column--product { width: 100%; } .finish--table .column--product:after { content: ""; display: table; clear: both; } .finish--table .column--product::after { content: ""; display: table; clear: both; } .finish--table .column--total-price, .finish--table .column--quantity { margin-left: 70%; width: 30%; } .footer-minimal .footer--service-menu, .footer-main .footer--service-menu, .footer-minimal .footer--copyright, .footer-main .footer--copyright, .footer-minimal .footer--logo, .footer-main .footer--logo { display: none; } .footer-minimal .vat-info--text, .footer-main .vat-info--text { font-size: 0.5625rem; } .footer-minimal a, .footer-main a { color: #113c62; } } /* Account ================================================ Defines the styles for the Shopware 5 user account page. The my-account page displays a dashboard that shows an overview of the user information, payment methods, billing and shipping information inside panel elements. It allows the user to directly see and change the important information of their account. */ .account--content { margin: 0.625rem 0rem 0rem 0rem; } .partner-statistic .panel--title { padding-bottom: 1.25rem; } .account--content:after, .payment_logo_debit:after, .account-address--container:after, .account-info--container:after { content: ""; display: table; clear: both; } .account--content::after, .payment_logo_debit::after, .account-address--container::after, .account-info--container::after { content: ""; display: table; clear: both; } .account--logout .logout--headline { font-size: 1.5rem; margin: 0.625rem 0rem 1.25rem 0rem; } .account--logout .logout--actions { margin-bottom: 0.625rem; } .account--logout .logout-back-to-shop { display: block; } .account--menu .link--logout { font-weight: 700; color: #113c62; } .account--menu .navigation--logout-personalized { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account--box { margin: 0rem 0rem 1.25rem 0rem; } .account--password input[type="text"], .account--email input[type="text"], .account--password input[type="password"], .account--email input[type="password"], .account--password input[type="email"], .account--email input[type="email"] { width: 100%; } .account--welcome { margin-bottom: 1.25rem; } .account--welcome .panel--body { padding: 0; } .account--welcome .panel--title { padding: 1.25rem 0rem 1.25rem 0rem; margin: 0; } .account--welcome .panel--actions { padding: 0; } .account--error, .account--success { margin: 0rem 0rem 0.625rem 0rem; } .register--error-msg { color: #e74c3c; } .account--actions { margin: 0rem 1.25rem 1.25rem 1rem; } .account--actions:after { content: ""; display: table; clear: both; } .account--actions::after { content: ""; display: table; clear: both; } .account--change-payment.register--content { display: block; width: 100%; } .account--newsletter fieldset { border: 0; padding: 0; } .account--newsletter fieldset input[type="checkbox"] { margin: 0rem 0.625rem 0rem 0rem; } .account--paging { padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; background: #f7fafc; } .account--paging:after { content: ""; display: table; clear: both; } .account--paging::after { content: ""; display: table; clear: both; } .account--paging .paging--display { float: right; } .account--orders-overview { border: 1px solid #c8c8c8; } .account--orders-overview p { font-size: 0.875rem; } .account--orders-overview .orders--table-header { display: none; background: #e8f1f6; } .account--orders-overview .orders--table-header .panel--th { color: #113c62; } .account--orders-overview .panel--tr { padding: 0.625rem 0rem 0.625rem 0rem; } .account--orders-overview .panel--td { padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; display: block; float: none; } .account--orders-overview .panel--td:after { content: ""; display: table; clear: both; } .account--orders-overview .panel--td::after { content: ""; display: table; clear: both; } .account--orders-overview .column--info-labels, .account--orders-overview .column--info-data { width: 50%; float: left; text-align: left; } .account--orders-overview .column--info-data { padding: 0.3125rem 0.625rem 0rem 0rem; } .account--orders-overview .column--summary-labels, .account--orders-overview .column--summary-data { width: 50%; float: left; text-align: left; } .account--orders-overview .column--summary-data { padding: 0.3125rem 0.625rem 0rem 0rem; } .account--orders-overview .column--label, .account--orders-overview .column--value { width: 50%; float: left; } .account--orders-overview .column--label { font-weight: 700; } .is--act-partnerStatistic .content-main--inner { padding: 0rem 0rem 1rem 0rem; } .is--act-partnerStatistic .account--welcome { padding: 0rem 0rem 0rem 0.625rem; } .is--act-partnerStatistic .listing--actions { padding: 0.625rem 1.125rem 1.5rem 1.125rem; border-bottom: 1px solid #c8c8c8; } .is--act-partnerStatistic .date-filter { font-size: 0.875rem; height: 3.125rem; display: block; width: 100%; } .is--act-partnerStatistic .date-filter--label { padding: 0.5625rem 0rem 0.625rem 0rem; width: 2.5rem; display: block; float: left; } .is--act-partnerStatistic .date-filter--input { margin: 0rem 0rem 0rem 2.5rem; width: auto; } .is--act-partnerStatistic .datepicker { padding-right: 2.1875rem; width: 100%; float: left; } .is--act-partnerStatistic .ui-datepicker-trigger { width: 1.25rem; height: 1.25rem; margin: 0.625rem 0rem 0rem -1.875rem; display: inline; border: 0; background: transparent; text-align: center; color: #113c62; padding: 0; } .is--act-partnerStatistic .btn--filter { width: 100%; text-align: center; margin: 0; } .is--act-partnerStatistic .chart--holder { display: none; } .is--act-partnerStatistic .panel--th, .is--act-partnerStatistic .panel--td { padding: 0.5rem 0.625rem 0.4375rem 0.625rem; width: 25%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .is--act-partnerStatistic .panel--th:first-child, .is--act-partnerStatistic .panel--td:first-child { text-align: left; } .is--act-partnerStatistic .panel--th { padding: 0.1875rem 0.625rem 0.125rem 0.625rem; font-size: 0.75rem; color: #113c62; } .is--act-partnerStatistic .is--odd { padding: 0rem 0rem 0.5625rem 0rem; border-bottom: 1px solid #c8c8c8; } .is--act-partnerStatistic .is--odd .column--price, .is--act-partnerStatistic .is--odd .column--total { padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 100%; } .is--act-partnerStatistic .column--label { text-align: left; } .is--act-partnerStatistic .column--value { text-align: right; } .is--act-partnerStatistic .column--label, .is--act-partnerStatistic .column--value { width: 50%; float: left; } .is--act-partnerStatistic .column--item-sum .column--label { display: block !important; } .order--status-icon { width: 0.5rem; height: 0.5rem; top: 0.5rem; display: inline-block; position: relative; } .order--status-icon.status--0, .order--status-icon.status--1, .order--status-icon.status--3, .order--status-icon.status--6 { background: #4aa3df; } .order--status-icon.status--2, .order--status-icon.status--5, .order--status-icon.status--7 { background: #2ecc71; } .order--status-icon.status--4, .order--status-icon.status--8 { background: #e74c3c; } .order--name { color: #113c62; } .order--details, .order--price-unit, .order--current-price { display: none; } .order--details .panel--tr { border-bottom: 1px solid #c8c8c8; } .order--repeat { text-align: center; background: #646464; border-bottom: 1px solid #c8c8c8; } .order--actions { text-align: center !important; } .order--user-comments, .order--shop-comments { border-bottom: 1px solid #c8c8c8; } .account--downloads { border: 1px solid #c8c8c8; } .account--downloads p { font-size: 0.875rem; } .account--downloads .downloads--table-header { display: none; } .account--downloads .panel--tr { padding: 0.625rem 0rem 0.625rem 0rem; } .account--downloads .panel--td { padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; display: block; float: none; } .account--downloads .panel--td:after { content: ""; display: table; clear: both; } .account--downloads .panel--td::after { content: ""; display: table; clear: both; } .account--password-reset { margin-top: 0.625rem; } .account--password-reset p { margin: 0; } .account--password-reset .password-reset--input { margin: 0rem 0rem 1.875rem 0rem; width: 100%; } .account--password-reset .password-reset--link { width: 100%; margin: 0; } .account--password-reset .password-reset--link:first-child { margin: 0rem 0rem 0.625rem 0rem; } .account--password-reset .password-reset--captcha img { display: inline; } .account--password-new { margin-top: 0.625rem; } .account--password-new .password-new--input { margin-bottom: 0.9375rem; width: 100%; } .account--password-new .password-new--helptext { margin-bottom: 0; } .account--password-new .password-new--submit { display: block; width: 100%; } .account--profile { margin: 0rem; padding-top: 1.875rem; } .account--profile .profile--email-password-container:after { content: ""; display: table; clear: both; } .account--profile .profile--email-password-container::after { content: ""; display: table; clear: both; } .account--profile .profile-password--container { float: right; width: 100%; } .account--profile .profile-email--container { float: left; width: 100%; } .account--profile .alert { margin-bottom: 1.25rem; } .account--profile .js--loading { width: 1.125rem; height: 1.125rem; border-radius: 100%; background-clip: padding-box; margin: 0rem 0rem 0rem 0.3125rem; top: 0.25rem; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; border: 2px solid #c8c8c8; border-top: 2px solid #494949; display: inline-block; position: relative; } .account--profile .panel { margin-bottom: 1.25rem; } .account--profile .required-info { font-size: 0.875rem; } .account--profile .select-field { margin-bottom: 0.625rem; max-width: 100%; } .account--profile .profile--field { margin-bottom: 0.625rem; width: 100%; } .account--profile .profile--zip-city .profile--field-zipcode { width: 28%; float: left; } .account--profile .profile--zip-city .profile--field-city { width: 70%; float: left; } .account--profile .profile--zip-city .profile--field-city:after { content: ""; display: table; clear: both; } .account--profile .profile--zip-city .profile--field-city::after { content: ""; display: table; clear: both; } .account--profile .birthday--label { margin: 0rem 0rem 0.3125rem 0rem; display: block; font-weight: 700; } .account--profile .profile--birthdate .select-field { margin-bottom: 0.9375rem; max-width: 100%; float: left; } .account--profile .profile--birthdate .datepicker { margin-bottom: 0.9375rem; width: 100%; max-width: 100%; float: left; } .account--profile .profile--birthdate .profile--birthyear, .account--profile .profile--birthdate .profile--birthyear.select-field { margin-right: 0rem; } @media screen and (max-width: 48em) { .column--info-wrapper:after { content: ""; display: table; clear: both; } .column--info-wrapper::after { content: ""; display: table; clear: both; } } @media screen and (min-width: 30em) { .account--password-reset { margin-top: 0.625rem; } .account--password-reset .password-reset--input { margin: 0.625rem 0rem 1.875rem 0rem; } .account--password-reset .password-reset--link { margin: 0rem 0rem 0.625rem 0rem; width: auto; } .account--password-reset .password-reset--link:first-child { margin: 0rem 0.625rem 0rem 0rem; } .account--password-new .password-new--submit { display: inline-block; width: auto; } .account--logout .logout-back-to-shop { display: inline-block; } } @media screen and (min-width: 48em) { .account--content { margin: 1.875rem 0rem 0rem 0rem; } .account--content.is--wide { width: 100%; } .account--password-reset { margin: 1.25rem 0rem 0rem 0rem; } .account--password-new { margin-top: 1.25rem; } .account--password-new .password-new--input { width: 20rem; } .account--menu { border: 1px solid #c8c8c8; } .account--menu .navigation--headline { padding: 1.25rem 0rem 0rem 0rem; margin: 0rem 1.25rem 0rem 1.25rem; font-size: 1rem; display: block; font-weight: 700; color: #113c62; padding: 1.25rem 0rem 0.625rem 0rem; text-decoration: none !important; border-bottom: 1px solid #c8c8c8; } .account--menu .navigation--headline.is--underline { padding: 1.25rem 0rem 0.625rem 0rem; border-bottom: 1px solid #c8c8c8; text-decoration: none !important; } .account--menu .navigation--headline.is--secondary { color: #113c62; } .account--menu .navigation--headline.is--primary { color: #113c62; } .account--menu .account--menu-container { padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 0.875rem; line-height: 1.5rem; display: block; position: relative; padding: 0.625rem 1.25rem 0.625rem 1.25rem; } .account--menu .account--menu-container.has--border { border: 1px solid #c8c8c8; } .account--menu .account--menu-container.is--slim { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } .account--menu .account--menu-container.is--wide { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .account--menu .account--menu-container.is--flat { background: #646464; } .account--menu .account--menu-container.is--embossed { box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); background: #646464; } .account--menu .navigation--list { padding: 0; border: 0 none; } .account--menu .navigation--entry { margin: 0; border: 0 none; } .account--menu .navigation--link { padding: 0.3125rem 0rem 0.3125rem 0rem; } .account--menu .navigation--link.link--logout { margin: 0.625rem 0rem 0rem 0rem; padding: 0.625rem 0rem 0rem 0rem; border-top: 1px solid #c8c8c8; font-weight: 700; color: #113c62; } .account--menu .navigation--link.link--logout [class^="icon--"] { margin: 0rem 0.3125rem 0rem 0rem; display: inline-block; } .account--welcome .panel--title { font-size: 1.625rem; } .account--orders-overview .orders--table-header { display: block; } .account--orders-overview .panel--tr { padding: 0; border-width: 0 0 1px 0; } .account--orders-overview .panel--tr.order--repeat { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .account--orders-overview .panel--td { padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: inline-block; float: left; } .account--orders-overview .column--label { display: none; } .account--orders-overview .column--value { width: 100%; float: none; } .account--orders-overview .column--summary-labels, .account--orders-overview .column--summary-data { width: 20%; text-align: right; } .account--orders-overview .column--date, .account--orders-overview .column--id, .account--orders-overview .column--dispatch { width: 20%; } .account--orders-overview .column--status { width: 25%; } .account--orders-overview .column--actions { width: 15%; } .account--orders-overview .column--actions .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .account--orders-overview .column--name { width: 50%; } .account--orders-overview .column--quantity { width: 10%; } .account--orders-overview .column--price { width: 20%; } .account--orders-overview .column--total { width: 20%; } .account--orders-overview .column--info-labels { width: 20%; } .account--orders-overview .column--info-data { width: 40%; } .order--item { margin: 0; } .order--pseudo-price { font-size: 0.75rem; } .order--download, .order--price-unit, .order--current-price { display: block !important; } .order--download { margin: 0.625rem 0rem 0rem 0rem; } .order--quantity { text-align: center !important; } .order--actions, .order--price, .order--amount { text-align: right !important; } .account--downloads .downloads--table-header { display: block !important; background: #e8f1f6; } .account--downloads .downloads--table-header .panel--th { color: #113c62; } .account--downloads .panel--tr { padding: 0; border-width: 0 0 1px 0; } .account--downloads .panel--td { padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: inline-block; float: left; } .account--downloads .column--date, .account--downloads .column--actions { width: 20%; } .account--downloads .column--info { width: 60%; } .column--label { display: none; } .column--date, .column--id, .column--dispatch { width: 20%; } .column--status { width: 25%; } .column--actions { width: 15%; } .column--name { width: 50%; } .column--quantity { width: 10%; } .column--price { width: 20%; } .column--total { width: 20%; } .column--info-labels { width: 20%; } .column--info-data { width: 40%; } .column--summary { width: 20%; } .account--password-reset .password-reset--input { width: 20rem; } .account--error, .account--success { margin: 0rem 0rem 1.25rem 0rem; } .is--act-partnerStatistic .content-main--inner { padding: 0rem 1.25rem 1rem 1.25rem; } .is--act-partnerStatistic .account--welcome { padding: 0rem 0rem 0rem 0rem; } .is--act-partnerStatistic .listing--actions { padding: 0.625rem 0.625rem 0.625rem 0.625rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #c8c8c8; background: #969696; } .is--act-partnerStatistic .date-filter { padding: 0rem 0.625rem 0rem 0.625rem; width: 40%; float: left; height: auto; } .is--act-partnerStatistic .date-filter--label { width: 10%; } .is--act-partnerStatistic .btn--filter { width: 20%; float: left; height: 40px; } .is--act-partnerStatistic .chart--holder { text-align: center !important; display: block !important; width: 100%; } .is--act-partnerStatistic .panel--th, .is--act-partnerStatistic .panel--td { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .is--act-partnerStatistic .column--item-sum { width: 75% !important; } .is--act-partnerStatistic .column--item-sum .column--label, .is--act-partnerStatistic .column--item-sum .column--value { float: left; width: 50%; } .is--act-partnerStatistic .is--odd { border: 0; padding: 0; } .is--act-partnerStatistic .is--odd .column--total { width: 25%; float: left !important; } .is--act-partnerStatistic .is--odd .column--total .column--value { width: 100%; } .account--profile { margin: 0rem; } .account--profile .select-field { margin-bottom: 0.9375rem; } .account--profile .profile--field { margin-bottom: 0.9375rem; } .account--profile .select-field { max-width: 18.125rem; } .account--profile .profile--birthdate .select-field { width: 32%; margin-right: 2%; } } @media screen and (min-width: 64em) { .account--info, .account--billing { width: 49%; float: left; } .account--payment, .account--shipping { width: 49%; float: right; } .account--email, .account--password, .account--userdata { display: none; } .account--email, .account--password, .account--userdata, .account--newsletter { clear: both; } .account--password-reset { margin: 1.25rem 0rem 0rem 0rem; } .account--info .panel--body, .account--payment .panel--body { height: 7.5rem; } .account--profile .profile-password--container { float: right; width: 49%; } .account--profile .profile-email--container { float: left; width: 49%; margin-right: 2%; } } @media screen and (min-width: 78.75em) { .is--act-partnerStatistic .content-main--inner { padding: 0rem 2.8125rem 2.8125rem 2.8125rem; } .account--profile { padding-top: 2.8125rem; } .account--content { margin: 2.8125rem 0rem 0rem 0rem; } .account--password-reset { margin: 2.8125rem 0rem 0rem 0rem; } .account--password-new { margin-top: 2.8125rem; } .account--error, .account--success { margin: 0rem 0rem 1.25rem 0rem; } } .partner-statistic .account--welcome { margin-bottom: 0; } .partner-statistic .partner-statistic-body { padding: 0.625rem 0.625rem 0.625rem 0.625rem; margin: 0rem 0rem 1.25rem 0rem; } .partner-statistic .date-filter { display: inline-block; } .partner-statistic .date-filter--input { margin: 0rem 0rem 1.25rem 0rem; } .partner-statistic .ui-datepicker-trigger { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2rem; border-radius: 3px; background-clip: padding-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 0.875rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); -webkit-font-smoothing: inherit; display: inline-block; position: relative; font-weight: 700; text-decoration: none; text-align: left; cursor: pointer; border: 1px solid #c8c8c8; color: #113c62; /** Button icon font size */ /** Larger icon */ /* ######Icon alignment To work properly the button needs the class `is--icon-left` or `is--icon-right` and an `icon` inside it. ``` <button class="btn is--icon-left"> <i class="icon--account"></i> Icon left </button> <button class="btn is--icon-right"> <i class="icon--account"></i> Icon right </button> ``` */ /* ######Button size class Adding a button-size class creates a larger or smaller button or changes the button properies. Options: `is--large`, `is--small`, `is--full`, `is--center` ``` <button class="btn is--large"> Large button </button> <button class="btn is--small"> Small button </button> ``` */ /** State: Small button */ /** State: Medium button */ /** State: Large button */ /** State: Button with 100% width */ /** State: Button with text align center */ background-color: #E6E6E6; background-image: none; border-radius: 0; padding: 0.625rem 0.625rem 0.5625rem 0.625rem; margin: 0rem 1.5625rem 0rem 0rem; line-height: 1.25rem; } .partner-statistic .ui-datepicker-trigger [class^="icon--"] { font-size: 0.625rem; } .partner-statistic .ui-datepicker-trigger .is--large { font-size: 1rem; } .partner-statistic .ui-datepicker-trigger.is--icon-right { padding-right: 2.25rem; } .partner-statistic .ui-datepicker-trigger.is--icon-right [class^="icon--"] { height: 1rem; line-height: 2rem; margin: -1rem 0rem 0rem 0rem; right: 0.75rem; font-weight: 500; display: block; position: absolute; top: 50%; } .partner-statistic .ui-datepicker-trigger.is--icon-left { padding-left: 2.25rem; } .partner-statistic .ui-datepicker-trigger.is--icon-left [class^="icon--"] { height: 1rem; line-height: 2rem; margin: -1rem 0rem 0rem 0rem; left: 0.75rem; font-weight: 500; display: block; position: absolute; top: 50%; } .partner-statistic .ui-datepicker-trigger:disabled, .partner-statistic .ui-datepicker-trigger:disabled:hover, .partner-statistic .ui-datepicker-trigger.is--disabled, .partner-statistic .ui-datepicker-trigger.is--disabled:hover { opacity: 0.5; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); border: 1px solid #c8c8c8; color: #113c62; cursor: not-allowed; } .partner-statistic .ui-datepicker-trigger:hover { background: #ffffff; color: #113c62; border-color: #113c62; } .partner-statistic .ui-datepicker-trigger:focus { outline: none; } .partner-statistic .ui-datepicker-trigger.is--small { line-height: 1.75rem; } .partner-statistic .ui-datepicker-trigger.is--medium { line-height: 2rem; height: 2.375rem; } .partner-statistic .ui-datepicker-trigger.is--large { line-height: 2.25rem; height: 2.625rem; } .partner-statistic .ui-datepicker-trigger.is--full { display: block; } .partner-statistic .ui-datepicker-trigger.is--center { text-align: center; } /* Note ============================================== Contains the styling of the note page inside Shopware 5. The users can add an article to their note list if they are interested in the product and the product will be saved inside the list if the user is logged in inside their account. The articles are displayed inside a slim product box with an article thumbnail and the general item information. The styling also contains the viewport specific styles inside media queries. */ .note--content { margin: 1.25rem 0rem 1.25rem 0rem; } .note--overview .panel--td { padding: 0; } .note--item { padding: 1.25rem 0rem 1.25rem 0rem; position: relative; } .note--info, .note--sale { width: 80%; } .note--image-container { width: 4.6875rem; margin: 0rem 1.25rem 1.25rem 0rem; display: table-row; float: left; } .note--image-link { width: 4.6875rem; height: 4.6875rem; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; line-height: 4.0625rem; border-radius: 3px; background-clip: padding-box; display: table-cell; text-align: center; vertical-align: middle; border: 1px solid #c8c8c8; } .note--image { max-width: 4.0625rem; max-height: 4.0625rem; margin: 0 auto; } .note--title { margin: 0rem 0rem 0.3125rem 5.9375rem; font-size: 1.125rem; display: block; font-weight: 700; color: #113c62; } .note--title:hover { color: #113c62; } .note--rating { margin: 0rem 0rem 0.625rem 5.9375rem; } .note--rating [class^="icon--"] { color: #f1c40f; } .note--supplier { display: none; } .note--ordernumber, .note--date, .note--overview .product--rating { margin: 0rem 0rem 0rem 5.9375rem; display: block; } .note--delivery { margin: 0rem 0rem 0rem 5.9375rem; } .note--delivery .delivery--status-icon { display: none; } .note--delivery .delivery--text-available { display: block; } .note--compare { margin: 0.625rem 0rem 0rem 5.9375rem; display: none; } .note--compare .compare--link { background: none; border: none; margin: 0; padding: 0; color: #113c62; } .note--compare .compare--link:hover { color: #113c62; } .note--compare [class^="icon--"] { margin: 0rem 0.3125rem 0rem 0rem; font-size: 0.75rem; } .note--price-unit { margin: 0.3125rem 0rem 0rem 5.9375rem; font-size: 0.75rem; line-height: 1.125rem; display: block; } .note--price { font-size: 1.125rem; margin: 0.9375rem 0rem 0rem 5.9375rem; color: #113c62; font-weight: 700; } .note--delete { width: 2.5rem; height: 2.5rem; font-size: 0.625rem; line-height: 2.375rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #969696 100%); border-radius: 3px; background-clip: padding-box; top: 1.25rem; right: 0; left: auto; display: block; position: absolute; border: 1px solid #c8c8c8; text-align: center; font-weight: 500; color: #113c62; } .note--delete:hover { color: #113c62; border-color: #113c62; } @media screen and (min-width: 48em) { .note--overview .panel--table { padding: 0rem 1.25rem 0rem 1.25rem; border: 1px solid #c8c8c8; } .note--compare { display: block; } } @media screen and (min-width: 64em) { .note--info { padding-right: 1.25rem; width: 70%; } .note--sale { padding-right: 3.4375rem; width: 30%; } .note--zoom { font-size: 0.75rem; display: block; color: #113c62; text-align: center; } .note--zoom:hover { color: #113c62; } .note--title { margin: 0rem 0rem 0.3125rem 6.5625rem; } .note--supplier, .note--ordernumber, .note--date, .note--overview .product--rating { margin: 0rem 0rem 0rem 6.5625rem; display: block; } .note--delivery { margin: 0rem 0rem 0rem 6.5625rem; } .note--compare { margin: 0.3125rem 0rem 0rem 0rem; } .note--price { margin: 0; } .note--price-unit { padding-right: 3.125rem; margin: 0.3125rem 0rem 0rem 0rem; } } @media screen and (min-width: 78.75em) { .note--content { margin: 2.8125rem 0rem 0rem 0rem; } } /* Forms ========================================== Defines the general form element styles. It contains the components as: `capacha`, `description`, `required information` etc. */ .forms--content { width: 100%; } .forms--content .forms--headline { margin-bottom: 1.25rem; } .forms--content .forms--headline .forms--title { margin-top: 0rem; } .forms--content .forms--headline .forms--text p { margin-bottom: 0.75rem; } .forms--content .alert { margin: 1.875rem 0rem 0rem 0rem; } .forms--content .forms--field { margin-bottom: 0.3125rem; width: 100%; } .forms--content input { margin-bottom: 0.625rem; width: 100%; } .forms--content input[type="checkbox"] { width: auto; } .forms--content textarea { margin-bottom: 0.625rem; width: 100%; } .forms--content .field--select { margin-bottom: 0.625rem; } .forms--content .btn { float: right; } .forms--content .buttons:after { content: ""; display: table; clear: both; } .forms--content .buttons::after { content: ""; display: table; clear: both; } .forms--content .strasse { margin-right: 2%; width: 80%; float: left; } .forms--content .nr { width: 18%; float: left; } .forms--content .plz { margin-right: 2%; width: 28%; float: left; } .forms--content .ort { width: 70%; float: left; } .forms--content .ort:after { content: ""; display: table; clear: both; } .forms--content .ort::after { content: ""; display: table; clear: both; } .forms--content .forms--required { font-size: 0.75rem; margin-bottom: 0.625rem; } .forms--content .forms--description { margin: -0.5rem 0rem 0.625rem 0rem; clear: both; } .forms--content .forms--captcha strong.captcha--notice { margin-bottom: 0.5rem; display: block; } .forms--content .forms--checkbox label { top: -0.125rem; position: relative; } .forms--content .forms--checkbox input[type="checkbox"] { width: auto; } @media screen and (min-width: 48em) { .forms--content { margin-top: 2.8125rem; } .forms--content input { margin-bottom: 0.9375rem; } .forms--content textarea { margin-bottom: 0.9375rem; } .forms--content .forms--captcha strong.captcha--notice { margin-bottom: 1rem; } } @media screen and (min-width: 78.75em) { .forms--content { margin-top: 2.8125rem; } .forms--content .alert { margin: 0rem 0rem 0rem 0rem; } } /* Sitemap ========================================== Contains the styles for the the Sitemap. The sitemap page shows all categories and subpages of the shop in an overview. The sitemap link is located in the footer information column. */ .sitemap--content { margin-top: 0.625rem; } .sitemap--content .sitemap--headline { margin-bottom: 0.625rem; } .sitemap--content .sitemap--headline .sitemap--title { margin-top: 0; } .sitemap--content .sitemap--headline .sitemap--headline-text { margin-bottom: 0rem; } .sitemap--content .sitemap--category { padding-bottom: 0.625rem; margin-bottom: 1rem; min-height: 3.75rem; background-color: #969696; } .sitemap--content .sitemap--category .sitemap--navigation-link { padding: 0.25rem 0rem 0.25rem 1.25rem; color: #113c62; display: block; } .sitemap--content .sitemap--category .sitemap--navigation-link:hover { color: #113c62; } .sitemap--content .sitemap--navigation-entry-inner .sitemap--navigation-link { padding-left: 2.1875rem; } .sitemap--content .sitemap--navigation-head { padding: 0.25rem 0.625rem 0.25rem 0.625rem; margin-bottom: 0.5rem; background: #00cc00; } .sitemap--content .sitemap--navigation-head .sitemap--navigation-head-link { color: #fff; } @media screen and (min-width: 48em) { .sitemap--content { margin-top: 1.25rem; } .sitemap--content .sitemap--headline { margin-bottom: 1.25rem; } .sitemap--content .sitemap--category { width: 49%; float: left; margin-right: 2%; } .sitemap--content .sitemap--category:last-child, .sitemap--content .sitemap--category:nth-child(2) { margin-right: 0rem; } } @media screen and (min-width: 64em) { .sitemap--content .sitemap--category { width: 24%; float: left; margin-right: 1.25%; } .sitemap--content .sitemap--category:last-child { margin-right: 0rem; } .sitemap--content .sitemap--category:nth-child(2) { margin-right: 1.25%; } } @media screen and (min-width: 78.75em) { .sitemap--content { margin-top: 2.8125rem; } } /* Search ========================================== Contains the styles for the main search-box component of the Shopware storefront. The styling defines the search result page layout and its components. It contains the viewport specific styles inside media queries. */ .search--content { padding: 2.5rem 0rem 0rem 0rem; } .search--headline { margin: 0rem 0rem 2.5rem 0rem; text-align: center; } .search--cat-filter { margin: 0rem 0rem 1.25rem 0rem; } .search--cat-filter .cat-filter--headline { padding: 0rem 0rem 0.3125rem 0rem; margin: 0rem 0rem 1.25rem 0rem; font-size: 1rem; line-height: 1.5rem; border-bottom: 1px solid #c8c8c8; } .search--cat-filter .cat-filter--reset { margin: 0rem 0rem 0.9375rem 0rem; line-height: 1.5rem; border-color: #113c62; } .search--cat-filter .cat-filter--reset [class^="icon--"] { top: -0.0625rem; margin-right: 0.625rem; font-size: 0.5rem; position: relative; } .search--cat-filter .cat-filter--active-path { margin: 0rem 0rem 1.25rem 0rem; } .search--cat-filter .cat-filter--label { margin: 0rem 0.625rem 0rem 0rem; font-weight: 700; } .search--cat-filter .cat-filter--path { white-space: nowrap; } .search--cat-filter .cat-filter--path [class^="icon--"] { margin: 0rem 1.25rem 0rem 1.25rem; font-size: 0.625rem; } .search--cat-filter .cat-filter--link, .search--cat-filter .cat-filter--sub-cat { color: #113c62; } .search--cat-filter .cat-filter--link:hover, .search--cat-filter .cat-filter--sub-cat:hover { color: #113c62; } .search--cat-filter .cat-filter--link .checkbox, .search--cat-filter .cat-filter--sub-cat .checkbox { margin: 0rem 0.3125rem 0rem 0rem; top: -0.0625rem; position: relative; } .search--cat-filter .cat-filter--sub-cat { width: 11.25rem; line-height: 1.5rem; margin: 0rem 0.625rem 0rem 0rem; display: block; } @media screen and (min-width: 48em) { .search--cat-filter { margin: 0rem 0rem 2.5rem 0rem; } } @media screen and (min-width: 78.75em) { .search--content { padding: 2.8125rem 0rem 0rem 0rem; } } /* Custom pages ============================================== Defines the layout for the custom pages. The styling defines the basic layout of the Shopware 5 custom pages that can be created and customized for multiple purposes. */ .custom-page--content { margin-top: 0.625rem; } .custom-page--content ul, .custom-page--content ol { padding-left: 1.25rem; } .custom-page--content .custom-page--tab-headline { margin-top: 0rem; font-size: 1.5rem; } .custom-page--content .content--custom.panel--body { padding: 1.25rem; } .custom-page--content .is--active-parent { display: block; } .ajax-modal--custom { padding: 0.5rem 0.5rem 0.5rem 0.5rem; } @media screen and (min-width: 48em) { .custom-page--content { margin-top: 1.875rem; } .custom-page--content .custom-page--tab-headline { margin-top: 0.625rem; } .ajax-modal--custom { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } } @media screen and (min-width: 78.75em) { .ajax-modal--custom { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .custom-page--content { margin-top: 2.8125rem; } } /* Confirm ================================ Defines the styles for the confirm page on the checkout process. It is displayed as the third step of the checkout process of Shopware and shows the important checkout information and article details of the order. */ .confirm--content > .alert { margin: 0.5rem 0rem 0rem 0rem; } .confirm--content .body--revocation { font-weight: 700; } .confirm--content .panel { margin: 0.5rem 0rem 0.5rem 0rem; border-radius: 3px; background-clip: padding-box; } .confirm--content .product--table { margin: 0; } .confirm--content .product--table .panel--body { background: #e8f1f6; color: #113c62; padding-bottom: 0; } .confirm--content .product--table .table--tr, .confirm--content .product--table .table--media img { border-color: #c8c8c8; } .confirm--content .product--table .basket--footer { margin: 0rem -0.625rem 0rem -0.625rem; background: #969696; border-color: #c8c8c8; } .confirm--content .product--table .basket--footer .aggregation--list { margin: 0; background: transparent; border-top: 1px solid #c8c8c8; } .confirm--content .product--table .basket--footer .table--aggregation { margin-left: 0; margin-right: 0; } .confirm--content .product--table .is--last-row { border-bottom: 0 none; } .confirm--content .column--unit-price { display: none; } .confirm--content .table--tr .column--tax-price { padding: 0rem 0rem 0.5625rem 0.625rem; } .confirm--content .agb_info, .confirm--content .list--checkbox { margin: 0rem 0rem 1.3125rem 0rem; } .confirm--content .list--checkbox .column--checkbox { width: 10%; } .confirm--content .list--checkbox .column--label { width: 90%; } .confirm--content .add-product--form { margin: 0.75rem 0rem 0.75rem 0rem; } .confirm--content .add-voucher--form:after, .confirm--content .add-product--form:after { content: ""; display: table; clear: both; } .confirm--content .add-voucher--form::after, .confirm--content .add-product--form::after { content: ""; display: table; clear: both; } .confirm--content .add-product--field, .confirm--content .add-voucher--field { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; width: 90%; } .confirm--content .add-product--button, .confirm--content .add-voucher--button { padding: 0.3125rem 0rem 0.3125rem 0rem; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; width: 10%; text-align: center; } .confirm--content .user-comment--field { width: 100%; } .confirm--content .table--actions .main--actions { margin: 1.25rem 0rem 0.625rem 0rem; } .confirm--content .table--actions .btn { width: 100%; } .confirm--content .table-footer--country-notice { margin: 0.6875rem 0rem 0rem 0rem; } .confirm--content .js--loading { width: 1.125rem; height: 1.125rem; border-radius: 100%; background-clip: padding-box; right: 0.375rem; top: 0.125rem; margin: 0.5rem 0.3125rem 0.5rem 0.3125rem; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; border: 2px solid #c8c8c8; border-top: 2px solid #494949; display: block; position: absolute; } .confirm--content .payment--panel .payment--method-info, .confirm--content .payment--panel .shipping--method-info { margin-bottom: 0.625rem; } .confirm--content .payment--panel .payment--description, .confirm--content .payment--panel .shipping--description { white-space: nowrap; } .confirm--content .information--panel-item:after { content: ""; display: table; clear: both; } .confirm--content .information--panel-item::after { content: ""; display: table; clear: both; } .confirm--content .information--panel-item .panel--body:after { content: ""; display: table; clear: both; } .confirm--content .information--panel-item .panel--body::after { content: ""; display: table; clear: both; } .confirm--content .information--panel-item .alert { margin-bottom: 0; } .confirm--content .information--panel-item.information--panel-address .shipping--panel { text-align: center; } .confirm--content .information--panel-item.information--panel-address .shipping--panel .btn { display: none; } .confirm--content .set-default { margin-top: 0.9375rem; } .confirm--content .choose-different-address { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%; vertical-align: bottom; } @media screen and (max-width: 30em) { .confirm--content .information--panel-item .information--panel-address .shipping--panel { margin-top: 1.25rem; padding-top: 1.25rem; } .confirm--content .information--panel-item .information--panel-address .shipping--panel .btn { text-align: center; } .confirm--content .information--panel-item .information--panel-address .panel--actions .choose-different-address { display: inline-block; } .confirm--content .information--panel-item .information--panel-address .panel--body { padding-bottom: 0; } .confirm--content .information--panel-item .choose-different-address { margin-top: 0.625rem; } } @media screen and (min-width: 30em) { .confirm--content .product--table .column--quantity { width: 26%; } .confirm--content .product--table .column--total-price { width: 28.5%; } .confirm--content .product--table .column--tax-price { padding-right: 0.625rem; float: left; width: 32%; } .confirm--content .product--table .row--rebate .column--tax-price, .confirm--content .product--table .row--premium-product .column--tax-price, .confirm--content .product--table .row--voucher .column--tax-price { margin-left: 39.5%; } .confirm--content .information--panel-address > .panel { margin: 0; } .confirm--content .information--panel-address > .panel .information--panel { width: 50%; float: left; } } @media screen and (min-width: 48em) { .is--act-shippingpayment .basket--footer { border-radius: 3px; background-clip: padding-box; } .confirm--content > .alert { margin: 1.25rem 0rem 0rem 0rem; } .confirm--content .panel { margin: 1.25rem 0rem 1.25rem 0rem; } .confirm--content .product--table .table--header { background: #e8f1f6; border-color: #c8c8c8; } .confirm--content .product--table .table--header .panel--th { color: #113c62; } .confirm--content .product--table .column--product { width: 47%; } .confirm--content .product--table .column--quantity { width: 11%; } .confirm--content .product--table .column--tax-price { width: 17%; } .confirm--content .product--table .column--total-price { width: 17%; } .confirm--content .product--table .column--actions { width: 7.5%; } .confirm--content .product--table .is--last-row { border-bottom: 0 none; } .confirm--content .product--table .row--product .column--tax-price { line-height: 2.625rem; padding-top: 1.625rem; } .confirm--content .product--table .panel--body { padding-bottom: 1.25rem; } .confirm--content .product--table .basket--footer { margin: 0rem -1.25rem -1.25rem -1.25rem; } .confirm--content .product--table .row--rebate .column--tax-price, .confirm--content .product--table .row--premium-product .column--tax-price, .confirm--content .product--table .row--voucher .column--tax-price { padding-top: 1.3125rem; margin-left: 11%; } .confirm--content .product--table .row--rebate .column--total-price, .confirm--content .product--table .row--premium-product .column--total-price, .confirm--content .product--table .row--voucher .column--total-price { margin-left: 0; } .confirm--content .product--table .column--tax-price .tax-price--label { margin-bottom: 0.75rem; margin: 0; } .confirm--content .row--premium-product .column--product, .confirm--content .row--rebate .column--product { width: 58%; } .confirm--content .row--premium-product .column--product .column--image, .confirm--content .row--rebate .column--product .column--image { width: 16.2%; } .confirm--content .product--table .row--premium-product .column--tax-price, .confirm--content .product--table .row--rebate .column--tax-price { margin-left: 0; } .confirm--content .tos--panel .column--checkbox { margin-right: 0.75rem; width: auto; } .confirm--content .tos--panel .column--label { width: 95%; display: block; } .confirm--content .information--panel-wrapper { margin: -2% 0 0 -2%; } .confirm--content .information--panel-wrapper .information--panel { margin: 0; } .confirm--content .information--panel-wrapper .information--panel-item { padding: 2% 0 0 2%; width: 100%; float: left; } .confirm--content .additional--features .feature--add-product { width: 40%; margin: -1% 2.5% 0 0; } .confirm--content .additional--features .feature--user-comment { width: 55%; margin: 0 0 0 2.5%; } .confirm--content .additional--features .user-comment--field { height: 5.9375rem; } .confirm--content .product--table .basket--footer .aggregation--list { float: right; padding-right: 10.4%; border-top: 0 none; } .confirm--content .main--actions .btn { width: auto; float: right; } .confirm--content .main--actions .btn:after { content: ""; display: table; clear: both; } .confirm--content .main--actions .btn::after { content: ""; display: table; clear: both; } .confirm--content .relevant--info { display: block; } .confirm--content .information--panel-wrapper .information--panel-item-billing { width: 50%; } .confirm--content .information--panel-wrapper .information--panel-item-billing .panel { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .confirm--content .information--panel-wrapper .information--panel-item-shipping { padding-left: 0; width: 50%; } .confirm--content .information--panel-wrapper .information--panel-item-shipping .panel { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .confirm--content .information--panel-item.information--panel-address .panel--actions .choose-different-address { display: none; } .confirm--content .information--panel-item.information--panel-address .shipping--panel .btn { display: inline-block; } .confirm--content .information--panel-item.information--panel-address .panel--body:after { content: ""; display: table; clear: both; } .confirm--content .information--panel-item.information--panel-address .panel--body::after { content: ""; display: table; clear: both; } .confirm--content .information--panel-item.information--panel-address .panel--body .billing--panel { float: left; width: 50%; } .confirm--content .information--panel-item.information--panel-address .panel--body .shipping--panel { float: right; width: 50%; } } @media screen and (min-width: 64em) { .confirm--content .product--table .row--premium-product .column--image, .confirm--content .product--table .row--rebate .column--image { width: 13%; } .confirm--content .product--table .aggregation--list { padding-right: 10%; } .confirm--content .information--panel-wrapper .payment--panel .panel--actions { position: relative; } .confirm--content .information--panel-wrapper .payment--panel .btn--change-payment { bottom: 1.25rem; position: absolute; } .confirm--content .information--panel-wrapper .information--panel-item { width: 33.3%; } .confirm--content .information--panel-wrapper .information--panel-item.information--panel-address { width: 66.6%; } } @media screen and (min-width: 78.75em) { .confirm--content { padding-top: 1.5625rem; } .confirm--content > .alert { margin: 2.8125rem 0rem 0rem 0rem; } .confirm--content .product--table .row--premium-product .column--product, .confirm--content .product--table .row--rebate .column--product { width: 58%; } .confirm--content .product--table .row--premium-product .column--image, .confirm--content .product--table .row--rebate .column--image { width: 11.3%; } .confirm--content .product--table .row--premium-product .column--tax-price, .confirm--content .product--table .row--rebate .column--tax-price { margin-left: 0; } .confirm--content .product--table .aggregation--list { padding-right: 9.6%; } } /* Newsletter ========================================== Contains the styles of the newsletter sign-up page and the form element inside it. It contains the viewport specific styles inside media queries. */ .newsletter--content { padding-top: 0.625rem; } .newsletter--content:after { content: ""; display: table; clear: both; } .newsletter--content::after { content: ""; display: table; clear: both; } .newsletter--content .newsletter--error-messages { margin-bottom: 0.625rem; } .newsletter--content .newsletter--headline { margin-bottom: 0.625rem; } .newsletter--content .newsletter--headline .newsletter--title { margin-top: 0.625rem; } .newsletter--content .newsletter--headline .newsletter--info { margin: 0; } .newsletter--content .select-field { margin-bottom: 0.625rem; max-width: 100%; } .newsletter--content .newsletter--required-info { margin-bottom: 1rem; } .newsletter--content .newsletter--action:after { content: ""; display: table; clear: both; } .newsletter--content .newsletter--action::after { content: ""; display: table; clear: both; } .newsletter-listing--content { margin-top: 0.625rem; } .newsletter-listing--content .newsletter-listing--headline { margin-bottom: 0.625rem; } .newsletter-listing--content .newsletter--title { margin: 0.625rem 0rem 0.625rem 0rem; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name { width: 65%; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button { width: 35%; } .newsletter-listing--content .newsletter-listing--entry { padding: 0.625rem 0rem 0.625rem 0rem; border-bottom: 1px solid #c8c8c8; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description { margin-top: 0.25rem; width: 65%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button { width: 35%; } .newsletter-listing--content .newsletter-listing--entry:last-child { border: none; } .newsletter-detail--content { margin-top: 0.625rem; } .newsletter-detail--content .newsletter-detail--container:after { content: ""; display: table; clear: both; } .newsletter-detail--content .newsletter-detail--container::after { content: ""; display: table; clear: both; } .newsletter-detail--content .newsletter-detail--container .newsletter-detail--iframe { overflow: auto; -webkit-overflow-scrolling: touch; } .newsletter-detail--content .newsletter-detail--container .newsletter-detail--iframe iframe { min-height: 31.25rem; width: 100%; border: none; outline: none; } .newsletter-detail--content .newsletter-detail--buttons { margin: 0.625rem 0rem 0.625rem 0rem; } .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--backlink { width: 100%; } .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window { margin-bottom: 0.625rem; width: 100%; } @media screen and (min-width: 30em) { .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name { width: 80%; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button { width: 20%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description { width: 80%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button { width: 20%; } .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--backlink, .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window { width: auto; margin: 0; } } @media screen and (min-width: 48em) { .newsletter--content { padding-top: 1.25rem; } .newsletter--content .newsletter--error-messages { margin-bottom: 1.25rem; } .newsletter--content .newsletter--headline { margin-bottom: 1.25rem; } .newsletter--content .select-field { margin-bottom: 0.9375rem; max-width: 18.125rem; } .newsletter-listing--content { margin-top: 1.25rem; } .newsletter-listing--content .newsletter-listing--headline { margin-bottom: 1.25rem; } .newsletter-detail--content { margin-top: 1.25rem; } .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window { width: auto; text-align: right; } } @media screen and (min-width: 78.75em) { .newsletter--error-messages { padding-top: 0rem; } .newsletter--content { margin-top: 2.8125rem; padding: 0; } .newsletter--content .newsletter--headline .newsletter--title { margin-top: 0rem; } .newsletter-listing--content { margin-top: 2.8125rem; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name { width: 90%; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button { width: 10%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description { width: 90%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button { width: 10%; } .newsletter-detail--content { margin-top: 2.8125rem; } } /* Blog ================================================ Defines the styles for the blog page and its components. It contains the sidebar selection, the comment section and the details. More precise designations are commented inside the document. */ .blog--listing { margin-top: 1rem; } .blog--filter-btn { margin-bottom: 1.25rem; } .blog--filter-btn .filter--trigger { display: block; } .blog--filter-options { border-right: 1px solid #c8c8c8; } .blog--filter-options .filter--container { padding: 0rem 0.625rem 0rem 0.625rem; } .blog--filter-options .blog--filter-close-btn { padding: 0.75rem 0.625rem 0.75rem 0.625rem; background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); display: block; color: #fff; font-weight: 700; } .blog--filter-options .blog--filter-close-btn:hover { color: #fff; } .blog--filter-options .blog--filter-close-btn .icon--arrow-right { margin: 0.1875rem 0rem 0rem 0rem; float: right; } .blog--filter-options .blog--subscribe { display: none; } .blog--filter-options .filter--headline { font-size: 1rem; line-height: 1.625rem; margin: 1rem 0.625rem 0.375rem 0.625rem; font-weight: 700; color: #113c62; } .blog--filter-options .filter--entry { padding: 0.625rem 1.25rem 0.625rem 1.25rem; font-size: 1rem; display: block; border-bottom: 1px solid #c8c8c8; } .blog--filter-options .filter--entry:last-child { border: 0 none; } .blog--filter-options .filter--link { color: #113c62; } .blog--filter-options .filter--link:hover { color: #113c62; } .blog--sidebar { width: 100%; } .blog--sidebar .block-group { width: 100%; } .blog--sidebar .blog--navigation .has--border { border: none; } .blog--sidebar .blog--navigation .collapse--header { padding: 0.625rem 1.25rem 0.625rem 1.25rem; margin-bottom: 0.3125rem; font-weight: 500; color: #113c62; } .blog--sidebar .blog--navigation .collapse--header:hover { color: #113c62; } .blog--sidebar .blog--navigation .is--active { color: #fff; font-weight: 700; } .blog--sidebar .blog--navigation .is--active:hover { color: #fff; } .blog--sidebar .blog--navigation .collapse--content { padding: 0rem 0rem 0rem 0rem; } .blog--sidebar .blog--navigation .collapse--content .filter--entry-link { color: #113c62; } .blog--sidebar .blog--navigation .collapse--content .filter--entry-link:hover { color: #113c62; } .blog--sidebar .blog--filter-content, .blog--sidebar .blog--subscribe-content { display: none; } .blog--sidebar .blog--filter-content.is--active, .blog--sidebar .blog--subscribe-content.is--active { display: block; } .blog--sidebar .blog--filter-tags:after { content: ""; display: table; clear: both; } .blog--sidebar .blog--filter-tags::after { content: ""; display: table; clear: both; } .blog--box { margin-bottom: 1.25rem; } .blog--box:after { content: ""; display: table; clear: both; } .blog--box::after { content: ""; display: table; clear: both; } .blog--box .blog--box-metadata { padding-bottom: 0.875rem; padding-top: 0.3125rem; font-size: 0.75rem; margin: 0rem 1.25rem 0rem 1.25rem; border-bottom: 1px solid #c8c8c8; } .blog--box .blog--box-metadata .blog--metadata { padding-right: 0.5rem; margin-right: 0.5rem; display: inline-block; border-right: 1px solid #c8c8c8; } .blog--box .blog--box-metadata .blog--metadata:last-child { border-right: 0 none; } .blog--box .blog--box-metadata .blog--metadata-rating { font-size: 0.875rem; color: #113c62; } .blog--box .blog--box-headline { font-size: 1.125rem; } .blog--box .blog--box-link { color: #113c62; } .blog--box .blog--box-link:hover { color: #113c62; } .blog--box .blog--box-picture { display: block; height: auto; width: 100%; } .blog--box .blog--picture-preview { width: 100%; } .blog--box .blog--box-description { margin-top: 1rem; } .blog--box .blog--box-description .blog--box-description-short { margin-bottom: 1rem; margin-top: -0.375rem; } .blog--box .blog--box-tags { margin-top: 0.5rem; font-size: 0.75rem; } .blog--detail { margin-top: 0.625rem; } .blog--detail ul, .blog--detail ol { padding-left: 1.875rem; } .blog--detail .listing { margin: 0; } .blog--detail .blog--box { margin-bottom: 0; } .blog--detail .blog--detail-header { margin-bottom: 1.25rem; } .blog--detail .blog--detail-headline { margin: 0rem 0rem 0.3125rem 0rem; } .blog--detail .blog--detail-headline, .blog--detail .blog--detail-box-headline { font-size: 1.125rem; } .blog--detail .select-field { max-width: 100%; } .blog--detail .blog--rating-link { font-size: 0.875rem; color: #113c62; } .blog--detail .blog--bookmarks-icons { margin-top: 0.625rem; float: right; } .blog--detail .blog--bookmark { font-size: 2.5rem; } .blog--detail .blog--detail-thumbnails { margin-bottom: 0.625rem; } .blog--detail .blog--detail-thumbnails .blog--thumbnail-image { margin: 0 auto; } .blog--detail .blog--detail-thumbnails .block { height: 5rem; width: 23%; } .blog--detail .blog--image { padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 100%; } .blog--detail .blog--thumbnail { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; margin: 2% 1%; display: block; float: left; } .blog--detail .blog--thumbnail:first-child { margin-left: 0; } .blog--detail .blog--thumbnail:last-child { margin-right: 0; } .blog--detail .blog--comments-wrapper { padding: 1.25rem 0rem 1.25rem 0rem; } .blog--detail .blog--comments { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .blog--detail .blog--comments .comments--actions .btn--create-entry { width: 100%; } .blog--detail .blog--comments .comments--list { margin-top: 1.875rem; } .blog--detail .blog--comments .list--entry { margin-top: 0.625rem; } .blog--detail .blog--comments .list--entry:after { content: ""; display: table; clear: both; } .blog--detail .blog--comments .list--entry::after { content: ""; display: table; clear: both; } .blog--detail .blog--comments .entry--meta { width: 100%; } .blog--detail .blog--comments .entry--meta .meta--rating { margin-bottom: 0.3125rem; } .blog--detail .blog--comments .entry--content { width: 100%; } .blog--detail .blog--comments .content--headline { margin: 0.625rem 0rem 0.3125rem 0rem; font-size: 1rem; } .blog--detail .blog--comments-headline { font-size: 1.3125rem; margin: 0rem 0rem 1.25rem 0rem; } .blog--detail .blog--comments-entry { margin-bottom: 1.25rem; } .blog--detail .blog--comments-entry:last-child { margin: 0; } .blog--detail .blog--comments-entry-left { padding: 1.25rem 2.5rem 1rem 2.5rem; border-bottom: 1px solid #c8c8c8; } .blog--detail .blog--comments-entry-left::after { margin: 0rem 0rem 0rem -0.5625rem; width: 1.125rem; height: 1.125rem; bottom: -0.5625rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; position: absolute; left: 50%; background: #fff; border: 1px solid #c8c8c8; border-left: 0 none; border-top: 0 none; } .blog--detail .blog--comments-rating { font-size: 1.125rem; color: #f1c40f; } .blog--detail .blog--comments-entry-right { padding: 1.25rem 2.5rem 1rem 2.5rem; } .blog--detail .blog--comments-entry-headline { font-size: 1rem; color: #113c62; margin-top: 0; } .blog--detail .blog--comments-form .form--comment-add { margin-top: 20px; } .blog--detail .blog--comments-form-errors .alert { margin: 1.25rem 0rem 1.25rem 0rem; } .blog--detail .blog--comments-voting { margin-bottom: 0.625rem; line-height: 1; } .blog--detail .collapse--soft-hidden { display: none; } .blog--detail .collapse--soft-show { display: block; } @media screen and (min-width: 48em) { .blog--listing { margin-top: 1rem; } .blog--listing .panel--title { margin: 0rem 1.25rem 0rem 1.25rem; } .blog--listing .panel--body { padding-left: 1.25rem; padding-right: 1.25rem; } .blog--box .blog--box-metadata { font-size: 0.875rem; } .blog--box .blog--box-picture { width: 20%; float: left; } .blog--box .blog--box-description { padding-top: 0; margin-top: 0; width: 76%; float: right; } .blog--box .blog--box-tags { font-size: 0.875rem; } .blog--content { margin-top: 2.8125rem; } .blog--content .blog--navigation { padding: 0rem 0rem 0rem 0rem; } .blog--content .blog--navigation .has--border { border: 1px solid #c8c8c8; } .blog--content .blog--navigation .blog--sidebar-title { padding: 1.25rem 0rem 0.625rem 0rem; margin: 0rem 1.25rem 0rem 1.25rem; border-radius: 0; color: #113c62; border-color: #c8c8c8; border-width: 0 0 1px 0; display: block; font-weight: 700; background: none; box-shadow: none; cursor: default; } .blog--content .blog--navigation .blog--sidebar-body { padding: 1.25rem 1.25rem 1.25rem 1.25rem; border: 0 none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .blog--content .blog--navigation .collapse--header:hover { color: #113c62; } .blog--content .blog--navigation .blog--subscribe { display: block; } .blog--content .blog--navigation .blog--subscribe-content, .blog--content .blog--navigation .blog--filter-content { display: block; } .blog--content .filter--container { padding: 0; } .blog--content .blog--filter-btn { display: none; } .blog--content .blog--filter-options { display: block; float: right; width: 20%; border: none; background: none; } .blog--content .blog--filter-options .filter--group { margin: 0rem 0rem 1rem 0rem; width: 100%; height: auto; } .blog--content .blog--filter-options .filter--entry { font-size: 0.875rem; padding: 0; border: 0 none; } .blog--content .blog--filter-options .blog--filter-close-btn { display: none; } .blog--content .blog--filter-options .filter--headline { display: none; } .blog--content .filter--expand-collapse { display: none; } .blog--content .blog--listing { margin-top: 0; width: 78%; float: left; } .blog--content .blog--box .blog--box-headline { font-size: 1.125rem; } .blog--content .blog--box .blog--box-link { color: #113c62; } .blog--content .blog--box .blog--box-link:hover { color: #113c62; } .blog--content .blog--box .blog--box-metadata { padding-top: 0.3125rem; } .blog--content .blog--box .blog--box-content .blog--box-description { width: 74%; } .blog--detail { margin-top: 1.875rem; } .blog--detail .blog--detail-headline { font-size: 1.125rem; margin-bottom: 0.3125rem; } .blog--detail .blog--box-metadata, .blog--detail .panel--title { margin: 0; } .blog--detail .panel--body { padding-left: 0; padding-right: 0; } .blog--detail .blog--detail-thumbnails { margin-bottom: 0.625rem; } .blog--detail .blog--detail-thumbnails .blog--thumbnail-image { margin: 0 auto; } .blog--detail .blog--detail-thumbnails .block { width: 5rem; height: 5rem; } .blog--detail .blog--comments .entry--meta { width: 25%; text-align: left; } .blog--detail .blog--comments .entry--content { width: 75%; float: left; } .blog--detail .blog--comments .comments--actions .btn--create-entry { width: auto; } .blog--detail .blog--comments-name, .blog--detail .blog--comments-summary { padding-right: 0.625rem; width: 50%; float: left; } .blog--detail .blog--comments-email, .blog--detail .blog--comments-voting { padding-left: 0.625rem; width: 50%; float: right; } .blog--detail .blog--comments-voting { margin-bottom: 0.625rem; } .blog--detail .blog--comments-opinion { clear: both; } .blog--detail .blog--comments-captcha { margin-bottom: 0.625rem; } .blog--detail .blog--comments-captcha:after { content: ""; display: table; clear: both; } .blog--detail .blog--comments-captcha::after { content: ""; display: table; clear: both; } .blog--detail .blog--comments-captcha { width: 50%; } .blog--detail .blog--comments-captcha .captcha--placeholder { padding-right: 0.625rem; width: 30%; float: left; } .blog--detail .blog--comments-captcha .captcha--code { padding-right: 0.625rem; width: 70%; float: right; } } @media screen and (min-width: 64em) { .blog--detail .blog--detail-description { width: 100%; } .blog--detail .blog--detail-image-container { width: 40%; margin: 0 0 3% 3%; float: right; } } @media screen and (min-width: 78.75em) { .blog--listing .listing--actions { margin-top: 0.9375rem; padding-top: 0; margin-bottom: 0; } .blog--listing .listing--paging { border: 0 none; } .blog--detail { margin-top: 3.125rem; } .blog--detail .blog--detail-headline { font-size: 1.3125rem; } .blog--detail .blog--bookmark { font-size: 2rem; } } /* Configurator ========================================== Defines the styles for the product configuration options element. The configurator element allows the user to choose from different article variations on the Shopware product detail page and configure his product. */ .configurator--variant .variant--group { margin: 0rem 0rem 0.625rem 0rem; } .configurator--variant .variant--group:after { content: ""; display: table; clear: both; } .configurator--variant .variant--group::after { content: ""; display: table; clear: both; } .configurator--variant .variant--name { margin: 0rem 0rem 0.3125rem 0rem; font-weight: 700; } .configurator--variant .variant--option { height: 3.125rem; line-height: 2.5rem; margin-bottom: 0.625rem; overflow: hidden; display: block; width: 23%; margin-right: 2%; position: relative; float: left; } .configurator--variant .option--input { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1000; cursor: pointer; /** * Checkbox/Radio Hack * Changes the styling of the next label element * based on the state of the radio element. */ } .configurator--variant .option--input:hover ~ label { color: #113c62; border-color: #113c62; } .configurator--variant .option--input:hover ~ label.is--disabled { color: #113c62; border-color: #c8c8c8; } .configurator--variant .option--input:checked ~ label { color: #113c62; border-color: #113c62; } .configurator--variant .option--input:disabled ~ label { opacity: 0.5; } .configurator--variant .option--input:disabled { cursor: not-allowed; } .configurator--variant .option--label { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; line-height: 2.5rem; border-radius: 3px; background-clip: padding-box; display: block; width: 100%; height: 100%; position: relative; z-index: 500; border: 1px solid #c8c8c8; font-weight: 700; text-align: center; overflow: hidden; } .configurator--variant .option--label.is--disabled img { opacity: 0.3; } .configurator--variant .option--label .image--media { line-height: 3.125rem; vertical-align: middle; text-align: center; } .configurator--variant .option--label img { margin: 0 auto; } /* Compare ============================================== Defines the styling of the comparison tool and its elements. The comparision creates a fixed modalbox in that the user can compare multiple articles. The user can open the tool inside the product detail section. */ .top-bar--navigation { position: relative; } .top-bar--navigation .entry--compare { padding: 0rem 0.5rem 0rem 0.5rem; } .top-bar--navigation .entry--compare .compare--quantity { margin-left: 0.3125rem; font-weight: 700; display: inline-block; color: #113c62; } .top-bar--navigation .entry--compare .icon--compare { font-size: 0.75rem; } .top-bar--navigation .compare--list { width: 17.5rem; padding: 0.3125rem 0.625rem 0.625rem 0.625rem; top: 2rem; right: 0.75rem; text-align: left; position: absolute; display: none; list-style: none; background: #fff; z-index: 4000; border: 1px solid #c8c8c8; } .top-bar--navigation .compare--list::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 0.5rem; height: 0.5rem; top: -0.3125rem; left: 1.5625rem; content: ''; display: block; position: absolute; background: #fff; border-color: #c8c8c8; border-width: 0 0 1px 1px; border-style: solid; } .top-bar--navigation .compare--list .btn--compare-delete { width: 100%; } .top-bar--navigation .js--is--dropdown-active .compare--list { display: block; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--entry { cursor: default; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--entry form { display: inline-block; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--link { width: 14.375rem; padding: 0.625rem 0rem 0.625rem 0rem; font-size: 0.875rem; color: #113c62; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--link:hover { color: #113c62; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--button { padding: 0.1875rem 0.25rem 0.1875rem 0.25rem; margin: 0.1875rem 0rem 0rem 0rem; float: right; } .top-bar--navigation .js--is--dropdown-active .compare--list .btn--item-delete { height: 1.3125rem; width: 1.3125rem; padding: 0.25rem 0.3125rem 0.25rem 0.3125rem; margin: 0.5rem 0rem 0.5rem 0rem; font-size: 0.5rem; line-height: 0.875rem; float: right; } .top-bar--navigation .js--is--dropdown-active .compare--list .btn--item-delete .icon--cross { padding: 0; margin: 0; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--button .icon--cross { padding: 0; margin: 0; } .top-bar--navigation .js--is--dropdown-active .compare--list .btn--compare { margin-top: 0.3125rem; } .compare--wrapper { display: block; overflow: auto; } .modal--compare { font-size: 0.875rem; letter-spacing: -0.25rem; display: inline-block; white-space: nowrap; vertical-align: top; } .modal--compare.is--fluid { width: 100%; overflow: hidden; } .modal--compare .modal--title { padding: 0.625rem 2.5rem 0.625rem 1.25rem; font-size: 1rem; font-weight: 700; border-bottom: 1px solid #113c62; letter-spacing: 0; } .modal--compare .modal--error { padding: 1.25rem 1.25rem 1.25rem 1.25rem; letter-spacing: 0; } .modal--compare .list--head { background: #969696; font-weight: 700; } .modal--compare .compare--group { width: 12.5rem; display: inline-block; white-space: normal; vertical-align: top; letter-spacing: 0; } .modal--compare .group--small { width: 12.5rem; } .modal--compare .compare--group-list { margin: 0; padding: 0; } .modal--compare .list--entry { padding: 0.625rem 1.875rem 0.625rem 0.625rem; color: #113c62; border-bottom: 1px solid #c8c8c8; } .modal--compare .entry--picture { height: 10rem; position: relative; } .modal--compare .entry--picture .image--element img { max-width: 90%; max-height: 90%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } .modal--compare .entry--name { height: 7.8125rem; } .modal--compare .link--name { position: relative; display: block; height: 70px; color: #113c62; font-weight: 700; } .modal--compare .entry--voting { height: 3.125rem; } .modal--compare .entry--voting .icon--star, .modal--compare .entry--voting .icon--star-empty { color: #f1c40f; } .modal--compare .entry--description { height: 9.375rem; text-align: left; word-wrap: break-word; } .modal--compare .entry--price { height: 8.125rem; } .modal--compare .entry--price .price--pseudoprice { text-decoration: line-through; } .modal--compare .entry--price .price--normal { font-size: 1rem; color: #113c62; font-weight: 700; } .modal--compare .entry--price .price--reduced { color: #e74c3c; } .modal--compare .entry--property { height: auto; } @media screen and (min-width: 78.75em) { .top-bar--navigation .compare--list { right: 0; } } /* Home ============================================== Defines the styling of the home-page content elements. */ .content--home { margin-top: 1.25rem; } @media screen and (min-width: 48em) { .content--home { margin-top: 1.875rem; } } @media screen and (min-width: 78.75em) { .content--home { margin-top: 3.125rem; } } /* Payment ============================================== Defines the styling of the payment-form elements. The payment page allows the user to choose the prefered payment option and add his personal payment informations inside form elements. The payment page is a part of the Shopware checkout process. */ .payment--form-group { margin: 0.625rem 0rem 0.625rem 0rem; } .payment--form-group .payment--field { margin-bottom: 0.625rem; display: block; width: 100%; } .payment--form-group .register--required-info { margin: 0; } @media screen and (min-width: 48em) { .payment--form-group .payment--field { width: 85%; } } /* Address ================================ Defines the styles for the address pages and the modals. */ .address-manager--modal .header > .title { padding-left: 2%; } .address-manager--modal.address-manager--editor .address-editor--errors { padding: 1.25rem; padding-bottom: 0; } .address-manager--modal.address-manager--editor .address-editor--body { padding: 0; } .address-manager--modal.address-manager--selection .content:after { content: ""; display: table; clear: both; } .address-manager--modal.address-manager--selection .content::after { content: ""; display: table; clear: both; } .address-manager--modal.address-manager--selection .content .modal--container { margin: -2% 0 0 -2%; } .address-manager--modal.address-manager--selection .content .modal--container:after { content: ""; display: table; clear: both; } .address-manager--modal.address-manager--selection .content .modal--container::after { content: ""; display: table; clear: both; } .address-manager--modal.address-manager--selection .content .modal--container .modal--container-item { padding: 2% 0 0 2%; float: left; width: 100%; } .address-manager--modal.address-manager--selection .content .panel--actions .btn { width: 100%; text-align: center; } .address-manager--modal.address-manager--selection .content .panel--actions .btn .js--loading { width: 1.125rem; height: 1.125rem; border-radius: 100%; background-clip: padding-box; right: 0.375rem; top: 0.125rem; margin: 0.5rem 0.3125rem 0.5rem 0.3125rem; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; border: 2px solid #c8c8c8; border-top: 2px solid #494949; display: block; position: absolute; } .account--address.account--content, .address-manager--modal.account--content { margin: 0rem; padding-top: 2.8125rem; } .account--address .address--item-body .panel--title, .address-manager--modal .address--item-body .panel--title { margin: 0rem 0rem 1.25rem 0rem; padding-top: 0; } .account--address .account--welcome, .address-manager--modal .account--welcome { margin-bottom: 0; } .account--address.account--address-form .alert, .address-manager--modal.account--address-form .alert { margin: 1.25rem 1.125rem 1.25rem 1.125rem; } .account--address .address--form-actions:after, .address-manager--modal .address--form-actions:after { content: ""; display: table; clear: both; } .account--address .address--form-actions::after, .address-manager--modal .address--form-actions::after { content: ""; display: table; clear: both; } .account--address .address--form-actions .address--form-submit, .address-manager--modal .address--form-actions .address--form-submit { margin-bottom: 0.625rem; width: 100%; text-align: center; } .account--address .address--actions-set-defaults, .address-manager--modal .address--actions-set-defaults { margin-bottom: 0.625rem; line-height: normal; } .account--address .address--actions-set-defaults .btn, .address-manager--modal .address--actions-set-defaults .btn { padding: 0; color: #00cc00; } .account--address .address--actions-set-defaults .btn:hover, .address-manager--modal .address--actions-set-defaults .btn:hover { color: #113c62; } .account--address .address--required-info, .address-manager--modal .address--required-info { margin: 0rem 1.625rem 1rem 1.625rem; font-size: 0.875rem; } .account--address .select-field, .address-manager--modal .select-field { margin-bottom: 0.3125rem; max-width: 100%; } .account--address .address--field, .address-manager--modal .address--field { margin-bottom: 0.625rem; width: 100%; } .account--address .address--customertype, .address-manager--modal .address--customertype { display: block; } .account--address .address--zip-city .address--field-zipcode, .address-manager--modal .address--zip-city .address--field-zipcode { width: 28%; float: left; } .account--address .address--zip-city .address--field-city, .address-manager--modal .address--zip-city .address--field-city { width: 70%; float: left; } .account--address .address--zip-city .address--field-city:after, .address-manager--modal .address--zip-city .address--field-city:after { content: ""; display: table; clear: both; } .account--address .address--zip-city .address--field-city::after, .address-manager--modal .address--zip-city .address--field-city::after { content: ""; display: table; clear: both; } .account--address .address--zip-city .address--spacer, .address-manager--modal .address--zip-city .address--spacer { margin-right: 2%; } .account--address.address--delete .panel, .address-manager--modal.address--delete .panel { margin-bottom: 1.25rem; } .account--address .address--delete-actions .btn.is--primary, .address-manager--modal .address--delete-actions .btn.is--primary { float: right; } .account--address .address--content, .address-manager--modal .address--content { margin: -2% 0 0 -2%; } .account--address .address--content:after, .address-manager--modal .address--content:after { content: ""; display: table; clear: both; } .account--address .address--content::after, .address-manager--modal .address--content::after { content: ""; display: table; clear: both; } .account--address .address--item-content, .address-manager--modal .address--item-content { width: 100%; float: left; padding: 2%; } .account--address .address--item-content .panel--actions, .address-manager--modal .address--item-content .panel--actions { display: table-cell; vertical-align: bottom; } .account--address .address--item-create .btn, .address-manager--modal .address--item-create .btn { text-align: center; } .account--address .address--item-actions form, .address-manager--modal .address--item-actions form { display: block; } .account--address .js--loading, .address-manager--modal .js--loading { width: 1.125rem; height: 1.125rem; border-radius: 100%; background-clip: padding-box; margin: 0rem 0rem 0rem 0.3125rem; top: 0.25rem; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; border: 2px solid #c8c8c8; border-top: 2px solid #494949; display: inline-block; position: relative; } @media screen and (min-width: 48em) { .account--address .address--form-actions .address--form-submit, .address-manager--modal .address--form-actions .address--form-submit { width: auto; } .address-manager--modal.address-manager--selection .content .modal--container .modal--container-item { width: 50%; } .account--address.account--content .address--field { margin-bottom: 0.9375rem; width: 70%; } .account--address.account--content .select-field { max-width: 18.125rem; } .account--address.account--content .address--form-actions:after { content: ""; display: table; clear: both; } .account--address.account--content .address--form-actions::after { content: ""; display: table; clear: both; } .account--address.account--content .address--item-content { width: 50%; } .account--address.account--content .address--zip-city .address--field-zipcode { width: 18%; float: left; } .account--address.account--content .address--zip-city .address--field-city { width: 50%; float: left; } .account--address.account--content .address--zip-city .address--field-city:after { content: ""; display: table; clear: both; } .account--address.account--content .address--zip-city .address--field-city::after { content: ""; display: table; clear: both; } .account--address.account--content .address--zip-city .address--spacer { margin-right: 2%; } } @media screen and (min-width: 78.75em) { .address-manager--modal.address-manager--selection { max-width: 71.5625rem; } .address-manager--modal.address-manager--selection .content .modal--container .modal--container-item { width: 33.3%; } } .page-wrap--cookie-permission { padding: 0.625rem; z-index: 8000; border-top: 1px solid #7d7d7d; background: #fff; position: fixed; bottom: 0; right: 0; left: 0; } .page-wrap--cookie-permission .cookie-permission--container { width: 100%; text-align: center; position: relative; } .page-wrap--cookie-permission .cookie-permission--container:after { content: ""; display: table; clear: both; } .page-wrap--cookie-permission .cookie-permission--container::after { content: ""; display: table; clear: both; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--button { margin: 0 auto; margin-top: 1.25rem; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--button.cookie-permission--extra-button .cookie-permission--accept-button { margin-right: 0.3125rem; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--decline-button { margin-right: 0.3125rem; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--accept-button, .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--decline-button, .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--configure-button { margin-top: 0.625rem; } .cookie-removal--container { padding: 1.5625rem; } .cookie-removal--container .cookie-removal--list { margin-bottom: 1.25rem; list-style-position: inside; } .cookie-removal--container .cookie-removal--buttons { margin-top: 1.25rem; } .cookie-removal--container .cookie-removal--buttons .btn { margin-bottom: 0.375rem; display: inline-block; width: 48%; float: right; } .cookie-removal--container .cookie-removal--buttons .btn:last-child { margin-right: 2%; } @media screen and (min-width: 30em) { .cookie-removal--container .cookie-removal--footer:after { content: ""; display: table; clear: both; } .cookie-removal--container .cookie-removal--footer::after { content: ""; display: table; clear: both; } .cookie-removal--container .cookie-removal--footer .cookie-removal--buttons { float: right; } .cookie-removal--container .cookie-removal--buttons { min-width: 16.25rem; margin: 0; } .cookie-removal--container .privacy--notice { padding-top: 0.5rem; display: inline-block; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--accept-button, .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--decline-button, .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--configure-button { margin-top: 0; } } @media screen and (min-width: 64em) { .page-wrap--cookie-permission .cookie-permission--container { width: 100%; } .page-wrap--cookie-permission .cookie-permission--container:after { content: ""; display: table; clear: both; } .page-wrap--cookie-permission .cookie-permission--container::after { content: ""; display: table; clear: both; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--content { width: calc(100% - 240px); text-align: left; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--content.cookie-permission--extra-button { width: calc(100% - 370px); } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--button { width: 15rem; right: 0.3125rem; position: absolute; top: calc(50% - 21px); } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--button.cookie-permission--extra-button { width: 23.125rem; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--content { padding: 0.75rem; float: left; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--button { margin: 0; float: right; } } .content-type--head { overflow: hidden; margin: 1rem 0rem 1rem 0rem; } .content-type--head .head--picture { max-height: 30em; padding: 1rem 1rem 1rem 1rem; border-radius: 3px; background-clip: padding-box; } .content-type--head .head--picture img { max-height: 30em; object-fit: scale-down; margin: 0 auto; } .content-type--field { display: block; width: 100%; padding: 1rem 1rem 1rem 1rem; border-radius: 3px; background-clip: padding-box; } .content-type--field:nth-child(odd) { background: #969696; } .field--full > .field--label { display: none; } .field--full > .field--content { width: 100%; max-width: unset; text-align: left; } .field--label, .field--content { display: block; width: 50%; float: left; } .field--label > span { display: inline-block; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .field--label-separator { display: none; float: right; width: 1px; height: 1rem; margin: 0 1rem; background: #7d7d7d; } .field--content { text-align: right; } .content-type--field-checkbox .icon--check { color: #2ecc71; } .content-type--field-checkbox .icon--cross { color: #e74c3c; } .content-type--field-media > .field--label, .content-type--field-media-grid > .field--label { display: none; } .content-type--field-media > .field--content, .content-type--field-media-grid > .field--content { width: 100%; max-width: unset; text-align: left; } .content-type--field-media.content-type--field, .content-type--field-media-grid.content-type--field { background: #e8f1f6; } .content-type--field-media picture, .content-type--field-media-grid picture, .content-type--field-media img, .content-type--field-media-grid img { margin: 0 auto; border-radius: 3px; background-clip: padding-box; } .content-type--field-media-grid .image--gallery { min-height: 30em; } .content-type--field-textarea > .field--label { display: none; } .content-type--field-textarea > .field--content { width: 100%; max-width: unset; text-align: left; } .content-type--field-textarea.content-type--field { background: #e8f1f6; } .content-type--field-text > .field--label { display: none; } .content-type--field-text > .field--content { width: 100%; max-width: unset; text-align: left; } .content-type--field-text.content-type--field { background: #e8f1f6; } .content-type--field-product-field > .field--label { display: none; } .content-type--field-product-field > .field--content { width: 100%; max-width: unset; text-align: left; } .content-type--field-product-field .product--box { background-color: #fff; padding: unset; } .content-type--field-product-field .box--content { padding: 1.25rem 1.875rem 1.25rem 1.875rem; } .content-type--field-product-grid { overflow: hidden; padding: 1rem 0rem 1rem 0rem; } .content-type--field-product-grid > .field--label { display: none; } .content-type--field-product-grid > .field--content { width: 100%; max-width: unset; text-align: left; } .content-type--field-product-grid .product-slider .product-slider--container { padding: 0rem 2rem 0rem 2rem; } .content-type--field-product-grid .product-slider .product--description { white-space: normal; } .content-type--field-product-grid .box--content { background-color: #e8f1f6; } .content-type--field-tinymce > .field--label { display: none; } .content-type--field-tinymce > .field--content { width: 100%; max-width: unset; text-align: left; } .content-type--field-aceeditor > .field--label { display: none; } .content-type--field-aceeditor > .field--content { width: 100%; max-width: unset; text-align: left; } @media screen and (min-width: 30em) { .content-type--head .head--picture { max-width: 50%; float: left; } .content-type--head .head--picture img { max-height: 30em; } } @media screen and (min-width: 48em) { .field--label { max-width: 30%; width: 30%; } .field--label-separator { display: inline-block; } .field--content { max-width: 70%; width: 70%; text-align: unset; } } @media screen and (min-width: 64em) { .content-type { width: 75%; margin: 0 auto; } } @media screen and (min-width: 78.75em) { .is--content-type .sidebar-main { display: none; } } /* Hacks ==================================== The `hacks.less` contains all dirty hacks like !important or negative margins, so you get a single place to document and set them. More precise designations are commented inside the document. */ .product--tax a { text-decoration: none !important; } .product--tax a:hover { text-decoration: underline !important; } .entry--all-results-link i { font-size: 8px; } .table--shipping-costs-trigger i { margin: -0.25rem 0rem 0rem 0rem; font-size: 8px; } .table--footer i, .premium-product--product .btn i, .compare--button i, .modal--compare .btn i { font-size: 8px; } .js--modal.sizing--auto.is--fullscreen { height: 100% !important; width: 100% !important; } .js--modal.sizing--fixed { max-height: none !important; max-width: none !important; } .is--inactive { overflow: hidden !important; } .btn::-moz-focus-inner { border: 0; padding: 0; } .is--ie .action--sort .sort--select:after { line-height: 34px; } .is--ie .register--login .register--new-customer .new-customer-btn::after { line-height: 16px; } .is--ie .filter-panel--input input[type='checkbox']:checked ~ .input--state::before, .is--ie .filter-panel--checkbox input[type='checkbox']:checked ~ .input--state::before, .is--ie .filter-panel--radio input[type='checkbox']:checked ~ .input--state::before, .is--ie .filter-panel--input input[type='checkbox']:checked ~ .checkbox--state::before, .is--ie .filter-panel--checkbox input[type='checkbox']:checked ~ .checkbox--state::before, .is--ie .filter-panel--radio input[type='checkbox']:checked ~ .checkbox--state::before { line-height: 12px; } @media screen and (min-width: 48em) { .top-bar--navigation .entry--service:after, .top-bar--navigation .entry--service::after { font-size: 5px; } .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active:before, .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active::before { font-size: 5px; } .is--ie .header-main .top-bar--navigation .select-field:after { line-height: 24px; } .is--ie .action--filter-btn .filter--trigger:before, .is--ie .action--filter-btn .filter--trigger:after { line-height: 16px; } .is--ie .header-main .top-bar--navigation .top-bar--language .select-field select, .is--edge .header-main .top-bar--navigation .top-bar--language .select-field select { font-size: 0; } .is--ie .header-main .top-bar--navigation .top-bar--language .select-field select option, .is--edge .header-main .top-bar--navigation .top-bar--language .select-field select option { font-size: 0.875rem; } } .advanced-menu { max-width: 78.75rem; box-shadow: 0 10px 25px -15px #000000; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: #ffffff; width: 100%; position: absolute; color: #113c62; z-index: 3000; } .advanced-menu:after { content: ""; display: table; clear: both; } .advanced-menu::after { content: ""; display: table; clear: both; } .advanced-menu .menu--list { list-style: none; display: block; } .advanced-menu .content--wrapper { margin: 1.25rem 1.25rem 1.25rem 1.25rem; position: relative; } .advanced-menu .menu--delimiter { content: ""; width: 1px; background: #c8c8c8; position: absolute; display: block; top: 0; bottom: 0; } .advanced-menu .menu--teaser { padding: 0.625rem 0.625rem 0rem 1.25rem; position: relative; float: left; } .advanced-menu .teaser--image { height: 15.625rem; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; display: block; } .advanced-menu .teaser--image + .teaser--headline, .advanced-menu .teaser--image + .teaser--text { margin-top: 2.5rem; } .advanced-menu .teaser--headline { font-size: 1.3125rem; margin: 0rem 0rem 1.25rem 0rem; font-weight: bold; } .advanced-menu .teaser--text-link { color: #113c62; } .advanced-menu .teaser--text-link:hover { color: #113c62; } .advanced-menu .menu--list-item { -webkit-hyphens: auto; hyphens: auto; word-break: normal; word-wrap: break-word; } .advanced-menu .menu--list-item-link { padding: 0.3125rem 0rem 0.3125rem 0rem; font-size: 1rem; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; color: #113c62; display: block; } .advanced-menu .menu--list-item-link:hover { padding: 0.3125rem 0rem 0.3125rem 0.1875rem; color: #113c62; } .advanced-menu .button-container { font-size: 1rem; padding: 1.25rem 1.875rem 1.25rem 0rem; background: #113c62; color: #ffffff; font-weight: bold; } .advanced-menu .button-container .button--category { padding: 1.25rem 3.125rem 1.25rem 3.125rem; -webkit-transition: padding 0.1s ease; transition: padding 0.1s ease; color: #ffffff; position: relative; } .advanced-menu .button-container .button--category:hover { padding: 1.25rem 3.125rem 1.25rem 3.4375rem; } .advanced-menu .button-container .icon--arrow-right { font-size: 0.75rem; margin-top: -0.375rem; position: absolute; top: 50%; right: 1.875rem; } .advanced-menu .button-container .button--close { padding: 1.25rem 1.25rem 1.25rem 1.25rem; margin-top: -1.25rem; float: right; cursor: pointer; } .advanced-menu .menu--container { display: none; } .advanced-menu .menu--container.menu--is-active { display: block; } .advanced-menu .menu--level-0 { padding: 0.625rem 0.625rem 0rem 0.625rem; float: left; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .advanced-menu .menu--level-0.columns--1 { -webkit-column-count: 1; column-count: 1; } .advanced-menu .menu--level-0.columns--2 { -webkit-column-count: 2; column-count: 2; } .advanced-menu .menu--level-0.columns--3 { -webkit-column-count: 3; column-count: 3; } .advanced-menu .menu--level-0.columns--4 { -webkit-column-count: 4; column-count: 4; } .advanced-menu .menu--level-1 { margin: 0.3125rem 0rem 0rem 1.25rem; } .advanced-menu .menu--level-2 { margin: 0rem 0rem 0.3125rem 1.25rem; } .advanced-menu .item--level-0 { padding-bottom: 2.5rem; display: block; position: relative; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .advanced-menu .item--level-0 .menu--list-item-link { font-weight: bold; } .advanced-menu .item--level-1:last-child { margin: 0; } .advanced-menu .item--level-1 .menu--list-item-link { padding: 0.3125rem 0rem 0.3125rem 0rem; font-size: 1rem; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; color: #113c62; display: block; font-weight: normal; } .advanced-menu .item--level-1 .menu--list-item-link:hover { padding: 0.3125rem 0rem 0.3125rem 0.1875rem; color: #113c62; } .advanced-menu .item--level-2 .menu--list-item-link { font-size: 0.875rem; } .advanced-menu .item--level-2 .menu--list-item-link + .menu--level-3 { margin: 0rem 0rem 0.3125rem 1.25rem; } .advanced-menu .item--level-3 .menu--list-item-link { font-size: 0.75rem; } .navigation-main .navigation--list .navigation--entry.is--hovered { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: #113c62; } .navigation-main .navigation--list .navigation--entry.is--hovered .navigation--link { background: #113c62; color: #ffffff; } @media screen and (min-width: 78.75em) { .advanced-menu .content--wrapper { margin: 2.5rem 2.5rem 2.5rem 2.5rem; } } .netzp-factsheet--widget { padding: 0.5em; } .netzp-factsheet--widget h4 { margin-top: 0; } .netzp-factsheet--widget input { width: 100px; } .netzp-faq--entries .alert .alert--icon p, .netzp-faq--entries .alert .alert--content p { font-size: 1rem !important; font-family: "Eurostile", "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important; line-height: 1.2rem; } .nfswNewsletterRow .contact-banner { height: auto; padding: 3.375rem 8.125rem 3.125rem 8.125rem; } .nfswNewsletterRow .newsletter--form { margin-top: 10px; } .nfswNewsletterRow a { color: #ffffff; text-decoration: underline; } .nfswNewsletterRow a:hover { text-decoration: none; } .nfswNewsletterRow.plain .contact-banner { background-color: transparent; box-shadow: none; color: #113c62; } .nfswNewsletterRow.plain a { color: #113c62; } .floatingBadges { position: fixed; right: 0; top: 20%; width: auto; } .floatingBadges .jobsBadge a { color: #ffffff; display: block; height: 50px; line-height: 50px; margin-bottom: 2px; position: relative; text-align: center; width: 210px; } .floatingBadges .jobsBadge .badgeIcon { background-color: #1AD625; font-weight: bold; height: 50px; overflow: hidden; position: absolute; right: 0; text-transform: uppercase; top: 0; width: 210px; z-index: 100; } .floatingBadges .jobsBadge .badgeIcon i { font-size: 30px; line-height: 50px; } .floatingBadges .jobsBadge .badgeContent { background: #113C62; display: block; overflow: hidden; padding: 10px 10px 20px 10px; position: absolute; right: -210px; text-align: left; top: 0; transition: all 0.5s ease-in-out; width: 210px; z-index: 50; } .floatingBadges .jobsBadge:hover .badgeContent { display: block; overflow: hidden; right: 0; } .floatingBadges .jobsBadge .badgeTitle { font-size: 18px; height: 40px; line-height: 40px; margin-bottom: 20px; } .floatingBadges .jobsBadge .badgeText { font-size: 14px; line-height: 22px; } .floatingBadges2 { position: fixed; right: 0; top: 20%; width: auto; } .floatingBadges2 a { background-color: #1AD625; color: #ffffff; display: block; height: 50px; line-height: 50px; margin-bottom: 2px; padding: 0 10px; position: relative; text-align: center; width: 50px; } .floatingBadges2 a i { font-size: 30px; line-height: 50px; } .floatingBadges2 a div { height: 50px; overflow: hidden; } .floatingBadges2 a span { background: #113C62; display: block; font-size: 18px; height: 50px; overflow: hidden; position: absolute; right: 50px; top: 0; transition: all 0.5s ease-in-out; width: 0; } .floatingBadges2 a:hover span { display: block; overflow: hidden; width: 80px; } .hintUserNotLoggedIn { background-color: #FAECEB; border: 1px solid #E74C3C; color: #E74C3C; font-weight: bold; line-height: 20px; margin-bottom: 20px; max-width: 300px; padding: 10px 15px; } .popup--container { position: fixed; width: auto; background-color: #fff; box-shadow: 0 0 4px 1px #dadae5; padding: 2rem; display: none; min-width: 35%; z-index: 99999; text-align: center; cursor: pointer; font-size: 20px; overflow: hidden; max-width: 70%; } .popup--container .popup--link { position: relative; z-index: 99998; } .popup--container .btn-close { position: absolute; z-index: 99999999; right: 2rem; top: 2rem; } .popup--container .popup--content .popup--title { margin-top: 0; font-size: 30px; } .popup--container .popup--content .popup--description { width: 100%; margin-top: 1rem; margin-bottom: 1rem; font-size: 20px; } .popup--container .popup--content .popup--footer .btn { width: 100%; text-align: center; padding: 0.5rem; font-size: 20px; } .popup--container img { opacity: 0.7; min-width: 100%; min-height: 100%; position: absolute; max-height: none; top: 50%; transform: translateY(-50%); } .popup--container img.invert { opacity: 0.7; min-width: 100%; min-height: 100%; position: absolute; max-height: 100%; max-width: none; top: auto; left: 50%; transform: translateX(-50%); } .popup--container.has-background-image { padding: 0; } .popup--container.has-background-image .popup--content { position: relative; padding: 2rem; z-index: 9999999; overflow-y: auto; max-height: calc(100vh - 5rem); } .popup--container.active { display: block; } .popup--container.full { right: 1rem; bottom: 1rem; left: 1rem; top: 1rem; max-width: inherit; } .popup--container.full .popup--content { position: absolute; right: 0; bottom: 0; left: 0; top: 0; padding: 2rem; } .popup--container.full .popup--content .popup--content-inner { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } .popup--container.full img { position: absolute; top: 50%; transform: translateY(-50%); max-height: none; min-height: 100%; } .popup--container.center { left: 50%; top: 50%; transform: translate(-50%, -50%); } .popup--container.left-top { left: 1rem; top: 1rem; } .popup--container.right-top { right: 1rem; top: 1rem; } .popup--container.right-bottom { right: 1rem; bottom: 1rem; } .popup--container.left-bottom { left: 1rem; bottom: 1rem; } @media screen and (max-width: 767px) { .popup--container { min-width: 80%; max-height: calc(100% - 5rem); } } /* All.less ====================================== The `all.less` file imports all style components that will display on the page. */ /* Components ==================================== The `components.less` contains the imports to all styled elements of Shopware. The files are destinated inside the `_components` folder. */ .bogx--form-widget .forms--headline { padding: 0rem 0.625rem 0rem 0.625rem; } .bogx--form-widget .alert { font-size: 0.875rem; line-height: 1.5rem; position: relative; overflow: hidden; margin: 0rem 0.625rem 0rem 0.625rem; } .bogx--form-widget .alert:after { content: ""; display: table; clear: both; } .bogx--form-widget .alert::after { content: ""; display: table; clear: both; } .bogx--form-widget .alert.is--success { color: #208e4e; background: #def2e7; } .bogx--form-widget .alert.is--success .alert--icon { background: #2ecc71; } .bogx--form-widget .forms--required.has--error { color: #e74c3c; } .bogx--form-widget .privacy-information { line-height: 3.125rem; } .bogx--form-widget .privacy-information.has--error { color: #e74c3c; background: #faeceb; border-color: #e74c3c; } .bogx--form-widget .privacy-information.has--error label { color: #e74c3c; } .bogx--form-widget [class^="icon--"], .bogx--form-widget [class*=" icon--"] { vertical-align: middle; } .bogx--form-widget .forms--inner-form .select--wrap-error, .bogx--form-widget #support .select--wrap-error { color: #e74c3c; vertical-align: middle; } .bogx--form-widget .forms--inner-form .has--error, .bogx--form-widget #support .has--error { color: #e74c3c; vertical-align: middle; } .bogx--form-widget .forms--inner-form input, .bogx--form-widget #support input { margin-bottom: 7px; width: 100%; } .bogx--form-widget .forms--inner-form input.has--error, .bogx--form-widget #support input.has--error { width: 95%; } .bogx--form-widget .forms--inner-form input[type="checkbox"], .bogx--form-widget #support input[type="checkbox"], .bogx--form-widget .forms--inner-form input[type="radio"], .bogx--form-widget #support input[type="radio"] { width: auto; } .bogx--form-widget .forms--inner-form .forms--checkbox, .bogx--form-widget #support .forms--checkbox { margin-bottom: 7px; } .bogx--form-widget .forms--inner-form textarea, .bogx--form-widget #support textarea { width: 100%; } .bogx--form-widget .forms--inner-form textarea.has--error, .bogx--form-widget #support textarea.has--error { width: 95%; } .bogx--form-widget .forms--inner-form field--select, .bogx--form-widget #support field--select, .bogx--form-widget .forms--inner-form .select-field, .bogx--form-widget #support .select-field, .bogx--form-widget .forms--inner-form .js--fancy-select, .bogx--form-widget #support .js--fancy-select { max-width: 100%; } .bogx--form-widget .forms--inner-form field--select.has--error, .bogx--form-widget #support field--select.has--error, .bogx--form-widget .forms--inner-form .select-field.has--error, .bogx--form-widget #support .select-field.has--error, .bogx--form-widget .forms--inner-form .js--fancy-select.has--error, .bogx--form-widget #support .js--fancy-select.has--error { width: 95%; margin: 0rem 0rem 0.625rem 0.3125rem; } .bogx--form-widget .forms--inner-form .buttons, .bogx--form-widget #support .buttons { text-align: center; margin-top: 1.25rem; } .bogx--form-widget .forms--inner-form .buttons button, .bogx--form-widget #support .buttons button { width: 38%; } .js--modal .bogx--form-widget .forms--inner-form input { width: 100%; } .js--modal .bogx--form-widget .forms--inner-form input.has--error { width: 90%; } .js--modal .bogx--form-widget .forms--inner-form input[type="checkbox"], .js--modal .bogx--form-widget .forms--inner-form input[type="radio"] { width: auto; } .js--modal .bogx--form-widget .forms--inner-form textarea { width: 100%; } .js--modal .bogx--form-widget .forms--inner-form textarea.has--error { width: 90%; } .js--modal .bogx--form-widget .forms--inner-form field--select, .js--modal .bogx--form-widget .forms--inner-form .select-field, .js--modal .bogx--form-widget .forms--inner-form .js--fancy-select { max-width: 100%; } .js--modal .bogx--form-widget .forms--inner-form field--select.has--error, .js--modal .bogx--form-widget .forms--inner-form .select-field.has--error, .js--modal .bogx--form-widget .forms--inner-form .js--fancy-select.has--error { width: 90%; margin: 0rem 0rem 0.625rem 0.3125rem; } .paypal--sidebar .paypal--sidebar-inner { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .paypal--sidebar .logo--image { margin: auto; } @media screen and (min-width: 48em) { .paypal--sidebar { margin-bottom: 1.25rem; border: 1px solid #c8c8c8; } .paypal--sidebar .paypal--sidebar-inner { padding: 0.75rem 0.75rem 0.75rem 0.75rem; } .paypal--sidebar .paypal--sidebar-inner-returns { padding: 0.75rem 0.75rem 0.75rem 1.5rem; } } .unified-instructions--table { margin: 0 auto; width: 100%; table-layout: fixed; } .unified-instructions--table tr { width: 100%; } .unified-instructions--table tr td { background: none; width: 50%; word-wrap: break-word; } .unified-instructions--table tr td.bolder { font-weight: bolder; } .unified--panel { margin: 1.25rem 0rem 1.25rem 0rem; width: 100%; } .unified--panel .unified--instruction { font-weight: bolder; text-align: center; } .unified--panel .unified-header--left-td { width: 45%; text-align: right; } .unified--panel .unified-header--left-td h3 { margin-top: 0.625rem; } .unified--panel .unified-header--center-td { min-width: 6.25rem; width: auto; } .unified--panel .unified-header--right-td { width: 45%; } .unified--panel .unified-legal--message { text-align: center; } @media screen and (min-width: 30em) { .unified-instructions--container { margin: 1.25rem 0rem 1.25rem 0rem; } .unified-instructions--table { width: 80%; border: 1px solid #c8c8c8; border-radius: 3px; } .unified-instructions--table tr { width: 100%; } .unified-instructions--table tr td { font-size: inherit; } .unified-instructions--table tr td.bolder { font-size: inherit; width: 50%; } } @media screen and (min-width: 64em) { .unified-instructions--table { width: 50%; } } .paypal-unified--error { margin-bottom: 1.25rem; } .paypal--payment-selection .is--plus-container { border-bottom: 0; } .paypal--payment-selection .is--plus-container .method--label { display: none; } .paypal--payment-selection .is--plus-container #ppplus { padding: 0; margin: 0; } .paypal--payment-selection .is--plus-container #ppplus iframe { top: -1.625rem; position: relative; } .paypal--payment-selection .is--plus-container .method--description { position: relative; width: 100%; display: block; } .paypal--payment-selection .is--plus-container.payment--method { margin-bottom: -1.75rem; padding: 0; height: inherit; } .paypal--payment-selection .is--plus-container.payment--method:hover { background-color: white; } .paypal--payment-selection .is--plus-container.payment--method.js--is-active, .paypal--payment-selection .is--plus-container.payment--method.is--active { background-color: white; } .paypal--payment-selection .is--plus-container.payment--method.js--is-active:after, .paypal--payment-selection .is--plus-container.payment--method.is--active:after { display: none; } .paypal--payment-selection .method--input { display: none; } .paypal--payment-selection .payment--method { font-size: 0.6875rem; padding: 1.25rem 0rem 1.25rem 0rem; color: #3f3f3f; margin-bottom: 0; font-family: Arial, sans-serif; position: relative; cursor: pointer; height: inherit; } .paypal--payment-selection .payment--method:after { content: ""; display: table; clear: both; } .paypal--payment-selection .payment--method::after { content: ""; display: table; clear: both; } .paypal--payment-selection .payment--method:hover { background-color: #f9f9f9; } .paypal--payment-selection .payment--method.js--is-active, .paypal--payment-selection .payment--method.is--active { cursor: default; background-color: #f9f9f9; } .paypal--payment-selection .payment--method.js--is-active .method--name, .paypal--payment-selection .payment--method.is--active .method--name { font-weight: bold; } .paypal--payment-selection .payment--method.js--is-active .method--label, .paypal--payment-selection .payment--method.is--active .method--label { width: 100%; } .paypal--payment-selection .payment--method.js--is-active .method--description, .paypal--payment-selection .payment--method.is--active .method--description { padding-left: 0.5rem; display: block; } .paypal--payment-selection .payment--method.js--is-active:after, .paypal--payment-selection .payment--method.is--active:after { height: 1.125rem; width: 1.4375rem; right: 0.5rem; top: 0.9375rem; content: ''; position: absolute; background: url('https://www.paypalobjects.com/webstatic/ppplus/icons/checkmark.png') no-repeat; } .paypal--payment-selection .payment--method:last-child { border-bottom: 0; } .paypal--payment-selection .method--label { padding-left: 0.5rem; width: 17%; float: left; } .paypal--payment-selection .method--description { display: none; float: left; width: 65%; } .paypal--payment-selection .method--name { font-size: 0.75rem; color: #3f3f3f; font-weight: normal; cursor: pointer; } .paypal--payment-selection .method--bankdata { text-align: center; clear: both; } @media screen and (min-width: 48em) { .paypal--payment-selection .is--plus-container #ppplus { margin-bottom: -2.9375rem; padding: 0; width: 100%; } .paypal--payment-selection .is--plus-container #ppplus iframe { top: -2.875rem; } .paypal--payment-selection .payment--method.js--is-active .method--label, .paypal--payment-selection .payment--method.is--active .method--label { width: 17%; } .paypal--payment-selection .payment--method.js--is-active .method--description, .paypal--payment-selection .payment--method.is--active .method--description { width: 66%; } .paypal--payment-selection .payment--method:last-child { border-bottom: 1px solid #c8c8c8; } } .paypal-unified-installments-banner--product-detail { margin-bottom: 0.625rem; } .paypal-unified-installments-banner--cart { margin-top: 1.25rem; } .paypal-unified-ec--outer-button-container:after { content: ""; display: table; clear: both; } .paypal-unified-ec--outer-button-container::after { content: ""; display: table; clear: both; } .paypal-unified-ec--button-container { margin-top: 0.625rem; } .product--table .paypal-unified-ec--button-container { margin-top: 0rem; } .register--login .paypal-unified-ec--outer-button-container { line-height: normal; } .paypal-unified-ec--button-placeholder { height: 2.1875rem; } @media screen and (min-width: 30em) { .product--table .paypal-unified-ec--button-container { margin-top: 0.625rem; } } @media screen and (min-width: 48em) { .product--table .paypal-unified-ec--button-container { margin-top: -0.3125rem; margin-bottom: 0.625rem; } } .paypal-unified--error-message { margin-top: 1rem; padding: 1rem 1rem 1rem 1rem; border-radius: 3; background-clip: padding-box; width: 100%; border: 1px solid #c8c8c8; } .paypal-button-width--small { width: 9.375rem; } .paypal-button-width--medium { width: 15.625rem; } .paypal-button-width--large { width: 21.875rem; } .paypal-button-width--responsive { width: 100%; text-align: right; } .paypal-unified--smart-payment-buttons { width: 100%; } @media screen and (min-width: 30em) { .paypal-unified--smart-payment-buttons { float: right; width: 70%; } } @media screen and (min-width: 48em) { .paypal-unified--smart-payment-buttons { float: right; width: 50%; } } @media screen and (min-width: 64em) { .paypal-unified--smart-payment-buttons { float: right; width: 30%; } } #paypal-acdc-form .paypal--acdc-submit-error { margin-bottom: 0.5rem; } #paypal-acdc-form .acdc-column-container { -webkit-column-count: 2; column-count: 2; } #paypal-acdc-form input[type="text"] { width: 100%; margin-bottom: 0.5rem; } #paypal-acdc-form .field { height: 2.375rem; margin-bottom: 0.5rem; width: unset; } .swag-payment-paypal-unified-pay-upon-invoice-legal-text-container { width: 14.9375rem; } .swag-payment-paypal-unified-pay-upon-invoice-legal-text-container .swag-payment-paypal-unified-pay-upon-invoice-legal-text { font-size: 0.75rem; padding-bottom: 0.9375rem; } .pay-upon-invoice--extra-fields .pui-extra-field { margin-bottom: 0.5rem; } .pay-upon-invoice--extra-fields .pui--phone, .pay-upon-invoice--extra-fields .pui--birthday { width: 16.5625rem; } .pay-upon-invoice--extra-fields .select-field, .pay-upon-invoice--extra-fields .js--fancy-select { width: auto; } /* Components ==================================== The `components.less` contains the imports to all styled elements of Shopware. The files are destinated inside the `_components` folder. */ .box-teaser { position: relative; transition: all 0.2s ease; } .box-teaser:hover .bottom-area { box-shadow: 0 8px 20px 0 rgba(58, 68, 109, 0.7); } .box-teaser .top-area { position: relative; } .box-teaser .bottom-area { position: relative; background-color: white; padding: 25px; margin: -40px 15px 0 15px; } .box-teaser .bottom-area h3, .box-teaser .bottom-area p { color: #113c62; } .box-teaser .bottom-area h4 { color: #1e567f; } .box-teaser .bottom-area .button-primary { position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #113c62; transition: background-color 200ms ease; cursor: pointer; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; } .box-teaser .bottom-area .button-primary:hover { background-color: #00cc00; } .box-teaser .bottom-area .button-primary:active { background-color: #113c62; } .box-teaser .bottom-area .button-primary i { line-height: 2.5rem; font-size: 1.25rem; padding-left: 0.3125rem; } .box-teaser .bottom-area .button-primary-text { position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #113c62; transition: background-color 200ms ease; cursor: pointer; height: 2.5rem; padding: 0; width: 11.25rem; line-height: 2.5rem; } .box-teaser .bottom-area .button-primary-text:hover { background-color: #00cc00; } .box-teaser .bottom-area .button-primary-text:active { background-color: #00cc00; } .box-teaser .bottom-area strong { font-weight: 500; } .box-teaser.content-teaser .bottom-area .button-primary { width: 11.25rem; line-height: 2.5rem; } .box-teaser.content-teaser .bottom-area .button-primary i { display: none; } .box-teaser.content-teaser .bottom-area .button-primary span { display: inline; } .box-teaser.content-teaser .bottom-area .button-type-2:active { background-color: #009033; } .box-teaser.content-teaser .bottom-area p { margin: 0rem 0rem 0rem 0rem; line-height: 1.25rem; } .box-teaser.category-preview { height: 25rem; } .box-teaser.category-preview .top-area { height: 55%; background-color: #e8f1f6; padding-top: 2.8125rem; text-align: center; } .box-teaser.category-preview .top-area .category-icon { font-size: 6.375rem; font-family: 'shopware'; color: #113c62; } .box-teaser.category-preview .top-area .category-icon.wfl-icon-default::after { content: "\f52f"; } .box-teaser.category-preview .bottom-area { height: calc(45% + 40px - 15px); padding-top: 1.875rem; } .box-teaser.category-preview .bottom-area .preview-title { font-size: 1.5rem; margin: 0rem 0rem 1.375rem 0rem; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: initial; -ms-hyphens: initial; -moz-hyphens: initial; hyphens: initial; } .box-teaser.category-preview .bottom-area .button-primary span { display: none; } .box-teaser.category-preview .bottom-area.mobil { display: none; } .box-teaser.category-preview .bottom-area .button-type-2:active { background-color: #009033; } .box-teaser.category-preview .bottom-area p { margin: 0rem 0rem 0rem 0rem; line-height: 1.25rem; } .box-teaser.category-preview .bottom-area .button-primary:hover { width: 11.25rem; line-height: 2.5rem; } .box-teaser.category-preview .bottom-area .button-primary:hover i { display: none; } .box-teaser.category-preview .bottom-area .button-primary:hover span { display: inline; } .box-teaser.category-preview:hover { box-shadow: 0 8px 20px 0 rgba(58, 68, 109, 0.7); z-index: 9999; } .box-teaser.category-preview:hover .top-area { background-color: white; } .box-teaser.category-preview:hover .top-area .category-icon { font-size: 120px; color: #8bbad0; } .box-teaser.category-preview:hover .bottom-area { box-shadow: none; margin-left: 0; margin-right: 0; padding-left: 40px; padding-right: 40px; height: calc(45% + 40px); } .box-teaser.product-preview { height: 27.8125rem; margin: 0rem 0.9375rem 0rem 0.9375rem; background-color: white; border: 1px solid #c8c8c8; } .box-teaser.product-preview .top-area { height: 50%; background-repeat: no-repeat; background-size: contain; background-position: center center; } .box-teaser.product-preview .bottom-area { height: 50%; margin: 0; padding: 1.25rem 1.5625rem 2.5rem 1.5625rem; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .box-teaser.product-preview .bottom-area .product-cat { font-size: 1rem; font-weight: 500; margin: 0rem 0rem 0.5625rem 0rem; line-height: 1.25rem; white-space: pre-line; color: #8bbad0; } .box-teaser.product-preview .bottom-area .product-name { font-size: 1.25rem; font-weight: 700; margin: 0rem 0rem 0.875rem 0rem; display: block; } .box-teaser.product-preview .bottom-area .product-description, .box-teaser.product-preview .bottom-area p { line-height: 1.25rem; margin: 0; } .box-teaser.product-preview .bottom-area .button-primary { position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #113c62; transition: background-color 200ms ease; cursor: pointer; width: 7.5rem; height: 2.5rem; bottom: -1px; right: auto; } .box-teaser.product-preview .bottom-area .button-primary:hover { background-color: #00cc00; } .box-teaser.product-preview .bottom-area .button-primary:active { background-color: #009033; } .box-teaser.product-preview .bottom-area .button-primary.product-link { width: 11.25rem; right: -1px; } .box-teaser.product-preview:hover { box-shadow: 0 8px 20px 0 rgba(58, 68, 109, 0.7); } .box-teaser.product-preview:hover .bottom-area { box-shadow: none; } .box-teaser.reference-preview { height: 30rem; } .box-teaser.reference-preview .top-area { height: 65%; background-position: center; background-repeat: no-repeat; background-size: cover; } .box-teaser.reference-preview .bottom-area { height: calc(35% + 40px); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); transition: all 0.2s ease; } .box-teaser.reference-preview .bottom-area .reference-title { font-size: 1rem; margin: 0rem 0rem 0.875rem 0rem; color: #8bbad0; font-weight: 500; } .box-teaser.reference-preview .bottom-area .reference-subtitle { font-size: 1.25rem; margin: 0rem 0rem 1.4375rem 0rem; font-weight: 700; } .box-teaser.reference-preview .bottom-area .reference-text { font-size: 0.875rem; line-height: 1.25rem; color: #113c62; } .box-teaser.reference-preview .bottom-area .reference-link { width: 11.25rem; font-size: 1rem; line-height: 2.5rem; } .box-teaser.reference-preview:hover .bottom-area { box-shadow: 0 8px 20px 0 rgba(58, 68, 109, 0.7); } .box-teaser.contact-box { height: 26.875rem; } .box-teaser.contact-box .top-area { height: 72%; overflow: hidden; } .box-teaser.contact-box .top-area .contact-box-video { width: auto; height: 100%; position: relative; left: 50%; transform: translateX(-50%); } .box-teaser.contact-box .top-area .contact-box-image { width: 100%; height: 100%; object-fit: cover; } .box-teaser.contact-box .bottom-area { height: calc(28% + 33px); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); padding-top: 1.875rem; margin-top: -2.0625rem; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .box-teaser.contact-box .bottom-area h3 { font-size: 1.25rem; margin-bottom: 1.25rem; hyphens: none; } .box-teaser.contact-box .bottom-area h4 { color: #93C3D3; font-weight: 700; } .box-teaser.contact-box .bottom-area .button-primary { height: 2.5rem; width: 7.5rem; padding: 0rem 0.875rem 0rem 0.875rem; line-height: 1; font-size: 1rem; } .box-teaser.contact-box .bottom-area .button-primary .team-contact-button-text { line-height: 1; vertical-align: middle; display: inline-block; font-style: italic; position: relative; } .box-teaser.contact-box .bottom-area .button-primary i { font-size: 1.1875rem; display: inline-block; vertical-align: middle; line-height: 40px; } .box-teaser.product--info { overflow: visible; } .box-teaser.product--info .top-area, .box-teaser.product--info .bottom-area { height: 50%; } .box-teaser.product--info .product-name { display: inline-block; line-height: 1.25rem; white-space: normal; } .box-teaser.product--info .bottom-area { text-align: left; } .box-teaser.product--info .bottom-area .product-description, .box-teaser.product--info .bottom-area p { hyphens: auto; white-space: normal; font-size: 0.875rem; line-height: 1.25rem; color: #113c62; } .box-teaser.product--info .image--element img { height: 100%; width: auto; margin: 0; max-width: unset; margin-left: 50%; transform: translateX(-50%); } .box-teaser.category-preview .bottom-area { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); } .emotion--product-slider .box--emotion .product--info { overflow: visible; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .bottom-area { overflow: hidden; width: calc(100% + 1px); position: relative; background-color: transparent; height: calc(50% + 1px); } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .bottom-area .product-link { left: 26px; width: auto; } .is--ctl-index.is--act-index .box-teaser.product-preview .bottom-area .button-primary { right: -1px; } @media screen and (max-width: 63.9375em) { .box-teaser.category-preview .bottom-area .preview-title { font-size: 1.25rem; } } @media screen and (max-width: 47.9375em) { .box-teaser.category-preview { height: 24.0625rem; } .box-teaser.category-preview .bottom-area { padding: 1.875rem 1.875rem 1.875rem 1.875rem; margin: -2.1875rem 0.9375rem 0rem 0.9375rem; height: calc(45% + 35px); } .box-teaser.category-preview .bottom-area.mobil { display: block; } .box-teaser.category-preview .bottom-area .preview-title { margin: 0rem 0rem 0.75rem 0rem; font-size: 1.5rem; line-height: 1.5rem; } .box-teaser.category-preview .bottom-area a { font-size: 1rem; } .box-teaser.category-preview:hover { box-shadow: none; } .box-teaser.category-preview:hover .top-area { background-color: #e8f1f6; } .box-teaser.category-preview:hover .top-area .category-icon { font-size: 5.9375rem; color: #113c62; } .box-teaser.category-preview:hover .bottom-area.desktop { padding: 1.5625rem 1.5625rem 1.5625rem 1.5625rem; margin: -2.5rem 0.9375rem 0rem 0.9375rem; height: calc(45% + 40px); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); } .box-teaser.contact-box { height: 17.5rem; } .box-teaser.contact-box .bottom-area { height: calc(28% + 55px); margin-top: -3.4375rem; padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem; } .box-teaser.contact-box .bottom-area h3 { font-size: 0.875rem; margin-bottom: 0.3125rem; font-weight: 700; color: #113c62; } .box-teaser.contact-box .bottom-area h4 { font-size: 0.75rem; line-height: 1.125rem; font-weight: 400; color: #8bbad0; } } @media screen and (min-width: 48em) { .content-teaser.box-teaser .bottom-area .button-primary { width: 2.5rem; } .content-teaser.box-teaser .bottom-area .button-primary i { display: inline; } .content-teaser.box-teaser .bottom-area .button-primary span { display: none; } .content-teaser.box-teaser .bottom-area .button-primary:hover { width: 11.25rem; } .content-teaser.box-teaser .bottom-area .button-primary:hover i { display: none; } .content-teaser.box-teaser .bottom-area .button-primary:hover span { display: inline; } } @media screen and (min-width: 1000px) { .box-teaser.product-preview .bottom-area .button-primary.product-link { right: -11px; } } .box-teaser.product-preview:hover { box-shadow: 0 0 10px 0 rgba(58, 68, 109, 0.7); } body .emotion--wrapper .emotion--element .emotion--product-slider { height: 28.4375rem; } body .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .product--box { margin-top: 10px; } .product-slider--container.is--horizontal { padding-bottom: 20px; } .testimonial-container .floating-text-area .small-image-container img { width: auto !important; } .showcase-emotion { position: relative; height: calc(100vh - 89px); } .showcase-emotion .showcase-carousel { /* important um slick zu überschreiben der die Breite hin und wieder falsch berechnet und das Bild springen lässt */ width: 100vw !important; height: calc(100vh - 89px); } .showcase-emotion .showcase-carousel .showcase-image { height: calc(100vh - 89px); background-repeat: no-repeat; background-size: cover; background-position: center center; } .showcase-emotion .showcase-carousel .showcase-image:after { content: ''; position: absolute; width: 100%; height: calc(100vh - 89px); background-color: #113c62; opacity: 0.2; top: 0; left: 0; } .showcase-emotion .showcase-carousel .showcase-image .slogan-second { text-transform: uppercase; font-size: 8.125rem; line-height: 6.875rem; height: 5.625rem; z-index: 1; font-weight: 900; color: white; margin: 0; position: absolute; top: calc(50% - 45px); left: 50%; transform: translateX(-50%); } .showcase-emotion .slogan-first { position: absolute; font-weight: 900; color: #ffffff; margin: 0; z-index: 1; font-size: 3.125rem; line-height: 2.6875rem; height: 2.1875rem; left: 50%; transform: translateX(-50%); top: calc(50% - 98px); } .showcase-emotion .more-button { z-index: 1; position: absolute; font-style: italic; color: #ffffff; border: none; text-align: center; padding: 10px 20px; font-weight: bold; font-size: 1.25rem; height: 3.75rem; width: 12.5rem; left: 50%; transform: translateX(-50%); top: calc(50% + 80px); } .contact-banner { max-width: 69.375rem; margin: 0 auto; position: relative; background-color: #113c62; color: white; height: 11.25rem; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); padding: 3.375rem 18.75rem 3.125rem 8.125rem; } .contact-banner .contact-banner-head { font-size: 1.5rem; font-weight: 700; } .contact-banner .contact-banner-head .htk-icon-envelope { margin-right: 0.625rem; font-size: 2.625rem; top: -0.875rem; left: -0.25rem; vertical-align: top; display: inline-block; position: relative; } .contact-banner .contact-banner-head .contact-banner-headline { width: 70%; display: inline-block; } .contact-banner .contact-banner-text { line-height: 1.25rem; font-size: 14px; margin: 0; } .contact-banner .call-to-action { position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #00cc00; transition: background-color 200ms ease; cursor: pointer; font-size: 20px; height: 3.75rem; width: 12.5rem; line-height: 3.75rem; padding: 0; } .contact-banner .call-to-action:hover { background-color: #00cc00; } .contact-banner .call-to-action:active { background-color: #00cc00; } .contact-banner.listing-version { margin-top: 7.5rem; } .content-teaser { height: 49.0625rem; position: relative; } .content-teaser .teaser-top-area { height: 63%; background: no-repeat center / cover; transition: opacity 0.5s ease; position: relative; opacity: 1; } .content-teaser .teaser-top-area.on-hover { position: absolute; top: 0; opacity: 0; width: 100%; } .content-teaser .teaser-bottom-area { transition: all 0.2s ease; position: relative; background-color: white; height: calc(37% + (75*1px)); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); margin: -4.6875rem 0.9375rem 0rem 0.9375rem; padding: 3.4375rem 1.5625rem 5rem 2.5rem; overflow: hidden; } .content-teaser .teaser-bottom-area .teaser-bottom-text-container { max-height: 100%; overflow: hidden; } .content-teaser .teaser-bottom-area .teaser-title { color: #8bbad0; font-size: 1.5rem; margin: 0rem 0rem 0.875rem 0rem; } .content-teaser .teaser-bottom-area .teaser-headline { font-size: 2.5rem; font-weight: 900; line-height: 2.5rem; margin: 0rem 0rem 1.125rem 0rem; } .content-teaser .teaser-bottom-area .teaser-text { font-size: 0.875rem; line-height: 1.25rem; color: #113c62; } .content-teaser .teaser-bottom-area .teaser-button { width: 12.5rem; height: 3.75rem; font-size: 1.25rem; line-height: 3.75rem; padding: 0; } .content-teaser:hover .teaser-bottom-area { box-shadow: 0 8px 20px 0 rgba(58, 68, 109, 0.7); } .content-teaser:hover .teaser-top-area.on-hover { opacity: 1; } .emotion-text-element { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); padding: 3.4375rem 2.8125rem 3.125rem 2.8125rem; } .emotion-text-element .element-headline { font-size: 2.5rem; line-height: 2.5rem; font-weight: 900; margin-bottom: 1.25rem; } .emotion-text-element .element-subline { color: #8bbad0; margin-bottom: 1.25rem; } .testimonial-container { height: 30.625rem; max-width: 69.375rem; margin: 0 auto; position: relative; width: 100%; } .testimonial-container.has-video { display: table; } .testimonial-container.small { height: 21.875rem; } .testimonial-container.small .floating-text-area.with-button { padding-bottom: 4.375rem; } .testimonial-container.small .floating-text-area .head-flex-container .headline-container .testimonial-headline { font-size: 1rem; line-height: 1rem; } .testimonial-container.small .floating-text-area .head-flex-container .headline-container .testimonial-icon { margin: 0; left: -0.3125rem; top: 0; font-size: 2.5rem; line-height: 2.25rem; } .testimonial-container.small .floating-text-area .head-flex-container .headline-container .testimonial-icon + .testimonial-subline { width: 85%; } .testimonial-container.small .floating-text-area .head-flex-container .headline-container .testimonial-subline { font-weight: 700; line-height: 1.5rem; } .testimonial-container.medium { height: 30.625rem; } .testimonial-container.large { height: 45.9375rem; } .testimonial-container.extra-large { height: 51.25rem; } .testimonial-container.fullscreen { max-width: none; } .testimonial-container .floating-text-area { width: calc(40% + 110px); background-color: white; position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 4.375rem 3rem 4.375rem 2.8125rem; margin-right: -95px; float: left; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); } .testimonial-container .floating-text-area .head-flex-container { display: flex; } .testimonial-container .floating-text-area .head-flex-container .testimonial-icon { position: relative; left: -0.625rem; top: -0.625rem; font-size: 4.6875rem; line-height: 4.6875rem; font-family: 'shopware'; color: #8bbad0; font-weight: 300; } .testimonial-container .floating-text-area .head-flex-container .testimonial-icon.wfl-icon-default::after { content: "\f52f"; } .testimonial-container .floating-text-area .head-flex-container .headline-container { width: 100%; } .testimonial-container .floating-text-area .head-flex-container .headline-container .testimonial-subline { display: inline-block; vertical-align: middle; color: #8bbad0; font-weight: 700; font-size: 1.5rem; margin: 0rem 0rem 1.875rem 0rem; line-height: 1.5rem; } .testimonial-container .floating-text-area .head-flex-container .headline-container .testimonial-headline { hyphens: auto; color: #113c62; font-size: 2.5rem; margin: 0rem 0rem 1.25rem 0rem; font-weight: 900; line-height: 2.5rem; } .testimonial-container .floating-text-area .head-flex-container .headline-container .testimonial-text { color: #113c62; margin: 0rem 0rem 0rem 0rem; } .testimonial-container .floating-text-area .head-flex-container .headline-container.inverted-headlines .testimonial-subline { margin: 0rem 0rem 1.25rem 0rem; } .testimonial-container .floating-text-area .head-flex-container .headline-container.inverted-headlines .testimonial-headline { margin: 0rem 0rem 1.875rem 0rem; } .testimonial-container .floating-text-area .testimonial-text { font-size: 0.875rem; line-height: 1.25rem; color: #113c62; margin-bottom: 0; } .testimonial-container .floating-text-area .testimonial-button { display: none; position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #00cc00; transition: background-color 200ms ease; cursor: pointer; font-size: 1.25rem; } .testimonial-container .floating-text-area .testimonial-button:hover { background-color: #009033; } .testimonial-container .floating-text-area .testimonial-button:active { background-color: #113c62; } .testimonial-container .floating-text-area .testimonial-button.button-large { width: 16.25rem; } .testimonial-container .floating-text-area.with-button { padding-top: 3.4375rem; padding-bottom: 7.1875rem; } .testimonial-container .floating-text-area.with-button .head-flex-container .headline-container .testimonial-headline { margin-bottom: 1.125rem; } .testimonial-container .floating-text-area.with-button .head-flex-container .headline-container .testimonial-subline { margin-bottom: 1.75rem; } .testimonial-container .floating-text-area.with-button .head-flex-container .headline-container.inverted-headlines .testimonial-subline { line-height: 1.5625rem; margin-bottom: 0.3125rem; padding-top: 0.625rem; padding-bottom: 0.625rem; } .testimonial-container .floating-text-area.with-button .testimonial-button { display: block; padding: 0rem 1.1875rem 0rem 1.1875rem; height: 3.75rem; min-width: 12.5rem; line-height: 3.75rem; } .testimonial-container .floating-text-area.with-button .testimonial-button .htk-icon-envelope { position: relative; top: 0.4375rem; margin-right: 0.25rem; font-size: 1.9375rem; } .testimonial-container .floating-text-area .small-image-container { float: left; margin-top: 3.75rem; width: 100%; } .testimonial-container .floating-text-area .small-image-container:after { content: ""; display: table; clear: both; } .testimonial-container .floating-text-area .small-image-container::after { content: ""; display: table; clear: both; } .testimonial-container .floating-text-area .small-image-container img { max-height: 160px; width: calc(33% - 16.666667px); float: left; margin-right: 1.5625rem; object-fit: contain; } .testimonial-container .floating-text-area .small-image-container img:last-child { margin-right: 0; } .testimonial-container .background-image, .testimonial-container .contact-box-video { float: right; object-fit: cover; width: calc(58.5% + 15px); position: relative; height: 100%; right: -0.9375rem; } .testimonial-container .image-and-catcher-container { height: 100%; display: block; vertical-align: middle; } .testimonial-container .image-and-catcher-container .testimonial-catcher { position: absolute; color: white; bottom: 5.3125rem; right: 7.1875rem; padding: 1.875rem 1.875rem 1.875rem 1.875rem; max-width: 200px; background-color: #113c62; opacity: 0.85; } .testimonial-container .image-and-catcher-container .testimonial-catcher p { font-size: 0.875rem; line-height: 1.25rem; margin: 0; } .testimonial-container.inverted .background-image, .testimonial-container.inverted .contact-box-video { float: left; left: -0.9375rem; } .testimonial-container.inverted .image-and-catcher-container { left: 0; } .testimonial-container.inverted .testimonial-catcher { left: 7.1875rem; right: unset; } .testimonial-container.inverted .floating-text-area { right: 95px; left: auto; } .testimonial-container.small-picture { height: 21.9375rem; } .testimonial-container.small-picture .headline-container .testimonial-headline { font-size: 1rem; margin-bottom: 1.3125rem; } .testimonial-container.small-picture .headline-container .testimonial-subline { margin: 0rem 0rem 1.625rem 0rem; } .testimonial-container.small-picture .background-image, .testimonial-container.small-picture .contact-box-video { width: calc(41.5% + 15px); } .testimonial-container.small-picture .floating-text-area { width: calc(59% + 90px); padding-top: 3.5625rem; } .testimonial-container.fullscreen .image-and-catcher-container { position: absolute; width: 56%; right: 0; overflow: hidden; } .testimonial-container.fullscreen .background-image, .testimonial-container.fullscreen .contact-box-video { float: none; width: 100%; left: 0; } .testimonial-container.fullscreen .floating-text-wrapper { position: relative; height: 100%; } .testimonial-container.fullscreen .floating-text-wrapper .floating-text-area { width: 50%; position: relative; } .testimonial-container.fullscreen.small-picture .floating-text-area { width: 69%; } .testimonial-container.fullscreen.inverted .floating-text-area { margin-right: 0; right: 0; float: right; } .testimonial-container.fullscreen.inverted .background-image, .testimonial-container.fullscreen.inverted .contact-box-video { right: 0; } .testimonial-container .object-fit-fallback { height: 100%; background-size: cover; background-position: center center; float: right; position: relative; right: -15px; } .testimonial-container .object-fit-fallback .background-image, .testimonial-container .object-fit-fallback .contact-box-video { opacity: 0; } .testimonial-container.medium .object-fit-fallback { width: calc(58.5% + 15px); } .testimonial-container.small .object-fit-fallback { width: calc(41.5% + 15px); } .testimonial-container.inverted .object-fit-fallback { right: 15px; float: left; } .testimonial-container.large .object-fit-fallback { width: calc(58.5% + 15px); } .emotion-background { height: 100%; background-color: lightblue; } .emotion-background .category-banner { background-color: lightblue; position: relative; height: 100%; } .emotion-background .category-banner .text-container { background-color: white; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); width: 50%; float: left; padding: 20px; position: relative; top: 50%; transform: translateY(-50%); } .emotion-background .category-banner .icon-container { position: relative; top: 50%; transform: translateY(-50%); width: 50%; text-align: center; float: left; } .emotion-background .category-banner .icon-container i { font-size: 100px; } .emotion-seperator { position: relative; top: 50%; max-width: 69.375rem; margin: 0 auto; } .emotion--html { background: none; border: none; } .emotion--html h2, .emotion--html h3, .emotion--html h4 { color: #8bbad0; } .desktop-block { display: block; } .desktop-inline-block { display: inline-block; } .mobil-block { display: none; } .mobil-inline-block { display: none; } .emotion--wrapper .emotion--element .emotion--product-slider { height: 26.4375rem; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content { padding: 0; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .product--box { width: 12.5rem; float: none; margin: 0 auto; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .product--box .image--element img { width: 100%; height: auto !important; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .product--box .product-preview { margin: 1px; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .bottom-area { padding: 1.25rem 1.6875rem 2.5rem 1.6875rem; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .bottom-area .product-cat { margin: 0rem 0rem 0.625rem 0rem; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item .bottom-area .product-name { margin: 0rem 0rem 0.875rem 0rem; } @media screen and (max-width: 1125px) { .emotion-seperator { margin: 0rem 0.9375rem 0rem 0.9375rem; } .testimonial-container .background-image, .testimonial-container .contact-box-video { right: 0; left: 0; } .contact-banner { margin: 0rem 0.9375rem 0rem 0.9375rem; } } @media screen and (max-width: 63.9375em) { .mobil-block { display: block; } .emotion-text-element { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .emotion-text-element .element-headline { font-size: 2rem; line-height: 2rem; } .contact-banner { height: auto; padding: 2.5rem 1.875rem 6.25rem 1.875rem; margin: 0rem 0.9375rem 0rem 0.9375rem; } .contact-banner .contact-banner-head { margin: 0rem 0rem 1.5625rem 0rem; font-size: 1.25rem; } .contact-banner .contact-banner-head .htk-icon-envelope { top: -0.25rem; } .contact-banner.listing-version { margin-top: 2.5rem; } .mobil-inline-block { display: inline-block; } .desktop-block { display: none; } .desktop-inline-block { display: none; } .content-teaser .teaser-bottom-area .teaser-headline { font-size: 2rem; } .content-teaser .teaser-bottom-area .teaser-title { font-size: 1.25rem; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item { width: 50% !important; } } @media screen and (max-width: 47.9375em) { .desktop { display: none; } .mobil { display: block; } .contact-banner .contact-banner-head { margin-bottom: 0.75rem; } .contact-banner .contact-banner-head .contact-banner-headline { margin-top: 0.625rem; } hr { margin: 0 15px; } .content-main.is--fullscreen .content--breadcrumb.container.block { display: none; } .testimonial-container.small, .testimonial-container.medium, .testimonial-container.large, .testimonial-container.extra-large { height: auto; } .testimonial-container .image-and-catcher-container { height: auto; position: relative; } .testimonial-container .image-and-catcher-container .background-image, .testimonial-container .image-and-catcher-container .contact-box-video { height: auto; float: none; width: 100%; left: 0; right: 0; } .testimonial-container .image-and-catcher-container .testimonial-catcher { width: calc(100% - 30px); max-width: none; margin: 0 15px; right: 0; bottom: 50px; left: 0; } .testimonial-container .floating-text-area { width: calc(100% - 30px); margin: -35px 15px 0 15px; padding: 2.125rem 2.25rem 1.6875rem 1.875rem; position: relative; top: 0; transform: translateY(0); } .testimonial-container .floating-text-area .head-flex-container .headline-container .testimonial-headline { font-size: 2rem; line-height: 2rem; margin-bottom: 0.9375rem; } .testimonial-container .floating-text-area .head-flex-container .headline-container .testimonial-subline { font-size: 1.25rem; line-height: 1.25rem; margin-bottom: 1.375rem; } .testimonial-container .floating-text-area .head-flex-container .headline-container.inverted-headlines .testimonial-headline { margin-bottom: 1.5625rem; } .testimonial-container .floating-text-area .head-flex-container .headline-container.inverted-headlines .testimonial-subline { margin-bottom: 0.9375rem; } .testimonial-container .floating-text-area.with-button { padding-top: 2rem; padding-bottom: 6.0625rem; } .testimonial-container .floating-text-area.with-button .head-flex-container .headline-container .testimonial-headline { margin-bottom: 0.8125rem; } .testimonial-container .floating-text-area.with-button .head-flex-container .headline-container .testimonial-subline { margin-bottom: 1.75rem; } .testimonial-container .floating-text-area.with-button .head-flex-container .headline-container.inverted-headlines .testimonial-headline { margin-bottom: 1.5625rem; } .testimonial-container .floating-text-area.with-button .head-flex-container .headline-container.inverted-headlines .testimonial-subline { margin-bottom: 0.9375rem; } .testimonial-container .floating-text-area.with-button .testimonial-text { margin: 0rem 0rem 0rem 0rem; } .testimonial-container .floating-text-area.with-button .testimonial-button.button-large { padding: 0rem 0.9375rem 0rem 0.9375rem; width: auto; } .testimonial-container.inverted .floating-text-area { right: 0; } .testimonial-container.inverted.small-picture .headline-container .testimonial-headline { font-size: 1rem; } .testimonial-container.inverted.small-picture .testimonial-text { margin: 0rem 0rem 0rem 0rem; } .testimonial-container.small-picture .floating-text-area { width: calc(100% - 30px); padding-top: 2.1875rem; } .testimonial-container.fullscreen .image-and-catcher-container { position: relative; width: 100%; height: 45%; } .testimonial-container.fullscreen .floating-text-wrapper .floating-text-area { width: calc(100% - 30px); height: calc(55% + 15px); padding: 1.875rem 1.875rem 5.625rem 1.875rem; } .testimonial-container.fullscreen.inverted .floating-text-area { margin-right: 15px; } .testimonial-container .image-and-catcher-container .testimonial-catcher { padding: 0.9375rem 1.875rem 0.9375rem 1.875rem; } .content-teaser { height: auto; } .content-teaser .teaser-top-area { padding-bottom: 86%; } .content-teaser .teaser-bottom-area { height: auto; padding: 2.1875rem 1.5625rem 5.625rem 1.5625rem; } .content-teaser .teaser-bottom-area .teaser-title { margin-bottom: 0.3125rem; } .content-teaser .teaser-bottom-area .teaser-headline { margin-bottom: 0.625rem; } .content-teaser .teaser-bottom-area .teaser-text { margin: 0; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider.product-slider--content .product-slider--item { width: 100% !important; margin: 0; padding: 0; } } @media screen and (max-width: 29.9375em) { .showcase-emotion { height: calc(100vh - 100px); } .showcase-emotion .showcase-carousel .showcase-image { height: calc(100vh - 100px); } .showcase-emotion .showcase-carousel .showcase-image .slogan-second { font-size: 4.0625rem; line-height: 4.3125rem; top: calc(35% - 32px); } .showcase-emotion .slogan-first { font-size: 2rem; line-height: 1.75rem; top: calc(35% - 66px); } .showcase-emotion .more-button { top: calc(36% + 50px); } .content-teaser .teaser-bottom-area { height: auto; } .testimonial-container .image-and-catcher-container .background-image, .testimonial-container .image-and-catcher-container .contact-box-video { height: 100%; } .testimonial-container .image-and-catcher-container .testimonial-catcher { display: none; } .testimonial-container .floating-text-area .small-image-container { white-space: nowrap; overflow-x: scroll; line-height: 0; } .testimonial-container .floating-text-area .small-image-container img { display: inline-block; float: none; max-height: 15.625rem; height: auto; width: auto; } .testimonial-container .floating-text-area .small-image-container img:last-child { margin-right: 0; } } .text-element-title { text-align: center; font-weight: 900; font-size: 2.5rem; } .forms--container * { border-radius: 0 !important; } .forms--container .form--panel-wrapper { width: 70%; float: left; } .forms--container .form--contacts-wrapper { width: 30%; float: right; padding-left: 30px; } .forms--container .panel--body input, .forms--container .panel--body select, .forms--container .panel--body textarea { background-color: white; box-shadow: none; background-image: none; color: #969696; border: 1px solid #969696; } .forms--container .panel--body input:focus, .forms--container .panel--body select:focus, .forms--container .panel--body textarea:focus { border-color: #7d7d7d; } .forms--container .panel--body input::placeholder, .forms--container .panel--body select::placeholder, .forms--container .panel--body textarea::placeholder { color: #969696; } .forms--container .panel--body:after { content: ""; display: table; clear: both; } .forms--container .panel--body::after { content: ""; display: table; clear: both; } .forms--container .panel--title.is--underline { border-color: #ccc; } .forms--container .panel--title.is--underline span { color: #8bbad0; } .forms--container .panel--title.is--underline p { color: #7d7d7d; font-weight: 400; margin: 20px 0; } .forms--container .panel--title.is--logo { margin-left: 0; margin-right: 0; height: 80px; background-color: #113c62; } @media screen and (max-width: 63.9375em) { .off-canvas { -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 17.5rem; background: #fff; position: fixed; top: 0; bottom: 0; display: none; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 8000; } .off-canvas.is--left { -webkit-transform: translateX(-100%); transform: translateX(-100%); left: 0; } .off-canvas.is--right { -webkit-transform: translateX(100%); transform: translateX(100%); right: 0; } .off-canvas.is--active { display: block; } .off-canvas.is--open { -webkit-transform: translateX(0); transform: translateX(0); } .off-canvas.is--full-screen { width: 100%; } .off-canvas.no--transitions { -webkit-transition: none; transition: none; } .off-canvas .buttons--off-canvas { display: block; } .off-canvas .close--off-canvas { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; display: block; color: #fff; font-weight: 700; cursor: pointer; } .off-canvas .close--off-canvas:after { content: ""; display: table; clear: both; } .off-canvas .close--off-canvas::after { content: ""; display: table; clear: both; } .off-canvas .close--off-canvas .icon--arrow-left { margin: 0rem 0.625rem 0rem 0rem; font-size: 0.6875rem; } .off-canvas .link--go-main { font-size: 1rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 2.625rem; font-weight: 700; display: block; width: 100%; } .off-canvas .link--go-main .icon--menu { font-size: 1.25rem; margin-right: 0.625rem; float: left; } .off-canvas .sidebar--navigation .navigation--link { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; } .off-canvas .sidebar--navigation .navigation--link .is--icon-right { margin-top: 0; } .off-canvas .sidebar--navigation .navigation--link .is--icon-left { margin: 0rem 0.625rem 0rem 0rem; float: left; } .buttons--off-canvas { display: none; } .page-wrap { -webkit-transition: left 400ms cubic-bezier(0.16, 0.04, 0.14, 1); transition: left 400ms cubic-bezier(0.16, 0.04, 0.14, 1); position: relative; left: 0; } .navigation--smartphone .navigation--entry { padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #fff; } .navigation--smartphone .navigation--link { display: block; } .navigation--smartphone .entry--close-off-canvas, #cookie-consent .cookie-consent--header { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); } .navigation--smartphone .entry--close-off-canvas .navigation--link, #cookie-consent .cookie-consent--header { font-size: 0.875rem; color: #969696; font-weight: 700; } .navigation--smartphone .entry--close-off-canvas .navigation--link:after { content: ""; display: table; clear: both; } .navigation--smartphone .entry--close-off-canvas .navigation--link::after { content: ""; display: table; clear: both; } .navigation--smartphone .entry--close-off-canvas .navigation--link:active { color: #646464; } .navigation--smartphone .entry--close-off-canvas .icon--arrow-right, #cookie-consent .cookie-consent--header .icon--arrow-right { margin: 0.75rem 0rem 0rem 0rem; font-size: 0.6875rem; float: right; } .navigation--headline, .sidebar--navigation { margin: 0rem 0.625rem 0rem 0.625rem; } .navigation--headline { margin: 1rem 0.625rem 0.375rem 0.625rem; line-height: 1.625rem; color: #113c62; font-weight: 700; font-size: 1em; } .sidebar--navigation { border-radius: 3px; background-clip: padding-box; background: #fff; border: 1px solid #c8c8c8; } .sidebar--navigation .navigation--entry { border-bottom: 1px solid #c8c8c8; } .sidebar--navigation .navigation--entry:last-child { border-bottom: 0 none; } .sidebar--navigation .navigation--link { color: #113c62; overflow: hidden; text-overflow: ellipsis; } } /* Variables ================================================== The `variables.less` file contains the imports to all variables that Shopware uses. Most variables are controllable by using the backend theme manager. Mixin specific documentation can be found inside each mixin file. */ .header-main { background-color: #113c62; color: #ffffff; } .header-main .container.header--navigation { padding: 0; } .header-main .navigation-main { border: none; background-color: transparent; } .header-main .container.header--navigation .flex-container { display: flex; align-items: stretch; } .header-main .container.header--navigation .flex-container .flex-column.navigation-column { flex-grow: 12; } .header-main .logo-main { align-self: center; width: 15%; padding-left: 0.9375rem; } .header-main .logo-main .logo--shop { height: 3.75rem; } .header-main .logo-main .logo--shop .logo--link { height: 3.75rem; } .header-main .logo-main .logo--shop .logo--link img { width: 100%; } .header-main .shop--navigation { width: 100%; } .header-main .top-bar { padding: 0; margin-bottom: 0; } .header-main .top-bar:after { content: ""; display: table; clear: both; } .header-main .top-bar::after { content: ""; display: table; clear: both; } .header-main .top-bar .top-bar--navigation { display: inline-block; line-height: 2.6875rem; top: 0.125rem; } .header-main .top-bar .top-bar--language { float: right; margin-top: 0.8125rem; padding: 0; } .header-main .top-bar .top-bar--language .language-controls { list-style-type: none; } .header-main .top-bar .top-bar--language .language-controls .language-control-item { float: left; } .header-main .top-bar .top-bar--language .language-controls .language-control-item input { padding: 0rem 0.625rem 0rem 0.625rem; border-radius: 0; background: none; border: none; color: #8bbad0; -webkit-appearance: none; } .header-main .top-bar .top-bar--language .language-controls .language-control-item:first-child input { padding-left: 0.3125rem; } .header-main .top-bar .top-bar--language .language-controls .language-control-item:last-child input { padding-right: 1.25rem; } .header-main .top-bar .top-bar--language .language-controls .language-control-item:not(:last-child) { border-right: 1px solid white; } .header-main .top-bar .top-bar--language .language-controls .language-control-item.is--active input { color: #ffffff; } .header-main .top-bar .contacts a { color: #ffffff; } .header-main .top-bar .contacts .phone-number { margin-right: 1.5625rem; } .header-main .top-bar .contacts i { display: inline-block; margin-top: -0.25rem; margin-right: 0.9375rem; font-size: 1.5rem; vertical-align: middle; cursor: pointer; } .header-main .navigation--list-wrapper .navigation--list { text-align: right; overflow: hidden; } .header-main .navigation--list-wrapper .navigation--list .navigation--entry { line-height: 1.0625rem; vertical-align: top; } .header-main .navigation--list-wrapper .navigation--list .navigation--entry .navigation--link { color: #ffffff; padding: 0.6875rem 1.0625rem 0rem 1.0625rem; font-size: 0.875rem; } .header-main .navigation--list-wrapper .navigation--list .navigation--entry .navigation--link span { display: inline-block; padding-bottom: 0.75rem; border-bottom: 2px solid transparent; } .header-main .navigation--list-wrapper .navigation--list .navigation--entry:hover .navigation--link { color: #ffffff; } .header-main .navigation--list-wrapper .navigation--list .navigation--entry:hover .navigation--link span { border-color: #00cc00; } .header-main .navigation--list-wrapper .navigation--list .navigation--entry:last-child .navigation--link { padding-irght: 1.75rem; } .header-main .navigation--list-wrapper .navigation--list .navigation--entry.is--active .navigation--link { background: none; } .header-main .navigation--list-wrapper .navigation--list .navigation--entry.is--active .navigation--link span { border-bottom: 2px solid #00cc00; background: none; } .header-main .search-container { height: 5.3125rem; } .header-main .search-container .btn { padding: 1.9375rem 1.9375rem 1.6875rem 1.9375rem; line-height: 20px; border: none; border-left: 1px solid #1e567f; border-right: 1px solid #1e567f; border-radius: 0; margin: 0; background-image: none; background-color: transparent; } .header-main .search-container .btn i { font-size: 22px; color: #ffffff; } .header-main .search-container.is--active { background-color: #00cc00; } .header-main .search-container.is--active .search-field-input { display: block; } .header-main .search-container .search-field-input { position: absolute; display: none; right: 0; top: 5.3125rem; width: 21.875rem; box-shadow: none; } .header-main .search-container .search-field-input .main-search--field { height: 3.75rem; line-height: 2.8125rem; padding-left: 1.875rem; padding-top: 0; padding-bottom: 0; right: 1px; color: #113c62; box-shadow: none; border-radius: 0; border: none; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); } .header-main .search-container .search-field-input .main-search--results { display: none !important; top: 4.375rem; } .header-main .search-container .search-field-input .main-search--results .list--entry { color: #113c62; } .header-main .search-container .search-field-input .form--ajax-loader { display: none !important; } .header-main .search-container .search-field-input button { visibility: hidden; } .header-main .mobile-sub-header { display: none; } @media screen and (max-width: 63.9375em) { .header-main { border-bottom: none; padding-bottom: 0; } .header-main .logo-main { width: auto; } .header-main .logo-main .xxx .logo--shop .logo--link img { width: auto; } .header-main .navigation-main { display: none; } .header-main .navigation--entry.entry--menu-left { display: block; } .header-main .search-container { display: none; } .header-main.sticky-header .container.header--navigation { position: fixed; top: 0; z-index: 99999999; } .header-main.sticky-header .mobile-sub-header { margin-top: 3.75rem; } .header-main .container.header--navigation { background-color: #113c62; } .header-main .container.header--navigation .flex-container { border-bottom: 1px solid #1e567f; } .header-main .container.header--navigation .flex-container .logo-main { padding: 0.75rem 0rem 0.625rem 0.9375rem; } .header-main .container.header--navigation .flex-container .logo-main .logo--shop { width: 100%; height: 2.375rem; } .header-main .container.header--navigation .flex-container .logo-main .logo--shop .logo--link { height: 2.375rem; } .header-main .container.header--navigation .flex-container .flex-column.navigation-column { margin-left: auto; flex-grow: initial; } .header-main .container.header--navigation .flex-container .flex-column.navigation-column .top-bar { display: block; margin-top: 0; } .header-main .container.header--navigation .flex-container .flex-column.navigation-column .top-bar .contacts { display: none; } .header-main .container.header--navigation .flex-container .side-menu-column { align-self: stretch; border-left: 1px solid #1e567f; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation { height: 100%; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation .navigation--list { height: 100%; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation .navigation--entry { margin-right: 0; height: 100%; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation .entry--trigger { height: 100%; padding: 0; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation .entry--trigger .htk-icon-cross { display: none; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation .entry--trigger i { font-size: 1.5rem; padding: 0rem 1.125rem 0rem 1.125rem; line-height: 3.75rem; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation .entry--trigger.menu-opened .htk-icon-cross { display: block; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation .entry--trigger.menu-opened .htk-icon-menu { display: none; } .header-main .container.header--navigation .flex-container .side-menu-column .shop--navigation .icon--menu { left: 1.0625rem; } .header-main .container.header--navigation .flex-container .top-bar--language { margin-top: 0; } .header-main .container.header--navigation .flex-container .top-bar--language .language-controls .language-control-item { line-height: 1.75rem; border: none; } .header-main .container.header--navigation .flex-container .top-bar--language .language-controls .language-control-item:not(:last-child) input.lang { border-right: 1px solid #ffffff; } .header-main .mobile-sub-header { display: block; background-color: #113c62; position: relative; } .header-main .mobile-sub-header .top-bar { display: block; margin-top: 0; } .header-main .mobile-sub-header .top-bar .search-container.mobile { float: right; display: inline; height: auto; } .header-main .mobile-sub-header .top-bar .search-container.mobile .btn { background: none; color: #ffffff; padding: 0; border-radius: 0; border: none; border-left: 1px solid #1e567f; } .header-main .mobile-sub-header .top-bar .search-container.mobile .btn i { font-size: 1.5rem; line-height: 2.5rem; padding: 0rem 1.125rem 0rem 1.125rem; } .header-main .mobile-sub-header .top-bar .top-bar--navigation { float: right; width: auto; line-height: unset; top: 0; } .header-main .mobile-sub-header .top-bar .top-bar--language { display: none; } .header-main .mobile-sub-header .search-field-input { display: none; position: absolute; top: 0; left: 0; width: auto; right: 3.75rem; } .header-main .mobile-sub-header .search-field-input.main-search--form { padding: 0; bottom: 0; top: 0; border: none; } .header-main .mobile-sub-header .search-field-input.main-search--form .main-search--field { padding: 0; padding-left: 20px; height: 2.5rem; border: none; right: 0; } .header-main .mobile-sub-header .language-control { display: none; } .header-main .mobile-sub-header .contacts i { border-left: 1px solid #1e567f; display: inline; margin: 0; } .header-main .mobile-sub-header .contacts i.htk-icon-envelope { font-size: 1.5rem; line-height: 2.5rem; padding: 0.5rem 1.125rem 0.5rem 1.125rem; } .header-main .mobile-sub-header .contacts i.htk-icon-envelope:first-child { border-left: 1px solid #1e567f; } .header-main .mobile-sub-header .contacts i.htk-icon-phone { font-size: 1.5rem; line-height: 2.5rem; padding: 0rem 1.125rem 0rem 1.125rem; } .header-main .mobile-sub-header .contacts i:first-child { border: none; } } @media screen and (max-width: 63.9375em) { .header-main .container.header--navigation .flex-container { align-items: center; } .navigation--list .navigation--entry { position: static; } .shop--navigation .entry--menu-left .btn { color: #ffffff; content: ""; } } .header-main .logo-main .logo--shop .logo--link { width: 100%; } .footer-main { background-color: #113c62; color: #ffffff; padding: 0rem 0.9375rem 0rem 0.9375rem; } .footer-main .container { background: none; } .footer-main .navigation--link { color: #ffffff; } .footer-main .column--headline { color: #ffffff; } .footer-main .column--content { padding-left: 0; padding-right: 0; } .footer-main .column--content p, .footer-main .column--content span { font-size: 0.8125rem; } .footer-main .column--content p { margin: 0; } .footer-main .column--content i { font-size: 2rem; padding: 0.3125rem 0.625rem 0.3125rem 0rem; color: white; background-color: #113c62; border-radius: 50%; } .footer-main .footer--columns { border-color: #1e567f; padding: 1.75rem 0rem 2.1875rem 0rem; } .footer-main .footer--columns .footer--column.column-75 { width: 75%; } .footer-main .footer--columns .footer--column .column--headline { font-size: 0.875rem; margin: 0rem 0rem 0.625rem 0rem; } .footer-main .footer--columns .footer--column .flex-container { display: flex; align-items: center; } .footer-main .footer--columns .footer--column .flex-container .image-wrapper { padding: 1.25rem 1.25rem 1.25rem 0rem; } .footer-main .footer--columns .footer--column .flex-container .image-wrapper img { width: 6.25rem; } .footer-main .footer--columns .footer--column .flex-container .footer-copyright { margin: 0 0 0 auto; } .footer-main .footer--columns .footer--column .flex-container p { margin: 0; } .footer-main .footer--columns .footer--column .flex-container p.footer-slogan { font-size: 1.75rem; margin-left: 1.5625rem; } .footer-main .footer--columns .footer--column a { color: #ffffff; } .footer-main .footer--columns .footer--seal-container .seal { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; display: inline-block; background-color: #ffffff; margin-right: 0.75rem; } .footer-main .footer--columns .footer--seal-container .seal-text { font-size: 0.8125rem; top: -0.25rem; display: inline-block; vertical-align: top; position: relative; } .footer-main .footer--columns.flex--row { display: flex; align-items: center; } .footer-main .footer--columns.flex--row .column--content span { padding-right: 1.25rem; } .footer-main .footer--columns.flex--row .newsletter--form { padding: 0; } .footer-main .footer--columns.flex--row.logo-row { padding: 0.3125rem 0rem 0.3125rem 0rem; } .footer-main .footer--columns.contact-columns .footer--column .column--headline { margin-bottom: 1.375rem; } .footer-main .footer--columns.contact-columns a { text-decoration: underline; } .footer-main .footer--columns:last-child { border: none; } .footer-main .footer--columns:first-child { padding: 1.6875rem 0rem 1.6875rem 0rem; } .footer-main .mobile-footer { display: none; } .footer-main .mobile-footer .footer--columns { padding: 0.625rem 0rem 0.625rem 0rem; } .footer-main .mobile-footer .footer--column { width: 50%; border-top: none; } .footer-main .mobile-footer .footer--column i { color: white; font-size: 1.5rem; padding: 0.3125rem 0.3125rem 0.3125rem 0rem; background-color: #113c62; border-radius: 50%; } .footer-main .mobile-footer .column--content { display: block; } .footer-main .column--headline { font-size: 0.875rem; } .footer-main .column--static-headline { font-weight: 700; font-size: 0.875rem; margin-bottom: 1.25rem; } .footer-main.sub-footer { border: none; background-color: white; color: #113c62; padding: 0rem 0.9375rem 2.1875rem 0.9375rem; } .footer-main.sub-footer .column--desc a { color: #113c62; } .footer-main.sub-footer .footer--columns { border: none; } .footer-main.sub-footer .footer--columns .column--headline { color: #113c62; } .footer-main.sub-footer .footer--columns .footer--column .column--static-headline { line-height: 1.5rem; margin: 0; } @media screen and (max-width: 63.9375em) { .footer--columns.contact-columns .footer--column { width: 50%; } } @media screen and (max-width: 47.9375em) { .footer-main { padding: 0; } .footer-main .full-width-footer { display: none; } .footer-main .mobile-footer { display: block; padding: 0rem 0.9375rem 0rem 0.9375rem; } .footer-main .mobile-footer .footer--columns { padding: 1.25rem 0rem 1.25rem 0rem; } .footer-main .mobile-footer .footer--columns .footer--column { padding-left: 0; padding-right: 0; width: 50%; border: none; } .footer-main .mobile-footer .footer--columns .footer--column:after { content: ""; display: table; clear: both; } .footer-main .mobile-footer .footer--columns .footer--column::after { content: ""; display: table; clear: both; } .footer-main .mobile-footer .footer--columns .footer--column.footer-icons { text-align: right; } .footer-main .mobile-footer .footer--columns .footer--column.footer-icons i { padding: 0rem 0.3125rem 0rem 0rem; } .footer-main .mobile-footer .footer--columns .footer--column.center { text-align: center; } .footer-main .mobile-footer .footer--columns .footer--column .column--static-headline { margin-bottom: 1.5625rem; } .footer-main .mobile-footer .footer--columns .footer--column .column--content { display: block; } .footer-main .mobile-footer .footer--columns .footer--column .column--content p { line-height: 1.875rem; } .footer-main .mobile-footer .footer--columns .footer--column .column--content span { display: inline-block; padding: 0rem 0rem 0.9375rem 0rem; } .footer-main .mobile-footer .footer--columns .footer--column .column--content .column--static-headline { font-size: 14px; margin: 0rem 0rem 0.625rem 0rem; } .footer-main .mobile-footer .footer--columns .footer--column .column--content.hidden { display: none; } .footer-main .mobile-footer .footer--columns .footer--column .column--content .footer-copyright { line-height: 1.5rem; } .footer-main .mobile-footer .footer--columns .footer--column.full-width { margin: 0.3125rem 0rem 0.3125rem 0rem; width: 100%; float: none; } .footer-main .mobile-footer .footer--columns .footer--column.is--first .column--content p { line-height: 1.5rem; } .footer-main .mobile-footer .footer--columns .footer--column .footer-logo { width: 6.25rem; display: inline-block; margin: 0rem 0rem 1.25rem 0rem; } .footer-main .mobile-footer .footer--columns .footer--column .footer-slogan { font-size: 1.75rem; line-height: 2.125rem; } .footer-main .mobile-footer .footer--columns .footer--column .footer-copyright { margin-top: 0.9375rem; line-height: 0.75rem; text-align: right; } .footer-main .mobile-footer .footer--columns .footer--seal-container { margin-top: 1.875rem; } .footer-main .mobile-footer .footer--columns.flex--row { display: block; } .footer-main .mobile-footer .footer--columns.more-locations { padding: 0.3125rem 0rem 0rem 0rem; } .footer-main .mobile-footer .footer--columns.more-locations .footer--column { width: auto; } .footer-main .mobile-footer .footer--columns.more-locations .column--headline { margin: 0rem 0rem 0.1875rem 0rem; } .footer-main .mobile-footer .footer--columns.more-locations .column--headline:after { color: white; content: "\e912"; font-family: "htk-icons"; padding-right: 1.25rem; } .footer-main .mobile-footer .footer--columns.more-locations .column--headline.is--active:after { content: "\e915"; } .footer-main .mobile-footer .footer--columns.more-locations a { text-decoration: underline; } .footer-main .mobile-footer .footer--columns.about-htk { padding: 1.6875rem 0rem 1.875rem 0rem; } .footer-main .mobile-footer .footer--columns.about-htk .column--static-headline { margin-bottom: 0.125rem; } .footer-main .mobile-footer .footer--columns:last-child { padding-bottom: 0; } .footer-main .mobile-footer .footer-hr { margin: 0; border-width: 0.5px; width: 100%; border-color: #1e567f; } .sub-footer .footer--columns { padding-left: 0; padding-right: 0; } .sub-footer .footer--columns:after { content: ""; display: table; clear: both; } .sub-footer .footer--columns::after { content: ""; display: table; clear: both; } .sub-footer .footer--columns .footer--column { border: none; padding: 0; margin-bottom: 1.875rem; } .sub-footer .footer--columns .footer--column.block { width: 50%; } .sub-footer .column--content { display: block; } } .content--breadcrumb { position: absolute; z-index: 1; border: none; margin: auto; left: 0; right: 0; padding: 0; margin-top: 1.0625rem; } .content--breadcrumb .breadcrumb--list { width: 40%; padding-left: 0.9375rem; } .content--breadcrumb .breadcrumb--button { display: none; } .content--breadcrumb .breadcrumb--link, .content--breadcrumb .breadcrumb--separator { padding: 0rem 0.625rem 0rem 0rem; color: #7d7d7d; } .content--breadcrumb .breadcrumb--entry.is--active .breadcrumb--link { color: #113c62; } .content-main--inner { padding-left: 0; padding-right: 0; } .content-main.is--fullscreen .content--breadcrumb { display: block; } @media screen and (max-width: 47.9375em) { .content--breadcrumb { border-bottom: 1px solid #c8c8c8; position: relative; margin-top: 0; } .content--breadcrumb .breadcrumb--list { width: auto; padding-left: 0; } .content--breadcrumb .breadcrumb--link, .content--breadcrumb .breadcrumb--title { color: #969696; } .content--breadcrumb .breadcrumb--button { display: block; padding: 0.3125rem 0rem 0.3125rem 1.25rem; border-right: 1px solid #c8c8c8; } .content--breadcrumb .breadcrumb--button i { font-size: 1.25rem; vertical-align: middle; } .content--breadcrumb .breadcrumb--button .breadcrumb--title { border: none; vertical-align: -2px; margin-left: 0.625rem; } .content--breadcrumb .breadcrumb--entry { padding: 0.3125rem 0rem 0.3125rem 1.25rem; } .content--breadcrumb .breadcrumb--entry.is--active .breadcrumb--link .breadcrumb--title { line-height: 1.625rem; } .content--breadcrumb.no-breadcrumbs { display: none; } } @media screen and (min-width: 47.9375em) and (max-width: 63.9375em) { .content--breadcrumb { border-bottom: 1px solid #c8c8c8; position: relative; margin-top: 0; } .content--breadcrumb .breadcrumb--list { width: auto; padding-left: 0; } .content--breadcrumb .breadcrumb--list .breadcrumb--link { line-height: 1.625rem; } .content--breadcrumb .breadcrumb--list .breadcrumb--separator { line-height: 2.25rem; padding: 0; margin: 0rem 0rem 0rem 0.625rem; } .content--breadcrumb .breadcrumb--link, .content--breadcrumb .breadcrumb--title { color: #969696; } .content--breadcrumb .breadcrumb--button { display: block; padding: 0.3125rem 1.25rem 0.3125rem 1.25rem; margin: 0; border-right: 1px solid #c8c8c8; } .content--breadcrumb .breadcrumb--button i { font-size: 1.25rem; vertical-align: middle; } .content--breadcrumb .breadcrumb--button .breadcrumb--title { border: none; vertical-align: -2px; margin-left: 0.625rem; } .content--breadcrumb .breadcrumb--entry { padding: 0.3125rem 0rem 0.3125rem 1.25rem; } .content--breadcrumb .breadcrumb--entry.is--active .breadcrumb--link .breadcrumb--title { line-height: 1.625rem; } .content--breadcrumb.no-breadcrumbs { display: none; } } .listing-breadcrumb { display: none; } .is--ctl-listing .content-main .breadcrumb--list { width: auto; } .is--ctl-listing .listing--actions { border: 0; } .is--ctl-custom .filter-panel--input.filter-panel--radio { opacity: 0; } .content.listing--content, .content.search--content { margin-top: 4.0625rem; padding: 0; } .content.listing--content .mobile-filter-title, .content.search--content .mobile-filter-title { display: none; } .content.listing--content .listing--wrapper .listing--actions, .content.search--content .listing--wrapper .listing--actions { padding: 0rem 0rem 0rem 1.875rem; margin-bottom: 0.9375rem; background: none; z-index: 999999; position: relative; } .content.listing--content .listing--wrapper .listing--actions .action--filter-options, .content.search--content .listing--wrapper .listing--actions .action--filter-options { transform: none; position: relative; z-index: auto; } .content.listing--content .listing--wrapper .listing--actions .action--filter-options .filter--close-btn, .content.search--content .listing--wrapper .listing--actions .action--filter-options .filter--close-btn { display: none !important; } .content.listing--content .listing--wrapper .listing--actions .filter--container, .content.search--content .listing--wrapper .listing--actions .filter--container { padding: 0; margin: 0; border: none; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container { padding: 0; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel { background-image: none; border-radius: 0; margin: 0rem 1.875rem 0.9375rem 0rem; height: 2.5rem; width: calc(33.33% - 20px); } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel:nth-child(3n), .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel:nth-child(3n) { margin-right: 0; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--title, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--title { line-height: 2.375rem; font-size: 1rem; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--icon, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--icon { top: 0.625rem; right: 0.625rem; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--icon, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--icon { font-family: "htk-icons"; font-size: 1.25rem; height: auto; width: auto; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--icon:before, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--icon:before { content: "\e912"; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--flyout, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel .filter-panel--flyout { position: relative; border-radius: 0; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel.filter--range::after, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel.filter--range::after, .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel.filter--multi-selection::after, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel.filter--multi-selection::after { content: ""; display: block; position: absolute; top: 0; right: 0; width: 2.5rem; height: 2.4375rem; pointer-events: none; border-left: 1px solid #c8c8c8; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--active-container, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--active-container { margin: 0; padding-bottom: 0; text-align: center; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--active-container .filter--active, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--active-container .filter--active { border-radius: 0; margin-bottom: 0; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--active-container .filter--active .filter--active-icon, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--active-container .filter--active .filter--active-icon { font-family: "htk-icons"; font-size: 0.875rem; top: 1px; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--active-container .filter--active .filter--active-icon:before, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--active-container .filter--active .filter--active-icon:before { content: "\e918"; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--actions, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--actions { padding: 0; margin: 1.875rem 0rem 0rem 0rem; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--actions .btn, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--actions .btn { background-image: none; background-color: white; color: #113c62; border: 1px solid #969696; border-radius: 0; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--actions .btn:disabled, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--actions .btn:disabled { background-image: none; } .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--facet-container, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container, .content.listing--content .listing--wrapper .listing--actions .filter--container .filter--actions-bottom, .content.search--content .listing--wrapper .listing--actions .filter--container .filter--actions-bottom { display: block; } .content.listing--content .listing--wrapper .action--filter-btn, .content.search--content .listing--wrapper .action--filter-btn { display: none; } .content.listing--content .listing--wrapper .listing-seperator, .content.search--content .listing--wrapper .listing-seperator { margin: 0rem 0rem 0rem 1.875rem; } .content.listing--content .listing--wrapper .listing--container, .content.search--content .listing--wrapper .listing--container { overflow: visible; } .content.listing--content .listing--wrapper .listing--container .listing, .content.search--content .listing--wrapper .listing--container .listing { padding: 0; margin: 0; opacity: 1; } .content.listing--content .listing--wrapper .listing--container .product--box, .content.search--content .listing--wrapper .listing--container .product--box { width: 33.333%; padding: 1.875rem 0rem 0rem 1.875rem; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content, .content.search--content .listing--wrapper .listing--container .product--box .box--content { height: 28.125rem; padding: 0; border-radius: 0; transition: all 0.2s ease; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--image, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--image { height: 13.75rem; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--image .image--element img, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--image .image--element img { width: 100%; object-fit: contain; font-family: 'object-fit: contain;'; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--bottom, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--bottom { padding: 0rem 1.5625rem 0rem 1.5625rem; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .product--category, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .product--category { font-size: 1rem; color: #8bbad0; font-weight: 500; margin: 0.9375rem 0rem 0.625rem 0rem; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .product--title, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .product--title { font-size: 1.25rem; font-weight: 700; margin: 0rem 0rem 0.9375rem 0rem; height: auto; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .product--description, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .product--description { font-size: 0.875rem; line-height: 1.25rem; font-weight: 300; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .button-primary, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .button-primary { position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #113c62; transition: background-color 200ms ease; cursor: pointer; width: 11.25rem; right: -1px; bottom: -1px; border: none; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .button-primary:hover, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .button-primary:hover { background-color: #00cc00; } .content.listing--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .button-primary:active, .content.search--content .listing--wrapper .listing--container .product--box .box--content .product--bottom .button-primary:active { background-color: #009033; } .content.listing--content .listing--wrapper .listing--container .product--box .product--badges, .content.search--content .listing--wrapper .listing--container .product--box .product--badges { top: 0; } .content.listing--content .listing--wrapper .listing--container .product--box .product--badges .product--badge, .content.search--content .listing--wrapper .listing--container .product--box .product--badges .product--badge { border-radius: 0; background-color: #113c62; } .content.listing--content .listing--wrapper .listing--container .product--box:hover .box--content, .content.search--content .listing--wrapper .listing--container .product--box:hover .box--content { box-shadow: 0 8px 20px 0 rgba(58, 68, 109, 0.7); } .content.listing--content .action--filter-options, .content.search--content .action--filter-options { border: none; } .content.listing--content .hero-unit, .content.search--content .hero-unit { display: none; } .content.listing--content .listing--bottom-paging, .content.search--content .listing--bottom-paging { background-color: white; border: none; margin: 2.5rem 0rem 0rem 0rem; } .content.listing--content .listing--bottom-paging .listing--paging, .content.search--content .listing--bottom-paging .listing--paging { text-align: center; padding: 0; } .content.listing--content .listing--bottom-paging .listing--paging .paging--link, .content.search--content .listing--bottom-paging .listing--paging .paging--link { background: none; background-color: #113c62; color: white; border-radius: 0; width: 2.5rem; line-height: 2.5rem; height: 2.5rem; margin: 0rem 0.5rem 0rem 0.5rem; vertical-align: top; border: none; } .content.listing--content .listing--bottom-paging .listing--paging .paging--link.paging--disabled, .content.search--content .listing--bottom-paging .listing--paging .paging--link.paging--disabled { background-color: #c8c8c8; pointer-events: none; } .content.listing--content .listing--bottom-paging .listing--paging .paging--link.paging--indicator, .content.search--content .listing--bottom-paging .listing--paging .paging--link.paging--indicator { background: none; width: auto; padding: 0; color: #c8c8c8; border: none; font-style: italic; } .content.listing--content .listing--bottom-paging .listing--paging .paging--link.paging--indicator.is--active, .content.search--content .listing--bottom-paging .listing--paging .paging--link.paging--indicator.is--active { color: #113c62; } .content.listing--content .listing--bottom-paging .listing--paging .paging--link i, .content.search--content .listing--bottom-paging .listing--paging .paging--link i { display: inline-block; position: relative; line-height: 2.5rem; font-size: 1.25rem; } .product--box .product--title { line-height: 1.5rem; } .listing-banner-background { height: auto; background-color: #e8f1f6; } .listing-banner-background .category-banner { position: relative; height: 100%; padding-top: 5rem; padding-bottom: 5rem; } .listing-banner-background .category-banner .banner-text-container { float: left; height: auto; width: 100%; background-color: white; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); padding: 2.8125rem 2.5rem 2.5rem 2.8125rem; } .listing-banner-background .category-banner .banner-text-container .banner-pretitle { color: #8bbad0; font-weight: 700; margin: 0rem 0rem 0.9375rem 0rem; } .listing-banner-background .category-banner .banner-text-container .banner-title { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; margin: 0rem 0rem 1.25rem 0rem; } .listing-banner-background .category-banner .banner-text-container .banner-text { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; margin: 0; } .listing-banner-background .category-banner .icon-container { display: inline-block; text-align: center; float: left; height: 100%; margin-right: 24px; } .listing-banner-background .category-banner .icon-container i { color: #8bbad0; font-size: 70px; } .listing-banner-background .category-banner .icon-container + .text-part-container { width: 90%; float: right; } .sidebar-main { margin-top: 4.0625rem; padding: 0; } .sidebar-main .sidebar--categories-navigation { border-radius: 0; } .sidebar-main .sidebar--categories-navigation .sidebar--navigation { background-color: #113c62; border-radius: 0; } .sidebar-main .sidebar--categories-navigation .sidebar--navigation .navigation--entry { border: none; } .sidebar-main .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link { border-bottom: 1px solid #1e567f; } .sidebar-main .sidebar--categories-navigation .sidebar--navigation.is--level0 .navigation--entry .navigation--link { font-weight: 700; } .sidebar-main .sidebar--categories-navigation .sidebar--navigation.is--level1 .navigation--entry .navigation--link { font-weight: 400; } .sidebar-main .sidebar--categories-navigation .navigation--link { color: white; } .sidebar-main .sidebar--categories-navigation .navigation--link.is--active, .sidebar-main .sidebar--categories-navigation .navigation--link:hover { color: #00cc00; } .sidebar-main .sidebar--navigation .is--level1 .navigation--link.is--active { color: #00cc00; } .hero-unit { display: none; } @media screen and (max-width: 63.9375em) { .is--ctl-listing .content-main.is--fullscreen .content--breadcrumb { display: none; } .is--ctl-listing .content-main.is--fullscreen .content--breadcrumb.listing-breadcrumb { display: block; position: relative; } .content.listing--content { margin-top: 1.875rem; } .content.listing--content .listing--wrapper .listing-seperator { margin: 0rem 0.9375rem 0rem 0.9375rem; } .content.listing--content .listing--wrapper .listing--actions { padding: 0; } .content.listing--content .listing--wrapper .listing--container .product--box { padding: 1.875rem 0.9375rem 0rem 0.9375rem; } .content.listing--content .listing--wrapper .listing--actions .action--filter-options { overflow: visible; } .content.listing--content .listing--wrapper .listing--actions .action--filter-options .filter--facet-container .filter-panel, .content.listing--content .listing--wrapper .listing--actions .action--filter-options .filter--facet-container .filter-panel:last-child { margin: 0.9375rem 0.9375rem 0.9375rem 0.9375rem; width: calc(33.33% - 30px); } .listing-banner-background { padding-left: 0.9375rem; padding-right: 0.9375rem; } .listing-banner-background .category-banner { padding-top: 2.5rem; padding-bottom: 2.5rem; } .listing-banner-background .category-banner .text-container .banner-pretitle { margin: 0rem 0rem 0.9375rem 0rem; } .listing-banner-background .category-banner .text-container .banner-title { font-weight: 900; margin: 0rem 0rem 1.25rem 0rem; } .listing-banner-background .category-banner .text-container .banner-text { font-size: 0.875rem; line-height: 1.25rem; } .listing-banner-background .category-banner .icon-container { display: none; } .listing-banner-background .category-banner .icon-container + .text-part-container { width: 100%; } .listing-banner-background .category-banner .banner-text-container { padding: 30px; height: auto; } } @media screen and (max-width: 47.9375em) { .content.listing--content .mobile-filter-title { display: block; width: 16.875rem; font-size: 1rem; color: #969696; margin: 0 auto; } .content.listing--content .listing--wrapper .listing--actions .action--filter-options .filter--facet-container .filter-panel, .content.listing--content .listing--wrapper .listing--actions .action--filter-options .filter--facet-container .filter-panel:last-child, .content.listing--content .listing--wrapper .listing--actions .action--filter-options .filter--facet-container .filter-panel:nth-child(3n) { float: none; margin: 0.625rem 0.625rem 0.625rem 0.625rem; margin-left: auto; margin-right: auto; width: 16.875rem; } .content.listing--content .listing--wrapper .listing--actions .action--filter-options .filter--active-container .filter--active { margin-bottom: 5px; } .is--ctl-listing .page-wrap .content-main { margin-bottom: 1.5625rem; } .content.listing--content .listing--wrapper .listing--container .product--box { float: left; width: 50%; } .content.search--content .listing--wrapper .listing--actions { padding: 0rem 0.9375rem 0rem 0.9375rem; } .content.search--content .listing--wrapper .listing--actions .filter--container .filter--facet-container .filter-panel { width: 100%; } .content.search--content .listing--wrapper .listing-seperator { margin: 0rem 0.9375rem 0rem 0.9375rem; } .content.search--content .listing--wrapper .listing--container .product--box { width: calc(50% - 7.5px); padding: 1.875rem 0rem 0rem 0.9375rem; } .content.search--content .listing--wrapper .listing--container .product--box:nth-of-type(2) { width: calc(50% + 7.5px); padding: 1.875rem 0.9375rem 0rem 0.9375rem; } .content-main--inner { padding-bottom: 1.875rem; } } @media screen and (max-width: 29.9375em) { .content.listing--content .listing--wrapper .listing--container .product--box { float: none; width: 100%; } .content.search--content .listing--wrapper .listing--container .product--box { width: 100%; padding: 1.875rem 0.9375rem 0rem 0.9375rem; } .content.search--content .listing--wrapper .listing--container .product--box:nth-of-type(2) { width: 100%; padding: 1.875rem 0.9375rem 0rem 0.9375rem; } } @media screen and (max-width: 78.75em) { .is--ctl-listing .content-main { margin-bottom: 4.375rem; } } .advanced-menu { background-color: #113c62; left: 0; overflow: hidden; } .advanced-menu .button-container .button--category { color: #00cc00; padding-left: 5.9375rem; font-size: 0.875rem; } .advanced-menu .button-container .button--category:hover { padding-left: 5.9375rem; } .advanced-menu .content--wrapper { margin-top: 0; margin-bottom: 0; margin-left: 5.9375rem; background-color: #113c62; } .advanced-menu .content--wrapper .menu--list.double-column { column-count: 2; } .advanced-menu .content--wrapper .menu--list.double-column .menu--list-item { width: 100%; } .advanced-menu .content--wrapper .menu--list.menu--level-0 { position: relative; padding: 0rem 0rem 1.875rem 0rem; border-top: 1px solid #00cc00; column-count: 1; width: 60% !important; } .advanced-menu .content--wrapper .menu--list .wrapper-level-1 { display: none; position: absolute; height: 100%; width: 50%; right: 0; top: 0; } .advanced-menu .content--wrapper .menu--list.menu--level-1 { background-color: #1e567f; border-bottom: 1px solid #113c62; margin: 0rem 0rem 0rem 1.875rem; } .advanced-menu .content--wrapper .menu--list-item { padding: 0.9375rem 0rem 0.9375rem 0rem; clear: both; } .advanced-menu .content--wrapper .menu--list-item:hover > a { color: #00cc00; padding-left: 0; } .advanced-menu .content--wrapper .menu--list-item .arrow-right:after { font-family: 'htk-icons'; content: "\e914"; float: right; } .advanced-menu .content--wrapper .menu--list-item .menu--list-item-link { font-size: 0.875rem; color: white; } .advanced-menu .content--wrapper .menu--list-item .menu--list-item-link.category-icon { padding: 0; line-height: 1.875rem; } .advanced-menu .content--wrapper .menu--list-item .menu--list-item-link.category-icon i { display: block; float: left; font-size: 1.875rem; margin-right: 1.25rem; } .advanced-menu .content--wrapper .menu--list-item.item--level-0 { position: static; border-bottom: 1px solid #1e567f; width: 50%; } .advanced-menu .content--wrapper .menu--list-item.item--level-0:hover .wrapper-level-1 { display: block; } .advanced-menu .content--wrapper .menu--list-item.item--level-0 .menu--list-item-link { font-weight: 500; } .advanced-menu .content--wrapper .menu--list-item.item--level-1 { padding-left: 1.25rem; border-bottom: 1px solid #113c62; } .advanced-menu .content--wrapper .menu--list-item.item--level-1:hover { background-color: #009033; } .advanced-menu .content--wrapper .menu--list-item.item--level-1:hover > a { color: white; } .advanced-menu .content--wrapper .menu--list-item.next-column { float: left; clear: none; } .advanced-menu .content--wrapper .menu--list-item.next-column:nth-child(2n) { margin-left: 30px; width: calc(50% - 30px); } .advanced-menu .content--wrapper .menu--teaser { width: 35% !important; } .advanced-menu .content--wrapper .menu--delimiter { display: none; } .js--menu-scroller, .navigation-main { position: static; } .js--menu-scroller--arrow { display: none !important; } .tab--content { z-index: 9999999; overflow: auto; } .tab--content .off-canvas { overflow: scroll; } .tab--content .off-canvas .related--content { background-color: white; } .product--details .tab-menu--product { margin-top: 1.875rem; } .product--details .tab-menu--product .tab--navigation .tab--link { width: 11.25rem; margin-right: 0.625rem; padding: 0.5625rem 0.9375rem 0.5625rem 0.9375rem; text-align: center; background: none; background-color: #e6e6e6; border: 1px solid #c8c8c8; border-radius: 0; } .product--details .tab-menu--product .tab--navigation .tab--link.is--active { background-color: white; border-bottom-color: white; } .product--details .tab-menu--product .tab--navigation .tab--link:hover { background-color: white; } .product--details .tab-menu--product .tab--navigation .tab--link.hidden { display: none; } .product--details .tab-menu--product .tab--container-list .tab--container { border: 1px solid #c8c8c8; border-radius: 0; } .product--details .tab-menu--product .tab--container-list .tab--container.hidden { display: none; } .product--details .tab-menu--product .tab--container-list .tab--content .content--description { padding: 2.8125rem 2.1875rem 2.8125rem 2.1875rem; } .product--details .tab-menu--product .tab--container-list .tab--content .content--description .content--title { color: #8bbad0; font-size: 20px; font-weight: 500; margin: 0rem 0rem 1.25rem 0rem; } .product--details .tab-menu--product .tab--container-list .tab--content .content--description .product--description { color: #113c62; font-weight: 300; } .product--details .tab-menu--product .tab--container-list .tab--content .content--description .content--list .htk-icon-download { font-size: 40px; color: #8bbad0; } .product--details .tab-menu--product .tab--container-list .tab--content .content--description .content--list .entry--name { position: relative; bottom: 0.3125rem; padding-left: 0.3125rem; } .product--details .tab-menu--product .tab--container-list .tab--content .content--description p { margin: 0; } .product--box { hyphens: auto; white-space: normal; } .product--navigation .navigation--link { top: 16.875rem; } .product--navigation .navigation--link:hover .link--next-button:hover, .product--navigation .navigation--link:hover .link--prev-button:hover { background-color: #00cc00; } .product--navigation .navigation--link:hover .link--next-button:active, .product--navigation .navigation--link:hover .link--prev-button:active { background-color: #009033; } .product--navigation .link--next-button, .product--navigation .link--prev-button { height: 2.5rem; line-height: 2.5rem; background-color: #113c62; border-radius: 0; font-size: 20px; transition: all 0.2s ease; } .product--navigation .link--next-button.htk-icon-chevronleft:before, .product--navigation .link--prev-button.htk-icon-chevronleft:before { font-family: 'htk-icons' !important; content: "\e913"; } .product--navigation .link--next-button.htk-icon-chevronright:before, .product--navigation .link--prev-button.htk-icon-chevronright:before { font-family: 'htk-icons' !important; content: "\e914"; } .product--navigation .link--prev.can--slide:hover { left: -2.5rem; } .product--navigation .link--next.can--slide:hover { right: -2.5rem; } .product--detail-upper { position: relative; } .product--detail-upper .product--image-container { width: 40.625rem; float: right; margin: 0; padding: 0; } .product--detail-upper .product--image-container .image-slider--container { margin-bottom: 0; height: 37.5rem; border: 1px solid #c8c8c8; border-top: none; } .product--detail-upper .product--image-container .image-slider--container .image--element { width: 100%; height: 100%; } .product--detail-upper .product--image-container .image-slider--container .image--element .image--media { width: 100%; height: 100%; display: inline-block; } .product--detail-upper .product--image-container .image-slider--container .image--element .image--media img { height: 100%; width: 100%; object-fit: contain; font-family: 'object-fit: contain;'; } .product--detail-upper .product--image-container .image-slider--container .arrow { display: none; } .product--detail-upper .product--image-container .image-slider--thumbnails { text-align: center; width: 100%; margin: 1.125rem 0rem 1.125rem 0rem; height: 6.875rem; margin-left: auto; float: none; position: relative; top: 0; } .product--detail-upper .product--image-container .image-slider--thumbnails .image-slider--thumbnails-container { max-width: 33.5rem; overflow: hidden; margin: 0 auto; position: relative; } .product--detail-upper .product--image-container .image-slider--thumbnails .image-slider--thumbnails-slide { display: inline-block; position: relative; text-align: center; height: 100%; } .product--detail-upper .product--image-container .image-slider--thumbnails .thumbnail--link { width: 6.875rem; height: 6.875rem; margin: 0rem 0.75rem 0rem 0.75rem; border-radius: 0; border-color: #c8c8c8; display: inline-block; } .product--detail-upper .product--image-container .image-slider--thumbnails .thumbnail--link .thumbnail--image { width: 100%; height: 100%; object-fit: contain; font-family: 'object-fit: contain;'; } .product--detail-upper .product--image-container .image-slider--thumbnails .thumbnail--link.is--active { border-color: #7d7d7d; } .product--detail-upper .product--image-container .image-slider--thumbnails .thumbnails--arrow { position: absolute; vertical-align: middle; display: inline-block; color: #c8c8c8; margin: 0rem 0.6875rem 0rem 0.6875rem; font-size: 1.25rem; top: 0.9375rem; font-weight: 500; border: none; } .product--detail-upper .product--image-container .image-slider--thumbnails .thumbnails--arrow.is--left:before { content: "\e913"; } .product--detail-upper .product--image-container .image-slider--thumbnails .thumbnails--arrow.is--right:before { content: "\e914"; } .product--detail-upper .product--image-container .image-slider--thumbnails .thumbnails--arrow.is--inactive { display: none; } .product--detail-upper .product--image-container .image-slider--thumbnails .thumbnails--arrow:hover { color: black; } .product--detail-upper .product--image-container .image-slider--dots { display: none; position: absolute; left: 0; right: 0; bottom: 2.8125rem; } .product--detail-upper .product--image-container .image-slider--dots .dot--link { border-radius: 50%; height: 0.5rem; width: 0.5rem; } .product--detail-upper .product--image-container .image-slider--dots .dot--link.is--active { background-color: #969696; border-color: #969696; } .product--detail-upper .product-head-infos { z-index: 1001; position: absolute; top: 4.375rem; padding: 4.0625rem 2.5rem 4.0625rem 2.5rem; width: calc(40% + 60px); height: 30.625rem; overflow: hidden; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; background-color: white; box-sizing: border-box; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); } .product--detail-upper .product-head-infos .product-category { margin: 0rem 0rem 1.25rem 0rem; font-size: 1.5rem; color: #8bbad0; font-weight: 600; } .product--detail-upper .product-head-infos .product-name { font-size: 2.5rem; font-weight: 900; margin: 0rem 0rem 1.5625rem 0rem; } .product--detail-upper .product-head-infos .product-description { font-weight: 300; max-height: 12.5rem; } .product--detail-upper .product-head-infos .product-description.bold { font-weight: 600; } .product--detail-upper .product-head-infos p { max-height: 12.5rem; } .product--detail-upper .product-head-infos .product-button-container { position: absolute; bottom: 0; right: 0; width: 100%; height: 3.75rem; background-color: #ffffff; } .product--detail-upper .product-head-infos .product-button-container .product-link { width: 12.5rem; font-size: 1.25rem; padding: 1.25rem 0.3125rem 1.25rem 0.3125rem; background-color: #00cc00; } .product--detail-upper .product-head-infos .product-button-container .product-link.link-back { right: 12.5rem; width: 18.75rem; background-color: white; color: #969696; } .product--detail-upper .product-head-infos .product-button-container .product-link.link-back::before { margin-right: 1.0625rem; top: 0.125rem; font-family: 'htk-icons' !important; content: "\e913"; font-style: normal; position: relative; } .detail-hr { margin: 4.375rem 0rem 4.0625rem 0rem; border-color: #c8c8c8; border-width: 0.5px; border-style: solid; } .detail-hr.detail-hr--bottom { margin: 1.875rem 0.9375rem 1.875rem 0.9375rem; } .tab-menu--cross-selling .tab--navigation { text-align: center; } .tab-menu--cross-selling .tab--link, .tab-menu--cross-selling .tab--title { border: none; font-weight: 900; font-size: 2.5rem; color: #113c62; } .tab-menu--cross-selling .tab--container-list { margin-top: 3.75rem; text-align: center; } .tab-menu--cross-selling .tab--container-list .tab--container { border-color: transparent; } .tab-menu--cross-selling .similar--content .product-slider { padding: 0; } .tab-menu--cross-selling .similar--content .product-slider--item { padding-top: 0; padding-bottom: 0; overflow: visible; min-width: 25%; } .tab-menu--cross-selling .similar--content .product-slider--item .product--box.box--custom { height: 28.125rem; } .tab-menu--cross-selling .similar--content .product-slider--item .product--box.box--custom .box--content { transition: all 0.2s ease; } .tab-menu--cross-selling .similar--content .product-slider--item .product--box.box--custom .box--content:hover { box-shadow: 0 6px 10px 0 rgba(58, 68, 109, 0.7); } .tab-menu--cross-selling .similar--content .box--content { padding: 0; border-radius: 0; } .tab-menu--cross-selling .similar--content .box--content .product--image { height: 11.25rem; margin: 0.625rem 0rem 0.625rem 0rem; } .tab-menu--cross-selling .similar--content .box--content .product--image img { width: 100%; object-fit: contain; font-family: 'object-fit: contain;'; } .tab-menu--cross-selling .similar--content .box--content .product--bottom { padding: 0rem 1.5625rem 0rem 1.5625rem; text-align: left; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .tab-menu--cross-selling .similar--content .box--content .product--bottom .product--category { font-size: 1rem; color: #8bbad0; font-weight: 500; margin: 1.25rem 0rem 0.75rem 0rem; overflow: hidden; text-overflow: ellipsis; } .tab-menu--cross-selling .similar--content .box--content .product--bottom .product--title { font-size: 1.25rem; font-weight: 700; margin: 0rem 0rem 1.25rem 0rem; height: auto; } .tab-menu--cross-selling .similar--content .box--content .product--bottom .product--description { white-space: normal; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; } .tab-menu--cross-selling .similar--content .box--content .product--bottom .button-primary { position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #113c62; transition: background-color 200ms ease; cursor: pointer; width: 11.25rem; right: -1px; bottom: -1px; } .tab-menu--cross-selling .similar--content .box--content .product--bottom .button-primary:hover { background-color: #00cc00; } .tab-menu--cross-selling .similar--content .box--content .product--bottom .button-primary:active { background-color: #009033; } .product--description .related--content .product-slider { padding: 0; } .product--description .related--content .product-slider--item { padding-top: 0; padding-bottom: 0; overflow: visible; min-width: 25%; } .product--description .related--content .product-slider--item .product--box.box--custom { height: 28.125rem; } .product--description .related--content .product-slider--item .product--box.box--custom .box--content { transition: all 0.2s ease; } .product--description .related--content .product-slider--item .product--box.box--custom .box--content:hover { box-shadow: 0 6px 10px 0 rgba(58, 68, 109, 0.7); } .product--description .related--content .box--content { padding: 0; border-radius: 0; } .product--description .related--content .box--content .product--image { height: 11.25rem; margin: 0.625rem 0rem 0.625rem 0rem; } .product--description .related--content .box--content .product--image img { width: 100%; object-fit: contain; font-family: 'object-fit: contain;'; } .product--description .related--content .box--content .product--bottom { padding: 0rem 1.5625rem 0rem 1.5625rem; text-align: left; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .product--description .related--content .box--content .product--bottom .product--category { font-size: 1rem; color: #8bbad0; font-weight: 500; margin: 1.25rem 0rem 0.75rem 0rem; } .product--description .related--content .box--content .product--bottom .product--title { font-size: 1.25rem; font-weight: 700; margin: 0rem 0rem 1.25rem 0rem; height: auto; } .product--description .related--content .box--content .product--bottom .product--description { white-space: normal; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; } .product--description .related--content .box--content .product--bottom .button-primary { position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #113c62; transition: background-color 200ms ease; cursor: pointer; width: 11.25rem; bottom: -1px; } .product--description .related--content .box--content .product--bottom .button-primary:hover { background-color: #00cc00; } .product--description .related--content .box--content .product--bottom .button-primary:active { background-color: #009033; } .content.product--details:after { content: ""; display: table; clear: both; } .content.product--details::after { content: ""; display: table; clear: both; } .js--modal.image-gallery--modal .image--gallery .btn { background: none; border-radius: 0; } .js--modal.image-gallery--modal .image--gallery .btn.modal--close { border: 1px solid #c8c8c8; color: #1e567f; } .js--modal.image-gallery--modal .image--gallery .thumbnail--link { border-radius: 0; } .js--modal.image-gallery--modal .arrow { border: none; } .js--modal.image-gallery--modal .arrow.is--right:before { content: "\e914"; } .js--modal.image-gallery--modal .arrow.is--left:before { content: "\e913"; } .js--modal.image-gallery--modal .btn.icon--cross.modal--close { border: 1px solid #1e567f; color: #1e567f; } @media screen and (max-width: 78.6875em) { .image-slider--thumbnails { top: 0; } } @media screen and (max-width: 1110px) { .product--detail-upper .product-head-infos { padding: 2.5rem 2.5rem 3.75rem 2.5rem; } } @media screen and (max-width: 63.9375em) { .product--details .tab-menu--product .tab--content { padding-top: 3.8125rem; } .product--details .tab-menu--product .tab--navigation .tab--link { width: 8.4375rem; padding: 0.5625rem 0.625rem 0.5625rem 0.625rem; } .product--detail-upper .product-head-infos .product-link.link-back { display: none; } } @media screen and (max-width: 47.9375em) { .product--details .tab-menu--product .tab--navigation .tab--link { width: 8.125rem; padding: 0.5625rem 0.625rem 0.5625rem 0.625rem; margin: 0; } .detail-hr { margin: 2.5rem 0.9375rem 2.5rem 0.9375rem; } .product-slider--container { width: 16.25rem; margin: 0 auto; } .product-slider--container .product--box { width: 90%; margin: 0 10px; } .product-slider--arrow.arrow--next, .product-slider--arrow.arrow--prev { border-radius: 0; background-color: #113c62; color: white; line-height: 2.5rem; width: 2.5rem; height: 2.5rem; } .product-slider--item { padding: 0 !important; } .tab-menu--cross-selling .tab--container-list { margin-top: 2.5rem; } .tab-menu--cross-selling .tab--content { display: block !important; } .tab-menu--cross-selling .tab--header { pointer-events: none; margin-bottom: 2.8125rem; } .tab-menu--cross-selling .tab--title { padding-right: 0; font-size: 2rem; } .tab-menu--cross-selling .tab--title:after { content: ""; } .product--detail-upper .product-head-infos { width: calc(100% - 30px); margin: 0rem 0.9375rem 0rem 0.9375rem; padding: 2.1875rem 1.5625rem 4.0625rem 1.5625rem; position: relative; top: -1.875rem; height: auto; } .product--detail-upper .product-head-infos .product-category { font-size: 1.25rem; } .product--detail-upper .product-head-infos .product-name { font-size: 2rem; } .product--detail-upper .product-head-infos .button-primary.product-link.link-back { display: none; } .product--detail-upper .product-head-infos .product--description, .product--detail-upper .product-head-infos p { max-height: none; } .product--detail-upper .product--image-container { width: 100%; height: 16.5625rem; } .product--detail-upper .product--image-container .image-slider--container { height: 100%; border-bottom: 1px solid #c8c8c8; } .product--detail-upper .product--image-container .image-slider--dots { display: block; } .product-slider--container.is--horizontal .product-slider--item { width: 100% !important; } } @media screen and (max-width: 29.9375em) { .product--details .tab-menu--product { margin-top: 0.75rem; } .product--details .tab-menu--product .tab--container-list .tab--container { margin: 0rem 0.9375rem 0.625rem 0.9375rem; padding: 0.625rem 0.9375rem 0.625rem 0.9375rem; } .product--details .tab-menu--product .tab--container-list .tab--container .tab--preview .tab--link { color: #00cc00; } .product--details .tab-menu--product .tab--container-list .tab--container .tab--title::after { content: "\e914"; font-family: "htk-icons"; font-size: 1.25rem; top: 0.25rem; right: 0; font-weight: 500; } .product--details .tab-menu--product .tab--container-list .tab--container .tab--content .buttons--off-canvas .close--off-canvas { background-color: #113c62; background-image: none; } table.MsoTableGrid { width: 100% !important; } .js--off-canvas-button:not(:first-of-type) .tab--header { margin: 0; } .js--off-canvas-button:not(:first-of-type) .tab--preview { display: none; } .tab--content.content--related.off-canvas.is--right.is--full-screen.is--active.is--open { margin-top: 8.4375rem; background: transparent; } } @media screen and (min-width: 47.9375em) { .image--thumbnails.image-slider--thumbnails { display: block; } } .product-slider--arrow.arrow--next, .product-slider--arrow.arrow--prev { background-clip: unset; } h1, h2, h3, h4, h5, h6 { margin: 0; } .container { background-color: transparent; max-width: 69.375rem; } .emotion--wrapper { background-color: transparent; max-width: 71.25rem; } hr { border-top-width: 0; border-color: #c8c8c8; border-style: solid; } table td { color: #113c62; } section.content-main { box-shadow: none; margin-top: 0; } .content--wrapper.without-sidebar { margin-left: 0 !important; } .swag-cookie-permission { position: fixed; bottom: 0; z-index: 9999999999999; width: 100%; } .swag-cookie-permission .cookie-bar { background-color: #113c62 !important; } .swag-cookie-permission .cookie-bar .cp-btn:hover { background-color: #00cc00; } .button-primary { position: absolute; bottom: 0; right: 0; font-style: italic; color: #fff; text-align: center; padding: 10px 20px; font-weight: bold; background-color: #113c62; transition: background-color 200ms ease; cursor: pointer; } .button-primary:hover { background-color: #00cc00; } .button-primary:active { background-color: #113c62; } .button-primary.button-type-1 { background-color: #00cc00; } .button-primary.button-type-1:hover { background-color: #009033; } .button-primary.button-type-1:active { background-color: #113c62; } .button-primary.button-type-2, .button-primary .button-type-3 { background-color: #113c62; } .button-primary.button-type-2:hover, .button-primary .button-type-3:hover { background-color: #00cc00; } .button-primary.button-type-2:active, .button-primary .button-type-3:active { background-color: #009033; } .button-primary.button-type-4 { background-color: #c8c8c8; } .button-primary.button-type-4:hover { background-color: #00cc00; } .button-primary.button-type-4:active { background-color: #009033; } .emotion--wrapper { overflow: visible; } .emotion--wrapper .emotion--element.title-text-element .html--content h1, .emotion--wrapper .emotion--element.title-text-element .html--content h2, .emotion--wrapper .emotion--element.title-text-element .html--content h3, .emotion--wrapper .emotion--element.title-text-element .html--content h4, .emotion--wrapper .emotion--element.title-text-element .html--content h5, .emotion--wrapper .emotion--element.title-text-element .html--content h6, .emotion--wrapper .emotion--element.title-text-element .html--content p, .emotion--wrapper .emotion--element.title-text-element .html--content span { text-align: center; font-size: 2.5rem; font-weight: 900; } .emotion--wrapper .emotion--element .emotion--product-slider { background: none; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider--arrow { border-radius: 0; background-color: #113c62; color: white; } .emotion--wrapper .emotion--element .emotion--product-slider .product-slider--item { padding: 0.625rem 1.25rem 0.625rem 1.25rem; vertical-align: top; overflow: visible !important; } .emotion--wrapper .emotion--element .emotion--html .html--content h1, .emotion--wrapper .emotion--element .emotion--html .html--content h2, .emotion--wrapper .emotion--element .emotion--html .html--content h3, .emotion--wrapper .emotion--element .emotion--html .html--content h4, .emotion--wrapper .emotion--element .emotion--html .html--content h5, .emotion--wrapper .emotion--element .emotion--html .html--content h6 { overflow: hidden; } .wfl-headline { margin-top: -2.1875rem; padding-bottom: 3rem !important; } .emotion--container.emotion--mode-rows .emotion--element.wfl-team-headline { top: 0.625rem; } .emotion--container.emotion--mode-rows .emotion--element.wfl-team-seperator { margin-top: -1.25rem; } .reduced-margin .contact-banner { margin-top: -0.9375rem; } @media screen and (max-width: 47.9375em) { .wfl-headline { margin-top: 0; } .emotion--container.emotion--mode-rows .emotion--element.wfl-team-headline { margin-top: 1.25rem; top: 0; } .emotion--container.emotion--mode-rows .emotion--element.wfl-team-seperator { margin-top: 0; } .reduced-margin .contact-banner { margin-top: 0; } .button-primary.button-type-1:active { background-color: #009033; } .button-primary.button-type-2, .button-primary .button-type-3 { background-color: #113c62; } .button-primary.button-type-2:active, .button-primary .button-type-3:active { background-color: #00cc00; } .button-primary.button-type-4 { background-color: #c8c8c8; } .button-primary.button-type-4:active { background-color: #00cc00; } } .js--overlay.theme--dark { background: rgba(139, 186, 208, 0.7); } .product-slider--container { -webkit-overflow-scrolling: touch; } .product-slider--container::-webkit-scrollbar-track, .product-slider--container::-webkit-scrollbar, .product-slider--container::-webkit-scrollbar-thumb { background-color: transparent; } aside.off-canvas .close--off-canvas { background-color: #113c62 !important; background-image: none; } aside.sidebar-main.off-canvas.is--full-screen { background-color: #113c62; color: #ffffff; margin-top: 3.8125rem; z-index: 99999999; } aside.sidebar-main.off-canvas.is--full-screen .sidebar--categories-wrapper { display: block !important; margin: 0rem 0.9375rem 0rem 0.9375rem; } aside.sidebar-main.off-canvas.is--full-screen .sidebar--categories-wrapper .sidebar--ajax-loader { background-color: #113c62; } aside.sidebar-main.off-canvas.is--full-screen .sidebar--categories-wrapper .sidebar--navigation { border-top: none; border-left: none; border-right: none; border-color: #1e567f; } aside.sidebar-main.off-canvas.is--full-screen .sidebar--categories-wrapper .sidebar--navigation .navigation--entry { border-color: #1e567f; } aside.sidebar-main.off-canvas.is--full-screen .sidebar--categories-wrapper .sidebar--navigation .navigation--entry .navigation--link { padding-left: 0; padding-right: 0; font-weight: 700; } aside.sidebar-main.off-canvas.is--full-screen .sidebar--categories-wrapper .sidebar--navigation .navigation--entry .navigation--link span.is--icon-right { display: inline-block; } aside.sidebar-main.off-canvas.is--full-screen .sidebar--categories-wrapper .sidebar--navigation .navigation--entry .navigation--link span.is--icon-right i { display: inline; } aside.sidebar-main.off-canvas.is--full-screen .sidebar--categories-wrapper .sidebar--navigation .navigation--entry .navigation--link:active { background-color: #009033; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay { background-color: #113c62; width: 100%; top: 0; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--headline { width: auto; margin: 0rem 0.9375rem 0rem 0.9375rem; background-color: #113c62; border-color: #1e567f; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--headline .navigation--link { color: #ffffff; padding-top: 0.3125rem; padding-left: 0; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--headline .navigation--link i { font-size: 1.875rem; vertical-align: middle; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--headline .navigation--link span.is--icon-right { display: inline-block; vertical-align: text-top; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--headline .navigation--link:active { background-color: #009033; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--category { border: none; margin: 0.375rem 0.9375rem 0rem 0.9375rem; padding-bottom: 0.5rem; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--category .navigation--link { color: #ffffff; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--category a { display: inline-block; width: 100%; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--category a:active { background-color: #009033; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .overlay--category .category--headline { color: #00cc00; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation { margin: 0rem 0.9375rem 0rem 0.9375rem; background-color: #113c62; border: none; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry { border-bottom: 1px solid #1e567f; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link { color: #ffffff; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link span.is--icon-right, aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link span.is--icon-left { display: inline-block; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link span.is--icon-right i, aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link span.is--icon-left i { display: inline; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link.is--display-button { display: none; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link.link--go-back { padding-left: 0; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link.link--go-back i { font-size: 1rem; vertical-align: sub; } aside.sidebar-main.off-canvas.is--full-screen .offcanvas--overlay .sidebar--navigation .navigation--entry .navigation--link:active { background-color: #009033; } aside.sidebar-main.off-canvas.is--full-screen .navigation--headline { color: #ffffff; } aside.sidebar-main.off-canvas.is--full-screen .navigation--entry.entry--close-off-canvas { background-color: #113c62; } @media screen and (max-width: 63.9375em) { aside.sidebar-main.off-canvas { display: block !important; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } body { font-size: 0.875rem; color: #113c62; line-height: 1.25rem; font-weight: 400; } h1 { font-size: 2.5rem; font-weight: 900; color: #113c62; line-height: 2.5rem; } h2 { font-size: 1.5rem; font-weight: 700; color: #113c62; line-height: 1.75rem; } h3 { font-size: 1.25rem; font-weight: 700; color: #113c62; line-height: 1.25rem; } h4 { font-size: 1rem; font-weight: 900; color: #113c62; line-height: 1rem; } h5 { font-size: 1rem; font-weight: 700; color: #113c62; line-height: 1rem; } h6 { font-size: 1rem; font-weight: 400; color: #113c62; line-height: 1rem; } @media screen and (max-width: 63.9375em) { h1 { font-size: 2rem; font-weight: 900; color: #113c62; line-height: 2rem; } h2 { font-size: 1.25rem; font-weight: 700; color: #113c62; line-height: 1.3125rem; } h3 { font-size: 1.25rem; font-weight: 700; color: #113c62; line-height: 1.25rem; } h4 { font-size: 1rem; font-weight: 900; color: #113c62; line-height: 1rem; } h5 { font-size: 1rem; font-weight: 700; color: #113c62; line-height: 1rem; } h6 { font-size: 1rem; font-weight: 400; color: #113c62; line-height: 1rem; } } /** Main Font */ @font-face { font-family: 'Eurostile'; font-style: normal; font-weight: 400; src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_0_0.eot'); src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_0_0.eot?#iefix') format('embedded-opentype'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_0_0.woff2') format('woff2'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_0_0.woff') format('woff'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_0_0.ttf') format('truetype'); } @font-face { font-family: 'Eurostile'; font-style: normal; font-weight: 700; src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_2_0.eot'); src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_2_0.eot?#iefix') format('embedded-opentype'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_2_0.woff2') format('woff2'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_2_0.woff') format('woff'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_2_0.ttf') format('truetype'); } @font-face { font-family: 'Eurostile'; font-style: normal; font-weight: 900; src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_1_0.eot'); src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_1_0.eot?#iefix') format('embedded-opentype'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_1_0.woff2') format('woff2'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_1_0.woff') format('woff'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_1_0.ttf') format('truetype'); } @font-face { font-family: 'Eurostile'; font-style: italic; font-weight: 700; src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_3_0.eot'); src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_3_0.eot?#iefix') format('embedded-opentype'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_3_0.woff2') format('woff2'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_3_0.woff') format('woff'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/36E7D3_3_0.ttf') format('truetype'); } @font-face { font-family: 'htk-icons'; src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/icomoon.eot?6z18jt'); src: url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/icomoon.eot?6z18jt#iefix') format('embedded-opentype'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/icomoon.ttf?6z18jt') format('truetype'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/icomoon.woff?6z18jt') format('woff'), url('../../themes/Frontend/HTKTHEME/frontend/_public/src/fonts/icomoon.svg?6z18jt#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="htk-icon-"], [class*=" htk-icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'htk-icons' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .htk-icon-brazing:before { content: "\e908"; } .htk-icon-brazing_fein:before { content: "\e909"; } .htk-icon-sonderverfahren:before { content: "\e90d"; } .htk-icon-alarm:before { content: "\e90e"; } .htk-icon-bubble:before { content: "\e90f"; } .htk-icon-dienstleistung:before { content: "\e910"; } .htk-icon-dienstleistung_fein:before { content: "\e911"; } .htk-icon-chevrondown:before { content: "\e912"; } .htk-icon-chevronleft:before { content: "\e913"; } .htk-icon-chevronright:before { content: "\e914"; } .htk-icon-chevronup:before { content: "\e915"; } .htk-icon-durchflussmesser:before { content: "\e916"; } .htk-icon-durchflussmesser_fein:before { content: "\e917"; } .htk-icon-cross:before { content: "\e918"; } .htk-icon-download:before { content: "\e919"; } .htk-icon-envelope:before { content: "\e91a"; } .htk-icon-magnifier:before { content: "\e91b"; } .htk-icon-menu:before { content: "\e91c"; } .htk-icon-phone:before { content: "\e91d"; } .htk-icon-facebook:before { content: "\e91e"; } .htk-icon-linkedin:before { content: "\e91f"; } .htk-icon-xing:before { content: "\e920"; } .htk-icon-software:before { content: "\e921"; } .htk-icon-gasmischer:before { content: "\e922"; } .htk-icon-gasmischer_fein:before { content: "\e923"; } .htk-icon-highspeed:before { content: "\e924"; } .htk-icon-highspeed_fein:before { content: "\e925"; } .htk-icon-klebstoffe:before { content: "\e92c"; } .htk-icon-klebstoffe_fein:before { content: "\e92d"; } .htk-icon-lebensmitteltechnik:before { content: "\e932"; } .htk-icon-lebensmitteltechnik_fein:before { content: "\e933"; } .htk-icon-loesungsmittel:before, .htk-icon-lösungsmittel:before, .htk-icon-lsungsmittel:before { content: "\e936"; } .htk-icon-loesungsmittel_fein:before, .htk-icon-lösungsmittel_fein:before, .htk-icon-lsungsmittel_fein:before { content: "\e937"; } .htk-icon-messenregeln_gasanalyse:before { content: "\e948"; } .htk-icon-messenregeln_gasanalyse_fein:before { content: "\e949"; } .htk-icon-power:before { content: "\e94e"; } .htk-icon-power_fein:before { content: "\e94f"; } .htk-icon-raumluft_gaswarnanlagen:before { content: "\e952"; } .htk-icon-raumluft_gaswarnanlagen_fein:before { content: "\e953"; } .htk-icon-raumluft-gaswarnanlagen-2:before { content: "\e900"; } .htk-icon-raumluft-gaswarnanlagen-2_fein:before { content: "\e901"; } .htk-icon-reifetechnologie:before { content: "\e956"; } .htk-icon-reifetechnologie_fein:before { content: "\e957"; } .htk-icon-robust:before { content: "\e958"; } .htk-icon-robust_fein:before { content: "\e959"; } .htk-icon-rohrleitungsbau:before { content: "\e95a"; } .htk-icon-rohrleitungsbau_fein:before { content: "\e95b"; } .htk-icon-schweissen:before { content: "\e95e"; } .htk-icon-schweissen_fein:before { content: "\e95f"; } .is--ctl-listing aside.sidebar-main { display: none; } .is--ctl-listing aside.sidebar-main.listing-sidebar { display: block; width: 15.9375rem; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-wrapper { display: block !important; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level0 { padding-left: 10px; padding-right: 10px; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level0 li { display: none; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level0 > li.navigation--entry:first-child { display: block; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level0 > li.navigation--entry:first-child li { display: block; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level0 > li.navigation--entry:first-child > a:first-child { display: none; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level1 { margin-bottom: 0; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level1 .navigation--link { font-weight: 700; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level1 .navigation--entry.is--active > .navigation--link { color: #00cc00; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level2 { background-color: #1e567f; border-top: 1px solid #00cc00; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level2 .navigation--entry .navigation--link { border-color: #113c62; font-weight: 500; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .sidebar--navigation.is--level2 .navigation--entry .navigation--link:hover { color: white; background-color: #009033; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .navigation--entry { margin: 0; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .navigation--entry.is--active > .sidebar--navigation.is--level2 { display: block; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .navigation--entry .sidebar--navigation.is--level2 { display: none; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .navigation--entry .sidebar--navigation.is--level2 .navigation--link { font-size: 0.8125rem; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .navigation--entry .navigation--link { padding: 15px 10px; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .navigation--entry .navigation--link.is--active i { transform: rotate(180deg); } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .navigation--entry .navigation--link .is--icon-right { display: block; } .is--ctl-listing aside.sidebar-main.listing-sidebar .sidebar--categories-navigation .navigation--entry .navigation--link .is--icon-right i { position: relative; z-index: 9999999999; font-size: 16px; float: right; } .is--ctl-listing.is--no-sidebar aside.sidebar-main.listing-sidebar { display: none; } .is--ctl-listing.is--no-sidebar .contact-banner.listing-version { display: none; } .is--ctl-custom .sidebar-main + .content--wrapper { margin-left: 0; } @media screen and (max-width: 64em) { .is--ctl-listing .sidebar-main + .content--wrapper { margin-left: 15.9375rem; } } @media screen and (max-width: 63.9375em) { .is--ctl-listing .sidebar-main + .content--wrapper { margin-left: 0; } .is--ctl-custom .sidebar-main .sidebar--categories-navigation { display: block; } .is--ctl-listing .sidebar-main.listing-sidebar { display: none !important; } .is--ctl-listing .sidebar-main.listing-sidebar .sidebar--categories-wrapper { display: block; } .listing-sidebar { display: none; } aside.off-canvas { -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 17.5rem; background: #fff; position: fixed; top: 0; bottom: 0; display: none; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 8000; } aside.off-canvas.is--left { -webkit-transform: translateX(-100%); transform: translateX(-100%); left: 0; } aside.off-canvas.is--right { -webkit-transform: translateX(100%); transform: translateX(100%); right: 0; } aside.off-canvas.is--active { display: block; } aside.off-canvas.is--open { -webkit-transform: translateX(0); transform: translateX(0); } aside.off-canvas.is--full-screen { width: 100%; } aside.off-canvas.no--transitions { -webkit-transition: none; transition: none; } aside.off-canvas .buttons--off-canvas { display: block; } aside.off-canvas .close--off-canvas { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; display: block; color: #fff; font-weight: 700; cursor: pointer; } aside.off-canvas .close--off-canvas:after { content: ""; display: table; clear: both; } aside.off-canvas .close--off-canvas::after { content: ""; display: table; clear: both; } aside.off-canvas .close--off-canvas .icon--arrow-left { margin: 0rem 0.625rem 0rem 0rem; font-size: 0.6875rem; } aside.off-canvas .link--go-main { font-size: 1rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 2.625rem; font-weight: 700; display: block; width: 100%; } aside.off-canvas .link--go-main .icon--menu { font-size: 1.25rem; margin-right: 0.625rem; float: left; } aside.off-canvas .sidebar--navigation .navigation--link { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; } aside.off-canvas .sidebar--navigation .navigation--link .is--icon-right { display: inline-block; margin-top: 0; } aside.off-canvas .sidebar--navigation .navigation--link .is--icon-left { margin: 0rem 0.625rem 0rem 0rem; float: left; } .buttons--off-canvas { display: none; } .page-wrap { -webkit-transition: left 400ms cubic-bezier(0.16, 0.04, 0.14, 1); transition: left 400ms cubic-bezier(0.16, 0.04, 0.14, 1); position: relative; left: 0; } .navigation--smartphone .navigation--entry { padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #fff; } .navigation--smartphone .navigation--link { display: block; } .navigation--smartphone .entry--close-off-canvas, #cookie-consent .cookie-consent--header { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; background-color: #00cc00; background-image: linear-gradient(to bottom, #00cc00 0%, #009033 100%); } .navigation--smartphone .entry--close-off-canvas .navigation--link, #cookie-consent .cookie-consent--header { font-size: 0.875rem; color: #969696; font-weight: 700; } .navigation--smartphone .entry--close-off-canvas .navigation--link:after { content: ""; display: table; clear: both; } .navigation--smartphone .entry--close-off-canvas .navigation--link::after { content: ""; display: table; clear: both; } .navigation--smartphone .entry--close-off-canvas .navigation--link:active { color: #646464; } .navigation--smartphone .entry--close-off-canvas .icon--arrow-right, #cookie-consent .cookie-consent--header .icon--arrow-right { margin: 0.75rem 0rem 0rem 0rem; font-size: 0.6875rem; float: right; } .navigation--headline, .sidebar--navigation { margin: 0rem 0.625rem 0rem 0.625rem; } .navigation--headline { margin: 1rem 0.625rem 0.375rem 0.625rem; line-height: 1.625rem; color: #113c62; font-weight: 700; font-size: 1em; } .sidebar--navigation { border-radius: 3px; background-clip: padding-box; background: #fff; border: 1px solid #c8c8c8; } .sidebar--navigation .navigation--entry { border-bottom: 1px solid #c8c8c8; } .sidebar--navigation .navigation--entry:last-child { border-bottom: 0 none; } .sidebar--navigation .navigation--link { color: #113c62; overflow: hidden; text-overflow: ellipsis; } aside.sidebar-main.base-sidebar { font-size: 1rem; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation { margin: 0; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry { border-bottom: 1px solid #1e567f; margin: 0; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry.has--sub-categories .sidebar--navigation { display: none; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry.is--active > .navigation--link { color: #00cc00; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry.is--active.is--home-entry { border-color: #00cc00; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry:last-child { border-bottom: none; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link { border: none; display: block; font-size: 1rem; line-height: 3.0625rem; padding: 0rem 0rem 0rem 0.9375rem; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link.is--active { color: #00cc00 !important; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link.is--active .is--icon-right i { transform: rotate(180deg); } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link:hover { color: inherit; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link:active { background-color: #009033; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link:last-child { border-bottom: none; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link .is--icon-right { font-size: 0.875rem; padding-left: 1.875rem; padding-right: 0.9375rem; position: relative; top: 0; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link .is--icon-right i { transition: transform 0.2s ease; position: relative; top: 4px; display: inline-block !important; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .navigation--link .is--icon-right:active { color: white; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation .navigation--entry .is--home-entry { display: none; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level0 .navigation--entry:last-child { border-bottom: none; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level1, aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level2 { border-top: 1px solid #00cc00; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level1 .navigation--entry, aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level2 .navigation--entry { background-color: #1e567f; border-bottom: 1px solid #113c62; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level1 .navigation--entry .navigation--link, aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level2 .navigation--entry .navigation--link { font-weight: 500; padding: 0rem 0rem 0rem 2.1875rem; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level1 .navigation--entry:last-child, aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level2 .navigation--entry:last-child { border-bottom: none; } aside.sidebar-main.base-sidebar .sidebar--categories-wrapper .sidebar--categories-navigation .sidebar--navigation.is--level2 .navigation--entry .navigation--link { font-size: 0.875rem; padding: 0rem 0rem 0rem 3.4375rem; } } .netzp-faq--entries { border-radius: 0; } .netzp-faq--entries .tab--navigation .tab--link { width: 11.25rem; padding: 0.5625rem 0rem 0.5625rem 0rem; text-align: center; background: none; background-color: #e6e6e6; border-radius: 0; } .netzp-faq--entries .tab--navigation .tab--link.is--active { background-color: white; border-bottom-color: white; } .netzp-faq--entries .tab--navigation .tab--link:hover { background-color: white; } .netzp-faq--entries .tab--navigation .tab--link.hidden { display: none; } .netzp-faq--entries .tab--container .panel { background: none; } .netzp-faq--entries .tab--container .panel .panel--body { padding: 1.875rem 0rem 0.625rem 0rem; } .netzp-faq--entries .tab--container .panel .panel--body h4 { font-size: 0.875rem; font-weight: 500; } .netzp-faq--entries .tab--container .product--description .collapse--header { margin-top: 1.25rem; background-image: none; border-radius: 0; } .netzp-faq--entries .tab--container .product--description .collapse--header.is--active { background-color: #113c62; } .netzp-faq--entries .tab--container .product--description .collapse--header.is--active .collapse--toggler:before { content: "\e915"; } .netzp-faq--entries .tab--container .product--description .collapse--header strong { font-size: 1.25rem; } .netzp-faq--entries .tab--container .product--description .collapse--header .collapse--toggler { font-family: "htk-icons"; font-size: 0.9375rem; } .netzp-faq--entries .tab--container .product--description .collapse--header .collapse--toggler:before { content: "\e912"; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert { border-radius: 0; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert .alert--icon { width: 8.5%; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert .alert--icon .icon--element { width: 9%; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert .alert--content { width: 91.5%; padding: 0.8125rem 1.25rem 0.8125rem 1.25rem; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert .alert--content p { font-size: 0.875rem !important; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert.is--success .alert--icon { background-color: #8bbad0; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert.is--success .alert--content { background-color: #e8f1f6; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert.is--info .alert--icon { background-color: #009033; } .netzp-faq--entries .tab--container .product--description .collapse--content .alert.is--info .alert--content { background-color: #fafafa; } .netzp-faq--entries .tab--content { padding-top: 3.8125rem; } .netzp-faq--entries .tab--content .buttons--off-canvas .close--off-canvas { background-color: #113c62; background-image: none; } @media screen and (max-width: 48em) { .netzp-faq--entries .tab--container .panel .panel--body { padding: 1.25rem 1.25rem 0rem 1.25rem; } .netzp-faq--entries .tab--container .panel .panel--body h4 { font-size: 0.875rem; font-weight: 500; } } @media screen and (min-width: 78.75em) { .is--ctl-netzpfaq .sidebar-main { display: none; } } .bogx--form-widget .form-header { height: 5.3125rem; background-color: #113c62; display: flex; align-items: stretch; padding-left: 6.25rem; } .bogx--form-widget .form-header .brand-logo { height: 3rem; align-self: center; } .bogx--form-widget .forms--headline { padding: 0rem 6.25rem 0rem 6.25rem; margin-top: 0.625rem; } .bogx--form-widget .forms--headline .htk-icon-envelope { font-size: 2.5rem; color: #8bbad0; display: inline-block; margin-right: 1.25rem; position: relative; top: 8px; } .bogx--form-widget .forms--headline .forms--title { font-size: 1.5rem; color: #8bbad0; display: inline-block; } .bogx--form-widget .forms--headline .forms--text { margin-top: 0.625rem; } .bogx--form-widget .forms--headline hr { margin-bottom: 1.5625rem; } .bogx--form-widget #support .forms--inner-form, .bogx--form-widget #support-bogx .forms--inner-form { padding: 0rem 0rem 0rem 6.25rem; margin-right: 4.375rem; width: 46.5625rem; float: left; } .bogx--form-widget #support .forms--inner-form .field--select, .bogx--form-widget #support-bogx .forms--inner-form .field--select { display: block; margin-bottom: 0.9375rem !important; } .bogx--form-widget #support .forms--inner-form .field--select:first-of-type, .bogx--form-widget #support-bogx .forms--inner-form .field--select:first-of-type { width: 10rem; } .bogx--form-widget #support .forms--inner-form .field--select:after, .bogx--form-widget #support-bogx .forms--inner-form .field--select:after { width: 2.5rem; font-size: 1.25rem; font-family: 'htk-icons'; content: "\e912"; } .bogx--form-widget #support .forms--inner-form .field--select.has--error, .bogx--form-widget #support-bogx .forms--inner-form .field--select.has--error { border-color: red; margin-left: 0; width: 100%; } .bogx--form-widget #support .forms--inner-form .field--select.has--error:first-of-type, .bogx--form-widget #support-bogx .forms--inner-form .field--select.has--error:first-of-type { width: 10rem; } .bogx--form-widget #support .forms--inner-form .field--select.has--error select.normal, .bogx--form-widget #support-bogx .forms--inner-form .field--select.has--error select.normal, .bogx--form-widget #support .forms--inner-form .field--select.has--error input, .bogx--form-widget #support-bogx .forms--inner-form .field--select.has--error input, .bogx--form-widget #support .forms--inner-form .field--select.has--error textarea, .bogx--form-widget #support-bogx .forms--inner-form .field--select.has--error textarea { color: red; border-color: red; width: 100%; } .bogx--form-widget #support .forms--inner-form .has--error select.normal, .bogx--form-widget #support-bogx .forms--inner-form .has--error select.normal, .bogx--form-widget #support .forms--inner-form .has--error input, .bogx--form-widget #support-bogx .forms--inner-form .has--error input, .bogx--form-widget #support .forms--inner-form .has--error textarea, .bogx--form-widget #support-bogx .forms--inner-form .has--error textarea { color: red; border-color: red; width: 100%; } .bogx--form-widget #support .forms--inner-form select.normal, .bogx--form-widget #support-bogx .forms--inner-form select.normal { color: #113c62; border-color: #c8c8c8; } .bogx--form-widget #support .forms--inner-form select.normal:focus, .bogx--form-widget #support-bogx .forms--inner-form select.normal:focus { border: 1px solid black; } .bogx--form-widget #support .forms--inner-form input, .bogx--form-widget #support-bogx .forms--inner-form input, .bogx--form-widget #support .forms--inner-form textarea, .bogx--form-widget #support-bogx .forms--inner-form textarea { border-color: #c8c8c8; margin-bottom: 0.9375rem !important; color: #113c62; } .bogx--form-widget #support .forms--inner-form input.has--error, .bogx--form-widget #support-bogx .forms--inner-form input.has--error, .bogx--form-widget #support .forms--inner-form textarea.has--error, .bogx--form-widget #support-bogx .forms--inner-form textarea.has--error { border-color: red; color: red; width: 100%; } .bogx--form-widget #support .forms--inner-form input:focus, .bogx--form-widget #support-bogx .forms--inner-form input:focus, .bogx--form-widget #support .forms--inner-form textarea:focus, .bogx--form-widget #support-bogx .forms--inner-form textarea:focus { border: 1px solid #8bbad0; } .bogx--form-widget #support .forms--inner-form .buttons, .bogx--form-widget #support-bogx .forms--inner-form .buttons { text-align: right !important; margin-bottom: 4.6875rem; } .bogx--form-widget #support .forms--inner-form .buttons .btn, .bogx--form-widget #support-bogx .forms--inner-form .buttons .btn { right: 0; position: relative; background-image: none; width: 12.5rem; font-size: 1.25rem; height: 3.75rem; } .bogx--form-widget .forms--contacts { padding-top: 5.625rem; } .bogx--form-widget .forms--contacts .form--contact { padding: 0; margin-bottom: 1.5625rem; } .bogx--form-widget .forms--contacts .form--contact .form--contact-title { font-size: 1.125rem; color: #8bbad0; font-weight: 700; margin-bottom: 0; } .bogx--form-widget .forms--contacts .form--contact .form--contact-description { line-height: 1.125rem; margin-bottom: 0; } .bogx--form-widget .forms--contacts .form--contact:first-child { margin-bottom: 1.875rem; } .bogx--form-widget .alert { margin: 0rem 6.25rem 1.875rem 6.25rem; } .js--overlay { z-index: 999999; } .js--modal { z-index: 9999999 !important; width: 69.375rem !important; box-shadow: none; -webkit-overflow-scrolling: touch; border-radius: 0; } .js--modal .btn.icon--cross.modal--close { top: 0; right: 0; font-family: 'htk-icons'; height: 5.3125rem; width: 5.3125rem; line-height: 5.3125rem; background: none; border: none; border-radius: 0; border-left: 1px solid #1e567f; color: white; font-size: 1.5rem; } .js--modal .btn.icon--cross.modal--close::before { content: "\e918"; } @media screen and (max-width: 63.9375em) { .js--modal { width: auto !important; margin: 0 15px; } .js--modal .btn.icon--cross.modal--close { border: none; padding-top: 3.125rem; color: #113c62; } .bogx--form-widget { padding-top: 3.125rem; } .bogx--form-widget .form-header { display: none; } .bogx--form-widget .forms--headline { padding: 1.875rem 1.875rem 0rem 1.875rem; } .bogx--form-widget .forms--headline hr { margin-left: 0; margin-right: 0; } .bogx--form-widget .forms--headline .htk-icon-envelope { display: none; } .bogx--form-widget .forms--headline .forms--title { font-size: 1.25rem; } .bogx--form-widget #support .forms--inner-form, .bogx--form-widget #support-bogx .forms--inner-form { padding-left: 1.875rem; padding-right: 1.875rem; float: none; width: 100%; } .bogx--form-widget #support .forms--inner-form .field--select:first-of-type, .bogx--form-widget #support-bogx .forms--inner-form .field--select:first-of-type, .bogx--form-widget #support .forms--inner-form .field--select.has--error:first-of-type, .bogx--form-widget #support-bogx .forms--inner-form .field--select.has--error:first-of-type { width: auto; } .bogx--form-widget .forms--contacts { padding: 1.875rem 1.875rem 1.875rem 1.875rem; } .bogx--form-widget #support .buttons, .bogx--form-widget #support-bogx .buttons { margin-bottom: 0; } .bogx--form-widget #support .buttons .button-primary, .bogx--form-widget #support-bogx .buttons .button-primary { width: 12.5rem; } .bogx--form-widget .alert { margin: 0rem 1.875rem 1.875rem 1.875rem; } } .faq-contact-wrapper + .custom-page--content { display: none; } .faq-page:after { content: ''; display: table; clear: both; } .faq-contact-wrapper { padding-top: 6.25rem; clear: both; } .content--custom { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 20px rgba(17, 60, 98, 0.2); padding: 3.125rem 3.125rem 3.125rem 3.125rem; margin-top: 1.25rem; } .content--custom .custom-page--tab-headline, .content--custom h2 { color: #8bbad0; margin-bottom: 1.25rem; font-weight: 700; } .content--custom form { display: inline-flex; width: 100%; padding-right: 0.3125rem; padding-left: 0.125rem; padding-bottom: 0.3125rem; } .content--custom form input, .content--custom form select, .content--custom form .filter--facet-container, .content--custom form .filter-panel { background-color: white; background-image: none; color: #113c62; border-radius: 0; box-shadow: none; display: inline-block; vertical-align: top; height: 2.625rem; width: 100%; position: relative; } .content--custom form input:focus, .content--custom form select:focus, .content--custom form .filter--facet-container:focus, .content--custom form .filter-panel:focus { color: #113c62; } .content--custom form #search { min-width: 12.5rem; width: 100%; } .content--custom form .filter-panel--flyout { border-radius: 0; position: absolute; } .content--custom form .filter--facet-container { min-width: 12rem; width: 100%; padding-top: 0; margin-left: 1rem; } .content--custom form .filter--facet-container .filter-panel--checkbox { visibility: hidden; } .content--custom form .filter--facet-container .filter-panel--content, .content--custom form .filter--facet-container .filter-panel--option-list, .content--custom form .filter--facet-container .custom-page--content ul, .content--custom form .filter--facet-container .custom-page--content ol { padding-left: 0; padding-right: 0; } .content--custom form .filter--facet-container .filter-panel--label { line-height: 2.5rem; } .content--custom form .filter--facet-container .filter-panel--option:hover, .content--custom form .filter--facet-container .filter-panel--option.is--active { background-color: #e8f1f6; } .content--custom form .btn { background-image: none; background-color: #00cc00; border-radius: 0; border: 1px solid #00cc00; padding-left: 0.9375rem; padding-right: 0.875rem; vertical-align: top; } .content--custom form .btn i { font-size: 1.25rem; position: relative; top: 0.3125rem; } .content--custom form .select-field { height: 2.5rem; } .content--custom .factsheet-table { width: 100%; } .content--custom .factsheet-table thead td { background-color: #113c62; } .content--custom .factsheet-table thead td.download { width: 13.75rem; max-width: 13.75rem; } .content--custom .factsheet-table tbody tr:nth-child(odd) { background-color: #eee; } .content--custom .factsheet-table tbody td { color: #113c62; padding-left: 0.9375rem; } .content--custom .factsheet-table tbody td img { max-width: 9.375rem; height: auto; display: inline; } .content--custom .factsheet-table tbody td .htk-icon-download { font-size: 1.75rem; color: #ffffff; background-color: #113c62; padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; margin-right: 0.3125rem; } @media screen and (min-width: 64em) { .filter-panel { width: 100%; } } @media screen and (min-width: 48em) { .content--custom form .filter-panel { width: 100%; margin-left: 1%; float: left; } } .html--content h1 { line-height: normal; } @media screen and (max-width: 47.9375em) { .content--custom { padding: 0.9375rem; } .content--custom form { display: inline-block; } .content--custom form input#search { width: calc(100% - 56px); } .content--custom form .filter--facet-container { margin-left: 0; margin-top: 0.625rem; } .content--custom .factsheet-table thead, .content--custom .factsheet-table tbody, .content--custom .factsheet-table th, .content--custom .factsheet-table td, .content--custom .factsheet-table tr { display: block; overflow: hidden; } .content--custom .factsheet-table thead tr { position: absolute; top: -9999px; left: -9999px; } .content--custom .factsheet-table tbody td { min-height: 0; position: relative; padding-left: 40%; padding-top: 0.625rem; padding-bottom: 0.625rem; border-bottom: 1px solid #113c62; } .content--custom .factsheet-table tbody td:before { content: attr(data-label) ": "; margin-top: -0.625rem; left: 0.3125rem; position: absolute; font-weight: bold; top: 50%; } .content--custom .factsheet-table tbody td img { margin: 0; } .download-images { float: left; } } .newsletter--form .panel--body { width: 100%; } .newsletter--form .select-field { height: auto !important; margin-bottom: 3px; } /* Mixins ================================================== The `mixins.less` file contains the imports to all mixin documents that simplify the work with Shopware. Mixin specific documentation can be found inside each mixin file. Mixins can be used by adding the mixin class onto an element inside Shopware. **Example:**<br/> `.border-radius(3px);` */ @media screen and (max-width: 63.9375em) { .header-main.sticky-header .container.header--navigation { z-index: 9999999; } } .testimonial-container .floating-text-area .small-image-container img { width: calc(33% - 16.666667px) !important; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--configure-button { display: none; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .btn { background-color: #e8f1f6; background-image: none; border-radius: 0; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--accept-button { background-color: #0c0; border-color: #0c0; color: #ffffff; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--accept-button:hover { background-color: #113c62; border-color: #113c62; } @media screen and (max-width: 630px) { .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--button { padding-bottom: 50px; } } @media screen and (min-width: 64em) { .page-wrap--cookie-permission .cookie-permission--container { padding-bottom: 20px; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--content { width: calc(100% - 340px); } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--button { position: absolute; top: 15px; width: 340px; } } @media screen and (min-width: 1430px) { .page-wrap--cookie-permission .cookie-permission--container { padding-bottom: 40px; } } .content.listing--content .listing--wrapper .listing--container .product--box .box--content, .content.search--content .listing--wrapper .listing--container .product--box .box--content { height: 550px; } .customHeaderLink, .customHeaderLink:hover { background: transparent; border: 0; color: #fff; height: 26px; line-height: 26px; } .customHeaderLink i { font-size: 1rem !important; } .customHeaderLink .badge { background: transparent; border: 1px solid #ffffff; color: #fff; } .product--table .table--tr.is--last-row { border-bottom: 0; } textarea, input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], #paypal-acdc-form .field { background-color: #ffffff; } .testimonial-container.has-video { overflow: hidden; } .testimonial-container .contact-box-video { height: auto; } .bogx--form-emotion .form-header, .bogx--form-emotion .forms--contacts { display: none; } .bogx--form-emotion #support .forms--inner-form { float: none; margin-right: 0; padding: 3rem 6rem; width: auto; } .privacy-information input, .privacy-information label { float: none !important; display: inline-block; width: auto !important; } .privacy-information.has--error { padding-left: 15px; } footer .privacy-information label { color: #ffffff; } .footer-main .privacy-information input { float: left !important; display: inline-block; } .footer-main .privacy-information label { float: none !important; display: inline; } .header-main .top-bar--navigation .btn { background-color: #113C62; } .product--details .product--buybox { width: 100%; } .product--details .product--buybox .price--discount-icon { display: none; } .product--details .product--buybox .price--discount-percentage { display: none; } .select-field select, .js--fancy-select select { background-image: none; } .btn { background-color: #E6E6E6; background-image: none; } .is--primary { background-color: #00CC00; background-image: none; } .is--primary:hover { background-color: #00BC00; } .product--table .basket--footer { border-top: 1px solid #c8c8c8; background: #E6E6E6; } .panel { background: #FFFFFF; } .product--box .product--price-info .price--unit { display: none; } textarea, input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], #paypal-acdc-form .field { box-shadow: none; } input[type="checkbox"], input[type="radio"] { float: left; margin-right: 5px; margin-top: 4px; } .confirm--content .product--table .panel--body { background: #FFFFFF; } .confirm--content .product--table .table--header { background: #FFFFFF; } .confirm--content .product--table .basket--footer { background: #E6E6E6; } .is--rounded { border-radius: 0; } .btn { border-radius: 0; } .confirm--content .panel { border-radius: 0; } .is--ctl-checkout .js--modal .content { border-top: 85px solid #113C62; } .is--act-shippingpayment .basket--footer { border-radius: 0; } @media screen and (max-width: 375px) { .header--navigation .customHeaderLink, .contacts .phone-number, .top-bar--navigation .account--display { display: none; } } @media screen and (min-width: 376px) and (max-width: 1023px) { .mobile-sub-header .customHeaderLink, .top-bar--navigation .account--display { display: none; } } @media screen and (max-width: 1023px) { .customHeaderLink.account--link { padding-left: 0; } .customHeaderLink.account--link i { position: static !important; } } @media screen and (min-width: 78.75em) { .steps--content .steps--spacer { width: 10%; } } .register--company .panel--title { margin-left: 0; margin-right: 0; padding-top: 0; } .register--company .panel--body { padding-left: 0; padding-right: 0; padding-top: 0; } .b2bHint { background-color: #113C62; color: #ffffff; font-size: 1.125rem; margin-bottom: 20px; padding: 10px 20px; } .product--detail-upper .product-head-infos { height: auto; } .product--details .tab-menu--product { margin-top: 140px; } .priceNet { margin: 3px 0; } .tab-menu--cross-selling .similar--content .product-slider--item .product--box.box--custom { height: 500px; } .noMargin { margin-top: 0 !important; margin-bottom: 0 !important; } .panel--body a { text-decoration: underline; } .js--modal .btn.icon--cross.modal--close { background-color: #ffffff; border-bottom: 1px solid #1e567f; } .js--modal .btn.icon--cross.modal--close:before { color: #000; } .footer-main .row3 .footerNewsletter { float: right; } .footer-main .row3 .footerNewsletter .newsletter--button .icon--mail { background-color: transparent; color: #113c62; padding-right: 0; } .panel.newsletter--form { border: 0; } .related--content .box--custom { height: 500px !important; } .related--content .product--description { display: none; } .product--details .product--tax { line-height: 1rem; margin-top: 5px; } .product--box .product--badges { top: 0; } .product--box .product--badges .badge--recommend { background-color: #113c62; border-radius: 0; } .product--detail-upper .product-head-infos .product--badge { background-color: #113c62; color: #ffffff; font-size: 0.875rem; font-weight: 700; left: 0; line-height: 1rem; padding: 0.1875rem 0.625rem 0.1875rem 0.625rem; position: absolute; text-align: center; top: 0; } #cookie-consent.off-canvas { z-index: 9999999; } .navigation--smartphone .entry--close-off-canvas .navigation--link, #cookie-consent .cookie-consent--header, #cookie-consent .cookie-consent--header { color: #ffffff; } .page-wrap--cookie-permission .cookie-permission--container { background-color: #ffffff; border-radius: 5px; } .page-wrap--cookie-permission h3 { margin-bottom: 15px; } .page-wrap--cookie-permission .cookie-permission--content a { display: inline-block !important; text-decoration: underline; } .page-wrap--cookie-permission .cookie-permission--content a:hover { text-decoration: none; } .page-wrap--cookie-permission.cookieFullScreen { background-color: rgba(0, 0, 0, 0.75); top: 0; display: flex; align-items: center; justify-content: center; } .page-wrap--cookie-permission.cookieFullScreen .cookie-permission--container { padding: 30px; max-width: 800px; } .page-wrap--cookie-permission.cookieFullScreen .cookie-permission--container .cookie-permission--extra-button { float: none; position: static !important; width: 100% !important; } .box-teaser.contact-box.hideContact { height: 19.35rem; } .box-teaser.contact-box.hideContact .top-area { height: 100%; } .showcase-carousel .showcase-image { display: none; } .showcase-carousel .showcase-image:first-child { display: block; } .s1 .faq-94, .s2 .faq-94, .s1 .faq-96, .s2 .faq-96 { display: none !important; } .s3 .faq-2, .s5 .faq-2, .s3 .faq-15, .s5 .faq-15, .s3 .faq-17, .s5 .faq-17, .s3 .faq-40, .s5 .faq-40, .s3 .faq-78, .s5 .faq-78, .s3 .faq-76, .s5 .faq-76, .s3 .faq-82, .s5 .faq-82, .s3 .faq-91, .s5 .faq-91 { display: none !important; } .s4 .faq-2, .s6 .faq-2, .s4 .faq-15, .s6 .faq-15, .s4 .faq-16, .s6 .faq-16, .s4 .faq-17, .s6 .faq-17, .s4 .faq-18, .s6 .faq-18, .s4 .faq-37, .s6 .faq-37, .s4 .faq-38, .s6 .faq-38, .s4 .faq-39, .s6 .faq-39, .s4 .faq-40, .s6 .faq-40, .s4 .faq-76, .s6 .faq-76, .s4 .faq-78, .s6 .faq-78, .s4 .faq-80, .s6 .faq-80, .s4 .faq-82, .s6 .faq-82, .s4 .faq-84, .s6 .faq-84, .s4 .faq-85, .s6 .faq-85, .s4 .faq-89, .s6 .faq-89, .s4 .faq-90, .s6 .faq-90, .s4 .faq-91, .s6 .faq-91 { display: none !important; } .s7 .faq-2, .s8 .faq-2, .s7 .faq-15, .s8 .faq-15, .s7 .faq-16, .s8 .faq-16, .s7 .faq-17, .s8 .faq-17, .s7 .faq-18, .s8 .faq-18, .s7 .faq-37, .s8 .faq-37, .s7 .faq-38, .s8 .faq-38, .s7 .faq-39, .s8 .faq-39, .s7 .faq-40, .s8 .faq-40, .s7 .faq-76, .s8 .faq-76, .s7 .faq-78, .s8 .faq-78, .s7 .faq-80, .s8 .faq-80, .s7 .faq-82, .s8 .faq-82, .s7 .faq-84, .s8 .faq-84, .s7 .faq-85, .s8 .faq-85, .s7 .faq-89, .s8 .faq-89, .s7 .faq-90, .s8 .faq-90, .s7 .faq-91, .s8 .faq-91 { display: none !important; } .s9 .faq-2, .s10 .faq-2, .s9 .faq-15, .s10 .faq-15, .s9 .faq-16, .s10 .faq-16, .s9 .faq-18, .s10 .faq-18, .s9 .faq-38, .s10 .faq-38, .s9 .faq-39, .s10 .faq-39, .s9 .faq-40, .s10 .faq-40, .s9 .faq-76, .s10 .faq-76, .s9 .faq-78, .s10 .faq-78, .s9 .faq-80, .s10 .faq-80, .s9 .faq-82, .s10 .faq-82, .s9 .faq-84, .s10 .faq-84, .s9 .faq-85, .s10 .faq-85, .s9 .faq-89, .s10 .faq-89, .s9 .faq-90, .s10 .faq-90, .s9 .faq-91, .s10 .faq-91 { display: none !important; } .popup--container { box-shadow: none; z-index: 1000000; } .popup--container .btn-close { background: #113c62; border: 0; color: #FFFFFF; top: 0; height: 40px; right: 0; text-align: center; width: 40px; } .popup--container img, .popup--container img.invert { height: auto; opacity: 1; position: static; transform: translateX(0); width: 100%; } .popup--container .popup--footer { display: none; }