.page--sw { opacity: 1; background: #fff; } .listing { box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 0;-ms-flex: 0 1 auto;flex: 0 1 auto;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -0.5rem;margin-left: -0.5rem; } /* 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:**
`.border-radius(3px);` */ /* Appearance mixin ============================================ The mixins provides you a cross-browser compatible method to set the appearance of the element. Please refer to 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 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 to see the browser support table of the feature. ######Syntax: `@param {String} radius The radius you want to set`
######Example: Same border-radius for all edges:
`.border-radius([pixel-value]);`
Different border-radius:
`.border-radius-multi([pixel-value-leftTop], [pixel-value-rightTop], [pixel-value-rightBottom], [pixel-value-leftBottom]);`
Resetting border radius:
`.reset-border-radius();` */ /* Box shadow mixin ============================================== The mixins provides you a cross-browser compatible method to set a box-shadow. Please refer to 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)`
`@param: {Number} y: Offset to the y axis (Default: 0)`
`@param: {Number} blur: Bluring radius (Default: 1px)`
`@param: {String} color: Color of the shadow (Default: #000)`
*/ /* 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 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 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();`
`.secondary-gradient();`
`.white-gradient();`
######Linear Gradient Example: `.linear-gradient([startcolor-value], [endcolor-value]);` `@param {String} start The start color of the gradient`
`@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 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 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 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
######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 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 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%)`
`@param: y: Sets the origin position on the y axis (Default: 50%)`
`@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 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)`
`@param: {String} duration: Duration of the transition including the unit (Default: 0.3s)`
`@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 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`
`@param: {String} rotateY: The rotation on the y-axis`
`@param: {String} rotateZ: The rotation on the z-axis`
*/ /* 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.
`@value` = pixel-value
`@baseValue` (optional) = default browser font-size (@remScaleFactor in most cases)
######Example Unitize mixin with custom property `.unitize(@property, @value);`
`.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.

`.unitize-height(@value)`
`.unitize-width(@value)`
`.unitize-max-height(@value)`
`.unitize-max-width(@value)`
`.unitize-min-width(@value)`
`.unitize-padding(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`
`.unitize-margin(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`
`.unitize-variable(@value)`
*/ /* User-select mixin =============================== The mixins provides you a cross-browser compatible method to set a user selection mode. Please refer to 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 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 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 to see the browser support table of the feature. ######Example: `.keyframes([name-value], [frames-value]);` `@param: {String} name: The keyframe animation name`
`@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 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 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 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();`
`.cursorGrabbing();`
*/ /* Clear form button mixin ======================== This mixin removes styles from the button element and makes it look like a text link. */ .hailofont { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .font-size--xs { font-size: 14px; line-height: 17px; } @media screen and (min-width: 1024px) { .font-size--xs { font-size: 14px; line-height: 17px; } } .font-size--s { font-size: 14px; line-height: 19px; } @media screen and (min-width: 1024px) { .font-size--s { font-size: 16px; line-height: 24px; } } .font-size--m { font-size: 20px; line-height: 30px; } @media screen and (min-width: 1024px) { .font-size--m { font-size: 26px; line-height: 36px; } } .font-size--l { font-size: 24px; line-height: 32px; } @media screen and (min-width: 1024px) { .font-size--l { font-size: 36px; line-height: 40px; /* 50px PS100121 Preisausgabe passt snost nicht am Rand der Box */ } } .font-size--xl { font-size: 35px; line-height: 40px; /* 50px PS100121 Preisausgabe passt snost nicht am Rand der Box */ } @media screen and (min-width: 1024px) { .font-size--xl { font-size: 45px; line-height: 50px; /* 55px PS100121 Preisausgabe passt snost nicht am Rand der Box */ } } /* 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%; } /* 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**
`@phoneLandscapeViewportWidth` - viewport phone-landscape width *(default: 480px)*
`@tabletViewportWidth` - viewport tablet width *(default: 768px)*
`@tabletLandscapeViewportWidth` - viewport tablet-landscape width *(default: 1024px)*
`@desktopViewportWidth` - viewport desktop width *(default: 1260px)*
*/ /* Typography ================================ The variables define the sizes and weights for typographic elements. The values can be changed with the backend theme manager. **Base configuration**
`@font-size-base` - basic font-size *(default: 14)*
`@font-base-weight` - basic font-weight *(default: 500)*
`@font-light-weight` - basic light font-weight *(default: 300)*
`@font-base-stack` - basic font-family stack *(default: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif)*
`@font-headline-stack` - basic headline font-family stack *(default: @font-base-stack)*
**Headling font sizes**
`@font-size-h1` - h1 element font-size *(default: 26)*
`@font-size-h2` - h2 element font-size *(default: 21)*
`@font-size-h3` - h3 element font-size *(default: 18)*
`@font-size-h4` - h4 element font-size *(default: 16)*
`@font-size-h5` - h5 element font-size *(default: @font-size-base)*
`@font-size-h6` - h6 element font-size *(default: 12)*
**Shopware font directory**
`@font-directory` - font-directory folder (default: "../../fonts") **Open Sans font directory**
`@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**
`@zindex-badge` - *(default: 500)*
**checkbox.less**
`@zindex-checkbox-state` - *(default: 60)*
`@zindex-checkbox-element` - *(default: 65)*
**collapse.less**
`@zindex-collapse-content` - *(default: 1000)*
`@zindex-collapse-header` - *(default: 1100)*
`@zindex-collapse-content-collapsed` - *(default: 1200)*
`@zindex-collapse-header-active` - *(default: 1300)*
**collapse-cart.less**
`@zindex-collapse-cart` - *(default: 3000)*
`@zindex-collapse-cart-offcanvas` - *(default: 8000)*
**datepicker.less**
`@zindex-datepicker` - *(default: 8100)*
**emotions.less**
`@zindex-emotion-mapping-link` - *(default: 110)*
`@zindex-emotion-image-slider-title` - *(default: 100)*
`@zindex-emotion-product-slider-content` - *(default: 400)*
`@zindex-emotion-product-slider-title` - *(default: 500)*
`@zindex-emotion-overlay` - *(default: 1000)*
`@zindex-emotion-video-element` - *(default: 1000)*
`@zindex-emotion-video-text` - *(default: 1100)*
`@zindex-emotion-video-play-btn` - *(default: 1200)*
`@zindex-emotion-video-cover` - *(default: 1300)*
**filter-panel.less**
`@zindex-filter-panel-flyout` - *(default: 500)*
`@zindex-filter-panel-flyout-collapsed` - *(default: 800)*
`@zindex-filter-panel-checkbox` - *(default: 65)*
`@zindex-filter-panel-checkbox-state` - *(default: 60)*
`@zindex-filter-panel-radio` - *(default: 65)*
`@zindex-filter-panel-radio-state` - *(default: 60)*
`@zindex-filter-panel-media-checkbox` - *(default: 65)*
`@zindex-filter-panel-rating-star` - *(default: 65)*
**image-gallery.less**
`@zindex-image-gallery-button` - *(default: 1)*
**image-slider.less**
`@zindex-image-slider` - *(default: 1000)*
`@zindex-image-slider-arrow` - *(default: 1000)*
**image-zoom.less**
`@zindex-image-zoom-flyout` - *(default: 2500)*
**loading-indicator.less**
`@zindex-loading-indicator` - *(default: 6000)*
**menu-scroller.less**
`@zindex-menu-scoller-arrow` - *(default: 750)*
**modal.less**
`@zindex-modalbox` - *(default: 7000)*
**offcanvas-menu.less**
`@zindex-offcanvas` - *(default: 8000)*
`@zindex-offcanvas-higher-viewport` - *(default: 1000)*
**overlay.less**
`@zindex-overlay` - *(default: 5000)*
**panel.less**
`@zindex-panel-arrow` - *(default: 2000)*
`@zindex-panel-link` - *(default: 2000)*
**product-slider.less**
`@zindex-product-slider` - *(default: 750)*
###Modules **cart.less**
`@zindex-cart-product-image-element` - *(default: 500)*
`@zindex-cart-premium-product-badge` - *(default: 750)*
**compare.less**
`@zindex-compare-list` - *(default: 4000)*
**configuration.less**
`@zindex-configurator-option-label` - *(default: 500)*
`@zindex-configurator-option-input` - *(default: 1000)*
**configurator.less**
`@zindex-configurator-option-label` - *(default: 500)*
`@zindex-configurator-option-input` - *(default: 1000)*
**detail.less**
`@zindex-detail-notification-field-focus` - *(default: 1)*
**footer.less**
`@zindex-footer-newsletter-field-focus` - *(default: 1)*
**header.less**
`@zindex-header-search-form` - *(default: 3000)*
`@zindex-header-search-button` - *(default: 2)*
`@zindex-header-search-results` - *(default: 3500)*
`@zindex-header-language-flag` - *(default: 900)*
`@zindex-header-service-list` - *(default: 3500)*
**listing.less**
`@zindex-listing-filter-header` - *(default: 1100)*
`@zindex-listing-filter-header-active` - *(default: 1300)*
**product-box.less**
`@zindex-product-box-image-element` - *(default: 500)*
`@zindex-product-box-product-badge` - *(default: 750)*
**sidebar.less**
`@zindex-sidebar-language-flag` - *(default: 900)*
`@zindex-sidebar-offcanvas-overlay` - *(default: 1200)*
`@zindex-sidebar-offcanvas-overlay-background` - *(default: 1100)*
`@zindex-sidebar-offcanvas-higher-viewport` - *(default: 1000)*
*/ /* 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 docs on available icons. */ /* 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:**
`.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; } } @font-face { font-family: 'shopware'; font-display: swap; src: url('../Fonts/shopware/shopware.woff') format('woff'), url('../Fonts/shopware/shopware.svg') format('truetype'), url('../Fonts/shopware/shopware.svg') format('svg'); font-weight: normal; font-style: normal; } [class^="icon--"], [class*=" icon--"] { font-family: 'shopware' !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; } .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--instagram:before { content: "\e903"; } .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"; } /* 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. ```
This is the header
This is the content
``` */ .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 #fff; max-height: auto; 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 #707070; } .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: auto; 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: auto; border: 0 none; display: block; } .js--modal.sizing--auto.is--fullscreen { height: auto !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; } } /* 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: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #d9d9d9 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 .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 { padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 2.375rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #d9d9d9 100%); } .navigation--smartphone .entry--close-off-canvas .navigation--link { font-size: 0.875rem; color: #f8f8fa; 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:active { color: #F5F5F8; } .navigation--smartphone .entry--close-off-canvas .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: #000; font-weight: 700; font-size: 1em; } .sidebar--navigation { border-radius: 3px; background-clip: padding-box; background: #fff; border: 1px solid #707070; } .sidebar--navigation .navigation--entry { border-bottom: 1px solid #707070; } .sidebar--navigation .navigation--entry:last-child { border-bottom: 0 none; } .sidebar--navigation .navigation--link { color: #58514A; 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; } } /* Filter Panel =========================================== Defines the styling of the filter panel element. The styling includes the collapsed and expanded styling and the panel component properties. ```
test test
``` */ .filter-panel { height: 2.375rem; margin-bottom: 0.625rem; border-radius: 3px; background-clip: padding-box; background-color: #fff; background-image: linear-gradient(to bottom, #fff 0%, #f8f8fa 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 #707070; } .filter-panel:hover { border: 1px solid #D5101C; background: #FFF; } .filter-panel:hover .filter-panel--icon, .filter-panel:hover .filter-panel--title { color: #D5101C; } .filter-panel.is--disabled { background-color: #fff; background-image: linear-gradient(to bottom, #fff 0%, #f8f8fa 100%); opacity: 0.5; border: 1px solid #707070; color: #58514A; } .filter-panel.is--disabled:hover { border: 1px solid #707070; color: #58514A; } .filter-panel.is--disabled:hover .filter-panel--icon, .filter-panel.is--disabled:hover .filter-panel--title { color: #58514A; } .filter-panel.is--disabled .filter-panel--title { color: #58514A; } .filter-panel.is--collapsed { height: auto; border: 0 none; } .filter-panel.is--collapsed .filter-panel--flyout { height: auto; border: 1px solid #D5101C; background: #FFF; overflow: visible; z-index: 800; } .filter-panel.is--collapsed .filter-panel--title { color: #D5101C; } .filter-panel.is--collapsed .filter-panel--icon:before { color: #D5101C; 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 #707070; } .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: #000; 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 #707070; cursor: pointer; position: relative; vertical-align: top; } .filter-panel--checkbox:hover, .filter-panel--radio:hover { border-color: #D5101C; } .filter-panel--checkbox input[type="checkbox"], .filter-panel--radio input[type="checkbox"] { opacity: 0; display: block; width: 100%; height: auto; 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: #d5101c; background-image: linear-gradient(to bottom, #d5101c 0%, #D5101C 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: 400; 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: #D5101C; 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: #e9e9f0; } .filter-panel--checkbox input[type="checkbox"]:disabled ~ .filter-panel--label, .filter-panel--radio input[type="checkbox"]:disabled ~ .filter-panel--label { color: #82776d; } .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: auto; 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: auto; 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: #d5101c; background-image: linear-gradient(to bottom, #d5101c 0%, #D5101C 100%); } .filter-panel--checkbox input[type="radio"]:checked ~ .filter-panel--label, .filter-panel--radio input[type="radio"]:checked ~ .filter-panel--label { color: #D5101C; 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: #e9e9f0; } .filter-panel--checkbox input[type="radio"]:disabled .filter-panel--label, .filter-panel--radio input[type="radio"]:disabled .filter-panel--label { color: #58514A; } .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 .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: auto; 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: #D5101C; } .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: #D5101C; } .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: #d5101c; background-image: linear-gradient(to bottom, #d5101c 0%, #D5101C 100%); border-radius: 8px; background-clip: padding-box; display: block; position: absolute; font-family: 'shopware'; font-weight: 400; 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: #D5101C; } .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: #D5101C; } .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: #707070; } .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: #dadae5; } .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: #707070; } .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 .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 .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: #D5101C; } .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: #dadae5; } .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: #58514A; } .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: #58514A; } .filter-panel--star-rating .rating-star--outer-container:hover .rating-star--suffix { color: #D5101C; } .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: #dadae5; } .filter-panel--star-rating .rating-star--outer-container:hover .is--disabled ~ .rating-star--suffix { color: #58514A; } .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 #707070; 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: #707070; } .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 { 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 #707070; color: #58514A; 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: #58514A; } .filter--active .filter--active-icon:before { content: "\e60d"; } .filter--active .icon--star { color: #D5101C; } .filter--active .icon--star-empty { color: #58514A; } .filter--active:hover, .filter--active[data-filter-param="reset"] { color: #D5101C; border-color: #D5101C; } .filter--active:hover .filter--active-icon, .filter--active[data-filter-param="reset"] .filter--active-icon { color: #D5101C; } .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; } .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: #58514A; border-color: #707070; 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: #58514A; } .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; } } /* 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: auto; 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: auto; 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 #707070; 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: #707070; } .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 #707070; 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 #707070; 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: auto; top: 0; left: 0; background: #D5101C; } .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: #58514A; 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: #58514A; } .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 #707070; } .ajax--cart .prices--container .prices--articles-amount { float: right; } .ajax--cart .prices--container .prices--articles { color: #000; 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: auto; } .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; } } /* 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. ```
``` 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: auto; 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; } /* 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 #dadae5, -1px 0 0 #dadae5, 0 1px 0 #dadae5, 0 -1px 0 #dadae5, 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(100% + 2px); } .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(3.57% - 1.5px); /*rtl:end:ignore*/ } .flatpickr-prev-month.flatpickr-next-month, .flatpickr-next-month.flatpickr-next-month { /*rtl:begin:ignore*/ right: calc(3.57% - 1.5px); /*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: 400; 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: 400; 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: #58514A; cursor: pointer; font-weight: 400; 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: #F5F5F8; border-color: #F5F5F8; } .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: #F5F5F8; border-color: #F5F5F8; } .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: #D5101C; color: #fff; border-color: #D5101C; } .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 #F5F5F8, 5px 0 0 #F5F5F8; } .flatpickr-day.inRange.endRange { box-shadow: -5px 0 0 #F5F5F8; } .flatpickr-day.inRange.startRange { box-shadow: 5px 0 0 #F5F5F8; } .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: #000; height: 27.33333333px; margin: 0; background: transparent; text-align: center; display: block; float: left; width: 14.28%; font-weight: 700; padding-top: 3.33333333px; } .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: #ffffff; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #ffffff; } .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: #58514A; 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: 400; } .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: #58514A; font-weight: 700; width: 2%; } .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 400; } .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; } } .js--modal .content, .page--sw { /* Delivery information ========================================= Defines the delivery status for products (e.g. detail page, note). The styling includes the base styling and the delivery states. ```

delivery--text-available

delivery--text-more-is-coming

delivery--text-shipping-free

delivery--text-not-available

``` */ /* 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. */ /* 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` ```
Basic panel element
Basic panel with border
``` */ /*
A header box for a panel.

Can be used by adding the `panel--header`-element and `primary` or `secondary` classes.

```
Panel header primary
Panel header secondary
Panel body
``` */ /*
A title heading for a panel.

The `panel--title` can be used as an alternative to the `panel--header` element.

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. ```

Panel title

Panel body
``` */ /*
The content body for a panel

Styling options: `is--slim`, `is--wide`, `is--flat`, `is--embossed`.

```
Panel content ...
``` */ /* ######A container for action elements ```
Action Link Action Link
``` */ /* ######A table inside a panel. ```
Column 1
Column 2
Column 3
Value 1
Value 2
Value 3
``` */ /* ######A small dot navigation for example for a slider panel. ```
``` */ /* ######A paging navigation for pagination content. ```
1 2 ...
``` */ /* 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`. ```

Success message

Info message

Warning message

Error message

``` */ /* 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` ```

1 Primary Badge

2 Secondary Badge

3 Minimal Badge

``` */ /* 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`. ``` Success! Info! Warning! Error! ``` */ /* Collapse Box ================================================ A collapse box for panels and text elements. Displays a folding box that responds if the content does not fit the element. ```
Collapse box title
This content will be shown by the is--collapsed class.
Collapse box title
Lorem ipsum dolor
Collapse box title
Lorem ipsum dolor
``` */ /* 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 */ /* 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. */ /* 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:**
`
    ` ```
    • Default list
    • is--checked
    • is--disc
    • is--arrow-right
    • is--star
    • is--cross
    • is--tag
    • is--plus
    ``` */ /* 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-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. */ /* 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. ```
    von bis
    ``` */ /* 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) ```
    Option (actual checkbox)
    Option (actual checkbox)
    Option (inside a link)
    Option (inside a link)
    ``` */ /* 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. */ /* 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.
    First Tab Second Tab
    */ /* 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. */ /* 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. */ /* 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. */ } .js--modal .content .product--delivery, .page--sw .product--delivery { font-size: 0.875rem; } .js--modal .content .product--delivery p, .page--sw .product--delivery p { margin: 0; } .js--modal .content .product--delivery .delivery--status-icon, .page--sw .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; } .js--modal .content .product--delivery .delivery--status-shipping-free, .page--sw .product--delivery .delivery--status-shipping-free { background: #4AA3DF; } .js--modal .content .product--delivery .delivery--text-shipping-free, .page--sw .product--delivery .delivery--text-shipping-free { color: #4AA3DF; } .js--modal .content .product--delivery .delivery--status-available, .page--sw .product--delivery .delivery--status-available { background: #2ECC71; } .js--modal .content .product--delivery .delivery--text-available, .page--sw .product--delivery .delivery--text-available { color: #2ECC71; } .js--modal .content .product--delivery .delivery--status-more-is-coming, .page--sw .product--delivery .delivery--status-more-is-coming { background: #F1C40F; } .js--modal .content .product--delivery .delivery--text-more-is-coming, .page--sw .product--delivery .delivery--text-more-is-coming { color: #F1C40F; } .js--modal .content .product--delivery .delivery--status-not-available, .page--sw .product--delivery .delivery--status-not-available { background: #E74C3C; } .js--modal .content .product--delivery .delivery--text-not-available, .page--sw .product--delivery .delivery--text-not-available { color: #E74C3C; } .js--modal .content .product--delivery .delivery--text, .page--sw .product--delivery .delivery--text { margin: 0; display: inline-block; } .js--modal .content .content-main.is--fullscreen, .page--sw .content-main.is--fullscreen { box-shadow: none; max-width: none; padding: 0; margin: 0; } .js--modal .content .content-main.is--fullscreen .content, .page--sw .content-main.is--fullscreen .content, .js--modal .content .content-main.is--fullscreen .content-main--inner, .page--sw .content-main.is--fullscreen .content-main--inner { padding: 0; margin: 0 auto; } .js--modal .content .content-main.is--fullscreen .content--breadcrumb, .page--sw .content-main.is--fullscreen .content--breadcrumb, .js--modal .content .content-main.is--fullscreen .tagcloud--content, .page--sw .content-main.is--fullscreen .tagcloud--content, .js--modal .content .content-main.is--fullscreen .last-seen-products, .page--sw .content-main.is--fullscreen .last-seen-products { display: none; } .js--modal .content .content-main.is--fullscreen .listing--wrapper, .page--sw .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) { .js--modal .content .content-main.is--fullscreen .listing--wrapper, .page--sw .content-main.is--fullscreen .listing--wrapper { padding: 1.25rem 1.875rem 1.25rem 1.875rem; } } @media screen and (min-width: 78.75em) { .js--modal .content .content-main.is--fullscreen .listing--wrapper, .page--sw .content-main.is--fullscreen .listing--wrapper { padding: 1.25rem 0rem 1.25rem 0rem; } } .js--modal .content .emotion--overlay, .page--sw .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; } .js--modal .content .emotion--overlay .emotion--loading-indicator, .page--sw .emotion--overlay .emotion--loading-indicator { padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .js--modal .content .emotion--overlay ~ .content-main, .page--sw .emotion--overlay ~ .content-main { min-height: 125rem; visibility: hidden; } .js--modal .content .emotion--loading-indicator, .page--sw .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; } .js--modal .content .emotion--loading-indicator:before, .page--sw .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: auto; box-sizing: border-box; display: block; content: ""; border-width: 2px; border-style: solid; border-color: #333 #CCC #CCC #CCC; } .js--modal .content .content--emotions, .page--sw .content--emotions { display: block; } .js--modal .content body.emotion--preview, .page--sw body.emotion--preview { background: #ffffff; } .js--modal .content body.emotion--preview .content-main, .page--sw body.emotion--preview .content-main { box-shadow: none; margin: 0; } .js--modal .content .emotion--show-listing, .page--sw .emotion--show-listing { margin: 1.25rem 0rem 1.25rem 0rem; } .js--modal .content .emotion--wrapper, .page--sw .emotion--wrapper { display: block; margin: 0 auto; max-width: 1160px; overflow: hidden; } .js--modal .content .emotion--wrapper.is--fullscreen, .page--sw .emotion--wrapper.is--fullscreen { max-width: none; } .js--modal .content .emotion--container, .page--sw .emotion--container { display: block; position: relative; top: 0; left: 0; background: #fff; } .js--modal .content .emotion--container:after, .page--sw .emotion--container:after { content: ""; display: table; clear: both; } .js--modal .content .emotion--container.emotion--mode-resize, .page--sw .emotion--container.emotion--mode-resize { -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; } .js--modal .content .emotion--container.emotion--mode-rows .emotion--sizer, .page--sw .emotion--container.emotion--mode-rows .emotion--sizer, .js--modal .content .emotion--container.emotion--mode-rows .emotion--sizer-xs, .page--sw .emotion--container.emotion--mode-rows .emotion--sizer-xs, .js--modal .content .emotion--container.emotion--mode-rows .emotion--sizer-s, .page--sw .emotion--container.emotion--mode-rows .emotion--sizer-s, .js--modal .content .emotion--container.emotion--mode-rows .emotion--sizer-m, .page--sw .emotion--container.emotion--mode-rows .emotion--sizer-m, .js--modal .content .emotion--container.emotion--mode-rows .emotion--sizer-l, .page--sw .emotion--container.emotion--mode-rows .emotion--sizer-l, .js--modal .content .emotion--container.emotion--mode-rows .emotion--sizer-xl, .page--sw .emotion--container.emotion--mode-rows .emotion--sizer-xl { display: none; } .js--modal .content .emotion--container.emotion--mode-rows .emotion--row:after, .page--sw .emotion--container.emotion--mode-rows .emotion--row:after { content: ""; display: table; clear: both; } .js--modal .content .emotion--container.emotion--column-1 .col-1, .page--sw .emotion--container.emotion--column-1 .col-1 { width: 100%; } .js--modal .content .emotion--container.emotion--column-1 .start-col-1, .page--sw .emotion--container.emotion--column-1 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-1 .col-xs-1, .page--sw .emotion--container.emotion--column-1 .col-xs-1 { width: 100%; } .js--modal .content .emotion--container.emotion--column-1 .start-col-xs-1, .page--sw .emotion--container.emotion--column-1 .start-col-xs-1 { left: 0%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-1 .col-s-1, .page--sw .emotion--container.emotion--column-1 .col-s-1 { width: 100%; } .js--modal .content .emotion--container.emotion--column-1 .start-col-s-1, .page--sw .emotion--container.emotion--column-1 .start-col-s-1 { left: 0%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-1 .col-m-1, .page--sw .emotion--container.emotion--column-1 .col-m-1 { width: 100%; } .js--modal .content .emotion--container.emotion--column-1 .start-col-m-1, .page--sw .emotion--container.emotion--column-1 .start-col-m-1 { left: 0%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-1 .col-l-1, .page--sw .emotion--container.emotion--column-1 .col-l-1 { width: 100%; } .js--modal .content .emotion--container.emotion--column-1 .start-col-l-1, .page--sw .emotion--container.emotion--column-1 .start-col-l-1 { left: 0%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-1 .col-xl-1, .page--sw .emotion--container.emotion--column-1 .col-xl-1 { width: 100%; } .js--modal .content .emotion--container.emotion--column-1 .start-col-xl-1, .page--sw .emotion--container.emotion--column-1 .start-col-xl-1 { left: 0%; } } .js--modal .content .emotion--container.emotion--column-2 .col-1, .page--sw .emotion--container.emotion--column-2 .col-1 { width: 50%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-1, .page--sw .emotion--container.emotion--column-2 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-2 .col-2, .page--sw .emotion--container.emotion--column-2 .col-2 { width: 100%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-2, .page--sw .emotion--container.emotion--column-2 .start-col-2 { left: 50%; } .js--modal .content .emotion--container.emotion--column-2 .col-xs-1, .page--sw .emotion--container.emotion--column-2 .col-xs-1 { width: 50%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-xs-1, .page--sw .emotion--container.emotion--column-2 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-2 .col-xs-2, .page--sw .emotion--container.emotion--column-2 .col-xs-2 { width: 100%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-xs-2, .page--sw .emotion--container.emotion--column-2 .start-col-xs-2 { left: 50%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-2 .col-s-1, .page--sw .emotion--container.emotion--column-2 .col-s-1 { width: 50%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-s-1, .page--sw .emotion--container.emotion--column-2 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-2 .col-s-2, .page--sw .emotion--container.emotion--column-2 .col-s-2 { width: 100%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-s-2, .page--sw .emotion--container.emotion--column-2 .start-col-s-2 { left: 50%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-2 .col-m-1, .page--sw .emotion--container.emotion--column-2 .col-m-1 { width: 50%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-m-1, .page--sw .emotion--container.emotion--column-2 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-2 .col-m-2, .page--sw .emotion--container.emotion--column-2 .col-m-2 { width: 100%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-m-2, .page--sw .emotion--container.emotion--column-2 .start-col-m-2 { left: 50%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-2 .col-l-1, .page--sw .emotion--container.emotion--column-2 .col-l-1 { width: 50%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-l-1, .page--sw .emotion--container.emotion--column-2 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-2 .col-l-2, .page--sw .emotion--container.emotion--column-2 .col-l-2 { width: 100%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-l-2, .page--sw .emotion--container.emotion--column-2 .start-col-l-2 { left: 50%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-2 .col-xl-1, .page--sw .emotion--container.emotion--column-2 .col-xl-1 { width: 50%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-xl-1, .page--sw .emotion--container.emotion--column-2 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-2 .col-xl-2, .page--sw .emotion--container.emotion--column-2 .col-xl-2 { width: 100%; } .js--modal .content .emotion--container.emotion--column-2 .start-col-xl-2, .page--sw .emotion--container.emotion--column-2 .start-col-xl-2 { left: 50%; } } .js--modal .content .emotion--container.emotion--column-3 .col-1, .page--sw .emotion--container.emotion--column-3 .col-1 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-1, .page--sw .emotion--container.emotion--column-3 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-3 .col-2, .page--sw .emotion--container.emotion--column-3 .col-2 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-2, .page--sw .emotion--container.emotion--column-3 .start-col-2 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .col-3, .page--sw .emotion--container.emotion--column-3 .col-3 { width: 100%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-3, .page--sw .emotion--container.emotion--column-3 .start-col-3 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-3 .col-xs-1, .page--sw .emotion--container.emotion--column-3 .col-xs-1 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-xs-1, .page--sw .emotion--container.emotion--column-3 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-3 .col-xs-2, .page--sw .emotion--container.emotion--column-3 .col-xs-2 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-xs-2, .page--sw .emotion--container.emotion--column-3 .start-col-xs-2 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .col-xs-3, .page--sw .emotion--container.emotion--column-3 .col-xs-3 { width: 100%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-xs-3, .page--sw .emotion--container.emotion--column-3 .start-col-xs-3 { left: 66.66666667%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-3 .col-s-1, .page--sw .emotion--container.emotion--column-3 .col-s-1 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-s-1, .page--sw .emotion--container.emotion--column-3 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-3 .col-s-2, .page--sw .emotion--container.emotion--column-3 .col-s-2 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-s-2, .page--sw .emotion--container.emotion--column-3 .start-col-s-2 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .col-s-3, .page--sw .emotion--container.emotion--column-3 .col-s-3 { width: 100%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-s-3, .page--sw .emotion--container.emotion--column-3 .start-col-s-3 { left: 66.66666667%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-3 .col-m-1, .page--sw .emotion--container.emotion--column-3 .col-m-1 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-m-1, .page--sw .emotion--container.emotion--column-3 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-3 .col-m-2, .page--sw .emotion--container.emotion--column-3 .col-m-2 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-m-2, .page--sw .emotion--container.emotion--column-3 .start-col-m-2 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .col-m-3, .page--sw .emotion--container.emotion--column-3 .col-m-3 { width: 100%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-m-3, .page--sw .emotion--container.emotion--column-3 .start-col-m-3 { left: 66.66666667%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-3 .col-l-1, .page--sw .emotion--container.emotion--column-3 .col-l-1 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-l-1, .page--sw .emotion--container.emotion--column-3 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-3 .col-l-2, .page--sw .emotion--container.emotion--column-3 .col-l-2 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-l-2, .page--sw .emotion--container.emotion--column-3 .start-col-l-2 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .col-l-3, .page--sw .emotion--container.emotion--column-3 .col-l-3 { width: 100%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-l-3, .page--sw .emotion--container.emotion--column-3 .start-col-l-3 { left: 66.66666667%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-3 .col-xl-1, .page--sw .emotion--container.emotion--column-3 .col-xl-1 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-xl-1, .page--sw .emotion--container.emotion--column-3 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-3 .col-xl-2, .page--sw .emotion--container.emotion--column-3 .col-xl-2 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-xl-2, .page--sw .emotion--container.emotion--column-3 .start-col-xl-2 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-3 .col-xl-3, .page--sw .emotion--container.emotion--column-3 .col-xl-3 { width: 100%; } .js--modal .content .emotion--container.emotion--column-3 .start-col-xl-3, .page--sw .emotion--container.emotion--column-3 .start-col-xl-3 { left: 66.66666667%; } } .js--modal .content .emotion--container.emotion--column-4 .col-1, .page--sw .emotion--container.emotion--column-4 .col-1 { width: 25%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-1, .page--sw .emotion--container.emotion--column-4 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-4 .col-2, .page--sw .emotion--container.emotion--column-4 .col-2 { width: 50%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-2, .page--sw .emotion--container.emotion--column-4 .start-col-2 { left: 25%; } .js--modal .content .emotion--container.emotion--column-4 .col-3, .page--sw .emotion--container.emotion--column-4 .col-3 { width: 75%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-3, .page--sw .emotion--container.emotion--column-4 .start-col-3 { left: 50%; } .js--modal .content .emotion--container.emotion--column-4 .col-4, .page--sw .emotion--container.emotion--column-4 .col-4 { width: 100%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-4, .page--sw .emotion--container.emotion--column-4 .start-col-4 { left: 75%; } .js--modal .content .emotion--container.emotion--column-4 .col-xs-1, .page--sw .emotion--container.emotion--column-4 .col-xs-1 { width: 25%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-xs-1, .page--sw .emotion--container.emotion--column-4 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-4 .col-xs-2, .page--sw .emotion--container.emotion--column-4 .col-xs-2 { width: 50%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-xs-2, .page--sw .emotion--container.emotion--column-4 .start-col-xs-2 { left: 25%; } .js--modal .content .emotion--container.emotion--column-4 .col-xs-3, .page--sw .emotion--container.emotion--column-4 .col-xs-3 { width: 75%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-xs-3, .page--sw .emotion--container.emotion--column-4 .start-col-xs-3 { left: 50%; } .js--modal .content .emotion--container.emotion--column-4 .col-xs-4, .page--sw .emotion--container.emotion--column-4 .col-xs-4 { width: 100%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-xs-4, .page--sw .emotion--container.emotion--column-4 .start-col-xs-4 { left: 75%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-4 .col-s-1, .page--sw .emotion--container.emotion--column-4 .col-s-1 { width: 25%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-s-1, .page--sw .emotion--container.emotion--column-4 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-4 .col-s-2, .page--sw .emotion--container.emotion--column-4 .col-s-2 { width: 50%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-s-2, .page--sw .emotion--container.emotion--column-4 .start-col-s-2 { left: 25%; } .js--modal .content .emotion--container.emotion--column-4 .col-s-3, .page--sw .emotion--container.emotion--column-4 .col-s-3 { width: 75%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-s-3, .page--sw .emotion--container.emotion--column-4 .start-col-s-3 { left: 50%; } .js--modal .content .emotion--container.emotion--column-4 .col-s-4, .page--sw .emotion--container.emotion--column-4 .col-s-4 { width: 100%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-s-4, .page--sw .emotion--container.emotion--column-4 .start-col-s-4 { left: 75%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-4 .col-m-1, .page--sw .emotion--container.emotion--column-4 .col-m-1 { width: 25%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-m-1, .page--sw .emotion--container.emotion--column-4 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-4 .col-m-2, .page--sw .emotion--container.emotion--column-4 .col-m-2 { width: 50%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-m-2, .page--sw .emotion--container.emotion--column-4 .start-col-m-2 { left: 25%; } .js--modal .content .emotion--container.emotion--column-4 .col-m-3, .page--sw .emotion--container.emotion--column-4 .col-m-3 { width: 75%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-m-3, .page--sw .emotion--container.emotion--column-4 .start-col-m-3 { left: 50%; } .js--modal .content .emotion--container.emotion--column-4 .col-m-4, .page--sw .emotion--container.emotion--column-4 .col-m-4 { width: 100%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-m-4, .page--sw .emotion--container.emotion--column-4 .start-col-m-4 { left: 75%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-4 .col-l-1, .page--sw .emotion--container.emotion--column-4 .col-l-1 { width: 25%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-l-1, .page--sw .emotion--container.emotion--column-4 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-4 .col-l-2, .page--sw .emotion--container.emotion--column-4 .col-l-2 { width: 50%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-l-2, .page--sw .emotion--container.emotion--column-4 .start-col-l-2 { left: 25%; } .js--modal .content .emotion--container.emotion--column-4 .col-l-3, .page--sw .emotion--container.emotion--column-4 .col-l-3 { width: 75%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-l-3, .page--sw .emotion--container.emotion--column-4 .start-col-l-3 { left: 50%; } .js--modal .content .emotion--container.emotion--column-4 .col-l-4, .page--sw .emotion--container.emotion--column-4 .col-l-4 { width: 100%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-l-4, .page--sw .emotion--container.emotion--column-4 .start-col-l-4 { left: 75%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-4 .col-xl-1, .page--sw .emotion--container.emotion--column-4 .col-xl-1 { width: 25%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-xl-1, .page--sw .emotion--container.emotion--column-4 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-4 .col-xl-2, .page--sw .emotion--container.emotion--column-4 .col-xl-2 { width: 50%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-xl-2, .page--sw .emotion--container.emotion--column-4 .start-col-xl-2 { left: 25%; } .js--modal .content .emotion--container.emotion--column-4 .col-xl-3, .page--sw .emotion--container.emotion--column-4 .col-xl-3 { width: 75%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-xl-3, .page--sw .emotion--container.emotion--column-4 .start-col-xl-3 { left: 50%; } .js--modal .content .emotion--container.emotion--column-4 .col-xl-4, .page--sw .emotion--container.emotion--column-4 .col-xl-4 { width: 100%; } .js--modal .content .emotion--container.emotion--column-4 .start-col-xl-4, .page--sw .emotion--container.emotion--column-4 .start-col-xl-4 { left: 75%; } } .js--modal .content .emotion--container.emotion--column-5 .col-1, .page--sw .emotion--container.emotion--column-5 .col-1 { width: 20%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-1, .page--sw .emotion--container.emotion--column-5 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-5 .col-2, .page--sw .emotion--container.emotion--column-5 .col-2 { width: 40%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-2, .page--sw .emotion--container.emotion--column-5 .start-col-2 { left: 20%; } .js--modal .content .emotion--container.emotion--column-5 .col-3, .page--sw .emotion--container.emotion--column-5 .col-3 { width: 60%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-3, .page--sw .emotion--container.emotion--column-5 .start-col-3 { left: 40%; } .js--modal .content .emotion--container.emotion--column-5 .col-4, .page--sw .emotion--container.emotion--column-5 .col-4 { width: 80%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-4, .page--sw .emotion--container.emotion--column-5 .start-col-4 { left: 60%; } .js--modal .content .emotion--container.emotion--column-5 .col-5, .page--sw .emotion--container.emotion--column-5 .col-5 { width: 100%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-5, .page--sw .emotion--container.emotion--column-5 .start-col-5 { left: 80%; } .js--modal .content .emotion--container.emotion--column-5 .col-xs-1, .page--sw .emotion--container.emotion--column-5 .col-xs-1 { width: 20%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xs-1, .page--sw .emotion--container.emotion--column-5 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-5 .col-xs-2, .page--sw .emotion--container.emotion--column-5 .col-xs-2 { width: 40%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xs-2, .page--sw .emotion--container.emotion--column-5 .start-col-xs-2 { left: 20%; } .js--modal .content .emotion--container.emotion--column-5 .col-xs-3, .page--sw .emotion--container.emotion--column-5 .col-xs-3 { width: 60%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xs-3, .page--sw .emotion--container.emotion--column-5 .start-col-xs-3 { left: 40%; } .js--modal .content .emotion--container.emotion--column-5 .col-xs-4, .page--sw .emotion--container.emotion--column-5 .col-xs-4 { width: 80%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xs-4, .page--sw .emotion--container.emotion--column-5 .start-col-xs-4 { left: 60%; } .js--modal .content .emotion--container.emotion--column-5 .col-xs-5, .page--sw .emotion--container.emotion--column-5 .col-xs-5 { width: 100%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xs-5, .page--sw .emotion--container.emotion--column-5 .start-col-xs-5 { left: 80%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-5 .col-s-1, .page--sw .emotion--container.emotion--column-5 .col-s-1 { width: 20%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-s-1, .page--sw .emotion--container.emotion--column-5 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-5 .col-s-2, .page--sw .emotion--container.emotion--column-5 .col-s-2 { width: 40%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-s-2, .page--sw .emotion--container.emotion--column-5 .start-col-s-2 { left: 20%; } .js--modal .content .emotion--container.emotion--column-5 .col-s-3, .page--sw .emotion--container.emotion--column-5 .col-s-3 { width: 60%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-s-3, .page--sw .emotion--container.emotion--column-5 .start-col-s-3 { left: 40%; } .js--modal .content .emotion--container.emotion--column-5 .col-s-4, .page--sw .emotion--container.emotion--column-5 .col-s-4 { width: 80%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-s-4, .page--sw .emotion--container.emotion--column-5 .start-col-s-4 { left: 60%; } .js--modal .content .emotion--container.emotion--column-5 .col-s-5, .page--sw .emotion--container.emotion--column-5 .col-s-5 { width: 100%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-s-5, .page--sw .emotion--container.emotion--column-5 .start-col-s-5 { left: 80%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-5 .col-m-1, .page--sw .emotion--container.emotion--column-5 .col-m-1 { width: 20%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-m-1, .page--sw .emotion--container.emotion--column-5 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-5 .col-m-2, .page--sw .emotion--container.emotion--column-5 .col-m-2 { width: 40%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-m-2, .page--sw .emotion--container.emotion--column-5 .start-col-m-2 { left: 20%; } .js--modal .content .emotion--container.emotion--column-5 .col-m-3, .page--sw .emotion--container.emotion--column-5 .col-m-3 { width: 60%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-m-3, .page--sw .emotion--container.emotion--column-5 .start-col-m-3 { left: 40%; } .js--modal .content .emotion--container.emotion--column-5 .col-m-4, .page--sw .emotion--container.emotion--column-5 .col-m-4 { width: 80%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-m-4, .page--sw .emotion--container.emotion--column-5 .start-col-m-4 { left: 60%; } .js--modal .content .emotion--container.emotion--column-5 .col-m-5, .page--sw .emotion--container.emotion--column-5 .col-m-5 { width: 100%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-m-5, .page--sw .emotion--container.emotion--column-5 .start-col-m-5 { left: 80%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-5 .col-l-1, .page--sw .emotion--container.emotion--column-5 .col-l-1 { width: 20%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-l-1, .page--sw .emotion--container.emotion--column-5 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-5 .col-l-2, .page--sw .emotion--container.emotion--column-5 .col-l-2 { width: 40%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-l-2, .page--sw .emotion--container.emotion--column-5 .start-col-l-2 { left: 20%; } .js--modal .content .emotion--container.emotion--column-5 .col-l-3, .page--sw .emotion--container.emotion--column-5 .col-l-3 { width: 60%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-l-3, .page--sw .emotion--container.emotion--column-5 .start-col-l-3 { left: 40%; } .js--modal .content .emotion--container.emotion--column-5 .col-l-4, .page--sw .emotion--container.emotion--column-5 .col-l-4 { width: 80%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-l-4, .page--sw .emotion--container.emotion--column-5 .start-col-l-4 { left: 60%; } .js--modal .content .emotion--container.emotion--column-5 .col-l-5, .page--sw .emotion--container.emotion--column-5 .col-l-5 { width: 100%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-l-5, .page--sw .emotion--container.emotion--column-5 .start-col-l-5 { left: 80%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-5 .col-xl-1, .page--sw .emotion--container.emotion--column-5 .col-xl-1 { width: 20%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xl-1, .page--sw .emotion--container.emotion--column-5 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-5 .col-xl-2, .page--sw .emotion--container.emotion--column-5 .col-xl-2 { width: 40%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xl-2, .page--sw .emotion--container.emotion--column-5 .start-col-xl-2 { left: 20%; } .js--modal .content .emotion--container.emotion--column-5 .col-xl-3, .page--sw .emotion--container.emotion--column-5 .col-xl-3 { width: 60%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xl-3, .page--sw .emotion--container.emotion--column-5 .start-col-xl-3 { left: 40%; } .js--modal .content .emotion--container.emotion--column-5 .col-xl-4, .page--sw .emotion--container.emotion--column-5 .col-xl-4 { width: 80%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xl-4, .page--sw .emotion--container.emotion--column-5 .start-col-xl-4 { left: 60%; } .js--modal .content .emotion--container.emotion--column-5 .col-xl-5, .page--sw .emotion--container.emotion--column-5 .col-xl-5 { width: 100%; } .js--modal .content .emotion--container.emotion--column-5 .start-col-xl-5, .page--sw .emotion--container.emotion--column-5 .start-col-xl-5 { left: 80%; } } .js--modal .content .emotion--container.emotion--column-6 .col-1, .page--sw .emotion--container.emotion--column-6 .col-1 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-1, .page--sw .emotion--container.emotion--column-6 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-6 .col-2, .page--sw .emotion--container.emotion--column-6 .col-2 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-2, .page--sw .emotion--container.emotion--column-6 .start-col-2 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-3, .page--sw .emotion--container.emotion--column-6 .col-3 { width: 50%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-3, .page--sw .emotion--container.emotion--column-6 .start-col-3 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .col-4, .page--sw .emotion--container.emotion--column-6 .col-4 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-4, .page--sw .emotion--container.emotion--column-6 .start-col-4 { left: 50%; } .js--modal .content .emotion--container.emotion--column-6 .col-5, .page--sw .emotion--container.emotion--column-6 .col-5 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-5, .page--sw .emotion--container.emotion--column-6 .start-col-5 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-6, .page--sw .emotion--container.emotion--column-6 .col-6 { width: 100%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-6, .page--sw .emotion--container.emotion--column-6 .start-col-6 { left: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .col-xs-1, .page--sw .emotion--container.emotion--column-6 .col-xs-1 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xs-1, .page--sw .emotion--container.emotion--column-6 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-6 .col-xs-2, .page--sw .emotion--container.emotion--column-6 .col-xs-2 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xs-2, .page--sw .emotion--container.emotion--column-6 .start-col-xs-2 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-xs-3, .page--sw .emotion--container.emotion--column-6 .col-xs-3 { width: 50%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xs-3, .page--sw .emotion--container.emotion--column-6 .start-col-xs-3 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .col-xs-4, .page--sw .emotion--container.emotion--column-6 .col-xs-4 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xs-4, .page--sw .emotion--container.emotion--column-6 .start-col-xs-4 { left: 50%; } .js--modal .content .emotion--container.emotion--column-6 .col-xs-5, .page--sw .emotion--container.emotion--column-6 .col-xs-5 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xs-5, .page--sw .emotion--container.emotion--column-6 .start-col-xs-5 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-xs-6, .page--sw .emotion--container.emotion--column-6 .col-xs-6 { width: 100%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xs-6, .page--sw .emotion--container.emotion--column-6 .start-col-xs-6 { left: 83.33333333%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-6 .col-s-1, .page--sw .emotion--container.emotion--column-6 .col-s-1 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-s-1, .page--sw .emotion--container.emotion--column-6 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-6 .col-s-2, .page--sw .emotion--container.emotion--column-6 .col-s-2 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-s-2, .page--sw .emotion--container.emotion--column-6 .start-col-s-2 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-s-3, .page--sw .emotion--container.emotion--column-6 .col-s-3 { width: 50%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-s-3, .page--sw .emotion--container.emotion--column-6 .start-col-s-3 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .col-s-4, .page--sw .emotion--container.emotion--column-6 .col-s-4 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-s-4, .page--sw .emotion--container.emotion--column-6 .start-col-s-4 { left: 50%; } .js--modal .content .emotion--container.emotion--column-6 .col-s-5, .page--sw .emotion--container.emotion--column-6 .col-s-5 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-s-5, .page--sw .emotion--container.emotion--column-6 .start-col-s-5 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-s-6, .page--sw .emotion--container.emotion--column-6 .col-s-6 { width: 100%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-s-6, .page--sw .emotion--container.emotion--column-6 .start-col-s-6 { left: 83.33333333%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-6 .col-m-1, .page--sw .emotion--container.emotion--column-6 .col-m-1 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-m-1, .page--sw .emotion--container.emotion--column-6 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-6 .col-m-2, .page--sw .emotion--container.emotion--column-6 .col-m-2 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-m-2, .page--sw .emotion--container.emotion--column-6 .start-col-m-2 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-m-3, .page--sw .emotion--container.emotion--column-6 .col-m-3 { width: 50%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-m-3, .page--sw .emotion--container.emotion--column-6 .start-col-m-3 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .col-m-4, .page--sw .emotion--container.emotion--column-6 .col-m-4 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-m-4, .page--sw .emotion--container.emotion--column-6 .start-col-m-4 { left: 50%; } .js--modal .content .emotion--container.emotion--column-6 .col-m-5, .page--sw .emotion--container.emotion--column-6 .col-m-5 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-m-5, .page--sw .emotion--container.emotion--column-6 .start-col-m-5 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-m-6, .page--sw .emotion--container.emotion--column-6 .col-m-6 { width: 100%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-m-6, .page--sw .emotion--container.emotion--column-6 .start-col-m-6 { left: 83.33333333%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-6 .col-l-1, .page--sw .emotion--container.emotion--column-6 .col-l-1 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-l-1, .page--sw .emotion--container.emotion--column-6 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-6 .col-l-2, .page--sw .emotion--container.emotion--column-6 .col-l-2 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-l-2, .page--sw .emotion--container.emotion--column-6 .start-col-l-2 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-l-3, .page--sw .emotion--container.emotion--column-6 .col-l-3 { width: 50%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-l-3, .page--sw .emotion--container.emotion--column-6 .start-col-l-3 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .col-l-4, .page--sw .emotion--container.emotion--column-6 .col-l-4 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-l-4, .page--sw .emotion--container.emotion--column-6 .start-col-l-4 { left: 50%; } .js--modal .content .emotion--container.emotion--column-6 .col-l-5, .page--sw .emotion--container.emotion--column-6 .col-l-5 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-l-5, .page--sw .emotion--container.emotion--column-6 .start-col-l-5 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-l-6, .page--sw .emotion--container.emotion--column-6 .col-l-6 { width: 100%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-l-6, .page--sw .emotion--container.emotion--column-6 .start-col-l-6 { left: 83.33333333%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-6 .col-xl-1, .page--sw .emotion--container.emotion--column-6 .col-xl-1 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xl-1, .page--sw .emotion--container.emotion--column-6 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-6 .col-xl-2, .page--sw .emotion--container.emotion--column-6 .col-xl-2 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xl-2, .page--sw .emotion--container.emotion--column-6 .start-col-xl-2 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-xl-3, .page--sw .emotion--container.emotion--column-6 .col-xl-3 { width: 50%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xl-3, .page--sw .emotion--container.emotion--column-6 .start-col-xl-3 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .col-xl-4, .page--sw .emotion--container.emotion--column-6 .col-xl-4 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xl-4, .page--sw .emotion--container.emotion--column-6 .start-col-xl-4 { left: 50%; } .js--modal .content .emotion--container.emotion--column-6 .col-xl-5, .page--sw .emotion--container.emotion--column-6 .col-xl-5 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xl-5, .page--sw .emotion--container.emotion--column-6 .start-col-xl-5 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-6 .col-xl-6, .page--sw .emotion--container.emotion--column-6 .col-xl-6 { width: 100%; } .js--modal .content .emotion--container.emotion--column-6 .start-col-xl-6, .page--sw .emotion--container.emotion--column-6 .start-col-xl-6 { left: 83.33333333%; } } .js--modal .content .emotion--container.emotion--column-7 .col-1, .page--sw .emotion--container.emotion--column-7 .col-1 { width: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-1, .page--sw .emotion--container.emotion--column-7 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-7 .col-2, .page--sw .emotion--container.emotion--column-7 .col-2 { width: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-2, .page--sw .emotion--container.emotion--column-7 .start-col-2 { left: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .col-3, .page--sw .emotion--container.emotion--column-7 .col-3 { width: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-3, .page--sw .emotion--container.emotion--column-7 .start-col-3 { left: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .col-4, .page--sw .emotion--container.emotion--column-7 .col-4 { width: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-4, .page--sw .emotion--container.emotion--column-7 .start-col-4 { left: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .col-5, .page--sw .emotion--container.emotion--column-7 .col-5 { width: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-5, .page--sw .emotion--container.emotion--column-7 .start-col-5 { left: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .col-6, .page--sw .emotion--container.emotion--column-7 .col-6 { width: 85.71428571%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-6, .page--sw .emotion--container.emotion--column-7 .start-col-6 { left: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .col-7, .page--sw .emotion--container.emotion--column-7 .col-7 { width: 100%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-7, .page--sw .emotion--container.emotion--column-7 .start-col-7 { left: 85.71428571%; } .js--modal .content .emotion--container.emotion--column-7 .col-xs-1, .page--sw .emotion--container.emotion--column-7 .col-xs-1 { width: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xs-1, .page--sw .emotion--container.emotion--column-7 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-7 .col-xs-2, .page--sw .emotion--container.emotion--column-7 .col-xs-2 { width: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xs-2, .page--sw .emotion--container.emotion--column-7 .start-col-xs-2 { left: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .col-xs-3, .page--sw .emotion--container.emotion--column-7 .col-xs-3 { width: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xs-3, .page--sw .emotion--container.emotion--column-7 .start-col-xs-3 { left: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .col-xs-4, .page--sw .emotion--container.emotion--column-7 .col-xs-4 { width: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xs-4, .page--sw .emotion--container.emotion--column-7 .start-col-xs-4 { left: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .col-xs-5, .page--sw .emotion--container.emotion--column-7 .col-xs-5 { width: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xs-5, .page--sw .emotion--container.emotion--column-7 .start-col-xs-5 { left: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .col-xs-6, .page--sw .emotion--container.emotion--column-7 .col-xs-6 { width: 85.71428571%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xs-6, .page--sw .emotion--container.emotion--column-7 .start-col-xs-6 { left: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .col-xs-7, .page--sw .emotion--container.emotion--column-7 .col-xs-7 { width: 100%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xs-7, .page--sw .emotion--container.emotion--column-7 .start-col-xs-7 { left: 85.71428571%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-7 .col-s-1, .page--sw .emotion--container.emotion--column-7 .col-s-1 { width: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-s-1, .page--sw .emotion--container.emotion--column-7 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-7 .col-s-2, .page--sw .emotion--container.emotion--column-7 .col-s-2 { width: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-s-2, .page--sw .emotion--container.emotion--column-7 .start-col-s-2 { left: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .col-s-3, .page--sw .emotion--container.emotion--column-7 .col-s-3 { width: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-s-3, .page--sw .emotion--container.emotion--column-7 .start-col-s-3 { left: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .col-s-4, .page--sw .emotion--container.emotion--column-7 .col-s-4 { width: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-s-4, .page--sw .emotion--container.emotion--column-7 .start-col-s-4 { left: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .col-s-5, .page--sw .emotion--container.emotion--column-7 .col-s-5 { width: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-s-5, .page--sw .emotion--container.emotion--column-7 .start-col-s-5 { left: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .col-s-6, .page--sw .emotion--container.emotion--column-7 .col-s-6 { width: 85.71428571%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-s-6, .page--sw .emotion--container.emotion--column-7 .start-col-s-6 { left: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .col-s-7, .page--sw .emotion--container.emotion--column-7 .col-s-7 { width: 100%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-s-7, .page--sw .emotion--container.emotion--column-7 .start-col-s-7 { left: 85.71428571%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-7 .col-m-1, .page--sw .emotion--container.emotion--column-7 .col-m-1 { width: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-m-1, .page--sw .emotion--container.emotion--column-7 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-7 .col-m-2, .page--sw .emotion--container.emotion--column-7 .col-m-2 { width: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-m-2, .page--sw .emotion--container.emotion--column-7 .start-col-m-2 { left: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .col-m-3, .page--sw .emotion--container.emotion--column-7 .col-m-3 { width: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-m-3, .page--sw .emotion--container.emotion--column-7 .start-col-m-3 { left: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .col-m-4, .page--sw .emotion--container.emotion--column-7 .col-m-4 { width: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-m-4, .page--sw .emotion--container.emotion--column-7 .start-col-m-4 { left: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .col-m-5, .page--sw .emotion--container.emotion--column-7 .col-m-5 { width: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-m-5, .page--sw .emotion--container.emotion--column-7 .start-col-m-5 { left: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .col-m-6, .page--sw .emotion--container.emotion--column-7 .col-m-6 { width: 85.71428571%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-m-6, .page--sw .emotion--container.emotion--column-7 .start-col-m-6 { left: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .col-m-7, .page--sw .emotion--container.emotion--column-7 .col-m-7 { width: 100%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-m-7, .page--sw .emotion--container.emotion--column-7 .start-col-m-7 { left: 85.71428571%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-7 .col-l-1, .page--sw .emotion--container.emotion--column-7 .col-l-1 { width: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-l-1, .page--sw .emotion--container.emotion--column-7 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-7 .col-l-2, .page--sw .emotion--container.emotion--column-7 .col-l-2 { width: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-l-2, .page--sw .emotion--container.emotion--column-7 .start-col-l-2 { left: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .col-l-3, .page--sw .emotion--container.emotion--column-7 .col-l-3 { width: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-l-3, .page--sw .emotion--container.emotion--column-7 .start-col-l-3 { left: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .col-l-4, .page--sw .emotion--container.emotion--column-7 .col-l-4 { width: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-l-4, .page--sw .emotion--container.emotion--column-7 .start-col-l-4 { left: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .col-l-5, .page--sw .emotion--container.emotion--column-7 .col-l-5 { width: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-l-5, .page--sw .emotion--container.emotion--column-7 .start-col-l-5 { left: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .col-l-6, .page--sw .emotion--container.emotion--column-7 .col-l-6 { width: 85.71428571%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-l-6, .page--sw .emotion--container.emotion--column-7 .start-col-l-6 { left: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .col-l-7, .page--sw .emotion--container.emotion--column-7 .col-l-7 { width: 100%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-l-7, .page--sw .emotion--container.emotion--column-7 .start-col-l-7 { left: 85.71428571%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-7 .col-xl-1, .page--sw .emotion--container.emotion--column-7 .col-xl-1 { width: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xl-1, .page--sw .emotion--container.emotion--column-7 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-7 .col-xl-2, .page--sw .emotion--container.emotion--column-7 .col-xl-2 { width: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xl-2, .page--sw .emotion--container.emotion--column-7 .start-col-xl-2 { left: 14.28571429%; } .js--modal .content .emotion--container.emotion--column-7 .col-xl-3, .page--sw .emotion--container.emotion--column-7 .col-xl-3 { width: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xl-3, .page--sw .emotion--container.emotion--column-7 .start-col-xl-3 { left: 28.57142857%; } .js--modal .content .emotion--container.emotion--column-7 .col-xl-4, .page--sw .emotion--container.emotion--column-7 .col-xl-4 { width: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xl-4, .page--sw .emotion--container.emotion--column-7 .start-col-xl-4 { left: 42.85714286%; } .js--modal .content .emotion--container.emotion--column-7 .col-xl-5, .page--sw .emotion--container.emotion--column-7 .col-xl-5 { width: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xl-5, .page--sw .emotion--container.emotion--column-7 .start-col-xl-5 { left: 57.14285714%; } .js--modal .content .emotion--container.emotion--column-7 .col-xl-6, .page--sw .emotion--container.emotion--column-7 .col-xl-6 { width: 85.71428571%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xl-6, .page--sw .emotion--container.emotion--column-7 .start-col-xl-6 { left: 71.42857143%; } .js--modal .content .emotion--container.emotion--column-7 .col-xl-7, .page--sw .emotion--container.emotion--column-7 .col-xl-7 { width: 100%; } .js--modal .content .emotion--container.emotion--column-7 .start-col-xl-7, .page--sw .emotion--container.emotion--column-7 .start-col-xl-7 { left: 85.71428571%; } } .js--modal .content .emotion--container.emotion--column-8 .col-1, .page--sw .emotion--container.emotion--column-8 .col-1 { width: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-1, .page--sw .emotion--container.emotion--column-8 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-8 .col-2, .page--sw .emotion--container.emotion--column-8 .col-2 { width: 25%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-2, .page--sw .emotion--container.emotion--column-8 .start-col-2 { left: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-3, .page--sw .emotion--container.emotion--column-8 .col-3 { width: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-3, .page--sw .emotion--container.emotion--column-8 .start-col-3 { left: 25%; } .js--modal .content .emotion--container.emotion--column-8 .col-4, .page--sw .emotion--container.emotion--column-8 .col-4 { width: 50%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-4, .page--sw .emotion--container.emotion--column-8 .start-col-4 { left: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-5, .page--sw .emotion--container.emotion--column-8 .col-5 { width: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-5, .page--sw .emotion--container.emotion--column-8 .start-col-5 { left: 50%; } .js--modal .content .emotion--container.emotion--column-8 .col-6, .page--sw .emotion--container.emotion--column-8 .col-6 { width: 75%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-6, .page--sw .emotion--container.emotion--column-8 .start-col-6 { left: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-7, .page--sw .emotion--container.emotion--column-8 .col-7 { width: 87.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-7, .page--sw .emotion--container.emotion--column-8 .start-col-7 { left: 75%; } .js--modal .content .emotion--container.emotion--column-8 .col-8, .page--sw .emotion--container.emotion--column-8 .col-8 { width: 100%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-8, .page--sw .emotion--container.emotion--column-8 .start-col-8 { left: 87.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-xs-1, .page--sw .emotion--container.emotion--column-8 .col-xs-1 { width: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xs-1, .page--sw .emotion--container.emotion--column-8 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-8 .col-xs-2, .page--sw .emotion--container.emotion--column-8 .col-xs-2 { width: 25%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xs-2, .page--sw .emotion--container.emotion--column-8 .start-col-xs-2 { left: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-xs-3, .page--sw .emotion--container.emotion--column-8 .col-xs-3 { width: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xs-3, .page--sw .emotion--container.emotion--column-8 .start-col-xs-3 { left: 25%; } .js--modal .content .emotion--container.emotion--column-8 .col-xs-4, .page--sw .emotion--container.emotion--column-8 .col-xs-4 { width: 50%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xs-4, .page--sw .emotion--container.emotion--column-8 .start-col-xs-4 { left: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-xs-5, .page--sw .emotion--container.emotion--column-8 .col-xs-5 { width: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xs-5, .page--sw .emotion--container.emotion--column-8 .start-col-xs-5 { left: 50%; } .js--modal .content .emotion--container.emotion--column-8 .col-xs-6, .page--sw .emotion--container.emotion--column-8 .col-xs-6 { width: 75%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xs-6, .page--sw .emotion--container.emotion--column-8 .start-col-xs-6 { left: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-xs-7, .page--sw .emotion--container.emotion--column-8 .col-xs-7 { width: 87.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xs-7, .page--sw .emotion--container.emotion--column-8 .start-col-xs-7 { left: 75%; } .js--modal .content .emotion--container.emotion--column-8 .col-xs-8, .page--sw .emotion--container.emotion--column-8 .col-xs-8 { width: 100%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xs-8, .page--sw .emotion--container.emotion--column-8 .start-col-xs-8 { left: 87.5%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-8 .col-s-1, .page--sw .emotion--container.emotion--column-8 .col-s-1 { width: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-s-1, .page--sw .emotion--container.emotion--column-8 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-8 .col-s-2, .page--sw .emotion--container.emotion--column-8 .col-s-2 { width: 25%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-s-2, .page--sw .emotion--container.emotion--column-8 .start-col-s-2 { left: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-s-3, .page--sw .emotion--container.emotion--column-8 .col-s-3 { width: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-s-3, .page--sw .emotion--container.emotion--column-8 .start-col-s-3 { left: 25%; } .js--modal .content .emotion--container.emotion--column-8 .col-s-4, .page--sw .emotion--container.emotion--column-8 .col-s-4 { width: 50%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-s-4, .page--sw .emotion--container.emotion--column-8 .start-col-s-4 { left: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-s-5, .page--sw .emotion--container.emotion--column-8 .col-s-5 { width: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-s-5, .page--sw .emotion--container.emotion--column-8 .start-col-s-5 { left: 50%; } .js--modal .content .emotion--container.emotion--column-8 .col-s-6, .page--sw .emotion--container.emotion--column-8 .col-s-6 { width: 75%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-s-6, .page--sw .emotion--container.emotion--column-8 .start-col-s-6 { left: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-s-7, .page--sw .emotion--container.emotion--column-8 .col-s-7 { width: 87.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-s-7, .page--sw .emotion--container.emotion--column-8 .start-col-s-7 { left: 75%; } .js--modal .content .emotion--container.emotion--column-8 .col-s-8, .page--sw .emotion--container.emotion--column-8 .col-s-8 { width: 100%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-s-8, .page--sw .emotion--container.emotion--column-8 .start-col-s-8 { left: 87.5%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-8 .col-m-1, .page--sw .emotion--container.emotion--column-8 .col-m-1 { width: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-m-1, .page--sw .emotion--container.emotion--column-8 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-8 .col-m-2, .page--sw .emotion--container.emotion--column-8 .col-m-2 { width: 25%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-m-2, .page--sw .emotion--container.emotion--column-8 .start-col-m-2 { left: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-m-3, .page--sw .emotion--container.emotion--column-8 .col-m-3 { width: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-m-3, .page--sw .emotion--container.emotion--column-8 .start-col-m-3 { left: 25%; } .js--modal .content .emotion--container.emotion--column-8 .col-m-4, .page--sw .emotion--container.emotion--column-8 .col-m-4 { width: 50%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-m-4, .page--sw .emotion--container.emotion--column-8 .start-col-m-4 { left: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-m-5, .page--sw .emotion--container.emotion--column-8 .col-m-5 { width: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-m-5, .page--sw .emotion--container.emotion--column-8 .start-col-m-5 { left: 50%; } .js--modal .content .emotion--container.emotion--column-8 .col-m-6, .page--sw .emotion--container.emotion--column-8 .col-m-6 { width: 75%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-m-6, .page--sw .emotion--container.emotion--column-8 .start-col-m-6 { left: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-m-7, .page--sw .emotion--container.emotion--column-8 .col-m-7 { width: 87.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-m-7, .page--sw .emotion--container.emotion--column-8 .start-col-m-7 { left: 75%; } .js--modal .content .emotion--container.emotion--column-8 .col-m-8, .page--sw .emotion--container.emotion--column-8 .col-m-8 { width: 100%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-m-8, .page--sw .emotion--container.emotion--column-8 .start-col-m-8 { left: 87.5%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-8 .col-l-1, .page--sw .emotion--container.emotion--column-8 .col-l-1 { width: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-l-1, .page--sw .emotion--container.emotion--column-8 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-8 .col-l-2, .page--sw .emotion--container.emotion--column-8 .col-l-2 { width: 25%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-l-2, .page--sw .emotion--container.emotion--column-8 .start-col-l-2 { left: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-l-3, .page--sw .emotion--container.emotion--column-8 .col-l-3 { width: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-l-3, .page--sw .emotion--container.emotion--column-8 .start-col-l-3 { left: 25%; } .js--modal .content .emotion--container.emotion--column-8 .col-l-4, .page--sw .emotion--container.emotion--column-8 .col-l-4 { width: 50%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-l-4, .page--sw .emotion--container.emotion--column-8 .start-col-l-4 { left: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-l-5, .page--sw .emotion--container.emotion--column-8 .col-l-5 { width: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-l-5, .page--sw .emotion--container.emotion--column-8 .start-col-l-5 { left: 50%; } .js--modal .content .emotion--container.emotion--column-8 .col-l-6, .page--sw .emotion--container.emotion--column-8 .col-l-6 { width: 75%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-l-6, .page--sw .emotion--container.emotion--column-8 .start-col-l-6 { left: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-l-7, .page--sw .emotion--container.emotion--column-8 .col-l-7 { width: 87.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-l-7, .page--sw .emotion--container.emotion--column-8 .start-col-l-7 { left: 75%; } .js--modal .content .emotion--container.emotion--column-8 .col-l-8, .page--sw .emotion--container.emotion--column-8 .col-l-8 { width: 100%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-l-8, .page--sw .emotion--container.emotion--column-8 .start-col-l-8 { left: 87.5%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-8 .col-xl-1, .page--sw .emotion--container.emotion--column-8 .col-xl-1 { width: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xl-1, .page--sw .emotion--container.emotion--column-8 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-8 .col-xl-2, .page--sw .emotion--container.emotion--column-8 .col-xl-2 { width: 25%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xl-2, .page--sw .emotion--container.emotion--column-8 .start-col-xl-2 { left: 12.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-xl-3, .page--sw .emotion--container.emotion--column-8 .col-xl-3 { width: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xl-3, .page--sw .emotion--container.emotion--column-8 .start-col-xl-3 { left: 25%; } .js--modal .content .emotion--container.emotion--column-8 .col-xl-4, .page--sw .emotion--container.emotion--column-8 .col-xl-4 { width: 50%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xl-4, .page--sw .emotion--container.emotion--column-8 .start-col-xl-4 { left: 37.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-xl-5, .page--sw .emotion--container.emotion--column-8 .col-xl-5 { width: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xl-5, .page--sw .emotion--container.emotion--column-8 .start-col-xl-5 { left: 50%; } .js--modal .content .emotion--container.emotion--column-8 .col-xl-6, .page--sw .emotion--container.emotion--column-8 .col-xl-6 { width: 75%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xl-6, .page--sw .emotion--container.emotion--column-8 .start-col-xl-6 { left: 62.5%; } .js--modal .content .emotion--container.emotion--column-8 .col-xl-7, .page--sw .emotion--container.emotion--column-8 .col-xl-7 { width: 87.5%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xl-7, .page--sw .emotion--container.emotion--column-8 .start-col-xl-7 { left: 75%; } .js--modal .content .emotion--container.emotion--column-8 .col-xl-8, .page--sw .emotion--container.emotion--column-8 .col-xl-8 { width: 100%; } .js--modal .content .emotion--container.emotion--column-8 .start-col-xl-8, .page--sw .emotion--container.emotion--column-8 .start-col-xl-8 { left: 87.5%; } } .js--modal .content .emotion--container.emotion--column-9 .col-1, .page--sw .emotion--container.emotion--column-9 .col-1 { width: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-1, .page--sw .emotion--container.emotion--column-9 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-9 .col-2, .page--sw .emotion--container.emotion--column-9 .col-2 { width: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-2, .page--sw .emotion--container.emotion--column-9 .start-col-2 { left: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .col-3, .page--sw .emotion--container.emotion--column-9 .col-3 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-3, .page--sw .emotion--container.emotion--column-9 .start-col-3 { left: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .col-4, .page--sw .emotion--container.emotion--column-9 .col-4 { width: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-4, .page--sw .emotion--container.emotion--column-9 .start-col-4 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .col-5, .page--sw .emotion--container.emotion--column-9 .col-5 { width: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-5, .page--sw .emotion--container.emotion--column-9 .start-col-5 { left: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .col-6, .page--sw .emotion--container.emotion--column-9 .col-6 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-6, .page--sw .emotion--container.emotion--column-9 .start-col-6 { left: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .col-7, .page--sw .emotion--container.emotion--column-9 .col-7 { width: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-7, .page--sw .emotion--container.emotion--column-9 .start-col-7 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .col-8, .page--sw .emotion--container.emotion--column-9 .col-8 { width: 88.88888889%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-8, .page--sw .emotion--container.emotion--column-9 .start-col-8 { left: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .col-9, .page--sw .emotion--container.emotion--column-9 .col-9 { width: 100%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-9, .page--sw .emotion--container.emotion--column-9 .start-col-9 { left: 88.88888889%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-1, .page--sw .emotion--container.emotion--column-9 .col-xs-1 { width: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-1, .page--sw .emotion--container.emotion--column-9 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-2, .page--sw .emotion--container.emotion--column-9 .col-xs-2 { width: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-2, .page--sw .emotion--container.emotion--column-9 .start-col-xs-2 { left: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-3, .page--sw .emotion--container.emotion--column-9 .col-xs-3 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-3, .page--sw .emotion--container.emotion--column-9 .start-col-xs-3 { left: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-4, .page--sw .emotion--container.emotion--column-9 .col-xs-4 { width: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-4, .page--sw .emotion--container.emotion--column-9 .start-col-xs-4 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-5, .page--sw .emotion--container.emotion--column-9 .col-xs-5 { width: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-5, .page--sw .emotion--container.emotion--column-9 .start-col-xs-5 { left: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-6, .page--sw .emotion--container.emotion--column-9 .col-xs-6 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-6, .page--sw .emotion--container.emotion--column-9 .start-col-xs-6 { left: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-7, .page--sw .emotion--container.emotion--column-9 .col-xs-7 { width: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-7, .page--sw .emotion--container.emotion--column-9 .start-col-xs-7 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-8, .page--sw .emotion--container.emotion--column-9 .col-xs-8 { width: 88.88888889%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-8, .page--sw .emotion--container.emotion--column-9 .start-col-xs-8 { left: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .col-xs-9, .page--sw .emotion--container.emotion--column-9 .col-xs-9 { width: 100%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xs-9, .page--sw .emotion--container.emotion--column-9 .start-col-xs-9 { left: 88.88888889%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-9 .col-s-1, .page--sw .emotion--container.emotion--column-9 .col-s-1 { width: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-1, .page--sw .emotion--container.emotion--column-9 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-9 .col-s-2, .page--sw .emotion--container.emotion--column-9 .col-s-2 { width: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-2, .page--sw .emotion--container.emotion--column-9 .start-col-s-2 { left: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .col-s-3, .page--sw .emotion--container.emotion--column-9 .col-s-3 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-3, .page--sw .emotion--container.emotion--column-9 .start-col-s-3 { left: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .col-s-4, .page--sw .emotion--container.emotion--column-9 .col-s-4 { width: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-4, .page--sw .emotion--container.emotion--column-9 .start-col-s-4 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .col-s-5, .page--sw .emotion--container.emotion--column-9 .col-s-5 { width: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-5, .page--sw .emotion--container.emotion--column-9 .start-col-s-5 { left: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .col-s-6, .page--sw .emotion--container.emotion--column-9 .col-s-6 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-6, .page--sw .emotion--container.emotion--column-9 .start-col-s-6 { left: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .col-s-7, .page--sw .emotion--container.emotion--column-9 .col-s-7 { width: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-7, .page--sw .emotion--container.emotion--column-9 .start-col-s-7 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .col-s-8, .page--sw .emotion--container.emotion--column-9 .col-s-8 { width: 88.88888889%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-8, .page--sw .emotion--container.emotion--column-9 .start-col-s-8 { left: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .col-s-9, .page--sw .emotion--container.emotion--column-9 .col-s-9 { width: 100%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-s-9, .page--sw .emotion--container.emotion--column-9 .start-col-s-9 { left: 88.88888889%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-9 .col-m-1, .page--sw .emotion--container.emotion--column-9 .col-m-1 { width: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-1, .page--sw .emotion--container.emotion--column-9 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-9 .col-m-2, .page--sw .emotion--container.emotion--column-9 .col-m-2 { width: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-2, .page--sw .emotion--container.emotion--column-9 .start-col-m-2 { left: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .col-m-3, .page--sw .emotion--container.emotion--column-9 .col-m-3 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-3, .page--sw .emotion--container.emotion--column-9 .start-col-m-3 { left: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .col-m-4, .page--sw .emotion--container.emotion--column-9 .col-m-4 { width: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-4, .page--sw .emotion--container.emotion--column-9 .start-col-m-4 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .col-m-5, .page--sw .emotion--container.emotion--column-9 .col-m-5 { width: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-5, .page--sw .emotion--container.emotion--column-9 .start-col-m-5 { left: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .col-m-6, .page--sw .emotion--container.emotion--column-9 .col-m-6 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-6, .page--sw .emotion--container.emotion--column-9 .start-col-m-6 { left: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .col-m-7, .page--sw .emotion--container.emotion--column-9 .col-m-7 { width: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-7, .page--sw .emotion--container.emotion--column-9 .start-col-m-7 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .col-m-8, .page--sw .emotion--container.emotion--column-9 .col-m-8 { width: 88.88888889%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-8, .page--sw .emotion--container.emotion--column-9 .start-col-m-8 { left: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .col-m-9, .page--sw .emotion--container.emotion--column-9 .col-m-9 { width: 100%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-m-9, .page--sw .emotion--container.emotion--column-9 .start-col-m-9 { left: 88.88888889%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-9 .col-l-1, .page--sw .emotion--container.emotion--column-9 .col-l-1 { width: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-1, .page--sw .emotion--container.emotion--column-9 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-9 .col-l-2, .page--sw .emotion--container.emotion--column-9 .col-l-2 { width: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-2, .page--sw .emotion--container.emotion--column-9 .start-col-l-2 { left: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .col-l-3, .page--sw .emotion--container.emotion--column-9 .col-l-3 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-3, .page--sw .emotion--container.emotion--column-9 .start-col-l-3 { left: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .col-l-4, .page--sw .emotion--container.emotion--column-9 .col-l-4 { width: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-4, .page--sw .emotion--container.emotion--column-9 .start-col-l-4 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .col-l-5, .page--sw .emotion--container.emotion--column-9 .col-l-5 { width: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-5, .page--sw .emotion--container.emotion--column-9 .start-col-l-5 { left: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .col-l-6, .page--sw .emotion--container.emotion--column-9 .col-l-6 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-6, .page--sw .emotion--container.emotion--column-9 .start-col-l-6 { left: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .col-l-7, .page--sw .emotion--container.emotion--column-9 .col-l-7 { width: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-7, .page--sw .emotion--container.emotion--column-9 .start-col-l-7 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .col-l-8, .page--sw .emotion--container.emotion--column-9 .col-l-8 { width: 88.88888889%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-8, .page--sw .emotion--container.emotion--column-9 .start-col-l-8 { left: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .col-l-9, .page--sw .emotion--container.emotion--column-9 .col-l-9 { width: 100%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-l-9, .page--sw .emotion--container.emotion--column-9 .start-col-l-9 { left: 88.88888889%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-9 .col-xl-1, .page--sw .emotion--container.emotion--column-9 .col-xl-1 { width: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-1, .page--sw .emotion--container.emotion--column-9 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-9 .col-xl-2, .page--sw .emotion--container.emotion--column-9 .col-xl-2 { width: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-2, .page--sw .emotion--container.emotion--column-9 .start-col-xl-2 { left: 11.11111111%; } .js--modal .content .emotion--container.emotion--column-9 .col-xl-3, .page--sw .emotion--container.emotion--column-9 .col-xl-3 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-3, .page--sw .emotion--container.emotion--column-9 .start-col-xl-3 { left: 22.22222222%; } .js--modal .content .emotion--container.emotion--column-9 .col-xl-4, .page--sw .emotion--container.emotion--column-9 .col-xl-4 { width: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-4, .page--sw .emotion--container.emotion--column-9 .start-col-xl-4 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-9 .col-xl-5, .page--sw .emotion--container.emotion--column-9 .col-xl-5 { width: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-5, .page--sw .emotion--container.emotion--column-9 .start-col-xl-5 { left: 44.44444444%; } .js--modal .content .emotion--container.emotion--column-9 .col-xl-6, .page--sw .emotion--container.emotion--column-9 .col-xl-6 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-6, .page--sw .emotion--container.emotion--column-9 .start-col-xl-6 { left: 55.55555556%; } .js--modal .content .emotion--container.emotion--column-9 .col-xl-7, .page--sw .emotion--container.emotion--column-9 .col-xl-7 { width: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-7, .page--sw .emotion--container.emotion--column-9 .start-col-xl-7 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-9 .col-xl-8, .page--sw .emotion--container.emotion--column-9 .col-xl-8 { width: 88.88888889%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-8, .page--sw .emotion--container.emotion--column-9 .start-col-xl-8 { left: 77.77777778%; } .js--modal .content .emotion--container.emotion--column-9 .col-xl-9, .page--sw .emotion--container.emotion--column-9 .col-xl-9 { width: 100%; } .js--modal .content .emotion--container.emotion--column-9 .start-col-xl-9, .page--sw .emotion--container.emotion--column-9 .start-col-xl-9 { left: 88.88888889%; } } .js--modal .content .emotion--container.emotion--column-10 .col-1, .page--sw .emotion--container.emotion--column-10 .col-1 { width: 10%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-1, .page--sw .emotion--container.emotion--column-10 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-10 .col-2, .page--sw .emotion--container.emotion--column-10 .col-2 { width: 20%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-2, .page--sw .emotion--container.emotion--column-10 .start-col-2 { left: 10%; } .js--modal .content .emotion--container.emotion--column-10 .col-3, .page--sw .emotion--container.emotion--column-10 .col-3 { width: 30%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-3, .page--sw .emotion--container.emotion--column-10 .start-col-3 { left: 20%; } .js--modal .content .emotion--container.emotion--column-10 .col-4, .page--sw .emotion--container.emotion--column-10 .col-4 { width: 40%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-4, .page--sw .emotion--container.emotion--column-10 .start-col-4 { left: 30%; } .js--modal .content .emotion--container.emotion--column-10 .col-5, .page--sw .emotion--container.emotion--column-10 .col-5 { width: 50%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-5, .page--sw .emotion--container.emotion--column-10 .start-col-5 { left: 40%; } .js--modal .content .emotion--container.emotion--column-10 .col-6, .page--sw .emotion--container.emotion--column-10 .col-6 { width: 60%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-6, .page--sw .emotion--container.emotion--column-10 .start-col-6 { left: 50%; } .js--modal .content .emotion--container.emotion--column-10 .col-7, .page--sw .emotion--container.emotion--column-10 .col-7 { width: 70%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-7, .page--sw .emotion--container.emotion--column-10 .start-col-7 { left: 60%; } .js--modal .content .emotion--container.emotion--column-10 .col-8, .page--sw .emotion--container.emotion--column-10 .col-8 { width: 80%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-8, .page--sw .emotion--container.emotion--column-10 .start-col-8 { left: 70%; } .js--modal .content .emotion--container.emotion--column-10 .col-9, .page--sw .emotion--container.emotion--column-10 .col-9 { width: 90%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-9, .page--sw .emotion--container.emotion--column-10 .start-col-9 { left: 80%; } .js--modal .content .emotion--container.emotion--column-10 .col-10, .page--sw .emotion--container.emotion--column-10 .col-10 { width: 100%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-10, .page--sw .emotion--container.emotion--column-10 .start-col-10 { left: 90%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-1, .page--sw .emotion--container.emotion--column-10 .col-xs-1 { width: 10%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-1, .page--sw .emotion--container.emotion--column-10 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-2, .page--sw .emotion--container.emotion--column-10 .col-xs-2 { width: 20%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-2, .page--sw .emotion--container.emotion--column-10 .start-col-xs-2 { left: 10%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-3, .page--sw .emotion--container.emotion--column-10 .col-xs-3 { width: 30%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-3, .page--sw .emotion--container.emotion--column-10 .start-col-xs-3 { left: 20%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-4, .page--sw .emotion--container.emotion--column-10 .col-xs-4 { width: 40%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-4, .page--sw .emotion--container.emotion--column-10 .start-col-xs-4 { left: 30%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-5, .page--sw .emotion--container.emotion--column-10 .col-xs-5 { width: 50%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-5, .page--sw .emotion--container.emotion--column-10 .start-col-xs-5 { left: 40%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-6, .page--sw .emotion--container.emotion--column-10 .col-xs-6 { width: 60%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-6, .page--sw .emotion--container.emotion--column-10 .start-col-xs-6 { left: 50%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-7, .page--sw .emotion--container.emotion--column-10 .col-xs-7 { width: 70%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-7, .page--sw .emotion--container.emotion--column-10 .start-col-xs-7 { left: 60%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-8, .page--sw .emotion--container.emotion--column-10 .col-xs-8 { width: 80%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-8, .page--sw .emotion--container.emotion--column-10 .start-col-xs-8 { left: 70%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-9, .page--sw .emotion--container.emotion--column-10 .col-xs-9 { width: 90%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-9, .page--sw .emotion--container.emotion--column-10 .start-col-xs-9 { left: 80%; } .js--modal .content .emotion--container.emotion--column-10 .col-xs-10, .page--sw .emotion--container.emotion--column-10 .col-xs-10 { width: 100%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xs-10, .page--sw .emotion--container.emotion--column-10 .start-col-xs-10 { left: 90%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-10 .col-s-1, .page--sw .emotion--container.emotion--column-10 .col-s-1 { width: 10%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-1, .page--sw .emotion--container.emotion--column-10 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-2, .page--sw .emotion--container.emotion--column-10 .col-s-2 { width: 20%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-2, .page--sw .emotion--container.emotion--column-10 .start-col-s-2 { left: 10%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-3, .page--sw .emotion--container.emotion--column-10 .col-s-3 { width: 30%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-3, .page--sw .emotion--container.emotion--column-10 .start-col-s-3 { left: 20%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-4, .page--sw .emotion--container.emotion--column-10 .col-s-4 { width: 40%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-4, .page--sw .emotion--container.emotion--column-10 .start-col-s-4 { left: 30%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-5, .page--sw .emotion--container.emotion--column-10 .col-s-5 { width: 50%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-5, .page--sw .emotion--container.emotion--column-10 .start-col-s-5 { left: 40%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-6, .page--sw .emotion--container.emotion--column-10 .col-s-6 { width: 60%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-6, .page--sw .emotion--container.emotion--column-10 .start-col-s-6 { left: 50%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-7, .page--sw .emotion--container.emotion--column-10 .col-s-7 { width: 70%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-7, .page--sw .emotion--container.emotion--column-10 .start-col-s-7 { left: 60%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-8, .page--sw .emotion--container.emotion--column-10 .col-s-8 { width: 80%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-8, .page--sw .emotion--container.emotion--column-10 .start-col-s-8 { left: 70%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-9, .page--sw .emotion--container.emotion--column-10 .col-s-9 { width: 90%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-9, .page--sw .emotion--container.emotion--column-10 .start-col-s-9 { left: 80%; } .js--modal .content .emotion--container.emotion--column-10 .col-s-10, .page--sw .emotion--container.emotion--column-10 .col-s-10 { width: 100%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-s-10, .page--sw .emotion--container.emotion--column-10 .start-col-s-10 { left: 90%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-10 .col-m-1, .page--sw .emotion--container.emotion--column-10 .col-m-1 { width: 10%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-1, .page--sw .emotion--container.emotion--column-10 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-2, .page--sw .emotion--container.emotion--column-10 .col-m-2 { width: 20%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-2, .page--sw .emotion--container.emotion--column-10 .start-col-m-2 { left: 10%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-3, .page--sw .emotion--container.emotion--column-10 .col-m-3 { width: 30%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-3, .page--sw .emotion--container.emotion--column-10 .start-col-m-3 { left: 20%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-4, .page--sw .emotion--container.emotion--column-10 .col-m-4 { width: 40%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-4, .page--sw .emotion--container.emotion--column-10 .start-col-m-4 { left: 30%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-5, .page--sw .emotion--container.emotion--column-10 .col-m-5 { width: 50%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-5, .page--sw .emotion--container.emotion--column-10 .start-col-m-5 { left: 40%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-6, .page--sw .emotion--container.emotion--column-10 .col-m-6 { width: 60%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-6, .page--sw .emotion--container.emotion--column-10 .start-col-m-6 { left: 50%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-7, .page--sw .emotion--container.emotion--column-10 .col-m-7 { width: 70%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-7, .page--sw .emotion--container.emotion--column-10 .start-col-m-7 { left: 60%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-8, .page--sw .emotion--container.emotion--column-10 .col-m-8 { width: 80%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-8, .page--sw .emotion--container.emotion--column-10 .start-col-m-8 { left: 70%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-9, .page--sw .emotion--container.emotion--column-10 .col-m-9 { width: 90%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-9, .page--sw .emotion--container.emotion--column-10 .start-col-m-9 { left: 80%; } .js--modal .content .emotion--container.emotion--column-10 .col-m-10, .page--sw .emotion--container.emotion--column-10 .col-m-10 { width: 100%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-m-10, .page--sw .emotion--container.emotion--column-10 .start-col-m-10 { left: 90%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-10 .col-l-1, .page--sw .emotion--container.emotion--column-10 .col-l-1 { width: 10%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-1, .page--sw .emotion--container.emotion--column-10 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-2, .page--sw .emotion--container.emotion--column-10 .col-l-2 { width: 20%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-2, .page--sw .emotion--container.emotion--column-10 .start-col-l-2 { left: 10%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-3, .page--sw .emotion--container.emotion--column-10 .col-l-3 { width: 30%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-3, .page--sw .emotion--container.emotion--column-10 .start-col-l-3 { left: 20%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-4, .page--sw .emotion--container.emotion--column-10 .col-l-4 { width: 40%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-4, .page--sw .emotion--container.emotion--column-10 .start-col-l-4 { left: 30%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-5, .page--sw .emotion--container.emotion--column-10 .col-l-5 { width: 50%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-5, .page--sw .emotion--container.emotion--column-10 .start-col-l-5 { left: 40%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-6, .page--sw .emotion--container.emotion--column-10 .col-l-6 { width: 60%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-6, .page--sw .emotion--container.emotion--column-10 .start-col-l-6 { left: 50%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-7, .page--sw .emotion--container.emotion--column-10 .col-l-7 { width: 70%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-7, .page--sw .emotion--container.emotion--column-10 .start-col-l-7 { left: 60%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-8, .page--sw .emotion--container.emotion--column-10 .col-l-8 { width: 80%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-8, .page--sw .emotion--container.emotion--column-10 .start-col-l-8 { left: 70%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-9, .page--sw .emotion--container.emotion--column-10 .col-l-9 { width: 90%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-9, .page--sw .emotion--container.emotion--column-10 .start-col-l-9 { left: 80%; } .js--modal .content .emotion--container.emotion--column-10 .col-l-10, .page--sw .emotion--container.emotion--column-10 .col-l-10 { width: 100%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-l-10, .page--sw .emotion--container.emotion--column-10 .start-col-l-10 { left: 90%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-10 .col-xl-1, .page--sw .emotion--container.emotion--column-10 .col-xl-1 { width: 10%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-1, .page--sw .emotion--container.emotion--column-10 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-2, .page--sw .emotion--container.emotion--column-10 .col-xl-2 { width: 20%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-2, .page--sw .emotion--container.emotion--column-10 .start-col-xl-2 { left: 10%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-3, .page--sw .emotion--container.emotion--column-10 .col-xl-3 { width: 30%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-3, .page--sw .emotion--container.emotion--column-10 .start-col-xl-3 { left: 20%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-4, .page--sw .emotion--container.emotion--column-10 .col-xl-4 { width: 40%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-4, .page--sw .emotion--container.emotion--column-10 .start-col-xl-4 { left: 30%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-5, .page--sw .emotion--container.emotion--column-10 .col-xl-5 { width: 50%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-5, .page--sw .emotion--container.emotion--column-10 .start-col-xl-5 { left: 40%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-6, .page--sw .emotion--container.emotion--column-10 .col-xl-6 { width: 60%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-6, .page--sw .emotion--container.emotion--column-10 .start-col-xl-6 { left: 50%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-7, .page--sw .emotion--container.emotion--column-10 .col-xl-7 { width: 70%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-7, .page--sw .emotion--container.emotion--column-10 .start-col-xl-7 { left: 60%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-8, .page--sw .emotion--container.emotion--column-10 .col-xl-8 { width: 80%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-8, .page--sw .emotion--container.emotion--column-10 .start-col-xl-8 { left: 70%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-9, .page--sw .emotion--container.emotion--column-10 .col-xl-9 { width: 90%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-9, .page--sw .emotion--container.emotion--column-10 .start-col-xl-9 { left: 80%; } .js--modal .content .emotion--container.emotion--column-10 .col-xl-10, .page--sw .emotion--container.emotion--column-10 .col-xl-10 { width: 100%; } .js--modal .content .emotion--container.emotion--column-10 .start-col-xl-10, .page--sw .emotion--container.emotion--column-10 .start-col-xl-10 { left: 90%; } } .js--modal .content .emotion--container.emotion--column-11 .col-1, .page--sw .emotion--container.emotion--column-11 .col-1 { width: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-1, .page--sw .emotion--container.emotion--column-11 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-11 .col-2, .page--sw .emotion--container.emotion--column-11 .col-2 { width: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-2, .page--sw .emotion--container.emotion--column-11 .start-col-2 { left: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .col-3, .page--sw .emotion--container.emotion--column-11 .col-3 { width: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-3, .page--sw .emotion--container.emotion--column-11 .start-col-3 { left: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .col-4, .page--sw .emotion--container.emotion--column-11 .col-4 { width: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-4, .page--sw .emotion--container.emotion--column-11 .start-col-4 { left: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .col-5, .page--sw .emotion--container.emotion--column-11 .col-5 { width: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-5, .page--sw .emotion--container.emotion--column-11 .start-col-5 { left: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .col-6, .page--sw .emotion--container.emotion--column-11 .col-6 { width: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-6, .page--sw .emotion--container.emotion--column-11 .start-col-6 { left: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .col-7, .page--sw .emotion--container.emotion--column-11 .col-7 { width: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-7, .page--sw .emotion--container.emotion--column-11 .start-col-7 { left: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .col-8, .page--sw .emotion--container.emotion--column-11 .col-8 { width: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-8, .page--sw .emotion--container.emotion--column-11 .start-col-8 { left: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .col-9, .page--sw .emotion--container.emotion--column-11 .col-9 { width: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-9, .page--sw .emotion--container.emotion--column-11 .start-col-9 { left: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .col-10, .page--sw .emotion--container.emotion--column-11 .col-10 { width: 90.90909091%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-10, .page--sw .emotion--container.emotion--column-11 .start-col-10 { left: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .col-11, .page--sw .emotion--container.emotion--column-11 .col-11 { width: 100%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-11, .page--sw .emotion--container.emotion--column-11 .start-col-11 { left: 90.90909091%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-1, .page--sw .emotion--container.emotion--column-11 .col-xs-1 { width: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-1, .page--sw .emotion--container.emotion--column-11 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-2, .page--sw .emotion--container.emotion--column-11 .col-xs-2 { width: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-2, .page--sw .emotion--container.emotion--column-11 .start-col-xs-2 { left: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-3, .page--sw .emotion--container.emotion--column-11 .col-xs-3 { width: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-3, .page--sw .emotion--container.emotion--column-11 .start-col-xs-3 { left: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-4, .page--sw .emotion--container.emotion--column-11 .col-xs-4 { width: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-4, .page--sw .emotion--container.emotion--column-11 .start-col-xs-4 { left: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-5, .page--sw .emotion--container.emotion--column-11 .col-xs-5 { width: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-5, .page--sw .emotion--container.emotion--column-11 .start-col-xs-5 { left: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-6, .page--sw .emotion--container.emotion--column-11 .col-xs-6 { width: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-6, .page--sw .emotion--container.emotion--column-11 .start-col-xs-6 { left: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-7, .page--sw .emotion--container.emotion--column-11 .col-xs-7 { width: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-7, .page--sw .emotion--container.emotion--column-11 .start-col-xs-7 { left: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-8, .page--sw .emotion--container.emotion--column-11 .col-xs-8 { width: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-8, .page--sw .emotion--container.emotion--column-11 .start-col-xs-8 { left: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-9, .page--sw .emotion--container.emotion--column-11 .col-xs-9 { width: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-9, .page--sw .emotion--container.emotion--column-11 .start-col-xs-9 { left: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-10, .page--sw .emotion--container.emotion--column-11 .col-xs-10 { width: 90.90909091%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-10, .page--sw .emotion--container.emotion--column-11 .start-col-xs-10 { left: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .col-xs-11, .page--sw .emotion--container.emotion--column-11 .col-xs-11 { width: 100%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xs-11, .page--sw .emotion--container.emotion--column-11 .start-col-xs-11 { left: 90.90909091%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-11 .col-s-1, .page--sw .emotion--container.emotion--column-11 .col-s-1 { width: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-1, .page--sw .emotion--container.emotion--column-11 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-2, .page--sw .emotion--container.emotion--column-11 .col-s-2 { width: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-2, .page--sw .emotion--container.emotion--column-11 .start-col-s-2 { left: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-3, .page--sw .emotion--container.emotion--column-11 .col-s-3 { width: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-3, .page--sw .emotion--container.emotion--column-11 .start-col-s-3 { left: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-4, .page--sw .emotion--container.emotion--column-11 .col-s-4 { width: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-4, .page--sw .emotion--container.emotion--column-11 .start-col-s-4 { left: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-5, .page--sw .emotion--container.emotion--column-11 .col-s-5 { width: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-5, .page--sw .emotion--container.emotion--column-11 .start-col-s-5 { left: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-6, .page--sw .emotion--container.emotion--column-11 .col-s-6 { width: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-6, .page--sw .emotion--container.emotion--column-11 .start-col-s-6 { left: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-7, .page--sw .emotion--container.emotion--column-11 .col-s-7 { width: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-7, .page--sw .emotion--container.emotion--column-11 .start-col-s-7 { left: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-8, .page--sw .emotion--container.emotion--column-11 .col-s-8 { width: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-8, .page--sw .emotion--container.emotion--column-11 .start-col-s-8 { left: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-9, .page--sw .emotion--container.emotion--column-11 .col-s-9 { width: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-9, .page--sw .emotion--container.emotion--column-11 .start-col-s-9 { left: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-10, .page--sw .emotion--container.emotion--column-11 .col-s-10 { width: 90.90909091%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-10, .page--sw .emotion--container.emotion--column-11 .start-col-s-10 { left: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .col-s-11, .page--sw .emotion--container.emotion--column-11 .col-s-11 { width: 100%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-s-11, .page--sw .emotion--container.emotion--column-11 .start-col-s-11 { left: 90.90909091%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-11 .col-m-1, .page--sw .emotion--container.emotion--column-11 .col-m-1 { width: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-1, .page--sw .emotion--container.emotion--column-11 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-2, .page--sw .emotion--container.emotion--column-11 .col-m-2 { width: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-2, .page--sw .emotion--container.emotion--column-11 .start-col-m-2 { left: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-3, .page--sw .emotion--container.emotion--column-11 .col-m-3 { width: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-3, .page--sw .emotion--container.emotion--column-11 .start-col-m-3 { left: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-4, .page--sw .emotion--container.emotion--column-11 .col-m-4 { width: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-4, .page--sw .emotion--container.emotion--column-11 .start-col-m-4 { left: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-5, .page--sw .emotion--container.emotion--column-11 .col-m-5 { width: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-5, .page--sw .emotion--container.emotion--column-11 .start-col-m-5 { left: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-6, .page--sw .emotion--container.emotion--column-11 .col-m-6 { width: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-6, .page--sw .emotion--container.emotion--column-11 .start-col-m-6 { left: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-7, .page--sw .emotion--container.emotion--column-11 .col-m-7 { width: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-7, .page--sw .emotion--container.emotion--column-11 .start-col-m-7 { left: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-8, .page--sw .emotion--container.emotion--column-11 .col-m-8 { width: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-8, .page--sw .emotion--container.emotion--column-11 .start-col-m-8 { left: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-9, .page--sw .emotion--container.emotion--column-11 .col-m-9 { width: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-9, .page--sw .emotion--container.emotion--column-11 .start-col-m-9 { left: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-10, .page--sw .emotion--container.emotion--column-11 .col-m-10 { width: 90.90909091%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-10, .page--sw .emotion--container.emotion--column-11 .start-col-m-10 { left: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .col-m-11, .page--sw .emotion--container.emotion--column-11 .col-m-11 { width: 100%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-m-11, .page--sw .emotion--container.emotion--column-11 .start-col-m-11 { left: 90.90909091%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-11 .col-l-1, .page--sw .emotion--container.emotion--column-11 .col-l-1 { width: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-1, .page--sw .emotion--container.emotion--column-11 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-2, .page--sw .emotion--container.emotion--column-11 .col-l-2 { width: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-2, .page--sw .emotion--container.emotion--column-11 .start-col-l-2 { left: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-3, .page--sw .emotion--container.emotion--column-11 .col-l-3 { width: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-3, .page--sw .emotion--container.emotion--column-11 .start-col-l-3 { left: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-4, .page--sw .emotion--container.emotion--column-11 .col-l-4 { width: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-4, .page--sw .emotion--container.emotion--column-11 .start-col-l-4 { left: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-5, .page--sw .emotion--container.emotion--column-11 .col-l-5 { width: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-5, .page--sw .emotion--container.emotion--column-11 .start-col-l-5 { left: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-6, .page--sw .emotion--container.emotion--column-11 .col-l-6 { width: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-6, .page--sw .emotion--container.emotion--column-11 .start-col-l-6 { left: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-7, .page--sw .emotion--container.emotion--column-11 .col-l-7 { width: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-7, .page--sw .emotion--container.emotion--column-11 .start-col-l-7 { left: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-8, .page--sw .emotion--container.emotion--column-11 .col-l-8 { width: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-8, .page--sw .emotion--container.emotion--column-11 .start-col-l-8 { left: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-9, .page--sw .emotion--container.emotion--column-11 .col-l-9 { width: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-9, .page--sw .emotion--container.emotion--column-11 .start-col-l-9 { left: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-10, .page--sw .emotion--container.emotion--column-11 .col-l-10 { width: 90.90909091%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-10, .page--sw .emotion--container.emotion--column-11 .start-col-l-10 { left: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .col-l-11, .page--sw .emotion--container.emotion--column-11 .col-l-11 { width: 100%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-l-11, .page--sw .emotion--container.emotion--column-11 .start-col-l-11 { left: 90.90909091%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-11 .col-xl-1, .page--sw .emotion--container.emotion--column-11 .col-xl-1 { width: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-1, .page--sw .emotion--container.emotion--column-11 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-2, .page--sw .emotion--container.emotion--column-11 .col-xl-2 { width: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-2, .page--sw .emotion--container.emotion--column-11 .start-col-xl-2 { left: 9.09090909%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-3, .page--sw .emotion--container.emotion--column-11 .col-xl-3 { width: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-3, .page--sw .emotion--container.emotion--column-11 .start-col-xl-3 { left: 18.18181818%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-4, .page--sw .emotion--container.emotion--column-11 .col-xl-4 { width: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-4, .page--sw .emotion--container.emotion--column-11 .start-col-xl-4 { left: 27.27272727%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-5, .page--sw .emotion--container.emotion--column-11 .col-xl-5 { width: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-5, .page--sw .emotion--container.emotion--column-11 .start-col-xl-5 { left: 36.36363636%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-6, .page--sw .emotion--container.emotion--column-11 .col-xl-6 { width: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-6, .page--sw .emotion--container.emotion--column-11 .start-col-xl-6 { left: 45.45454545%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-7, .page--sw .emotion--container.emotion--column-11 .col-xl-7 { width: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-7, .page--sw .emotion--container.emotion--column-11 .start-col-xl-7 { left: 54.54545455%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-8, .page--sw .emotion--container.emotion--column-11 .col-xl-8 { width: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-8, .page--sw .emotion--container.emotion--column-11 .start-col-xl-8 { left: 63.63636364%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-9, .page--sw .emotion--container.emotion--column-11 .col-xl-9 { width: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-9, .page--sw .emotion--container.emotion--column-11 .start-col-xl-9 { left: 72.72727273%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-10, .page--sw .emotion--container.emotion--column-11 .col-xl-10 { width: 90.90909091%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-10, .page--sw .emotion--container.emotion--column-11 .start-col-xl-10 { left: 81.81818182%; } .js--modal .content .emotion--container.emotion--column-11 .col-xl-11, .page--sw .emotion--container.emotion--column-11 .col-xl-11 { width: 100%; } .js--modal .content .emotion--container.emotion--column-11 .start-col-xl-11, .page--sw .emotion--container.emotion--column-11 .start-col-xl-11 { left: 90.90909091%; } } .js--modal .content .emotion--container.emotion--column-12 .col-1, .page--sw .emotion--container.emotion--column-12 .col-1 { width: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-1, .page--sw .emotion--container.emotion--column-12 .start-col-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-12 .col-2, .page--sw .emotion--container.emotion--column-12 .col-2 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-2, .page--sw .emotion--container.emotion--column-12 .start-col-2 { left: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-3, .page--sw .emotion--container.emotion--column-12 .col-3 { width: 25%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-3, .page--sw .emotion--container.emotion--column-12 .start-col-3 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-4, .page--sw .emotion--container.emotion--column-12 .col-4 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-4, .page--sw .emotion--container.emotion--column-12 .start-col-4 { left: 25%; } .js--modal .content .emotion--container.emotion--column-12 .col-5, .page--sw .emotion--container.emotion--column-12 .col-5 { width: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-5, .page--sw .emotion--container.emotion--column-12 .start-col-5 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-6, .page--sw .emotion--container.emotion--column-12 .col-6 { width: 50%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-6, .page--sw .emotion--container.emotion--column-12 .start-col-6 { left: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-7, .page--sw .emotion--container.emotion--column-12 .col-7 { width: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-7, .page--sw .emotion--container.emotion--column-12 .start-col-7 { left: 50%; } .js--modal .content .emotion--container.emotion--column-12 .col-8, .page--sw .emotion--container.emotion--column-12 .col-8 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-8, .page--sw .emotion--container.emotion--column-12 .start-col-8 { left: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-9, .page--sw .emotion--container.emotion--column-12 .col-9 { width: 75%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-9, .page--sw .emotion--container.emotion--column-12 .start-col-9 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-10, .page--sw .emotion--container.emotion--column-12 .col-10 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-10, .page--sw .emotion--container.emotion--column-12 .start-col-10 { left: 75%; } .js--modal .content .emotion--container.emotion--column-12 .col-11, .page--sw .emotion--container.emotion--column-12 .col-11 { width: 91.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-11, .page--sw .emotion--container.emotion--column-12 .start-col-11 { left: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-12, .page--sw .emotion--container.emotion--column-12 .col-12 { width: 100%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-12, .page--sw .emotion--container.emotion--column-12 .start-col-12 { left: 91.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-1, .page--sw .emotion--container.emotion--column-12 .col-xs-1 { width: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-1, .page--sw .emotion--container.emotion--column-12 .start-col-xs-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-2, .page--sw .emotion--container.emotion--column-12 .col-xs-2 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-2, .page--sw .emotion--container.emotion--column-12 .start-col-xs-2 { left: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-3, .page--sw .emotion--container.emotion--column-12 .col-xs-3 { width: 25%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-3, .page--sw .emotion--container.emotion--column-12 .start-col-xs-3 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-4, .page--sw .emotion--container.emotion--column-12 .col-xs-4 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-4, .page--sw .emotion--container.emotion--column-12 .start-col-xs-4 { left: 25%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-5, .page--sw .emotion--container.emotion--column-12 .col-xs-5 { width: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-5, .page--sw .emotion--container.emotion--column-12 .start-col-xs-5 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-6, .page--sw .emotion--container.emotion--column-12 .col-xs-6 { width: 50%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-6, .page--sw .emotion--container.emotion--column-12 .start-col-xs-6 { left: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-7, .page--sw .emotion--container.emotion--column-12 .col-xs-7 { width: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-7, .page--sw .emotion--container.emotion--column-12 .start-col-xs-7 { left: 50%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-8, .page--sw .emotion--container.emotion--column-12 .col-xs-8 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-8, .page--sw .emotion--container.emotion--column-12 .start-col-xs-8 { left: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-9, .page--sw .emotion--container.emotion--column-12 .col-xs-9 { width: 75%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-9, .page--sw .emotion--container.emotion--column-12 .start-col-xs-9 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-10, .page--sw .emotion--container.emotion--column-12 .col-xs-10 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-10, .page--sw .emotion--container.emotion--column-12 .start-col-xs-10 { left: 75%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-11, .page--sw .emotion--container.emotion--column-12 .col-xs-11 { width: 91.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-11, .page--sw .emotion--container.emotion--column-12 .start-col-xs-11 { left: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-xs-12, .page--sw .emotion--container.emotion--column-12 .col-xs-12 { width: 100%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xs-12, .page--sw .emotion--container.emotion--column-12 .start-col-xs-12 { left: 91.66666667%; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container.emotion--column-12 .col-s-1, .page--sw .emotion--container.emotion--column-12 .col-s-1 { width: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-1, .page--sw .emotion--container.emotion--column-12 .start-col-s-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-2, .page--sw .emotion--container.emotion--column-12 .col-s-2 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-2, .page--sw .emotion--container.emotion--column-12 .start-col-s-2 { left: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-3, .page--sw .emotion--container.emotion--column-12 .col-s-3 { width: 25%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-3, .page--sw .emotion--container.emotion--column-12 .start-col-s-3 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-4, .page--sw .emotion--container.emotion--column-12 .col-s-4 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-4, .page--sw .emotion--container.emotion--column-12 .start-col-s-4 { left: 25%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-5, .page--sw .emotion--container.emotion--column-12 .col-s-5 { width: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-5, .page--sw .emotion--container.emotion--column-12 .start-col-s-5 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-6, .page--sw .emotion--container.emotion--column-12 .col-s-6 { width: 50%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-6, .page--sw .emotion--container.emotion--column-12 .start-col-s-6 { left: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-7, .page--sw .emotion--container.emotion--column-12 .col-s-7 { width: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-7, .page--sw .emotion--container.emotion--column-12 .start-col-s-7 { left: 50%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-8, .page--sw .emotion--container.emotion--column-12 .col-s-8 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-8, .page--sw .emotion--container.emotion--column-12 .start-col-s-8 { left: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-9, .page--sw .emotion--container.emotion--column-12 .col-s-9 { width: 75%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-9, .page--sw .emotion--container.emotion--column-12 .start-col-s-9 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-10, .page--sw .emotion--container.emotion--column-12 .col-s-10 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-10, .page--sw .emotion--container.emotion--column-12 .start-col-s-10 { left: 75%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-11, .page--sw .emotion--container.emotion--column-12 .col-s-11 { width: 91.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-11, .page--sw .emotion--container.emotion--column-12 .start-col-s-11 { left: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-s-12, .page--sw .emotion--container.emotion--column-12 .col-s-12 { width: 100%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-s-12, .page--sw .emotion--container.emotion--column-12 .start-col-s-12 { left: 91.66666667%; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container.emotion--column-12 .col-m-1, .page--sw .emotion--container.emotion--column-12 .col-m-1 { width: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-1, .page--sw .emotion--container.emotion--column-12 .start-col-m-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-2, .page--sw .emotion--container.emotion--column-12 .col-m-2 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-2, .page--sw .emotion--container.emotion--column-12 .start-col-m-2 { left: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-3, .page--sw .emotion--container.emotion--column-12 .col-m-3 { width: 25%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-3, .page--sw .emotion--container.emotion--column-12 .start-col-m-3 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-4, .page--sw .emotion--container.emotion--column-12 .col-m-4 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-4, .page--sw .emotion--container.emotion--column-12 .start-col-m-4 { left: 25%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-5, .page--sw .emotion--container.emotion--column-12 .col-m-5 { width: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-5, .page--sw .emotion--container.emotion--column-12 .start-col-m-5 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-6, .page--sw .emotion--container.emotion--column-12 .col-m-6 { width: 50%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-6, .page--sw .emotion--container.emotion--column-12 .start-col-m-6 { left: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-7, .page--sw .emotion--container.emotion--column-12 .col-m-7 { width: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-7, .page--sw .emotion--container.emotion--column-12 .start-col-m-7 { left: 50%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-8, .page--sw .emotion--container.emotion--column-12 .col-m-8 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-8, .page--sw .emotion--container.emotion--column-12 .start-col-m-8 { left: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-9, .page--sw .emotion--container.emotion--column-12 .col-m-9 { width: 75%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-9, .page--sw .emotion--container.emotion--column-12 .start-col-m-9 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-10, .page--sw .emotion--container.emotion--column-12 .col-m-10 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-10, .page--sw .emotion--container.emotion--column-12 .start-col-m-10 { left: 75%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-11, .page--sw .emotion--container.emotion--column-12 .col-m-11 { width: 91.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-11, .page--sw .emotion--container.emotion--column-12 .start-col-m-11 { left: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-m-12, .page--sw .emotion--container.emotion--column-12 .col-m-12 { width: 100%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-m-12, .page--sw .emotion--container.emotion--column-12 .start-col-m-12 { left: 91.66666667%; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container.emotion--column-12 .col-l-1, .page--sw .emotion--container.emotion--column-12 .col-l-1 { width: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-1, .page--sw .emotion--container.emotion--column-12 .start-col-l-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-2, .page--sw .emotion--container.emotion--column-12 .col-l-2 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-2, .page--sw .emotion--container.emotion--column-12 .start-col-l-2 { left: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-3, .page--sw .emotion--container.emotion--column-12 .col-l-3 { width: 25%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-3, .page--sw .emotion--container.emotion--column-12 .start-col-l-3 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-4, .page--sw .emotion--container.emotion--column-12 .col-l-4 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-4, .page--sw .emotion--container.emotion--column-12 .start-col-l-4 { left: 25%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-5, .page--sw .emotion--container.emotion--column-12 .col-l-5 { width: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-5, .page--sw .emotion--container.emotion--column-12 .start-col-l-5 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-6, .page--sw .emotion--container.emotion--column-12 .col-l-6 { width: 50%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-6, .page--sw .emotion--container.emotion--column-12 .start-col-l-6 { left: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-7, .page--sw .emotion--container.emotion--column-12 .col-l-7 { width: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-7, .page--sw .emotion--container.emotion--column-12 .start-col-l-7 { left: 50%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-8, .page--sw .emotion--container.emotion--column-12 .col-l-8 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-8, .page--sw .emotion--container.emotion--column-12 .start-col-l-8 { left: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-9, .page--sw .emotion--container.emotion--column-12 .col-l-9 { width: 75%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-9, .page--sw .emotion--container.emotion--column-12 .start-col-l-9 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-10, .page--sw .emotion--container.emotion--column-12 .col-l-10 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-10, .page--sw .emotion--container.emotion--column-12 .start-col-l-10 { left: 75%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-11, .page--sw .emotion--container.emotion--column-12 .col-l-11 { width: 91.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-11, .page--sw .emotion--container.emotion--column-12 .start-col-l-11 { left: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-l-12, .page--sw .emotion--container.emotion--column-12 .col-l-12 { width: 100%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-l-12, .page--sw .emotion--container.emotion--column-12 .start-col-l-12 { left: 91.66666667%; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container.emotion--column-12 .col-xl-1, .page--sw .emotion--container.emotion--column-12 .col-xl-1 { width: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-1, .page--sw .emotion--container.emotion--column-12 .start-col-xl-1 { left: 0%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-2, .page--sw .emotion--container.emotion--column-12 .col-xl-2 { width: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-2, .page--sw .emotion--container.emotion--column-12 .start-col-xl-2 { left: 8.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-3, .page--sw .emotion--container.emotion--column-12 .col-xl-3 { width: 25%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-3, .page--sw .emotion--container.emotion--column-12 .start-col-xl-3 { left: 16.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-4, .page--sw .emotion--container.emotion--column-12 .col-xl-4 { width: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-4, .page--sw .emotion--container.emotion--column-12 .start-col-xl-4 { left: 25%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-5, .page--sw .emotion--container.emotion--column-12 .col-xl-5 { width: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-5, .page--sw .emotion--container.emotion--column-12 .start-col-xl-5 { left: 33.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-6, .page--sw .emotion--container.emotion--column-12 .col-xl-6 { width: 50%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-6, .page--sw .emotion--container.emotion--column-12 .start-col-xl-6 { left: 41.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-7, .page--sw .emotion--container.emotion--column-12 .col-xl-7 { width: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-7, .page--sw .emotion--container.emotion--column-12 .start-col-xl-7 { left: 50%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-8, .page--sw .emotion--container.emotion--column-12 .col-xl-8 { width: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-8, .page--sw .emotion--container.emotion--column-12 .start-col-xl-8 { left: 58.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-9, .page--sw .emotion--container.emotion--column-12 .col-xl-9 { width: 75%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-9, .page--sw .emotion--container.emotion--column-12 .start-col-xl-9 { left: 66.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-10, .page--sw .emotion--container.emotion--column-12 .col-xl-10 { width: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-10, .page--sw .emotion--container.emotion--column-12 .start-col-xl-10 { left: 75%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-11, .page--sw .emotion--container.emotion--column-12 .col-xl-11 { width: 91.66666667%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-11, .page--sw .emotion--container.emotion--column-12 .start-col-xl-11 { left: 83.33333333%; } .js--modal .content .emotion--container.emotion--column-12 .col-xl-12, .page--sw .emotion--container.emotion--column-12 .col-xl-12 { width: 100%; } .js--modal .content .emotion--container.emotion--column-12 .start-col-xl-12, .page--sw .emotion--container.emotion--column-12 .start-col-xl-12 { left: 91.66666667%; } } .js--modal .content .emotion--container .is--hidden-s, .page--sw .emotion--container .is--hidden-s, .js--modal .content .emotion--container .is--hidden-m, .page--sw .emotion--container .is--hidden-m, .js--modal .content .emotion--container .is--hidden-l, .page--sw .emotion--container .is--hidden-l, .js--modal .content .emotion--container .is--hidden-xl, .page--sw .emotion--container .is--hidden-xl { display: block; } .js--modal .content .emotion--container .is--hidden-xs, .page--sw .emotion--container .is--hidden-xs { display: none; } .js--modal .content .emotion--container .emotion--sizer-s, .page--sw .emotion--container .emotion--sizer-s, .js--modal .content .emotion--container .emotion--sizer-m, .page--sw .emotion--container .emotion--sizer-m, .js--modal .content .emotion--container .emotion--sizer-l, .page--sw .emotion--container .emotion--sizer-l, .js--modal .content .emotion--container .emotion--sizer-xl, .page--sw .emotion--container .emotion--sizer-xl { display: none; } .js--modal .content .emotion--container .emotion--sizer-xs, .page--sw .emotion--container .emotion--sizer-xs { display: block; } .js--modal .content .emotion--container .emotion--sizer-xs ~ .emotion--sizer, .page--sw .emotion--container .emotion--sizer-xs ~ .emotion--sizer { display: none; } @media screen and (min-width: 30em) { .js--modal .content .emotion--container .is--hidden-xs, .page--sw .emotion--container .is--hidden-xs, .js--modal .content .emotion--container .is--hidden-m, .page--sw .emotion--container .is--hidden-m, .js--modal .content .emotion--container .is--hidden-l, .page--sw .emotion--container .is--hidden-l, .js--modal .content .emotion--container .is--hidden-xl, .page--sw .emotion--container .is--hidden-xl { display: block; } .js--modal .content .emotion--container .is--hidden-s, .page--sw .emotion--container .is--hidden-s { display: none; } .js--modal .content .emotion--container .emotion--sizer-xs, .page--sw .emotion--container .emotion--sizer-xs, .js--modal .content .emotion--container .emotion--sizer-m, .page--sw .emotion--container .emotion--sizer-m, .js--modal .content .emotion--container .emotion--sizer-l, .page--sw .emotion--container .emotion--sizer-l, .js--modal .content .emotion--container .emotion--sizer-xl, .page--sw .emotion--container .emotion--sizer-xl { display: none; } .js--modal .content .emotion--container .emotion--sizer-s, .page--sw .emotion--container .emotion--sizer-s { display: block; } .js--modal .content .emotion--container .emotion--sizer-s ~ .emotion--sizer, .page--sw .emotion--container .emotion--sizer-s ~ .emotion--sizer { display: none; } } @media screen and (min-width: 48em) { .js--modal .content .emotion--container .is--hidden-xs, .page--sw .emotion--container .is--hidden-xs, .js--modal .content .emotion--container .is--hidden-s, .page--sw .emotion--container .is--hidden-s, .js--modal .content .emotion--container .is--hidden-l, .page--sw .emotion--container .is--hidden-l, .js--modal .content .emotion--container .is--hidden-xl, .page--sw .emotion--container .is--hidden-xl { display: block; } .js--modal .content .emotion--container .is--hidden-m, .page--sw .emotion--container .is--hidden-m { display: none; } .js--modal .content .emotion--container .emotion--sizer-s, .page--sw .emotion--container .emotion--sizer-s, .js--modal .content .emotion--container .emotion--sizer-xs, .page--sw .emotion--container .emotion--sizer-xs, .js--modal .content .emotion--container .emotion--sizer-l, .page--sw .emotion--container .emotion--sizer-l, .js--modal .content .emotion--container .emotion--sizer-xl, .page--sw .emotion--container .emotion--sizer-xl { display: none; } .js--modal .content .emotion--container .emotion--sizer-m, .page--sw .emotion--container .emotion--sizer-m { display: block; } .js--modal .content .emotion--container .emotion--sizer-m ~ .emotion--sizer, .page--sw .emotion--container .emotion--sizer-m ~ .emotion--sizer { display: none; } } @media screen and (min-width: 64em) { .js--modal .content .emotion--container .is--hidden-xs, .page--sw .emotion--container .is--hidden-xs, .js--modal .content .emotion--container .is--hidden-s, .page--sw .emotion--container .is--hidden-s, .js--modal .content .emotion--container .is--hidden-m, .page--sw .emotion--container .is--hidden-m, .js--modal .content .emotion--container .is--hidden-xl, .page--sw .emotion--container .is--hidden-xl { display: block; } .js--modal .content .emotion--container .is--hidden-l, .page--sw .emotion--container .is--hidden-l { display: none; } .js--modal .content .emotion--container .emotion--sizer-xs, .page--sw .emotion--container .emotion--sizer-xs, .js--modal .content .emotion--container .emotion--sizer-s, .page--sw .emotion--container .emotion--sizer-s, .js--modal .content .emotion--container .emotion--sizer-m, .page--sw .emotion--container .emotion--sizer-m, .js--modal .content .emotion--container .emotion--sizer-xl, .page--sw .emotion--container .emotion--sizer-xl { display: none; } .js--modal .content .emotion--container .emotion--sizer-l, .page--sw .emotion--container .emotion--sizer-l { display: block; } .js--modal .content .emotion--container .emotion--sizer-l ~ .emotion--sizer, .page--sw .emotion--container .emotion--sizer-l ~ .emotion--sizer { display: none; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--container .is--hidden-xs, .page--sw .emotion--container .is--hidden-xs, .js--modal .content .emotion--container .is--hidden-s, .page--sw .emotion--container .is--hidden-s, .js--modal .content .emotion--container .is--hidden-m, .page--sw .emotion--container .is--hidden-m, .js--modal .content .emotion--container .is--hidden-l, .page--sw .emotion--container .is--hidden-l { display: block; } .js--modal .content .emotion--container .is--hidden-xl, .page--sw .emotion--container .is--hidden-xl { display: none; } .js--modal .content .emotion--container .emotion--sizer-s, .page--sw .emotion--container .emotion--sizer-s, .js--modal .content .emotion--container .emotion--sizer-xs, .page--sw .emotion--container .emotion--sizer-xs, .js--modal .content .emotion--container .emotion--sizer-m, .page--sw .emotion--container .emotion--sizer-m, .js--modal .content .emotion--container .emotion--sizer-l, .page--sw .emotion--container .emotion--sizer-l { display: none; } .js--modal .content .emotion--container .emotion--sizer-xl, .page--sw .emotion--container .emotion--sizer-xl { display: block; } .js--modal .content .emotion--container .emotion--sizer-xl ~ .emotion--sizer, .page--sw .emotion--container .emotion--sizer-xl ~ .emotion--sizer { display: none; } } .js--modal .content .emotion--element, .page--sw .emotion--element { display: block; position: absolute; top: 0; left: 0; } .emotion--container.emotion--mode-rows .js--modal .content .emotion--element, .emotion--container.emotion--mode-rows .page--sw .emotion--element { position: relative; top: 0; left: 0; float: left; vertical-align: top; } .js--modal .content .emotion--banner, .page--sw .emotion--banner { height: auto; width: 100%; position: relative; overflow: hidden; } .js--modal .content .emotion--banner .banner--content, .page--sw .emotion--banner .banner--content { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; position: absolute; top: 50%; left: 50%; } .js--modal .content .emotion--banner .banner--content.left.top, .page--sw .emotion--banner .banner--content.left.top { -webkit-transform: translate(0, 0); transform: translate(0, 0); left: 0; top: 0; } .js--modal .content .emotion--banner .banner--content.left.center, .page--sw .emotion--banner .banner--content.left.center { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); left: 0; top: 50%; } .js--modal .content .emotion--banner .banner--content.left.bottom, .page--sw .emotion--banner .banner--content.left.bottom { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); left: 0; top: 100%; } .js--modal .content .emotion--banner .banner--content.center.top, .page--sw .emotion--banner .banner--content.center.top { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; top: 0; } .js--modal .content .emotion--banner .banner--content.center.bottom, .page--sw .emotion--banner .banner--content.center.bottom { -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); left: 50%; top: 100%; } .js--modal .content .emotion--banner .banner--content.right.top, .page--sw .emotion--banner .banner--content.right.top { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); left: 100%; top: 0; } .js--modal .content .emotion--banner .banner--content.right.center, .page--sw .emotion--banner .banner--content.right.center { -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); left: 100%; top: 50%; } .js--modal .content .emotion--banner .banner--content.right.bottom, .page--sw .emotion--banner .banner--content.right.bottom { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); left: 100%; top: 100%; } .emotion--mode-rows .js--modal .content .emotion--banner, .emotion--mode-rows .page--sw .emotion--banner { height: auto; } .emotion--mode-rows .js--modal .content .emotion--banner .banner--content, .emotion--mode-rows .page--sw .emotion--banner .banner--content, .emotion--mode-rows .js--modal .content .emotion--banner .banner--content.left.top, .emotion--mode-rows .page--sw .emotion--banner .banner--content.left.top, .emotion--mode-rows .js--modal .content .emotion--banner .banner--content.left.center, .emotion--mode-rows .page--sw .emotion--banner .banner--content.left.center, .emotion--mode-rows .js--modal .content .emotion--banner .banner--content.left.bottom, .emotion--mode-rows .page--sw .emotion--banner .banner--content.left.bottom, .emotion--mode-rows .js--modal .content .emotion--banner .banner--content.center.top, .emotion--mode-rows .page--sw .emotion--banner .banner--content.center.top, .emotion--mode-rows .js--modal .content .emotion--banner .banner--content.center.bottom, .emotion--mode-rows .page--sw .emotion--banner .banner--content.center.bottom, .emotion--mode-rows .js--modal .content .emotion--banner .banner--content.right.top, .emotion--mode-rows .page--sw .emotion--banner .banner--content.right.top, .emotion--mode-rows .js--modal .content .emotion--banner .banner--content.right.center, .emotion--mode-rows .page--sw .emotion--banner .banner--content.right.center, .emotion--mode-rows .js--modal .content .emotion--banner .banner--content.right.bottom, .emotion--mode-rows .page--sw .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 .js--modal .content .emotion--banner .banner--image-src, .emotion--mode-rows .page--sw .emotion--banner .banner--image-src { max-height: none; width: 100%; } .js--modal .content .emotion--banner .banner--image, .page--sw .emotion--banner .banner--image { width: 100%; } .js--modal .content .emotion--banner .banner--link, .page--sw .emotion--banner .banner--link { display: block; width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 110; } .js--modal .content .emotion--banner .banner--mapping, .page--sw .emotion--banner .banner--mapping { display: block; width: 100%; height: auto; position: absolute; top: 0; left: 0; } .js--modal .content .emotion--banner .banner--mapping-link, .page--sw .emotion--banner .banner--mapping-link { position: absolute; display: block; z-index: 110; background: rgba(0, 0, 0, 0); } .js--modal .content .emotion--banner-slider, .page--sw .emotion--banner-slider { width: 100%; height: auto; } .emotion--mode-rows .js--modal .content .emotion--banner-slider, .emotion--mode-rows .page--sw .emotion--banner-slider { height: auto; } .emotion--mode-rows .js--modal .content .emotion--banner-slider .banner-slider--container, .emotion--mode-rows .page--sw .emotion--banner-slider .banner-slider--container, .emotion--mode-rows .js--modal .content .emotion--banner-slider .banner-slider--slide, .emotion--mode-rows .page--sw .emotion--banner-slider .banner-slider--slide { height: auto; } .emotion--mode-rows .js--modal .content .emotion--banner-slider .banner-slider--item, .emotion--mode-rows .page--sw .emotion--banner-slider .banner-slider--item { vertical-align: middle; } .emotion--mode-rows .js--modal .content .emotion--banner-slider .banner-slider--banner, .emotion--mode-rows .page--sw .emotion--banner-slider .banner-slider--banner { -webkit-transform: none; transform: none; position: relative; top: 0; left: 0; width: 100%; } .js--modal .content .emotion--banner-slider .banner-slider--title, .page--sw .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; } .js--modal .content .emotion--banner-slider .banner-slider--container, .page--sw .emotion--banner-slider .banner-slider--container, .js--modal .content .emotion--banner-slider .banner-slider--slide, .page--sw .emotion--banner-slider .banner-slider--slide { width: 100%; height: auto; } .js--modal .content .emotion--banner-slider .banner-slider--container .arrow, .page--sw .emotion--banner-slider .banner-slider--container .arrow { display: block; } .js--modal .content .emotion--banner-slider .banner-slider--item, .page--sw .emotion--banner-slider .banner-slider--item { width: 100%; height: auto; position: relative; overflow: hidden; } .js--modal .content .emotion--banner-slider .banner-slider--banner, .page--sw .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; } .js--modal .content .emotion--banner-slider .banner-slider--image, .page--sw .emotion--banner-slider .banner-slider--image { width: 100%; } .js--modal .content .emotion--banner-slider .banner-slider--link, .page--sw .emotion--banner-slider .banner-slider--link { display: block; height: auto; width: 100%; position: absolute; top: 0; left: 0; z-index: 200; text-indent: 200%; white-space: nowrap; overflow: hidden; } .js--modal .content .emotion--banner-slider .image-slider--dots, .page--sw .emotion--banner-slider .image-slider--dots { display: none; } .js--modal .content .emotion--product-slider, .page--sw .emotion--product-slider { width: 100%; height: auto; position: relative; } .emotion--mode-rows .js--modal .content .emotion--product-slider, .emotion--mode-rows .page--sw .emotion--product-slider { height: 22.5rem; } .js--modal .content .emotion--product-slider .product-slider--title, .page--sw .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; } .js--modal .content .emotion--product-slider .product-slider--content, .page--sw .emotion--product-slider .product-slider--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: auto; width: 100%; position: absolute; top: 0; left: 0; z-index: 400; } .js--modal .content .emotion--product-slider .product-slider--title ~ .product-slider--content, .page--sw .emotion--product-slider .product-slider--title ~ .product-slider--content { padding-top: 4.0625rem; } .js--modal .content .emotion--product-slider .product-slider--arrow.arrow--next, .page--sw .emotion--product-slider .product-slider--arrow.arrow--next { border-right: 0 none; } .js--modal .content .emotion--product-slider .product-slider--arrow.arrow--prev, .page--sw .emotion--product-slider .product-slider--arrow.arrow--prev { border-left: 0 none; } .js--modal .content .emotion--product-slider .box--emotion, .page--sw .emotion--product-slider .box--emotion { width: 100%; height: auto; padding: 0; text-align: center; } .js--modal .content .emotion--product-slider .box--emotion .box--content, .page--sw .emotion--product-slider .box--emotion .box--content { padding: 0; border: 0 none; } .js--modal .content .emotion--product-slider .box--emotion .product--info, .page--sw .emotion--product-slider .box--emotion .product--info { height: auto; position: relative; overflow: hidden; } .js--modal .content .emotion--product-slider .box--emotion .product--image, .page--sw .emotion--product-slider .box--emotion .product--image { height: 60%; margin: 0 auto; } .js--modal .content .emotion--product-slider .box--emotion .product--details, .page--sw .emotion--product-slider .box--emotion .product--details { max-height: 35%; width: 100%; margin-top: 5%; } .js--modal .content .emotion--product-slider .box--emotion .product--title, .page--sw .emotion--product-slider .box--emotion .product--title { font-size: 0.875rem; font-weight: 400; white-space: normal; } .js--modal .content .emotion--product-slider .box--emotion .product--price-info .price--unit, .page--sw .emotion--product-slider .box--emotion .product--price-info .price--unit { height: 0.9375rem; font-size: 0.625rem; } .js--modal .content .emotion--product-slider .box--emotion .product--price .price--default, .page--sw .emotion--product-slider .box--emotion .product--price .price--default { font-size: 0.875rem; } .js--modal .content .emotion--product, .page--sw .emotion--product { width: 100%; height: auto; } .emotion--mode-rows .js--modal .content .emotion--product, .emotion--mode-rows .page--sw .emotion--product { height: 22.5rem; } .js--modal .content .emotion--product.is--no-border .box--content, .page--sw .emotion--product.is--no-border .box--content { border: 0 none; } .js--modal .content .emotion--product .product--box, .page--sw .emotion--product .product--box { width: 100%; height: auto; padding: 0; float: none; } .js--modal .content .emotion--product .product--box .box--content, .page--sw .emotion--product .product--box .box--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .js--modal .content .emotion--product .product--box .product--info, .page--sw .emotion--product .product--box .product--info { height: auto; position: relative; overflow: hidden; } .js--modal .content .emotion--product .product--box .product--image, .page--sw .emotion--product .product--box .product--image { height: 70%; margin: 0 auto; } .js--modal .content .emotion--product .product--box .product--image.is--large, .page--sw .emotion--product .product--box .product--image.is--large { height: auto; } .js--modal .content .emotion--product .product--box .product--details, .page--sw .emotion--product .product--box .product--details { max-height: 30%; width: 100%; position: absolute; bottom: 0; left: 0; } .js--modal .content .emotion--product .product--box .product--title, .page--sw .emotion--product .product--box .product--title { text-overflow: ellipsis; } .js--modal .content .emotion--category-teaser, .page--sw .emotion--category-teaser { width: 100%; height: auto; } .emotion--mode-rows .js--modal .content .emotion--category-teaser, .emotion--mode-rows .page--sw .emotion--category-teaser { height: 22.5rem; } .js--modal .content .emotion--category-teaser .category-teaser--link, .page--sw .emotion--category-teaser .category-teaser--link { display: block; width: 100%; height: auto; position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: transparent; } .js--modal .content .emotion--category-teaser .category-teaser--title, .page--sw .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; } .js--modal .content .emotion--manufacturer, .page--sw .emotion--manufacturer { width: 100%; height: auto; position: relative; } .emotion--mode-rows .js--modal .content .emotion--manufacturer, .emotion--mode-rows .page--sw .emotion--manufacturer { height: 16.25rem; } .js--modal .content .emotion--manufacturer .manufacturer--title, .page--sw .emotion--manufacturer .manufacturer--title { height: 3.4375rem; position: relative; top: 0; left: 0; z-index: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .js--modal .content .emotion--manufacturer .manufacturer--content, .page--sw .emotion--manufacturer .manufacturer--content { padding: 0.625rem 1.25rem 0.625rem 1.25rem; height: auto; width: 100%; position: absolute; top: 0; left: 0; z-index: 400; } .js--modal .content .emotion--manufacturer .manufacturer--title ~ .manufacturer--content, .page--sw .emotion--manufacturer .manufacturer--title ~ .manufacturer--content { padding-top: 4.0625rem; } .js--modal .content .emotion--manufacturer .manufacturer--slider, .page--sw .emotion--manufacturer .manufacturer--slider { height: auto; } .js--modal .content .emotion--manufacturer .manufacturer--slider .arrow--next, .page--sw .emotion--manufacturer .manufacturer--slider .arrow--next { right: -1.25rem; border-right: 0 none; } .js--modal .content .emotion--manufacturer .manufacturer--slider .arrow--prev, .page--sw .emotion--manufacturer .manufacturer--slider .arrow--prev { left: -1.25rem; border-left: 0 none; } .js--modal .content .emotion--manufacturer .manufacturer--item, .page--sw .emotion--manufacturer .manufacturer--item { padding: 0.625rem 0.9375rem 0.625rem 0.9375rem; text-align: center; vertical-align: middle; } .js--modal .content .emotion--manufacturer .manufacturer--link, .page--sw .emotion--manufacturer .manufacturer--link { font-size: 1.125rem; display: block; width: 100%; height: auto; color: #58514A; font-weight: 700; position: relative; } .js--modal .content .emotion--manufacturer .manufacturer--link:hover, .page--sw .emotion--manufacturer .manufacturer--link:hover { color: #D5101C; } .js--modal .content .emotion--manufacturer .manufacturer--image, .page--sw .emotion--manufacturer .manufacturer--image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .js--modal .content .emotion--youtube, .page--sw .emotion--youtube { width: 100%; height: auto; } .emotion--mode-rows .js--modal .content .emotion--youtube, .emotion--mode-rows .page--sw .emotion--youtube { height: 22.5rem; } .js--modal .content .emotion--video, .page--sw .emotion--video { width: 100%; height: auto; overflow: hidden; position: relative; } .emotion--mode-rows .js--modal .content .emotion--video, .emotion--mode-rows .page--sw .emotion--video { height: auto; } .emotion--mode-rows .js--modal .content .emotion--video .video--element, .emotion--mode-rows .page--sw .emotion--video .video--element { height: auto; position: relative; } .js--modal .content .emotion--video video::-moz-media-controls, .page--sw .emotion--video video::-moz-media-controls, .js--modal .content .emotion--video video::-webkit-media-controls, .page--sw .emotion--video video::-webkit-media-controls { bottom: 15%; } .js--modal .content .emotion--video .video--element, .page--sw .emotion--video .video--element { width: 100%; height: auto; background: #000; position: absolute; top: 0; left: 0; z-index: 1000; } .js--modal .content .emotion--video .video--cover, .page--sw .emotion--video .video--cover { display: block; width: 100%; height: auto; 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; } .js--modal .content .emotion--video .video--cover .video--play-icon, .page--sw .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; } .js--modal .content .emotion--video .video--play-btn, .page--sw .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; } .js--modal .content .emotion--video .video--text, .page--sw .emotion--video .video--text { width: 100%; height: auto; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1100; color: #fff; text-align: center; } .js--modal .content .emotion--video .video--text.no--events, .page--sw .emotion--video .video--text.no--events { pointer-events: none; } .js--modal .content .emotion--iframe, .page--sw .emotion--iframe { width: 100%; height: auto; } .emotion--mode-rows .js--modal .content .emotion--iframe, .emotion--mode-rows .page--sw .emotion--iframe { height: 22.5rem; } .js--modal .content .emotion--blog, .page--sw .emotion--blog { width: 100%; height: auto; overflow: auto; } .emotion--mode-rows .js--modal .content .emotion--blog, .emotion--mode-rows .page--sw .emotion--blog { height: auto; } .emotion--mode-rows .js--modal .content .emotion--blog .blog--image, .emotion--mode-rows .page--sw .emotion--blog .blog--image { height: 10rem; } .js--modal .content .emotion--blog .blog--container, .page--sw .emotion--blog .blog--container { height: auto; margin: 0 0 0 -1%; } .js--modal .content .emotion--blog .blog--entry, .page--sw .emotion--blog .blog--entry { height: auto; padding-left: 1%; } .js--modal .content .emotion--blog .blog--image, .page--sw .emotion--blog .blog--image { height: 40%; width: 100%; display: block; background-position: center center; background-size: cover; margin-bottom: 2%; } .js--modal .content .emotion--blog .blog--title, .page--sw .emotion--blog .blog--title { font-size: 0.875rem; display: block; font-weight: 700; color: #000; margin-bottom: 2%; } .js--modal .content .emotion--blog .blog--title:hover, .page--sw .emotion--blog .blog--title:hover { color: #D5101C; } .js--modal .content .emotion--blog .blog--description, .page--sw .emotion--blog .blog--description { font-size: 0.875rem; line-height: 1.25rem; color: #58514A; height: auto; max-height: 60%; } .js--modal .content .emotion--html, .page--sw .emotion--html { width: 100%; height: auto; position: relative; overflow: auto; } .emotion--mode-rows .js--modal .content .emotion--html, .emotion--mode-rows .page--sw .emotion--html { height: auto; } .js--modal .content .emotion--html .html--content :last-child, .page--sw .emotion--html .html--content :last-child { margin-bottom: 0; } @media screen and (min-width: 48em) { .js--modal .content .emotion--blog, .page--sw .emotion--blog { overflow: hidden; } } @media screen and (min-width: 78.75em) { .js--modal .content .emotion--banner-slider .image-slider--dots, .page--sw .emotion--banner-slider .image-slider--dots { bottom: 0.625rem; top: auto; left: 0; display: block; position: absolute; width: 100%; text-align: center; padding: 0; } .js--modal .content .emotion--banner-slider .image-slider--dots .dot--link, .page--sw .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: #d9d9d9; display: inline-block; border: 5px solid rgba(255, 255, 255, 0.5); cursor: pointer; text-indent: -99999em; background-clip: padding-box; } .js--modal .content .emotion--banner-slider .image-slider--dots .dot--link.is--active, .page--sw .emotion--banner-slider .image-slider--dots .dot--link.is--active { background: #D5101C; background-clip: padding-box; } } .js--modal .content .panel, .page--sw .panel { display: block; background: #FFFFFF; } .js--modal .content .panel.has--shadow, .page--sw .panel.has--shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } .js--modal .content .panel.has--border, .page--sw .panel.has--border { border: 1px solid #707070; } .js--modal .content .panel--header, .page--sw .panel--header { padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 1rem; background: #f8f8fa; display: block; margin: 0; font-weight: 700; color: #58514A; border-bottom: 1px solid #707070; } .js--modal .content .panel--header.secondary, .page--sw .panel--header.secondary { color: #58514A; background: #fff; } .js--modal .content .panel--header.primary, .page--sw .panel--header.primary { color: #D5101C; background: #fff; } .js--modal .content .panel--title, .page--sw .panel--title { padding: 1.25rem 0rem 0rem 0rem; margin: 0rem 1.25rem 0rem 1.25rem; font-size: 1rem; display: block; font-weight: 700; color: #000; } .js--modal .content .panel--title.is--underline, .page--sw .panel--title.is--underline { padding: 1.25rem 0rem 0.625rem 0rem; border-bottom: 1px solid #707070; text-decoration: none !important; } .js--modal .content .panel--title.is--secondary, .page--sw .panel--title.is--secondary { color: #58514A; } .js--modal .content .panel--title.is--primary, .page--sw .panel--title.is--primary { color: #D5101C; } .js--modal .content .panel--body, .page--sw .panel--body { padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 0.875rem; line-height: 1.5rem; display: block; position: relative; } .js--modal .content .panel--body.has--border, .page--sw .panel--body.has--border { border: 1px solid #707070; } .js--modal .content .panel--body.is--slim, .page--sw .panel--body.is--slim { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } .js--modal .content .panel--body.is--wide, .page--sw .panel--body.is--wide { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .js--modal .content .panel--body.is--flat, .page--sw .panel--body.is--flat { background: #F5F5F8; } .js--modal .content .panel--body.is--embossed, .page--sw .panel--body.is--embossed { box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); background: #F5F5F8; } .js--modal .content .panel--actions, .page--sw .panel--actions { padding: 0.625rem 0.625rem 0.625rem 0.625rem; line-height: 2.5rem; display: block; } .js--modal .content .panel--actions.has--border, .page--sw .panel--actions.has--border { margin: 0.625rem 0rem 0rem 0rem; padding: 0.625rem 0rem 0rem 0rem; border-top: 1px solid #707070; } .js--modal .content .panel--actions.is--slim, .page--sw .panel--actions.is--slim { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } .js--modal .content .panel--actions.is--wide, .page--sw .panel--actions.is--wide { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .js--modal .content .panel--actions .btn, .page--sw .panel--actions .btn { margin: 0rem 0.375rem 0rem 0rem; } .js--modal .content .panel--table, .page--sw .panel--table { width: 100%; display: block; border-collapse: collapse; border-spacing: 0; empty-cells: show; } .js--modal .content .panel--table:after, .page--sw .panel--table:after { content: ""; display: table; clear: both; } .js--modal .content .panel--table.has--border, .page--sw .panel--table.has--border { border: 1px solid #707070; } .js--modal .content .panel--tr, .page--sw .panel--tr { display: block; width: 100%; border-width: 0 0 1px 0; border-style: solid; border-color: #707070; } .js--modal .content .panel--tr:after, .page--sw .panel--tr:after { content: ""; display: table; clear: both; } .js--modal .content .panel--tr:last-child, .page--sw .panel--tr:last-child { border-width: 0; } .js--modal .content .panel--tr.is--odd, .page--sw .panel--tr.is--odd { background: #f5f5f5; } .js--modal .content .panel--tr.is--secondary, .page--sw .panel--tr.is--secondary { background: #f5f5f5; } .js--modal .content .panel--tr.is--primary, .page--sw .panel--tr.is--primary { color: #D5101C; } .js--modal .content .panel--th, .page--sw .panel--th, .js--modal .content .panel--td, .page--sw .panel--td { padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 0.875rem; line-height: 1.5rem; display: inline-block; float: left; } .js--modal .content .panel--th:after, .page--sw .panel--th:after, .js--modal .content .panel--td:after, .page--sw .panel--td:after { content: ""; display: table; clear: both; } .js--modal .content .panel--th.has--border, .page--sw .panel--th.has--border, .js--modal .content .panel--td.has--border, .page--sw .panel--td.has--border { border-width: 0 1px 0 0; border-style: solid; border-color: #707070; } .js--modal .content .panel--th.has--border:last-child, .page--sw .panel--th.has--border:last-child, .js--modal .content .panel--td.has--border:last-child, .page--sw .panel--td.has--border:last-child { border-width: 0; } .js--modal .content .panel--th p, .page--sw .panel--th p, .js--modal .content .panel--td p, .page--sw .panel--td p { margin: 0; } .js--modal .content .panel--th, .page--sw .panel--th { font-weight: 700; color: #000; } .js--modal .content .panel--dot-nav, .page--sw .panel--dot-nav { height: 0.6875rem; position: relative; } .js--modal .content .panel--dot-nav .dot--link, .page--sw .panel--dot-nav .dot--link, .js--modal .content .panel--dot-nav a, .page--sw .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 #707070; } .js--modal .content .panel--dot-nav .dot--link.is--active, .page--sw .panel--dot-nav .dot--link.is--active, .js--modal .content .panel--dot-nav a.is--active, .page--sw .panel--dot-nav a.is--active { border-color: #D5101C; background: #D5101C; } .js--modal .content .panel--paging, .page--sw .panel--paging { line-height: 2rem; display: inline-block; } .js--modal .content .panel--paging .paging--link, .page--sw .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: #58514A; background-image: linear-gradient(to bottom, #58514A 0%, #58514A 100%); display: inline-block; font-weight: 400; text-align: center; border: 1px solid #58514A; color: #fff; } .js--modal .content .panel--paging .paging--link [class^="icon--"], .page--sw .panel--paging .paging--link [class^="icon--"] { font-size: 0.625rem; } .js--modal .content .panel--paging .paging--link.is--active, .page--sw .panel--paging .paging--link.is--active, .js--modal .content .panel--paging .paging--link.is--active:hover, .page--sw .panel--paging .paging--link.is--active:hover { line-height: 2rem; background-color: #D5101C; background-image: linear-gradient(to bottom, #D5101C 0%, #D5101C 100%); color: #FFFFFF; border: 0 none; font-weight: 700; cursor: default; } .js--modal .content .panel--paging .paging--link:hover, .page--sw .panel--paging .paging--link:hover { background: #FFFFFF; color: #58514A; border-color: #58514A; } .js--modal .content .alert, .page--sw .alert { font-size: 0.875rem; line-height: 1.5rem; position: relative; overflow: hidden; /* ######With an Icon inside of the box. ```
    Success message with Icon
    Warning message with Icon
    ``` */ } .js--modal .content .alert:after, .page--sw .alert:after { content: ""; display: table; clear: both; } .js--modal .content .alert.is--success, .page--sw .alert.is--success { color: #208e4e; background: #def2e7; } .js--modal .content .alert.is--success .alert--icon, .page--sw .alert.is--success .alert--icon { background: #2ECC71; } .js--modal .content .alert.is--info, .page--sw .alert.is--info { color: #217dbb; background: #e9f2f8; } .js--modal .content .alert.is--info .alert--icon, .page--sw .alert.is--info .alert--icon { background: #4AA3DF; } .js--modal .content .alert.is--warning, .page--sw .alert.is--warning { color: #ae8e0a; background: #fbf5db; } .js--modal .content .alert.is--warning .alert--icon, .page--sw .alert.is--warning .alert--icon { background: #F1C40F; } .js--modal .content .alert.is--error, .page--sw .alert.is--error { color: #E74C3C; background: #faeceb; } .js--modal .content .alert.is--error .alert--icon, .page--sw .alert.is--error .alert--icon { background: #E74C3C; } .js--modal .content .alert.no--cookies, .page--sw .alert.no--cookies { position: fixed; z-index: 99999; top: 0; left: 0; right: 0; } .js--modal .content .alert.no--cookies a.close--alert, .page--sw .alert.no--cookies a.close--alert { float: right; } .js--modal .content .alert.no--cookies a.close--alert:hover, .page--sw .alert.no--cookies a.close--alert:hover { cursor: pointer; text-decoration: underline; } .js--modal .content .alert .alert--close, .page--sw .alert .alert--close { position: absolute; top: 1.0625rem; right: 1.25rem; font-size: 0.625rem; color: #fff; cursor: pointer; } .js--modal .content .alert .icon--element, .page--sw .alert .icon--element { position: absolute; top: 50%; left: 0; width: 15%; margin-top: -9px; } .js--modal .content .alert .alert--icon, .page--sw .alert .alert--icon, .js--modal .content .alert .alert--content, .page--sw .alert .alert--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; float: left; } .js--modal .content .alert .alert--icon p, .page--sw .alert .alert--icon p, .js--modal .content .alert .alert--content p, .page--sw .alert .alert--content p { margin-bottom: 0rem; } .js--modal .content .alert .alert--icon, .page--sw .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; } .js--modal .content .alert .alert--content, .page--sw .alert .alert--content { width: 85%; } .js--modal .content .alert .alert--content.is--strong, .page--sw .alert .alert--content.is--strong { font-weight: 700; } .js--modal .content .alert .alert--list, .page--sw .alert .alert--list { list-style: none; } .js--modal .content .alert .list--entry, .page--sw .alert .list--entry { display: block; } .js--modal .content .container--ajax-cart:not(.off-canvas) .alert, .page--sw .container--ajax-cart:not(.off-canvas) .alert { margin: 0.625rem; } .js--modal .content .container--ajax-cart .alert .alert--close, .page--sw .container--ajax-cart .alert .alert--close { right: 0.9375rem; } .js--modal .content .container--ajax-cart .alert .alert--content, .page--sw .container--ajax-cart .alert .alert--content { padding: 0.625rem 1.25rem 0.625rem 1.25rem; } @media screen and (min-width: 48em) { .js--modal .content .alert .alert--icon, .page--sw .alert .alert--icon, .js--modal .content .alert .icon--element, .page--sw .alert .icon--element { width: 8%; } .js--modal .content .alert .alert--content, .page--sw .alert .alert--content { width: 92%; } } .js--modal .content .badge, .page--sw .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: #D5101C; border: 1px solid #707070; } .js--modal .content .badge.is--primary, .page--sw .badge.is--primary { background-color: #d5101c; background-image: linear-gradient(to bottom, #d5101c 0%, #D5101C 100%); color: #fff; border-color: #fff; } .js--modal .content .badge.is--secondary, .page--sw .badge.is--secondary { background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #d9d9d9 100%); color: #fff; border-color: #fff; } .js--modal .content .badge.is--minimal, .page--sw .badge.is--minimal { border: 0 none; } .js--modal .content .label, .page--sw .label { padding: 0.1875rem 0.5rem 0.1875rem 0.5rem; margin: 0rem 0.3125rem 0rem 0.3125rem; font-size: 1rem; line-height: 1.125rem; border-radius: 3px; background-clip: padding-box; display: inline-block; text-align: center; white-space: nowrap; color: #58514A; background: #58514A; } .js--modal .content .label.success, .page--sw .label.success { background: #2ECC71; } .js--modal .content .label.info, .page--sw .label.info { background: #4AA3DF; } .js--modal .content .label.warning, .page--sw .label.warning { background: #F1C40F; } .js--modal .content .label.error, .page--sw .label.error { background: #E74C3C; } .js--modal .content .collapse--header, .page--sw .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%, #f8f8fa 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 #707070; cursor: pointer; } .js--modal .content .collapse--header .collapse--toggler, .page--sw .collapse--header .collapse--toggler { height: 1rem; top: 0.625rem; right: 1.25rem; font-size: 0.375rem; line-height: 1rem; position: absolute; font-weight: 400; font-family: 'shopware'; } .js--modal .content .collapse--header .collapse--toggler:before, .page--sw .collapse--header .collapse--toggler:before { content: "\e612"; } .js--modal .content .collapse--header:hover, .page--sw .collapse--header:hover { color: #D5101C; } .js--modal .content .collapse--header.is--active, .page--sw .collapse--header.is--active { background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #d9d9d9 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: #4a4a4a; z-index: 1300; } .js--modal .content .collapse--header.is--active .collapse--toggler:before, .page--sw .collapse--header.is--active .collapse--toggler:before { content: "\e610"; } .js--modal .content .collapse--content, .page--sw .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: #707070; } .js--modal .content .collapse--content.is--collapsed, .page--sw .collapse--content.is--collapsed { display: block; z-index: 1200; } .js--modal .content .js--collapse-target, .page--sw .js--collapse-target { display: none; } .js--modal .content .js--collapse-target.is--collapsed, .page--sw .js--collapse-target.is--collapsed { display: block; } .js--modal .content .language--flag, .page--sw .language--flag { height: 0.6875rem; width: 0.875rem; display: inline-block; text-indent: 100%; white-space: nowrap; overflow: hidden; } .js--modal .content .language--flag.de_DE, .page--sw .language--flag.de_DE { background-position: 0 0; background-image: linear-gradient(to bottom, black 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%); } .js--modal .content .language--flag.en_GB, .page--sw .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"); } .js--modal .content .language--flag.nl_NL, .page--sw .language--flag.nl_NL { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #21468B 66%); } .js--modal .content .language--flag.fr_FR, .page--sw .language--flag.fr_FR { background-position: 0 0; background-image: linear-gradient(to right, #21468B 33%, white 33%, white 66%, #DD0000 66%); } .js--modal .content .language--flag.es_ES, .page--sw .language--flag.es_ES { background-position: 0 0; background-image: linear-gradient(#DD0000 25%, #FFCE00 25%, #FFCE00 75%, #DD0000 75%); } .js--modal .content .language--flag.it_IT, .page--sw .language--flag.it_IT { background-position: 0 0; background-image: linear-gradient(to right, #009246 33%, white 33%, white 66%, #DD0000 66%); } .js--modal .content .lightbox--container, .page--sw .lightbox--container { display: block; width: 100%; height: auto; background: #FFFFFF; position: relative; } .js--modal .content .lightbox--image, .page--sw .lightbox--image { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; vertical-align: middle; } .js--modal .content .list--unordered, .page--sw .list--unordered { padding-left: 1.25rem; list-style-type: none; } .js--modal .content .list--unordered li, .page--sw .list--unordered li { position: relative; line-height: 1.5rem; } .js--modal .content .list--unordered li:before, .page--sw .list--unordered li:before { width: 1.25rem; font-size: 0.625rem; left: -1.25rem; font-family: 'shopware'; content: "\e6b9"; position: absolute; top: 0; } .js--modal .content .list--unordered.is--disc li, .page--sw .list--unordered.is--disc li { position: relative; } .js--modal .content .list--unordered.is--disc li:before, .page--sw .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; } .js--modal .content .list--unordered.is--checked li, .page--sw .list--unordered.is--checked li { position: relative; } .js--modal .content .list--unordered.is--checked li:before, .page--sw .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; } .js--modal .content .list--unordered.is--arrow-right li, .page--sw .list--unordered.is--arrow-right li { position: relative; } .js--modal .content .list--unordered.is--arrow-right li:before, .page--sw .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; } .js--modal .content .list--unordered.is--star li, .page--sw .list--unordered.is--star li { position: relative; } .js--modal .content .list--unordered.is--star li:before, .page--sw .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; } .js--modal .content .list--unordered.is--cross li, .page--sw .list--unordered.is--cross li { position: relative; } .js--modal .content .list--unordered.is--cross li:before, .page--sw .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; } .js--modal .content .list--unordered.is--tag li, .page--sw .list--unordered.is--tag li { position: relative; } .js--modal .content .list--unordered.is--tag li:before, .page--sw .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; } .js--modal .content .list--unordered.is--plus li, .page--sw .list--unordered.is--plus li { position: relative; } .js--modal .content .list--unordered.is--plus li:before, .page--sw .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; } .js--modal .content .list--unstyled, .page--sw .list--unstyled { list-style: none; } .js--modal .content .list--inline, .page--sw .list--inline { list-style: none; } .js--modal .content .list--inline li, .page--sw .list--inline li { display: inline; } .js--modal .content .image-slider, .page--sw .image-slider { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; z-index: 1000; position: relative; } .js--modal .content .image-slider:after, .page--sw .image-slider:after { content: ""; display: table; clear: both; } .js--modal .content .force--3d, .page--sw .force--3d { backface-visibility: hidden; } .js--modal .content .image-slider--container, .page--sw .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; } .js--modal .content .image-slider--container .arrow, .page--sw .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: #58514A; cursor: pointer; display: none; } .js--modal .content .image-slider--container .arrow.is--left, .page--sw .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; } .js--modal .content .image-slider--container .arrow.is--left:before, .page--sw .image-slider--container .arrow.is--left:before, .js--modal .content .image-slider--container .arrow.is--left::before, .page--sw .image-slider--container .arrow.is--left::before { content: "\e611"; } .js--modal .content .image-slider--container .arrow.is--right, .page--sw .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; } .js--modal .content .image-slider--container .arrow.is--right:before, .page--sw .image-slider--container .arrow.is--right:before { content: "\e60f"; } .js--modal .content .image-slider--container .arrow:hover, .page--sw .image-slider--container .arrow:hover { color: #D5101C; border-color: rgba(213, 16, 28, 0.5); } .js--modal .content .image-slider--container.is--dragging .image-slider--item, .page--sw .image-slider--container.is--dragging .image-slider--item { cursor: move; } .js--modal .content .image-slider--slide, .page--sw .image-slider--slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; height: auto; position: relative; top: 0; left: 0; white-space: nowrap; font-size: 0; -ms-touch-action: pan-y; } .js--modal .content .image-slider--slide:after, .page--sw .image-slider--slide:after { content: ""; display: table; clear: both; } .js--modal .content .image-slider--item, .page--sw .image-slider--item { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: inline-block; height: auto; width: 100%; position: relative; text-align: center; cursor: pointer; } .js--modal .content .image-slider--item .image--element, .page--sw .image-slider--item .image--element { display: inline-block; max-width: 100%; height: auto; } .js--modal .content .image-slider--item .image--media, .page--sw .image-slider--item .image--media { margin: 0 auto; text-align: center; } .js--modal .content .image-slider--item .image--media.image--svg img, .page--sw .image-slider--item .image--media.image--svg img { height: auto; } .js--modal .content .image-slider--dots, .page--sw .image-slider--dots { padding: 0.625rem 0rem 0.625rem 0rem; text-align: center; } .js--modal .content .image-slider--thumbnails, .page--sw .image-slider--thumbnails { height: 4.375rem; top: 27.5rem; display: none; width: 100%; overflow: hidden; white-space: nowrap; position: absolute; left: 0; } .js--modal .content .image-slider--thumbnails .image-slider--thumbnails-slide, .page--sw .image-slider--thumbnails .image-slider--thumbnails-slide { position: absolute; top: 0; left: 0; } .js--modal .content .image-slider--thumbnails .thumbnail--link, .page--sw .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 #707070; } .js--modal .content .image-slider--thumbnails .thumbnail--link.is--active, .page--sw .image-slider--thumbnails .thumbnail--link.is--active { border-color: #D5101C; } .js--modal .content .image-slider--thumbnails .thumbnail--image, .page--sw .image-slider--thumbnails .thumbnail--image { display: inline; vertical-align: middle; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow, .page--sw .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%, #f8f8fa 100%); display: none; position: absolute; z-index: 1000; font-family: 'shopware'; text-align: center; color: #58514A; border: 1px solid rgba(255, 255, 255, 0.85); cursor: pointer; background: rgba(255, 255, 255, 0.85); } .js--modal .content .image-slider--thumbnails .thumbnails--arrow:hover, .page--sw .image-slider--thumbnails .thumbnails--arrow:hover { color: #D5101C; border-color: rgba(213, 16, 28, 0.85); } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--top, .page--sw .image-slider--thumbnails .thumbnails--arrow.is--top, .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--bottom, .page--sw .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; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--top, .page--sw .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; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--top::before, .page--sw .image-slider--thumbnails .thumbnails--arrow.is--top::before { content: "\e610"; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--bottom, .page--sw .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; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--bottom::before, .page--sw .image-slider--thumbnails .thumbnails--arrow.is--bottom::before { content: "\e612"; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--left, .page--sw .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; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--left::before, .page--sw .image-slider--thumbnails .thumbnails--arrow.is--left::before { content: "\e611"; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--right, .page--sw .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; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--right::before, .page--sw .image-slider--thumbnails .thumbnails--arrow.is--right::before { content: "\e60f"; } .js--modal .content .image-slider--thumbnails .thumbnails--arrow.is--active, .page--sw .image-slider--thumbnails .thumbnails--arrow.is--active { display: block; } @media screen and (min-width: 48em) { .js--modal .content .image-slider--container, .page--sw .image-slider--container { height: 25rem; } .js--modal .content .image-slider--container .arrow, .page--sw .image-slider--container .arrow { display: block; } } @media screen and (min-width: 64em) { .js--modal .content .image-slider--thumbnails, .page--sw .image-slider--thumbnails { display: block; } .js--modal .content .image-slider--container, .page--sw .image-slider--container { height: 25rem; margin-bottom: 6.875rem; } .js--modal .content .image-slider--container.no--thumbnails, .page--sw .image-slider--container.no--thumbnails { margin-bottom: 0; } .js--modal .content .image-slider--container.no--image .image-slider--item, .page--sw .image-slider--container.no--image .image-slider--item { cursor: default; } .js--modal .content .image-slider--dots, .page--sw .image-slider--dots { top: 25.3125rem; position: absolute; width: 100%; } } @media screen and (min-width: 78.75em) { .js--modal .content .image-slider--container, .page--sw .image-slider--container { height: 26.875rem; margin-bottom: 0; } .js--modal .content .image-slider--thumbnails, .page--sw .image-slider--thumbnails { width: 4.375rem; height: 26.875rem; margin: 0rem 1.25rem 0rem 0rem; position: relative; top: 0; left: 0; float: left; } .js--modal .content .image-slider--thumbnails .thumbnail--link, .page--sw .image-slider--thumbnails .thumbnail--link { margin: 0rem 0rem 1.25rem 0rem; display: block; } .js--modal .content .image-slider--dots, .page--sw .image-slider--dots { padding: 0.625rem 0rem 0.625rem 5.625rem; position: relative; top: auto; display: block; } } .js--modal .content .js--img-zoom--container, .page--sw .js--img-zoom--container { position: relative; top: 0; left: 0; } .js--modal .content .js--img-zoom--lens, .page--sw .js--img-zoom--lens { border-radius: 3px; background-clip: padding-box; display: none; background: rgba(255, 255, 255, 0.4); border: 1px solid #707070; position: absolute; top: 0; left: 0; cursor: pointer; } .js--modal .content .js--img-zoom--flyout, .page--sw .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 #707070; } .js--modal .content .js--img-zoom--title, .page--sw .js--img-zoom--title { padding: 0.3125rem 1.25rem 0.3125rem 1.25rem; font-size: 0.875rem; line-height: 1rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #d9d9d9 100%); color: #fff; font-weight: 700; text-align: center; background: rgba(0, 0, 0, 0.5); } .js--modal .content .range-slider, .page--sw .range-slider { -webkit-touch-callout: none; } .js--modal .content .range-slider--container, .page--sw .range-slider--container { height: 0.75rem; border-radius: 6px; background-clip: padding-box; display: block; width: 100%; background: #e9e9f0; box-shadow: inset 0 1px 1px #f0f0f0; border: 1px solid #707070; -ms-touch-action: none; } .js--modal .content .range-slider--range-bar, .page--sw .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 #d1101c; height: auto; width: 100%; position: relative; background: #D5101C; } .js--modal .content .range-slider--handle, .page--sw .range-slider--handle { width: 1.25rem; height: 1.25rem; border-radius: 3px; background-clip: padding-box; background-color: #FFF; background-image: linear-gradient(to bottom, #FFF 0%, #e9e9f0 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 #707070; cursor: pointer; } .js--modal .content .range-slider--handle.is--min, .page--sw .range-slider--handle.is--min { left: -0.625rem; top: -0.25rem; } .js--modal .content .range-slider--handle.is--max, .page--sw .range-slider--handle.is--max { right: -0.625rem; top: -0.25rem; } .js--modal .content .range-slider--handle:hover, .page--sw .range-slider--handle:hover, .js--modal .content .range-slider--handle.is--dragging, .page--sw .range-slider--handle.is--dragging { border-color: #D5101C; } .js--modal .content .range-slider--format, .page--sw .range-slider--format { display: none; } .js--modal .content .checkbox, .page--sw .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 #707070; cursor: pointer; } .js--modal .content .checkbox .checkbox--state, .page--sw .checkbox .checkbox--state { border-radius: 3px; background-clip: padding-box; display: block; width: 100%; height: auto; position: relative; z-index: 60; } .js--modal .content .checkbox input[type="checkbox"], .page--sw .checkbox input[type="checkbox"] { opacity: 0; display: block; width: 100%; height: auto; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .js--modal .content .checkbox input[type="checkbox"]:checked ~ .checkbox--state, .page--sw .checkbox input[type="checkbox"]:checked ~ .checkbox--state { background-color: #d5101c; background-image: linear-gradient(to bottom, #d5101c 0%, #D5101C 100%); } .js--modal .content .checkbox input[type="checkbox"]:checked ~ .checkbox--state:before, .page--sw .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: 400; text-align: center; vertical-align: top; color: #fff; content: "\e60c"; } .js--modal .content .checkbox input[type="checkbox"]:disabled ~ .checkbox--state, .page--sw .checkbox input[type="checkbox"]:disabled ~ .checkbox--state { background: #e9e9f0; } .js--modal .content .checkbox.is--active .checkbox--state, .page--sw .checkbox.is--active .checkbox--state, a:hover .js--modal .content .checkbox .checkbox--state, a:hover .page--sw .checkbox .checkbox--state { background-color: #d5101c; background-image: linear-gradient(to bottom, #d5101c 0%, #D5101C 100%); } .js--modal .content .checkbox.is--active .checkbox--state:before, .page--sw .checkbox.is--active .checkbox--state:before, a:hover .js--modal .content .checkbox .checkbox--state:before, a:hover .page--sw .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: 400; text-align: center; vertical-align: top; color: #fff; content: "\e60c"; } .js--modal .content .js--off-canvas-button, .page--sw .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 #707070; cursor: pointer; display: block; } .js--modal .content .js--off-canvas-button .tab--header, .page--sw .js--off-canvas-button .tab--header { margin-bottom: 0.625rem; position: relative; } .js--modal .content .js--off-canvas-button .tab--title:after, .page--sw .js--off-canvas-button .tab--title:after { font-size: 0.75rem; right: 0.3125rem; margin-top: -0.375rem; content: "\e60f"; } .js--modal .content .js--off-canvas-button .tab--preview, .page--sw .js--off-canvas-button .tab--preview { display: block; } .js--modal .content .js--off-canvas-button .tab--preview p:last-child, .page--sw .js--off-canvas-button .tab--preview p:last-child { margin-bottom: 0; } .js--modal .content .js--off-canvas-button .tab--content, .page--sw .js--off-canvas-button .tab--content { cursor: default; } .js--modal .content .js--off-canvas-button:hover .tab--title, .page--sw .js--off-canvas-button:hover .tab--title { color: #D5101C; } .js--modal .content .js--tab-menu .tab--navigation, .page--sw .js--tab-menu .tab--navigation { list-style: none; } .js--modal .content .js--tab-menu .tab--link, .page--sw .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: #fff; background-image: linear-gradient(to bottom, #fff 0%, #f8f8fa 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: #58514A; border: 1px solid #707070; white-space: nowrap; } .js--modal .content .js--tab-menu .tab--link:hover, .page--sw .js--tab-menu .tab--link:hover { color: #D5101C; background: #fff; } .js--modal .content .js--tab-menu .tab--link:focus, .page--sw .js--tab-menu .tab--link:focus { outline: none; } .js--modal .content .js--tab-menu .tab--link.is--active, .page--sw .js--tab-menu .tab--link.is--active { color: #000; border-bottom-color: #fff; background: #fff; } .js--modal .content .js--tab-menu .tab--link.is--active:hover, .page--sw .js--tab-menu .tab--link.is--active:hover { color: #000; } .js--modal .content .js--tab-menu .tab--link.has--content, .page--sw .js--tab-menu .tab--link.has--content { display: inline-block; } .js--modal .content .js--tab-menu.js--menu-scroller .tab--navigation, .page--sw .js--tab-menu.js--menu-scroller .tab--navigation { overflow: hidden; } .js--modal .content .js--tab-menu.js--menu-scroller .tab--navigation .js--menu-scroller--item, .page--sw .js--tab-menu.js--menu-scroller .tab--navigation .js--menu-scroller--item { top: 0; } .js--modal .content .js--tab-menu.js--menu-scroller .js--menu-scroller--arrow, .page--sw .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 #58514A; } .js--modal .content .js--tab-menu.js--menu-scroller .js--menu-scroller--arrow:hover, .page--sw .js--tab-menu.js--menu-scroller .js--menu-scroller--arrow:hover { border-color: #58514A; } .js--modal .content .js--tab-menu .tab--container-list .tab--container, .page--sw .js--tab-menu .tab--container-list .tab--container { border: 1px solid #707070; display: none; } .js--modal .content .js--tab-menu .tab--container-list .tab--container.has--content.is--active, .page--sw .js--tab-menu .tab--container-list .tab--container.has--content.is--active { display: block; } .js--modal .content .image--gallery .image-slider--container, .page--sw .image--gallery .image-slider--container { bottom: 5.625rem; position: absolute; top: 0; left: 0; right: 0; height: auto; margin: 0; } .js--modal .content .image--gallery.no--thumbnails .image-slider--container, .page--sw .image--gallery.no--thumbnails .image-slider--container { bottom: 0; } .js--modal .content .image--gallery .image-slider--item, .page--sw .image--gallery .image-slider--item { display: inline-block; height: auto; width: 100%; position: relative; text-align: center; cursor: default; } .js--modal .content .image--gallery .image-slider--item .image--element, .page--sw .image--gallery .image-slider--item .image--element { display: block; max-width: 100%; height: auto; width: auto; } .js--modal .content .image--gallery .image-slider--item .image--media, .page--sw .image--gallery .image-slider--item .image--media, .js--modal .content .image--gallery .image-slider--item img, .page--sw .image--gallery .image-slider--item img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .js--modal .content .image--gallery .image-slider--thumbnails, .page--sw .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; } .js--modal .content .image--gallery .image-slider--thumbnails .thumbnails--arrow, .page--sw .image--gallery .image-slider--thumbnails .thumbnails--arrow { top: 0.625rem; } .js--modal .content .image--gallery .image-slider--thumbnails .thumbnails--arrow.is--left, .page--sw .image--gallery .image-slider--thumbnails .thumbnails--arrow.is--left { border-left: 0 none; } .js--modal .content .image--gallery .image-slider--thumbnails .thumbnails--arrow.is--right, .page--sw .image--gallery .image-slider--thumbnails .thumbnails--arrow.is--right { border-right: 0 none; } .js--modal .content .image--gallery .image-slider--thumbnails-slide, .page--sw .image--gallery .image-slider--thumbnails-slide { margin: 0rem 0.625rem 0rem 0.625rem; left: auto; top: auto; } .js--modal .content .image--gallery .thumbnail--link, .page--sw .image--gallery .thumbnail--link { margin: 0rem 0.625rem 0rem 0rem; display: inline-block; } .js--modal .content .image--gallery .button--zoom-in, .page--sw .image--gallery .button--zoom-in, .js--modal .content .image--gallery .button--zoom-out, .page--sw .image--gallery .button--zoom-out, .js--modal .content .image--gallery .button--zoom-reset, .page--sw .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; } .js--modal .content .image--gallery .button--zoom-in:hover, .page--sw .image--gallery .button--zoom-in:hover, .js--modal .content .image--gallery .button--zoom-out:hover, .page--sw .image--gallery .button--zoom-out:hover, .js--modal .content .image--gallery .button--zoom-reset:hover, .page--sw .image--gallery .button--zoom-reset:hover { z-index: 1; } .js--modal .content .image--gallery .button--zoom-out, .page--sw .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; } .js--modal .content .image--gallery .button--zoom-reset, .page--sw .image--gallery .button--zoom-reset { left: 2.6875rem; border-radius: 0; } .js--modal .content .image--gallery .button--zoom-in, .page--sw .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; } .js--modal .content .image-gallery--modal .modal--close, .page--sw .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--modal .content .js--image-gallery, .page--sw .js--image-gallery { width: 80%; height: 80%; } } .js--modal .content .product--quick-view, .page--sw .product--quick-view { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .js--modal .content .product--quick-view .quick-view--image, .page--sw .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 #707070; width: 100%; display: block; position: relative; float: left; } .js--modal .content .product--quick-view .quick-view--image img, .page--sw .product--quick-view .quick-view--image img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .js--modal .content .product--quick-view .quick-view--title, .page--sw .product--quick-view .quick-view--title { font-size: 1.125rem; color: #d9d9d9; display: block; font-weight: 700; } .js--modal .content .product--quick-view .quick-view--title:hover, .page--sw .product--quick-view .quick-view--title:hover { color: #D5101C; } .js--modal .content .product--quick-view .quick-view--supplier, .page--sw .product--quick-view .quick-view--supplier { font-size: 0.875rem; padding: 0.625rem 0rem 0.3125rem 0rem; font-weight: 700; } .js--modal .content .product--quick-view .quick-view--description-title, .page--sw .product--quick-view .quick-view--description-title { font-size: 1rem; padding-bottom: 0.3125rem; margin-top: 0.9375rem; color: #d9d9d9; border-bottom: 1px solid #707070; font-weight: 700; clear: both; } .js--modal .content .product--quick-view .quick-view--description, .page--sw .product--quick-view .quick-view--description { font-size: 0.875rem; padding-top: 0.625rem; color: #ffffff; } .js--modal .content .product--quick-view .quick-view--description, .page--sw .product--quick-view .quick-view--description, .js--modal .content .product--quick-view .quick-view--description > p, .page--sw .product--quick-view .quick-view--description > p { margin: 0; } @media screen and (min-width: 30em) { .js--modal .content .product--quick-view, .page--sw .product--quick-view { padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .js--modal .content .product--quick-view .quick-view--image, .page--sw .product--quick-view .quick-view--image { width: 50%; } .js--modal .content .product--quick-view .quick-view--header, .page--sw .product--quick-view .quick-view--header { padding-left: 1.25rem; width: 50%; float: right; } .js--modal .content .product--quick-view .quick-view--description-title, .page--sw .product--quick-view .quick-view--description-title { margin-top: 0; } } .js--modal .content .c-firstname-confirmation, .page--sw .c-firstname-confirmation { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* 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. `` 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 #707070; border-top: 2px solid #303030; } .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('https://www.hailo.de/typo3conf/ext/burg_kundenspezifisch/Resources/img/icons/img/icons/loading-indicator.gif')'); } .product--rating i[class^=icon] { color: #D5101C; } .product--rating i.icon--star-empty { color: #707070; } .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: #000 !important; } .is--light { color: #9e9ebb !important; } .is--soft { color: #dadae5 !important; } .is--fluid { width: 100% !important; } .left { float: left; } .right { float: right; } /* 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 #D5101C; } .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 #D5101C; } .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: #58514A; border-color: #58514A; } .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: #ffffff; 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: #58514A; 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: #58514A; font-weight: 400; } .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: #D5101C; } .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 #707070; 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: #58514A; font-weight: 400; } .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: #D5101C; } .account--dropdown-navigation.off-canvas { background: #F5F5F8; } .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: #efeff4; content: ''; display: block; } .entry--search.is--active .main-search--form { top: 3.125rem; background: #efeff4; 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 #707070; border-top: 2px solid #000000; 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('https://www.hailo.de/typo3conf/ext/burg_kundenspezifisch/Resources/img/icons/img/icons/loading-indicator.gif')'); } .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; } .results--list { padding: 0.625rem 0.625rem 0.625rem 0.625rem; box-shadow: 0 10px 25px -15px #000; border-top: 1px solid #707070; border-bottom: 1px solid #707070; 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 #707070; 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 #707070; } .results--list .list--entry:last-child { border: 0 none; } .results--list .entry--no-results { width: 100%; text-align: center; list-style: none; font-weight: 400; } .results--list .is--active, .results--list .list--entry:hover { color: #D5101C; } .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: #D5101C; } .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 .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: #58514A; 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: #58514A; white-space: nowrap; } .results--list .entry--all-results { padding: 0.375rem 0.3125rem 0.375rem 0.3125rem; font-weight: 400; } .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: 400; color: #D5101C; } .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: #f8f8fa; } .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; } .results--list { border-radius: 3px; background-clip: padding-box; border: 1px solid #707070; 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 .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: #58514A; cursor: pointer; } .header-main .top-bar--navigation .navigation--entry:hover, .header-main .top-bar--navigation .navigation--link:hover { color: #D5101C; } .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: #D5101C; } .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 #707070; } .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: #707070; 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: #58514A; } .header-main .top-bar--navigation .service--list .service--link:hover { color: #D5101C; } .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 #707070; } .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: 400; } .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: #707070; 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; } } @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 #707070; } .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: #D5101C; 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 #707070; } .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: #58514A; } } .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 #707070; } .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--title { font-size: 1rem; } .review--entry .review--content { font-size: 0.875rem; margin: 0; } .product--details .article-overview-row { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 1fr; grid-template-areas: "slider" "thumbs" "infos"; grid-column-gap: 36px; } @media (min-width: 48em) { .product--details .article-overview-row { grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; grid-template-areas: "slider infos" "thumbs thumbs"; } } .product--details .article-overview-row .article-overview { grid-area: slider; } .product--details .article-overview-row .infos { grid-area: infos; } .product--details .article-overview-row .image-slider--thumbnails { grid-area: thumbs; } .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: #F5F5F8; 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: #F5F5F8; } .content--product-reviews .alert { margin: 0rem 0rem 1rem 0rem; } .content--product-reviews .captcha--notice { font-size: 0.75rem; line-height: 1.2; } .js--modal .content .js--tab-menu .tab--container-list .tab--container, .page--sw .js--tab-menu .tab--container-list .tab--container { border: 0; } .js--modal .content .product--details .panel.has--border, .page--sw .product--details .panel.has--border { border: 0; } .js--modal .content .product--details .product--properties .product--properties-table, .page--sw .product--details .product--properties .product--properties-table { border-collapse: collapse; background: none; } .js--modal .content { margin: 0 !important; } .js--modal .content .image--gallery .image-slider--item .image--media, .js--modal .content .image--gallery .image-slider--item img { object-fit: contain; max-height: auto; } .js--modal .content .image--gallery .image-slider--item .image--media .hailo--signets, .js--modal .content .image--gallery .image-slider--item img .hailo--signets { display: none; } .js--modal .content .image--gallery > .image-slider--container .btn { display: none; } .js--modal .content .image--gallery .image-slider--item > :not([class*="image--element"]) { display: none; } .js--modal .content .image--gallery > .image-slider--thumbnails .image-slider--thumbnails-slide { position: static; width: 100%; display: flex; justify-content: center; } .js--modal .content .image--gallery > .image-slider--thumbnails .image-slider--thumbnails-slide .thumbnail--link { padding: 0; border-radius: 0; } .js--modal .content .image--gallery > .image-slider--thumbnails .image-slider--thumbnails-slide .thumbnail--link span { display: block; width: 100%; height: auto; } .js--modal .content .image--gallery > .image-slider--thumbnails .image-slider--thumbnails-slide .thumbnail--link span img { width: 100%; height: auto; object-fit: contain; } .js--modal .icon--cross::before { content: "╳"; } .page--sw .product--details .image-slider--item { position: static; } /* Sidebar ============================================== Defines the styling of the storefront sidebar navigation and its components. The sidebar is displayed inside the off-canvas menu on small devices. ``` ``` */ body > .sidebar-main { padding-bottom: 1.25rem; border-right: #707070; } body > .sidebar-main:after { content: ""; display: table; clear: both; } .sidebar-main.off-canvas { background: #F5F5F8; } .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 .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: auto; 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: #D5101C; } .sidebar--navigation.show--active-items .navigation--link.is--active { color: #D5101C; font-weight: 700; } .offcanvas--overlay { width: 17.5rem; top: 2.625rem; background: #F5F5F8; 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 #707070; 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: #000; 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: #D5101C; 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 #707070; border-top: 2px solid #000000; } .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 #707070; border-top: 2px solid #000000; } .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 #707070; } .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 #707070; } .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: #D5101C; } .sidebar--navigation .navigation--link.is--active { color: #D5101C; 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: #D5101C; 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 #707070; } .shop-sites--container .shop-sites--headline { padding-bottom: 0.6666666666666666rem; font-size: 1rem; margin-top: 0; border-bottom: 1px solid #707070; color: #000; 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 { background: transparent; } } @media screen and (min-width: 78.75em) { .sidebar-main { padding-top: 2.8125rem; display: block; } .sidebar-main.off-canvas { position: relative; top: 0; left: 0; z-index: 1000; } } /* 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--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: #D5101C; } .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--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: #ffffff; } .account--paging:after { content: ""; display: table; clear: both; } .account--paging .paging--display { float: right; } .account--orders-overview { border: 1px solid #707070; } .account--orders-overview p { font-size: 0.875rem; } .account--orders-overview .orders--table-header { display: none; background: #FFFFFF; } .account--orders-overview .orders--table-header .panel--th { color: #000; } .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 .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 #707070; } .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: #58514A; 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: #58514A; } .is--act-partnerStatistic .is--odd { padding: 0rem 0rem 0.5625rem 0rem; border-bottom: 1px solid #707070; } .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: #000; } .order--details, .order--price-unit, .order--current-price { display: none; } .order--details .panel--tr { border-bottom: 1px solid #707070; } .order--repeat { text-align: center; background: #F5F5F8; border-bottom: 1px solid #707070; } .order--actions { text-align: center !important; } .order--user-comments, .order--shop-comments { border-bottom: 1px solid #707070; } .account--downloads { border: 1px solid #707070; } .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--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-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 #707070; border-top: 2px solid #000000; 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 .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; } } @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 #707070; } .account--menu .navigation--headline { text-decoration: underline !important; border-bottom: 1px solid #707070; } .js--modal .content .account--menu .navigation--headline, .page--sw .account--menu .navigation--headline { display: block; color: #58514A; } .js--modal .content .account--menu .navigation--headline.is--underline, .page--sw .account--menu .navigation--headline.is--underline { margin-bottom: 10px; border-bottom: 1px solid #ffffff; text-decoration: none !important; } .page--sw .account--menu .navigation--headline { padding: 1.875rem 0rem 0rem 0rem; margin: 0rem 0rem 0rem 0rem; } .page--sw .account--menu .navigation--headline.is--underline { padding: 1.875rem 0rem 0.625rem 0rem; } .account--menu .account--menu-container { padding: 0.625rem 1.25rem 0.625rem 1.25rem; } .js--modal .content .account--menu .account--menu-container, .page--sw .account--menu .account--menu-container { display: block; position: relative; padding-top: 10px; font-size: 18px; line-height: 26px; color: #58514A; } .js--modal .content .account--menu .account--menu-container a, .page--sw .account--menu .account--menu-container a { text-decoration: underline; } .js--modal .content .account--menu .account--menu-container.is--rounded, .page--sw .account--menu .account--menu-container.is--rounded { border-radius: 0; } .page--sw .account--menu .account--menu-container { padding: 10px 0; } .page--sw .account--menu .account--menu-container.is--wide { padding: 0.625rem 0rem 0.625rem 0rem; } .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 #707070; font-weight: 700; color: #D5101C; } .account--menu .navigation--link.link--logout [class^="icon--"] { margin: 0rem 0.3125rem 0rem 0rem; display: inline-block; } .account--welcome .panel--title { font-size: 2.8125rem; } .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: #FFFFFF; } .account--downloads .downloads--table-header .panel--th { color: #000; } .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 #707070; background: #f8f8fa; } .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.625rem 0.625rem 0.5625rem 0.625rem; margin: 0rem 1.5625rem 0rem 0rem; line-height: 1.25rem; } /* 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 #707070; } .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: #000; } .note--title:hover { color: #D5101C; } .note--rating { margin: 0rem 0rem 0.625rem 5.9375rem; } .note--rating [class^="icon--"] { color: #D5101C; } .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: #58514A; } .note--compare .compare--link:hover { color: #D5101C; } .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: #000; font-weight: 700; } .note--delete { width: 2.5rem; height: 2.5rem; font-size: 0.625rem; line-height: 2.375rem; background-color: #58514A; background-image: linear-gradient(to bottom, #58514A 0%, #58514A 100%); border-radius: 3px; background-clip: padding-box; top: 1.25rem; right: 0; left: auto; display: block; position: absolute; border: 1px solid #58514A; text-align: center; font-weight: 400; color: #58514A; } .note--delete:hover { color: #58514A; border-color: #58514A; } @media screen and (min-width: 48em) { .note--overview .panel--table { padding: 0rem 1.25rem 0rem 1.25rem; border: 1px solid #707070; } .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: #58514A; text-align: center; } .note--zoom:hover { color: #D5101C; } .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; } } /* 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 #707070; } .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 .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 #707070; width: 100%; height: auto; } .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 #707070; 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: #58514A; } .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: #000; 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 .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: auto; top: 0; left: 0; background: #D5101C; } .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: #58514A; 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: #f8f8fa; border-color: #707070; 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 .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: #000; font-weight: 700; } .aggregation--list { margin: 0rem -0.625rem 0rem -0.625rem; padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #f8f8fa; border-bottom: 1px solid #707070; } .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: #000; } .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: #58514A; 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 #707070; position: relative; text-align: center; } .premium-product .product--inner .product--image .image--element { height: auto; 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: #D5101C; 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 .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: auto; 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 #707070; } .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--image { padding: 0.3125rem; width: 5rem; height: 5rem; border-radius: 3px; background-clip: padding-box; float: left; border: 1px solid #707070; } .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: #58514A; 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: #58514A; 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 .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 #707070; 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: auto; } .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: #000; 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: #000; 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 #707070; } .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 #707070; } .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 #707070; } @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 .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: auto; } .product--table .panel--body { padding: 1.25rem 1.25rem 1.25rem 1.25rem; border: 1px solid #707070; } .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 #707070; display: block; } .product--table .table--header .table--column { font-size: 1rem; padding-bottom: 0; font-weight: 700; color: #000; } .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 #707070; } .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: #58514A; } .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 #707070; background: #f8f8fa; } .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 #707070; } .content--confirm .confirm--inner-container .basket--footer { border: 1px solid #707070; 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 .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 #707070; } .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 #707070; } .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 .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--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: #58514A; } } /* 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: #FFFFFF; color: #58514A; padding-bottom: 0; } .confirm--content .product--table .table--tr, .confirm--content .product--table .table--media img { border-color: #707070; } .confirm--content .product--table .basket--footer { margin: 0rem -0.625rem 0rem -0.625rem; background: #f8f8fa; border-color: #707070; } .confirm--content .product--table .basket--footer .aggregation--list { margin: 0; background: transparent; border-top: 1px solid #707070; } .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-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 #707070; border-top: 2px solid #000000; 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 .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: #FFFFFF; border-color: #707070; } .confirm--content .product--table .table--header .panel--th { color: #000; } .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 .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 .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%; } } /* 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--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: auto; 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: #D5101C; border-color: #D5101C; } .configurator--variant .option--input:hover ~ label.is--disabled { color: #58514A; border-color: #707070; } .configurator--variant .option--input:checked ~ label { color: #D5101C; border-color: #D5101C; } .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: auto; position: relative; z-index: 500; border: 1px solid #707070; 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; } /* 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 .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 .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 #707070; border-top: 2px solid #000000; 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 .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: #ffffff; } .account--address .address--actions-set-defaults .btn:hover, .address-manager--modal .address--actions-set-defaults .btn:hover { color: #D5101C; } .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--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--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 #707070; border-top: 2px solid #000000; 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--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--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%; } } .js--modal .content, .page--sw { /* Register ========================================== Contains the styles of the registration process form and its components. The user can see the registration steps, advantages and required information. */ /* Forms ========================================== Defines the general form element styles. It contains the components as: `capacha`, `description`, `required information` etc. */ /* 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. */ } .js--modal .content .register--message, .page--sw .register--message { margin-top: 1.25rem; } .js--modal .content .register--content, .page--sw .register--content { margin: 0.625rem 0rem 0.625rem 0rem; width: 100%; display: none; } .js--modal .content .register--content:after, .page--sw .register--content:after { content: ""; display: table; clear: both; } .js--modal .content .register--content.is--collapsed, .page--sw .register--content.is--collapsed { display: block; } .js--modal .content .register--content .alert, .page--sw .register--content .alert { margin: 1.25rem 1.125rem 1.25rem 1.125rem; } .js--modal .content .register--content .register--check, .page--sw .register--content .register--check { padding-bottom: 0.5rem; } .js--modal .content .register--content .register--action, .page--sw .register--content .register--action { margin: 1.25rem 1.25rem 1.25rem 1.25rem; } .js--modal .content .register--content .register--action .register--submit, .page--sw .register--content .register--action .register--submit { width: 100%; text-align: center; } .js--modal .content .register--content .register--required-info, .page--sw .register--content .register--required-info { padding-bottom: 1.875rem; margin: 0rem 1.625rem 1rem 1.625rem; font-size: 0.875rem; } .js--modal .content .register--content .select-field, .page--sw .register--content .select-field { margin-bottom: 0.625rem; max-width: 100%; } .js--modal .content .register--content .register--field, .page--sw .register--content .register--field { margin-bottom: 0.625rem; width: 100%; } .js--modal .content .register--content .register--customertype, .page--sw .register--content .register--customertype { display: block; } .js--modal .content .register--content .register--zip-city .register--field-zipcode, .page--sw .register--content .register--zip-city .register--field-zipcode { width: 28%; float: left; } .js--modal .content .register--content .register--zip-city .register--field-city, .page--sw .register--content .register--zip-city .register--field-city { width: 70%; float: left; } .js--modal .content .register--content .register--zip-city .register--field-city:after, .page--sw .register--content .register--zip-city .register--field-city:after { content: ""; display: table; clear: both; } .js--modal .content .register--content .register--zip-city .register--spacer, .page--sw .register--content .register--zip-city .register--spacer { margin-right: 2%; } .js--modal .content .register--content .birthday--label, .page--sw .register--content .birthday--label { margin: 0rem 0rem 0.3125rem 0rem; display: block; font-weight: 700; } .js--modal .content .register--content .birthday--label:after, .page--sw .register--content .birthday--label:after { content: ""; display: table; clear: both; } .js--modal .content .register--content .register--password-description, .page--sw .register--content .register--password-description { padding-bottom: 1.25rem; } .js--modal .content .register--content .register--birthdate .select-field, .page--sw .register--content .register--birthdate .select-field { margin-bottom: 0.9375rem; max-width: 100%; float: left; } .js--modal .content .register--content .register--birthdate .datepicker, .page--sw .register--content .register--birthdate .datepicker { margin-bottom: 0.9375rem; width: 100%; max-width: 100%; float: left; } .js--modal .content .register--content .register--birthdate .register--birthyear, .page--sw .register--content .register--birthdate .register--birthyear, .js--modal .content .register--content .register--birthdate .register--birthyear.select-field, .page--sw .register--content .register--birthdate .register--birthyear.select-field { margin-right: 0rem; } .js--modal .content .register--content .register--privacy, .page--sw .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 #707070; } .js--modal .content .register--content .register--privacy input[type="checkbox"], .page--sw .register--content .register--privacy input[type="checkbox"] { margin: 0rem 0.625rem 0rem 0rem; } .js--modal .content .register--content .register--personal, .page--sw .register--content .register--personal { padding-bottom: 0.625rem; } .js--modal .content .register--content .register--personal:after, .page--sw .register--content .register--personal:after { content: ""; display: table; clear: both; } .js--modal .content .register--content #billingCountryBlockedAlert, .page--sw .register--content #billingCountryBlockedAlert { margin-top: 0; margin-left: 0; } .js--modal .content .register--login:after, .page--sw .register--login:after { content: ""; display: table; clear: both; } .js--modal .content .register--login .register--new-customer, .page--sw .register--login .register--new-customer { margin: 1.25rem 0rem 1.25rem 0rem; } .js--modal .content .register--login .register--new-customer .new-customer-btn, .page--sw .register--login .register--new-customer .new-customer-btn { display: block; width: 100%; text-align: center; position: relative; } .js--modal .content .register--login .register--new-customer .new-customer-btn:after, .page--sw .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: 400; content: "\e612"; color: inherit; top: 50%; } .js--modal .content .register--login .register--new-customer .new-customer-btn.is--active:after, .page--sw .register--login .register--new-customer .new-customer-btn.is--active:after { content: "\e610"; } .js--modal .content .register--login .register--login-field, .page--sw .register--login .register--login-field { margin-bottom: 0.625rem; width: 100%; } .js--modal .content .register--login .register--login-description, .page--sw .register--login .register--login-description { padding-bottom: 1.25rem; } .js--modal .content .register--login .register--login-lostpassword, .page--sw .register--login .register--login-lostpassword { padding-bottom: 1.25rem; } .js--modal .content .register--login .register--login-btn, .page--sw .register--login .register--login-btn { width: 100%; text-align: center; } .js--modal .content .register--advantages, .page--sw .register--advantages { display: none; } .js--modal .content .password--success, .page--sw .password--success { margin: 0.625rem 0rem 1.25rem 0rem; } .js--modal .content .steps--container, .page--sw .steps--container { background: transparent; } .js--modal .content .steps--content, .page--sw .steps--content { padding-top: 1rem; display: table; border-top: 1px solid #707070; width: 100%; } .js--modal .content .steps--content .steps--list, .page--sw .steps--content .steps--list { display: table-row; } .js--modal .content .steps--content .steps--list:after, .page--sw .steps--content .steps--list:after { content: ""; display: table; clear: both; } .js--modal .content .steps--content .steps--entry, .page--sw .steps--content .steps--entry { padding: 0rem 0.625rem 0rem 0.625rem; display: table-cell; list-style: none; vertical-align: top; text-align: center; } .js--modal .content .steps--content .steps--spacer, .page--sw .steps--content .steps--spacer { display: none; vertical-align: middle; } .js--modal .content .steps--content .steps--entry .icon, .page--sw .steps--content .steps--entry .icon { background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #d9d9d9 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; } .js--modal .content .steps--content .is--active .icon, .page--sw .steps--content .is--active .icon { background-color: #d5101c; background-image: linear-gradient(to bottom, #d5101c 0%, #D5101C 100%); color: #fff; } .js--modal .content .steps--content .steps--entry .text, .page--sw .steps--content .steps--entry .text { margin: 0rem 0rem 0rem 0.625rem; height: 3.25rem; position: relative; top: -2px; display: none; vertical-align: middle; } .js--modal .content .steps--content .steps--entry .text::after, .page--sw .steps--content .steps--entry .text::after { content: ''; height: auto; } .js--modal .content .steps--content .is--active .text, .page--sw .steps--content .is--active .text { color: #D5101C; display: inline-block; font-weight: 700; } .js--modal .content .steps--content .steps--entry .text--inner, .page--sw .steps--content .steps--entry .text--inner, .js--modal .content .steps--content .steps--entry .text::after, .page--sw .steps--content .steps--entry .text::after { display: inline-block; vertical-align: middle; } .js--modal .content .account--change-payment .payment--method, .page--sw .account--change-payment .payment--method { padding: 0.625rem 0rem 0.625rem 0rem; } .js--modal .content .account--change-payment .payment--selection-input, .page--sw .account--change-payment .payment--selection-input { width: 2.5rem; float: left; text-align: center; } .js--modal .content .account--change-payment .payment--selection-label, .page--sw .account--change-payment .payment--selection-label, .js--modal .content .account--change-payment .payment--description, .page--sw .account--change-payment .payment--description, .js--modal .content .account--change-payment .payment--content, .page--sw .account--change-payment .payment--content { padding: 0rem 0rem 0rem 2.5rem; width: 100%; } .js--modal .content .account--change-payment .payment--content input, .page--sw .account--change-payment .payment--content input { max-width: 100%; } @media screen and (min-width: 48em) { .js--modal .content .register--message, .page--sw .register--message { margin-top: 2.8125rem; } .js--modal .content .register--content, .page--sw .register--content { margin-top: 3.125rem; width: 64%; float: right; display: block; } .js--modal .content .register--content .select-field, .page--sw .register--content .select-field { margin-bottom: 0.9375rem; } .js--modal .content .register--content .select-field .register--birthday, .page--sw .register--content .select-field .register--birthday { margin-right: 2%; } .js--modal .content .register--content .register--field, .page--sw .register--content .register--field { margin-bottom: 0.9375rem; } .js--modal .content .register--content .register--check, .page--sw .register--content .register--check { padding-bottom: 0.5rem; } .js--modal .content .register--content .select-field, .page--sw .register--content .select-field { max-width: 18.125rem; } .js--modal .content .register--content .register--birthdate .select-field, .page--sw .register--content .register--birthdate .select-field { width: 32%; margin-right: 2%; } .js--modal .content .register--content .register--action, .page--sw .register--content .register--action { text-align: right; } .js--modal .content .register--content .register--action .register--submit, .page--sw .register--content .register--action .register--submit { width: 35%; } .js--modal .content .steps--content, .page--sw .steps--content { padding: 1.875rem 0rem 1.5rem 0rem; background: transparent; border: none; } .js--modal .content .steps--content .steps--spacer, .page--sw .steps--content .steps--spacer { width: 5rem; display: table-cell; text-align: center; } .js--modal .content .steps--content .steps--entry .text, .page--sw .steps--content .steps--entry .text { margin: 0rem 0.625rem 0rem 0.625rem; display: inline-block; font-weight: 700; } .js--modal .content .register--login, .page--sw .register--login { margin-top: 3.125rem; width: 34%; float: left; } .js--modal .content .register--login .register--new-customer, .page--sw .register--login .register--new-customer { display: none; } .js--modal .content .register--login .register--login-field, .page--sw .register--login .register--login-field { margin-bottom: 0.9375rem; } .js--modal .content .register--login .register--login-btn, .page--sw .register--login .register--login-btn { width: auto; text-align: left; } .js--modal .content .register--advantages, .page--sw .register--advantages { display: block; width: 34%; float: left; } .js--modal .content .register--advantages:after, .page--sw .register--advantages:after { content: ""; display: table; clear: both; } .js--modal .content .register--advantages .panel--title, .page--sw .register--advantages .panel--title { margin: 0rem 0rem 0.625rem 0rem; } } @media screen and (min-width: 78.75em) { .js--modal .content .steps--content .steps--entry.step--payment, .page--sw .steps--content .steps--entry.step--payment { width: 30%; } .js--modal .content .steps--content .steps--entry .text, .page--sw .steps--content .steps--entry .text { margin: 0rem 0rem 0rem 0.625rem; width: 70%; text-align: left; } .js--modal .content .steps--content .steps--spacer, .page--sw .steps--content .steps--spacer { width: 15%; } } .js--modal .content .listing--actions, .page--sw .listing--actions { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .js--modal .content .listing--actions:after, .page--sw .listing--actions:after { content: ""; display: table; clear: both; } .js--modal .content .listing--wrapper.js--is-loading .js--loading-indicator, .page--sw .listing--wrapper.js--is-loading .js--loading-indicator { top: 9.375rem; } .js--modal .content .listing, .page--sw .listing { -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; opacity: 1; } .js--modal .content .listing.is--loading, .page--sw .listing.is--loading { opacity: 0; } .js--modal .content .action--filter-btn, .page--sw .action--filter-btn { margin-bottom: 0.625rem; } .js--modal .content .action--filter-btn .filter--trigger, .page--sw .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; } .js--modal .content .action--filter-btn .filter--trigger .icon--filter, .page--sw .action--filter-btn .filter--trigger .icon--filter { margin-right: 0.5rem; } .js--modal .content .action--filter-btn .filter--trigger .action--collapse-icon, .page--sw .action--filter-btn .filter--trigger .action--collapse-icon { padding: 0rem 0.625rem 0rem 0.625rem; line-height: 1.5rem; background-color: #d5101c; background-image: linear-gradient(to bottom, #d5101c 0%, #D5101C 100%); border-radius: 3px; background-clip: padding-box; display: inline-block; color: #fff; float: right; } .js--modal .content .action--filter-options .filter--container, .page--sw .action--filter-options .filter--container { padding: 0rem 0.625rem 0rem 0.625rem; } .js--modal .content .action--filter-options .filter--close-btn, .page--sw .action--filter-options .filter--close-btn { padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #f1efed; display: block; color: #58514A; font-weight: 700; transition: background-color 0.4s; } .js--modal .content .action--filter-options .filter--close-btn:hover, .page--sw .action--filter-options .filter--close-btn:hover { background: #dbd6d0; color: #58514A; text-decoration: none; } .js--modal .content .action--filter-options .filter--close-btn .icon--arrow-right, .page--sw .action--filter-options .filter--close-btn .icon--arrow-right { margin: 0.1875rem 0rem 0rem 0rem; float: right; } .js--modal .content .action--filter-options .filter--btn-apply, .page--sw .action--filter-options .filter--btn-apply { clear: both; } .js--modal .content .action--filter-options .filter--list, .page--sw .action--filter-options .filter--list { list-style: none; } .js--modal .content .action--filter-options .filter--entry, .page--sw .action--filter-options .filter--entry { padding: 0.625rem 1.25rem 0.625rem 1.25rem; font-size: 1rem; display: block; border-bottom: 1px solid #707070; } .js--modal .content .action--filter-options .filter--entry:last-child, .page--sw .action--filter-options .filter--entry:last-child { border: 0 none; } .js--modal .content .action--filter-options .filter--link, .page--sw .action--filter-options .filter--link { color: #58514A; } .js--modal .content .action--filter-options .filter--link:hover, .page--sw .action--filter-options .filter--link:hover { color: #D5101C; } .js--modal .content .action--sort, .page--sw .action--sort { margin-bottom: 1.25rem; display: block; } .js--modal .content .action--sort .sort--label, .page--sw .action--sort .sort--label { display: none; } .js--modal .content .action--sort .sort--select, .page--sw .action--sort .sort--select { height: 2.125rem; max-width: 100%; } .js--modal .content .action--sort .sort--select:after, .page--sw .action--sort .sort--select:after, .js--modal .content .action--sort .sort--select .sort--field, .page--sw .action--sort .sort--select .sort--field { line-height: 2.125rem; } .js--modal .content .action--per-page, .page--sw .action--per-page { display: none; } .js--modal .content .listing--paging, .page--sw .listing--paging { padding: 0.625rem 0rem 0.625rem 0rem; display: block; } .js--modal .content .listing--paging:after, .page--sw .listing--paging:after { content: ""; display: table; clear: both; } .js--modal .content .listing--paging .paging--label, .page--sw .listing--paging .paging--label { display: none; } .js--modal .content .listing--paging .paging--display, .page--sw .listing--paging .paging--display { line-height: 1.875rem; margin-left: 0.625rem; } .js--modal .content .listing--bottom-paging, .page--sw .listing--bottom-paging { margin: 0.625rem 0rem 1.25rem 0rem; } .js--modal .content .infinite--actions, .page--sw .infinite--actions { width: 100%; margin: 0 auto; text-align: center; } .js--modal .content .infinite--actions .js--load-more, .page--sw .infinite--actions .js--load-more, .js--modal .content .infinite--actions .js--load-previous, .page--sw .infinite--actions .js--load-previous { margin-bottom: 1.25rem; } @media screen and (min-width: 48em) { .js--modal .content .listing--actions, .page--sw .listing--actions { border-radius: 3px; background-clip: padding-box; margin: 0rem 0rem 1.25rem 0rem; padding-top: 0.625rem; border: 1px solid #707070; background: #f5f5f8; } .js--modal .content .listing--actions .listing--paging, .page--sw .listing--actions .listing--paging { padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; border-top: 1px solid #707070; } .js--modal .content .listing--actions.without-facets.without-sortings.without-pagination, .page--sw .listing--actions.without-facets.without-sortings.without-pagination { display: none; } .js--modal .content .listing--actions.without-facets.without-sortings, .page--sw .listing--actions.without-facets.without-sortings { padding-top: 0rem; border-top: none; } .js--modal .content .action--per-page, .page--sw .action--per-page { line-height: 2rem; display: inline-block; width: 30%; text-align: right; float: right; } .js--modal .content .action--per-page .per-page--label, .page--sw .action--per-page .per-page--label { display: none; } .js--modal .content .action--per-page .per-page--select, .page--sw .action--per-page .per-page--select { width: 5rem; height: 2rem; vertical-align: top; } .js--modal .content .action--per-page .per-page--select:after, .page--sw .action--per-page .per-page--select:after, .js--modal .content .action--per-page .per-page--select .per-page--field, .page--sw .action--per-page .per-page--select .per-page--field { line-height: 1.875rem; text-align: center; } .js--modal .content .action--sort, .page--sw .action--sort { width: 12.5rem; margin: 0rem 0.625rem 0rem 0rem; display: inline-block; text-align: right; float: right; } .js--modal .content .action--sort .sort--select, .page--sw .action--sort .sort--select { max-width: 12.5rem; } .js--modal .content .action--filter-btn, .page--sw .action--filter-btn { width: 11.875rem; margin: 0rem 1.25rem 0.625rem 0.625rem; float: left; } .js--modal .content .action--filter-btn .filter--trigger .action--collapse-icon, .page--sw .action--filter-btn .filter--trigger .action--collapse-icon { display: none; } .js--modal .content .action--filter-btn .filter--trigger:before, .page--sw .action--filter-btn .filter--trigger:before, .js--modal .content .action--filter-btn .filter--trigger:after, .page--sw .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%; } .js--modal .content .action--filter-btn .filter--trigger:after, .page--sw .action--filter-btn .filter--trigger:after { margin-top: -3rem; content: "\e610"; } .js--modal .content .action--filter-btn .filter--trigger.is--active:before, .page--sw .action--filter-btn .filter--trigger.is--active:before { margin-top: 2.5rem; } .js--modal .content .action--filter-btn .filter--trigger.is--active:after, .page--sw .action--filter-btn .filter--trigger.is--active:after { margin-top: -0.5rem; } .js--modal .content .action--filter-options, .page--sw .action--filter-options { width: auto; height: auto; padding: 0; overflow: visible; position: relative; background: #fff; border: 0 none; clear: both; } .js--modal .content .action--filter-options.is--active-filter .filter--active-container, .page--sw .action--filter-options.is--active-filter .filter--active-container { display: block; margin: 0; } .js--modal .content .action--filter-options.is--active-filter .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]), .page--sw .action--filter-options.is--active-filter .filter--active-container.is--disabled .filter--active:not([data-filter-param="reset"]) { color: #fff; } .js--modal .content .action--filter-options.is--instant-filter-active .filter--active-container, .page--sw .action--filter-options.is--instant-filter-active .filter--active-container { display: block; } .js--modal .content .action--filter-options .filter--close-btn, .page--sw .action--filter-options .filter--close-btn { display: none; } .js--modal .content .action--filter-options .filter--container:after, .page--sw .action--filter-options .filter--container:after { content: ""; display: table; clear: both; } .js--modal .content .action--filter-options .filter--group, .page--sw .action--filter-options .filter--group { height: 2.375rem; width: 31%; margin: 0 0 2% 0; position: relative; float: left; } .js--modal .content .action--filter-options .filter--header, .page--sw .action--filter-options .filter--header { width: 100%; position: absolute; top: 0; left: 0; z-index: 1100; } .js--modal .content .action--filter-options .filter--header.is--active, .page--sw .action--filter-options .filter--header.is--active { z-index: 1300; } .js--modal .content .action--filter-options .filter--content, .page--sw .action--filter-options .filter--content { top: 2.375rem; width: 100%; position: absolute; left: 0; } .js--modal .content .action--filter-options #filter:after, .page--sw .action--filter-options #filter:after { content: ""; display: table; clear: both; } .js--modal .content .listing--bottom-paging, .page--sw .listing--bottom-paging { padding: 0rem 0.625rem 0rem 0.625rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #707070; background: #f5f5f8; } } @media screen and (min-width: 78.75em) { .js--modal .content .action--filter-btn, .page--sw .action--filter-btn { width: 20%; margin-right: 2%; } .js--modal .content .action--filter-btn .filter--trigger, .page--sw .action--filter-btn .filter--trigger { font-size: 0.875rem; } .js--modal .content .action--filter-btn .filter--trigger .action--collapse-icon, .page--sw .action--filter-btn .filter--trigger .action--collapse-icon { margin-top: -0.5rem; } .js--modal .content .action--filter-options, .page--sw .action--filter-options { background: #fff; } .js--modal .content .action--filter-options.is--collapsed, .page--sw .action--filter-options.is--collapsed, .js--modal .content .action--filter-options.is--active-filter, .page--sw .action--filter-options.is--active-filter { border-width: 1px 0 0 0; } .js--modal .content .action--sort, .page--sw .action--sort { line-height: 2rem; margin: 0rem 0.625rem 0.625rem 0rem; width: 40%; } .js--modal .content .action--sort .sort--label, .page--sw .action--sort .sort--label { margin: 0rem 0.625rem 0rem 0rem; display: inline-block; font-weight: 700; } .js--modal .content .action--sort .sort--select, .page--sw .action--sort .sort--select { max-width: 12.5rem; vertical-align: top; } .js--modal .content .action--per-page .per-page--label, .page--sw .action--per-page .per-page--label { margin: 0rem 0.625rem 0rem 0rem; display: inline-block; font-weight: 700; } .js--modal .content .listing--paging, .page--sw .listing--paging { display: block; clear: both; } .js--modal .content .listing--paging .paging--label, .page--sw .listing--paging .paging--label { margin: 0rem 0.625rem 0rem 0rem; font-weight: 700; } .js--modal .content .listing--paging .paging--display, .page--sw .listing--paging .paging--display { line-height: 1.875rem; } } .js--modal .content .forms--content, .page--sw .forms--content { width: 100%; } .js--modal .content .forms--content .forms--headline, .page--sw .forms--content .forms--headline { margin-bottom: 1.25rem; } .js--modal .content .forms--content .forms--headline .forms--title, .page--sw .forms--content .forms--headline .forms--title { margin-top: 0rem; } .js--modal .content .forms--content .forms--headline .forms--text p, .page--sw .forms--content .forms--headline .forms--text p { margin-bottom: 0.75rem; } .js--modal .content .forms--content .alert, .page--sw .forms--content .alert { margin: 1.875rem 0rem 0rem 0rem; } .js--modal .content .forms--content .forms--field, .page--sw .forms--content .forms--field { margin-bottom: 0.3125rem; width: 100%; } .js--modal .content .forms--content input, .page--sw .forms--content input { margin-bottom: 0.625rem; width: 100%; } .js--modal .content .forms--content input[type="checkbox"], .page--sw .forms--content input[type="checkbox"] { width: auto; } .js--modal .content .forms--content textarea, .page--sw .forms--content textarea { margin-bottom: 0.625rem; width: 100%; } .js--modal .content .forms--content .field--select, .page--sw .forms--content .field--select { margin-bottom: 0.625rem; } .js--modal .content .forms--content .btn, .page--sw .forms--content .btn { float: right; } .js--modal .content .forms--content .buttons:after, .page--sw .forms--content .buttons:after { content: ""; display: table; clear: both; } .js--modal .content .forms--content .strasse, .page--sw .forms--content .strasse { margin-right: 2%; width: 80%; float: left; } .js--modal .content .forms--content .nr, .page--sw .forms--content .nr { width: 18%; float: left; } .js--modal .content .forms--content .plz, .page--sw .forms--content .plz { margin-right: 2%; width: 28%; float: left; } .js--modal .content .forms--content .ort, .page--sw .forms--content .ort { width: 70%; float: left; } .js--modal .content .forms--content .ort:after, .page--sw .forms--content .ort:after { content: ""; display: table; clear: both; } .js--modal .content .forms--content .forms--required, .page--sw .forms--content .forms--required { font-size: 0.75rem; margin-bottom: 0.625rem; } .js--modal .content .forms--content .forms--description, .page--sw .forms--content .forms--description { margin: -0.5rem 0rem 0.625rem 0rem; clear: both; } .js--modal .content .forms--content .forms--captcha strong.captcha--notice, .page--sw .forms--content .forms--captcha strong.captcha--notice { margin-bottom: 0.5rem; display: block; } .js--modal .content .forms--content .forms--checkbox label, .page--sw .forms--content .forms--checkbox label { top: -0.125rem; position: relative; } .js--modal .content .forms--content .forms--checkbox input[type="checkbox"], .page--sw .forms--content .forms--checkbox input[type="checkbox"] { width: auto; } @media screen and (min-width: 48em) { .js--modal .content .forms--content, .page--sw .forms--content { margin-top: 2.8125rem; } .js--modal .content .forms--content input, .page--sw .forms--content input { margin-bottom: 0.9375rem; } .js--modal .content .forms--content textarea, .page--sw .forms--content textarea { margin-bottom: 0.9375rem; } .js--modal .content .forms--content .forms--captcha strong.captcha--notice, .page--sw .forms--content .forms--captcha strong.captcha--notice { margin-bottom: 1rem; } } @media screen and (min-width: 78.75em) { .js--modal .content .forms--content, .page--sw .forms--content { margin-top: 2.8125rem; } .js--modal .content .forms--content .alert, .page--sw .forms--content .alert { margin: 0rem 0rem 0rem 0rem; } } .js--modal .content .sitemap--content, .page--sw .sitemap--content { margin-top: 0.625rem; } .js--modal .content .sitemap--content .sitemap--headline, .page--sw .sitemap--content .sitemap--headline { margin-bottom: 0.625rem; } .js--modal .content .sitemap--content .sitemap--headline .sitemap--title, .page--sw .sitemap--content .sitemap--headline .sitemap--title { margin-top: 0; } .js--modal .content .sitemap--content .sitemap--headline .sitemap--headline-text, .page--sw .sitemap--content .sitemap--headline .sitemap--headline-text { margin-bottom: 0rem; } .js--modal .content .sitemap--content .sitemap--category, .page--sw .sitemap--content .sitemap--category { padding-bottom: 0.625rem; margin-bottom: 1rem; min-height: 3.75rem; background-color: #f8f8fa; } .js--modal .content .sitemap--content .sitemap--category .sitemap--navigation-link, .page--sw .sitemap--content .sitemap--category .sitemap--navigation-link { padding: 0.25rem 0rem 0.25rem 1.25rem; color: #58514A; display: block; } .js--modal .content .sitemap--content .sitemap--category .sitemap--navigation-link:hover, .page--sw .sitemap--content .sitemap--category .sitemap--navigation-link:hover { color: #D5101C; } .js--modal .content .sitemap--content .sitemap--navigation-entry-inner .sitemap--navigation-link, .page--sw .sitemap--content .sitemap--navigation-entry-inner .sitemap--navigation-link { padding-left: 2.1875rem; } .js--modal .content .sitemap--content .sitemap--navigation-head, .page--sw .sitemap--content .sitemap--navigation-head { padding: 0.25rem 0.625rem 0.25rem 0.625rem; margin-bottom: 0.5rem; background: #ffffff; } .js--modal .content .sitemap--content .sitemap--navigation-head .sitemap--navigation-head-link, .page--sw .sitemap--content .sitemap--navigation-head .sitemap--navigation-head-link { color: #fff; } @media screen and (min-width: 48em) { .js--modal .content .sitemap--content, .page--sw .sitemap--content { margin-top: 1.25rem; } .js--modal .content .sitemap--content .sitemap--headline, .page--sw .sitemap--content .sitemap--headline { margin-bottom: 1.25rem; } .js--modal .content .sitemap--content .sitemap--category, .page--sw .sitemap--content .sitemap--category { width: 49%; float: left; margin-right: 2%; } .js--modal .content .sitemap--content .sitemap--category:last-child, .page--sw .sitemap--content .sitemap--category:last-child, .js--modal .content .sitemap--content .sitemap--category:nth-child(2), .page--sw .sitemap--content .sitemap--category:nth-child(2) { margin-right: 0rem; } } @media screen and (min-width: 64em) { .js--modal .content .sitemap--content .sitemap--category, .page--sw .sitemap--content .sitemap--category { width: 24%; float: left; margin-right: 1.25%; } .js--modal .content .sitemap--content .sitemap--category:last-child, .page--sw .sitemap--content .sitemap--category:last-child { margin-right: 0rem; } .js--modal .content .sitemap--content .sitemap--category:nth-child(2), .page--sw .sitemap--content .sitemap--category:nth-child(2) { margin-right: 1.25%; } } @media screen and (min-width: 78.75em) { .js--modal .content .sitemap--content, .page--sw .sitemap--content { margin-top: 2.8125rem; } } /* 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: auto !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; } } body > .js--loading-indicator { z-index: 99999; } body > .js--loading-indicator .icon--default::before { border: 2px solid #867F77 !important; border-top: 2px solid #F1EFED !important; } body > .js--loading-indicator + .js--loading-indicator { display: none !important; opacity: 0 !important; visibility: hidden !important; } body > .js--overlay.theme--dark { z-index: 98000; background: rgba(0, 0, 0, 0.7); } @media (max-width: 47.999em) { body > .js--overlay.theme--dark { z-index: 6000; } } body > .js--overlay.theme--dark + .js--overlay { display: none !important; opacity: 0 !important; visibility: hidden !important; } .product--rating i[class^=icon] { color: #D5101C; } .product--rating i.icon--star-empty { color: #707070; } .ajax-loader { display: none; } .is--rounded { border-radius: 0; 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: #000 !important; } .is--light { color: #9e9ebb !important; } .is--soft { color: #dadae5 !important; } .is--fluid { width: 100% !important; } .js--modal .content .content-main, .page--sw .content-main { box-shadow: none; } .js--modal .stage .bd-header { display: none; } .js--modal .stage .page { padding-top: 0; } .sales-bar { display: none; } .font-size-base { font-size: 16px; line-height: 24px; } .page--sw { padding-bottom: 80px; /* NP muss raus, wirft vererbung durcheinander, müssten sonst für checkout alle werte noch mal setzen .block:not([class*='column--']) { float: none; width: auto; }*/ } .page--sw .content.search--content, .page--sw .content.confirm--content, .page--sw .content.finish--content, .page--sw .content.content--checkout, .page--sw .content.content--basket { margin-top: 0 !important; } .page--sw.container { margin-right: auto; margin-left: auto; padding-right: 18px; padding-left: 18px; } .page--sw .container { width: auto !important; max-width: none !important; } .page--sw .ce__inner:before, .page--sw .ce__inner:after { display: table; content: ""; line-height: 0; } .page--sw .ce__inner:after { clear: both; } @media screen and (min-width: 1024px) { .sidebar-main { display: block; width: 25%; } } @media screen and (min-width: 1400px) { .sidebar-main { width: 25%; } } .sidebar-main.off-canvas { overflow: hidden; } @media screen and (min-width: 1024px) { .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; } } @media screen and (max-width: 64em) { .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 { padding-top: 4px; } } @media screen and (min-width: 1024px) { .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 { display: block; margin-left: calc(25% + 36px); } } @media screen and (min-width: 1400px) { .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: calc(25% + 36px); } } @media screen and (min-width: 1024px) { .listing--sidebar { display: block; width: 33.3333%; } } @media screen and (min-width: 1400px) { .listing--sidebar { display: block; width: 25%; } } @media screen and (min-width: 1024px) { .listing--sidebar + .content--wrapper { margin-left: calc(33.3333% + 36px); } } @media screen and (min-width: 1400px) { .listing--sidebar + .content--wrapper { margin-left: calc(25% + 36px); } } .icon--arrow-left::before { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e810'; } .icon--arrow-right::before { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e811'; } .icon--star-line::before { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e901'; } .icon--compare::before { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e814'; } .icon--heart::before { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e905' !important; } .content .ts-rating-light.productreviewsSummary .icon-star-full::before { font-family: "hailofont" !important; content: '\e903'; } .content .ts-rating-light.productreviewsSummary .icon-star-empty::before { font-family: "hailofont" !important; content: '\e903'; } .js--modal .content input[type="email"], .page--sw input[type="email"], .js--modal .content input[type="number"], .page--sw input[type="number"], .js--modal .content input[type="password"], .page--sw input[type="password"], .js--modal .content input[type="tel"], .page--sw input[type="tel"], .js--modal .content input[type="text"], .page--sw input[type="text"], .js--modal .content input[type="date"], .page--sw input[type="date"] { border: 1px solid #58514A !important; height: 55px; font-size: 16px; line-height: 24px; padding: 18px 10px 10px 10px; color: #58514A !important; } .js--modal .content input[type="email"]::placeholder, .page--sw input[type="email"]::placeholder, .js--modal .content input[type="number"]::placeholder, .page--sw input[type="number"]::placeholder, .js--modal .content input[type="password"]::placeholder, .page--sw input[type="password"]::placeholder, .js--modal .content input[type="tel"]::placeholder, .page--sw input[type="tel"]::placeholder, .js--modal .content input[type="text"]::placeholder, .page--sw input[type="text"]::placeholder, .js--modal .content input[type="date"]::placeholder, .page--sw input[type="date"]::placeholder { color: #B1ABA5 !important; } .js--modal .content input[type="date"], .page--sw input[type="date"] { padding-top: 10px; padding-right: 58px; font-family: Lato, sans-serif; appearance: none; background-position: center right 20px; background-repeat: no-repeat; background-size: auto 20px; background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%2358514AFF;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M6,6H7V7H6Zm3,6h1v1H9Zm3-6h1V7H12ZM9,6h1V7H9ZM6,8H7V9H6ZM3,8H4V9H3Zm9,0h1V9H12ZM9,8h1V9H9ZM6,10H7v1H6ZM3,10H4v1H3Zm9,0h1v1H12ZM9,10h1v1H9ZM6,12H7v1H6ZM3,12H4v1H3ZM16,1V15H0V1H3V0H4V1h8V0h1V1ZM1,2V4H15V2H13V3H12V2H4V3H3V2ZM15,14V5H1v9Z'/%3E%3C/svg%3E") !important; } .js--modal .content input[type="date"].no-val, .page--sw input[type="date"].no-val { color: #B1ABA5 !important; } .js--modal .content input[type="date"]::-webkit-datetime-edit, .page--sw input[type="date"]::-webkit-datetime-edit { text-transform: uppercase; opacity: 1; } .js--modal .content input[type="date"]::-webkit-datetime-edit *, .page--sw input[type="date"]::-webkit-datetime-edit * { opacity: 1; } .js--modal .content input[type="date"]::-webkit-calendar-picker-indicator, .page--sw input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; width: 96%; padding: 0; margin: 0; background: none !important; outline: none !important; } .js--modal .content select:not([style*="display:none"]):not([style*="display: none"]), .page--sw select:not([style*="display:none"]):not([style*="display: none"]) { font-size: 18px; } .js--modal .content fieldset.fly-label, .page--sw fieldset.fly-label { line-height: 29px; } .js--modal .content fieldset.fly-label:focus, .page--sw fieldset.fly-label:focus { line-height: 18px; } .js--modal .content fieldset.fly-label label, .page--sw fieldset.fly-label label { color: #B1ABA5 !important; } .js--modal .content .select-field, .page--sw .select-field, .js--modal .content .js--fancy-select, .page--sw .js--fancy-select { width: 100% !important; max-width: none !important; height: auto !important; } .js--modal .content .select-field::after, .page--sw .select-field::after, .js--modal .content .js--fancy-select::after, .page--sw .js--fancy-select::after { display: none !important; content: '' !important; } .js--modal .content #dreisc-filter-extended .dropdown-menu > li > a, .page--sw #dreisc-filter-extended .dropdown-menu > li > a { white-space: normal !important; } .js--modal .content #dreisc-filter-extended .bootstrap-select.btn-group .btn .filter-option, .page--sw #dreisc-filter-extended .bootstrap-select.btn-group .btn .filter-option { white-space: normal; } .js--modal .content #dreisc-filter-extended select.dreisc-config-select, .page--sw #dreisc-filter-extended select.dreisc-config-select { padding-left: 11px !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select { width: 100% !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle { position: relative; -moz-appearance: none; -webkit-appearance: none; appearance: none; display: block; width: 100%; border: 1px solid #58514A !important; border-radius: 0; padding: 15px; cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; text-align: left; background-color: white; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEJQTFRFRUVFRUpnm9LzcUpF89ijZ0pF89KbRUp/vO//yJ+MuX9Z89iulKaUn9LzdllsWX+5lpbAf0pFptLz/++889in////MkkNKAAAABZ0Uk5T////////////////////////////AAHSwOQAAABgSURBVHjaXM9HAsAgEAJA0nsP//9qNEYluzeYCwtyOGlv2klwRFEaaBtsxHXAkgN0PVhXhjy4ArT0gZc/RXhFKUGQTBk+iSQQJdAskOQl6MgkgWR9Fk/6sQjvdZH0CDAAnrATj5cKleEAAAAASUVORK5CYII=') !important; background-size: 12px auto; background-position: right 16px top 28px; background-repeat: no-repeat; border-radius: 0 !important; outline: none !important; transition: none; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle:active, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle:active, .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle:focus, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle:focus, .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle:hover, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle:hover { border: 1px solid #58514A !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle .filter-option, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle .filter-option { display: inline !important; float: none !important; padding: 0 !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle .icon--arrow-down, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select .btn.dropdown-toggle .icon--arrow-down { display: none !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu { margin-top: 5px; background-color: #fff; border: 1px solid #58514A !important; border-radius: 0 !important; box-shadow: none; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li { margin: 0 !important; padding: 0 !important; background: transparent; border: none; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option { padding: 10px 0 10px 15px; background: none !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option:hover, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option:hover { color: #D5101C !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option.possible, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option.possible { color: #58514A !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option.possible:hover, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option.possible:hover { color: #D5101C !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option.not-possible, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option.not-possible { color: #b1aba5 !important; } .js--modal .content #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option.not-possible:hover, .page--sw #dreisc-filter-extended .btn-group.dreisc-config-select div.dropdown-menu ul li .dreisc-config-option.not-possible:hover { color: #D5101C !important; } .page--sw .register--content .register--zip-city .register--field-zipcode, .page--sw .register--content .register--zip-city .register--field-city { width: 100%; } @media print { @page { size: A4; margin: 0; } html, body { width: 210mm; height: 297mm; } html.is--chrome .page-wrap, html.is--firefox .page-wrap { margin-left: 10mm; margin-right: 10mm; } .is--act-finish .content { margin-top: 50px; } .header .personal-area, .is--act-finish .finish--teaser, .shopware-wishlist, .shopware-account, .shopping-cart, .breadcrumb--list, .burger, .bd--intern-online-status-wrapper, .top-bar, .nav-container, .quicksearch--top, .newsletter, .footer, .shopinformation, #trustbadge-container-98e3dadd90eb493088abdc5597a70810, #top-link, #lz_overlay_chat, #lz_start, #lz_overlay_wm { display: none !important; } .page--sw .panel.has--border:not(.hero-unit) .panel--title { font-size: 14px !important; } .page-sw { padding-bottom: 0px !important; } .panel--body { height: auto !important; } .panel.has--border { border: 0px !important; } .panel--title.is--underline { padding: 0px !important; } .panel--title { margin: 0px !important; padding: 0px !important; } .panel--body { font-size: 10px !important; line-height: 16px !important; padding: 0px !important; } } .page-wrap .alert { font-size: 0.875rem; line-height: 1.5rem; position: relative; padding: 0; overflow: hidden; } .page-wrap .alert:after { content: ""; display: table; clear: both; } .page-wrap .alert.is--success { color: #208e4e; background: #def2e7; } .page-wrap .alert.is--success .alert--icon { background: #2ECC71; } .page-wrap .alert.is--info { color: #217dbb; background: #e9f2f8; } .page-wrap .alert.is--info .alert--icon { background: #4AA3DF; } .page-wrap .alert.is--warning { color: #ae8e0a; background: #fbf5db; } .page-wrap .alert.is--warning .alert--icon { background: #F1C40F; } .page-wrap .alert.is--error { color: #E74C3C; background: #faeceb; } .page-wrap .alert.is--error .alert--icon { background: #E74C3C; } .page-wrap .alert.no--cookies { position: fixed; z-index: 99999; top: 0; left: 0; right: 0; } .page-wrap .alert.no--cookies a.close--alert { float: right; } .page-wrap .alert.no--cookies a.close--alert:hover { cursor: pointer; text-decoration: underline; } .page-wrap .alert .icon--element { position: absolute; top: 50%; left: 0; width: 15%; margin-top: -9px; } .page-wrap .alert .alert--icon, .page-wrap .alert .alert--content { padding: 0.625rem 0.625rem 0.625rem 0.625rem; float: left; } .page-wrap .alert .alert--icon p, .page-wrap .alert .alert--content p { margin-bottom: 0rem; } .page-wrap .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; } .page-wrap .alert .alert--content { width: 85%; } .page-wrap .alert .alert--content.is--strong { font-weight: 700; } .page-wrap .alert .alert--list { list-style: none; } .page-wrap .alert .list--entry { display: block; } @media screen and (min-width: 48em) { .page-wrap .alert .alert--icon, .page-wrap .alert .icon--element { width: 8%; } .page-wrap .alert .alert--content { width: 92%; } } .navigation--smartphone { display: none; } .sidebar--categories-wrapper .sidebar--categories-navigation ul { margin-left: 0; list-style: none; } .sidebar--categories-wrapper .sidebar--categories-navigation ul li { /*&:not([class*="has--sub-children"]) { > a { } }*/ } .sidebar--categories-wrapper .sidebar--categories-navigation ul li a { position: relative; display: block; padding-right: 20px; font-size: 16px; font-weight: normal; line-height: 22px; color: #58514A; transition: color 0.15s ease-in-out, text-indent 0.15s ease-in-out, padding 0.15s ease-in-out; } .sidebar--categories-wrapper .sidebar--categories-navigation ul li a:hover { padding-left: 5px; padding-right: 15px; color: #656565 !important; text-decoration: none; } .sidebar--categories-wrapper .sidebar--categories-navigation ul li a.is--active { font-weight: bold; color: #d5101c; border-radius: 0 !important; } .sidebar--categories-wrapper .sidebar--categories-navigation ul li.has--sub-children > a .icon--arrow-right { position: absolute; top: 50%; right: 10px; font-size: 10px; line-height: 0; } .sidebar--categories-wrapper .sidebar--categories-navigation ul li.has--sub-children > a .icon--arrow-right:before { content: "\e907"; } .sidebar--categories-wrapper .sidebar--categories-navigation ul li.has--sub-children > a::after { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; right: 10px; font-size: 10px; line-height: 0; transform: rotate(-90deg); } .sidebar--categories-wrapper .sidebar--categories-navigation ul li.has--sub-children > a.is--active::after { transform: rotate(0deg); } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level0 > li > a { padding: 13px 30px 13px 10px; margin-bottom: -1px; text-transform: uppercase; border: solid #D8D8D8; border-width: 1px 0; } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level0 > li > a:hover { padding-left: 15px; padding-right: 25px; } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level1 { margin: 28px 20px; } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level1 > li + li { margin-top: 12px; } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level1 > li > a:after, .sidebar--categories-wrapper .sidebar--categories-navigation .is--level1 > li > a .icon--arrow-right { right: 0 !important; } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level2 { margin: 20px 10px 28px 20px; } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level2 > li + li { margin-top: 10px; } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level2 > li > a { font-size: 15px; } .sidebar--categories-wrapper .sidebar--categories-navigation .is--level2 > li > a:after, .sidebar--categories-wrapper .sidebar--categories-navigation .is--level2 > li > a .icon--arrow-right { right: 0 !important; } .product--rating i[class^=icon] { color: #565047; } .product--rating i.icon--star-empty { color: #565047; } .product--rating-link { color: #565047; } .image-slider--thumbnails--container { background: #E3E0DB; padding: 20px; min-height: 114px; } @media (max-width: 47.999em) { .image-slider .image-slider--slide { max-width: calc(100vw - 32px); } } .image-slider .image-slider--item .image--media { display: block; height: auto; } .image-slider .image-slider--item .image--media picture { display: inline-block; height: auto; } .image-slider .image-slider--item .image--media img:not([class*="lazyload"]), .image-slider .image-slider--item .image--media img:not([height]), .image-slider .image-slider--item .image--media img.lazyloaded { width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: auto; } .image-slider .image-slider--item.youtube { display: inline-flex; align-content: center; align-items: center; vertical-align: top; overflow: hidden; } @media (max-width: 47.999em) { .image-slider .image-slider--item.youtube iframe { max-width: calc(100vw - 32px); } } .image-slider .image-slider--item.youtube .youtube--element { display: block; width: 100%; height: auto; } .image-slider .image-slider--item.youtube .youtube--element .embed-container { display: block; position: relative; padding-bottom: 56.25%; /* ratio 16x9 */ overflow: hidden; width: 100%; height: auto; } .image-slider .image-slider--item.youtube .youtube--element .embed-container iframe, .image-slider .image-slider--item.youtube .youtube--element .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: auto; border: 0; } .image-gallery--modal .image-slider--item.youtube { display: inline-flex; align-content: center; align-items: center; vertical-align: top; } .image-gallery--modal .image-slider--item.youtube .youtube--element { display: block !important; width: 100%; height: 100vh; } .image-gallery--modal .image-slider--item.youtube .youtube--element .embed-container { display: block; width: 100%; height: auto; } .image-gallery--modal .image-slider--item.youtube .youtube--element .embed-container iframe, .image-gallery--modal .image-slider--item.youtube .youtube--element .embed-container video { width: 100%; height: auto; border: 0; } .product--details .article-overview-row .image-slider--thumbnails { display: none; position: relative; top: auto; left: auto; width: 100%; height: auto; margin-top: 20px; margin-bottom: 46px; white-space: initial; } @media (min-width: 768px) { .product--details .article-overview-row .image-slider--thumbnails { display: block; } } @media (min-width: 48em) { .product--details .article-overview-row .image-slider--thumbnails { margin-bottom: 0; } } .product--details .article-overview-row .image-slider--thumbnails .image-slider--thumbnails-slide { position: relative; top: auto; left: auto !important; line-height: 74px; } .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link { position: relative; display: inline-block; width: 92px; height: 92px; line-height: 0; margin: 0 15px 15px 0; padding: 0; border: 0; vertical-align: top; } @media (min-width: 48em) { .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link { width: 128px; height: 128px; } } .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link::after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; border: 1px solid #58514A; transition: border-color 0.4s; } .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link:hover::after, .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link.is--active::after { border-color: #D5101C; } .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link.youtube .icon--wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center; align-content: center; align-items: center; font-size: 35px; line-height: 50px; color: #d5101c; } .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link .image--element { position: relative; display: block; top: auto; left: auto; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; } .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link .image--element .image--media { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; z-index: 0; } .product--details .article-overview-row .image-slider--thumbnails .thumbnail--link img { display: inline-block; object-fit: contain; width: 100%; height: auto; transform: scale(1); transition: transform 0.4s; } .product--details .article-overview-row .image-slider--thumbnails .thumbnails--arrow { display: none !important; } .product--image-container .image-slider--container { margin-bottom: 0; } @media screen and (min-width: 420px) { .product--image-container .image-slider--container { height: 350px !important; } } @media screen and (min-width: 768px) { .product--image-container .image-slider--container { height: 350px !important; } } @media screen and (min-width: 1024px) { .product--image-container .image-slider--container { height: 600px !important; max-width: 600px; } } @media screen and (min-width: 1400px) { .product--image-container .image-slider--container { height: 600px !important; } } @media screen and (min-width: 1920px) { .product--image-container .image-slider--container { height: 600px !important; } } .js--modal .content .image-slider--container .arrow, .page--sw .image-slider--container .arrow { display: block; } .image-slider--thumbnails .thumbnails--arrow, .image-slider--container .thumbnails--arrow, .image-slider--thumbnails .arrow, .image-slider--container .arrow { width: 44px !important; height: 44px; line-height: 43px; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; background: none; font-size: 20px; color: #000000 !important; } .image-slider--thumbnails .thumbnails--arrow:hover, .image-slider--container .thumbnails--arrow:hover, .image-slider--thumbnails .arrow:hover, .image-slider--container .arrow:hover { text-decoration: none !important; border: none !important; } .image-slider--thumbnails .thumbnails--arrow { top: calc(50% - (44px / 2)) !important; } .image-slider .image--dots--container { position: relative; } .image-slider .image--dots--container .image-slider--dots { position: absolute; top: auto; bottom: 20px; width: 100%; padding: 0; } .product-slider--container.swiper-container .swiper-wrapper .swiper-slide { display: flex; justify-content: center; align-items: center; text-align: center; padding-bottom: 1px; } .product-slider--container.swiper-container .swiper-wrapper .swiper-slide .product--box { width: 100%; max-width: 100%; padding: 0; } .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; background: rgba(255, 255, 255, 0.5); } .panel--dot-nav .dot--link.is--active, .panel--dot-nav a.is--active { background: #D5101C; } .js--modal .content .panel--title, .page--sw .panel--title { display: block; color: #58514A; } .js--modal .content .panel--title.is--underline, .page--sw .panel--title.is--underline { margin-bottom: 10px; border-bottom: 1px solid #ffffff; text-decoration: none !important; } .page--sw .panel--title { padding: 1.875rem 0rem 0rem 0rem; margin: 0rem 0rem 0rem 0rem; } .page--sw .panel--title.is--underline { padding: 1.875rem 0rem 0.625rem 0rem; } .js--modal .content .panel--body, .page--sw .panel--body { display: block; position: relative; padding-top: 10px; font-size: 18px; line-height: 26px; color: #58514A; } .js--modal .content .panel--body a, .page--sw .panel--body a { text-decoration: underline; } .js--modal .content .panel--body.is--rounded, .page--sw .panel--body.is--rounded { border-radius: 0; } .page--sw .panel--body { padding: 10px 0; } .page--sw .panel--body.is--wide { padding: 0.625rem 0rem 0.625rem 0rem; } .panel--table { font-size: 16px; line-height: 24px; color: #58514A; } .panel--table.is--rounded { border-radius: 0; } .js--modal .content .panel, .page--sw .panel { background: none; } .content--confirm .confirm--inner-container .basket--footer, .finish--content .panel.has--border:not(.hero-unit), .account--orders-overview.panel, .confirm--content .panel.has--border, .page--sw .panel.has--border:not(.hero-unit) { background: #ffffff; border-color: #656565; border-radius: 0; } .content--confirm .confirm--inner-container .basket--footer .panel--title, .finish--content .panel.has--border:not(.hero-unit) .panel--title, .account--orders-overview.panel .panel--title, .confirm--content .panel.has--border .panel--title, .page--sw .panel.has--border:not(.hero-unit) .panel--title { font-size: 22px; margin: 0 18px; padding-bottom: 20px; } @media (min-width: 48em) { .content--confirm .confirm--inner-container .basket--footer .panel--title, .finish--content .panel.has--border:not(.hero-unit) .panel--title, .account--orders-overview.panel .panel--title, .confirm--content .panel.has--border .panel--title, .page--sw .panel.has--border:not(.hero-unit) .panel--title { margin: 0 36px; } } .content--confirm .confirm--inner-container .basket--footer .panel--title.is--underline, .finish--content .panel.has--border:not(.hero-unit) .panel--title.is--underline, .account--orders-overview.panel .panel--title.is--underline, .confirm--content .panel.has--border .panel--title.is--underline, .page--sw .panel.has--border:not(.hero-unit) .panel--title.is--underline { width: auto; border-color: #58514A; } .content--confirm .confirm--inner-container .basket--footer .panel--body, .finish--content .panel.has--border:not(.hero-unit) .panel--body, .account--orders-overview.panel .panel--body, .confirm--content .panel.has--border .panel--body, .page--sw .panel.has--border:not(.hero-unit) .panel--body { background: none; border-color: #f1efed; color: #58514A; padding: 18px; } @media (min-width: 48em) { .content--confirm .confirm--inner-container .basket--footer .panel--body, .finish--content .panel.has--border:not(.hero-unit) .panel--body, .account--orders-overview.panel .panel--body, .confirm--content .panel.has--border .panel--body, .page--sw .panel.has--border:not(.hero-unit) .panel--body { padding: 36px; } } .content--confirm .confirm--inner-container .basket--footer .panel--body .address--item-body > .panel--title, .finish--content .panel.has--border:not(.hero-unit) .panel--body .address--item-body > .panel--title, .account--orders-overview.panel .panel--body .address--item-body > .panel--title, .confirm--content .panel.has--border .panel--body .address--item-body > .panel--title, .page--sw .panel.has--border:not(.hero-unit) .panel--body .address--item-body > .panel--title { padding-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 36px; } .content--confirm .confirm--inner-container .basket--footer .panel--body .register--login-field, .finish--content .panel.has--border:not(.hero-unit) .panel--body .register--login-field, .account--orders-overview.panel .panel--body .register--login-field, .confirm--content .panel.has--border .panel--body .register--login-field, .page--sw .panel.has--border:not(.hero-unit) .panel--body .register--login-field, .content--confirm .confirm--inner-container .basket--footer .panel--body .password-reset--input, .finish--content .panel.has--border:not(.hero-unit) .panel--body .password-reset--input, .account--orders-overview.panel .panel--body .password-reset--input, .confirm--content .panel.has--border .panel--body .password-reset--input, .page--sw .panel.has--border:not(.hero-unit) .panel--body .password-reset--input, .content--confirm .confirm--inner-container .basket--footer .panel--body .select-field select, .finish--content .panel.has--border:not(.hero-unit) .panel--body .select-field select, .account--orders-overview.panel .panel--body .select-field select, .confirm--content .panel.has--border .panel--body .select-field select, .page--sw .panel.has--border:not(.hero-unit) .panel--body .select-field select, .content--confirm .confirm--inner-container .basket--footer .panel--body .field--select select, .finish--content .panel.has--border:not(.hero-unit) .panel--body .field--select select, .account--orders-overview.panel .panel--body .field--select select, .confirm--content .panel.has--border .panel--body .field--select select, .page--sw .panel.has--border:not(.hero-unit) .panel--body .field--select select, .content--confirm .confirm--inner-container .basket--footer .panel--body .register--field, .finish--content .panel.has--border:not(.hero-unit) .panel--body .register--field, .account--orders-overview.panel .panel--body .register--field, .confirm--content .panel.has--border .panel--body .register--field, .page--sw .panel.has--border:not(.hero-unit) .panel--body .register--field, .content--confirm .confirm--inner-container .basket--footer .panel--body .profile--field, .finish--content .panel.has--border:not(.hero-unit) .panel--body .profile--field, .account--orders-overview.panel .panel--body .profile--field, .confirm--content .panel.has--border .panel--body .profile--field, .page--sw .panel.has--border:not(.hero-unit) .panel--body .profile--field, .content--confirm .confirm--inner-container .basket--footer .panel--body .address--field, .finish--content .panel.has--border:not(.hero-unit) .panel--body .address--field, .account--orders-overview.panel .panel--body .address--field, .confirm--content .panel.has--border .panel--body .address--field, .page--sw .panel.has--border:not(.hero-unit) .panel--body .address--field { background-color: white; margin-bottom: 25px; } .content--confirm .confirm--inner-container .basket--footer .account--actions, .finish--content .panel.has--border:not(.hero-unit) .account--actions, .account--orders-overview.panel .account--actions, .confirm--content .panel.has--border .account--actions, .page--sw .panel.has--border:not(.hero-unit) .account--actions, .content--confirm .confirm--inner-container .basket--footer .panel--actions.is--wide, .finish--content .panel.has--border:not(.hero-unit) .panel--actions.is--wide, .account--orders-overview.panel .panel--actions.is--wide, .confirm--content .panel.has--border .panel--actions.is--wide, .page--sw .panel.has--border:not(.hero-unit) .panel--actions.is--wide { display: flex; flex-wrap: wrap; padding: 0 18px 18px; margin-left: 0; margin-right: 0; } @media (min-width: 48em) { .content--confirm .confirm--inner-container .basket--footer .account--actions, .finish--content .panel.has--border:not(.hero-unit) .account--actions, .account--orders-overview.panel .account--actions, .confirm--content .panel.has--border .account--actions, .page--sw .panel.has--border:not(.hero-unit) .account--actions, .content--confirm .confirm--inner-container .basket--footer .panel--actions.is--wide, .finish--content .panel.has--border:not(.hero-unit) .panel--actions.is--wide, .account--orders-overview.panel .panel--actions.is--wide, .confirm--content .panel.has--border .panel--actions.is--wide, .page--sw .panel.has--border:not(.hero-unit) .panel--actions.is--wide { padding: 0 36px 36px; } } .content--confirm .confirm--inner-container .basket--footer .address--required-info, .finish--content .panel.has--border:not(.hero-unit) .address--required-info, .account--orders-overview.panel .address--required-info, .confirm--content .panel.has--border .address--required-info, .page--sw .panel.has--border:not(.hero-unit) .address--required-info { margin-left: 36px; margin-right: 36px; } .content--confirm .confirm--inner-container .basket--footer .panel--tr, .finish--content .panel.has--border:not(.hero-unit) .panel--tr, .account--orders-overview.panel .panel--tr, .confirm--content .panel.has--border .panel--tr, .page--sw .panel.has--border:not(.hero-unit) .panel--tr, .content--confirm .confirm--inner-container .basket--footer .table--tr, .finish--content .panel.has--border:not(.hero-unit) .table--tr, .account--orders-overview.panel .table--tr, .confirm--content .panel.has--border .table--tr, .page--sw .panel.has--border:not(.hero-unit) .table--tr, .content--confirm .confirm--inner-container .basket--footer .table--header, .finish--content .panel.has--border:not(.hero-unit) .table--header, .account--orders-overview.panel .table--header, .confirm--content .panel.has--border .table--header, .page--sw .panel.has--border:not(.hero-unit) .table--header { background: none; border-color: #f1efed; } .content--confirm .confirm--inner-container .basket--footer .panel--tr.is--odd, .finish--content .panel.has--border:not(.hero-unit) .panel--tr.is--odd, .account--orders-overview.panel .panel--tr.is--odd, .confirm--content .panel.has--border .panel--tr.is--odd, .page--sw .panel.has--border:not(.hero-unit) .panel--tr.is--odd, .content--confirm .confirm--inner-container .basket--footer .panel--tr.is--secondary, .finish--content .panel.has--border:not(.hero-unit) .panel--tr.is--secondary, .account--orders-overview.panel .panel--tr.is--secondary, .confirm--content .panel.has--border .panel--tr.is--secondary, .page--sw .panel.has--border:not(.hero-unit) .panel--tr.is--secondary, .content--confirm .confirm--inner-container .basket--footer .basket--footer, .finish--content .panel.has--border:not(.hero-unit) .basket--footer, .account--orders-overview.panel .basket--footer, .confirm--content .panel.has--border .basket--footer, .page--sw .panel.has--border:not(.hero-unit) .basket--footer { border-color: #cbc5be; background-color: #f1efed; } .content--confirm .confirm--inner-container .basket--footer .order--repeat, .finish--content .panel.has--border:not(.hero-unit) .order--repeat, .account--orders-overview.panel .order--repeat, .confirm--content .panel.has--border .order--repeat, .page--sw .panel.has--border:not(.hero-unit) .order--repeat { background: #ffffff; padding-bottom: 40px; } .content--confirm .confirm--inner-container .basket--footer .orders--table-header, .finish--content .panel.has--border:not(.hero-unit) .orders--table-header, .account--orders-overview.panel .orders--table-header, .confirm--content .panel.has--border .orders--table-header, .page--sw .panel.has--border:not(.hero-unit) .orders--table-header { display: none; } @media screen and (min-width: 48em) { .content--confirm .confirm--inner-container .basket--footer .orders--table-header, .finish--content .panel.has--border:not(.hero-unit) .orders--table-header, .account--orders-overview.panel .orders--table-header, .confirm--content .panel.has--border .orders--table-header, .page--sw .panel.has--border:not(.hero-unit) .orders--table-header { display: block; } } .content--confirm .confirm--inner-container .basket--footer .account--paging, .finish--content .panel.has--border:not(.hero-unit) .account--paging, .account--orders-overview.panel .account--paging, .confirm--content .panel.has--border .account--paging, .page--sw .panel.has--border:not(.hero-unit) .account--paging { background: none; } .content--confirm .confirm--inner-container .basket--footer .account--payment-form .btn, .finish--content .panel.has--border:not(.hero-unit) .account--payment-form .btn, .account--orders-overview.panel .account--payment-form .btn, .confirm--content .panel.has--border .account--payment-form .btn, .page--sw .panel.has--border:not(.hero-unit) .account--payment-form .btn { margin-right: 5px; } .content--confirm .confirm--inner-container .basket--footer .account--payment-form .btn:last-child, .finish--content .panel.has--border:not(.hero-unit) .account--payment-form .btn:last-child, .account--orders-overview.panel .account--payment-form .btn:last-child, .confirm--content .panel.has--border .account--payment-form .btn:last-child, .page--sw .panel.has--border:not(.hero-unit) .account--payment-form .btn:last-child { margin-right: 0; } @media screen and (min-width: 64em) { .confirm--content .information--panel-wrapper .payment--panel .btn--change-payment { bottom: 36px; } } .masonry-item.youtube { display: inline-flex; align-content: center; align-items: center; vertical-align: top; } .masonry-item.youtube .youtube--element { display: block; width: 100%; height: auto; } .masonry-item.youtube .youtube--element .embed-container { display: block; position: relative; padding-bottom: 56.25%; /* ratio 16x9 */ overflow: hidden; width: 100%; height: auto; } .masonry-item.youtube .youtube--element .embed-container iframe, .masonry-item.youtube .youtube--element .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: auto; border: 0; } .masonry-item#review { z-index: 5; box-shadow: #ffffff 0 20px 0 0; } .masonry-item#product-detail-faq { z-index: 10; box-shadow: #ffffff 0 20px 0 0; } .tab-menu--product .product--rating-count { margin-left: 0; background: transparent; color: #D5101C; padding: 0; } @media (min-width: 48em) { .tab-menu--product .product--rating-count { font-size: 18px; line-height: 21px; } } .tab-menu--product .product--rating-count::before { content: '('; } .tab-menu--product .product--rating-count::after { content: ')'; } .tab-menu--product .tab--container .content--product-reviews, .tab-menu--product .tab--container .content--description { padding: 45px 0; } .tab-menu--product .tab--container .content--product-reviews .content--title, .tab-menu--product .tab--container .content--description .content--title { margin-bottom: 12px; } .tab-menu--product .tab--container .content--product-reviews .product--description, .tab-menu--product .tab--container .content--description .product--description { margin-bottom: 30px; } .tab-menu--product .masonry-grid { margin-right: -2%; } .tab-menu--product .content--product-reviews .content--title .headline { margin-bottom: 25px; } .tab-menu--product .content--product-reviews .content--title .content--title--average { margin-bottom: 26px; } .tab-menu--product .content--product-reviews .review--entry { margin: 0; padding: 28px 0 26px 0; background: 0; border: 0; border-top: 1px solid #B1ABA5; } .tab-menu--product .content--product-reviews .review--entry .entry--header { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 16px; } .tab-menu--product .content--product-reviews .review--entry .entry--header .product--rating { margin-right: 8px; } .tab-menu--product .content--product-reviews .review--entry .entry--content { font-size: 16px; } .tab-menu--product .content--product-reviews .content--product-reviews--all-without-top .collapse--header { position: relative; margin: 0; padding: 42px 30px 20px 0; background: none; border: 0; border-bottom: 1px solid #B1ABA5; border-radius: 0; text-transform: uppercase; font-weight: 600; box-shadow: none; } .tab-menu--product .content--product-reviews .content--product-reviews--all-without-top .collapse--header::after { position: absolute; bottom: 16px; right: 0; width: auto; z-index: 2; font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 20px; content: '\e80f'; } .tab-menu--product .content--product-reviews .content--product-reviews--all-without-top .collapse--header.is--active { box-shadow: none; color: inherit; } .tab-menu--product .content--product-reviews .content--product-reviews--all-without-top .collapse--header.is--active::after { content: '\e812'; } .tab-menu--product .content--product-reviews .content--product-reviews--all-without-top .collapse--content { top: -1px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } @media (max-width: 47.999em) { .tab-menu--product .tab--navigation { display: none !important; } .tab-menu--product .tab--container .tab--header .tab--title { display: block; position: relative; margin-top: -1px; padding: 20px 0; background: #ffffff; border: 1px solid #D8D8D8; border-left: 0; border-right: 0; color: #58514A; cursor: pointer; } .tab-menu--product .tab--container .tab--header .tab--title::after { position: absolute; top: 25px; right: 20px; width: auto; z-index: 2; font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 11px; } .tab-menu--product .tab--container .tab--header.is--active .tab--title::after { content: '\e907'; } .tab-menu--product .tab--container .tab--preview { display: block; padding: 20px 0 40px 0; } .tab-menu--product .tab--container .tab--content { display: none; position: relative; padding: 1.875rem 0rem 2.5rem 0rem; } .tab-menu--product .tab--container .tab--content .content--description { padding: 0; } .tab-menu--product .tab--container.is--active .tab--preview { display: none; } .tab-menu--product .tab--container.is--active .tab--header .tab--title::after { transform: rotate(180deg); } .tab-menu--product .tab--container.is--active .tab--content { display: block; } } .product--details .tab-menu--product.js--tab-menu .tab--navigation, .js--tab-menu .tab--navigation { display: flex; flex-wrap: wrap; list-style: none; margin-left: -5px; margin-right: -5px; } .product--details .tab-menu--product.js--tab-menu .tab--link, .js--tab-menu .tab--link { position: relative; display: none; width: calc((100% - (10px * 3)) / 3); top: 1px; margin: 0 5px; padding: 20px; background: #E3E0DB; font-weight: 700; text-align: center; color: #58514A; white-space: nowrap; transition: background 0.4s, color 0.4s; } .product--details .tab-menu--product.js--tab-menu .tab--link:focus, .js--tab-menu .tab--link:focus { outline: none; } .product--details .tab-menu--product.js--tab-menu .tab--link:hover, .js--tab-menu .tab--link:hover, .product--details .tab-menu--product.js--tab-menu .tab--link.is--active, .js--tab-menu .tab--link.is--active { background: #D5101C; color: #ffffff; } .product--details .tab-menu--product.js--tab-menu .tab--link:hover:hover, .js--tab-menu .tab--link:hover:hover, .product--details .tab-menu--product.js--tab-menu .tab--link.is--active:hover, .js--tab-menu .tab--link.is--active:hover { color: #ffffff; } .product--details .tab-menu--product.js--tab-menu .tab--link.has--content, .js--tab-menu .tab--link.has--content { display: inline-block; } .product--details .tab-menu--product.js--tab-menu .tab--container-list .tab--container, .js--tab-menu .tab--container-list .tab--container { display: none; margin-bottom: 80px; } .product--details .tab-menu--product.js--tab-menu .tab--container-list .tab--container.has--content.is--active, .js--tab-menu .tab--container-list .tab--container.has--content.is--active { display: block; } @media screen and (min-width: 30em) { .tab-menu--product .tab--navigation { display: block; } .tab-menu--product .tab--preview { display: none; } } @media screen and (min-width: 48em) { .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-slider.swiper-main.slidertype--product-slider { margin-top: 36px; margin-bottom: 80px; } .product-slider.swiper-main.slidertype--product-slider .swiper-wrapper { display: flex; height: auto; min-height: auto; align-items: stretch; } .product-slider.swiper-main.slidertype--product-slider .swiper-slide { width: calc(100% - 1px) !important; height: auto; } @media (min-width: 30em) { .product-slider.swiper-main.slidertype--product-slider .swiper-slide { width: calc((100% / 2) - (1px / 2)) !important; } } @media (min-width: 64em) { .product-slider.swiper-main.slidertype--product-slider .swiper-slide { width: calc((100% / 3) - (1px / 3)) !important; } } .product-slider.swiper-main.slidertype--product-slider .swiper-buttons .swiper-button-prev { left: 1px; } .product-slider.swiper-main.slidertype--product-slider .swiper-buttons .swiper-button-next { right: 1px; } .product-slider.swiper-main.slidertype--product-slider .product--box { height: auto; margin-bottom: 0; } .product-slider.swiper-main.slidertype--product-slider .product--box .box--content { height: auto; padding: 30px 30px 23px; } .product-slider.swiper-main.slidertype--product-slider .product--box .box--content .product--info { height: auto; padding-bottom: 24px; } .product-slider.swiper-main.slidertype--product-slider .product--box .box--content .product--info .product--image { margin-bottom: 13px; } .product-slider.swiper-main.slidertype--product-slider .product--box .box--content .product--info .product--title { display: block; } .product-slider.swiper-main.slidertype--product-slider .product--box .box--content .product--info .product--price { position: absolute; bottom: 0; right: 0; width: auto; z-index: 2; } .js--modal { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); border-radius: 0; z-index: 99000; } .js--modal .modal--close { top: 20px; right: 20px; border: 0; color: #D5101C; z-index: 2; } .js--modal .modal--close:hover { border: 0; } .js--modal.sizing--content .modal--close { top: 5px; right: 5px; } .js--modal .header { z-index: 0; } .js--modal .header .title { width: calc(100% - 60px); } .js--modal .icon--cross { color: #D5101C; } .js--modal .icon--cross::before { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e900'; font-size: 16px; } .js--modal .icon--cross:hover, .js--modal .icon--cross:focus, .js--modal .icon--cross:active { color: #c00408; } .js--modal .content .fly-label input.fl-input-valid ~ label.fl-label, .js--modal .content .fly-label input:focus ~ label.fl-label { color: #B1ABA5; } .js--modal .content .select-field select, .js--modal .content .address--field { color: #58514A; } .js--modal .content .address--field::placeholder { color: #58514A; } .js--modal .modal--checkout-add-article .modal--actions .title { max-width: 480px; margin-top: 44px; margin-bottom: 35px; font-size: 36px; line-height: 46px; } .js--modal .modal--checkout-add-article .modal--actions .button--group { display: flex; flex-wrap: wrap; margin: 0 -5px 14px; } .js--modal .modal--checkout-add-article .modal--actions .button--group .btn { margin-left: 5px; margin-right: 5px; margin-bottom: 10px; } @media (min-width: 48em) { .js--modal .modal--checkout-add-article .modal--actions .button--group .btn { width: auto; } } .js--modal .content .steps--container .steps--content .steps--list, .page--sw .steps--container .steps--content .steps--list { display: flex; justify-content: center; padding-left: 0; } .js--modal .content .steps--container .steps--content .steps--list .steps--entry, .page--sw .steps--container .steps--content .steps--list .steps--entry { display: flex; flex-direction: column; margin-bottom: 0; } @media (min-width: 48em) { .js--modal .content .steps--container .steps--content .steps--list .steps--entry, .page--sw .steps--container .steps--content .steps--list .steps--entry { flex-direction: row; align-items: flex-start; } } .js--modal .content .steps--container .steps--content .steps--list .steps--entry .icon--wrapper, .page--sw .steps--container .steps--content .steps--list .steps--entry .icon--wrapper { display: inline-flex; justify-content: center; text-align: center; } .js--modal .content .steps--container .steps--content .steps--list .steps--entry .icon--wrapper .icon, .page--sw .steps--container .steps--content .steps--list .steps--entry .icon--wrapper .icon { display: inline-flex; justify-content: center; align-content: center; align-items: center; border-radius: 46px; width: 46px; height: 46px; padding: 0; background: #ffffff; border: 1px solid #8D8476; color: #8D8476; } .js--modal .content .steps--container .steps--content .steps--list .steps--entry .icon--wrapper .icon .number, .page--sw .steps--container .steps--content .steps--list .steps--entry .icon--wrapper .icon .number { display: inline-block; margin-top: -2px; } .js--modal .content .steps--container .steps--content .steps--list .steps--entry .text, .page--sw .steps--container .steps--content .steps--list .steps--entry .text { display: flex; align-items: flex-start; margin-top: 5px; margin-left: 0; font-weight: 300; color: #8D8476; text-align: center; } @media (min-width: 48em) { .js--modal .content .steps--container .steps--content .steps--list .steps--entry .text, .page--sw .steps--container .steps--content .steps--list .steps--entry .text { align-items: center; margin-left: 10px; margin-top: 0; text-align: left; } } .js--modal .content .steps--container .steps--content .steps--list .steps--entry.steps--spacer, .page--sw .steps--container .steps--content .steps--list .steps--entry.steps--spacer { justify-content: center; align-items: center; color: #8D8476; } .js--modal .content .steps--container .steps--content .steps--list .steps--entry.is--active .icon, .page--sw .steps--container .steps--content .steps--list .steps--entry.is--active .icon { background: #D5101C; border: 1px solid #D5101C; color: #ffffff; } #filter .filter--actions { display: none !important; } .icon--filter:before { content: ""; display: inline-block; height: 12px; width: 12px; background-size: 12px 12px; background-image: url('../../../../../../themes/Frontend/Hailo/frontend/_public/src/img/filter.svg'); background-repeat: no-repeat; opacity: 1; transition: all 0.2s; } .page--sw .btn:active .icon--filter:before, .page--sw .btn:focus .icon--filter:before, .page--sw .btn:hover .icon--filter:before { opacity: 0.5; } .page--sw select:not([style*="display:none"]):not([style*="display: none"]) { color: #58514A; font-size: 16px; background-size: 12px auto; background-position: right 16px top 28px; } .hbspt-form label:not(.hs-form-booleancheckbox-display) { display: block; margin-bottom: 13px; } .hbspt-form select:not([style*="display:none"]):not([style*="display: none"]) { color: #58514A; } .hbspt-form fieldset.form-columns-2 .hs_firstname .input { margin-right: 12px; } .hbspt-form fieldset.form-columns-2 .hs_lastname label, .hbspt-form fieldset.form-columns-2 .hs_lastname .input { margin-left: 4px; } .hbspt-form .hs_newsletter_type_2 { display: inline-grid; } .hbspt-form .hs_newsletter_type_2 label:not(.hs-form-booleancheckbox-display) { margin-bottom: 0; } .hbspt-form .hs_newsletter_type_2 .inputs-list .hs-form-checkbox { margin-top: 0; margin-bottom: 0; padding-left: 0; } .hbspt-form .hs_newsletter_type_2 .inputs-list .hs-form-checkbox label:not(.hs-form-booleancheckbox-display) { margin-bottom: 0; } .hbspt-form .hs_newsletter_type_2 .hs-field-desc { order: 3; corlor: #b1aba5; margin-bottom: 15px; } .hbspt-form .hs-error-msgs li { padding-left: 0; margin-top: 0; } .hbspt-form .hs-error-msgs li .hs-error-msg { color: #d5101c; } .hbspt-form .actions { margin-top: 15px; } .hbspt-form .actions .hs-button { font-weight: bold; } .account--profile { padding-top: 0 !important; } .account--profile .title--red-dot { font-size: 35px !important; line-height: 55px; font-weight: 300; padding-top: 14px; } .account--profile .title--red-dot:after { content: "."; color: #d5101c; font-size: 200%; line-height: 10px; } .account--profile .panel.has--border:not(.hero-unit) { border: none; } .account--profile .panel.has--border:not(.hero-unit) .panel--title { margin: 0; } .account--profile .panel.has--border:not(.hero-unit) .panel--body { padding: 10px 0 36px 0; } .account--profile .panel.has--border:not(.hero-unit) .panel--body .select-field select, .account--profile .panel.has--border:not(.hero-unit) .panel--body .profile--field { color: #58514A; } .account--profile .panel.has--border:not(.hero-unit) .panel--body .profile--field::placeholder, .account--profile .panel.has--border:not(.hero-unit) .panel--body .fly-label input.fl-input-valid ~ label.fl-label, .account--profile .panel.has--border:not(.hero-unit) .panel--body .fly-label input:focus ~ label.fl-label { color: #58514A; } .account--profile .panel.has--border:not(.hero-unit) .panel--actions.is--wide { padding: 0 0 36px 0; } .account--profile .profile--email-password-container .panel.has--border:not(.hero-unit) .panel--title { padding-top: 0; padding-bottom: 0; } .account--profile .profile-password--container .panel.has--border:not(.hero-unit) .panel--body { padding: 36px 0 0 0; height: auto !important; } .account--profile .profile-password--container .panel.has--border:not(.hero-unit) .panel--actions.is--wide { padding: 36px 0 36px 0; } .account--content .account--welcome .panel--body { padding-top: 6px; } .account--address.account--content .address--field { width: 100%; } .account-info--container .panel--title, .account-address--container .panel--title { padding-bottom: 12px !important; } .account-info--container .panel--body, .account-address--container .panel--body { padding-top: 0 !important; } .account-info--container .panel--body .shipping--equal-info, .account-address--container .panel--body .shipping--equal-info { margin-top: 15px; } .account--logout { padding: 0 16px; } .account--logout .btn:first-child { margin-bottom: 6px; } @media (max-width: 360px) { .page--sw .panel.has--border:not(.hero-unit) .panel--actions.is--wide .btn--tile { font-size: 12px; } .page--sw fieldset.fly-label label { font-size: 14px; } } @media (max-width: 390px) { html body .page--sw .btn--checkout { padding-left: 12px; padding-right: 12px; font-size: 13px; } } @media (min-width: 64em) { .account--profile .title--red-dot { font-size: 45px !important; padding-top: 20px; } } @media (min-width: 48em) { .account--profile .profile--email-password-container .panel.has--border:not(.hero-unit) .panel--title { padding-top: 30px; } } @media (min-width: 48em) and (max-width: 64em) { .page--sw .account--content .panel.has--border:not(.hero-unit) .panel--title { margin: 0 5px; } .page--sw .account--content .panel.has--border:not(.hero-unit) .panel--body { padding: 5px; } .page--sw .account--content .panel.has--border:not(.hero-unit) .panel--actions.is--wide { padding: 0 5px 5px; } .page--sw .account--content .panel.has--border:not(.hero-unit) .panel--actions.is--wide .btn--tile { padding-left: 20px; padding-right: 20px; font-size: 12px; } } .account--address .panel.has--border .panel--body .address--item-body .panel--title, .address-manager--modal .panel.has--border .panel--body .address--item-body .panel--title { padding-bottom: 0; } .account--address .address--item-actions, .address-manager--modal .address--item-actions { align-items: end; } .account--address .address--item-actions .btn, .address-manager--modal .address--item-actions .btn { margin-right: 0; } .account--address .address--item-actions .btn:last-child, .address-manager--modal .address--item-actions .btn:last-child { margin-top: 15px; } .account--address .address--item-actions .btn--content, .address-manager--modal .address--item-actions .btn--content { padding: 0; margin-bottom: 6px; text-align: left; } .account--address-form .panel--title, .address-manager--modal .address-form--panel .panel--title { padding-bottom: 0; } .account--address-form .panel.has--border:not(.hero-unit), .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) { border: none; } .account--address-form .panel.has--border:not(.hero-unit) .panel--body, .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) .panel--body { padding: 0 0 36px 0; } .account--address-form .panel.has--border:not(.hero-unit) .panel--body .select-field select, .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) .panel--body .select-field select, .account--address-form .panel.has--border:not(.hero-unit) .panel--body .address--field, .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) .panel--body .address--field { color: #58514A; } .account--address-form .panel.has--border:not(.hero-unit) .panel--body .address--field::placeholder, .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) .panel--body .address--field::placeholder, .account--address-form .panel.has--border:not(.hero-unit) .panel--body .fly-label input.fl-input-valid ~ label.fl-label, .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) .panel--body .fly-label input.fl-input-valid ~ label.fl-label, .account--address-form .panel.has--border:not(.hero-unit) .panel--body .fly-label input:focus ~ label.fl-label, .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) .panel--body .fly-label input:focus ~ label.fl-label { color: #B1ABA5; } .account--address-form .panel.has--border:not(.hero-unit) .address--required-info, .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) .address--required-info { margin-left: 0; } .account--address-form .panel.has--border:not(.hero-unit) .panel--actions.is--wide, .address-manager--modal .address-form--panel .panel.has--border:not(.hero-unit) .panel--actions.is--wide { padding: 0 0 36px 0; } .account--address-form .address--zip-city, .address-manager--modal .address-form--panel .address--zip-city { display: block; } .account--address-form .address--zip-city fieldset.fly-label, .address-manager--modal .address-form--panel .address--zip-city fieldset.fly-label { width: 100%; } .account--address-form .address--zip-city fieldset.fly-label:first-child, .address-manager--modal .address-form--panel .address--zip-city fieldset.fly-label:first-child { width: 100%; } @media (min-width: 30em) { .account--address-form .address--zip-city, .address-manager--modal .address-form--panel .address--zip-city { display: flex; justify-content: space-between; } .account--address-form .address--zip-city fieldset.fly-label, .address-manager--modal .address-form--panel .address--zip-city fieldset.fly-label { width: 75%; } .account--address-form .address--zip-city fieldset.fly-label:first-child, .address-manager--modal .address-form--panel .address--zip-city fieldset.fly-label:first-child { width: 23%; } } .account--address-form .address--default-shipping, .address-manager--modal .address-form--panel .address--default-shipping, .account--address-form .address--default-billing, .address-manager--modal .address-form--panel .address--default-billing { display: flex; align-items: start; margin-bottom: 6px; } @media (min-width: 30em) { .account--address-form .address--default-shipping, .account--address-form .address--default-billing { align-items: start; } } @media (max-width: 48em) { .address-manager--modal .address--form-actions .btn:first-child { margin-bottom: 6px; } } @media (min-width: 48em) { .account--address .address--item-actions .btn, .address-manager--modal .address--item-actions .btn { margin-right: 6px; margin-bottom: 6px; } .account--address .address--item-actions .btn:last-child, .address-manager--modal .address--item-actions .btn:last-child { margin-top: 0; } } .page--sw .breadcrumbs { max-width: 1280px; margin: auto 8px auto; } @media (min-width: 1280px) { .page--sw .breadcrumbs { margin: auto; } } .page--sw .breadcrumbs ul { padding: 20px 0; margin: 0; } .page--sw .breadcrumbs ul li { padding: 0 !important; margin: 0 !important; } .ce--layout-full.breadcrumbs { padding: 0 16px; } .ce__inner .ce--layout-full.breadcrumbs { padding: 0; } .account--dropdown-navigation .navigation--headline { display: block; margin: 0px 20px 0px 20px; padding: 20px 0px 10px 0px; border-bottom: 1px solid #dadae5; font-size: 16px; line-height: 26px; font-weight: 700; color: #656565; text-decoration: none !important; } .account--dropdown-navigation .navigation--signin > a { width: 100%; height: 40px; margin-bottom: 0; padding: 2px 12px 2px 12px; line-height: 34px; text-align: center; vertical-align: middle; background-color: #D5101C; border: 0; color: #fff; border-radius: 3px; background-clip: padding-box; display: inline-block; position: relative; font-weight: 700; text-decoration: none; cursor: pointer; } .account--dropdown-navigation .navigation--signin > a:hover { background-color: #4B4B4B; } .account--dropdown-navigation .sidebar--navigation .navigation--link { display: block; padding: 3px 0px 3px 0px; transition: color 0.4s; } .account--dropdown-navigation .sidebar--navigation .navigation--link:hover { color: #D5101C; } .account--dropdown-navigation .account--menu::after { top: 2px; } #jquery--shop-menu .entry--account.js--is--dropdown-active { position: relative; } .sidebar--categories-wrapper .account--menu { background-color: #F1EFED; padding: 35px; border-radius: 0; border: 0; } .sidebar--categories-wrapper .account--menu ul { margin: 5px 0 0 0; list-style: none; } .sidebar--categories-wrapper .account--menu ul li a.navigation--link { position: relative; display: block; padding-top: 5px; padding-bottom: 5px; font-size: 16px; font-weight: normal; line-height: 22px; color: #58514A; text-decoration: none; transition: color 0.15s ease-in-out, text-indent 0.15s ease-in-out, padding 0.15s ease-in-out; } .sidebar--categories-wrapper .account--menu ul li a.navigation--link:hover { color: #D5101C !important; text-decoration: none; } .sidebar--categories-wrapper .account--menu ul li a.navigation--link.is--active { font-weight: bold; color: #d5101c; border-radius: 0 !important; } .page--sw .account--menu .navigation--headline { padding: 0; font-size: 22px; border: none; text-decoration: none !important; } .account--menu.is--personalized .navigation--link.navigation--personalized { padding-top: 18px; margin-top: 0; } .account--menu.is--personalized .navigation--link.navigation--personalized:hover { padding-left: 1.4375rem; } .account--menu.is--personalized .navigation--link.navigation--personalized .navigation--logout-personalized { display: none !important; } .account--menu .navigation--link.link--logout { border: none !important; } .sidebar-main { padding-top: 32px !important; } .sidebar--navigation { border-radius: 0; background: none; border: 0; } .sidebar--navigation .navigation--entry { margin: 0; border: 0; } .off-canvas .sidebar--navigation .navigation--link { padding: 0; } @media (max-width: 47.999em) { #shopware-page .ce .content-main--inner { display: grid; } .sidebar-main { display: block; position: relative; order: 2; width: 100%; background: transparent !important; z-index: 1; } .sidebar-main .account--menu { padding: 35px 9px; } .sidebar-main .account--menu .account--menu-container { padding: 10px 0; } .sidebar-main .account--menu .sidebar--navigation { padding: 0; } .sidebar-main .account--menu .sidebar--navigation .navigation--entry { padding-left: 10px; } .sidebar-main .categories--headline, .sidebar-main .sidebar--categories-navigation, .sidebar-main .shop-sites--container { display: none; } } .listing--content > h2 { margin-bottom: 8px; } .listing--content > h2 + p { margin-bottom: 30px; } .listing--bottom-paging { visibility: hidden !important; } .listing--container { clear: both; overflow: visible; } .listing--container .listing { display: flex; flex-wrap: wrap; margin: 0 -8px; } .listing--container .listing .product--box { float: none; width: 100%; margin: 0 8px 16px; padding: 0; } @media (min-width: 30em) { .listing--container .listing .product--box { width: calc((100% - (16px * 2)) / 2); } } @media (min-width: 48em) { .listing--container .listing .product--box { width: calc((100% - (16px * 3)) / 3); } } @media (min-width: 64em) { .listing--container .listing .product--box { width: calc((100% - (16px * 4)) / 4); } } .listing--wrapper .listing--actions { border-radius: 0; padding: 0; border: 0; background: none; } .listing--wrapper .listing--actions .filter-wr.no-sidebar .filter-caption { display: none; } .listing--wrapper .listing--actions .action--filter-options.is--collapsed { border: 0; } @media (min-width: 48em) { .listing--wrapper .listing--actions .action--filter-options.is--collapsed { z-index: 1; } } @media (min-width: 48em) { .listing--wrapper .listing--actions .filter--container { padding: 0; } } .listing--wrapper .listing--actions .filter--facet-container > div { display: flex; flex-wrap: wrap; } @media (min-width: 48em) { .listing--wrapper .listing--actions .filter--facet-container > div { margin: 0 -8px; } } .listing--wrapper .listing--actions .filter--facet-container > div .filter-element-wr { float: none; width: 100%; margin: 0 0 10px; touch-action: none; } @media (min-width: 48em) { .listing--wrapper .listing--actions .filter--facet-container > div .filter-element-wr { width: calc((100% - (3 * 16px)) / 3); margin: 0 8px 16px; } } .listing--wrapper .listing--actions .filter--facet-container > div .filter-element-wr .filter-panel { width: 100%; margin: 0; } .listing--wrapper .listing--actions .action--filter-btn { margin-left: 0; } .listing--wrapper .listing--actions .action--filter-btn .filter--trigger { height: auto; padding: 15px; line-height: 34px; } @media (max-width: 48em) { .listing--wrapper .listing--actions .action--filter-btn .filter--trigger { border: 1px solid #58514A; font-family: Lato, sans-serif; font-size: 16px; color: #58514A; } .listing--wrapper .listing--actions .action--filter-btn .filter--trigger:hover { text-decoration: none; color: #D5101C; } .listing--wrapper .listing--actions .action--filter-btn .filter--trigger .action--collapse-icon { margin-top: -2px; background: #D5101C; border-radius: 0; } } .listing--wrapper .listing--actions .action--sort { float: left; margin-right: 0; text-align: left; } @media (min-width: 48em) { .listing--wrapper .listing--actions .action--sort { width: calc((100% - (3 * 11px)) / 3); } } .listing--wrapper .listing--actions .action--sort .action--label { display: none; } .listing--wrapper .listing--actions .action--sort .ui-selectmenu-button.ui-button { height: 60px; padding: 19px 19px 0 19px; border-color: #58514A; } .listing--wrapper .listing--actions .action--sort .ui-selectmenu-button.ui-button:hover, .listing--wrapper .listing--actions .action--sort .ui-selectmenu-button.ui-button:focus { border-color: #D5101C; } .listing--wrapper .listing--actions .action--sort .ui-selectmenu-button.ui-button:hover .ui-selectmenu-icon, .listing--wrapper .listing--actions .action--sort .ui-selectmenu-button.ui-button:focus .ui-selectmenu-icon { color: #D5101C; } .listing--wrapper .listing--actions .action--sort .ui-selectmenu-button.ui-button .ui-selectmenu-icon { position: absolute; top: 15px; right: 17px; z-index: 2; width: auto; height: auto; } .listing--wrapper .listing--actions .action--sort .ui-selectmenu-button.ui-button .ui-selectmenu-icon::before { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e80f"; font-size: 14px; } .listing--wrapper .listing--actions .action--sort .ui-selectmenu-button.ui-button .ui-selectmenu-text { font-family: Lato, sans-serif; font-size: 16px; line-height: 19px; color: #58514A; } .listing--wrapper .listing--actions .filter-panel { background: #ffffff; height: 60px; border-radius: 0; } .listing--wrapper .listing--actions .filter-panel .filter-panel--flyout { height: 60px; border-radius: 0; border-color: #58514A; } .listing--wrapper .listing--actions .filter-panel .filter-panel--flyout .filter-panel--title { padding-top: 19px; padding-left: 23px; font-family: Lato, sans-serif; height: 60px; font-size: 16px; line-height: 19px; color: #58514A; } .listing--wrapper .listing--actions .filter-panel .filter-panel--flyout .filter-panel--icon { top: 22px; right: 17px; } .listing--wrapper .listing--actions .filter-panel .filter-panel--flyout .filter-panel--icon::before { font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e80f"; font-size: 14px; } .listing--wrapper .listing--actions .filter-panel .filter-panel--flyout .filter-panel--option-list { margin-top: 0; padding-left: 14px; } @media (max-width: 47.999em) { .listing--wrapper .filter-panel.is--collapsed { height: auto; } } .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout { height: auto; border-color: #D5101C; } .ui-selectmenu-open { z-index: 9999; } .ui-selectmenu-open .ui-menu { border: 1px solid #58514A; box-shadow: none; } .ui-selectmenu-menu .ui-menu-item:hover, .ui-selectmenu-menu .ui-menu-item:hover .ui-state-active, .ui-selectmenu-menu .ui-menu-item:hover .ui-widget-content .ui-state-active { background-color: #ffffff; color: #D5101C; } .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Ausstattungsstufe"] ~ .filter-panel--content.input-type--media .filter-panel--option-list, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Level of equipment"] ~ .filter-panel--content.input-type--media .filter-panel--option-list, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Niveau d'équipement"] ~ .filter-panel--content.input-type--media .filter-panel--option-list, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Poziom wyposażenia"] ~ .filter-panel--content.input-type--media .filter-panel--option-list, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Udstyrsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Uitrustingsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Livello dell'attrezzatura"] ~ .filter-panel--content.input-type--media .filter-panel--option-list { display: flex; flex-wrap: wrap; flex-direction: column; } .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Ausstattungsstufe"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Level of equipment"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Niveau d'équipement"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Poziom wyposażenia"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Udstyrsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Uitrustingsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Livello dell'attrezzatura"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option { height: 37px; margin: 5px 0; padding: 0; } .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Ausstattungsstufe"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Level of equipment"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Niveau d'équipement"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Poziom wyposażenia"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Udstyrsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Uitrustingsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Livello dell'attrezzatura"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container { max-width: none; width: auto; height: 37px; margin: 0; } .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Ausstattungsstufe"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Level of equipment"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Niveau d'équipement"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Poziom wyposażenia"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Udstyrsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Uitrustingsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Livello dell'attrezzatura"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label { height: auto; } .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Ausstattungsstufe"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label img, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Level of equipment"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label img, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Niveau d'équipement"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label img, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Poziom wyposażenia"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label img, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Udstyrsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label img, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Uitrustingsniveau"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label img, .listing--wrapper .filter-panel.is--collapsed .filter-panel--flyout .filter-panel--title[title="Livello dell'attrezzatura"] ~ .filter-panel--content.input-type--media .filter-panel--option-list .filter-panel--option .option--container .filter-panel--label img { width: auto; height: auto; } .box--slider { height: auto; } .is--discount { color: #D5101C; } .product--box { position: relative; z-index: 0; } .product--box a:hover { text-decoration: none; } .product--box .has--no-variants, .product--box .has--variants { height: auto; } .product--box .box--content { position: relative; height: auto; padding: 54px 0 0; border: 1px solid #E3E0DB; background: none; } .product--box .box--content .product--info { display: flex; flex-direction: column; justify-content: space-between; height: auto; padding: 0; text-align: center; } .product--box .box--content .product--info .product--image { position: relative; display: block; top: auto; left: auto; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; margin-bottom: 10px; } .product--box .box--content .product--info .product--image .image--element { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; z-index: 0; } .product--box .box--content .product--info .product--image .image--element .image--media { display: block; width: 100%; height: auto; } .product--box .box--content .product--info .product--image .image--element .image--media picture { display: block; width: 100%; height: auto; } .product--box .box--content .product--info .product--image .image--element .image--media picture img { display: inline-block; object-fit: contain; width: 100%; max-height: 300px; transform: scale(1); transition: transform 0.4s; } .product--box .box--content .product--info .product--image .ausstattungsstufe { position: absolute; right: 16px; bottom: 0; width: auto; z-index: 10; display: flex; justify-content: center; padding: 9px 3px; font-size: 8px; color: #ffffff; } .product--box .box--content .product--info .product--image .ausstattungsstufe.stufe-3 { background: transparent linear-gradient(135deg, #A06636 0%, #A06636 1%, #A86D3F 7%, #B87C52 21%, #BE8259 32%, #AB7043 51%, #A06636 68%, #A76D3E 80%, #BC8057 99%, #BE8259 100%) 0% 0% no-repeat padding-box; } .product--box .box--content .product--info .product--image .ausstattungsstufe.stufe-4 { background: transparent linear-gradient(135deg, #7F848A 0%, #8F9297 9%, #A2A2A7 23%, #A9A8AD 32%, #8C8F95 53%, #7F848A 66%, #878B91 77%, #A0A0A5 95%, #A9A8AD 100%) 0% 0% no-repeat padding-box; } .product--box .box--content .product--info .product--image .ausstattungsstufe.stufe-5 { background: transparent linear-gradient(135deg, #AD792A 0%, #AD792A 1%, #B37F2E 3%, #D19D44 14%, #E3B051 24%, #EAB756 30%, #DDAA4D 36%, #BA8633 56%, #AD792A 66%, #B58130 74%, #CD9A41 87%, #EAB756 100%) 0% 0% no-repeat padding-box; } .product--box .box--content .product--info .product--variants--info--wrapper .image-slider--container { height: auto; } .product--box .box--content .product--info .product--variants--info--wrapper .kib-product--variant-wrapper { display: inline-block; width: 40px; margin-left: -1px; } .product--box .box--content .product--info .product--variants--info--wrapper .kib-product--variant-wrapper .kib-product--variant { position: relative; display: block; top: auto; left: auto; height: 0; width: 100%; padding-bottom: 100%; overflow: hidden; border-radius: 0; } .product--box .box--content .product--info .product--variants--info--wrapper .kib-product--variant-wrapper .kib-product--variant img { display: inline-block; object-fit: contain; width: 100%; height: auto; transform: scale(1); transition: transform 0.4s; } .product--box .box--content .product--info .product--supplier-name { font-size: 16px; line-height: 22px; color: #656565; } .product--box .box--content .product--info .product--category-title-wrapper { margin-bottom: 18px; padding: 4px 10px 0; min-height: 77px; } @media (max-width: 64em) { .product--box .box--content .product--info .product--category-title-wrapper { padding-left: 20px; padding-right: 20px; } } .product--box .box--content .product--info .product--additional-name { marign-top: 1rem; margin-bottom: 7px; font-size: 13px; line-height: 18px; color: #B1ABA5; } .product--box .box--content .product--info .product--title { margin: 0; padding: 0; font-weight: normal; color: #58514A; font-size: 20px; line-height: 24px; } .product--box .box--content .product--info .product--description { margin: 0 0 43px 0; font-size: 15px; line-height: 22px; overflow: hidden; } .product--box .box--content .product--info .product--price-info .product--price { margin-top: 17px; margin-bottom: 20px; } .product--box .box--content .product--info .product--price-info .product--price .price--default { font-size: 32px; } .product--box .box--content .product--info .product--price-info .product--price .price--default.is--discount { color: #D5101C; } .product--box .box--content .product--info .product--price-info .product--price .price--default .price--pseudo { font-size: 16px; } .product--box .box--content .product--info .product--price-info .product--price .price--pseudo { text-decoration: line-through; } .product--box .product--rating-container { display: flex; justify-content: center; align-items: center; height: 18px; margin-top: -10px; margin-bottom: 18px; font-size: 14px; text-align: center; } .product--box .product--actions { position: absolute; top: 16px; left: auto; right: 16px; bottom: auto; width: auto; z-index: 20; display: flex; } .product--box .product--actions form { display: inline-block; } .product--box .product--actions .product--action { background: none; border: none; margin: 0; padding: 0; font-size: 20px; line-height: 14px; display: inline-block; width: 30px; color: #58514A; word-break: keep-all; white-space: nowrap; } .product--box .product--actions .product--action:hover { color: #D5101C; } .product--box .product--actions .action--compare { display: none; position: relative; text-indent: 9999px; height: 22px; overflow: hidden; } @media screen and (min-width: 48em) { .product--box .product--actions .action--compare { display: inline-block; } } .product--box .product--actions .action--compare .icon--compare { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 2; text-indent: 0; text-align: center; } .product--box .product--actions .action--compare .icon--compare::before { margin: 0; width: auto; } .product--box .product--actions .action--note:focus { outline: none; } .product--box .product--actions .action--note.js--is-saved { font-size: 14px; color: #2ECC71; } .product--box .product--actions .action--note [class^="icon--"] { display: inline-block; min-width: 20px; text-align: center; } .product--box .product--actions .action--note .action--text { display: none; } .listing .product--box:hover .product--image img { transform: scale(1.03) !important; } .content .ts-rating-light.productreviewsSummary .ts-stars-fullBar, .content .ts-rating-light.productreviewsSummary .ts-stars-emptyBar { display: flex; } .content .ts-rating-light.productreviewsSummary .icon-star-full, .content .ts-rating-light.productreviewsSummary .icon-star-empty { display: inline-block; } .product--details .product--box .product--badges, .product--box .product--badges { position: absolute; top: 16px; left: 16px; right: auto; z-index: 10; text-align: left; } .product--details .product--badges, .product--box .product--badges { max-width: calc(100% - 95px); } .product--details .product--badges .product--badge, .product--box .product--badges .product--badge { display: inline-flex; justify-content: center; align-content: center; align-items: center; width: auto; height: auto; border-radius: 22px; font-size: 13px; line-height: 15px; padding: 4px 10px; white-space: inherit; margin-left: 5px; margin-bottom: 5px; } .product--details .product--badges .badge--bundle, .product--box .product--badges .badge--bundle { display: none; } .product--details .product--badges .badge--discount, .product--box .product--badges .badge--discount { color: #FFFFFF; background: #E74C3C; } .product--details .product--badges .badge--recommend, .product--box .product--badges .badge--recommend { color: #FFFFFF; background: #2ECC71; } .product--details .product--badges .badge--newcomer, .product--box .product--badges .badge--newcomer { color: #FFFFFF; background: #F1C40F; } .product--details .product--badges .badge--esd, .product--box .product--badges .badge--esd { background: #4AA3DF; color: #FFFFFF; } .product--details .product--badges .product--badge.databadge--individual, .product--box .product--badges .product--badge.databadge--individual { background: #5FB95F; color: #ffffff; } .product--details .product--badges .databadge--discount, .product--box .product--badges .databadge--discount { font-size: 15px; background: #D5101C; color: #ffffff; } .product--details .product--badges .databadge--discount i, .product--box .product--badges .databadge--discount i { font-size: 11px; margin-left: 1px; } .is--ctl-detail .content-main .col--sw-sidebar { display: none; } .is--ctl-detail .content-main .col--sw-content { flex: 0 0 100% !important; max-width: 100% !important; } .product--details { position: relative; z-index: 10; overflow: hidden; } .product--details .product--detail-upper { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; margin-bottom: 0; padding-bottom: 0; } @media screen and (min-width: 768px) { .product--details .product--detail-upper { max-width: 728px; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 1024px) { .product--details .product--detail-upper { max-width: 100%; margin-left: 0; margin-right: 0; } } .product--details .product--detail-upper::before, .product--details .product--detail-upper::after { display: none; } .product--details .product--detail-upper .product--image-container { width: 100%; margin-right: 0; } @media screen and (min-width: 1024px) { .product--details .product--detail-upper .product--image-container { width: 100%; } } .product--details .product--detail-upper .product--buybox { width: 100%; margin-top: 30px; } @media (min-width: 64em) { .product--details .product--detail-upper .product--buybox { margin-top: 0; } } @media screen and (min-width: 1024px) { .product--details .product--detail-upper .product--buybox { width: calc(41.27% - 18px); } } .product--details .product--header .product--title-infos { margin-bottom: 4px; } .product--details .product--header .product--title-infos .product--rating-container, .product--details .product--header .product--title-infos .product--sku { display: inline-block; } .product--details .product--header .product--title-infos .product--sku { padding-right: 30px; } .product--details .product--header .product--title-infos .product--rating { font-size: 18px; } .product--details .product--header .product--title-infos .product--rating .rating--count-wrapper { vertical-align: super; } .product--details .product--header .product--title { margin-left: 0; } .product--details .product--header .product--description-short { margin-top: 20px; } .product--details .product--supplier { height: 80px; text-align: right; float: right; margin: 0; } .product--details .product--supplier .product--supplier-link { height: 80px; display: inline-block; max-width: 100%; } .product--details .product--supplier img { width: auto; height: auto; max-width: 80px; max-height: 80px; margin-left: 10px; } .product--details .buybox--inner .product--price { margin-top: 25px; } .product--details .buybox--inner .price--discount-icon { display: inline-block; position: relative; vertical-align: top; padding: 7px 7px 5px; margin: 0 5px; border-radius: 3px; background: #E74C3C; font-size: 13px; line-height: 13px; color: #FFFFFF; text-align: center; font-weight: 700; } .product--details .buybox--inner .content--discount { display: inline-block; font-size: 14px; padding: 4px 0; white-space: nowrap; } .product--details .buybox--inner .content--discount .price--line-through { text-decoration: line-through; color: #4B4B4B; } .product--details .buybox--inner .content--discount .price--discount-percentage { display: none; } .product--details .buybox--inner .product--tax { color: #b1aba5; } .product--details .buybox--inner .product--tax a { color: #b1aba5; } .product--details .buybox--form .buybox--button-container { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1rem !important; margin-left: 0; margin-right: 0; } .product--details .buybox--form .buybox--button-container::before, .product--details .buybox--form .buybox--button-container::after { display: none; } .product--details .buybox--form .buybox--button-container button .buy-btn--cart-add { white-space: nowrap; } .product--details .buybox--form .buybox--button-container button .buy-btn--cart-add + .buy-btn--cart-text { margin-left: 0.175em; white-space: nowrap; } .product--details .buybox--form .buybox--button-container button.buybox--button { width: 100%; } .product--details .buybox--form .buybox--button-container button.professional-request-perform { width: 100%; } .product--details .product--actions { margin-top: 15px; margin-bottom: 20px; } .product--details .product-slider--container .product--actions { margin-top: 0px; margin-bottom: 0px; } .product--details .buybox--kontakt { padding: 20px; margin-bottom: 20px; background: #E3E0DB; color: #777777; } @media (min-width: 48em) { .product--details .buybox--kontakt { margin-bottom: 30px; padding: 34px 36px; } } .product--details .buybox--kontakt > div { display: inline-block; margin-right: 38px; } .product--details .buybox--kontakt i { margin-right: 10px; } .product--details .buybox--kontakt a { color: #777777; transition: opacity 0.4s; } .product--details .buybox--kontakt a:hover { opacity: 0.6; } .product--details .product--base-info-links { margin-bottom: 10px; } @media (min-width: 48em) { .product--details .product--base-info-links { margin-bottom: 30px; } } .product--details .product--base-info-links ul { list-style-type: none; margin: 0; padding: 0; } .product--details .product--base-info-links ul li a { display: inline-block; position: relative; padding: 6px 0 6px 24px; } @media (min-width: 48em) { .product--details .product--base-info-links ul li a { padding: 0 0 0 24px; } } .product--details .product--base-info-links ul li a::before { position: absolute; top: 10px; left: 0; width: auto; z-index: 2; font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #D5101C; } @media (min-width: 48em) { .product--details .product--base-info-links ul li a::before { top: 4px; } } .product--details .product--properties { width: 100%; overflow-x: auto; margin-bottom: 30px; } .product--details .product--properties .product--properties-table { width: 100%; background: #f8f7f6; } .product--details .product--properties td { padding: 8px 10px; border: 0 none; } @media (min-width: 48em) { .product--details .product--properties td { padding: 18px 36px; } } .product--details .product--properties td.product--properties-label { width: 30%; } .product--details .product--properties td.product--properties-value { width: 80%; } .product--details .product--properties tr:nth-child(even) td { background: #FFFFFF; } .product--details .tab-menu--product { grid-area: thumbs; } .product--details .tab-menu--product .content--description--upper { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; } .product--details .tab-menu--product .content--description--upper .content--title { margin-bottom: 24px; } .product--details .tab-menu--product .content--description--upper > .col { flex-basis: initial; flex-grow: initial; padding: 0; } .product--details .tab-menu--product .content--description--upper > .col:first-child { order: 1; width: 100%; } @media (min-width: 64em) { .product--details .tab-menu--product .content--description--upper > .col:first-child { order: 2; width: calc(56% - 18px); } } .product--details .tab-menu--product .content--description--upper > .col:last-child { order: 2; width: 100%; } @media (min-width: 64em) { .product--details .tab-menu--product .content--description--upper > .col:last-child { order: 1; width: calc(44% - 18px); } } .product--details .tab-menu--product .content--description--upper .link--publish-varianten { text-decoration: underline; } @media (min-width: 48em) { .product--details .tab-menu--product .product--description.short { display: none; } } .product--details .tab-menu--product .product--description.short.is--inactive { max-height: 0; overflow: hidden; } .product--details .tab-menu--product .product--description.short .open { display: inline-block; margin-top: 28px; } .product--details .tab-menu--product .product--description.long { max-height: 0; overflow: hidden; } @media (min-width: 48em) { .product--details .tab-menu--product .product--description.long { max-height: none; overflow: visible; } } .product--details .tab-menu--product .product--description.long.is--active { max-height: 2000px; overflow: visible; } .product--details .tab-menu--product ul.content--list { margin: 0; padding: 0; list-style-type: none; } .product--details .tab-menu--product ul.content--list li.list--entry .content--link .icon--arrow-right { margin-right: 4px; } .product--details .tab-menu--product ul.content--list li.list--entry .content--link .icon--arrow-right::before { content: '\e900'; } .product--details .product--delivery .delivery--status-icon { width: 12px; height: 12px; margin-right: 0.5rem; } body .content--faq .faqListBox .faq-category-header .collapse--toggler { display: none; height: 1rem; top: 50%; right: 1.125rem; font-size: 0.5rem; line-height: 1rem; position: absolute; font-weight: 400; font-family: shopware; } body .content--faq .faqListBox .faq-category-header .collapse--toggler:before { content: "\e612"; } body .content--faq .faqListBox .faq-category-header.is--active .collapse--toggler:before { content: "\e610"; } body .content--faq .faqListBox .faq-category-content { margin-bottom: -1px; } body .content--faq .faqListBox .collapse.faq-category-header { position: relative; cursor: pointer; border-top: 1px solid transparent; } body .content--faq .faqListBox .collapse.faq-category-header .faqCategorie { padding-right: 3rem; } body .content--faq .faqListBox .collapse.faq-category-header .collapse--toggler { display: block; } body .content--faq .faqListBox .collapse.faq-category-content { display: none; } body .content--faq .faqListBox .collapse + .faq-category-header { border-top: 1px solid #B1ABA5; } body .content--faq .faqListBox .faqBox { padding-bottom: 10px; border-top: 1px solid #B1ABA5; border-bottom: 1px solid #B1ABA5; } body .content--faq .faqListBox .faqBox + .faqBox { border-top: none !important; } body .content--faq .faqListBox .faqBox + .faqCategorie { margin-top: 3rem; } body .content--faq .faqListBox .faqBox .collapse--header { padding-left: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; color: #58514A; line-height: 1.2rem; background: none; border: none; box-shadow: none; } body .content--faq .faqListBox .faqBox .faqAnswer { padding: 0; background: none; border: none; box-shadow: none; } body .content--faq .faqListBox .faqBox .faqAnswer p, body .content--faq .faqListBox .faqBox .faqAnswer ul li { font-size: 14px; line-height: 22px; } .bundle-container { padding-top: 30px; } .bundle-container .bundle--panel .bundle--panel-header { padding: 0 !important; } .bundle-container .collapse--header { margin: 0 0 30px 0 !important; } .bundle--panel { border: 0 !important; margin-bottom: 0; } .bundle--panel .panel--body { padding: 0 !important; } .bundle--panel .bundle--panel-header { padding-bottom: 0 !important; margin: 0 !important; } .bundle--panel .content--bundle-header { border-bottom: 0; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; } .bundle--panel .content--bundle-header:after { display: none; } .bundle--panel .bundle-header--slider-container { display: flex; width: 100%; flex-wrap: wrap; margin-bottom: 20px; } .bundle--panel .bundle-header--price-container { width: auto; margin-left: 0; margin-bottom: 20px; min-width: 220px; } .bundle--panel .bundle--image-slider-container { position: relative; width: max-content !important; } .bundle--panel .bundle--image-slider-container .bundle--container-item:first-child { margin-left: 0; } .bundle--panel .bundle--product-slider-image .image--bundle-img { width: auto; max-height: auto; } .bundle--panel .product--image { border: 1px solid #58514A; } .bundle--panel .item--separator { color: #58514A; } .bundle--panel .bundle--wrapper-product { display: flex; flex-wrap: wrap; } .bundle--panel .bundle--product-name { width: auto; margin-left: 0; margin-right: 5px; float: left; } .bundle--panel .bundle--product-name a { color: #58514A; } .bundle--panel .bundle--product-price-supplier { width: fit-content; margin-left: 0; } .bundle--panel .bundle--product-delivery { width: 100%; line-height: initial; margin-left: 0; } .bundle--panel .container--price-text { font-size: 15px; line-height: initial; } .bundle--panel .price--container { padding-left: 0; } .bundle--panel .bundle--add-to-cart-button { left: 0 !important; padding: 15px 20px; width: auto; font-size: 13px; width: 100% !important; } @media screen and (min-width: 600px) { .content--products-container { width: 50%; } } @media screen and (min-width: 48em) { .bundle--panel .content--bundle-header { width: auto; } .bundle--panel .content--products-container { width: 100%; } .bundle--panel .bundle-header--slider-container { display: flex; width: auto; flex-wrap: initial; } .bundle--panel .bundle--product-name, .bundle--panel .bundle--product-delivery, .bundle--panel .bundle--product-price-supplier { margin-left: 10px; } } .product--details--passend-fuer-container .bullets-big { display: flex; flex-wrap: wrap; margin-bottom: 30px; } .product--details--passend-fuer-container .bullets-big .bullet { display: flex; justify-content: center; align-content: center; align-items: center; flex-direction: column; width: 80px; height: 80px; border-radius: 80px; background: #F1EFED; margin-right: 10px; margin-bottom: 10px; } .product--details--passend-fuer-container .bullets-big .bullet .image { width: 28px; height: 28px; margin-bottom: 4px; } .product--details--passend-fuer-container .bullets-big .bullet .text-oben { font-size: 21px; line-height: 33px; } .product--details--passend-fuer-container .bullets-big .bullet .text { font-size: 12px; line-height: 20px; text-transform: uppercase; } .product--details--passend-fuer-container .product--details--passend-fuer-schraenke .headline { margin-bottom: 16px; text-transform: uppercase; } .product--details--passend-fuer-container .bullets-small { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; } .product--details--passend-fuer-container .bullets-small li { display: flex; justify-content: center; align-content: center; align-items: center; flex-direction: column; width: 34px; height: 34px; border-radius: 34px; background: #F1EFED; margin: 0 7px 7px 0; padding: 0; font-size: 14px; line-height: 14px; } .product--details--passend-fuer-container .bullets-small li.color-40 { background-color: #E3E0DB; } .product--details--passend-fuer-container .bullets-small li.color-45 { background-color: #C7C3BF; } .product--details--passend-fuer-container .bullets-small li.color-50 { background-color: #867F77; color: #ffffff; } .product--details--passend-fuer-container .bullets-small li.color-60 { background-color: #746C65; color: #ffffff; } .product--details--passend-fuer-container .bullets-small li.color-80 { background-color: #615953; color: #ffffff; } .product--details--passend-fuer-container .bullets-small li.color-90 { background-color: #58514A; color: #ffffff; } .product--actions .action--form { display: inline-block; } .product--actions .action--form button { background: none; border: none; padding: 0; } .product--actions .action--link { display: inline-block; border: 0; font-family: Lato, sans-serif; font-size: 14px; color: #58514A; margin-bottom: 10px; margin-right: 10px; cursor: pointer; transition: color 0.4s; } .product--actions .action--link:hover { color: #b1aba5; } .product--actions .action--link i { margin-right: 4px; } .product--actions .action--link.action--compare { display: none; } @media screen and (min-width: 48em) { .product--actions .action--link.action--compare { display: inline-block; } } .emotion--wrapper { width: 100%; overflow: visible; } .emotion--wrapper .emotion--container { background: none; } .emotion--wrapper .emotion--element { max-width: none; padding-right: 0; } .address--actions-set-defaults { margin-bottom: 0.625rem; line-height: normal; } .address--actions-set-defaults .btn { padding: 5px; color: #ffffff; } .address--actions-set-defaults .btn:hover { color: #D5101C; } .js--modal .content .account-address--container, .page--sw .account-address--container, .js--modal .content .account-info--container, .page--sw .account-info--container { display: flex; flex-wrap: wrap; justify-content: space-between; } .js--modal .content .account-address--container::after, .page--sw .account-address--container::after, .js--modal .content .account-info--container::after, .page--sw .account-info--container::after { display: none; } .js--modal .content .account-address--container .account--shipping, .page--sw .account-address--container .account--shipping, .js--modal .content .account-info--container .account--shipping, .page--sw .account-info--container .account--shipping, .js--modal .content .account-address--container .account--payment, .page--sw .account-address--container .account--payment, .js--modal .content .account-info--container .account--payment, .page--sw .account-info--container .account--payment, .js--modal .content .account-address--container .account--info, .page--sw .account-address--container .account--info, .js--modal .content .account-info--container .account--info, .page--sw .account-info--container .account--info, .js--modal .content .account-address--container .account--billing, .page--sw .account-address--container .account--billing, .js--modal .content .account-info--container .account--billing, .page--sw .account-info--container .account--billing { width: 100%; } @media (min-width: 30em) { .js--modal .content .account-address--container .account--shipping, .page--sw .account-address--container .account--shipping, .js--modal .content .account-info--container .account--shipping, .page--sw .account-info--container .account--shipping, .js--modal .content .account-address--container .account--payment, .page--sw .account-address--container .account--payment, .js--modal .content .account-info--container .account--payment, .page--sw .account-info--container .account--payment, .js--modal .content .account-address--container .account--info, .page--sw .account-address--container .account--info, .js--modal .content .account-info--container .account--info, .page--sw .account-info--container .account--info, .js--modal .content .account-address--container .account--billing, .page--sw .account-address--container .account--billing, .js--modal .content .account-info--container .account--billing, .page--sw .account-info--container .account--billing { width: 49%; } } @media (max-width: 47.999em) { .js--modal .content .table--aggregation, .page--sw .table--aggregation { background: none; margin: 0 !important; } } .js--modal .content .aggregation--list, .page--sw .aggregation--list { background: none; } @media (max-width: 47.999em) { .js--modal .content .aggregation--list, .page--sw .aggregation--list { margin: 0 !important; } } .js--modal .content .aggregation--list .entry--label, .page--sw .aggregation--list .entry--label { font-weight: bold; margin-right: 8px; } .js--modal .content .aggregation--list .entry--value, .page--sw .aggregation--list .entry--value { float: right !important; } .js--modal .content .aggregation--list .entry--value.is--no-star, .page--sw .aggregation--list .entry--value.is--no-star { margin-right: 0.375rem; } .js--modal .content .aggregation--list .entry--total, .page--sw .aggregation--list .entry--total { margin-top: 18px; border-top: 1px solid #cbc5be; padding-top: 20px; padding-bottom: 5px; font-size: 18px; color: #58514A; } .js--modal .content .finish--teaser h2, .page--sw .finish--teaser h2 { width: auto; } .account--orders-overview { border: none; } .account--orders-overview .orders--table-header { overflow: hidden; border: none; } .account--orders-overview .orders--table-header .panel--th { color: #58514A; background-color: #f1efed; } .account--orders-overview .orders--table-header .panel--th.column--actions.is--align-center { text-align: right !important; } .account--orders-overview .orders--table-header.panel--tr:not(.is--secondary) .panel--th { padding: 10px 14px; } .account--orders-overview .order--item-container { border: 1px solid #E3E0DB; margin: 20px 0; } .account--orders-overview .order--item-container .order--item, .account--orders-overview .order--item-container .order--details { margin: 0 !important; border: none !important; } .account--orders-overview .order--item-container .order--details { padding-top: 5px !important; } .account--orders-overview .order--item .panel--td { padding: 10px 14px; } @media (min-width: 48em) { .account--orders-overview .column--date { width: 18%; } .account--orders-overview .column--id { width: 16%; } .account--orders-overview .column--actions { width: 21%; } .account--orders-overview .column--name { width: 53.3%; } .account--orders-overview .column--price { width: 18.5%; } .account--orders-overview .column--total { width: 18%; } .account--orders-overview .column--summary-labels { width: 22%; } .account--orders-overview .column--summary-data { width: 18%; } } @media (min-width: 48em) and (max-width: 842px) { .account--orders-overview .column--info-data { padding-left: 21px; } } .account--orders-overview .panel--tr { border-color: #E3E0DB !important; } .account--orders-overview .order--item, .account--orders-overview .order--details { margin: 20px 0; border: 1px solid #E3E0DB; } .account--orders-overview .order--item .column--value { display: flex; line-height: 18px; } .account--orders-overview .order--item .order--status-icon { width: 10px; height: 10px; min-width: 10px; top: 4px; margin-right: 5px; } .account--orders-overview .order--item .order--status-icon.status--4, .account--orders-overview .order--item .order--status-icon.status--8 { background: #c00408; } @media (min-width: 48em) { .account--orders-overview .order--item { max-height: 77px; } } .account--orders-overview .order--details { background-color: #ffffff; padding: 20px 14px 0; } .account--orders-overview .order--details .panel--tr { border: none; background: #ffffff; } .account--orders-overview .order--details .panel--tr.order--repeat { margin: 15px 0; padding: 0; border-bottom: 0; } .account--orders-overview .order--details .panel--tr .panel--td .order--name { color: #58514A; } .account--orders-overview .order--actions .btn.is--small:not(.is--active)::after, .account--orders-overview .order--actions .btn.is--small.is--active::after { font-family: hailofont; font-style: normal; font-weight: 400; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 30px; content: "\e80f"; } @media (min-width: 916px) and (max-width: 1200px) { .account--orders-overview .order--actions .btn.is--small:not(.is--active)::after, .account--orders-overview .order--actions .btn.is--small.is--active::after { margin-left: 10px; } } .account--orders-overview .order--actions .btn.is--small:not(.is--active)::after { content: "\e80f"; } .account--orders-overview .order--actions .btn.is--small.is--active::after { content: "\e812"; } @media (min-width: 48em) and (max-width: 916px) { .account--orders-overview .order--actions .btn.is--small { font-size: 9px; } .account--orders-overview .order--actions .btn.is--small:not(.is--active)::after, .account--orders-overview .order--actions .btn.is--small.is--active::after { margin-left: 5px; } } .account--orders-overview .order--repeat { text-align: right; } .page--sw .panel--paging .paging--link { width: 32px; height: 32px; border-radius: 0; background: #867F77; border-color: #867F77; background-image: linear-gradient(to bottom, #867F77 0%, #867F77 100%); } .page--sw .panel--paging .paging--link.is--active { line-height: 31px; } .page--sw .panel--paging .paging--link.is--active:hover { text-decoration: none; border-color: #c00408; background-image: linear-gradient(to bottom, #c00408 0%, #c00408 100%); } .page--sw .panel--paging .paging--link:hover { text-decoration: none; background: #635C54; color: #ffffff; border-color: #635C54; background-image: linear-gradient(to bottom, #635C54 0%, #635C54 100%); } .page--sw .panel--paging .paging--display { margin-left: 8px; } .address--content .btn.is--link { white-space: normal; } .register--advantages .panel--title { color: #58514A; margin-bottom: 18px; } .register--advantages ul.register--advantages-list.list--unordered.is--checked, .footer--benefit ul.register--advantages-list.list--unordered.is--checked, .register--advantages ul.benefit--list.list--unordered.is--checked, .footer--benefit ul.benefit--list.list--unordered.is--checked { margin-left: 0; padding-left: 0; margin-bottom: 40px; } .register--advantages ul.register--advantages-list.list--unordered.is--checked li, .footer--benefit ul.register--advantages-list.list--unordered.is--checked li, .register--advantages ul.benefit--list.list--unordered.is--checked li, .footer--benefit ul.benefit--list.list--unordered.is--checked li { position: relative; width: 100%; max-width: 420px; min-height: 40px; padding: 3px 0 10px 40px; } .register--advantages ul.register--advantages-list.list--unordered.is--checked li::before, .footer--benefit ul.register--advantages-list.list--unordered.is--checked li::before, .register--advantages ul.benefit--list.list--unordered.is--checked li::before, .footer--benefit ul.benefit--list.list--unordered.is--checked li::before { left: 0; font-family: "hailofont"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 0.2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #D5101C; line-height: 21px; text-align: center; width: 27px; height: 27px; border: 3px solid #D5101C; } @media (min-width: 48em) { .footer--benefit { width: calc((100% - (40px * 1)) / 2); padding-right: 40px; } } @media (min-width: 64em) { .footer--benefit { width: calc((100% - (40px * 2)) / 3); padding-right: 40px; } } .footer--benefit .benefit--headline { color: #58514A; margin-bottom: 18px; } .footer--benefit .benefit--text { margin-bottom: 60px; } .footer--benefit .benefit--text.payment img { max-height: 23px; } .footer--benefit .benefit--text.dispatch span { display: flex; align-content: center; align-items: center; width: 100%; margin-bottom: 18px; } .footer--benefit .benefit--text.dispatch span img { margin-right: 30px; } .footer--benefit .benefit--text.payment { display: flex; flex-wrap: wrap; align-content: center; align-items: center; } .footer--benefit .benefit--text.payment img { margin-right: 30px; margin-bottom: 18px; } .js--modal .content .table--add-product .add-product--field, .page--sw .table--add-product .add-product--field { max-width: calc(100% - 40px); } .js--modal .content .table--add-product .add-product--button, .page--sw .table--add-product .add-product--button { width: 40px; } .js--modal .content .account--change-payment.register--content, .page--sw .account--change-payment.register--content { display: block; width: 100%; float: left; } .js--modal .content .account--change-payment.account--content, .page--sw .account--change-payment.account--content { margin-top: 0; padding-top: 0; } .js--modal .content .account--change-payment.account--content .account--welcome, .page--sw .account--change-payment.account--content .account--welcome { margin-bottom: 12px; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit), .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) { border: none; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .panel--title, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .panel--title { margin: 0; padding: 0; line-height: 26px; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .panel--body, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .panel--body { padding: 36px 0; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .panel--tr, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .panel--tr { border: none; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .payment--selection-input, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .payment--selection-input { width: 20px; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .payment--selection-input input, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .payment--selection-input input { margin-left: 0; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .payment--selection-label, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .payment--selection-label, .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .payment--description, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .payment--description { padding-left: 28px; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .account--actions, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .account--actions { padding: 0 0 36px 0; } .js--modal .content .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .btn, .page--sw .account--change-payment.account--content .panel.has--border:not(.hero-unit) .account--payment-form .btn { margin-right: 15px; margin-bottom: 6px; } .js--modal .content .account--address.account--content, .page--sw .account--address.account--content, .js--modal .content .account--content, .page--sw .account--content { margin-top: 0; padding-top: 0; } .js--modal .content .account--address.account--content .account--welcome.panel:not(.note--panel) p, .page--sw .account--address.account--content .account--welcome.panel:not(.note--panel) p, .js--modal .content .account--content .account--welcome.panel:not(.note--panel) p, .page--sw .account--content .account--welcome.panel:not(.note--panel) p { margin: 0; } .js--modal .content .account--address.account--content .panel.has--border, .page--sw .account--address.account--content .panel.has--border, .js--modal .content .account--content .panel.has--border, .page--sw .account--content .panel.has--border { border-color: #E3E0DB; } .js--modal .content .account--address.account--content .panel.has--border .panel--title, .page--sw .account--address.account--content .panel.has--border .panel--title, .js--modal .content .account--content .panel.has--border .panel--title, .page--sw .account--content .panel.has--border .panel--title { line-height: 26px; } .js--modal .content .address--form-actions .address--form-submit { padding: 15px 20px !important; font-size: 14px !important; } .js--modal .content .content--basket .panel--body, .page--sw .content--basket .panel--body { line-height: 32px; } .js--modal .content .btn--checkout-proceed, .page--sw .btn--checkout-proceed { margin-bottom: 10px !important; } .js--modal .content .content--basket .panel.has--border:not(.hero-unit), .page--sw .content--basket .panel.has--border:not(.hero-unit) { border: 0; } .js--modal .content .content--basket .panel.has--border:not(.hero-unit) .panel--body, .page--sw .content--basket .panel.has--border:not(.hero-unit) .panel--body { border: 0; padding: 0; } .js--modal .content .content--basket .aggregation--list, .page--sw .content--basket .aggregation--list { border: none; } .js--modal .content .product--table .row--product, .page--sw .product--table .row--product { align-items: center; } .js--modal .content .product--table .row--product .column--quantity, .page--sw .product--table .row--product .column--quantity { margin-bottom: 30px; } .js--modal .content .product--table .column--product, .page--sw .product--table .column--product { display: flex; } .js--modal .content .product--table .column--product .column--image, .page--sw .product--table .column--product .column--image { padding: 0; } .js--modal .content .product--table .table--media .table--media-outer, .page--sw .product--table .table--media .table--media-outer { border: none; max-width: 100%; max-height: auto; } .js--modal .content .product--table .table--media .table--media-inner, .page--sw .product--table .table--media .table--media-inner { padding-bottom: 0; height: auto; } .js--modal .content .product--table .table--media img, .page--sw .product--table .table--media img { position: relative; } .js--modal .content .product--table .panel.has--border:not(.hero-unit) .table--header, .page--sw .product--table .panel.has--border:not(.hero-unit) .table--header, .js--modal .content .product--table .panel.has--border:not(.hero-unit) .table--tr, .page--sw .product--table .panel.has--border:not(.hero-unit) .table--tr { border-color: #E3E0DB; } .js--modal .content .product--table .panel.has--border:not(.hero-unit) .table--header, .page--sw .product--table .panel.has--border:not(.hero-unit) .table--header { margin: 0; } .js--modal .content .product--table .panel.has--border:not(.hero-unit) .table--tr, .page--sw .product--table .panel.has--border:not(.hero-unit) .table--tr { padding-top: 10px; padding-bottom: 10px; } .js--modal .content .product--table .panel.has--border:not(.hero-unit) .panel--body .select-field select, .page--sw .product--table .panel.has--border:not(.hero-unit) .panel--body .select-field select { margin-bottom: 0; color: #58514A; } .js--modal .content .product--table .table--add-container, .page--sw .product--table .table--add-container { display: block; } .js--modal .content .product--table .table--add-container fieldset.fly-label input, .page--sw .product--table .table--add-container fieldset.fly-label input { border: 1px solid #E3E0DB !important; } .js--modal .content .product--table .table--add-product .add-product--field, .page--sw .product--table .table--add-product .add-product--field { max-width: calc(100% - 56px); } .js--modal .content .product--table .table--add-product .add-product--field::placeholder, .page--sw .product--table .table--add-product .add-product--field::placeholder { color: #B1ABA5; } .js--modal .content .product--table .table--add-product .add-product--button, .page--sw .product--table .table--add-product .add-product--button { width: 56px; } .js--modal .content .product--table .table--add-product .btn [class^="icon--"], .page--sw .product--table .table--add-product .btn [class^="icon--"] { font-size: 14px; } .js--modal .content .product--table .table--add-voucher, .page--sw .product--table .table--add-voucher { width: 100%; } .js--modal .content .product--table .table--add-voucher .fl-label, .page--sw .product--table .table--add-voucher .fl-label { margin-right: 15px; margin-bottom: 5px; } .js--modal .content .product--table .table--add-voucher .add-voucher--panel, .page--sw .product--table .table--add-voucher .add-voucher--panel { width: 100%; margin: 15px 0px 20px 0px; } .js--modal .content .product--table .table--add-voucher .add-voucher--panel .add-voucher--field, .page--sw .product--table .table--add-voucher .add-voucher--panel .add-voucher--field { width: calc(100% - 56px); } .js--modal .content .product--table .table--add-voucher .add-voucher--panel .add-voucher--field::placeholder, .page--sw .product--table .table--add-voucher .add-voucher--panel .add-voucher--field::placeholder { color: #B1ABA5; } .js--modal .content .product--table .table--add-voucher .add-voucher--panel .add-voucher--button, .page--sw .product--table .table--add-voucher .add-voucher--panel .add-voucher--button { width: 56px; } .js--modal .content .product--table .table--add-voucher .btn [class^="icon--"], .page--sw .product--table .table--add-voucher .btn [class^="icon--"] { font-size: 14px; } .js--modal .content .product--table .basket--footer, .page--sw .product--table .basket--footer { margin-left: 0; margin-right: 0; } @media (min-width: 30em) { .js--modal .content .product--table .column--unit-price .unit-price--label, .page--sw .product--table .column--unit-price .unit-price--label, .js--modal .content .product--table .column--total-price .total-price--label, .page--sw .product--table .column--total-price .total-price--label { margin-bottom: 18px; } } .js--modal .content .basket--footer, .page--sw .basket--footer { display: flex; flex-wrap: wrap; justify-content: space-between; border-top: 0; } @media (min-width: 48em) { .js--modal .content .basket--footer, .page--sw .basket--footer { margin: 0; } .js--modal .content .basket--footer.content--checkout, .page--sw .basket--footer.content--checkout { justify-content: space-between; } } .js--modal .content .basket--footer::after, .page--sw .basket--footer::after { display: none; } .js--modal .content .basket--footer .table--aggregation, .page--sw .basket--footer .table--aggregation { border: none; } .js--modal .content .basket--footer .table--aggregation:not(.table--aggregation--prof), .page--sw .basket--footer .table--aggregation:not(.table--aggregation--prof) { display: none; } .js--modal .content .basket--footer .table--aggregation .table--shipping-costs-trigger i, .page--sw .basket--footer .table--aggregation .table--shipping-costs-trigger i { margin: 0; font-size: 13px; } @media (max-width: 47.999em) { .js--modal .content .basket--footer .table--aggregation, .page--sw .basket--footer .table--aggregation { width: 100%; } } @media (min-width: 48em) { .js--modal .content .basket--footer .table--aggregation:not(.table--aggregation--prof), .page--sw .basket--footer .table--aggregation:not(.table--aggregation--prof) { display: block; } } .js--modal .content .basket--footer .aggregation--list, .page--sw .basket--footer .aggregation--list { width: 100%; padding-right: 0.625rem; border: none; } @media (min-width: 48em) { .js--modal .content .basket--footer .aggregation--list, .page--sw .basket--footer .aggregation--list { width: 60%; } } @media (min-width: 64em) { .js--modal .content .basket--footer .aggregation--list, .page--sw .basket--footer .aggregation--list { width: 40%; padding-right: 1.25rem; } } .js--modal .content .basket--footer .aggregation--list .list--entry, .page--sw .basket--footer .aggregation--list .list--entry { display: flex; } .js--modal .content .basket--footer .aggregation--list .list--entry.entry--total .entry--value, .page--sw .basket--footer .aggregation--list .list--entry.entry--total .entry--value, .js--modal .content .basket--footer .aggregation--list .list--entry.entry--total .entry--label, .page--sw .basket--footer .aggregation--list .list--entry.entry--total .entry--label { font-weight: 400; } @media (min-width: 48em) { .page--sw .content--basket .product--table .table--add-container { display: flex; justify-content: space-between; } .page--sw .content--basket .product--table .add-product--form { width: 38%; } .page--sw .content--basket .product--table .table--add-voucher { width: 55%; } .page--sw .content--basket .product--table .table--add-voucher .add-voucher--panel { width: 75%; } .page--sw .product--table .row--product .column--quantity { margin-bottom: 0; } } @media (min-width: 64em) { .page--sw .content--basket .product--table .add-product--form { width: 30%; } .page--sw .content--basket .product--table .table--add-voucher { width: 41%; } } @media (min-width: 78.75em) { .page--sw .content--basket .product--table .add-product--form { width: 25%; } .page--sw .content--basket .product--table .table--add-voucher { width: 32%; } } .js--modal .content .confirm--content .information--panel-wrapper, .page--sw .confirm--content .information--panel-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } .js--modal .content .confirm--content .information--panel-wrapper::before, .page--sw .confirm--content .information--panel-wrapper::before, .js--modal .content .confirm--content .information--panel-wrapper::after, .page--sw .confirm--content .information--panel-wrapper::after { display: none; } .js--modal .content .confirm--content .information--panel-wrapper .information--panel-item > .panel, .page--sw .confirm--content .information--panel-wrapper .information--panel-item > .panel { height: auto; } .js--modal .content .confirm--content .information--panel-wrapper .information--panel .panel--body, .page--sw .confirm--content .information--panel-wrapper .information--panel .panel--body { line-height: 27px; } .js--modal .content .confirm--content .information--panel-wrapper .shipping--panel .btn, .page--sw .confirm--content .information--panel-wrapper .shipping--panel .btn { text-decoration: none; } .js--modal .content .confirm--content .information--panel-wrapper .panel--actions.is--wide, .page--sw .confirm--content .information--panel-wrapper .panel--actions.is--wide { height: auto !important; } @media (max-width: 47.999em) { .js--modal .content .confirm--content .information--panel-wrapper .information--panel-item, .page--sw .confirm--content .information--panel-wrapper .information--panel-item { padding: 18px 0 0 0; width: 100%; float: left; } .js--modal .content .confirm--content .information--panel-wrapper .choose-different-address, .page--sw .confirm--content .information--panel-wrapper .choose-different-address { font-size: 12px !important; margin-top: 10px; } .js--modal .content .confirm--content .information--panel-wrapper .information--panel-item-billing, .page--sw .confirm--content .information--panel-wrapper .information--panel-item-billing, .js--modal .content .confirm--content .information--panel-wrapper .information--panel-item-shipping, .page--sw .confirm--content .information--panel-wrapper .information--panel-item-shipping { width: 49%; margin-bottom: 18px; } .js--modal .content .confirm--content .information--panel-wrapper .information--panel-item-shipping + .information--panel-item, .page--sw .confirm--content .information--panel-wrapper .information--panel-item-shipping + .information--panel-item { width: 100%; margin-bottom: 18px; } } @media (max-width: 29.999em) { .js--modal .content .confirm--content .information--panel-wrapper .information--panel-item-billing, .page--sw .confirm--content .information--panel-wrapper .information--panel-item-billing, .js--modal .content .confirm--content .information--panel-wrapper .information--panel-item-shipping, .page--sw .confirm--content .information--panel-wrapper .information--panel-item-shipping { width: 100%; } .js--modal .content .confirm--content .information--panel-wrapper .information--panel-address, .page--sw .confirm--content .information--panel-wrapper .information--panel-address { margin-bottom: 18px; } } .js--modal .content .confirm--content .information--panel-item-shipping .panel.has--border .panel--actions.is--wide, .page--sw .confirm--content .information--panel-item-shipping .panel.has--border .panel--actions.is--wide, .js--modal .content .confirm--content .information--panel-item-billing .panel.has--border .panel--actions.is--wide, .page--sw .confirm--content .information--panel-item-billing .panel.has--border .panel--actions.is--wide { padding-bottom: 0; } .js--modal .content .confirm--content .information--panel-item .panel.has--border .panel--actions.is--wide .link--arrow, .page--sw .confirm--content .information--panel-item .panel.has--border .panel--actions.is--wide .link--arrow { font-size: 16px; } .js--modal .content .confirm--content .additional--features, .page--sw .confirm--content .additional--features { margin-bottom: 18px; } .js--modal .content .confirm--content .payment--panel .payment--method-info, .page--sw .confirm--content .payment--panel .payment--method-info { margin-top: 0; } .js--modal .content .confirm--content .payment--panel .btn--change-payment, .page--sw .confirm--content .payment--panel .btn--change-payment { position: relative; bottom: auto; } .js--modal .content .confirm--content .panel--title, .page--sw .confirm--content .panel--title { line-height: 26px; } .js--modal .content .confirm--content .panel--body, .page--sw .confirm--content .panel--body { font-size: 16px; line-height: 22px; } .js--modal .content .confirm--content .panel.has--border, .page--sw .confirm--content .panel.has--border { border-color: #E3E0DB; } .js--modal .content .confirm--content .panel.has--border .panel--body, .page--sw .confirm--content .panel.has--border .panel--body { padding-top: 0; } .js--modal .content .confirm--content .panel.has--border .panel--actions.is--wide, .page--sw .confirm--content .panel.has--border .panel--actions.is--wide { display: block; } .js--modal .content .confirm--content .confirm_product_table_panel .panel--body, .page--sw .confirm--content .confirm_product_table_panel .panel--body { border: none; } .js--modal .content .confirm--content .confirm_product_table_panel .table--header, .page--sw .confirm--content .confirm_product_table_panel .table--header, .js--modal .content .confirm--content .confirm_product_table_panel .table--tr, .page--sw .confirm--content .confirm_product_table_panel .table--tr { border-color: #E3E0DB; } .js--modal .content .confirm--content .table--header, .page--sw .confirm--content .table--header { margin: 0; } .js--modal .content .confirm--content .address--actions-change, .page--sw .confirm--content .address--actions-change { margin-bottom: 10px; } .js--modal .content .confirm--content .tos--panel.panel.has--border .panel--body, .page--sw .confirm--content .tos--panel.panel.has--border .panel--body { padding-bottom: 0; } .js--modal .content .confirm--content .tos--panel .list--checkbox, .page--sw .confirm--content .tos--panel .list--checkbox { padding: 0; } .js--modal .content .confirm--content .tos--panel .list--checkbox li:last-child, .page--sw .confirm--content .tos--panel .list--checkbox li:last-child { margin-bottom: 0; } @media (max-width: 30em) { .js--modal .content .confirm--content .tos--panel .list--checkbox li:last-child, .page--sw .confirm--content .tos--panel .list--checkbox li:last-child { margin-bottom: 26px; } } .js--modal .content .confirm--content .tos--panel .column--checkbox, .page--sw .confirm--content .tos--panel .column--checkbox { margin-right: 10px; width: auto; } .js--modal .content .confirm--content .product--table .column--tax-price, .page--sw .confirm--content .product--table .column--tax-price { width: 78%; } .js--modal .content .confirm--content .basket--footer, .page--sw .confirm--content .basket--footer { margin-top: 15px; background-color: #F1EFED; } .js--modal .content .confirm--content .basket--footer .table--aggregation, .page--sw .confirm--content .basket--footer .table--aggregation { display: none; } .js--modal .content .confirm--content .basket--footer .aggregation--list, .page--sw .confirm--content .basket--footer .aggregation--list { width: 100%; border: none; } .js--modal .content .content--confirm .panel.has--border, .page--sw .content--confirm .panel.has--border { border-color: #E3E0DB; } .js--modal .content .content--confirm .panel.has--border .panel--body, .page--sw .content--confirm .panel.has--border .panel--body { padding-top: 0; padding-bottom: 30px; } .js--modal .content .content--confirm .payment--method, .page--sw .content--confirm .payment--method { border-bottom: none; } .js--modal .content .content--confirm .method_last, .page--sw .content--confirm .method_last { padding-bottom: 0; } .js--modal .content .content--confirm .method--input, .page--sw .content--confirm .method--input { width: 20px; } .js--modal .content .content--confirm .method--input .radio, .page--sw .content--confirm .method--input .radio { margin-left: 0; } .js--modal .content .content--confirm .method--label, .page--sw .content--confirm .method--label { padding-left: 28px; } .js--modal .content .content--confirm .method--description, .page--sw .content--confirm .method--description { padding-left: 28px; } .js--modal .content .content--confirm .add-voucher--form, .page--sw .content--confirm .add-voucher--form { display: none; } .js--modal .content .content--confirm .basket--footer, .page--sw .content--confirm .basket--footer { border: none; background-color: #F1EFED; } .js--modal .content .address--actions-change, .page--sw .address--actions-change { margin-right: 10px; } .js--modal .content .tos--panel .list--checkbox, .page--sw .tos--panel .list--checkbox { margin: 0; padding: 0 0 0 20px; } .js--modal .content .additional--features .feature--user-comment, .page--sw .additional--features .feature--user-comment { margin: 0; } .js--modal .content .add-voucher--form, .page--sw .add-voucher--form, .js--modal .content .row--tos, .page--sw .row--tos { display: flex; flex-wrap: wrap; align-items: center; align-content: center; } .js--modal .content .add-voucher--form .add-voucher--panel, .page--sw .add-voucher--form .add-voucher--panel, .js--modal .content .row--tos .add-voucher--panel, .page--sw .row--tos .add-voucher--panel { width: 100%; } .js--modal .content .add-voucher--form .add-voucher--panel .add-voucher--field, .page--sw .add-voucher--form .add-voucher--panel .add-voucher--field, .js--modal .content .row--tos .add-voucher--panel .add-voucher--field, .page--sw .row--tos .add-voucher--panel .add-voucher--field { width: calc((100% - 42px)); } .js--modal .content .add-voucher--form .add-voucher--panel .add-voucher--button, .page--sw .add-voucher--form .add-voucher--panel .add-voucher--button, .js--modal .content .row--tos .add-voucher--panel .add-voucher--button, .page--sw .row--tos .add-voucher--panel .add-voucher--button { width: 42px; } .js--modal .content .set-default, .page--sw .set-default { display: flex; } .js--modal .content .row--tos, .page--sw .row--tos, .js--modal .content .set-default, .page--sw .set-default { flex-wrap: nowrap; align-items: start !important; } .product--table .column--product { align-items: start !important; } .product--table .content--title { font-size: 18px; line-height: 26px; } .product--table .product--delivery { margin-top: 15px; } @media (min-width: 30em) { .page--sw .confirm--content .panel--title { line-height: 19px; } .page--sw .confirm--content .panel--body { font-size: 18px; line-height: 32px; } .page--sw .confirm--content .information--panel-item-shipping .panel.has--border .panel--actions.is--wide, .page--sw .confirm--content .information--panel-item-billing .panel.has--border .panel--actions.is--wide { padding-bottom: 36px; } .page--sw .confirm--content .tos--panel.panel.has--border .panel--body { padding-bottom: 36px; } .page--sw .confirm--content .information--panel-item .panel.has--border .panel--actions.is--wide .link--arrow { font-size: 14px; } .page--sw .confirm--content .product--table .column--tax-price { width: 14.5%; } .page--sw .row--tos, .page--sw .set-default { align-items: center !important; } .tos--panel .column--checkbox { margin-right: 0 !important; } .product--table .column--product { align-items: center !important; } .product--table .content--title { font-size: 16px; line-height: 24px; } .product--table .product--delivery { margin-top: 0; } } @media (min-width: 48em) { .page--sw .confirm--content .information--panel-item.information--panel-address .shipping--panel .btn { display: none; } .page--sw .confirm--content .information--panel-item.information--panel-address .panel--actions .choose-different-address { display: block; float: right; } .page--sw .confirm--content .basket--footer .table--aggregation { display: block; } .page--sw .confirm--content .basket--footer .aggregation--list { width: 48%; } } .js--modal .content .product--table .table--header .panel--th, .page--sw .product--table .table--header .panel--th { color: #565047; } @media (min-width: 48em) { .js--modal .content .product--table .row--product, .page--sw .product--table .row--product { display: flex; flex-wrap: wrap; } .js--modal .content .product--table .row--product::before, .page--sw .product--table .row--product::before, .js--modal .content .product--table .row--product::after, .page--sw .product--table .row--product::after { display: none; } .js--modal .content .product--table .row--product .column--unit-price, .page--sw .product--table .row--product .column--unit-price, .js--modal .content .product--table .row--product .column--actions, .page--sw .product--table .row--product .column--actions, .js--modal .content .product--table .row--product .column--tax-price, .page--sw .product--table .row--product .column--tax-price, .js--modal .content .product--table .row--product .column--total-price, .page--sw .product--table .row--product .column--total-price, .js--modal .content .product--table .row--product .column--quantity, .page--sw .product--table .row--product .column--quantity { display: flex; justify-content: flex-end; align-content: center; align-items: center; padding-top: 0; } } .js--modal .content .product--table .table--media .table--media-outer, .page--sw .product--table .table--media .table--media-outer { border-color: #E3E0DB; } .js--modal .content .product--table .table--media .table--media-inner, .page--sw .product--table .table--media .table--media-inner { background: #ffffff; } .js--modal .content .product--table .table--media .table--media-inner img, .page--sw .product--table .table--media .table--media-inner img { max-width: 100%; max-height: auto; width: auto; height: auto; } .js--modal .content .product--table .content--title, .page--sw .product--table .content--title { text-decoration: none; } @media (max-width: 29.999em) { .js--modal .content .product--table .column--quantity .select-field, .page--sw .product--table .column--quantity .select-field { float: right; width: 50% !important; min-width: 1px; } } .js--modal .content .product--table .table--tr .column--actions form, .page--sw .product--table .table--tr .column--actions form { display: flex; justify-content: flex-end; } .js--modal .content .product--table .table--tr .column--actions .column--actions-link, .page--sw .product--table .table--tr .column--actions .column--actions-link { width: 40px; height: 40px; background: #565047; color: #ffffff; border: 0; transition: opacity 0.4s; } @media (min-width: 64em) { .js--modal .content .product--table .table--tr .column--actions .column--actions-link, .page--sw .product--table .table--tr .column--actions .column--actions-link { width: 22px; height: 22px; } } .js--modal .content .product--table .table--tr .column--actions .column--actions-link:hover, .page--sw .product--table .table--tr .column--actions .column--actions-link:hover { opacity: 0.6; } .js--modal .content .product--table .table--tr .column--actions .column--actions-link .icon--cross, .page--sw .product--table .table--tr .column--actions .column--actions-link .icon--cross { margin-top: 2px; } .js--modal .content .product--table .table--shipping-costs .select-field, .page--sw .product--table .table--shipping-costs .select-field { height: 48px; } .js--modal .content .product--table .table--footer, .page--sw .product--table .table--footer { margin-top: 70px; } .js--modal .content .product--table .table--shipping-costs-trigger, .page--sw .product--table .table--shipping-costs-trigger { display: inline-flex; align-content: center; align-items: center; text-decoration: none !important; } .js--modal .content .product--table .table--shipping-costs-trigger .icon--arrow-right, .page--sw .product--table .table--shipping-costs-trigger .icon--arrow-right { margin-left: 5px; } .js--modal .content .product--table .table--shipping-costs, .page--sw .product--table .table--shipping-costs { margin-top: 20px; } .js--modal .content .product--table .table--shipping-costs > div, .page--sw .product--table .table--shipping-costs > div { margin-bottom: 25px; } .js--modal .content .product--table .table--shipping-costs label, .page--sw .product--table .table--shipping-costs label { display: block; font-size: 16px; line-height: 24px; margin-bottom: 5px; } .js--modal .content .product--table .add-product--field, .page--sw .product--table .add-product--field, .js--modal .content .product--table .add-voucher--field, .page--sw .product--table .add-voucher--field, .js--modal .content .product--table .add-product--button, .page--sw .product--table .add-product--button, .js--modal .content .product--table .add-voucher--button, .page--sw .product--table .add-voucher--button { height: 56px; } .js--modal .content .note--panel, .page--sw .note--panel { margin-bottom: 0; } .js--modal .content .note--merchant-finder .icon--map, .page--sw .note--merchant-finder .icon--map { margin-right: 7px; margin-left: 3px; } .js--modal .content .note--merchant-finder a, .page--sw .note--merchant-finder a { color: #58514A; } .js--modal .content .note--merchant-finder a:hover, .page--sw .note--merchant-finder a:hover { color: #D5101C; text-decoration: none; } .js--modal .content .note--item .buybox--button, .page--sw .note--item .buybox--button { position: absolute; right: 20px; top: 65px; width: 40px; height: 40px; padding-left: 15px; padding-right: 15px; } .js--modal .content .note--overview .panel--table, .page--sw .note--overview .panel--table { padding: 0; border: none; } .js--modal .content .note--overview .panel--tr, .page--sw .note--overview .panel--tr { border: 1px solid #E3E0DB; padding: 20px; margin-bottom: 20px; } .js--modal .content .note--overview .panel--tr .note--info, .page--sw .note--overview .panel--tr .note--info { display: flex !important; align-items: center; } .js--modal .content .note--overview .panel--tr .note--info .note--title, .page--sw .note--overview .panel--tr .note--info .note--title, .js--modal .content .note--overview .panel--tr .note--info .product--rating, .page--sw .note--overview .panel--tr .note--info .product--rating, .js--modal .content .note--overview .panel--tr .note--info .note--ordernumber, .page--sw .note--overview .panel--tr .note--info .note--ordernumber, .js--modal .content .note--overview .panel--tr .note--info .note--delivery, .page--sw .note--overview .panel--tr .note--info .note--delivery { margin-left: 15px; } .js--modal .content .note--overview .panel--tr .note--price, .page--sw .note--overview .panel--tr .note--price { color: #58514A; } .js--modal .content .note--overview .panel--tr .note--delete, .page--sw .note--overview .panel--tr .note--delete { right: 20px; } .js--modal .content .note--overview .note--image-container, .page--sw .note--overview .note--image-container { margin: 0; } .js--modal .content .note--overview .note--image-container .note--image-link, .page--sw .note--overview .note--image-container .note--image-link { width: 100%; height: auto; padding: 0; border: none; } .js--modal .content .note--overview .note--image-container .note--image-link .note--image, .page--sw .note--overview .note--image-container .note--image-link .note--image { max-width: 100%; max-height: auto; margin: 0; } .js--modal .content .note--image-link, .page--sw .note--image-link { display: flex; justify-content: center; align-content: center; align-items: center; } .js--modal .content .note--image-link .note--image, .page--sw .note--image-link .note--image { width: auto; } .js--modal .content .note--title, .page--sw .note--title { color: #58514A; } .js--modal .content .note--delete, .page--sw .note--delete { color: #ffffff; border-radius: 0; } @media (max-width: 380px) { .page--sw .note--price { margin-left: 26%; } } @media (min-width: 480px) and (max-width: 580px) { .page--sw .note--price { margin-left: 23%; } } .confirm--content .product--table .burg--tos--panel--double { margin-top: 20px; } .confirm--content .product--table .burg--tos--panel--double .panel--body { background: none; border: 0; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } .confirm--content .product--table .burg--tos--panel--double .panel--body .column--label { text-align: left; } .confirm--content .product--table .burg--tos--panel--double.not-checked .tos--panel { position: relative; padding-left: 45px; } @media (min-width: 48em) { .confirm--content .product--table .burg--tos--panel--double.not-checked .tos--panel { padding-left: 105px; } } .confirm--content .product--table .burg--tos--panel--double.not-checked .tos--panel::before { display: flex; align-items: center; position: absolute; top: 50%; height: auto; transform: translateY(-50%); left: 0; width: auto; z-index: 2; border-left: 5px solid; padding: 0 17px; background: #faeceb; content: '!'; font-size: 40px; line-height: 1; color: #E74C3C; } @media (min-width: 48em) { .confirm--content .product--table .burg--tos--panel--double.not-checked .tos--panel::before { padding: 0 34px; font-size: 60px; } } .confirm--content .product--table .burg--tos--panel--double.not-checked .tos--panel .panel--body ul li .column--label label { color: #58514A; font-size: 14px; line-height: 22px; } .confirm--content .product--table .burg--tos--panel--double.not-checked .list--checkbox li .column--label label { color: #D5101C; } .js--modal .content .register--personal .panel--title, .page--sw .register--personal .panel--title { padding-top: 30px !important; } .js--modal .content .register--birthdate, .page--sw .register--birthdate { position: relative; } .js--modal .content .register--birthdate .hailo-icon-calendar, .page--sw .register--birthdate .hailo-icon-calendar { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); } .js--modal .content .register--login, .page--sw .register--login { margin-top: 0; } .js--modal .content .register--login .panel--title, .page--sw .register--login .panel--title { line-height: 36px; } @media (min-width: 48em) { .js--modal .content .register--login, .page--sw .register--login { float: left; width: 34%; } } .js--modal .content .register--content .register--personal, .page--sw .register--content .register--personal { padding-bottom: 0; } .js--modal .content .register--content.has--border:not(.hero-unit) .panel--title, .page--sw .register--content.has--border:not(.hero-unit) .panel--title { padding: 0; } .js--modal .content .register--content .birthday--label, .page--sw .register--content .birthday--label { font-weight: initial; margin-bottom: 13px; } .js--modal .content .register--content .newsletter--body, .page--sw .register--content .newsletter--body { margin-bottom: 75px; } .js--modal .content .register--content .newsletter--body small, .page--sw .register--content .newsletter--body small { line-height: 19px; } .js--modal .content .register--content .hubspot-newsletter-b2c-fields, .page--sw .register--content .hubspot-newsletter-b2c-fields, .js--modal .content .register--content .hubspot-newsletter-b2b-fields, .page--sw .register--content .hubspot-newsletter-b2b-fields { display: none; } .js--modal .content .register--content .hubspot-newsletter-b2c-fields.show, .page--sw .register--content .hubspot-newsletter-b2c-fields.show, .js--modal .content .register--content .hubspot-newsletter-b2b-fields.show, .page--sw .register--content .hubspot-newsletter-b2b-fields.show { display: block; } .js--modal .content .register--content .hubspot-newsletter-b2c-fields .custom--label, .page--sw .register--content .hubspot-newsletter-b2c-fields .custom--label, .js--modal .content .register--content .hubspot-newsletter-b2b-fields .custom--label, .page--sw .register--content .hubspot-newsletter-b2b-fields .custom--label { display: block; margin-bottom: 13px; } .js--modal .content .register--content .birthday--label, .page--sw .register--content .birthday--label, .js--modal .content .register--content .custom--label, .page--sw .register--content .custom--label { font-size: 14px; line-height: 19px; } @media (min-width: 1024px) { .js--modal .content .register--content .birthday--label, .page--sw .register--content .birthday--label, .js--modal .content .register--content .custom--label, .page--sw .register--content .custom--label { font-size: 16px; line-height: 24px; } } @media (min-width: 48em) { .js--modal .content .register--content, .page--sw .register--content { display: block; float: right; width: 64%; } } .js--modal .content .password-reset--content.panel, .page--sw .password-reset--content.panel, .js--modal .content .register--login .panel, .page--sw .register--login .panel, .js--modal .content .register--content.panel, .page--sw .register--content.panel { margin-top: 0; } .js--modal .content .password-reset--content.panel.has--border:not(.hero-unit), .page--sw .password-reset--content.panel.has--border:not(.hero-unit), .js--modal .content .register--login .panel.has--border:not(.hero-unit), .page--sw .register--login .panel.has--border:not(.hero-unit), .js--modal .content .register--content.panel.has--border:not(.hero-unit), .page--sw .register--content.panel.has--border:not(.hero-unit) { background: none; border: 0; } .js--modal .content .password-reset--content.panel.has--border:not(.hero-unit) .panel--title, .page--sw .password-reset--content.panel.has--border:not(.hero-unit) .panel--title, .js--modal .content .register--login .panel.has--border:not(.hero-unit) .panel--title, .page--sw .register--login .panel.has--border:not(.hero-unit) .panel--title, .js--modal .content .register--content.panel.has--border:not(.hero-unit) .panel--title, .page--sw .register--content.panel.has--border:not(.hero-unit) .panel--title { margin: 0 0 30px; padding-bottom: 0; border: 0; font-size: 30px; font-weight: 300; } .js--modal .content .password-reset--content.panel.has--border:not(.hero-unit) .register--address .panel--title, .page--sw .password-reset--content.panel.has--border:not(.hero-unit) .register--address .panel--title, .js--modal .content .register--login .panel.has--border:not(.hero-unit) .register--address .panel--title, .page--sw .register--login .panel.has--border:not(.hero-unit) .register--address .panel--title, .js--modal .content .register--content.panel.has--border:not(.hero-unit) .register--address .panel--title, .page--sw .register--content.panel.has--border:not(.hero-unit) .register--address .panel--title { margin-top: 50px; } .js--modal .content .password-reset--content.panel.has--border:not(.hero-unit) .panel--body, .page--sw .password-reset--content.panel.has--border:not(.hero-unit) .panel--body, .js--modal .content .register--login .panel.has--border:not(.hero-unit) .panel--body, .page--sw .register--login .panel.has--border:not(.hero-unit) .panel--body, .js--modal .content .register--content.panel.has--border:not(.hero-unit) .panel--body, .page--sw .register--content.panel.has--border:not(.hero-unit) .panel--body { padding: 0; } .js--modal .content .password-reset--content.panel.has--border:not(.hero-unit) .panel--body .select-field select, .page--sw .password-reset--content.panel.has--border:not(.hero-unit) .panel--body .select-field select, .js--modal .content .register--login .panel.has--border:not(.hero-unit) .panel--body .select-field select, .page--sw .register--login .panel.has--border:not(.hero-unit) .panel--body .select-field select, .js--modal .content .register--content.panel.has--border:not(.hero-unit) .panel--body .select-field select, .page--sw .register--content.panel.has--border:not(.hero-unit) .panel--body .select-field select { color: #58514A; } .js--modal .content .password-reset--content.panel .register--required-info, .page--sw .password-reset--content.panel .register--required-info, .js--modal .content .register--login .panel .register--required-info, .page--sw .register--login .panel .register--required-info, .js--modal .content .register--content.panel .register--required-info, .page--sw .register--content.panel .register--required-info { margin-bottom: 45px; } .js--modal .content .password-reset--content.panel .register--password-description, .page--sw .password-reset--content.panel .register--password-description, .js--modal .content .register--login .panel .register--password-description, .page--sw .register--login .panel .register--password-description, .js--modal .content .register--content.panel .register--password-description, .page--sw .register--content.panel .register--password-description, .js--modal .content .password-reset--content.panel .register--alt-shipping, .page--sw .password-reset--content.panel .register--alt-shipping, .js--modal .content .register--login .panel .register--alt-shipping, .page--sw .register--login .panel .register--alt-shipping, .js--modal .content .register--content.panel .register--alt-shipping, .page--sw .register--content.panel .register--alt-shipping { font-size: 18px; line-height: 26px; } .js--modal .content .register--login-password, .page--sw .register--login-password { position: relative; } .js--modal .content .account--password-reset .password-reset--form-content.is--align-center, .page--sw .account--password-reset .password-reset--form-content.is--align-center { text-align: left !important; } .js--modal .content .account--password-reset .panel--actions.is--wide, .page--sw .account--password-reset .panel--actions.is--wide, .js--modal .content .account--logout .panel--actions.is--wide, .page--sw .account--logout .panel--actions.is--wide { padding-left: 0 !important; padding-right: 0 !important; } .js--modal .content .panel--actions .btn:last-child, .page--sw .panel--actions .btn:last-child { margin-right: 0; } .js--modal .content .address--country, .page--sw .address--country, .js--modal .content .register--country, .page--sw .register--country { clear: both; } .js--modal .content .register--login .register--b2b-info, .page--sw .register--login .register--b2b-info { background-color: #F1EFED; padding: 25px; margin-top: 22px; border-radius: 0; border: 0; } .js--modal .content .register--login .register--b2b-info p:last-child, .page--sw .register--login .register--b2b-info p:last-child { margin-bottom: 5px; } .register--form .register--company #register_billing_vatid { margin-bottom: 10px; } .register--form .register--company .vatId-validationContainer--vatId-hint { font-size: 14px; margin-bottom: 25px; } .product--configurator .variant--group { position: relative; display: flex; justify-content: stretch; flex-wrap: wrap; padding-top: 35px; } .product--configurator .variant--group .variant--name { position: absolute; top: 0; left: 0; width: auto; z-index: 2; font-weight: 400; } .product--configurator .variant--group .variant--option.is--image { display: inline-flex; justify-content: center; align-content: center; align-items: center; float: none; width: auto; height: auto; } .product--configurator .variant--group .variant--option.is--image .option--label { display: flex; justify-content: center; align-content: center; align-items: center; width: 90px; height: 90px; padding: 0; border-radius: 0; border: 0; } .product--configurator .variant--group .variant--option.is--image .option--label .image--element { display: flex; justify-content: center; align-content: center; align-items: center; width: 65px; height: 65px; transition: width 0.4s, height 0.4s; } .product--configurator .variant--group .variant--option.is--image .option--label .image--element .image--media { display: flex; justify-content: center; align-content: center; align-items: center; width: 100%; height: auto; } .product--configurator .variant--group .variant--option.is--image .option--label .image--element .image--media img { width: 100%; height: auto; object-fit: contain; } .product--configurator .variant--group .variant--option.is--image:hover label.option--label .image--element, .product--configurator .variant--group .variant--option.is--image .option--input:checked ~ label.option--label .image--element { width: 90px; height: 90px; } .product--configurator .variant--group .variant--option .option--input:disabled { display: none; } .product--configurator .variant--group .variant--option .option--input:disabled ~ label.option--label { display: none; } .page--sw .search--content .headline { margin-top: 20px; margin-bottom: 30px; } .page--sw .search--content form { margin-bottom: 50px; } .page--sw .search--content input.form-control { height: 56px; } .page--sw .search--content .column-send { align-self: flex-end; } .page--sw .search--content .column-send .btn { font-size: 14px; height: 56px; } @media (max-width: 48em) { .header .newsearch-quicksearch-search-form { align-self: center; flex: 1; } } .header .newsearch-quicksearch-search-form .input-group { flex: 1; display: flex; align-items: center; justify-content: flex-end; } @media (max-width: 48em) { .header .newsearch-quicksearch-search-form .input-group { width: 100%; } } .header .newsearch-quicksearch-search-form .input-group input[type="text"] { margin-left: 15px; position: relative; width: 195px; max-width: 200px; background: transparent; } @media (max-width: 48em) { .header .newsearch-quicksearch-search-form .input-group input[type="text"] { width: 100%; max-width: none; border-bottom: none; margin-left: 10px; } } .top-bar { position: relative; } .top-bar .entry--compare { position: relative; min-width: 37px; padding: 0 8px; cursor: pointer; } .top-bar .entry--compare .compare--quantity { position: absolute; top: 9px; left: 13px; height: 16px; width: 16px; z-index: 2; display: flex; align-items: center; justify-content: center; background: #D5101C; border-radius: 50%; font-size: 10px; color: #ffffff; } .top-bar .entry--compare .icon--compare { font-size: 17px; } .top-bar .entry--compare .compare--text { display: none; } .top-bar .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 #707070; } @media screen and (min-width: 78.75em) { .top-bar .compare--list { right: 0; } } .top-bar .compare--list li { display: block; margin: 0; padding: 0; } .top-bar .compare--list::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 0.5rem; height: 0.5rem; top: -0.3125rem; right: 0.9375rem; content: ''; display: block; position: absolute; background: #fff; border-color: #707070; border-width: 0 0 1px 1px; border-style: solid; } .top-bar .compare--list .btn--compare-delete { width: 100%; } .top-bar .js--is--dropdown-active .compare--list { display: block; right: -10px; } .top-bar .js--is--dropdown-active .compare--list .compare--entry { display: flex; align-content: center; align-items: center; cursor: default; } .top-bar .js--is--dropdown-active .compare--list .compare--entry form { display: inline-block; } .top-bar .js--is--dropdown-active .compare--list .compare--link { padding: 5px 0; width: 100%; font-size: 14px; color: #58514A; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-bar .js--is--dropdown-active .compare--list .compare--link:hover { color: #D5101C; } .top-bar .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 .js--is--dropdown-active .compare--list .btn--item-delete { display: flex; justify-content: center; align-content: center; align-items: center; width: 20px; height: 20px; background: #58514A; border: 0; font-size: 10px; } .top-bar .js--is--dropdown-active .compare--list .btn--item-delete .icon--cross { padding: 0; margin: 0; color: #ffffff; } .top-bar .js--is--dropdown-active .compare--list .compare--button .icon--cross { padding: 0; margin: 0; } .top-bar .js--is--dropdown-active .compare--list .btn--compare { display: flex; justify-content: center; align-items: center; width: 100%; padding: 10px; font-size: 16px; line-height: 24px; margin-top: 5px; background: #D5101C; border: 1px solid #D5101C; font-weight: 700; font-family: Lato, sans-serif; color: #ffffff; text-transform: uppercase; transition: all 0.2s; text-decoration: none; cursor: pointer; } .top-bar .js--is--dropdown-active .compare--list .btn--compare-delete { background: #58514A; border: 1px solid #58514A; } .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 #58514A; letter-spacing: 0; } .modal--compare .btn.is--primary.btn--product { display: flex; justify-content: center; align-content: center; align-items: center; padding: 5px; font-size: 12px; line-height: 19px; } .modal--compare .btn.is--primary.btn--product i.icon--arrow-right::before { font-size: 16px; } .modal--compare .modal--error { padding: 1.25rem 1.25rem 1.25rem 1.25rem; letter-spacing: 0; } .modal--compare .list--head { background: #f8f8fa; 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 { margin: 0; padding: 10px 30px 10px 10px; font-size: 14px; line-height: 19px; color: #58514A; border-bottom: 1px solid #707070; } .modal--compare .entry--picture { height: 10rem; position: relative; } .modal--compare .entry--picture .image--element img { width: auto; height: auto; 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: #58514A; font-weight: 700; } .modal--compare .entry--voting { height: 3.125rem; } .modal--compare .entry--voting .icon--star, .modal--compare .entry--voting .icon--star-empty { color: #58514A; } .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: #58514A; font-weight: 700; } .modal--compare .entry--price .price--reduced { color: #E74C3C; } .modal--compare .entry--property { height: auto; } .b2b__sw-nologin { padding: 0 !important; margin: 0 !important; } @media (min-width: 48em) { .b2b__sw-nologin { display: flex; align-items: center; min-height: 100vh; } } .b2b__sw-nologin:before { content: ''; position: fixed; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background-image: url('../../../../../../fileadmin/shop/header/folding-steps.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } .b2b__sw-nologin[data-shopid="19"]:before { background-image: url('../../../../../../fileadmin/shop/header/background-ebt.jpg'); } .b2b__sw-nologin:after { content: ''; position: fixed; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); } .b2b__sw-nologin > .ce--background-primary { position: relative; z-index: 5; padding: 1rem; background: none; } @media (min-width: 48em) { .b2b__sw-nologin > .ce--background-primary { padding-top: 50px; } } .b2b__sw-nologin > .ce--background-primary > .ce__inner { width: auto; padding-left: 0; padding-right: 0; background: #fff; overflow: hidden; opacity: 1 !important; } .b2b__sw-nologin .register--message { position: relative; z-index: 5; width: 100%; margin-top: 0; } @media (min-width: 48em) { .b2b__sw-nologin .register--message { width: 50%; float: none; } } .b2b__sw-nologin .register--headline { width: 100%; padding: 0 20px; } .b2b__sw-nologin .register--headline .b2b__header { display: flex; justify-content: flex-start; align-items: center; } .b2b__sw-nologin .register--headline .b2b__header img { width: 55px; height: 55px; } .b2b__sw-nologin .register--headline .b2b__header .header__claim { margin: 0 0 0 15px; font-size: 30px; line-height: 36px; font-weight: 300; } .b2b__sw-nologin .register--headline .b2b__header + * { margin-top: 30px; } .b2b__sw-nologin .register--content { position: relative; display: block !important; float: left; width: 100%; padding: 0 30px 30px !important; background-color: #f1efed !important; box-shadow: 0 -200px 0 #f1efed !important; } @media (min-width: 48em) { .b2b__sw-nologin .register--content { width: 50%; padding: 0 30px !important; margin-bottom: 30px; box-shadow: 0 -200px 0 #f1efed, 0 200px 0 #f1efed !important; } } .b2b__sw-nologin .register--login { float: right; width: 100%; padding: 0 30px 30px 30px !important; } @media (min-width: 48em) { .b2b__sw-nologin .register--login { margin-top: -45px; width: 50%; } .b2b__sw-nologin .register--login .panel--title { padding-top: 0; } } .b2b__sw-nologin .register--login .register--new-customer { display: none !important; opacity: 0 !important; pointer-events: none !important; } .b2b__sw-nologin .register--intro { margin: 40px 0; } @media (min-width: 48em) { } .b2b__sw-nologin .register--form { display: none; } .b2b__sw-nologin.b2b__show-register-form .register--form { display: block; margin-bottom: 70px; } @media (min-width: 48em) { .b2b__sw-nologin.b2b__show-register-form .register--form { margin-bottom: 30px; } } .b2b__sw-nologin.b2b__show-register-form .register--toggle-button { position: absolute; bottom: 30px; width: calc(100% - 60px); } @media (min-width: 48em) { .b2b__sw-nologin.b2b__show-register-form .register--toggle-button { width: unset; } } .b2b__sw-nologin.b2b__show-register-form .register--toggle-button span.label-default { display: none; } .b2b__sw-nologin.b2b__show-register-form .register--toggle-button span.label-cancel:before { content: attr(data-cancel); } .b2b__sw-nologin.b2b__show-register-form .register--toggle-button .icon--arrow-right:before { content: '\e813' !important; } .b2b__sw-nologin .b2b__footer { padding: 30px 30px 0; color: #fff; font-weight: 300; text-align: center; background: none !important; } .b2b__sw-nologin .b2b__footer a { display: inline-block; margin: 0 20px; color: #fff; } .b2b__sw-nologin fieldset.fly-label label { max-width: calc(100% - 10px); text-overflow: ellipsis; overflow: hidden; } .page--sw .product--table .row--product .column--unit-price { display: block; line-height: 24px; } .page--sw .product--table .row--product .column--unit-price .price--line-through { text-decoration: line-through; }