/* Mixins ================================================== The `mixins.less` file contains the imports to all mixin documents that simplify the work with Shopware. Mixin specific documentation can be found inside each mixin file. Mixins can be used by adding the mixin class onto an element inside Shopware. **Example:**<br/> `.border-radius(3px);` */ /* Appearance mixin ============================================ The mixins provides you a cross-browser compatible method to set the appearance of the element. Please refer to <http://caniuse.com/appearance> to see the browser support table of the feature. ######Example: `.appearance([value]);` `@param {String} type The type you want to use` */ /* Backface visibility mixin ============================================ The mixins provides you a cross-browser compatible method to set the backface-visibility of the element. Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature. ######Example: `.backface-visibility([value]);` `@param {String} visibility The visibility you want to use` */ /* Border-radius mixin ============================================= The mixins provides you a cross-browser compatible method to set a border-radius. Please refer to <http://caniuse.com/border-radius> to see the browser support table of the feature. ######Syntax: `@param {String} radius The radius you want to set`<br/> ######Example: Same border-radius for all edges: <br/> `.border-radius([pixel-value]);`<br/> Different border-radius:<br/> `.border-radius-multi([pixel-value-leftTop], [pixel-value-rightTop], [pixel-value-rightBottom], [pixel-value-leftBottom]);`<br/> Resetting border radius:<br/> `.reset-border-radius();` */ /* Box shadow mixin ============================================== The mixins provides you a cross-browser compatible method to set a box-shadow. Please refer to <http://caniuse.com/css-boxshadow> to see the browser support table of the feature. ######Example: `.box-shadow([h-shadow-value], [v-shadow-value], [blur-amount], [spread-amount], [shadow-color]);` `@param: {Number} x: Offset to the x axis (Default: 0)`<br/> `@param: {Number} y: Offset to the y axis (Default: 0)`<br/> `@param: {Number} blur: Bluring radius (Default: 1px)`<br/> `@param: {String} color: Color of the shadow (Default: #000)`<br/> */ /* Box-sizing mixin ======================================== The mixins provides you a cross-browser compatible method to set the box-sizing which supports IE starting from version 8 to the newest one. Please refer to <http://caniuse.com/css3-boxsizing> to see the browser support table of the feature. ######Example: `.box-sizing:([value]);` `@param: {String} box-sizing: Box model, which should be used (Default: border-box)` */ /* Clearfix mixin ================================ The clearfix mixin allows the easy integration of the floating-solution method. The clearfix resolves the problem that occurs when two floating elements are nested inside a parent element, then sometimes the parent elements height disappears. Add the `.clearfix` class to the parent element. ######Example: `.clearfix();` */ /* Gradient mixin ==================================================== The mixins provides you a cross-browser compatible method to set a linear gradient which goes from top to bottom. Please refer to <http://caniuse.com/css-gradients> to see the browser support table of the feature. Shopware 5 also provides gradient mixins based on the basic color variables that can be changed in the backend theme configuration tool. ######Basic gradients: `.primary-gradient();`<br/> `.secondary-gradient();`<br/> `.white-gradient();`<br/> ######Linear Gradient Example: `.linear-gradient([startcolor-value], [endcolor-value]);` `@param {String} start The start color of the gradient`<br/> `@param {String} end The end color of the gradient` */ /* Opacity =============================================== The mixins provides you a cross-browser compatible opacity which supports IE starting from version 8 to the newest one. Safari, Chrome and Firefox are supported in all versions. Please refer to <http://caniuse.com/css-opacity> to see the browser support table of the feature. ######Example: `.opacity([value]);` `@param: {Number} opacity: Value of the opacity, starting from 0 to 1` */ /* Rotate mixin =============================================== The mixins provides you a cross-browser compatible method to set a transformation which rotates the element. Keep in mind that you can not mix different transformations. Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature. ######Example: `.rotate([value]);` `@param {String} degree The degree value you want to set. Please keep in mind that you need to suffix the unit.` */ /* Scale mixin =============================== The mixins provides you a cross-browser compatible method to set a transformation which scales the element. Keep in mind that you can not mix different transformations. Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature. ######Example: `.scale([value]);` `@param {String} scale-value The scale value, you want to set` */ /* Touch callout mixin =========================================== Disables the default callout shown when you touch and hold a touch target. ######Support: - iOS 2.0<br/> ######Example: `.touch-callout([value]);` `@param: {String} type: The type you want to set (Default: none)` */ /* Transform style mixin ====================================== The mixins provides you a cross-browser compatible method to set a transformation style. Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature. ######Example: `.transform-style([value]);` `@param {String} Style The style you want for your transformation (Default: preserve-3d)` */ /* Transform origin mixin ====================================== The mixins provides you a cross-browser compatible method to set the transform origin position. Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature. ######Example: `.transform-origin([x-value],[y-value],[z-value]);` `@param: x: Sets the origin position on the x axis (Default: 50%)`<br/> `@param: y: Sets the origin position on the y axis (Default: 50%)`<br/> `@param: z: Sets the origin position on the z axis (Default: 0)` */ /* Transition mixin ========================================= The mixins provides you a cross-browser compatible method to set a transition. Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature. ######Example: `.transition([property], [duration-value], [easing]);` `@param: {String} properties: The properites which should be animated (Default: all)`<br/> `@param: {String} duration: Duration of the transition including the unit (Default: 0.3s)`<br/> `@param: {String} easing: The easing which should be used for the transition (Default: ease-out)` */ /* Translate mixin ============================================ The mixins provides you a cross-browser compatible method to set a transition. Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature. Keep in mind, that 3d translations are needing an perspective, otherwise the translated elements get skewed up. ######Example: `.translate([x-value],[y-value],[z-value]);` `@param: {String} rotateX: The rotation on the x-axis`<br/> `@param: {String} rotateY: The rotation on the y-axis`<br/> `@param: {String} rotateZ: The rotation on the z-axis`<br/> */ /* Unitize mixin ================================================ The unitize mixins converts values from px-units to the relative rem-units, providing all the benefits of units like em and rem, without you having to do any calculations yourself. ######Syntax: `@property` = the property that should be unitized.<br/> `@value` = pixel-value<br/> `@baseValue` (optional) = default browser font-size (@remScaleFactor in most cases)<br/> ######Example Unitize mixin with custom property `.unitize(@property, @value);`<br/> `.unitize(font-size, 16);` ######Specific built-in functions In addition to the general `.unitize()` mixin, Shopware contains specific mixins to quickly calculate values which (for example) have more than one property.<br/> <br/> `.unitize-height(@value)`<br/> `.unitize-width(@value)`<br/> `.unitize-max-height(@value)`<br/> `.unitize-max-width(@value)`<br/> `.unitize-min-width(@value)`<br/> `.unitize-padding(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/> `.unitize-margin(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/> `.unitize-variable(@value)`<br/> */ /* User-select mixin =============================== The mixins provides you a cross-browser compatible method to set a user selection mode. Please refer to <http://caniuse.com/user-select-none> to see the browser support table of the feature. ######Example: `.user-select([value]);` `@param: {String} type: The type you want to set (Default: none)` */ /* Transform mixin ============================================== The mixins provides you a cross-browser compatible method to set a transformation. Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature. ######Example: `.transform([value]);` `@param: {String} properties: The transformation(s) that should be applied` */ /* Tab highlighting mixin =========================== Sets the color of the highlighting when a link was clicked / tapped. Please refer to <http://www.browsersupport.net/CSS/-webkit-tap-highlight-color> to see the browser support table of the feature. ######Example: `.tap-highlight-color([color-value]);` `@param: {String} color: The color you want to set (Default: rgba(0, 0, 0, 0))` */ /* Keyframe mixin ============================================= The mixins provides you a cross-browser compatible method to set a keyframe. Please refer to <http://caniuse.com/#search=keyframe> to see the browser support table of the feature. ######Example: `.keyframes([name-value], [frames-value]);` `@param: {String} name: The keyframe animation name`<br/> `@param: {String} roules: the animation frames` */ @-webkit-keyframes keyframe--spin { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes keyframe--spin { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes keyframe--spin-reverse { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0); transform: rotate(0); } } @keyframes keyframe--spin-reverse { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0); transform: rotate(0); } } /* Animations mixin ============================================ The mixins provides you a cross-browser compatible method to set animation values. Please refer to <http://caniuse.com/css-animation> to see the browser support table of the feature. ######Example: `.animation([value]);` `@param: {String} value: All animation values` */ /* Column count mixin ============================================= This mixin provides you a cross-browser compatible method to set the column count property. Please refer to <http://caniuse.com/multicolumn> to see the browser support table of the feature. ######Example: `.column-count([value]);` `@param: {Number} count: The amount of columns you want to set (Default: auto)` */ /* Hypheration mixin ====================================== The mixins provides you a cross-browser compatible method to set the hyphenation. Please refer to <http://caniuse.com/css-hyphens> to see the browser support table of the feature. ######Example: `.hyphens([value]);` `@param: {String} hyphenation: The hyphenation that should be used (Default: auto)` */ /* Grabbing cursor ================================== This mixin provides you a cross-browser compatible method to set the cursor grabbing behavior. ######Example: `.cursorGrab();`<br/> `.cursorGrabbing();`<br/> */ /* Clear form button mixin ======================== This mixin removes styles from the button element and makes it look like a text link. */ /* All.less ====================================== The `all.less` file imports all style components that will display on the page. It includes the plugins `normalize` and `pocketgrid`, the open-sans fontface and the specific less files. */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner, button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* PocketGrid 1.1.0 * Copyright 2013 Arnaud Leray * MIT License */ /* Border-box-sizing */ .block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Clearfix */ .block-group { zoom: 1; /* ul/li compatibility */ list-style-type: none; padding: 0; margin: 0; /** Nested grid */ } .block-group:before, .block-group:after { display: table; content: ""; line-height: 0; } .block-group:after { clear: both; } .block-group > .block-group { clear: none; float: left; margin: 0 !important; } /* Default block */ .block { float: left; width: 100%; } /* BEGIN Light */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans Light'), local('OpenSans-Light'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.woff2?201906060858') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.woff?201906060858') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Light/OpenSans-Light.ttf?201906060858') format('truetype'); font-weight: 300; font-style: normal; } /* END Light */ /* BEGIN Regular */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans Regular'), local('Open Sans'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.woff2?201906060858') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.woff?201906060858') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Regular/OpenSans-Regular.ttf?201906060858') format('truetype'); font-weight: normal; font-style: normal; } /* END Regular */ /* BEGIN Semibold */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans Semibold'), local('OpenSans-SemiBold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.woff2?201906060858') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.woff?201906060858') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Semibold/OpenSans-Semibold.ttf?201906060858') format('truetype'); font-weight: 600; font-style: normal; } /* END Semibold */ /* BEGIN Bold */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.woff2?201906060858') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.woff?201906060858') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.ttf?201906060858') format('truetype'); font-weight: bold; font-style: normal; } /* END Bold */ /* BEGIN Extrabold */ @font-face { font-family: 'Open Sans'; font-display: swap; src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.woff2?201906060858') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.woff?201906060858') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/ExtraBold/OpenSans-ExtraBold.ttf?201906060858') format('truetype'); font-weight: 800; font-style: normal; } /* END Extrabold */ /* Variables ================================================== The `variables.less` file contains the imports to all variables that Shopware uses. Most variables are controllable by using the backend theme manager. Mixin specific documentation can be found inside each mixin file. */ /* Structure ================================ The variables define the widths for the different viewports. **Structure**<br/> `@phoneLandscapeViewportWidth` - viewport phone-landscape width *(default: 480px)*<br/> `@tabletViewportWidth` - viewport tablet width *(default: 768px)*<br/> `@tabletLandscapeViewportWidth` - viewport tablet-landscape width *(default: 1024px)*<br/> `@desktopViewportWidth` - viewport desktop width *(default: 1260px)*<br/> */ /* Typography ================================ The variables define the sizes and weights for typographic elements. The values can be changed with the backend theme manager. **Base configuration**<br/> `@font-size-base` - basic font-size *(default: 14)*<br/> `@font-base-weight` - basic font-weight *(default: 500)*<br/> `@font-light-weight` - basic light font-weight *(default: 300)*<br/> `@font-base-stack` - basic font-family stack *(default: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif)*<br/> `@font-headline-stack` - basic headline font-family stack *(default: @font-base-stack)*<br/> **Headling font sizes**<br/> `@font-size-h1` - h1 element font-size *(default: 26)*<br/> `@font-size-h2` - h2 element font-size *(default: 21)*<br/> `@font-size-h3` - h3 element font-size *(default: 18)*<br/> `@font-size-h4` - h4 element font-size *(default: 16)*<br/> `@font-size-h5` - h5 element font-size *(default: @font-size-base)*<br/> `@font-size-h6` - h6 element font-size *(default: 12)*<br/> **Shopware font directory**<br/> `@font-directory` - font-directory folder (default: "../../fonts") **Open Sans font directory**<br/> `@OpenSansPath` - "Open Sans" font-directory folder (default: "./../fonts/open-sans-fontface") */ /* Z-Index ================================ The z-index variables list all different values for the z-index layers used inside the Shopware responsive theme. **badge.less**<br/> `@zindex-badge` - *(default: 500)*<br/> **checkbox.less**<br/> `@zindex-checkbox-state` - *(default: 60)*<br/> `@zindex-checkbox-element` - *(default: 65)*<br/> **collapse.less**<br/> `@zindex-collapse-content` - *(default: 1000)*<br/> `@zindex-collapse-header` - *(default: 1100)*<br/> `@zindex-collapse-content-collapsed` - *(default: 1200)*<br/> `@zindex-collapse-header-active` - *(default: 1300)*<br/> **collapse-cart.less**<br/> `@zindex-collapse-cart` - *(default: 3000)*<br/> `@zindex-collapse-cart-offcanvas` - *(default: 8000)*<br/> **datepicker.less**<br/> `@zindex-datepicker` - *(default: 8100)*<br/> **emotions.less**<br/> `@zindex-emotion-mapping-link` - *(default: 110)*<br/> `@zindex-emotion-image-slider-title` - *(default: 100)*<br/> `@zindex-emotion-product-slider-content` - *(default: 400)*<br/> `@zindex-emotion-product-slider-title` - *(default: 500)*<br/> `@zindex-emotion-overlay` - *(default: 1000)*<br/> `@zindex-emotion-video-element` - *(default: 1000)*<br/> `@zindex-emotion-video-text` - *(default: 1100)*<br/> `@zindex-emotion-video-play-btn` - *(default: 1200)*<br/> `@zindex-emotion-video-cover` - *(default: 1300)*<br/> **filter-panel.less**<br/> `@zindex-filter-panel-flyout` - *(default: 500)*<br/> `@zindex-filter-panel-flyout-collapsed` - *(default: 800)*<br/> `@zindex-filter-panel-checkbox` - *(default: 65)*<br/> `@zindex-filter-panel-checkbox-state` - *(default: 60)*<br/> `@zindex-filter-panel-radio` - *(default: 65)*<br/> `@zindex-filter-panel-radio-state` - *(default: 60)*<br/> `@zindex-filter-panel-media-checkbox` - *(default: 65)*<br/> `@zindex-filter-panel-rating-star` - *(default: 65)*<br/> **image-gallery.less**<br/> `@zindex-image-gallery-button` - *(default: 1)*<br/> **image-slider.less**<br/> `@zindex-image-slider` - *(default: 1000)*<br/> `@zindex-image-slider-arrow` - *(default: 1000)*<br/> **image-zoom.less**<br/> `@zindex-image-zoom-flyout` - *(default: 2500)*<br/> **loading-indicator.less**<br/> `@zindex-loading-indicator` - *(default: 6000)*<br/> **menu-scroller.less**<br/> `@zindex-menu-scoller-arrow` - *(default: 750)*<br/> **modal.less**<br/> `@zindex-modalbox` - *(default: 7000)*<br/> **offcanvas-menu.less**<br/> `@zindex-offcanvas` - *(default: 8000)*<br/> `@zindex-offcanvas-higher-viewport` - *(default: 1000)*<br/> **overlay.less**<br/> `@zindex-overlay` - *(default: 5000)*<br/> **panel.less**<br/> `@zindex-panel-arrow` - *(default: 2000)*<br/> `@zindex-panel-link` - *(default: 2000)*<br/> **product-slider.less**<br/> `@zindex-product-slider` - *(default: 750)*<br/> ###Modules **cart.less**<br/> `@zindex-cart-product-image-element` - *(default: 500)*<br/> `@zindex-cart-premium-product-badge` - *(default: 750)*<br/> **compare.less**<br/> `@zindex-compare-list` - *(default: 4000)*<br/> **configuration.less**<br/> `@zindex-configurator-option-label` - *(default: 500)*<br/> `@zindex-configurator-option-input` - *(default: 1000)*<br/> **configurator.less**<br/> `@zindex-configurator-option-label` - *(default: 500)*<br/> `@zindex-configurator-option-input` - *(default: 1000)*<br/> **detail.less**<br/> `@zindex-detail-notification-field-focus` - *(default: 1)*<br/> **footer.less**<br/> `@zindex-footer-newsletter-field-focus` - *(default: 1)*<br/> **header.less**<br/> `@zindex-header-search-form` - *(default: 3000)*<br/> `@zindex-header-search-button` - *(default: 2)*<br/> `@zindex-header-search-results` - *(default: 3500)*<br/> `@zindex-header-language-flag` - *(default: 900)*<br/> `@zindex-header-service-list` - *(default: 3500)*<br/> **listing.less**<br/> `@zindex-listing-filter-header` - *(default: 1100)*<br/> `@zindex-listing-filter-header-active` - *(default: 1300)*<br/> **product-box.less**<br/> `@zindex-product-box-image-element` - *(default: 500)*<br/> `@zindex-product-box-product-badge` - *(default: 750)*<br/> **sidebar.less**<br/> `@zindex-sidebar-language-flag` - *(default: 900)*<br/> `@zindex-sidebar-offcanvas-overlay` - *(default: 1200)*<br/> `@zindex-sidebar-offcanvas-overlay-background` - *(default: 1100)*<br/> `@zindex-sidebar-offcanvas-higher-viewport` - *(default: 1000)*<br/> */ /* Icons ================================ These variables define the character for each icon. You can use them in your less instead of the `icon--`-classes. The variable name is always that of the icon prefixed with `sw-`. Example: ```less content: @sw-icon-grid; content: @sw-icon-facebook; ``` The variable `@sw-icon-fontname` contains the name of the font which will be used for all icons. For an overview of available variables, visit the <a href="https://developers.shopware.com/styletile/components.html#icon-set">docs on available icons</a>. */ /* Mixins ================================================== The `mixins.less` file contains the imports to all mixin documents that simplify the work with Shopware. Mixin specific documentation can be found inside each mixin file. Mixins can be used by adding the mixin class onto an element inside Shopware. **Example:**<br/> `.border-radius(3px);` */ /* Icon-element mixin ===================================================== This mixin provides you a method to set any webfont icon from the Shopware icon-set as a before element. ######Example: `.icon-element([icon-name], [icon-size]);` */ .visible--s, .visible-inline--s, .visible-inline-block--s, .visible--m, .visible-inline--m, .visible-inline-block--m, .visible--l, .visible-inline--l, .visible-inline-block--l, .visible--xl, .visible-inline--xl, .visible-inline-block--xl { display: none !important; } .visible--xs { display: block !important; } table.visible--xs { display: table !important; } tr.visible--xs { display: table-row !important; } th.visible--xs, td.visible--xs { display: table-cell !important; } .visible-inline--xs { display: inline !important; } table.visible-inline--xs { display: table !important; } tr.visible-inline--xs { display: table-row !important; } th.visible-inline--xs, td.visible-inline--xs { display: table-cell !important; } .visible-inline-block--xs { display: inline-block !important; } table.visible-inline-block--xs { display: table !important; } tr.visible-inline-block--xs { display: table-row !important; } th.visible-inline-block--xs, td.visible-inline-block--xs { display: table-cell !important; } .hidden--s, .hidden--m, .hidden--l, .hidden--xl { display: inherit !important; } .hidden--xs { display: none !important; } @media screen and (min-width: 30em) { .visible--xs, .visible-inline--xs, .visible-inline-block--xs, .visible--m, .visible-inline--m, .visible-inline-block--m, .visible--l, .visible-inline--l, .visible-inline-block--l, .visible--xl, .visible-inline--xl, .visible-inline-block--xl { display: none !important; } .visible--s { display: block !important; } table.visible--s { display: table !important; } tr.visible--s { display: table-row !important; } th.visible--s, td.visible--s { display: table-cell !important; } .visible-inline--s { display: inline !important; } table.visible-inline--s { display: table !important; } tr.visible-inline--s { display: table-row !important; } th.visible-inline--s, td.visible-inline--s { display: table-cell !important; } .visible-inline-block--s { display: inline-block !important; } table.visible-inline-block--s { display: table !important; } tr.visible-inline-block--s { display: table-row !important; } th.visible-inline-block--s, td.visible-inline-block--s { display: table-cell !important; } .hidden--xs, .hidden--m, .hidden--l, .hidden--xl { display: inherit !important; } .hidden--s { display: none !important; } } @media screen and (min-width: 48em) { .visible--xs, .visible-inline--xs, .visible-inline-block--xs, .visible--s, .visible-inline--s, .visible-inline-block--s, .visible--l, .visible-inline--l, .visible-inline-block--l, .visible--xl, .visible-inline--xl, .visible-inline-block--xl { display: none !important; } .visible--m { display: block !important; } table.visible--m { display: table !important; } tr.visible--m { display: table-row !important; } th.visible--m, td.visible--m { display: table-cell !important; } .visible-inline--m { display: inline !important; } table.visible-inline--m { display: table !important; } tr.visible-inline--m { display: table-row !important; } th.visible-inline--m, td.visible-inline--m { display: table-cell !important; } .visible-inline-block--m { display: inline-block !important; } table.visible-inline-block--m { display: table !important; } tr.visible-inline-block--m { display: table-row !important; } th.visible-inline-block--m, td.visible-inline-block--m { display: table-cell !important; } .hidden--xs, .hidden--s, .hidden--l, .hidden--xl { display: inherit !important; } .hidden--m { display: none !important; } } @media screen and (min-width: 64em) { .visible--xs, .visible-inline--xs, .visible-inline-block--xs, .visible--s, .visible-inline--s, .visible-inline-block--s, .visible--m, .visible-inline--m, .visible-inline-block--m, .visible--xl, .visible-inline--xl, .visible-inline-block--xl { display: none !important; } .visible--l { display: block !important; } table.visible--l { display: table !important; } tr.visible--l { display: table-row !important; } th.visible--l, td.visible--l { display: table-cell !important; } .visible-inline--l { display: inline !important; } table.visible-inline--l { display: table !important; } tr.visible-inline--l { display: table-row !important; } th.visible-inline--l, td.visible-inline--l { display: table-cell !important; } .visible-inline-block--l { display: inline-block !important; } table.visible-inline-block--l { display: table !important; } tr.visible-inline-block--l { display: table-row !important; } th.visible-inline-block--l, td.visible-inline-block--l { display: table-cell !important; } .hidden--xs, .hidden--s, .hidden--m, .hidden--xl { display: inherit !important; } .hidden--l { display: none !important; } } @media screen and (min-width: 78.75em) { .visible--xs, .visible-inline--xs, .visible-inline-block--xs, .visible--s, .visible-inline--s, .visible-inline-block--s, .visible--m, .visible-inline--m, .visible-inline-block--m, .visible--l, .visible-inline--l, .visible-inline-block--l { display: none !important; } .visible--xl { display: block !important; } table.visible--xl { display: table !important; } tr.visible--xl { display: table-row !important; } th.visible--xl, td.visible--xl { display: table-cell !important; } .visible-inline--xl { display: inline !important; } table.visible-inline--xl { display: table !important; } tr.visible-inline--xl { display: table-row !important; } th.visible-inline--xl, td.visible-inline--xl { display: table-cell !important; } .visible-inline-block--xl { display: inline-block !important; } table.visible-inline-block--xl { display: table !important; } tr.visible-inline-block--xl { display: table-row !important; } th.visible-inline-block--xl, td.visible-inline-block--xl { display: table-cell !important; } .hidden--xs, .hidden--s, .hidden--m, .hidden--l { display: inherit !important; } .hidden--xl { display: none !important; } } /* Components ==================================== The `components.less` contains the imports to all styled elements of Shopware. The files are destinated inside the `_components` folder. */ /* Buttons =================================================================== ######Basic button layout Creates a basic button. Button type classes can be added by using multiple classes on the `.btn` element. Adding the class `is--disabled` changes the element to a disabled button. ``` <button class="btn"> Basic button </button> <button class="btn is--disabled"> Disabled button </button> ``` */ .btn { padding: 2px 10px 2px 10px; padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 32px; line-height: 2rem; border-radius: 3px; background-clip: padding-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 14px; font-size: 0.875rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); -webkit-font-smoothing: inherit; display: inline-block; position: relative; font-weight: 700; text-decoration: none; text-align: left; cursor: pointer; border: 1px solid #dadae5; color: #00476b; /** Button icon font size */ /** Larger icon */ /* ######Icon alignment To work properly the button needs the class `is--icon-left` or `is--icon-right` and an `icon` inside it. ``` <button class="btn is--icon-left"> <i class="icon--account"></i> Icon left </button> <button class="btn is--icon-right"> <i class="icon--account"></i> Icon right </button> ``` */ /* ######Button size class Adding a button-size class creates a larger or smaller button or changes the button properies. Options: `is--large`, `is--small`, `is--full`, `is--center` ``` <button class="btn is--large"> Large button </button> <button class="btn is--small"> Small button </button> ``` */ /** State: Small button */ /** State: Medium button */ /** State: Large button */ /** State: Button with 100% width */ /** State: Button with text align center */ } .btn [class^="icon--"] { font-size: 10px; font-size: 0.625rem; } .btn .is--large { font-size: 16px; font-size: 1rem; } .btn.is--icon-right { padding-right: 36px; padding-right: 2.25rem; } .btn.is--icon-right [class^="icon--"] { height: 16px; height: 1rem; line-height: 32px; line-height: 2rem; margin: -16px 0px 0px 0px; margin: -1rem 0rem 0rem 0rem; right: 12px; right: 0.75rem; font-weight: 500; display: block; position: absolute; top: 50%; } .btn.is--icon-left { padding-left: 36px; padding-left: 2.25rem; } .btn.is--icon-left [class^="icon--"] { height: 16px; height: 1rem; line-height: 32px; line-height: 2rem; margin: -16px 0px 0px 0px; margin: -1rem 0rem 0rem 0rem; left: 12px; left: 0.75rem; font-weight: 500; display: block; position: absolute; top: 50%; } .btn:disabled, .btn:disabled:hover, .btn.is--disabled, .btn.is--disabled:hover { opacity: 0.5; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); border: 1px solid #dadae5; color: #00476b; cursor: not-allowed; } .btn:hover { background: #ffffff; color: #00476b; border-color: #00476b; } .btn:focus { outline: none; } .btn.is--small { line-height: 28px; line-height: 1.75rem; } .btn.is--medium { line-height: 32px; line-height: 2rem; height: 38px; height: 2.375rem; } .btn.is--large { line-height: 36px; line-height: 2.25rem; height: 42px; height: 2.625rem; } .btn.is--full { display: block; } .btn.is--center { text-align: center; } /* ######Button type class Options: `is--primary`, `is--secondary` ``` <button class="btn is--primary"> Primary </button> <button class="btn is--secondary"> Secondary </button> ``` */ .is--primary { padding: 2px 12px 2px 12px; padding: 0.125rem 0.75rem 0.125rem 0.75rem; line-height: 34px; line-height: 2.125rem; background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); border: 0 none; color: #ffffff; /** State: Small button */ /** State: Large button */ } .is--primary:hover { background: #00476b; color: #ffffff; } .is--primary.is--small { line-height: 30px; line-height: 1.875rem; } .is--primary.is--large { line-height: 38px; line-height: 2.375rem; } .is--secondary { padding: 2px 12px 2px 12px; padding: 0.125rem 0.75rem 0.125rem 0.75rem; line-height: 34px; line-height: 2.125rem; background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 100%); border: 0 none; color: #ffffff; /** State: Small button */ /** State: Large button */ } .is--secondary:hover { background: #5b8600; color: #ffffff; } .is--secondary.is--small { line-height: 30px; line-height: 1.875rem; } .is--secondary.is--large { line-height: 38px; line-height: 2.375rem; } .is--link { padding: 2px 12px 2px 12px; padding: 0.125rem 0.75rem 0.125rem 0.75rem; line-height: 34px; line-height: 2.125rem; border: 0 none; background: transparent; color: #8ed300; /** State: Small button */ /** State: Large button */ } .is--link:hover { color: #00476b; } .is--link.is--small { line-height: 30px; line-height: 1.875rem; } .is--link.is--large { line-height: 38px; line-height: 2.375rem; } /* Basic layout container ====================================== The container element is the parent element for the content section of Shopware 5. It contains the other content elements and keeps them in place. It has a set `unitize-max-width` of `1260px` and the clearfix mixin assigned. ``` <div class="container"> <p>Container element</p> </div> ``` */ .container { max-width: 1260px; max-width: 78.75rem; background: #fff; margin: 0 auto; width: 100%; } .container:after { content: ""; display: table; clear: both; } /* Delivery information ========================================= Defines the delivery status for products (e.g. detail page, note). The styling includes the base styling and the delivery states. ``` <div class="product--delivery"> <p class="delivery--information"> <span class="delivery--text delivery--text-available"> <i class="delivery--status-icon delivery--status-available"></i> delivery--text-available </span> </p> </div> <div class="product--delivery"> <p class="delivery--information"> <span class="delivery--text delivery--text-more-is-coming"> <i class="delivery--status-icon delivery--status-more-is-coming"></i> delivery--text-more-is-coming </span> </p> </div> <div class="product--delivery"> <p class="delivery--information"> <span class="delivery--text delivery--text-shipping-free"> <i class="delivery--status-icon delivery--status-shipping-free"></i> delivery--text-shipping-free </span> </p> </div> <div class="product--delivery"> <p class="delivery--information"> <span class="delivery--text delivery--text-not-available"> <i class="delivery--status-icon delivery--status-not-available"></i> delivery--text-not-available </span> </p> </div> ``` */ .product--delivery { font-size: 14px; font-size: 0.875rem; } .product--delivery p { margin: 0; } .product--delivery .delivery--status-icon { border-radius: 0.5625rem; background-clip: padding-box; margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; width: 9px; width: 0.5625rem; height: 9px; height: 0.5625rem; line-height: 10px; line-height: 0.625rem; display: inline-block; position: relative; } .product--delivery .delivery--status-shipping-free { background: #4aa3df; } .product--delivery .delivery--text-shipping-free { color: #4aa3df; } .product--delivery .delivery--status-available { background: #2ecc71; } .product--delivery .delivery--text-available { color: #2ecc71; } .product--delivery .delivery--status-more-is-coming { background: #f1c40f; } .product--delivery .delivery--text-more-is-coming { color: #f1c40f; } .product--delivery .delivery--status-not-available { background: #e74c3c; } .product--delivery .delivery--text-not-available { color: #e74c3c; } .product--delivery .delivery--text { margin: 0; display: inline-block; } /* Emotions ========================================= Contains the basic styles for the Shopware 5 shopping worlds and its elements. Shopware 5 provides 11 integrated elements inside the shopping worlds that can be chosen and modified inside the backend shopping world editor such as sliders, video elements and blog-articles. */ .content-main.is--fullscreen { box-shadow: none; max-width: none; padding: 0; margin: 0; } .content-main.is--fullscreen .content, .content-main.is--fullscreen .content-main--inner { padding: 0; margin: 0 auto; } .content-main.is--fullscreen .content--breadcrumb, .content-main.is--fullscreen .tagcloud--content, .content-main.is--fullscreen .last-seen-products { display: none; } .content-main.is--fullscreen .listing--wrapper { max-width: 1160px; max-width: 72.5rem; padding: 20px 10px 20px 10px; padding: 1.25rem 0.625rem 1.25rem 0.625rem; margin: 0 auto; } @media screen and (min-width: 48em) { .content-main.is--fullscreen .listing--wrapper { padding: 20px 30px 20px 30px; padding: 1.25rem 1.875rem 1.25rem 1.875rem; } } @media screen and (min-width: 78.75em) { .content-main.is--fullscreen .listing--wrapper { padding: 20px 0px 20px 0px; padding: 1.25rem 0rem 1.25rem 0rem; } } .emotion--overlay { width: 50px; width: 3.125rem; height: 50px; height: 3.125rem; top: 50px; top: 3.125rem; border-radius: 3px; background-clip: padding-box; margin: 0 auto; position: relative; left: 0; z-index: 1000; } .emotion--overlay .emotion--loading-indicator { padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .emotion--overlay ~ .content-main { min-height: 2000px; min-height: 125rem; visibility: hidden; } .emotion--loading-indicator { width: 21px; width: 1.3125rem; height: 21px; height: 1.3125rem; padding: 50px 0px 50px 0px; padding: 3.125rem 0rem 3.125rem 0rem; margin: 0 auto; display: block; position: relative; box-sizing: content-box; } .emotion--loading-indicator:before { border-radius: 100%; background-clip: padding-box; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; width: 100%; height: 100%; box-sizing: border-box; display: block; content: ""; border-width: 2px; border-style: solid; border-color: #333 #CCC #CCC #CCC; } .content--emotions { display: block; } body.emotion--preview { background: #ffffff; } body.emotion--preview .content-main { box-shadow: none; margin: 0; } .emotion--show-listing { margin: 20px 0px 20px 0px; margin: 1.25rem 0rem 1.25rem 0rem; } .emotion--wrapper { display: block; margin: 0 auto; max-width: 1160px; overflow: hidden; } .emotion--wrapper.is--fullscreen { max-width: none; } .emotion--container { display: block; position: relative; top: 0; left: 0; background: #fff; } .emotion--container:after { content: ""; display: table; clear: both; } .emotion--container.emotion--mode-resize { -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; } .emotion--container.emotion--mode-rows .emotion--sizer, .emotion--container.emotion--mode-rows .emotion--sizer-xs, .emotion--container.emotion--mode-rows .emotion--sizer-s, .emotion--container.emotion--mode-rows .emotion--sizer-m, .emotion--container.emotion--mode-rows .emotion--sizer-l, .emotion--container.emotion--mode-rows .emotion--sizer-xl { display: none; } .emotion--container.emotion--mode-rows .emotion--row:after { content: ""; display: table; clear: both; } .emotion--container.emotion--column-1 .col-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-1 { left: 0%; } .emotion--container.emotion--column-1 .col-xs-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-xs-1 { left: 0%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-1 .col-s-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-s-1 { left: 0%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-1 .col-m-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-m-1 { left: 0%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-1 .col-l-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-l-1 { left: 0%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-1 .col-xl-1 { width: 100%; } .emotion--container.emotion--column-1 .start-col-xl-1 { left: 0%; } } .emotion--container.emotion--column-2 .col-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-1 { left: 0%; } .emotion--container.emotion--column-2 .col-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-2 { left: 50%; } .emotion--container.emotion--column-2 .col-xs-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-2 .col-xs-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-xs-2 { left: 50%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-2 .col-s-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-2 .col-s-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-s-2 { left: 50%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-2 .col-m-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-2 .col-m-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-m-2 { left: 50%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-2 .col-l-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-2 .col-l-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-l-2 { left: 50%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-2 .col-xl-1 { width: 50%; } .emotion--container.emotion--column-2 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-2 .col-xl-2 { width: 100%; } .emotion--container.emotion--column-2 .start-col-xl-2 { left: 50%; } } .emotion--container.emotion--column-3 .col-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-1 { left: 0%; } .emotion--container.emotion--column-3 .col-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-3 { left: 66.66666667%; } .emotion--container.emotion--column-3 .col-xs-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-3 .col-xs-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-xs-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-xs-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-xs-3 { left: 66.66666667%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-3 .col-s-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-3 .col-s-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-s-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-s-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-s-3 { left: 66.66666667%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-3 .col-m-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-3 .col-m-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-m-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-m-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-m-3 { left: 66.66666667%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-3 .col-l-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-3 .col-l-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-l-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-l-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-l-3 { left: 66.66666667%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-3 .col-xl-1 { width: 33.33333333%; } .emotion--container.emotion--column-3 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-3 .col-xl-2 { width: 66.66666667%; } .emotion--container.emotion--column-3 .start-col-xl-2 { left: 33.33333333%; } .emotion--container.emotion--column-3 .col-xl-3 { width: 100%; } .emotion--container.emotion--column-3 .start-col-xl-3 { left: 66.66666667%; } } .emotion--container.emotion--column-4 .col-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-1 { left: 0%; } .emotion--container.emotion--column-4 .col-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-2 { left: 25%; } .emotion--container.emotion--column-4 .col-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-3 { left: 50%; } .emotion--container.emotion--column-4 .col-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-4 { left: 75%; } .emotion--container.emotion--column-4 .col-xs-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-4 .col-xs-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-xs-2 { left: 25%; } .emotion--container.emotion--column-4 .col-xs-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-xs-3 { left: 50%; } .emotion--container.emotion--column-4 .col-xs-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-xs-4 { left: 75%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-4 .col-s-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-4 .col-s-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-s-2 { left: 25%; } .emotion--container.emotion--column-4 .col-s-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-s-3 { left: 50%; } .emotion--container.emotion--column-4 .col-s-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-s-4 { left: 75%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-4 .col-m-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-4 .col-m-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-m-2 { left: 25%; } .emotion--container.emotion--column-4 .col-m-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-m-3 { left: 50%; } .emotion--container.emotion--column-4 .col-m-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-m-4 { left: 75%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-4 .col-l-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-4 .col-l-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-l-2 { left: 25%; } .emotion--container.emotion--column-4 .col-l-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-l-3 { left: 50%; } .emotion--container.emotion--column-4 .col-l-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-l-4 { left: 75%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-4 .col-xl-1 { width: 25%; } .emotion--container.emotion--column-4 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-4 .col-xl-2 { width: 50%; } .emotion--container.emotion--column-4 .start-col-xl-2 { left: 25%; } .emotion--container.emotion--column-4 .col-xl-3 { width: 75%; } .emotion--container.emotion--column-4 .start-col-xl-3 { left: 50%; } .emotion--container.emotion--column-4 .col-xl-4 { width: 100%; } .emotion--container.emotion--column-4 .start-col-xl-4 { left: 75%; } } .emotion--container.emotion--column-5 .col-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-1 { left: 0%; } .emotion--container.emotion--column-5 .col-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-2 { left: 20%; } .emotion--container.emotion--column-5 .col-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-3 { left: 40%; } .emotion--container.emotion--column-5 .col-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-4 { left: 60%; } .emotion--container.emotion--column-5 .col-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-5 { left: 80%; } .emotion--container.emotion--column-5 .col-xs-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-5 .col-xs-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-xs-2 { left: 20%; } .emotion--container.emotion--column-5 .col-xs-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-xs-3 { left: 40%; } .emotion--container.emotion--column-5 .col-xs-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-xs-4 { left: 60%; } .emotion--container.emotion--column-5 .col-xs-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-xs-5 { left: 80%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-5 .col-s-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-5 .col-s-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-s-2 { left: 20%; } .emotion--container.emotion--column-5 .col-s-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-s-3 { left: 40%; } .emotion--container.emotion--column-5 .col-s-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-s-4 { left: 60%; } .emotion--container.emotion--column-5 .col-s-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-s-5 { left: 80%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-5 .col-m-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-5 .col-m-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-m-2 { left: 20%; } .emotion--container.emotion--column-5 .col-m-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-m-3 { left: 40%; } .emotion--container.emotion--column-5 .col-m-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-m-4 { left: 60%; } .emotion--container.emotion--column-5 .col-m-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-m-5 { left: 80%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-5 .col-l-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-5 .col-l-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-l-2 { left: 20%; } .emotion--container.emotion--column-5 .col-l-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-l-3 { left: 40%; } .emotion--container.emotion--column-5 .col-l-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-l-4 { left: 60%; } .emotion--container.emotion--column-5 .col-l-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-l-5 { left: 80%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-5 .col-xl-1 { width: 20%; } .emotion--container.emotion--column-5 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-5 .col-xl-2 { width: 40%; } .emotion--container.emotion--column-5 .start-col-xl-2 { left: 20%; } .emotion--container.emotion--column-5 .col-xl-3 { width: 60%; } .emotion--container.emotion--column-5 .start-col-xl-3 { left: 40%; } .emotion--container.emotion--column-5 .col-xl-4 { width: 80%; } .emotion--container.emotion--column-5 .start-col-xl-4 { left: 60%; } .emotion--container.emotion--column-5 .col-xl-5 { width: 100%; } .emotion--container.emotion--column-5 .start-col-xl-5 { left: 80%; } } .emotion--container.emotion--column-6 .col-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-1 { left: 0%; } .emotion--container.emotion--column-6 .col-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-4 { left: 50%; } .emotion--container.emotion--column-6 .col-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-6 { left: 83.33333333%; } .emotion--container.emotion--column-6 .col-xs-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-6 .col-xs-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-xs-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-xs-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-xs-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-xs-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-xs-4 { left: 50%; } .emotion--container.emotion--column-6 .col-xs-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-xs-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-xs-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-xs-6 { left: 83.33333333%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-6 .col-s-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-6 .col-s-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-s-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-s-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-s-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-s-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-s-4 { left: 50%; } .emotion--container.emotion--column-6 .col-s-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-s-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-s-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-s-6 { left: 83.33333333%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-6 .col-m-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-6 .col-m-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-m-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-m-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-m-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-m-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-m-4 { left: 50%; } .emotion--container.emotion--column-6 .col-m-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-m-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-m-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-m-6 { left: 83.33333333%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-6 .col-l-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-6 .col-l-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-l-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-l-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-l-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-l-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-l-4 { left: 50%; } .emotion--container.emotion--column-6 .col-l-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-l-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-l-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-l-6 { left: 83.33333333%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-6 .col-xl-1 { width: 16.66666667%; } .emotion--container.emotion--column-6 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-6 .col-xl-2 { width: 33.33333333%; } .emotion--container.emotion--column-6 .start-col-xl-2 { left: 16.66666667%; } .emotion--container.emotion--column-6 .col-xl-3 { width: 50%; } .emotion--container.emotion--column-6 .start-col-xl-3 { left: 33.33333333%; } .emotion--container.emotion--column-6 .col-xl-4 { width: 66.66666667%; } .emotion--container.emotion--column-6 .start-col-xl-4 { left: 50%; } .emotion--container.emotion--column-6 .col-xl-5 { width: 83.33333333%; } .emotion--container.emotion--column-6 .start-col-xl-5 { left: 66.66666667%; } .emotion--container.emotion--column-6 .col-xl-6 { width: 100%; } .emotion--container.emotion--column-6 .start-col-xl-6 { left: 83.33333333%; } } .emotion--container.emotion--column-7 .col-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-1 { left: 0%; } .emotion--container.emotion--column-7 .col-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-7 { left: 85.71428571%; } .emotion--container.emotion--column-7 .col-xs-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-7 .col-xs-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-xs-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-xs-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-xs-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-xs-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-xs-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-xs-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-xs-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-xs-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-xs-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-xs-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-xs-7 { left: 85.71428571%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-7 .col-s-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-7 .col-s-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-s-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-s-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-s-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-s-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-s-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-s-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-s-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-s-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-s-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-s-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-s-7 { left: 85.71428571%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-7 .col-m-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-7 .col-m-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-m-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-m-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-m-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-m-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-m-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-m-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-m-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-m-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-m-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-m-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-m-7 { left: 85.71428571%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-7 .col-l-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-7 .col-l-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-l-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-l-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-l-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-l-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-l-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-l-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-l-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-l-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-l-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-l-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-l-7 { left: 85.71428571%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-7 .col-xl-1 { width: 14.28571429%; } .emotion--container.emotion--column-7 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-7 .col-xl-2 { width: 28.57142857%; } .emotion--container.emotion--column-7 .start-col-xl-2 { left: 14.28571429%; } .emotion--container.emotion--column-7 .col-xl-3 { width: 42.85714286%; } .emotion--container.emotion--column-7 .start-col-xl-3 { left: 28.57142857%; } .emotion--container.emotion--column-7 .col-xl-4 { width: 57.14285714%; } .emotion--container.emotion--column-7 .start-col-xl-4 { left: 42.85714286%; } .emotion--container.emotion--column-7 .col-xl-5 { width: 71.42857143000001%; } .emotion--container.emotion--column-7 .start-col-xl-5 { left: 57.14285714%; } .emotion--container.emotion--column-7 .col-xl-6 { width: 85.71428571%; } .emotion--container.emotion--column-7 .start-col-xl-6 { left: 71.42857143000001%; } .emotion--container.emotion--column-7 .col-xl-7 { width: 100%; } .emotion--container.emotion--column-7 .start-col-xl-7 { left: 85.71428571%; } } .emotion--container.emotion--column-8 .col-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-1 { left: 0%; } .emotion--container.emotion--column-8 .col-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-3 { left: 25%; } .emotion--container.emotion--column-8 .col-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-5 { left: 50%; } .emotion--container.emotion--column-8 .col-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-7 { left: 75%; } .emotion--container.emotion--column-8 .col-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-8 { left: 87.5%; } .emotion--container.emotion--column-8 .col-xs-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-8 .col-xs-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-xs-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-xs-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-xs-3 { left: 25%; } .emotion--container.emotion--column-8 .col-xs-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-xs-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-xs-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-xs-5 { left: 50%; } .emotion--container.emotion--column-8 .col-xs-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-xs-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-xs-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-xs-7 { left: 75%; } .emotion--container.emotion--column-8 .col-xs-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-xs-8 { left: 87.5%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-8 .col-s-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-8 .col-s-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-s-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-s-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-s-3 { left: 25%; } .emotion--container.emotion--column-8 .col-s-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-s-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-s-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-s-5 { left: 50%; } .emotion--container.emotion--column-8 .col-s-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-s-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-s-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-s-7 { left: 75%; } .emotion--container.emotion--column-8 .col-s-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-s-8 { left: 87.5%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-8 .col-m-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-8 .col-m-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-m-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-m-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-m-3 { left: 25%; } .emotion--container.emotion--column-8 .col-m-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-m-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-m-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-m-5 { left: 50%; } .emotion--container.emotion--column-8 .col-m-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-m-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-m-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-m-7 { left: 75%; } .emotion--container.emotion--column-8 .col-m-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-m-8 { left: 87.5%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-8 .col-l-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-8 .col-l-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-l-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-l-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-l-3 { left: 25%; } .emotion--container.emotion--column-8 .col-l-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-l-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-l-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-l-5 { left: 50%; } .emotion--container.emotion--column-8 .col-l-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-l-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-l-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-l-7 { left: 75%; } .emotion--container.emotion--column-8 .col-l-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-l-8 { left: 87.5%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-8 .col-xl-1 { width: 12.5%; } .emotion--container.emotion--column-8 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-8 .col-xl-2 { width: 25%; } .emotion--container.emotion--column-8 .start-col-xl-2 { left: 12.5%; } .emotion--container.emotion--column-8 .col-xl-3 { width: 37.5%; } .emotion--container.emotion--column-8 .start-col-xl-3 { left: 25%; } .emotion--container.emotion--column-8 .col-xl-4 { width: 50%; } .emotion--container.emotion--column-8 .start-col-xl-4 { left: 37.5%; } .emotion--container.emotion--column-8 .col-xl-5 { width: 62.5%; } .emotion--container.emotion--column-8 .start-col-xl-5 { left: 50%; } .emotion--container.emotion--column-8 .col-xl-6 { width: 75%; } .emotion--container.emotion--column-8 .start-col-xl-6 { left: 62.5%; } .emotion--container.emotion--column-8 .col-xl-7 { width: 87.5%; } .emotion--container.emotion--column-8 .start-col-xl-7 { left: 75%; } .emotion--container.emotion--column-8 .col-xl-8 { width: 100%; } .emotion--container.emotion--column-8 .start-col-xl-8 { left: 87.5%; } } .emotion--container.emotion--column-9 .col-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-1 { left: 0%; } .emotion--container.emotion--column-9 .col-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-9 { left: 88.88888889%; } .emotion--container.emotion--column-9 .col-xs-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-9 .col-xs-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-xs-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-xs-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-xs-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-xs-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-xs-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-xs-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-xs-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-xs-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-xs-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-xs-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-xs-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-xs-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-xs-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-xs-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-xs-9 { left: 88.88888889%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-9 .col-s-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-9 .col-s-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-s-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-s-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-s-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-s-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-s-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-s-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-s-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-s-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-s-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-s-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-s-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-s-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-s-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-s-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-s-9 { left: 88.88888889%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-9 .col-m-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-9 .col-m-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-m-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-m-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-m-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-m-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-m-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-m-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-m-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-m-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-m-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-m-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-m-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-m-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-m-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-m-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-m-9 { left: 88.88888889%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-9 .col-l-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-9 .col-l-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-l-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-l-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-l-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-l-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-l-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-l-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-l-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-l-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-l-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-l-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-l-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-l-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-l-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-l-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-l-9 { left: 88.88888889%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-9 .col-xl-1 { width: 11.11111111%; } .emotion--container.emotion--column-9 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-9 .col-xl-2 { width: 22.22222222%; } .emotion--container.emotion--column-9 .start-col-xl-2 { left: 11.11111111%; } .emotion--container.emotion--column-9 .col-xl-3 { width: 33.33333333%; } .emotion--container.emotion--column-9 .start-col-xl-3 { left: 22.22222222%; } .emotion--container.emotion--column-9 .col-xl-4 { width: 44.44444444%; } .emotion--container.emotion--column-9 .start-col-xl-4 { left: 33.33333333%; } .emotion--container.emotion--column-9 .col-xl-5 { width: 55.55555556%; } .emotion--container.emotion--column-9 .start-col-xl-5 { left: 44.44444444%; } .emotion--container.emotion--column-9 .col-xl-6 { width: 66.66666667%; } .emotion--container.emotion--column-9 .start-col-xl-6 { left: 55.55555556%; } .emotion--container.emotion--column-9 .col-xl-7 { width: 77.77777777999999%; } .emotion--container.emotion--column-9 .start-col-xl-7 { left: 66.66666667%; } .emotion--container.emotion--column-9 .col-xl-8 { width: 88.88888889%; } .emotion--container.emotion--column-9 .start-col-xl-8 { left: 77.77777777999999%; } .emotion--container.emotion--column-9 .col-xl-9 { width: 100%; } .emotion--container.emotion--column-9 .start-col-xl-9 { left: 88.88888889%; } } .emotion--container.emotion--column-10 .col-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-1 { left: 0%; } .emotion--container.emotion--column-10 .col-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-2 { left: 10%; } .emotion--container.emotion--column-10 .col-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-3 { left: 20%; } .emotion--container.emotion--column-10 .col-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-4 { left: 30%; } .emotion--container.emotion--column-10 .col-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-5 { left: 40%; } .emotion--container.emotion--column-10 .col-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-6 { left: 50%; } .emotion--container.emotion--column-10 .col-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-7 { left: 60%; } .emotion--container.emotion--column-10 .col-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-8 { left: 70%; } .emotion--container.emotion--column-10 .col-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-9 { left: 80%; } .emotion--container.emotion--column-10 .col-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-10 { left: 90%; } .emotion--container.emotion--column-10 .col-xs-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-10 .col-xs-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-xs-2 { left: 10%; } .emotion--container.emotion--column-10 .col-xs-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-xs-3 { left: 20%; } .emotion--container.emotion--column-10 .col-xs-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-xs-4 { left: 30%; } .emotion--container.emotion--column-10 .col-xs-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-xs-5 { left: 40%; } .emotion--container.emotion--column-10 .col-xs-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-xs-6 { left: 50%; } .emotion--container.emotion--column-10 .col-xs-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-xs-7 { left: 60%; } .emotion--container.emotion--column-10 .col-xs-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-xs-8 { left: 70%; } .emotion--container.emotion--column-10 .col-xs-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-xs-9 { left: 80%; } .emotion--container.emotion--column-10 .col-xs-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-xs-10 { left: 90%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-10 .col-s-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-10 .col-s-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-s-2 { left: 10%; } .emotion--container.emotion--column-10 .col-s-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-s-3 { left: 20%; } .emotion--container.emotion--column-10 .col-s-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-s-4 { left: 30%; } .emotion--container.emotion--column-10 .col-s-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-s-5 { left: 40%; } .emotion--container.emotion--column-10 .col-s-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-s-6 { left: 50%; } .emotion--container.emotion--column-10 .col-s-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-s-7 { left: 60%; } .emotion--container.emotion--column-10 .col-s-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-s-8 { left: 70%; } .emotion--container.emotion--column-10 .col-s-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-s-9 { left: 80%; } .emotion--container.emotion--column-10 .col-s-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-s-10 { left: 90%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-10 .col-m-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-10 .col-m-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-m-2 { left: 10%; } .emotion--container.emotion--column-10 .col-m-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-m-3 { left: 20%; } .emotion--container.emotion--column-10 .col-m-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-m-4 { left: 30%; } .emotion--container.emotion--column-10 .col-m-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-m-5 { left: 40%; } .emotion--container.emotion--column-10 .col-m-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-m-6 { left: 50%; } .emotion--container.emotion--column-10 .col-m-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-m-7 { left: 60%; } .emotion--container.emotion--column-10 .col-m-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-m-8 { left: 70%; } .emotion--container.emotion--column-10 .col-m-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-m-9 { left: 80%; } .emotion--container.emotion--column-10 .col-m-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-m-10 { left: 90%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-10 .col-l-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-10 .col-l-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-l-2 { left: 10%; } .emotion--container.emotion--column-10 .col-l-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-l-3 { left: 20%; } .emotion--container.emotion--column-10 .col-l-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-l-4 { left: 30%; } .emotion--container.emotion--column-10 .col-l-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-l-5 { left: 40%; } .emotion--container.emotion--column-10 .col-l-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-l-6 { left: 50%; } .emotion--container.emotion--column-10 .col-l-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-l-7 { left: 60%; } .emotion--container.emotion--column-10 .col-l-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-l-8 { left: 70%; } .emotion--container.emotion--column-10 .col-l-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-l-9 { left: 80%; } .emotion--container.emotion--column-10 .col-l-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-l-10 { left: 90%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-10 .col-xl-1 { width: 10%; } .emotion--container.emotion--column-10 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-10 .col-xl-2 { width: 20%; } .emotion--container.emotion--column-10 .start-col-xl-2 { left: 10%; } .emotion--container.emotion--column-10 .col-xl-3 { width: 30%; } .emotion--container.emotion--column-10 .start-col-xl-3 { left: 20%; } .emotion--container.emotion--column-10 .col-xl-4 { width: 40%; } .emotion--container.emotion--column-10 .start-col-xl-4 { left: 30%; } .emotion--container.emotion--column-10 .col-xl-5 { width: 50%; } .emotion--container.emotion--column-10 .start-col-xl-5 { left: 40%; } .emotion--container.emotion--column-10 .col-xl-6 { width: 60%; } .emotion--container.emotion--column-10 .start-col-xl-6 { left: 50%; } .emotion--container.emotion--column-10 .col-xl-7 { width: 70%; } .emotion--container.emotion--column-10 .start-col-xl-7 { left: 60%; } .emotion--container.emotion--column-10 .col-xl-8 { width: 80%; } .emotion--container.emotion--column-10 .start-col-xl-8 { left: 70%; } .emotion--container.emotion--column-10 .col-xl-9 { width: 90%; } .emotion--container.emotion--column-10 .start-col-xl-9 { left: 80%; } .emotion--container.emotion--column-10 .col-xl-10 { width: 100%; } .emotion--container.emotion--column-10 .start-col-xl-10 { left: 90%; } } .emotion--container.emotion--column-11 .col-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-1 { left: 0%; } .emotion--container.emotion--column-11 .col-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-11 { left: 90.90909091%; } .emotion--container.emotion--column-11 .col-xs-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-11 .col-xs-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-xs-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-xs-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-xs-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-xs-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-xs-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-xs-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-xs-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-xs-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-xs-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-xs-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-xs-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-xs-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-xs-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-xs-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-xs-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-xs-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-xs-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-xs-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-xs-11 { left: 90.90909091%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-11 .col-s-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-11 .col-s-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-s-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-s-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-s-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-s-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-s-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-s-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-s-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-s-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-s-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-s-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-s-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-s-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-s-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-s-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-s-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-s-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-s-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-s-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-s-11 { left: 90.90909091%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-11 .col-m-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-11 .col-m-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-m-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-m-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-m-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-m-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-m-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-m-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-m-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-m-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-m-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-m-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-m-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-m-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-m-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-m-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-m-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-m-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-m-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-m-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-m-11 { left: 90.90909091%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-11 .col-l-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-11 .col-l-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-l-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-l-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-l-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-l-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-l-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-l-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-l-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-l-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-l-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-l-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-l-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-l-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-l-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-l-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-l-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-l-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-l-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-l-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-l-11 { left: 90.90909091%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-11 .col-xl-1 { width: 9.09090909%; } .emotion--container.emotion--column-11 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-11 .col-xl-2 { width: 18.18181818%; } .emotion--container.emotion--column-11 .start-col-xl-2 { left: 9.09090909%; } .emotion--container.emotion--column-11 .col-xl-3 { width: 27.27272727%; } .emotion--container.emotion--column-11 .start-col-xl-3 { left: 18.18181818%; } .emotion--container.emotion--column-11 .col-xl-4 { width: 36.36363636%; } .emotion--container.emotion--column-11 .start-col-xl-4 { left: 27.27272727%; } .emotion--container.emotion--column-11 .col-xl-5 { width: 45.45454545%; } .emotion--container.emotion--column-11 .start-col-xl-5 { left: 36.36363636%; } .emotion--container.emotion--column-11 .col-xl-6 { width: 54.54545455%; } .emotion--container.emotion--column-11 .start-col-xl-6 { left: 45.45454545%; } .emotion--container.emotion--column-11 .col-xl-7 { width: 63.63636364%; } .emotion--container.emotion--column-11 .start-col-xl-7 { left: 54.54545455%; } .emotion--container.emotion--column-11 .col-xl-8 { width: 72.72727273%; } .emotion--container.emotion--column-11 .start-col-xl-8 { left: 63.63636364%; } .emotion--container.emotion--column-11 .col-xl-9 { width: 81.81818182000001%; } .emotion--container.emotion--column-11 .start-col-xl-9 { left: 72.72727273%; } .emotion--container.emotion--column-11 .col-xl-10 { width: 90.90909091%; } .emotion--container.emotion--column-11 .start-col-xl-10 { left: 81.81818182000001%; } .emotion--container.emotion--column-11 .col-xl-11 { width: 100%; } .emotion--container.emotion--column-11 .start-col-xl-11 { left: 90.90909091%; } } .emotion--container.emotion--column-12 .col-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-1 { left: 0%; } .emotion--container.emotion--column-12 .col-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-4 { left: 25%; } .emotion--container.emotion--column-12 .col-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-7 { left: 50%; } .emotion--container.emotion--column-12 .col-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-10 { left: 75%; } .emotion--container.emotion--column-12 .col-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-12 { left: 91.66666667%; } .emotion--container.emotion--column-12 .col-xs-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-xs-1 { left: 0%; } .emotion--container.emotion--column-12 .col-xs-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-xs-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-xs-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-xs-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-xs-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-xs-4 { left: 25%; } .emotion--container.emotion--column-12 .col-xs-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-xs-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-xs-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-xs-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-xs-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-xs-7 { left: 50%; } .emotion--container.emotion--column-12 .col-xs-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-xs-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-xs-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-xs-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-xs-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-xs-10 { left: 75%; } .emotion--container.emotion--column-12 .col-xs-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-xs-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-xs-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-xs-12 { left: 91.66666667%; } @media screen and (min-width: 30em) { .emotion--container.emotion--column-12 .col-s-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-s-1 { left: 0%; } .emotion--container.emotion--column-12 .col-s-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-s-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-s-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-s-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-s-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-s-4 { left: 25%; } .emotion--container.emotion--column-12 .col-s-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-s-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-s-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-s-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-s-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-s-7 { left: 50%; } .emotion--container.emotion--column-12 .col-s-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-s-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-s-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-s-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-s-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-s-10 { left: 75%; } .emotion--container.emotion--column-12 .col-s-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-s-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-s-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-s-12 { left: 91.66666667%; } } @media screen and (min-width: 48em) { .emotion--container.emotion--column-12 .col-m-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-m-1 { left: 0%; } .emotion--container.emotion--column-12 .col-m-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-m-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-m-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-m-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-m-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-m-4 { left: 25%; } .emotion--container.emotion--column-12 .col-m-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-m-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-m-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-m-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-m-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-m-7 { left: 50%; } .emotion--container.emotion--column-12 .col-m-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-m-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-m-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-m-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-m-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-m-10 { left: 75%; } .emotion--container.emotion--column-12 .col-m-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-m-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-m-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-m-12 { left: 91.66666667%; } } @media screen and (min-width: 64em) { .emotion--container.emotion--column-12 .col-l-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-l-1 { left: 0%; } .emotion--container.emotion--column-12 .col-l-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-l-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-l-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-l-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-l-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-l-4 { left: 25%; } .emotion--container.emotion--column-12 .col-l-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-l-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-l-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-l-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-l-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-l-7 { left: 50%; } .emotion--container.emotion--column-12 .col-l-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-l-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-l-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-l-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-l-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-l-10 { left: 75%; } .emotion--container.emotion--column-12 .col-l-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-l-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-l-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-l-12 { left: 91.66666667%; } } @media screen and (min-width: 78.75em) { .emotion--container.emotion--column-12 .col-xl-1 { width: 8.33333333%; } .emotion--container.emotion--column-12 .start-col-xl-1 { left: 0%; } .emotion--container.emotion--column-12 .col-xl-2 { width: 16.66666667%; } .emotion--container.emotion--column-12 .start-col-xl-2 { left: 8.33333333%; } .emotion--container.emotion--column-12 .col-xl-3 { width: 25%; } .emotion--container.emotion--column-12 .start-col-xl-3 { left: 16.66666667%; } .emotion--container.emotion--column-12 .col-xl-4 { width: 33.33333333%; } .emotion--container.emotion--column-12 .start-col-xl-4 { left: 25%; } .emotion--container.emotion--column-12 .col-xl-5 { width: 41.66666667%; } .emotion--container.emotion--column-12 .start-col-xl-5 { left: 33.33333333%; } .emotion--container.emotion--column-12 .col-xl-6 { width: 50%; } .emotion--container.emotion--column-12 .start-col-xl-6 { left: 41.66666667%; } .emotion--container.emotion--column-12 .col-xl-7 { width: 58.33333333%; } .emotion--container.emotion--column-12 .start-col-xl-7 { left: 50%; } .emotion--container.emotion--column-12 .col-xl-8 { width: 66.66666667%; } .emotion--container.emotion--column-12 .start-col-xl-8 { left: 58.33333333%; } .emotion--container.emotion--column-12 .col-xl-9 { width: 75%; } .emotion--container.emotion--column-12 .start-col-xl-9 { left: 66.66666667%; } .emotion--container.emotion--column-12 .col-xl-10 { width: 83.33333333%; } .emotion--container.emotion--column-12 .start-col-xl-10 { left: 75%; } .emotion--container.emotion--column-12 .col-xl-11 { width: 91.66666667%; } .emotion--container.emotion--column-12 .start-col-xl-11 { left: 83.33333333%; } .emotion--container.emotion--column-12 .col-xl-12 { width: 100%; } .emotion--container.emotion--column-12 .start-col-xl-12 { left: 91.66666667%; } } .emotion--container .is--hidden-s, .emotion--container .is--hidden-m, .emotion--container .is--hidden-l, .emotion--container .is--hidden-xl { display: block; } .emotion--container .is--hidden-xs { display: none; } .emotion--container .emotion--sizer-s, .emotion--container .emotion--sizer-m, .emotion--container .emotion--sizer-l, .emotion--container .emotion--sizer-xl { display: none; } .emotion--container .emotion--sizer-xs { display: block; } .emotion--container .emotion--sizer-xs ~ .emotion--sizer { display: none; } @media screen and (min-width: 30em) { .emotion--container .is--hidden-xs, .emotion--container .is--hidden-m, .emotion--container .is--hidden-l, .emotion--container .is--hidden-xl { display: block; } .emotion--container .is--hidden-s { display: none; } .emotion--container .emotion--sizer-xs, .emotion--container .emotion--sizer-m, .emotion--container .emotion--sizer-l, .emotion--container .emotion--sizer-xl { display: none; } .emotion--container .emotion--sizer-s { display: block; } .emotion--container .emotion--sizer-s ~ .emotion--sizer { display: none; } } @media screen and (min-width: 48em) { .emotion--container .is--hidden-xs, .emotion--container .is--hidden-s, .emotion--container .is--hidden-l, .emotion--container .is--hidden-xl { display: block; } .emotion--container .is--hidden-m { display: none; } .emotion--container .emotion--sizer-s, .emotion--container .emotion--sizer-xs, .emotion--container .emotion--sizer-l, .emotion--container .emotion--sizer-xl { display: none; } .emotion--container .emotion--sizer-m { display: block; } .emotion--container .emotion--sizer-m ~ .emotion--sizer { display: none; } } @media screen and (min-width: 64em) { .emotion--container .is--hidden-xs, .emotion--container .is--hidden-s, .emotion--container .is--hidden-m, .emotion--container .is--hidden-xl { display: block; } .emotion--container .is--hidden-l { display: none; } .emotion--container .emotion--sizer-xs, .emotion--container .emotion--sizer-s, .emotion--container .emotion--sizer-m, .emotion--container .emotion--sizer-xl { display: none; } .emotion--container .emotion--sizer-l { display: block; } .emotion--container .emotion--sizer-l ~ .emotion--sizer { display: none; } } @media screen and (min-width: 78.75em) { .emotion--container .is--hidden-xs, .emotion--container .is--hidden-s, .emotion--container .is--hidden-m, .emotion--container .is--hidden-l { display: block; } .emotion--container .is--hidden-xl { display: none; } .emotion--container .emotion--sizer-s, .emotion--container .emotion--sizer-xs, .emotion--container .emotion--sizer-m, .emotion--container .emotion--sizer-l { display: none; } .emotion--container .emotion--sizer-xl { display: block; } .emotion--container .emotion--sizer-xl ~ .emotion--sizer { display: none; } } .emotion--element { display: block; position: absolute; top: 0; left: 0; } .emotion--container.emotion--mode-rows .emotion--element { position: relative; top: 0; left: 0; float: left; vertical-align: top; } .emotion--banner { height: 100%; width: 100%; position: relative; overflow: hidden; } .emotion--banner .banner--content { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; position: absolute; top: 50%; left: 50%; } .emotion--banner .banner--content.left.top { -webkit-transform: translate(0, 0); transform: translate(0, 0); left: 0; top: 0; } .emotion--banner .banner--content.left.center { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); left: 0; top: 50%; } .emotion--banner .banner--content.left.bottom { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); left: 0; top: 100%; } .emotion--banner .banner--content.center.top { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; top: 0; } .emotion--banner .banner--content.center.bottom { -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); left: 50%; top: 100%; } .emotion--banner .banner--content.right.top { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); left: 100%; top: 0; } .emotion--banner .banner--content.right.center { -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); left: 100%; top: 50%; } .emotion--banner .banner--content.right.bottom { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); left: 100%; top: 100%; } .emotion--mode-rows .emotion--banner { height: auto; } .emotion--mode-rows .emotion--banner .banner--content, .emotion--mode-rows .emotion--banner .banner--content.left.top, .emotion--mode-rows .emotion--banner .banner--content.left.center, .emotion--mode-rows .emotion--banner .banner--content.left.bottom, .emotion--mode-rows .emotion--banner .banner--content.center.top, .emotion--mode-rows .emotion--banner .banner--content.center.bottom, .emotion--mode-rows .emotion--banner .banner--content.right.top, .emotion--mode-rows .emotion--banner .banner--content.right.center, .emotion--mode-rows .emotion--banner .banner--content.right.bottom { -webkit-transform: translate(0, 0); transform: translate(0, 0); position: relative; left: 0; top: 0; float: none; } .emotion--mode-rows .emotion--banner .banner--image-src { max-height: none; width: 100%; } .emotion--banner .banner--image { width: 100%; } .emotion--banner .banner--link { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 110; } .emotion--banner .banner--mapping { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .emotion--banner .banner--mapping-link { position: absolute; display: block; z-index: 110; background: rgba(0, 0, 0, 0); } .emotion--banner-slider { width: 100%; height: 100%; } .emotion--mode-rows .emotion--banner-slider { height: auto; } .emotion--mode-rows .emotion--banner-slider .banner-slider--container, .emotion--mode-rows .emotion--banner-slider .banner-slider--slide { height: auto; } .emotion--mode-rows .emotion--banner-slider .banner-slider--item { vertical-align: middle; } .emotion--mode-rows .emotion--banner-slider .banner-slider--banner { -webkit-transform: none; transform: none; position: relative; top: 0; left: 0; width: 100%; } .emotion--banner-slider .banner-slider--title { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; display: block; width: 100%; position: absolute; top: 0; left: 0; z-index: 100; color: #fff; font-weight: 700; background: rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-align: center; text-overflow: ellipsis; } .emotion--banner-slider .banner-slider--container, .emotion--banner-slider .banner-slider--slide { width: 100%; height: 100%; } .emotion--banner-slider .banner-slider--container .arrow { display: block; } .emotion--banner-slider .banner-slider--item { width: 100%; height: 100%; position: relative; overflow: hidden; } .emotion--banner-slider .banner-slider--banner { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; position: absolute; top: 50%; left: 50%; z-index: 100; } .emotion--banner-slider .banner-slider--image { width: 100%; } .emotion--banner-slider .banner-slider--link { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 200; text-indent: 200%; white-space: nowrap; overflow: hidden; } .emotion--banner-slider .image-slider--dots { display: none; } .emotion--product-slider { width: 100%; height: 100%; position: relative; } .emotion--mode-rows .emotion--product-slider { height: 360px; height: 22.5rem; } .emotion--product-slider .product-slider--title { height: 55px; height: 3.4375rem; position: relative; top: 0; left: 0; z-index: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emotion--product-slider .product-slider--content { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 400; } .emotion--product-slider .product-slider--title ~ .product-slider--content { padding-top: 65px; padding-top: 4.0625rem; } .emotion--product-slider .product-slider--arrow.arrow--next { border-right: 0 none; } .emotion--product-slider .product-slider--arrow.arrow--prev { border-left: 0 none; } .emotion--product-slider .box--emotion { width: 100%; height: 100%; padding: 0; text-align: center; } .emotion--product-slider .box--emotion .box--content { padding: 0; border: 0 none; } .emotion--product-slider .box--emotion .product--info { height: 100%; position: relative; overflow: hidden; } .emotion--product-slider .box--emotion .product--image { height: 60%; margin: 0 auto; } .emotion--product-slider .box--emotion .product--details { max-height: 35%; width: 100%; margin-top: 5%; } .emotion--product-slider .box--emotion .product--title { font-size: 14px; font-size: 0.875rem; font-weight: 500; white-space: normal; } .emotion--product-slider .box--emotion .product--price-info .price--unit { height: 15px; height: 0.9375rem; font-size: 10px; font-size: 0.625rem; } .emotion--product-slider .box--emotion .product--price .price--default { font-size: 14px; font-size: 0.875rem; } .emotion--product { width: 100%; height: 100%; } .emotion--mode-rows .emotion--product { height: 360px; height: 22.5rem; } .emotion--product.is--no-border .box--content { border: 0 none; } .emotion--product .product--box { width: 100%; height: 100%; padding: 0; float: none; } .emotion--product .product--box .box--content { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .emotion--product .product--box .product--info { height: 100%; position: relative; overflow: hidden; } .emotion--product .product--box .product--image { height: 70%; margin: 0 auto; } .emotion--product .product--box .product--image.is--large { height: 100%; } .emotion--product .product--box .product--details { max-height: 30%; width: 100%; position: absolute; bottom: 0; left: 0; } .emotion--product .product--box .product--title { text-overflow: ellipsis; } .emotion--category-teaser { width: 100%; height: 100%; } .emotion--mode-rows .emotion--category-teaser { height: 360px; height: 22.5rem; } .emotion--category-teaser .category-teaser--link { display: block; width: 100%; height: 100%; position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: transparent; } .emotion--category-teaser .category-teaser--title { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; display: block; width: 100%; position: absolute; bottom: 0; left: 0; color: #fff; font-weight: 700; background: rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emotion--manufacturer { width: 100%; height: 100%; position: relative; } .emotion--mode-rows .emotion--manufacturer { height: 260px; height: 16.25rem; } .emotion--manufacturer .manufacturer--title { height: 55px; height: 3.4375rem; position: relative; top: 0; left: 0; z-index: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .emotion--manufacturer .manufacturer--content { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 400; } .emotion--manufacturer .manufacturer--title ~ .manufacturer--content { padding-top: 65px; padding-top: 4.0625rem; } .emotion--manufacturer .manufacturer--slider { height: 100%; } .emotion--manufacturer .manufacturer--slider .arrow--next { right: -20px; right: -1.25rem; border-right: 0 none; } .emotion--manufacturer .manufacturer--slider .arrow--prev { left: -20px; left: -1.25rem; border-left: 0 none; } .emotion--manufacturer .manufacturer--item { padding: 10px 15px 10px 15px; padding: 0.625rem 0.9375rem 0.625rem 0.9375rem; text-align: center; vertical-align: middle; } .emotion--manufacturer .manufacturer--link { font-size: 18px; font-size: 1.125rem; display: block; width: 100%; height: 100%; color: #00476b; font-weight: 700; position: relative; } .emotion--manufacturer .manufacturer--link:hover { color: #00476b; } .emotion--manufacturer .manufacturer--image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .emotion--youtube { width: 100%; height: 100%; } .emotion--mode-rows .emotion--youtube { height: 360px; height: 22.5rem; } .emotion--video { width: 100%; height: 100%; overflow: hidden; position: relative; } .emotion--mode-rows .emotion--video { height: auto; } .emotion--mode-rows .emotion--video .video--element { height: auto; position: relative; } .emotion--video video::-moz-media-controls, .emotion--video video::-webkit-media-controls { bottom: 15%; } .emotion--video .video--element { width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0; z-index: 1000; } .emotion--video .video--cover { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1300; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: #000; text-align: center; } .emotion--video .video--cover .video--play-icon { width: 100px; width: 6.25rem; height: 100px; height: 6.25rem; font-size: 100px; font-size: 6.25rem; display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-shadow: 0 0 5px rgba(0, 0, 0, 0.6); color: #fff; } .emotion--video .video--play-btn { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; top: 25px; top: 1.5625rem; right: 25px; right: 1.5625rem; line-height: 40px; line-height: 2.5rem; font-size: 21px; font-size: 1.3125rem; width: 42px; width: 2.625rem; height: 42px; height: 2.625rem; border-radius: 100%; background-clip: padding-box; position: absolute; cursor: pointer; color: #fff; border: 2px solid #fff; text-align: center; z-index: 1200; } .emotion--video .video--text { width: 100%; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1100; color: #fff; text-align: center; } .emotion--video .video--text.no--events { pointer-events: none; } .emotion--iframe { width: 100%; height: 100%; } .emotion--mode-rows .emotion--iframe { height: 360px; height: 22.5rem; } .emotion--blog { width: 100%; height: 100%; overflow: auto; } .emotion--mode-rows .emotion--blog { height: auto; } .emotion--mode-rows .emotion--blog .blog--image { height: 160px; height: 10rem; } .emotion--blog .blog--container { height: 100%; margin: 0 0 0 -1%; } .emotion--blog .blog--entry { height: 100%; padding-left: 1%; } .emotion--blog .blog--image { height: 40%; width: 100%; display: block; background-position: center center; background-size: cover; margin-bottom: 2%; } .emotion--blog .blog--title { font-size: 14px; font-size: 0.875rem; display: block; font-weight: 700; color: #00141f; margin-bottom: 2%; } .emotion--blog .blog--title:hover { color: #00476b; } .emotion--blog .blog--description { font-size: 14px; font-size: 0.875rem; line-height: 20px; line-height: 1.25rem; color: #00476b; height: auto; max-height: 60%; } .emotion--html { width: 100%; height: 100%; position: relative; overflow: auto; } .emotion--mode-rows .emotion--html { height: auto; } .emotion--html .html--content :last-child { margin-bottom: 0; } @media screen and (min-width: 48em) { .emotion--blog { overflow: hidden; } } @media screen and (min-width: 78.75em) { .emotion--banner-slider .image-slider--dots { bottom: 10px; bottom: 0.625rem; top: auto; left: 0; display: block; position: absolute; width: 100%; text-align: center; padding: 0; } .emotion--banner-slider .image-slider--dots .dot--link { border-radius: 100%; margin: 0px 2px 0px 2px; margin: 0rem 0.125rem 0rem 0.125rem; width: 20px; width: 1.25rem; height: 20px; height: 1.25rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background: #5b8600; display: inline-block; border: 5px solid rgba(255, 255, 255, 0.5); cursor: pointer; text-indent: -99999em; background-clip: padding-box; } .emotion--banner-slider .image-slider--dots .dot--link.is--active { background: #00476b; background-clip: padding-box; } } /* Input Types ========================================== Defines the basic styling of the Shopware input element types. It contains the different states of the input fields. ``` <div> <input type="text" placeholder="Text Input"> </div> <div> <input type="password" placeholder="Password Input"> </div> <div class="textarea"> <textarea placeholder="Textarea"></textarea> </div> ``` */ textarea, input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 3px; background-clip: padding-box; box-sizing: border-box; line-height: 19px; line-height: 1.1875rem; font-size: 14px; font-size: 0.875rem; width: 290px; width: 18.125rem; padding: 10px 10px 9px 10px; padding: 0.625rem 0.625rem 0.5625rem 0.625rem; box-shadow: inset 0 1px 1px #dadae5; background: #f8f8fa; border: 1px solid #dadae5; border-top-color: #cbcbdb; color: #007ab8; text-align: left; } textarea:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus { box-shadow: 0 0 0 transparent; outline: none; border-color: #00476b; background: #ffffff; color: #8ed300; } textarea.has--error, input[type="text"].has--error, input[type="search"].has--error, input[type="password"].has--error, input[type="number"].has--error, input[type="email"].has--error, input[type="tel"].has--error { color: #e74c3c; background: #faeceb; border-color: #e74c3c; } textarea.input--field, input[type="text"].input--field, input[type="search"].input--field, input[type="password"].input--field, input[type="number"].input--field, input[type="email"].input--field, input[type="tel"].input--field { margin-bottom: 10px; margin-bottom: 0.625rem; width: 100%; } textarea.input--field.input--field-zipcode, input[type="text"].input--field.input--field-zipcode, input[type="search"].input--field.input--field-zipcode, input[type="password"].input--field.input--field-zipcode, input[type="number"].input--field.input--field-zipcode, input[type="email"].input--field.input--field-zipcode, input[type="tel"].input--field.input--field-zipcode { width: 30%; float: left; } textarea.input--field.input--field-city, input[type="text"].input--field.input--field-city, input[type="search"].input--field.input--field-city, input[type="password"].input--field.input--field-city, input[type="number"].input--field.input--field-city, input[type="email"].input--field.input--field-city, input[type="tel"].input--field.input--field-city { width: 68%; float: left; } textarea.input--field.input--spacer, input[type="text"].input--field.input--spacer, input[type="search"].input--field.input--spacer, input[type="password"].input--field.input--spacer, input[type="number"].input--field.input--spacer, input[type="email"].input--field.input--spacer, input[type="tel"].input--field.input--spacer { margin-right: 2%; } textarea.is--small, input[type="text"].is--small, input[type="search"].is--small, input[type="password"].is--small, input[type="number"].is--small, input[type="email"].is--small, input[type="tel"].is--small { height: 34px; height: 2.125rem; } textarea.is--medium, input[type="text"].is--medium, input[type="search"].is--medium, input[type="password"].is--medium, input[type="number"].is--medium, input[type="email"].is--medium, input[type="tel"].is--medium { height: 38px; height: 2.375rem; } textarea.is--large, input[type="text"].is--large, input[type="search"].is--large, input[type="password"].is--large, input[type="number"].is--large, input[type="email"].is--large, input[type="tel"].is--large { height: 42px; height: 2.625rem; } textarea { resize: vertical; } label { font-size: 14px; font-size: 0.875rem; color: #00476b; } label.has--error { color: #e74c3c; background: #faeceb; } /* Selectfield ========================================== Creates a styled combobox selection for the basic select element. ``` <div class="select-field"> <select> <option selected="selected" disabled="disabled" value="">Disabled Option</option> <option>Option 1</option> <option>Option 2</option> </select> </div> ``` */ .select-field, .js--fancy-select { max-width: 290px; max-width: 18.125rem; height: 42px; height: 2.625rem; width: 100%; display: inline-block; position: relative; overflow: hidden; } .select-field:hover, .js--fancy-select:hover { color: #00476b; } .select-field select, .js--fancy-select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0px 40px 0px 10px; padding: 0rem 2.5rem 0rem 0.625rem; line-height: 40px; line-height: 2.5rem; border-radius: 3px; background-clip: padding-box; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); height: 100%; width: 100%; display: block; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; border: 1px solid #dadae5; } .select-field select option, .js--fancy-select select option { padding: 4px 8px 4px 8px; padding: 0.25rem 0.5rem 0.25rem 0.5rem; color: #00141f; background: #fff; } .select-field select::-ms-expand, .js--fancy-select select::-ms-expand { display: none; } .select-field select:hover, .js--fancy-select select:hover { color: #00476b; border-color: #00476b; background: #fff; } .select-field select:focus, .js--fancy-select select:focus { outline: none; color: #00476b; border-color: #00476b; } .select-field select:focus::-ms-value, .js--fancy-select select:focus::-ms-value { color: #00476b; background: none; } .select-field select:disabled, .js--fancy-select select:disabled { opacity: 0.5; cursor: not-allowed; } .select-field select.has--error, .js--fancy-select select.has--error { color: #e74c3c; border-color: #e74c3c; background: #faeceb; } .select-field:after, .js--fancy-select:after { width: 30px; width: 1.875rem; height: 40px; height: 2.5rem; top: 1px; top: 0.0625rem; -webkit-user-select: none; user-select: none; line-height: 40px; max-height: 100%; display: block; content: "\e612"; position: absolute; right: 0; font-size: 5px; border-left: 1px solid #dadae5; text-align: center; font-family: 'shopware'; pointer-events: none; } .select-field:after:hover, .js--fancy-select:after:hover { color: #00476b; } .select-field.is--disabled select, .js--fancy-select.is--disabled select, .select-field.is--disabled:after, .js--fancy-select.is--disabled:after { opacity: 0.5; cursor: not-allowed; } .select-field.has--error select, .js--fancy-select.has--error select { color: #e74c3c; border-color: #e74c3c; background: #faeceb; } .select-field.has--error:after, .js--fancy-select.has--error:after { color: #e74c3c; border-color: #e74c3c; } @media screen and (min-width: 48em) { /* Standard input fields. */ .input--field { margin-bottom: 15px; margin-bottom: 0.9375rem; } .input--field .input--field-zipcode { margin-right: 2%; width: 20%; } .input--field .input--field-city { width: 78%; } } @media screen and (min-width: 78.75em) { .input--field { margin-bottom: 15px; margin-bottom: 0.9375rem; } } /* Icon set ============================================ ######Shopware Icon set elements Accessable with the `i` element and the `icon--` class. Example: `<i class="icon--cart"></i>` ``` <table style="width: 80%;margin: 20px auto;text-align: center;"> <tbody> <tr> <td><i class="icon--percent2"></i><br/> icon--percent2 </td> <td><i class="icon--percent"></i><br/> icon--percent </td> <td><i class="icon--coupon"></i><br/> icon--coupon </td> <td><i class="icon--truck"></i><br/> icon--truck </td> <td><i class="icon--logout"></i><br/> icon--logout </td> <td><i class="icon--grid"></i><br/> icon--grid </td> <td><i class="icon--filter"></i><br/> icon--filter </td> </tr> <tr> <td><i class="icon--clock"></i><br/> icon--clock </td> <td><i class="icon--arrow-up"></i><br/> icon--arrow-up </td> <td><i class="icon--arrow-right"></i><br/> icon--arrow-right </td> <td><i class="icon--arrow-left"></i><br/> icon--arrow-left </td> <td><i class="icon--arrow-down"></i><br/> icon--arrow-down </td> <td><i class="icon--star"></i><br/> icon--star </td> <td><i class="icon--star-half"></i><br/> icon--star-half </td> </tr> <tr> <td><i class="icon--star-empty"></i><br/> icon--star-empty </td> <td><i class="icon--shopware"></i><br/> icon--shopware </td> <td><i class="icon--service"></i><br/> icon--service </td> <td><i class="icon--search"></i><br/> icon--search </td> <td><i class="icon--numbered-list"></i><br/> icon--numbered-list </td> <td><i class="icon--menu"></i><br/> icon--menu </td> <td><i class="icon--mail"></i><br/> icon--mail </td> </tr> <tr> <td><i class="icon--list"></i><br/> icon--list </td> <td><i class="icon--layout"></i><br/> icon--layout </td> <td><i class="icon--heart"></i><br/> icon--heart </td> <td><i class="icon--cross"></i><br/> icon--cross </td> <td><i class="icon--compare"></i><br/> icon--compare </td> <td><i class="icon--check"></i><br/> icon--check </td> <td><i class="icon--basket"></i><br/> icon--basket </td> </tr> <tr> <td><i class="icon--account"></i><br/> icon--account </td> <td><i class="icon--chain"></i><br/> icon--chain </td> <td><i class="icon--delicious"></i><br/> icon--delicious </td> <td><i class="icon--delicious2"></i><br/> icon--delicious2 </td> <td><i class="icon--digg"></i><br/> icon--digg </td> <td><i class="icon--phone"></i><br/> icon--phone </td> <td><i class="icon--mobile"></i><br/> icon--mobile </td> </tr> <tr> <td><i class="icon--mouse"></i><br/> icon--mouse </td> <td><i class="icon--directions"></i><br/> icon--directions </td> <td><i class="icon--paperplane"></i><br/> icon--paperplane </td> <td><i class="icon--pencil"></i><br/> icon--pencil </td> <td><i class="icon--feather"></i><br/> icon--feather </td> <td><i class="icon--paperclip"></i><br/> icon--paperclip </td> <td><i class="icon--drawer"></i><br/> icon--drawer </td> </tr> <tr> <td><i class="icon--reply"></i><br/> icon--reply </td> <td><i class="icon--reply-all"></i><br/> icon--reply-all </td> <td><i class="icon--forward"></i><br/> icon--forward </td> <td><i class="icon--users"></i><br/> icon--users </td> <td><i class="icon--user-add"></i><br/> icon--user-add </td> <td><i class="icon--vcard"></i><br/> icon--vcard </td> <td><i class="icon--export"></i><br/> icon--export </td> </tr> <tr> <td><i class="icon--location"></i><br/> icon--location </td> <td><i class="icon--map"></i><br/> icon--map </td> <td><i class="icon--compass"></i><br/> icon--compass </td> <td><i class="icon--location2"></i><br/> icon--location2 </td> <td><i class="icon--target"></i><br/> icon--target </td> <td><i class="icon--share"></i><br/> icon--share </td> <td><i class="icon--sharable"></i><br/> icon--sharable </td> </tr> <tr> <td><i class="icon--thumbsup"></i><br/> icon--thumbsup </td> <td><i class="icon--thumbsdown"></i><br/> icon--thumbsdown </td> <td><i class="icon--chat"></i><br/> icon--chat </td> <td><i class="icon--comment"></i><br/> icon--comment </td> <td><i class="icon--quote"></i><br/> icon--quote </td> <td><i class="icon--house"></i><br/> icon--house </td> <td><i class="icon--popup"></i><br/> icon--popup </td> </tr> <tr> <td><i class="icon--flashlight"></i><br/> icon--flashlight </td> <td><i class="icon--printer"></i><br/> icon--printer </td> <td><i class="icon--bell"></i><br/> icon--bell </td> <td><i class="icon--link"></i><br/> icon--link </td> <td><i class="icon--cog"></i><br/> icon--cog </td> <td><i class="icon--tools"></i><br/> icon--tools </td> <td><i class="icon--trophy"></i><br/> icon--trophy </td> </tr> <tr> <td><i class="icon--tag"></i><br/> icon--tag </td> <td><i class="icon--camera"></i><br/> icon--camera </td> <td><i class="icon--megaphone"></i><br/> icon--megaphone </td> <td><i class="icon--moon"></i><br/> icon--moon </td> <td><i class="icon--palette"></i><br/> icon--palette </td> <td><i class="icon--leaf"></i><br/> icon--leaf </td> <td><i class="icon--music"></i><br/> icon--music </td> </tr> <tr> <td><i class="icon--music2"></i><br/> icon--music2 </td> <td><i class="icon--new"></i><br/> icon--new </td> <td><i class="icon--graduation"></i><br/> icon--graduation </td> <td><i class="icon--book"></i><br/> icon--book </td> <td><i class="icon--newspaper"></i><br/> icon--newspaper </td> <td><i class="icon--bag"></i><br/> icon--bag </td> <td><i class="icon--airplane"></i><br/> icon--airplane </td> </tr> <tr> <td><i class="icon--lifebuoy"></i><br/> icon--lifebuoy </td> <td><i class="icon--eye"></i><br/> icon--eye </td> <td><i class="icon--clock2"></i><br/> icon--clock2 </td> <td><i class="icon--microphone"></i><br/> icon--microphone </td> <td><i class="icon--calendar"></i><br/> icon--calendar </td> <td><i class="icon--bolt"></i><br/> icon--bolt </td> <td><i class="icon--thunder"></i><br/> icon--thunder </td> </tr> <tr> <td><i class="icon--droplet"></i><br/> icon--droplet </td> <td><i class="icon--cd"></i><br/> icon--cd </td> <td><i class="icon--briefcase"></i><br/> icon--briefcase </td> <td><i class="icon--air"></i><br/> icon--air </td> <td><i class="icon--hourglass"></i><br/> icon--hourglass </td> <td><i class="icon--gauge"></i><br/> icon--gauge </td> <td><i class="icon--language"></i><br/> icon--language </td> </tr> <tr> <td><i class="icon--network"></i><br/> icon--network </td> <td><i class="icon--key"></i><br/> icon--key </td> <td><i class="icon--battery"></i><br/> icon--battery </td> <td><i class="icon--bucket"></i><br/> icon--bucket </td> <td><i class="icon--magnet"></i><br/> icon--magnet </td> <td><i class="icon--drive"></i><br/> icon--drive </td> <td><i class="icon--cup"></i><br/> icon--cup </td> </tr> <tr> <td><i class="icon--rocket"></i><br/> icon--rocket </td> <td><i class="icon--brush"></i><br/> icon--brush </td> <td><i class="icon--suitcase"></i><br/> icon--suitcase </td> <td><i class="icon--cone"></i><br/> icon--cone </td> <td><i class="icon--earth"></i><br/> icon--earth </td> <td><i class="icon--keyboard"></i><br/> icon--keyboard </td> <td><i class="icon--browser"></i><br/> icon--browser </td> </tr> <tr> <td><i class="icon--publish"></i><br/> icon--publish </td> <td><i class="icon--progress-3"></i><br/> icon--progress-3 </td> <td><i class="icon--progress-2"></i><br/> icon--progress-2 </td> <td><i class="icon--progress-1"></i><br/> icon--progress-1 </td> <td><i class="icon--progress-0"></i><br/> icon--progress-0 </td> <td><i class="icon--sun"></i><br/> icon--sun </td> <td><i class="icon--sun2"></i><br/> icon--sun2 </td> </tr> <tr> <td><i class="icon--adjust"></i><br/> icon--adjust </td> <td><i class="icon--code"></i><br/> icon--code </td> <td><i class="icon--screen"></i><br/> icon--screen </td> <td><i class="icon--infinity"></i><br/> icon--infinity </td> <td><i class="icon--light-bulb"></i><br/> icon--light-bulb </td> <td><i class="icon--creditcard"></i><br/> icon--creditcard </td> <td><i class="icon--database"></i><br/> icon--database </td> </tr> <tr> <td><i class="icon--voicemail"></i><br/> icon--voicemail </td> <td><i class="icon--clipboard"></i><br/> icon--clipboard </td> <td><i class="icon--box"></i><br/> icon--box </td> <td><i class="icon--ticket"></i><br/> icon--ticket </td> <td><i class="icon--rss"></i><br/> icon--rss </td> <td><i class="icon--signal"></i><br/> icon--signal </td> <td><i class="icon--thermometer"></i><br/> icon--thermometer </td> </tr> <tr> <td><i class="icon--droplets"></i><br/> icon--droplets </td> <td><i class="icon--uniE680"></i><br/> icon--uniE680 </td> <td><i class="icon--statistics"></i><br/> icon--statistics </td> <td><i class="icon--pie"></i><br/> icon--pie </td> <td><i class="icon--bars"></i><br/> icon--bars </td> <td><i class="icon--graph"></i><br/> icon--graph </td> <td><i class="icon--lock"></i><br/> icon--lock </td> </tr> <tr> <td><i class="icon--lock-open"></i><br/> icon--lock-open </td> <td><i class="icon--login"></i><br/> icon--login </td> <td><i class="icon--minus"></i><br/> icon--minus </td> <td><i class="icon--plus"></i><br/> icon--plus </td> <td><i class="icon--cross2"></i><br/> icon--cross2 </td> <td><i class="icon--minus2"></i><br/> icon--minus2 </td> <td><i class="icon--cross3"></i><br/> icon--cross3 </td> </tr> <tr> <td><i class="icon--minus3"></i><br/> icon--minus3 </td> <td><i class="icon--plus3"></i><br/> icon--plus3 </td> <td><i class="icon--erase"></i><br/> icon--erase </td> <td><i class="icon--blocked"></i><br/> icon--blocked </td> <td><i class="icon--info"></i><br/> icon--info </td> <td><i class="icon--info2"></i><br/> icon--info2 </td> <td><i class="icon--question"></i><br/> icon--question </td> </tr> <tr> <td><i class="icon--help"></i><br/> icon--help </td> <td><i class="icon--warning"></i><br/> icon--warning </td> <td><i class="icon--cycle"></i><br/> icon--cycle </td> <td><i class="icon--cw"></i><br/> icon--cw </td> <td><i class="icon--ccw"></i><br/> icon--ccw </td> <td><i class="icon--shuffle"></i><br/> icon--shuffle </td> <td><i class="icon--arrow"></i><br/> icon--arrow </td> </tr> <tr> <td><i class="icon--arrow2"></i><br/> icon--arrow2 </td> <td><i class="icon--retweet"></i><br/> icon--retweet </td> <td><i class="icon--loop"></i><br/> icon--loop </td> <td><i class="icon--history"></i><br/> icon--history </td> <td><i class="icon--back"></i><br/> icon--back </td> <td><i class="icon--list2"></i><br/> icon--list2 </td> <td><i class="icon--add-to-list"></i><br/> icon--add-to-list </td> </tr> <tr> <td><i class="icon--layout2"></i><br/> icon--layout2 </td> <td><i class="icon--list3"></i><br/> icon--list3 </td> <td><i class="icon--text"></i><br/> icon--text </td> <td><i class="icon--text2"></i><br/> icon--text2 </td> <td><i class="icon--document"></i><br/> icon--document </td> <td><i class="icon--docs"></i><br/> icon--docs </td> <td><i class="icon--landscape"></i><br/> icon--landscape </td> </tr> <tr> <td><i class="icon--pictures"></i><br/> icon--pictures </td> <td><i class="icon--video"></i><br/> icon--video </td> <td><i class="icon--music3"></i><br/> icon--music3 </td> <td><i class="icon--folder"></i><br/> icon--folder </td> <td><i class="icon--archive"></i><br/> icon--archive </td> <td><i class="icon--trash"></i><br/> icon--trash </td> <td><i class="icon--upload"></i><br/> icon--upload </td> </tr> <tr> <td><i class="icon--download"></i><br/> icon--download </td> <td><i class="icon--disk"></i><br/> icon--disk </td> <td><i class="icon--install"></i><br/> icon--install </td> <td><i class="icon--cloud"></i><br/> icon--cloud </td> <td><i class="icon--upload2"></i><br/> icon--upload2 </td> <td><i class="icon--bookmark"></i><br/> icon--bookmark </td> <td><i class="icon--bookmarks"></i><br/> icon--bookmarks </td> </tr> <tr> <td><i class="icon--book2"></i><br/> icon--book2 </td> <td><i class="icon--play"></i><br/> icon--play </td> <td><i class="icon--pause"></i><br/> icon--pause </td> <td><i class="icon--record"></i><br/> icon--record </td> <td><i class="icon--stop"></i><br/> icon--stop </td> <td><i class="icon--next"></i><br/> icon--next </td> <td><i class="icon--previous"></i><br/> icon--previous </td> </tr> <tr> <td><i class="icon--first"></i><br/> icon--first </td> <td><i class="icon--last"></i><br/> icon--last </td> <td><i class="icon--resize-enlarge"></i><br/> icon--resize-enlarge </td> <td><i class="icon--resize-shrink"></i><br/> icon--resize-shrink </td> <td><i class="icon--volume"></i><br/> icon--volume </td> <td><i class="icon--sound"></i><br/> icon--sound </td> <td><i class="icon--mute"></i><br/> icon--mute </td> </tr> <tr> <td><i class="icon--flow-cascade"></i><br/> icon--flow-cascade </td> <td><i class="icon--flow-branch"></i><br/> icon--flow-branch </td> <td><i class="icon--flow-tree"></i><br/> icon--flow-tree </td> <td><i class="icon--flow-line"></i><br/> icon--flow-line </td> <td><i class="icon--flow-parallel"></i><br/> icon--flow-parallel </td> <td><i class="icon--arrow-left2"></i><br/> icon--arrow-left2 </td> <td><i class="icon--arrow-down2"></i><br/> icon--arrow-down2 </td> </tr> <tr> <td><i class="icon--arrow-up-upload"></i><br/> icon--arrow-up-upload </td> <td><i class="icon--arrow-right2"></i><br/> icon--arrow-right2 </td> <td><i class="icon--arrow-left3"></i><br/> icon--arrow-left3 </td> <td><i class="icon--arrow-down3"></i><br/> icon--arrow-down3 </td> <td><i class="icon--arrow-up2"></i><br/> icon--arrow-up2 </td> <td><i class="icon--arrow-right3"></i><br/> icon--arrow-right3 </td> <td><i class="icon--arrow-left4"></i><br/> icon--arrow-left4 </td> </tr> <tr> <td><i class="icon--arrow-down4"></i><br/> icon--arrow-down4 </td> <td><i class="icon--arrow-up3"></i><br/> icon--arrow-up3 </td> <td><i class="icon--arrow-right4"></i><br/> icon--arrow-right4 </td> <td><i class="icon--arrow-left5"></i><br/> icon--arrow-left5 </td> <td><i class="icon--arrow-down5"></i><br/> icon--arrow-down5 </td> <td><i class="icon--arrow-up4"></i><br/> icon--arrow-up4 </td> <td><i class="icon--arrow-right5"></i><br/> icon--arrow-right5 </td> </tr> <tr> <td><i class="icon--arrow-left6"></i><br/> icon--arrow-left6 </td> <td><i class="icon--arrow-down6"></i><br/> icon--arrow-down6 </td> <td><i class="icon--arrow-up5"></i><br/> icon--arrow-up5 </td> <td><i class="icon--arrow-right6"></i><br/> icon--arrow-right6 </td> <td><i class="icon--menu2"></i><br/> icon--menu2 </td> <td><i class="icon--ellipsis"></i><br/> icon--ellipsis </td> <td><i class="icon--dots"></i><br/> icon--dots </td> </tr> <tr> <td><i class="icon--dot"></i><br/> icon--dot </td> <td><i class="icon--cc"></i><br/> icon--cc </td> <td><i class="icon--cc-by"></i><br/> icon--cc-by </td> <td><i class="icon--cc-nc"></i><br/> icon--cc-nc </td> <td><i class="icon--cc-sa"></i><br/> icon--cc-sa </td> <td><i class="icon--cc-nd"></i><br/> icon--cc-nd </td> <td><i class="icon--cc-pd"></i><br/> icon--cc-pd </td> </tr> <tr> <td><i class="icon--cc-zero"></i><br/> icon--cc-zero </td> <td><i class="icon--cc-share"></i><br/> icon--cc-share </td> <td><i class="icon--cc-share2"></i><br/> icon--cc-share2 </td> <td><i class="icon--danielbruce"></i><br/> icon--danielbruce </td> <td><i class="icon--danielbruce2"></i><br/> icon--danielbruce2 </td> <td><i class="icon--github"></i><br/> icon--github </td> <td><i class="icon--github2"></i><br/> icon--github2 </td> </tr> <tr> <td><i class="icon--flickr"></i><br/> icon--flickr </td> <td><i class="icon--flickr2"></i><br/> icon--flickr2 </td> <td><i class="icon--vimeo"></i><br/> icon--vimeo </td> <td><i class="icon--vimeo2"></i><br/> icon--vimeo2 </td> <td><i class="icon--twitter"></i><br/> icon--twitter </td> <td><i class="icon--twitter2"></i><br/> icon--twitter2 </td> <td><i class="icon--facebook"></i><br/> icon--facebook </td> </tr> <tr> <td><i class="icon--facebook2"></i><br/> icon--facebook2 </td> <td><i class="icon--facebook3"></i><br/> icon--facebook3 </td> <td><i class="icon--googleplus"></i><br/> icon--googleplus </td> <td><i class="icon--googleplus2"></i><br/> icon--googleplus2 </td> <td><i class="icon--pinterest"></i><br/> icon--pinterest </td> <td><i class="icon--pinterest2"></i><br/> icon--pinterest2 </td> <td><i class="icon--tumblr"></i><br/> icon--tumblr </td> </tr> <tr> <td><i class="icon--tumblr2"></i><br/> icon--tumblr2 </td> <td><i class="icon--linkedin"></i><br/> icon--linkedin </td> <td><i class="icon--linkedin2"></i><br/> icon--linkedin2 </td> <td><i class="icon--dribbble"></i><br/> icon--dribbble </td> <td><i class="icon--dribbble2"></i><br/> icon--dribbble2 </td> <td><i class="icon--stumbleupon"></i><br/> icon--stumbleupon </td> <td><i class="icon--stumbleupon2"></i><br/> icon--stumbleupon2 </td> </tr> <tr> <td><i class="icon--lastfm"></i><br/> icon--lastfm </td> <td><i class="icon--lastfm2"></i><br/> icon--lastfm2 </td> <td><i class="icon--rdio"></i><br/> icon--rdio </td> <td><i class="icon--rdio2"></i><br/> icon--rdio2 </td> <td><i class="icon--spotify"></i><br/> icon--spotify </td> <td><i class="icon--spotify2"></i><br/> icon--spotify2 </td> <td><i class="icon--qq"></i><br/> icon--qq </td> </tr> <tr> <td><i class="icon--instagram3"></i><br/> icon--instagram3 </td> <td><i class="icon--dropbox"></i><br/> icon--dropbox </td> <td><i class="icon--evernote"></i><br/> icon--evernote </td> <td><i class="icon--flattr"></i><br/> icon--flattr </td> <td><i class="icon--skype"></i><br/> icon--skype </td> <td><i class="icon--skype2"></i><br/> icon--skype2 </td> <td><i class="icon--renren"></i><br/> icon--renren </td> </tr> <tr> <td><i class="icon--sina-weibo"></i><br/> icon--sina-weibo </td> <td><i class="icon--paypal"></i><br/> icon--paypal </td> <td><i class="icon--picasa"></i><br/> icon--picasa </td> <td><i class="icon--soundcloud"></i><br/> icon--soundcloud </td> <td><i class="icon--mixi"></i><br/> icon--mixi </td> <td><i class="icon--behance"></i><br/> icon--behance </td> <td><i class="icon--circles"></i><br/> icon--circles </td> </tr> <tr> <td><i class="icon--vk"></i><br/> icon--vk </td> <td><i class="icon--smashing"></i><br/> icon--smashing </td> <td><i class="icon--feed"></i><br/> icon--feed </td> <td><i class="icon--feed2"></i><br/> icon--feed2 </td> <td><i class="icon--instagram"></i><br/> icon--instagram </td> <td><i class="icon--instagram2"></i><br/> icon--instagram2 </td> <td><i class="icon--xing"></i><br/> icon--xing </td> </tr> <tr> <td><i class="icon--xing2"></i><br/> icon--xing2 </td> <td><i class="icon--youtube"></i><br/> icon--youtube </td> <td><i class="icon--youtube2"></i><br/> icon--youtube2 </td> </tr> </tbody> </table> ``` */ @font-face { font-family: 'shopware'; font-display: block; src: url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff2?#201906060858') format('woff2'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff?201906060858') format('woff'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.ttf?201906060858') format('truetype'), url('../../themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.svg?201906060858') format('svg'); font-weight: normal; font-style: normal; } [class^="icon--"], [class*=" icon--"] { font-family: 'shopware'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon--percent2:before { content: "\e723"; } .icon--percent:before { content: "\e722"; } .icon--coupon:before { content: "\e71c"; } .icon--truck:before { content: "\e71d"; } .icon--logout:before { content: "\e614"; } .icon--grid:before { content: "\e615"; } .icon--filter:before { content: "\e616"; } .icon--clock:before { content: "\e617"; } .icon--arrow-up:before { content: "\e610"; } .icon--arrow-right:before { content: "\e60f"; } .icon--arrow-left:before { content: "\e611"; } .icon--arrow-down:before { content: "\e612"; } .icon--star:before { content: "\e600"; } .icon--star-half:before { content: "\e71e"; } .icon--star-empty:before { content: "\e601"; } .icon--shopware:before { content: "\e602"; } .icon--service:before { content: "\e603"; } .icon--search:before { content: "\e604"; } .icon--numbered-list:before { content: "\e605"; } .icon--menu:before { content: "\e606"; } .icon--mail:before { content: "\e607"; } .icon--list:before { content: "\e608"; } .icon--layout:before { content: "\e609"; } .icon--heart:before { content: "\e60a"; } .icon--cross:before { content: "\e60d"; } .icon--compare:before { content: "\e60b"; } .icon--check:before { content: "\e60c"; } .icon--basket:before { content: "\e60e"; } .icon--account:before { content: "\e613"; } .icon--chain:before { content: "\f0c1"; } .icon--delicious:before { content: "\f1a5"; } .icon--delicious2:before { content: "\e721"; } .icon--digg:before { content: "\f1a6"; } .icon--phone:before { content: "\e619"; } .icon--mobile:before { content: "\e61d"; } .icon--mouse:before { content: "\e61e"; } .icon--directions:before { content: "\e61f"; } .icon--paperplane:before { content: "\e620"; } .icon--pencil:before { content: "\e618"; } .icon--feather:before { content: "\e621"; } .icon--paperclip:before { content: "\e622"; } .icon--drawer:before { content: "\e623"; } .icon--reply:before { content: "\e624"; } .icon--reply-all:before { content: "\e625"; } .icon--forward:before { content: "\e626"; } .icon--users:before { content: "\e627"; } .icon--user-add:before { content: "\e628"; } .icon--vcard:before { content: "\e629"; } .icon--export:before { content: "\e62a"; } .icon--location:before { content: "\e62b"; } .icon--map:before { content: "\e62c"; } .icon--compass:before { content: "\e62d"; } .icon--location2:before { content: "\e62e"; } .icon--target:before { content: "\e62f"; } .icon--share:before { content: "\e630"; } .icon--sharable:before { content: "\e631"; } .icon--thumbsup:before { content: "\e632"; } .icon--thumbsdown:before { content: "\e633"; } .icon--chat:before { content: "\e634"; } .icon--comment:before { content: "\e61a"; } .icon--quote:before { content: "\e635"; } .icon--house:before { content: "\e636"; } .icon--popup:before { content: "\e637"; } .icon--flashlight:before { content: "\e638"; } .icon--printer:before { content: "\e639"; } .icon--bell:before { content: "\e63a"; } .icon--link:before { content: "\e63b"; } .icon--flag:before { content: "\e63c"; } .icon--cog:before { content: "\e63d"; } .icon--tools:before { content: "\e63e"; } .icon--trophy:before { content: "\e63f"; } .icon--tag:before { content: "\e640"; } .icon--camera:before { content: "\e641"; } .icon--megaphone:before { content: "\e642"; } .icon--moon:before { content: "\e643"; } .icon--palette:before { content: "\e644"; } .icon--leaf:before { content: "\e645"; } .icon--music:before { content: "\e646"; } .icon--music2:before { content: "\e647"; } .icon--new:before { content: "\e648"; } .icon--graduation:before { content: "\e649"; } .icon--book:before { content: "\e64a"; } .icon--newspaper:before { content: "\e64b"; } .icon--bag:before { content: "\e64c"; } .icon--airplane:before { content: "\e64d"; } .icon--lifebuoy:before { content: "\e64e"; } .icon--eye:before { content: "\e64f"; } .icon--clock2:before { content: "\e650"; } .icon--microphone:before { content: "\e651"; } .icon--calendar:before { content: "\e652"; } .icon--bolt:before { content: "\e653"; } .icon--thunder:before { content: "\e654"; } .icon--droplet:before { content: "\e655"; } .icon--cd:before { content: "\e656"; } .icon--briefcase:before { content: "\e657"; } .icon--air:before { content: "\e658"; } .icon--hourglass:before { content: "\e659"; } .icon--gauge:before { content: "\e65a"; } .icon--language:before { content: "\e65b"; } .icon--network:before { content: "\e65c"; } .icon--key:before { content: "\e65d"; } .icon--battery:before { content: "\e65e"; } .icon--bucket:before { content: "\e65f"; } .icon--magnet:before { content: "\e660"; } .icon--drive:before { content: "\e661"; } .icon--cup:before { content: "\e662"; } .icon--rocket:before { content: "\e663"; } .icon--brush:before { content: "\e664"; } .icon--suitcase:before { content: "\e665"; } .icon--cone:before { content: "\e666"; } .icon--earth:before { content: "\e667"; } .icon--keyboard:before { content: "\e668"; } .icon--browser:before { content: "\e669"; } .icon--publish:before { content: "\e66a"; } .icon--progress-3:before { content: "\e66b"; } .icon--progress-2:before { content: "\e66c"; } .icon--progress-1:before { content: "\e66d"; } /* for backwards-compatibility @deprecated */ .icon--brogress-1:before { content: "\e66d"; } .icon--progress-0:before { content: "\e66e"; } .icon--sun:before { content: "\e66f"; } .icon--sun2:before { content: "\e670"; } .icon--adjust:before { content: "\e671"; } .icon--code:before { content: "\e672"; } .icon--screen:before { content: "\e673"; } .icon--infinity:before { content: "\e674"; } .icon--light-bulb:before { content: "\e675"; } .icon--creditcard:before { content: "\e676"; } .icon--database:before { content: "\e677"; } .icon--voicemail:before { content: "\e678"; } .icon--clipboard:before { content: "\e679"; } .icon--box:before { content: "\e67a"; } .icon--ticket:before { content: "\e67b"; } .icon--rss:before { content: "\e67c"; } .icon--signal:before { content: "\e67d"; } .icon--thermometer:before { content: "\e67e"; } .icon--droplets:before { content: "\e67f"; } .icon--uniE680:before { content: "\e680"; } .icon--statistics:before { content: "\e681"; } .icon--pie:before { content: "\e682"; } .icon--bars:before { content: "\e683"; } .icon--graph:before { content: "\e684"; } .icon--lock:before { content: "\e685"; } .icon--lock-open:before { content: "\e686"; } .icon--login:before { content: "\e687"; } .icon--minus:before { content: "\e688"; } .icon--plus:before { content: "\e689"; } .icon--cross2:before { content: "\e68a"; } .icon--minus2:before { content: "\e68b"; } .icon--plus2:before { content: "\e68c"; } .icon--cross3:before { content: "\e68d"; } .icon--minus3:before { content: "\e68e"; } .icon--plus3:before { content: "\e68f"; } .icon--erase:before { content: "\e690"; } .icon--blocked:before { content: "\e691"; } .icon--info:before { content: "\e61b"; } .icon--info2:before { content: "\e692"; } .icon--question:before { content: "\e693"; } .icon--help:before { content: "\e694"; } .icon--warning:before { content: "\e695"; } .icon--cycle:before { content: "\e696"; } .icon--cw:before { content: "\e697"; } .icon--ccw:before { content: "\e698"; } .icon--shuffle:before { content: "\e699"; } .icon--arrow:before { content: "\e69a"; } .icon--arrow2:before { content: "\e69b"; } .icon--retweet:before { content: "\e69c"; } .icon--loop:before { content: "\e69d"; } .icon--history:before { content: "\e69e"; } .icon--back:before { content: "\e69f"; } .icon--list2:before { content: "\e6a0"; } .icon--add-to-list:before { content: "\e6a1"; } .icon--layout2:before { content: "\e6a2"; } .icon--list3:before { content: "\e6a3"; } .icon--text:before { content: "\e6a4"; } .icon--text2:before { content: "\e6a5"; } .icon--document:before { content: "\e6a6"; } .icon--docs:before { content: "\e6a7"; } .icon--landscape:before { content: "\e6a8"; } .icon--pictures:before { content: "\e6a9"; } .icon--video:before { content: "\e6aa"; } .icon--music3:before { content: "\e6ab"; } .icon--folder:before { content: "\e6ac"; } .icon--archive:before { content: "\e6ad"; } .icon--trash:before { content: "\e6ae"; } .icon--upload:before { content: "\e6af"; } .icon--download:before { content: "\e6b0"; } .icon--disk:before { content: "\e6b1"; } .icon--install:before { content: "\e61c"; } .icon--cloud:before { content: "\e6b2"; } .icon--upload2:before { content: "\e6b3"; } .icon--bookmark:before { content: "\e6b4"; } .icon--bookmarks:before { content: "\e6b5"; } .icon--book2:before { content: "\e6b6"; } .icon--play:before { content: "\e6b7"; } .icon--pause:before { content: "\e6b8"; } .icon--record:before { content: "\e6b9"; } .icon--stop:before { content: "\e6ba"; } .icon--next:before { content: "\e6bb"; } .icon--previous:before { content: "\e6bc"; } .icon--first:before { content: "\e6bd"; } .icon--last:before { content: "\e6be"; } .icon--resize-enlarge:before { content: "\e6bf"; } .icon--resize-shrink:before { content: "\e6c0"; } .icon--volume:before { content: "\e6c1"; } .icon--sound:before { content: "\e6c2"; } .icon--mute:before { content: "\e6c3"; } .icon--flow-cascade:before { content: "\e6c4"; } .icon--flow-branch:before { content: "\e6c5"; } .icon--flow-tree:before { content: "\e6c6"; } .icon--flow-line:before { content: "\e6c7"; } .icon--flow-parallel:before { content: "\e6c8"; } .icon--arrow-left2:before { content: "\e6c9"; } .icon--arrow-down2:before { content: "\e6ca"; } .icon--arrow-up-upload:before { content: "\e6cb"; } .icon--arrow-right2:before { content: "\e6cc"; } .icon--arrow-left3:before { content: "\e6cd"; } .icon--arrow-down3:before { content: "\e6ce"; } .icon--arrow-up2:before { content: "\e6cf"; } .icon--arrow-right3:before { content: "\e6d0"; } .icon--arrow-left4:before { content: "\e6d1"; } .icon--arrow-down4:before { content: "\e6d2"; } .icon--arrow-up3:before { content: "\e6d3"; } .icon--arrow-right4:before { content: "\e6d4"; } .icon--arrow-left5:before { content: "\e6d5"; } .icon--arrow-down5:before { content: "\e6d6"; } .icon--arrow-up4:before { content: "\e6d7"; } .icon--arrow-right5:before { content: "\e6d8"; } .icon--arrow-left6:before { content: "\e6d9"; } .icon--arrow-down6:before { content: "\e6da"; } .icon--arrow-up5:before { content: "\e6db"; } .icon--arrow-right6:before { content: "\e6dc"; } .icon--menu2:before { content: "\e6dd"; } .icon--ellipsis:before { content: "\e6de"; } .icon--dots:before { content: "\e6df"; } .icon--dot:before { content: "\e6e0"; } .icon--cc:before { content: "\e6e1"; } .icon--cc-by:before { content: "\e6e2"; } .icon--cc-nc:before { content: "\e6e3"; } .icon--cc-nc-eu:before { content: "\e6e4"; } .icon--cc-nc-jp:before { content: "\e6e5"; } .icon--cc-sa:before { content: "\e6e6"; } .icon--cc-nd:before { content: "\e6e7"; } .icon--cc-pd:before { content: "\e6e8"; } .icon--cc-zero:before { content: "\e6e9"; } .icon--cc-share:before { content: "\e6ea"; } .icon--cc-share2:before { content: "\e6eb"; } .icon--danielbruce:before { content: "\e6ec"; } .icon--danielbruce2:before { content: "\e6ed"; } .icon--github:before { content: "\e6ee"; } .icon--github2:before { content: "\e6ef"; } .icon--flickr:before { content: "\e6f0"; } .icon--flickr2:before { content: "\e6f1"; } .icon--vimeo:before { content: "\e6f2"; } .icon--vimeo2:before { content: "\e6f3"; } .icon--twitter:before { content: "\e6f4"; } .icon--twitter2:before { content: "\e6f5"; } .icon--facebook:before { content: "\e6f6"; } .icon--facebook2:before { content: "\e6f7"; } .icon--facebook3:before { content: "\e6f8"; } .icon--googleplus:before { content: "\e6f9"; } .icon--googleplus2:before { content: "\e6fa"; } .icon--pinterest:before { content: "\e6fb"; } .icon--pinterest2:before { content: "\e6fc"; } .icon--tumblr:before { content: "\e6fd"; } .icon--tumblr2:before { content: "\e6fe"; } .icon--linkedin:before { content: "\e6ff"; } .icon--linkedin2:before { content: "\e700"; } .icon--dribbble:before { content: "\e701"; } .icon--dribbble2:before { content: "\e702"; } .icon--stumbleupon:before { content: "\e703"; } .icon--stumbleupon2:before { content: "\e704"; } .icon--lastfm:before { content: "\e705"; } .icon--lastfm2:before { content: "\e706"; } .icon--rdio:before { content: "\e707"; } .icon--rdio2:before { content: "\e708"; } .icon--spotify:before { content: "\e709"; } .icon--spotify2:before { content: "\e70a"; } .icon--qq:before { content: "\e70b"; } .icon--instagram3:before { content: "\e70c"; } .icon--dropbox:before { content: "\e70d"; } .icon--evernote:before { content: "\e70e"; } .icon--flattr:before { content: "\e70f"; } .icon--skype:before { content: "\e710"; } .icon--skype2:before { content: "\e711"; } .icon--renren:before { content: "\e712"; } .icon--sina-weibo:before { content: "\e713"; } .icon--paypal:before { content: "\e714"; } .icon--picasa:before { content: "\e715"; } .icon--soundcloud:before { content: "\e716"; } .icon--mixi:before { content: "\e717"; } .icon--behance:before { content: "\e718"; } .icon--circles:before { content: "\e719"; } .icon--vk:before { content: "\e71a"; } .icon--smashing:before { content: "\e71b"; } .icon--feed:before { content: "\e71f"; } .icon--feed2:before { content: "\e720"; } .icon--instagram:before { content: "\e903"; } .icon--instagram2:before { content: "\e902"; } .icon--xing:before { content: "\e901"; } .icon--xing2:before { content: "\e900"; } .icon--youtube:before { content: "\e905"; } .icon--youtube2:before { content: "\e904"; } /* Navigation list styling ========================================= Defines a global component for navigation lists. Navigation lists can be extended by custom styling declarations. ``` <ul class="navigation--list"> <li class="navigation--entry is--active"> <a class="navigation--link" href=""> List entry </a> </li> <li class="navigation--entry"> <a class="navigation--link" href=""> <span>List entry</span> </a> </li> <li class="navigation--entry"> <a class="navigation--link" href=""> <span>List entry</span> </a> </li> </ul> ``` */ .navigation--list { list-style: none; } /* Off-canvas menu ======================================= The off-canvas menu is the default shopping cart menu in Shopware. It is an expanding menu that displays the shopping cart at the right side of the screen. It can be enabled/disabled inside the Shopware 5 backend. The functionality is provided by the `jquery.off-canvas-menu.js` file. */ .off-canvas { -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 280px; 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: 2px 10px 2px 10px; padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 38px; line-height: 2.375rem; background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 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: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; font-size: 11px; font-size: 0.6875rem; } .off-canvas .link--go-main { font-size: 16px; font-size: 1rem; padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 42px; height: 2.625rem; font-weight: 700; display: block; width: 100%; } .off-canvas .link--go-main .icon--menu { font-size: 20px; font-size: 1.25rem; margin-right: 10px; margin-right: 0.625rem; float: left; } .off-canvas .sidebar--navigation .navigation--link { padding: 2px 10px 2px 10px; padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 38px; 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: 0px 10px 0px 0px; 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: 12px 10px 12px 10px; padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #fff; } .navigation--smartphone .navigation--link { display: block; } .navigation--smartphone .entry--close-off-canvas { padding: 2px 10px 2px 10px; padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 38px; line-height: 2.375rem; background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 100%); } .navigation--smartphone .entry--close-off-canvas .navigation--link { font-size: 14px; 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: 12px 0px 0px 0px; margin: 0.75rem 0rem 0rem 0rem; font-size: 11px; font-size: 0.6875rem; float: right; } .navigation--headline, .sidebar--navigation { margin: 0px 10px 0px 10px; margin: 0rem 0.625rem 0rem 0.625rem; } .navigation--headline { margin: 16px 10px 6px 10px; margin: 1rem 0.625rem 0.375rem 0.625rem; line-height: 26px; line-height: 1.625rem; color: #00141f; font-weight: 700; font-size: 1em; } .sidebar--navigation { border-radius: 3px; background-clip: padding-box; background: #fff; border: 1px solid #dadae5; } .sidebar--navigation .navigation--entry { border-bottom: 1px solid #dadae5; } .sidebar--navigation .navigation--entry:last-child { border-bottom: 0 none; } .sidebar--navigation .navigation--link { color: #00476b; 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: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; line-height: inherit; } .off-canvas .account--menu .navigation--link { padding: 5px 0px 5px 0px; padding: 0.3125rem 0rem 0.3125rem 0rem; line-height: inherit; } .sidebar-main .entry--close-off-canvas { display: none; } .sidebar-main .icon--arrow-right, .sidebar-main .icon--arrow-left { display: none; } } /* Panels =================================================================== ######Basic panel component for boxes and bordered containers. The panel can be used with different content structures. Styling options: `has--border` and `has--shadow` ``` <div class="panel"> <div class="panel--body"> Basic panel element </div> </div> <div class="panel has--border"> <div class="panel--body"> Basic panel with border </div> </div> ``` */ .panel { display: block; background: #ffffff; } .panel.has--shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } .panel.has--border { border: 1px solid #dadae5; } /* <h6>A header box for a panel.</h6> <p>Can be used by adding the `panel--header`-element and `primary` or `secondary` classes.</p> ``` <div class="panel"> <div class="panel--header primary">Panel header primary</div> <div class="panel--header secondary">Panel header secondary</div> <div class="panel--body"> Panel body </div> </div> ``` */ .panel--header { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 14px; font-size: 0.875rem; background: #f8f8fa; display: block; margin: 0; font-weight: 700; color: #00476b; border-bottom: 1px solid #dadae5; } .panel--header.secondary { color: #00476b; background: #fff; } .panel--header.primary { color: #00476b; background: #fff; } /* <h6>A title heading for a panel.</h6> <p>The `panel--title` can be used as an alternative to the `panel--header` element.</p> <p>When using the `panel--title` element, make sure that the `panel--body` element has the class `is--wide` assigned in order to work properly. Also the `is--underline` class was added here. ``` <div class="panel"> <h3 class="panel--title is--underline">Panel title</h3> <div class="panel--body is--wide"> Panel body </div> </div> ``` */ .panel--title { padding: 20px 0px 0px 0px; padding: 1.25rem 0rem 0rem 0rem; margin: 0px 20px 0px 20px; margin: 0rem 1.25rem 0rem 1.25rem; font-size: 16px; font-size: 1rem; display: block; font-weight: 700; color: #00141f; } .panel--title.is--underline { padding: 20px 0px 10px 0px; padding: 1.25rem 0rem 0.625rem 0rem; border-bottom: 1px solid #dadae5; text-decoration: none !important; } .panel--title.is--secondary { color: #00476b; } .panel--title.is--primary { color: #00476b; } /* <h6>The content body for a panel</h6> <p>Styling options: `is--slim`, `is--wide`, `is--flat`, `is--embossed`.</p> ``` <div class="panel"> <div class="panel--body is--wide">Panel content ...</div> </div> ``` */ .panel--body { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; display: block; position: relative; } .panel--body.has--border { border: 1px solid #dadae5; } .panel--body.is--slim { padding: 5px 5px 5px 5px; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } .panel--body.is--wide { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .panel--body.is--flat { background: #f5f5f8; } .panel--body.is--embossed { box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); background: #f5f5f8; } /* ######A container for action elements ``` <div class="panel--actions"> <a href="" class="btn">Action Link</a> <a href="" class="btn">Action Link</a> </div> ``` */ .panel--actions { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; line-height: 40px; line-height: 2.5rem; display: block; } .panel--actions.has--border { margin: 10px 0px 0px 0px; margin: 0.625rem 0rem 0rem 0rem; padding: 10px 0px 0px 0px; padding: 0.625rem 0rem 0rem 0rem; border-top: 1px solid #dadae5; } .panel--actions.is--slim { padding: 5px 5px 5px 5px; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } .panel--actions.is--wide { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .panel--actions .btn { margin: 0px 6px 0px 0px; margin: 0rem 0.375rem 0rem 0rem; } /* ######A table inside a panel. ``` <div class="panel panel--table"> <div class="panel--tr"> <div class="panel--th">Column 1</div> <div class="panel--th">Column 2</div> <div class="panel--th">Column 3</div> </div> <div class="panel--tr"> <div class="panel--td">Value 1</div> <div class="panel--td">Value 2</div> <div class="panel--td">Value 3</div> </div> </div> ``` */ .panel--table { width: 100%; display: block; border-collapse: collapse; border-spacing: 0; empty-cells: show; } .panel--table:after { content: ""; display: table; clear: both; } .panel--table.has--border { border: 1px solid #dadae5; } .panel--tr { display: block; width: 100%; border-width: 0 0 1px 0; border-style: solid; border-color: #dadae5; } .panel--tr:after { content: ""; display: table; clear: both; } .panel--tr:last-child { border-width: 0; } .panel--tr.is--odd { background: #f5f5f5; } .panel--tr.is--secondary { background: #f5f5f5; } .panel--tr.is--primary { color: #00476b; } .panel--th, .panel--td { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; display: inline-block; float: left; } .panel--th:after, .panel--td:after { content: ""; display: table; clear: both; } .panel--th.has--border, .panel--td.has--border { border-width: 0 1px 0 0; border-style: solid; border-color: #dadae5; } .panel--th.has--border:last-child, .panel--td.has--border:last-child { border-width: 0; } .panel--th p, .panel--td p { margin: 0; } .panel--th { font-weight: 700; color: #00141f; } /* ######A small dot navigation for example for a slider panel. ``` <div class="panel--dot-nav"> <a href=""></a> <a href="" class="is--active"></a> <a href=""></a> </div> ``` */ .panel--dot-nav { height: 11px; height: 0.6875rem; position: relative; } .panel--dot-nav .dot--link, .panel--dot-nav a { border-radius: 11px; background-clip: padding-box; margin: 0px 5px 0px 5px; margin: 0rem 0.3125rem 0rem 0.3125rem; width: 11px; width: 0.6875rem; height: 11px; height: 0.6875rem; display: inline-block; border: 1px solid #dadae5; } .panel--dot-nav .dot--link.is--active, .panel--dot-nav a.is--active { border-color: #00476b; background: #00476b; } /* ######A paging navigation for pagination content. ``` <div class="panel--paging"> <a href=""><i class="icon--arrow-left"></i></a> <a href="">1</a> <a href="">2</a> <a href="">...</a> <a href=""><i class="icon--arrow-right"></i></a> </div> ``` */ .panel--paging { line-height: 32px; line-height: 2rem; display: inline-block; } .panel--paging .paging--link { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; margin: 0px 1px 0px 1px; margin: 0rem 0.0625rem 0rem 0.0625rem; font-size: 14px; font-size: 0.875rem; line-height: 30px; line-height: 1.875rem; border-radius: 3px; background-clip: padding-box; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); display: inline-block; font-weight: 500; text-align: center; border: 1px solid #dadae5; color: #00476b; } .panel--paging .paging--link [class^="icon--"] { font-size: 10px; font-size: 0.625rem; } .panel--paging .paging--link.is--active, .panel--paging .paging--link.is--active:hover { line-height: 32px; line-height: 2rem; background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); color: #ffffff; border: 0 none; font-weight: 700; cursor: default; } .panel--paging .paging--link:hover { background: #ffffff; color: #00476b; border-color: #00476b; } /* Form ============================ Contains the general layout and styling for the Shopware form elements and fieldsets. The fieldset padding size is defined with the unitize mixin. ``` <fieldset> <form> <table> <tr> <td>Table cell</td> </tr> <tr> <td>Table cell</td> </tr> <tr> <td>Table cell</td> </tr> <table> <form> </fieldset> ``` */ form { display: block; } form table { width: 100%; } form table td { padding: 10px; } fieldset { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; border: 1px solid #dadae5; } /* Alerts =================================================================== ######Displays an alert box for status messages to the user. Alerts always have to have the `.alert` class assigned, and in addition one of four color schemes. Options: `is--success`, `is--info`, `is--warning`, `is--error`. ``` <p class="alert is--success">Success message</p> <p class="alert is--info">Info message</p> <p class="alert is--warning">Warning message</p> <p class="alert is--error">Error message</p> ``` */ .alert { font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; position: relative; overflow: hidden; /* ######With an Icon inside of the box.</h6> ``` <div class="alert is--success is--rounded"> <div class="alert--icon"> <i class="icon--element icon--check"></i> </div> <div class="alert--content"> Success message with Icon </div> </div> <div class="alert is--warning is--rounded"> <div class="alert--icon"> <i class="icon--element icon--warning"></i> </div> <div class="alert--content"> Warning message with Icon </div> </div> ``` */ } .alert:after { content: ""; display: table; clear: both; } .alert.is--success { color: #208e4e; background: #def2e7; } .alert.is--success .alert--icon { background: #2ecc71; } .alert.is--info { color: #217dbb; background: #e9f2f8; } .alert.is--info .alert--icon { background: #4aa3df; } .alert.is--warning { color: #ae8e0a; background: #fbf5db; } .alert.is--warning .alert--icon { background: #f1c40f; } .alert.is--error { color: #e74c3c; background: #faeceb; } .alert.is--error .alert--icon { background: #e74c3c; } .alert.no--cookies { position: fixed; z-index: 99999; top: 0; left: 0; right: 0; } .alert.no--cookies a.close--alert { float: right; } .alert.no--cookies a.close--alert:hover { cursor: pointer; text-decoration: underline; } .alert .icon--element { position: absolute; top: 50%; left: 0; width: 15%; margin-top: -9px; } .alert .alert--icon, .alert .alert--content { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; float: left; } .alert .alert--icon p, .alert .alert--content p { margin-bottom: 0px; margin-bottom: 0rem; } .alert .alert--icon { font-size: 18px; font-size: 1.125rem; line-height: 26px; line-height: 1.625rem; width: 15%; text-align: center; font-weight: 700; color: #fff; padding-bottom: 9999em; margin-bottom: -9999em; } .alert .alert--content { width: 85%; } .alert .alert--content.is--strong { font-weight: 700; } .alert .alert--list { list-style: none; } .alert .list--entry { display: block; } @media screen and (min-width: 48em) { .alert .alert--icon, .alert .icon--element { width: 8%; } .alert .alert--content { width: 92%; } } /* Counter Badges ========================================== ######Creates a badge to display counts. The `span` can be modified with 3 different color schemes. Options: `is--primary`, `is--secondary`, `is--minimal` ``` <p><span class="badge is--primary">1</span> Primary Badge</p> <p><span class="badge is--secondary">2</span> Secondary Badge</p> <p><span class="badge is--minimal">3</span> Minimal Badge</p> ``` */ .badge { padding: 0px 5px 0px 5px; padding: 0rem 0.3125rem 0rem 0.3125rem; margin: 0px 5px 0px 5px; margin: 0rem 0.3125rem 0rem 0.3125rem; height: 20px; height: 1.25rem; min-width: 10px; min-width: 0.625rem; line-height: 20px; line-height: 1.25rem; font-size: 12px; 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: #00476b; border: 1px solid #dadae5; } .badge.is--primary { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); color: #fff; border-color: #fff; } .badge.is--secondary { background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 100%); color: #fff; border-color: #fff; } .badge.is--minimal { border: 0 none; } /* Labels =================================================================== ######Creates a label for displaying a status. To work properly the `span`-element needs the general `label`-class and a color scheme option: Options: `success`, `info`, `warning`, `error`. ``` <span class="label success">Success!</span> <span class="label info">Info!</span> <span class="label warning">Warning!</span> <span class="label error">Error!</span> ``` */ .label { padding: 3px 8px 3px 8px; padding: 0.1875rem 0.5rem 0.1875rem 0.5rem; margin: 0px 5px 0px 5px; margin: 0rem 0.3125rem 0rem 0.3125rem; font-size: 14px; font-size: 0.875rem; line-height: 18px; line-height: 1.125rem; border-radius: 3px; background-clip: padding-box; display: inline-block; text-align: center; white-space: nowrap; color: #00476b; background: #00476b; } .label.success { background: #2ecc71; } .label.info { background: #4aa3df; } .label.warning { background: #f1c40f; } .label.error { background: #e74c3c; } /* Collapse Box ================================================ A collapse box for panels and text elements. Displays a folding box that responds if the content does not fit the element. ``` <div class="collapse--header"> Collapse box title <span class="collapse--toggler"> </span> </div> <div class="collapse--content is--collapsed"> This content will be shown by the is--collapsed class. </div> <div class="collapse--header"> Collapse box title <span class="collapse--toggler"> </span> </div> <div class="collapse--content"> Lorem ipsum dolor </div> <div class="collapse--header"> Collapse box title <span class="collapse--toggler"> </span> </div> <div class="collapse--content"> Lorem ipsum dolor </div> ``` */ .collapse--header { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; margin: 10px 0px 0px 0px; margin: 0.625rem 0rem 0rem 0rem; font-size: 16px; font-size: 1rem; line-height: 16px; 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 #dadae5; cursor: pointer; } .collapse--header .collapse--toggler { height: 16px; height: 1rem; top: 10px; top: 0.625rem; right: 20px; right: 1.25rem; font-size: 6px; font-size: 0.375rem; line-height: 16px; line-height: 1rem; position: absolute; font-weight: 500; font-family: 'shopware'; } .collapse--header .collapse--toggler:before { content: "\e612"; } .collapse--header:hover { color: #00476b; } .collapse--header.is--active { background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 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: #adadc6; z-index: 1300; } .collapse--header.is--active .collapse--toggler:before { content: "\e610"; } .collapse--content { padding: 5px 0px 0px 0px; padding: 0.3125rem 0rem 0rem 0rem; top: -5px; 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: #dadae5; } .collapse--content.is--collapsed { display: block; z-index: 1200; } .js--collapse-target { display: none; } .js--collapse-target.is--collapsed { display: block; } /* Product Slider =================================================== ######Shopware Product slider element The Shopware product slider element displays a selection of articles the user chooses inside a slim slider element. The product slider uses the product box component for displaying and sliding articles. The slider has `is--vertical` and `is-horizontal` properties to set the layout of the element. For initializing a product slider the outer `product-slider` wrapper has to have the attribute `data-product-slider="true"`. ``` <div class="product-slider" data-product-slider="true"> <a class="product-slider--arrow arrow--next is--horizontal"></a> <a class="product-slider--arrow arrow--prev is--horizontal"></a> <div class="product-slider--container is--horizontal"> <div class="product-slider--item"> <!-- Product box will be placed here. --> </div> </div> </div> ``` */ .product-slider { display: block; padding: 0; position: relative; top: 0; left: 0; } .product-slider--container { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; width: 100%; height: 100%; font-size: 0; position: relative; top: 0; left: 0; overflow: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; } .product-slider--container:after { content: ""; display: table; clear: both; } .product-slider--container::-webkit-scrollbar { width: 0; height: 0; } .product-slider--container.is--vertical { overflow-y: scroll; overflow-x: hidden; white-space: normal; } .product-slider--container.is--vertical .product-slider--item { display: block; width: 100%; } .product-slider--container.is--horizontal { overflow-y: hidden; overflow-x: scroll; white-space: nowrap; } .product-slider--container.is--horizontal .product-slider--item { height: 100%; display: inline-block; } .is--ie .product-slider--container, .is--firefox .product-slider--container, .product-slider--container.is--no-scroll { overflow-y: hidden; overflow-x: hidden; } .product-slider--item { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 16px; font-size: 1rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; top: 0; left: 0; overflow: hidden; text-align: center; width: 100%; display: inline-block; } .product-slider--arrow { width: 30px; width: 1.875rem; height: 60px; height: 3.75rem; margin: -30px 0px 0px 0px; margin: -1.875rem 0rem 0rem 0rem; line-height: 60px; line-height: 3.75rem; font-size: 12px; font-size: 0.75rem; border-radius: 3px; background-clip: padding-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: rgba(255, 255, 255, 0.5); display: block; position: absolute; top: 50%; z-index: 750; font-family: 'shopware'; text-align: center; color: #00476b; border: 1px solid #dadae5; cursor: pointer; } .product-slider--arrow.arrow--prev { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; left: 0; } .product-slider--arrow.arrow--prev:before, .product-slider--arrow.arrow--prev::before { content: "\e611"; } .product-slider--arrow.arrow--next { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; right: 0; } .product-slider--arrow.arrow--next:before { content: "\e60f"; } .product-slider--arrow:hover { color: #00476b; border-color: #00476b; background: rgba(255, 255, 255, 0.8); } .product-slider--arrow.is--vertical { width: 60px; width: 3.75rem; height: 30px; height: 1.875rem; margin: 0px 0px 0px -30px; margin: 0rem 0rem 0rem -1.875rem; line-height: 30px; line-height: 1.875rem; font-size: 6px; font-size: 0.375rem; left: 50%; top: auto; } .product-slider--arrow.is--vertical.arrow--prev { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-clip: padding-box; top: 0; } .product-slider--arrow.is--vertical.arrow--prev:before, .product-slider--arrow.is--vertical.arrow--prev::before { content: "\e610"; } .product-slider--arrow.is--vertical.arrow--next { bottom: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; } .product-slider--arrow.is--vertical.arrow--next:before { content: "\e612"; } @media screen and (min-width: 30em) { .product-slider--item { width: 50%; } } @media screen and (min-width: 48em) { .product-slider--item { width: 33.33%; } } @media screen and (min-width: 64em) { .product-slider--item { width: 25%; } } @media screen and (min-width: 78.75em) { .product-slider--container.is--horizontal, .product-slider--container.is--vertical { overflow: hidden; } } /* Modalbox ============================================== Creates a transitioned fixed modalbox overlay that displays above all other elements. The `sizing--content` class lets the modal window get its height from the inner content. The inline styles are generated by the `jquery.modal.js` file. ``` <div class="js--modal sizing--content" style="width: 600px; height: auto; display: block; opacity: 1;"> <div class="header"> <div class="title">This is the header</div> </div> <div class="content"> This is the content </div> <div class="btn icon--cross is--small btn--grey modal--close"> </div> </div> <div class="js--overlay" style="opacity: 0.8; display: block; cursor: pointer;"></div> ``` */ .js--modal { -webkit-transition: all 0.5s; transition: all 0.5s; box-shadow: 0px 0px 0px 7px rgba(0, 0, 0, 0.25); box-sizing: content-box; opacity: 0; position: fixed; right: 0; left: 0; top: 0; bottom: 0; margin: auto; background: padding-box #ffffff; max-height: 100%; max-width: 100%; z-index: 7000; overflow-x: hidden; overflow-y: auto; } .js--modal .header { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 42px; height: 2.625rem; border-bottom: 1px solid #dadae5; } .js--modal .header .title { font-size: 16px; font-size: 1rem; font-weight: 700; } .js--modal .modal--close { height: 30px; height: 1.875rem; width: 30px; width: 1.875rem; line-height: 30px; line-height: 1.875rem; font-size: 10px; font-size: 0.625rem; right: 10px; right: 0.625rem; top: 7px; top: 0.4375rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; text-align: center; position: absolute; } .js--modal .content { width: 100%; height: 100%; position: relative; overflow: auto; -webkit-overflow-scrolling: touch; } .js--modal .content .content--iframe { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 100%; height: 100%; border: 0 none; display: block; } .js--modal.sizing--auto.is--fullscreen { height: 100% !important; width: 100% !important; } .js--modal.sizing--fixed { max-height: none !important; max-width: none !important; } .js--modal.sizing--content { position: fixed; bottom: auto; top: auto; height: auto; } .js--modal.no--header .header { display: none; } .js--modal.no--border-radius { border-radius: 0; } @media screen and (min-width: 48em) { .js--modal { border-radius: 3px; background-clip: padding-box; } } /* Loading indicator ============================================= Displays a spinning circle to indicate a loading status. Can be imported by using the `i` tag with the `icon--loading-indicator` class. `<i class="icon--loading-indicator"></i>` The functionality is provided by the `jquery.loading-indicator.js` file. */ .js--is-loading { position: relative; } .js--loading-indicator { position: absolute; display: none; z-index: 6000; top: 50%; left: 50%; } body > .js--loading-indicator { position: fixed; } .js--loading-indicator.indicator--relative { width: 30px; width: 1.875rem; height: 30px; height: 1.875rem; padding-top: 50px; padding-top: 3.125rem; padding-bottom: 50px; padding-bottom: 3.125rem; background: none; position: relative; display: block; left: 50%; top: auto; border: 0 none; } .js--loading-indicator.indicator--absolute { width: 30px; width: 1.875rem; height: 30px; height: 1.875rem; padding-top: 50px; padding-top: 3.125rem; padding-bottom: 50px; 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: -15px 0px 0px -15px; margin: -0.9375rem 0rem 0rem -0.9375rem; } .has--cssanimations .js--loading-indicator { margin: -13px 0px 0px -13px; margin: -0.8125rem 0rem 0rem -0.8125rem; } .has--cssanimations .js--loading-indicator div[class^="icon--"] { width: 26px; width: 1.625rem; height: 26px; height: 1.625rem; display: block; } .has--cssanimations .js--loading-indicator .icon--default:before, .has--cssanimations .js--loading-indicator .icon--default::before { width: 22px; width: 1.375rem; height: 22px; 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 #dadae5; border-top: 2px solid #8f8fb1; } .has--no-cssanimations .js--loading-indicator { margin: -13px 0px 0px -13px; margin: -0.8125rem 0rem 0rem -0.8125rem; } .has--no-cssanimations .js--loading-indicator div[class^="icon--"] { width: 16px; width: 1rem; height: 16px; height: 1rem; display: block; background-repeat: no-repeat; background-size: 100% 100%; } .has--no-cssanimations .js--loading-indicator .icon--default { height: 16px; height: 1rem; width: 16px; width: 1rem; background-image: url(../../themes/Frontend/Responsive/frontend/_public/src/img/icons/loading-indicator.gif); } /* Overlay ================================================ Creates a fixed full-screen overlay. The `js--overlay` element is used when a modal window is shown. The `js--overlay` element is empty while the html of the modal box will be created just before the closing body-tag. The opacity of the full-screen overlay can be modified with javascript. The functionality is provided by the `jquery.overlay.js` file. ``` <div class="js--overlay" style="opacity: 0.8; display: block; cursor: pointer;"></div> ``` default color:`#000000` default opacity (alpha):`0.7` */ .js--overlay-relative { position: relative; } .js--overlay { -webkit-transition: opacity 0.45s cubic-bezier(.3,0,.15,1), visibility 0.45s linear; transition: opacity 0.45s cubic-bezier(.3,0,.15,1), visibility 0.45s linear; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 0.01; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 5000; visibility: hidden; } .js--overlay.theme--dark { background: rgba(0, 0, 0, 0.7); } .js--overlay.theme--light { background: rgba(255, 255, 255, 0.7); } .js--overlay.is--open { -webkit-transition-delay: 0; transition-delay: 0; opacity: 1; visibility: visible; } .js--overlay.is--closable { cursor: pointer; } body > .js--overlay { position: fixed; } /* Language Flags ================================================== Displays a country flag the size of 14px x 11px used for language selections purposes. inspired by: https://github.com/dhanishgajjar/css-flags en_GB: we need to use svg for en_GB, cause it's smaller than the CSS-Version */ .language--flag { height: 11px; height: 0.6875rem; width: 14px; width: 0.875rem; display: inline-block; text-indent: 100%; white-space: nowrap; overflow: hidden; } .language--flag.de_DE { background-position: 0 0; background-image: linear-gradient(to bottom, #000000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%); } .language--flag.en_GB { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='640' height='480'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M-85 0h682v512H-85z'%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path='url%28%23a%29' transform='translate%2880%29 scale%28.94%29'%3E%3Cpath fill='%23006' d='M-256 0H768v512H-256z'%2F%3E%3Cpath fill='%23fff' d='M-256 0v57l910 455h114v-57L-141 0h-115zM768 0v57l-909 455h-115v-57L654 0h114z'%2F%3E%3Cpath fill='%23fff' d='M171 0v512h170V0H171zm-427 171v170H768V171H-256z'%2F%3E%3Cpath fill='%23c00' d='M-256 205v102H768V205H-256zM205 0v512h102V0H205zm-461 512L85 341h77l-342 171h-76zm0-512L85 171H9L-256 38V0zm606 171L692 0h76L427 171h-77zm418 341L427 341h76l265 133v38z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .language--flag.nl_NL { background-position: 0 0; background-image: linear-gradient(to bottom, #dd0000 33%, #ffffff 33%, #ffffff 66%, #21468b 66%); } .language--flag.fr_FR { background-position: 0 0; background-image: linear-gradient(to right, #21468b 33%, #ffffff 33%, #ffffff 66%, #dd0000 66%); } .language--flag.es_ES { background-position: 0 0; background-image: linear-gradient(#dd0000 25%, #ffce00 25%, #ffce00 75%, #dd0000 75%); } .language--flag.it_IT { background-position: 0 0; background-image: linear-gradient(to right, #009246 33%, #ffffff 33%, #ffffff 66%, #dd0000 66%); } /* Tagcloud ============================================= The tagcloud element shows recent keywords inside a box, ordered in importance by font-size. ``` <div class="panel has--border tagcloud--content"> <div class="panel--body is--wide tagcloud"> <a href="#" title="tagcloud-item" class="tag0">Tagcloud-Item</a> <a href="#" title="tagcloud-item" class="tag1">Tagcloud-Item</a> <a href="#" title="tagcloud-item" class="tag2">Tagcloud-Item</a> <a href="#" title="tagcloud-item" class="tag3">Tagcloud-Item</a> </div> </div> ``` */ .tagcloud a { color: #00476b; margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; } .tagcloud a:hover { color: #00476b; } .tagcloud .tag0 { font-size: 21px; font-size: 1.3125rem; line-height: 21px; line-height: 1.3125rem; } .tagcloud .tag1 { font-size: 16px; font-size: 1rem; line-height: 16px; line-height: 1rem; font-weight: 700; } .tagcloud .tag2 { font-size: 14px; font-size: 0.875rem; line-height: 14px; line-height: 0.875rem; } .tagcloud .tag3 { font-size: 12px; font-size: 0.75rem; line-height: 12px; line-height: 0.75rem; font-weight: 700; } /* Last-seen products element ======================================================= The Last-seen products element fetches the recently viewed articles of the user and displays them inside a slider-element. The slider contains a title element and a product box with the article-image and price. */ .last-seen-products { margin: 10px 0px 0px 0px; margin: 0.625rem 0rem 0rem 0rem; clear: both; } .last-seen-products:after { content: ""; display: table; clear: both; } .last-seen-products .last-seen-products--title { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; border-bottom: 1px solid #dadae5; font-size: 16px; font-size: 1rem; display: block; font-weight: 700; color: #00141f; } .last-seen-products--slider { border-radius: 3px; background-clip: padding-box; height: auto; } .last-seen-products--slider .product--box .product--title { text-align: center; margin: 0; padding: 0; } .last-seen-products--slider, .last-seen-products--container { position: relative; overflow: hidden; } .last-seen-products--container { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .last-seen-products-item--image { line-height: 120px; line-height: 7.5rem; display: block; } .last-seen-products--item { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; } @media screen and (min-width: 48em) { .last-seen-products { margin: 30px 0px 0px 0px; margin: 1.875rem 0rem 0rem 0rem; } } /* Lightbox ========================================= Defines the properties for the lightbox container and image elements. The lightbox creates a fullscreen overlay to preview product images. Both components are required in order to make the element work properly. */ .lightbox--container { display: block; width: 100%; height: 100%; background: #FFFFFF; position: relative; } .lightbox--image { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; vertical-align: middle; } /* Lists =============================== Example of the default styling for an unordered list. The `ul` element has to have the `list--unordered` class assigned in order to work properly. In addition there are 8 list style types Shopware 5 provides that you can choose from. **Example:**<br/> `<ul class="list--unordered is--checked">` ``` <ul class="list--unordered"> <li>Default list</li> </ul> <ul class="list--unordered is--checked"> <li>is--checked</li> </ul> <ul class="list--unordered is--disc"> <li>is--disc</li> </ul> <ul class="list--unordered is--arrow-right"> <li>is--arrow-right</li> </ul> <ul class="list--unordered is--star"> <li>is--star</li> </ul> <ul class="list--unordered is--cross"> <li>is--cross</li> </ul> <ul class="list--unordered is--tag"> <li>is--tag</li> </ul> <ul class="list--unordered is--plus"> <li>is--plus</li> </ul> ``` */ .list--unordered { padding-left: 20px; padding-left: 1.25rem; list-style-type: none; } .list--unordered li { position: relative; line-height: 24px; line-height: 1.5rem; } .list--unordered li:before { width: 20px; width: 1.25rem; font-size: 10px; font-size: 0.625rem; left: -20px; left: -1.25rem; font-family: 'shopware'; content: "\e6b9"; position: absolute; top: 0; } .list--unordered.is--disc li { position: relative; } .list--unordered.is--disc li:before { width: 20px; width: 1.25rem; font-size: 10px; font-size: 0.625rem; left: -20px; left: -1.25rem; font-family: 'shopware'; content: "\e656"; position: absolute; top: 0; } .list--unordered.is--checked li { position: relative; } .list--unordered.is--checked li:before { width: 20px; width: 1.25rem; font-size: 10px; font-size: 0.625rem; left: -20px; left: -1.25rem; font-family: 'shopware'; content: "\e60c"; position: absolute; top: 0; } .list--unordered.is--arrow-right li { position: relative; } .list--unordered.is--arrow-right li:before { width: 20px; width: 1.25rem; font-size: 10px; font-size: 0.625rem; left: -20px; left: -1.25rem; font-family: 'shopware'; content: "\e60f"; position: absolute; top: 0; } .list--unordered.is--star li { position: relative; } .list--unordered.is--star li:before { width: 20px; width: 1.25rem; font-size: 10px; font-size: 0.625rem; left: -20px; left: -1.25rem; font-family: 'shopware'; content: "\e600"; position: absolute; top: 0; } .list--unordered.is--cross li { position: relative; } .list--unordered.is--cross li:before { width: 20px; width: 1.25rem; font-size: 10px; font-size: 0.625rem; left: -20px; left: -1.25rem; font-family: 'shopware'; content: "\e60d"; position: absolute; top: 0; } .list--unordered.is--tag li { position: relative; } .list--unordered.is--tag li:before { width: 20px; width: 1.25rem; font-size: 10px; font-size: 0.625rem; left: -20px; left: -1.25rem; font-family: 'shopware'; content: "\e640"; position: absolute; top: 0; } .list--unordered.is--plus li { position: relative; } .list--unordered.is--plus li:before { width: 20px; width: 1.25rem; font-size: 10px; font-size: 0.625rem; left: -20px; left: -1.25rem; font-family: 'shopware'; content: "\e689"; position: absolute; top: 0; } .list--unstyled { list-style: none; } .list--inline { list-style: none; } .list--inline li { display: inline; } /* Image slider element ============================================ Defines the styles for the image slider element that is a part of the basic Shopware 5 shopping world elements. The element can be added by using the Shopware 5 backend shopping world editor. The element contains thumbnail image previews, navigation dots and navigation arrows to change the current active image. It contains the viewport specific styles inside media queries. */ .image-slider { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; z-index: 1000; position: relative; } .image-slider:after { content: ""; display: table; clear: both; } .image-slider--container { height: 200px; height: 12.5rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; position: relative; top: 0; left: 0; overflow: hidden; } .image-slider--container .arrow { width: 30px; width: 1.875rem; height: 70px; height: 4.375rem; margin-top: -35px; margin-top: -2.1875rem; line-height: 68px; line-height: 4.25rem; font-size: 16px; 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: #00476b; cursor: pointer; display: none; } .image-slider--container .arrow.is--left { left: 0px; left: 0rem; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; } .image-slider--container .arrow.is--left:before, .image-slider--container .arrow.is--left::before { content: "\e611"; } .image-slider--container .arrow.is--right { right: 0px; right: 0rem; border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; } .image-slider--container .arrow.is--right:before { content: "\e60f"; } .image-slider--container .arrow:hover { color: #00476b; border-color: rgba(0, 71, 107, 0.5); } .image-slider--container.is--dragging .image-slider--item { cursor: move; } .image-slider--slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: block; height: 100%; position: relative; top: 0; left: 0; white-space: nowrap; font-size: 0; -ms-touch-action: pan-y; } .image-slider--slide:after { content: ""; display: table; clear: both; } .image-slider--item { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: inline-block; height: 100%; width: 100%; position: relative; text-align: center; cursor: pointer; } .image-slider--item .image--element { display: inline-block; max-width: 100%; height: 100%; } .image-slider--item .image--media { margin: 0 auto; text-align: center; } .image-slider--dots { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; text-align: center; } .image-slider--thumbnails { height: 70px; height: 4.375rem; top: 440px; top: 27.5rem; display: none; width: 100%; overflow: hidden; white-space: nowrap; position: absolute; left: 0; } .image-slider--thumbnails .image-slider--thumbnails-slide { position: absolute; top: 0; left: 0; } .image-slider--thumbnails .thumbnail--link { width: 70px; width: 4.375rem; height: 70px; height: 4.375rem; padding: 5px 5px 5px 5px; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; line-height: 57px; 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 #dadae5; } .image-slider--thumbnails .thumbnail--link.is--active { border-color: #00476b; } .image-slider--thumbnails .thumbnail--image { display: inline; vertical-align: middle; } .image-slider--thumbnails .thumbnails--arrow { width: 20px; width: 1.25rem; height: 70px; height: 4.375rem; line-height: 70px; line-height: 4.375rem; font-size: 14px; 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: #00476b; border: 1px solid rgba(255, 255, 255, 0.85); cursor: pointer; background: rgba(255, 255, 255, 0.85); } .image-slider--thumbnails .thumbnails--arrow:hover { color: #00476b; border-color: rgba(0, 71, 107, 0.85); } .image-slider--thumbnails .thumbnails--arrow.is--top, .image-slider--thumbnails .thumbnails--arrow.is--bottom { font-size: 8px; font-size: 0.5rem; width: 70px; width: 4.375rem; height: 24px; height: 1.5rem; padding: 2px 0px 0px 0px; padding: 0.125rem 0rem 0rem 0rem; line-height: 18px; line-height: 1.125rem; left: 0; } .image-slider--thumbnails .thumbnails--arrow.is--top { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-clip: padding-box; top: 0; } .image-slider--thumbnails .thumbnails--arrow.is--top::before { content: "\e610"; } .image-slider--thumbnails .thumbnails--arrow.is--bottom { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; bottom: 0; } .image-slider--thumbnails .thumbnails--arrow.is--bottom::before { content: "\e612"; } .image-slider--thumbnails .thumbnails--arrow.is--left { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; width: 24px; width: 1.5rem; top: 0; left: 0; } .image-slider--thumbnails .thumbnails--arrow.is--left::before { content: "\e611"; } .image-slider--thumbnails .thumbnails--arrow.is--right { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; width: 24px; width: 1.5rem; top: 0; right: 0; } .image-slider--thumbnails .thumbnails--arrow.is--right::before { content: "\e60f"; } .image-slider--thumbnails .thumbnails--arrow.is--active { display: block; } @media screen and (min-width: 48em) { .image-slider--container { height: 400px; height: 25rem; } .image-slider--container .arrow { display: block; } } @media screen and (min-width: 64em) { .image-slider--thumbnails { display: block; } .image-slider--container { height: 400px; height: 25rem; margin-bottom: 110px; margin-bottom: 6.875rem; } .image-slider--container.no--thumbnails { margin-bottom: 0; } .image-slider--container.no--image .image-slider--item { cursor: default; } .image-slider--dots { top: 405px; top: 25.3125rem; position: absolute; width: 100%; } } @media screen and (min-width: 78.75em) { .image-slider--container { height: 430px; height: 26.875rem; margin-bottom: 0; } .image-slider--thumbnails { width: 70px; width: 4.375rem; height: 430px; height: 26.875rem; margin: 0px 20px 0px 0px; margin: 0rem 1.25rem 0rem 0rem; position: relative; top: 0; left: 0; float: left; } .image-slider--thumbnails .thumbnail--link { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; display: block; } .image-slider--dots { padding: 10px 0px 10px 90px; padding: 0.625rem 0rem 0.625rem 5.625rem; position: relative; top: auto; display: block; } } /* Image-zoom ==================================================== Defines the styles for the Shopware 5 image-zoom element. It displays a magnifying glass when hovering the article images on the product detail page. The functionality is provided by the `jquery.image-zoom.js` file. */ .js--img-zoom--container { position: relative; top: 0; left: 0; } .js--img-zoom--lens { border-radius: 3px; background-clip: padding-box; display: none; background: rgba(255, 255, 255, 0.4); border: 1px solid #dadae5; position: absolute; top: 0; left: 0; cursor: pointer; } .js--img-zoom--flyout { width: 460px; width: 28.75rem; height: 340px; height: 21.25rem; right: -490px; 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 #dadae5; } .js--img-zoom--title { padding: 5px 20px 5px 20px; padding: 0.3125rem 1.25rem 0.3125rem 1.25rem; font-size: 14px; font-size: 0.875rem; line-height: 16px; line-height: 1rem; background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 100%); color: #fff; font-weight: 700; text-align: center; background: rgba(0, 0, 0, 0.5); } /* Menu scroller ================================== Some styling rules can also be found in the hacks.less! */ .js--menu-scroller { position: relative; } .navigation--list-wrapper { position: relative; overflow: hidden; } .js--menu-scroller--list { max-width: none; overflow-x: scroll; position: relative; white-space: nowrap; left: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .js--menu-scroller--list::-webkit-scrollbar { display: none; } .js--menu-scroller--arrow { width: 22px; width: 1.375rem; height: 37px; height: 2.3125rem; line-height: 36px; line-height: 2.25rem; font-size: 12px; font-size: 0.75rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); top: 1px; top: 0.0625rem; border: 1px solid #dadae5; position: absolute; font-family: 'shopware'; text-align: center; color: #00476b; cursor: pointer; z-index: 750; display: none; } .js--menu-scroller--arrow:hover, .js--menu-scroller--arrow:active { color: #00476b; border-color: #00476b; background: #ffffff; } .js--menu-scroller--arrow.left--arrow { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; border-left: 0 none; left: 0; } .js--menu-scroller--arrow.right--arrow { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; border-right: 0 none; right: 0; } @media screen and (min-width: 78.75em) { .js--menu-scroller--arrow.left--arrow { border-radius: 3px; background-clip: padding-box; border: 1px solid #dadae5; left: 0; } .js--menu-scroller--arrow.left--arrow:hover { border-color: #00476b; } .js--menu-scroller--arrow.right--arrow { border-radius: 3px; background-clip: padding-box; border: 1px solid #dadae5; right: 0; } .js--menu-scroller--arrow.right--arrow:hover { border-color: #00476b; } } /* Filter Panel =========================================== Defines the styling of the filter panel element. The styling includes the collapsed and expanded styling and the panel component properties. ``` <div class="filter-panel"> <div class="filter-panel--flyout"> <label class="filter-panel--title"> Preis </label> <span class="filter-panel--icon"></span> <div class="filter-panel--content"> test test </div> </div> </div> ``` */ .filter-panel { height: 38px; height: 2.375rem; margin-bottom: 10px; margin-bottom: 0.625rem; border-radius: 3px; background-clip: padding-box; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 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 #dadae5; } .filter-panel:hover { border: 1px solid #00476b; background: #FFF; } .filter-panel:hover .filter-panel--icon, .filter-panel:hover .filter-panel--title { color: #00476b; } .filter-panel.is--disabled { background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); opacity: 0.5; border: 1px solid #dadae5; color: #00476b; } .filter-panel.is--disabled:hover { border: 1px solid #dadae5; color: #00476b; } .filter-panel.is--disabled:hover .filter-panel--icon, .filter-panel.is--disabled:hover .filter-panel--title { color: #00476b; } .filter-panel.is--disabled .filter-panel--title { color: #00476b; } .filter-panel.is--collapsed { height: auto; border: 0 none; } .filter-panel.is--collapsed .filter-panel--flyout { height: auto; border: 1px solid #00476b; background: #FFF; overflow: visible; z-index: 800; } .filter-panel.is--collapsed .filter-panel--title { color: #00476b; } .filter-panel.is--collapsed .filter-panel--icon:before { color: #00476b; content: "\e610"; } .filter-panel .flatpickr-wrapper { position: relative; display: block; } .filter-panel .flatpickr-wrapper .flatpickr-calendar.static { top: 45px; 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: 38px; height: 2.375rem; border-radius: 3px; background-clip: padding-box; display: block; width: 100%; overflow: hidden; z-index: 500; } .filter-panel--title { height: 36px; height: 2.25rem; line-height: 36px; line-height: 2.25rem; padding: 0px 30px 0px 10px; padding: 0rem 1.875rem 0rem 0.625rem; margin: 0px 0px 5px 0px; 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: 16px; width: 1rem; height: 16px; height: 1rem; top: 8px; top: 0.5rem; right: 10px; right: 0.625rem; font-size: 6px; font-size: 0.375rem; line-height: 16px; 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: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; } .filter-panel--option-list { padding-bottom: 5px; padding-bottom: 0.3125rem; list-style: none; } .filter-panel--option-list.sub-level { margin: 0px 0px 0px 8px; margin: 0rem 0rem 0rem 0.5rem; padding: 0px 0px 0px 18px; padding: 0rem 0rem 0rem 1.125rem; border-left: 1px solid #dadae5; } .filter-panel--option { display: block; position: relative; } .value-tree--option { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .sub-level .value-tree--option { margin: 0; } .filter-panel--label { padding: 4px 0px 4px 30px; padding: 0.25rem 0rem 0.25rem 1.875rem; line-height: 18px; 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: 10px 0px 5px 0px; padding: 0.625rem 0rem 0.3125rem 0rem; text-align: center; } .filter-panel--range-info .range-info--label { color: #00141f; font-weight: 700; } .filter--date .input-type--date .filter-panel--input { display: block; width: 100%; } .filter-panel--checkbox, .filter-panel--radio { width: 16px; width: 1rem; height: 16px; height: 1rem; padding: 1px 1px 1px 1px; padding: 0.0625rem 0.0625rem 0.0625rem 0.0625rem; border-radius: 3px; background-clip: padding-box; display: inline-block; border: 1px solid #dadae5; cursor: pointer; position: relative; vertical-align: top; } .filter-panel--checkbox:hover, .filter-panel--radio:hover { border-color: #00476b; } .filter-panel--checkbox input[type="checkbox"], .filter-panel--radio input[type="checkbox"] { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .filter-panel--checkbox input[type="checkbox"]:checked ~ .input--state, .filter-panel--radio input[type="checkbox"]:checked ~ .input--state, .filter-panel--checkbox input[type="checkbox"]:checked ~ .checkbox--state, .filter-panel--radio input[type="checkbox"]:checked ~ .checkbox--state { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 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: 12px; width: 0.75rem; height: 12px; height: 0.75rem; line-height: 12px; line-height: 0.75rem; font-size: 7px; font-size: 0.4375rem; display: block; font-family: 'shopware'; font-weight: 500; text-align: center; color: #fff; content: "\e60c"; } .filter-panel--checkbox input[type="checkbox"]:checked ~ .filter-panel--label, .filter-panel--radio input[type="checkbox"]:checked ~ .filter-panel--label { color: #00476b; 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: ; } .filter-panel--checkbox input[type="checkbox"]:disabled ~ .filter-panel--label, .filter-panel--radio input[type="checkbox"]:disabled ~ .filter-panel--label { color: #007ab8; } .filter-panel--checkbox .input--state, .filter-panel--radio .input--state, .filter-panel--checkbox .checkbox--state, .filter-panel--radio .checkbox--state, .filter-panel--checkbox .radio--state, .filter-panel--radio .radio--state { border-radius: 3px; background-clip: padding-box; display: block; width: 100%; height: 100%; position: relative; z-index: 60; } .filter-panel--checkbox.filter-panel--radio, .filter-panel--radio.filter-panel--radio { border-radius: 11px; background-clip: padding-box; } .filter-panel--checkbox input[type="radio"], .filter-panel--radio input[type="radio"] { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .filter-panel--checkbox input[type="radio"]:checked ~ .input--state, .filter-panel--radio input[type="radio"]:checked ~ .input--state, .filter-panel--checkbox input[type="radio"]:checked ~ .radio--state, .filter-panel--radio input[type="radio"]:checked ~ .radio--state { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); } .filter-panel--checkbox input[type="radio"]:checked ~ .filter-panel--label, .filter-panel--radio input[type="radio"]:checked ~ .filter-panel--label { color: #00476b; 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: ; } .filter-panel--checkbox input[type="radio"]:disabled .filter-panel--label, .filter-panel--radio input[type="radio"]:disabled .filter-panel--label { color: #00476b; } .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: 45px; height: 2.8125rem; max-width: 45px; max-width: 2.8125rem; width: 18%; margin: 0 0 2% 2%; display: block; position: relative; float: left; } .input-type--media .option--container .filter-panel--label { padding: 0; } .input-type--media .option--container input.is--disabled ~ label { opacity: 0.2; } .input-type--media .option--container input[type="checkbox"], .input-type--media .option--container input[type="radio"] { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .input-type--media .option--container input[type="checkbox"]:hover ~ .filter-panel--label, .input-type--media .option--container input[type="radio"]:hover ~ .filter-panel--label { border-color: #00476b; } .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: #00476b; } .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: 16px; width: 1rem; height: 16px; height: 1rem; line-height: 16px; line-height: 1rem; font-size: 7px; font-size: 0.4375rem; top: -4px; top: -0.25rem; right: -4px; right: -0.25rem; background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); border-radius: 8px; background-clip: padding-box; display: block; position: absolute; font-family: 'shopware'; font-weight: 500; text-align: center; color: #fff; content: "\e60c"; } .input-type--media .option--container input[type="checkbox"]:disabled .filter-panel--label, .input-type--media .option--container input[type="radio"]:disabled .filter-panel--label { opacity: 0.2; } .filter--multi-selection .option--container:hover .filter-panel--label, .filter--value .option--container:hover .filter-panel--label, .filter--value-tree .option--container:hover .filter-panel--label { color: #00476b; } .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: #00476b; } .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: #dadae5; } .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: 5px; top: 0.3125rem; left: 0px; 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: #dadae5; } .filter-panel--star-rating { height: 90px; height: 5.625rem; margin-bottom: 10px; 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: 220px; 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: 18px; font-size: 1.125rem; } .filter-panel--star-rating .rating-star--outer-container .icon--star { color: #f1c40f; } .filter-panel--star-rating .rating-star--outer-container .icon--star-empty { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #dadae5; } .filter-panel--star-rating .rating-star--outer-container .rating-star--suffix { margin-left: 5px; 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: #00476b; } .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: #00476b; } .filter-panel--star-rating .rating-star--outer-container:hover .rating-star--suffix { color: #00476b; } .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: #00476b; } .filter--set-title { margin: 30px 0px 10px 0px; margin: 1.875rem 0rem 0.625rem 0rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; margin-left: 1%; margin-right: 1%; border-bottom: 1px solid #dadae5; clear: both; } .filter--value { background: #fff; } .filter--value .filter-panel--input { top: 10px; top: 0.625rem; left: 10px; left: 0.625rem; } .filter--value .filter-panel--title { padding: 0px 30px 0px 40px; padding: 0rem 1.875rem 0rem 2.5rem; } .filter--value.is--disabled .filter-panel--input:hover { border-color: #dadae5; } .filter--range .filter-panel--content { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; } .filter--active-container { padding: 20px 0px 0px 0px; padding: 1.25rem 0rem 0rem 0rem; } .filter--active, .search--cat-filter .cat-filter--reset { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; margin: 0px 10px 10px 0px; margin: 0rem 0.625rem 0.625rem 0rem; line-height: 24px; line-height: 1.5rem; font-size: 13px; font-size: 0.8125rem; border-radius: 3px; background-clip: padding-box; display: inline-block; border: 1px solid #dadae5; color: #00476b; background: #FFF; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .filter--active .filter--active-icon { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; font-size: 8px; font-size: 0.5rem; top: -1px; top: -0.0625rem; position: relative; font-family: 'shopware'; color: #00476b; } .filter--active .filter--active-icon:before { content: "\e60d"; } .filter--active .icon--star { color: #f1c40f; } .filter--active .icon--star-empty { color: #00476b; } .filter--active:hover, .filter--active[data-filter-param="reset"] { color: #00476b; border-color: #00476b; } .filter--active:hover .filter--active-icon, .filter--active[data-filter-param="reset"] .filter--active-icon { color: #00476b; } .action--filter-options.off-canvas.is--open .filter--active { max-width: 100%; } .filter--actions { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; margin-bottom: 10px; 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: 14px; font-size: 0.875rem; line-height: 16px; line-height: 1rem; margin: -8px 0px 0px 0px; 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: 10px 0px 0px 0px; 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: 15px 0px 5px 0px; 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: 32px; line-height: 2rem; margin: 0px 10px 10px 0px; 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; } @media screen and (min-width: 48em) { .filter-panel { width: 49%; margin-left: 1%; float: left; } .filter-panel.is--collapsed { height: 38px; 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: 200px; 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: #00476b; border-color: #dadae5; 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: #00476b; } .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: 200px; 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: 20px; width: 1.25rem; height: 20px; height: 1.25rem; } .filter-panel--star-rating .rating-star--label { width: 20px; width: 1.25rem; height: 20px; height: 1.25rem; line-height: 20px; line-height: 1.25rem; font-size: 20px; font-size: 1.25rem; } .listing--wrapper.has--sidebar-filter .action--sort .sort--label { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; display: inline-block; font-weight: 700; } } /* Range Slider ========================================== ######Range Slider The range slider element lets the user filter elements by a price-span they decide on. The slider handlers can be dragged to the numeric value that the user intends. The value is displayed below the element. The functionality is provided by the `jquery.range-slider.js` file. ``` <div class="range-slider" data-range-slider="true" data-startmin="37.99" data-startmax="349.99" data-rangemin="37.99" data-rangemax="349.99"> <div class="range-slider--container"> <div class="range-slider--range-bar" style="left: 0%; width: 100%;"> <div class="range-slider--handle is--min"></div> <div class="range-slider--handle is--max"></div> </div> </div> <input type="hidden" id="min" name="min" data-range-input="min" value="37.99" disabled="disabled"> <input type="hidden" id="max" name="max" data-range-input="max" value="349.99" disabled="disabled"> <div class="range-slider--currency" data-range-currency="0,00 €"></div> <div class="filter-panel--range-info"> <span class="range-info--min">von</span> <label class="range-info--label" for="min" data-range-label="min">35,00 €</label> <span class="range-info--max">bis</span> <label class="range-info--label" for="max" data-range-label="max">350,00 €</label> </div> </div> ``` */ .range-slider { -webkit-touch-callout: none; } .range-slider--container { height: 12px; height: 0.75rem; border-radius: 6px; background-clip: padding-box; display: block; width: 100%; background: ; box-shadow: inset 0 1px 1px #f0f0f0; border: 1px solid #dadae5; -ms-touch-action: none; } .range-slider--range-bar { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: inset 0 0 3px #004467; height: 100%; width: 100%; position: relative; background: #00476b; } .range-slider--handle { width: 20px; width: 1.25rem; height: 20px; height: 1.25rem; border-radius: 3px; background-clip: padding-box; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, 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 #dadae5; cursor: pointer; } .range-slider--handle.is--min { left: -10px; left: -0.625rem; top: -4px; top: -0.25rem; } .range-slider--handle.is--max { right: -10px; right: -0.625rem; top: -4px; top: -0.25rem; } .range-slider--handle:hover, .range-slider--handle.is--dragging { border-color: #00476b; } .range-slider--format { display: none; } /* Datepicker ========================================= The datepicker is a calendar overlay tool that simplyfies the selection of dates for input elements. It creates a calendar widget that simplifies the selection of dates for date input elements. The datepicker is based on the jQuery Plugin [flatpickr](https://github.com/chmln/flatpickr). */ .flatpickr-calendar { width: 315px; width: 19.6875rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; 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: 640px; 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: 2px; top: 0.125rem; display: block; position: relative; } .flatpickr-calendar.static { position: absolute; top: calc(102%); } .flatpickr-calendar.static.open { z-index: 999; display: block; } .flatpickr-calendar.hasWeeks { width: auto; } .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { height: 40px; height: 2.5rem; border-top: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; } .flatpickr-calendar:before, .flatpickr-calendar:after { left: 22px; 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: 22px; right: 1.375rem; left: auto; } .flatpickr-calendar:before { margin: 0px -5px 0px -5px; margin: 0rem -0.3125rem 0rem -0.3125rem; border-width: 5px; } .flatpickr-calendar:after { margin: 0px -4px 0px -4px; 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: 40px; height: 2.5rem; line-height: 24px; 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: 16px; height: 1rem; line-height: 16px; line-height: 1rem; top: 15px; top: 0.9375rem; text-decoration: none; cursor: pointer; position: absolute; } .flatpickr-prev-month i, .flatpickr-next-month i { position: relative; } .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-next-month.flatpickr-prev-month { /*rtl:begin:ignore*/ left: calc(2.07%); /*rtl:end:ignore*/ } .flatpickr-prev-month.flatpickr-next-month, .flatpickr-next-month.flatpickr-next-month { /*rtl:begin:ignore*/ right: calc(2.07%); /*rtl:end:ignore*/ } .flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: #959ea9; } .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #f64747; } .flatpickr-prev-month svg, .flatpickr-next-month svg { width: 14px; 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: 14px; width: 0.875rem; padding: 0px 4px 0px 2px; 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: 10px; top: 0.625rem; font-size: 135%; line-height: inherit; font-weight: 500; color: inherit; position: absolute; width: 75%; left: 12.5%; display: inline-block; text-align: center; } .flatpickr-current-month span.cur-month { margin-right: 10px; 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: 70px; width: 4.375rem; display: inline-block; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month input.cur-year { background: transparent; box-sizing: border-box; color: inherit; cursor: default; padding: 0 0 0 0.5ch; margin: 0; display: inline; font-size: inherit; font-family: inherit; font-weight: 500; line-height: inherit; height: initial; border: 0; border-radius: 0; vertical-align: initial; } .flatpickr-current-month input.cur-year:focus { outline: 0; } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgba(0, 0, 0, 0.5); background: transparent; pointer-events: none; } .flatpickr-weekdays { background: transparent; text-align: center; overflow: hidden; } .flatpickr-days, .flatpickr-weeks { padding: 1px 0px 0px 0px; padding: 0.0625rem 0rem 0rem 0rem; } .flatpickr-days { width: 315px; 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: 40px; line-height: 2.5rem; height: 40px; height: 2.5rem; border-radius: 3px; background-clip: padding-box; background: none; border: 0 none; margin: 0; box-sizing: border-box; color: #00476b; cursor: pointer; font-weight: 500; width: 14.2857143%; flex-basis: 14.2857143%; display: inline-block; position: relative; justify-content: center; text-align: center; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange { cursor: pointer; outline: 0; background: #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: #00476b; color: #fff; border-color: #00476b; } .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: 24px; line-height: 1.5rem; cursor: default; font-size: 90%; color: #00141f; height: 27.333333333333332px; margin: 0; background: transparent; text-align: center; display: block; float: left; width: 14.28%; font-weight: 700; padding-top: 3.333333333333333px; } .rangeMode .flatpickr-day { margin-top: 1px; margin-top: 0.0625rem; } .flatpickr-weekwrapper { display: inline-block; float: left; } .flatpickr-weekwrapper .flatpickr-weeks { padding: 1px 12px 0px 12px; 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: 40px; line-height: 2.5rem; max-height: 40px; 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: 40px; height: 2.5rem; flex: 1; width: 40%; float: left; } .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #8ed300; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #8ed300; } .flatpickr-time.hasSeconds .numInputWrapper { width: 26%; } .flatpickr-time.time24hr .numInputWrapper { width: 49%; } .flatpickr-time input { font-size: 14px; 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: #00476b; position: relative; box-sizing: border-box; text-align: center; } .flatpickr-time input::-ms-clear, .flatpickr-time input::-ms-expand { display: none; } .flatpickr-time input.flatpickr-hour { font-weight: 700; } .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { font-weight: 500; } .flatpickr-time input:focus { outline: 0; border: 0; } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { -webkit-user-select: none; user-select: none; height: inherit; display: inline-block; float: left; line-height: inherit; color: #00476b; font-weight: 700; width: 2%; } .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 500; } .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: #f0f0f0; } .hasWeeks .flatpickr-days, .hasTime .flatpickr-days { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .hasWeeks .flatpickr-days { border-left: 0; } @media all and (-ms-high-contrast: none) { .flatpickr-month svg { top: 0 !important; } } .flatpickr-input[readonly] { cursor: pointer; } @-moz-keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } } @-webkit-keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } } @-o-keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } } @keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; transform: none; } } /* Collapse cart ======================================= The collapse cart element is an alternative to the offcanvas shopping cart inside Shopware 5. The collapse cart displays a shopping cart dropdown element similar to the default Shopware 4 cart. The Settings can be modified in the backend theme manager. The collapse cart element contains the current items in the users shopping cart and the subtotal price amount. */ .container--ajax-cart { top: 50px; top: 3.125rem; margin-right: 10px; margin-right: 0.625rem; padding: 15px 0px 0px 0px; padding: 0.9375rem 0rem 0rem 0rem; position: absolute; text-align: left; right: 0; z-index: 3000; display: none; } .container--ajax-cart.off-canvas { width: 280px; width: 17.5rem; -webkit-transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); transition: all 0.45s cubic-bezier(0.3, 0, 0.15, 1); margin-right: 0; display: block; height: 100%; left: auto; position: fixed; top: 0; padding: 0; background: #fff; z-index: 8000; } .container--ajax-cart.off-canvas .icon--loading-indicator { width: 38px; width: 2.375rem; height: 38px; height: 2.375rem; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } .container--ajax-cart .icon--loading-indicator { width: 21px; width: 1.3125rem; height: 21px; height: 1.3125rem; padding: 20px 0px 20px 0px; padding: 1.25rem 0rem 1.25rem 0rem; margin: 0 auto; display: block; position: relative; box-sizing: content-box; } .container--ajax-cart .icon--loading-indicator:before { border-radius: 100%; background-clip: padding-box; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; width: 100%; height: 100%; box-sizing: border-box; display: block; content: ""; border: 2px solid #CCC; border-top: 2px solid #333; } .container--ajax-cart .product--essential-features { margin-left: 48px; margin-left: 3rem; } .ajax--cart { width: 450px; width: 28.125rem; border-radius: 3px; background-clip: padding-box; font-size: 14px; font-size: 0.875rem; border: 1px solid #dadae5; position: relative; background: #fff; } .ajax--cart:after, .ajax--cart:before { right: 10px; right: 0.625rem; bottom: 100%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .ajax--cart:after { right: 11px; right: 0.6875rem; border-width: 9px; border-width: 0.5625rem; border-bottom-color: #fff; } .ajax--cart:before { border-width: 10px; border-width: 0.625rem; border-bottom-color: #dadae5; } .ajax--cart .content--loader { width: 21px; width: 1.3125rem; height: 21px; height: 1.3125rem; padding: 20px 0px 20px 0px; padding: 1.25rem 0rem 1.25rem 0rem; box-sizing: content-box; margin: 0 auto; } .ajax--cart .item--container { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; max-height: 353px; max-height: 22.0625rem; overflow-y: auto; } .ajax--cart .alert { border-radius: 0; margin-bottom: 10px; 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: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; line-height: 38px; line-height: 2.375rem; border-bottom: 1px solid #dadae5; 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: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; width: 38px; width: 2.375rem; height: 38px; 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 #dadae5; 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: 14px; width: 0.875rem; display: block; position: absolute; height: 100%; top: 0; left: 0; background: #00476b; } .ajax--cart .cart--item .thumbnail--container .cart--badge .badge--free { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 8px; font-size: 0.5rem; line-height: 12px; line-height: 0.75rem; width: 40px; 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: 37px; line-height: 2.3125rem; font-size: 12px; font-size: 0.75rem; border-radius: 100%; background-clip: padding-box; height: 35px; height: 2.1875rem; width: 35px; width: 2.1875rem; margin: 0 auto; text-align: center; font-weight: 700; background: #00476b; color: #fff; } .ajax--cart .cart--item .thumbnail--container .basket--badge .icon--arrow-right { font-size: 10px; font-size: 0.625rem; } .ajax--cart .cart--item .thumbnail--container .basket--badge .icon--coupon { font-size: 20px; font-size: 1.25rem; line-height: 37px; 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: #00476b; } .ajax--cart .cart--item .item--quantity { margin: 0px 5px 0px 0px; 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: 21px; width: 1.3125rem; height: 21px; height: 1.3125rem; margin: 10px 0px 0px 10px; margin: 0.625rem 0rem 0rem 0.625rem; line-height: 1; float: right; } .ajax--cart .cart--item .action--container .btn { height: 21px; height: 1.3125rem; width: 21px; width: 1.3125rem; padding: 4px 5px 4px 5px; padding: 0.25rem 0.3125rem 0.25rem 0.3125rem; font-size: 8px; font-size: 0.5rem; line-height: 14px; line-height: 0.875rem; } .ajax--cart .cart--item .action--container *[class*="icon--"] { margin: 0; padding: 0; } .ajax--cart .prices--container { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; border-top: 1px solid #dadae5; } .ajax--cart .prices--container .prices--articles-amount { float: right; } .ajax--cart .prices--container .prices--articles { color: #00141f; font-weight: 700; } .ajax--cart .prices--container .prices--tax { font-size: 12px; font-size: 0.75rem; margin: 0; } .ajax--cart .button--container { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; overflow: hidden; } .ajax--cart .button--container *[class*="button--"] { width: 210px; 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: 12px; font-size: 0.75rem; } .ajax--cart .small--information .small--prices { float: right; } .ajax--cart .context--shipping-costs { margin-left: 10px; margin-left: 0.625rem; } .ajax--cart .table--shipping-costs-trigger { font-size: 12px; font-size: 0.75rem; margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; font-weight: 700; } .ajax--cart .table--shipping-costs { font-size: 12px; font-size: 0.75rem; } .ajax--cart .table--shipping-costs .select-field { max-height: 40px; max-height: 2.5rem; margin: 5px 10px 5px 0px; margin: 0.3125rem 0.625rem 0.3125rem 0rem; } .ajax--cart .table--shipping-costs label { font-size: 12px; font-size: 0.75rem; font-weight: 700; margin: 5px 100px 0px 0px; margin: 0.3125rem 6.25rem 0rem 0rem; float: left; } .off-canvas .ajax--cart { font-size: 14px; font-size: 0.875rem; background: #fff; width: auto; position: absolute; left: 0; right: 0; border: 0 none; min-height: 100%; } .off-canvas .ajax--cart .item--container { max-height: none; } .off-canvas .ajax--cart .cart--item { line-height: 19px; line-height: 1.1875rem; } .off-canvas .ajax--cart .cart--item .item--link { width: 149px; 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: 38px; width: 2.375rem; height: 38px; height: 2.375rem; } .off-canvas .ajax--cart .action--container { margin: 0; } .off-canvas .ajax--cart .action--container .action--remove { font-size: 14px; font-size: 0.875rem; text-align: center; vertical-align: middle; } .off-canvas .ajax--cart .action--container .icon--loading-indicator { width: 21px; width: 1.3125rem; height: 21px; height: 1.3125rem; margin: 9px 0px 0px 0px; margin: 0.5625rem 0rem 0rem 0rem; position: relative; margin-left: auto; margin-right: auto; } .off-canvas .ajax--cart .action--container *[class*="icon--"] { line-height: 28px; 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: 10px 0px 0px 0px; 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: 30px; padding-right: 1.875rem; } .off-canvas .ajax--cart .button--container .button--open-basket *[class^="icon--"] { display: block; right: 10px; right: 0.625rem; } .off-canvas .ajax--cart .product--essential-features { margin-top: 5px; margin-top: 0.3125rem; } .product--essential-features { line-height: 18px; line-height: 1.125rem; font-size: 12px; font-size: 0.75rem; } @media screen and (min-width: 48em) { .container--ajax-cart.is--shown { display: block; } } @media screen and (min-width: 78.75em) { .container--ajax-cart { margin-right: 0; } } /* Table ========================= Defines the basic table styles. ``` <table> <th> <tr> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>Heading</th> </tr> </th> <tb> <tr> <td>Table Content</td> <td>Table Content</td> <td>Table Content</td> <td>Table Content</td> </tr> <tr> <td>Table Content</td> <td>Table Content</td> <td>Table Content</td> <td>Table Content</td> </tr> </tb> </table> ``` */ table { border-collapse: separate; border-spacing: 1px; } table th, table thead td { background: #8ed300; color: #ffffff; font-weight: 700; text-align: center; } table td { padding: 5px 10px 5px 10px; padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; background: #ffffff; color: #8ed300; border: 1px solid #ffffff; } table tr:nth-child(even) td { background: #f5f5f5; } /* Checkboxes ========================================== ######Checkboxes elements Changes the default Checkboxes to custom-themed ones that contain the Shopware color variables. The checkboxes can be used in a `span` element containing an `input` tag or inside a anchor element. (Example inside a panel element) ``` <div class="panel"> <div class="panel--body"> <span class="checkbox"> <input type="checkbox" /> <span class="checkbox--state"></span> </span> Option (actual checkbox)<br/> <span class="checkbox"> <input type="checkbox" /> <span class="checkbox--state"></span> </span> Option (actual checkbox)<br/> <a href="#"> <span class="checkbox"> <span class="checkbox--state"></span> </span> </a> Option (inside a link)<br/> <a href="#"> <span class="checkbox"> <span class="checkbox--state"></span> </span> </a> Option (inside a link)<br/> </div> </div> ``` */ .checkbox { width: 16px; width: 1rem; height: 16px; height: 1rem; padding: 1px 1px 1px 1px; padding: 0.0625rem 0.0625rem 0.0625rem 0.0625rem; line-height: 16px; line-height: 1rem; border-radius: 3px; background-clip: padding-box; display: inline-block; position: relative; vertical-align: middle; border: 1px solid #dadae5; cursor: pointer; } .checkbox .checkbox--state { border-radius: 3px; background-clip: padding-box; display: block; width: 100%; height: 100%; position: relative; z-index: 60; } .checkbox input[type="checkbox"] { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0 none; background: none; cursor: pointer; z-index: 65; } .checkbox input[type="checkbox"]:checked ~ .checkbox--state { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); } .checkbox input[type="checkbox"]:checked ~ .checkbox--state:before { width: 12px; width: 0.75rem; height: 12px; height: 0.75rem; line-height: 12px; line-height: 0.75rem; font-size: 7px; font-size: 0.4375rem; display: inline-block; font-family: 'shopware'; font-weight: 500; text-align: center; vertical-align: top; color: #fff; content: "\e60c"; } .checkbox input[type="checkbox"]:disabled ~ .checkbox--state { background: ; } .checkbox.is--active .checkbox--state, a:hover .checkbox .checkbox--state { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); } .checkbox.is--active .checkbox--state:before, a:hover .checkbox .checkbox--state:before { width: 12px; width: 0.75rem; height: 12px; height: 0.75rem; line-height: 12px; line-height: 0.75rem; font-size: 7px; font-size: 0.4375rem; display: inline-block; font-family: 'shopware'; font-weight: 500; text-align: center; vertical-align: top; color: #fff; content: "\e60c"; } /* Off-canvas menu button ======================================= Defines the styling of the off-canvas menu trigger button that is used for the shopping off-canvas cart. The Shopware 5 off-canvas menu can be enabled/disabled inside the Shopware backend. The functionality is provided by the `jquery.off-canvas-button.js` file. */ .js--off-canvas-button { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; margin-bottom: 10px; margin-bottom: 0.625rem; border-radius: 3px; background-clip: padding-box; position: relative; border: 1px solid #dadae5; cursor: pointer; display: block; } .js--off-canvas-button .tab--header { margin-bottom: 10px; margin-bottom: 0.625rem; position: relative; } .js--off-canvas-button .tab--title:after { font-size: 12px; font-size: 0.75rem; right: 5px; right: 0.3125rem; margin-top: -6px; margin-top: -0.375rem; content: "\e60f"; } .js--off-canvas-button .tab--preview { display: block; } .js--off-canvas-button .tab--preview p:last-child { margin-bottom: 0; } .js--off-canvas-button .tab--content { cursor: default; } .js--off-canvas-button:hover .tab--title { color: #00476b; } /* Tab-menu ========================================== The Shopware tab-menu allows the creation of multiple tabs filled with content that the user can swtich between. The functionality is provided by the `jquery.tab-menu.js` file. <div class="tab-menu--product js--tab-menu"> <div class="tab--navigation"> <a href="#" class="tab--link is--active" title="Tab-1">First Tab</a> <a href="#" class="tab--link" title="Tab-2">Second Tab</a> </div> <div class="tab--container-list"> <div class="tab--container is--active"> </div> <div class="tab--container"> </div> </div> </div> */ .js--tab-menu .tab--navigation { list-style: none; } .js--tab-menu .tab--link { padding: 10px 15px 10px 15px; padding: 0.625rem 0.9375rem 0.625rem 0.9375rem; margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; line-height: 24px; line-height: 1.5rem; font-size: 14px; font-size: 0.875rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 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: 1px; top: 0.0625rem; display: none; position: relative; font-weight: 700; text-align: center; color: #00476b; border: 1px solid #dadae5; white-space: nowrap; } .js--tab-menu .tab--link:hover { color: #00476b; background: #fff; } .js--tab-menu .tab--link:focus { outline: none; } .js--tab-menu .tab--link.is--active { color: #00141f; border-bottom-color: #fff; background: #fff; } .js--tab-menu .tab--link.is--active:hover { color: #00141f; } .js--tab-menu .tab--link.has--content { display: inline-block; } .js--tab-menu.js--menu-scroller .tab--navigation { overflow: hidden; } .js--tab-menu.js--menu-scroller .tab--navigation .js--menu-scroller--item { top: 0; } .js--tab-menu.js--menu-scroller .js--menu-scroller--arrow { line-height: 46px; line-height: 2.875rem; height: 46px; height: 2.875rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #dadae5; } .js--tab-menu.js--menu-scroller .js--menu-scroller--arrow:hover { border-color: #00476b; } .js--tab-menu .tab--container-list .tab--container { border: 1px solid #dadae5; display: none; } .js--tab-menu .tab--container-list .tab--container.has--content.is--active { display: block; } /* Image gallery element ==================================================== Defines the styles for the image gallery element that shows thumbnails of the product pictures in a slim slider element. It is displayed on the product detail page. */ .image--gallery .image-slider--container { bottom: 90px; bottom: 5.625rem; position: absolute; top: 0; left: 0; right: 0; height: auto; margin: 0; } .image--gallery.no--thumbnails .image-slider--container { bottom: 0; } .image--gallery .image-slider--item { display: inline-block; height: 100%; width: 100%; position: relative; text-align: center; cursor: default; } .image--gallery .image-slider--item .image--element { display: block; max-width: 100%; height: auto; width: auto; } .image--gallery .image-slider--item .image--media, .image--gallery .image-slider--item img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .image--gallery .image-slider--thumbnails { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; height: 90px; height: 5.625rem; background: #fff; top: auto; bottom: 0; width: 100%; margin: 0; position: absolute; display: block; } .image--gallery .image-slider--thumbnails .thumbnails--arrow { top: 10px; top: 0.625rem; } .image--gallery .image-slider--thumbnails .thumbnails--arrow.is--left { border-left: 0 none; } .image--gallery .image-slider--thumbnails .thumbnails--arrow.is--right { border-right: 0 none; } .image--gallery .image-slider--thumbnails-slide { margin: 0px 10px 0px 10px; margin: 0rem 0.625rem 0rem 0.625rem; left: auto; top: auto; } .image--gallery .thumbnail--link { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; display: inline-block; } .image--gallery .button--zoom-in, .image--gallery .button--zoom-out, .image--gallery .button--zoom-reset { top: 10px; top: 0.625rem; left: 10px; left: 0.625rem; font-size: 20px; font-size: 1.25rem; padding: 2px 6px 2px 6px; padding: 0.125rem 0.375rem 0.125rem 0.375rem; position: absolute; } .image--gallery .button--zoom-in:hover, .image--gallery .button--zoom-out:hover, .image--gallery .button--zoom-reset:hover { z-index: 1; } .image--gallery .button--zoom-out { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; } .image--gallery .button--zoom-reset { left: 43px; left: 2.6875rem; border-radius: 0; } .image--gallery .button--zoom-in { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; left: 76px; left: 4.75rem; } .image-gallery--modal .modal--close { top: 10px; top: 0.625rem; width: 34px; width: 2.125rem; height: 34px; height: 2.125rem; line-height: 32px; line-height: 2rem; } @media screen and (min-width: 78.75em) { .js--image-gallery { width: 80%; height: 80%; } } /* Product quick-view ====================================== Defines the styling of the product quick-view page. The product quick-view is an element during the checkout process in Shopware 5 that displays the user the important information of his product without having to switch to the product detail page and interrupt the checkout. */ .product--quick-view { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .product--quick-view .quick-view--image { height: 200px; height: 12.5rem; border-radius: 3px; background-clip: padding-box; margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; border: 1px solid #dadae5; width: 100%; display: block; position: relative; float: left; } .product--quick-view .quick-view--image img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .product--quick-view .quick-view--title { font-size: 18px; font-size: 1.125rem; color: #5b8600; display: block; font-weight: 700; } .product--quick-view .quick-view--title:hover { color: #00476b; } .product--quick-view .quick-view--supplier { font-size: 14px; font-size: 0.875rem; padding: 10px 0px 5px 0px; padding: 0.625rem 0rem 0.3125rem 0rem; font-weight: 700; } .product--quick-view .quick-view--description-title { font-size: 16px; font-size: 1rem; padding-bottom: 5px; padding-bottom: 0.3125rem; margin-top: 15px; margin-top: 0.9375rem; color: #5b8600; border-bottom: 1px solid #dadae5; font-weight: 700; clear: both; } .product--quick-view .quick-view--description { font-size: 14px; font-size: 0.875rem; padding-top: 10px; padding-top: 0.625rem; color: #8ed300; } .product--quick-view .quick-view--description, .product--quick-view .quick-view--description > p { margin: 0; } @media screen and (min-width: 30em) { .product--quick-view { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .product--quick-view .quick-view--image { width: 50%; } .product--quick-view .quick-view--header { padding-left: 20px; padding-left: 1.25rem; width: 50%; float: right; } .product--quick-view .quick-view--description-title { margin-top: 0; } } /* Hidden Captcha ====================================== Hides a form field so a human will omit it while a bot still fills it in and thus identifies as bot. Is used to hide the label as well. */ .c-firstname-confirmation { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Modules ================================================== The `modules.less` file contains the imports to all module elements of Shopware. Mixin specific documentation can be found inside each mixin file. */ /* Global ========================================== Defines the global styles of Shopware. It contains the global modifier classes that help working with the Shopware elements and the typographic styles. ######Global modifier classes Add a `is--` class to an element to easily change the properties. `.is--rounded` - changes the border-radius to 3pxgi<br/> `.is--block` - sets element to display: block<br/> `.is--inline` - sets element to display: inline<br/> `.is--inline-block` - sets element to display: inline-block<br/> `.is--hidden` - sets element to display: none<br/> `.is--invisible` - sets element to visibility: none<br/> `.is--align-left` - sets element to text-align: left;<br/> `.is--align-right` - sets element to text-align: right<br/> `.is--align-center` - sets element to text-align: center<br/> `.is--underline` - sets element to text-decoration: underline<br/> `.is--line-through` - sets element to text-decoration: line-through<br/> `.is--uppercase` - sets element to text-transform: uppercase<br/> `.is--strong` - sets element to font-weight: @font-bold-weight<br/> `.is--bold` - sets element to font-weight: @font-bold-weight<br/> `.is--italic` - sets element to font-style: italic<br/> `.is--nowrap` - sets element to white-space: nowrap<br/> `.is--dark` - changes color to @text-color-dark<br/> `.is--light` - changes color to darken(@gray-dark, 20%)<br/> `.is--soft` - changes color to @gray-dark<br/> */ * { box-sizing: border-box; } html { width: 100%; height: 100%; } html.no--scroll { position: relative; overflow: hidden; } html.no--scroll body { overflow: hidden; } body { font-size: 14px; font-size: 0.875rem; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 500; color: #00476b; background: ; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; max-height: 100%; height: auto; } a { color: #00476b; text-decoration: none; } ul { margin: 0; padding: 0; } .product--rating i[class^=icon] { color: #f1c40f; } .product--rating i.icon--star-empty { color: #dadae5; } h1, h2, h3, h4, h5, h6 { line-height: 26px; line-height: 1.625rem; margin: 28px 0px 10px 0px; margin: 1.75rem 0rem 0.625rem 0rem; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 700; color: #00141f; } h1 { font-size: 26px; font-size: 1.625rem; line-height: 28px; line-height: 1.75rem; margin: 34px 0px 20px 0px; margin: 2.125rem 0rem 1.25rem 0rem; color: #00141f; } h2 { font-size: 21px; font-size: 1.3125rem; } h3 { font-size: 18px; font-size: 1.125rem; } h4 { font-size: 16px; font-size: 1rem; } h5 { font-size: 14px; font-size: 0.875rem; } h6 { font-size: 12px; font-size: 0.75rem; } p { font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } blockquote { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; border-radius: 3px; background-clip: padding-box; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); background: #f5f5f8; text-align: left; margin: 0; } .ajax-loader { display: none; } .is--rounded { border-radius: 3px; background-clip: padding-box; } .is--block { display: block !important; } .is--inline { display: inline !important; } .is--inline-block { display: inline-block !important; } .is--hidden { display: none !important; } .is--invisible { visibility: hidden !important; } .is--align-left { text-align: left !important; } .is--align-right { text-align: right !important; } .is--align-center { text-align: center !important; } .is--underline { text-decoration: underline !important; } .is--line-through { text-decoration: line-through !important; } .is--uppercase { text-transform: uppercase !important; } .is--strong { font-weight: 700 !important; } .is--bold { font-weight: 700 !important; } .is--italic { font-style: italic; } .is--nowrap { white-space: nowrap !important; } .is--dark { color: #00141f !important; } .is--light { color: #9e9ebb !important; } .is--soft { color: #dadae5 !important; } .is--fluid { width: 100% !important; } .left { float: left; } .right { float: right; } ::-moz-placeholder { color: #00476b; } ::-webkit-input-placeholder { color: #00476b; } :-ms-input-placeholder { color: #00476b; } .page-wrap { min-width: 320px; min-width: 20rem; } .content-main:after, .content--wrapper:after { content: ""; display: table; clear: both; } .content-main--inner { padding: 0px 10px 16px 10px; padding: 0rem 0.625rem 1rem 0.625rem; } .content-main--inner:after { content: ""; display: table; clear: both; } .content { width: 100%; float: left; } @media screen and (min-width: 48em) { .content-main { box-shadow: 0 0 4px 1px #dadae5; } .content-main:not(.is--small) { min-height: 750px; min-height: 46.875rem; } .content-main--inner { padding: 0px 30px 16px 30px; padding: 0rem 1.875rem 1rem 1.875rem; width: 100%; } } @media screen and (min-width: 78.75em) { .content-main { margin-top: 20px; margin-top: 1.25rem; margin-bottom: 45px; margin-bottom: 2.8125rem; } .content-main:not(.is--small) { min-height: 700px; min-height: 43.75rem; } .content-main--inner { padding: 0px 50px 50px 50px; padding: 0rem 3.125rem 3.125rem 3.125rem; } } /* Header ========================================== Defines the styles of the Shopware storeview header and its components. It contains the viewport specific styles inside media queries. The header sizes are defined by the unitize mixin. More precise designations are commented inside the document. */ .header-main { padding-bottom: 10px; padding-bottom: 0.625rem; background: #fff; border-bottom: 1px solid #00476b; } .header-main .top-bar { display: none; } .header-main .logo-main { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .header-main .logo-main .logo--link { height: 35px; height: 2.1875rem; display: inline-block; max-width: 100%; } .header-main .logo-main .logo--shop { height: 35px; 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 #00476b; } .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: 10px; 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: 10px; 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: 5px; margin-right: 0.3125rem; display: inline-block; } .shop--navigation .navigation--entry .btn { height: 40px; height: 2.5rem; width: 40px; width: 2.5rem; vertical-align: middle; } .shop--navigation .navigation--entry .cart--link { padding: 2px 10px 2px 6px; padding: 0.125rem 0.625rem 0.125rem 0.375rem; } .shop--navigation .navigation--entry .account--link { padding: 2px 10px 2px 8px; padding: 0.125rem 0.625rem 0.125rem 0.5rem; } .shop--navigation .navigation--entry .account--link.account--user-loggedin:after { width: 16px; width: 1rem; height: 16px; height: 1rem; top: -5px; top: -0.3125rem; right: -5px; right: -0.3125rem; line-height: 18px; line-height: 1.125rem; font-size: 8px; 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: 21px; font-size: 1.3125rem; display: inline; position: relative; vertical-align: middle; top: 0; left: 0; } .shop--navigation .navigation--entry .icon--heart { font-size: 18px; font-size: 1.125rem; vertical-align: middle; } .shop--navigation .navigation--entry .icon--search { font-size: 22px; font-size: 1.375rem; vertical-align: middle; } .shop--navigation .cart--quantity, .shop--navigation .notes--quantity { top: -4px; top: -0.25rem; left: 23px; 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: #00476b; border-color: #00476b; } .shop--navigation .entry--account { position: relative; } .shop--navigation .entry--cart { margin-right: 12px; 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: 48px; padding-left: 3rem; line-height: 35px; line-height: 2.1875rem; font-size: 17px; font-size: 1.0625rem; height: 40px; height: 2.5rem; color: #8ed300; width: auto; background: 0 none; border: 0 none; } .shop--navigation .entry--menu-left .icon--menu { font-size: 20px; font-size: 1.25rem; } .main-search--form { padding: 10px 10px 10px 10px; 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: 9px 38px 9px 9px; padding: 0.5625rem 2.375rem 0.5625rem 0.5625rem; height: 40px; 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: 10px; top: 0.625rem; bottom: 10px; bottom: 0.625rem; right: 10px; right: 0.625rem; font-size: 20px; font-size: 1.25rem; padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; line-height: 1; position: absolute; z-index: 2; border: 0 none; background: transparent; color: #00476b; 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: 9px; padding-top: 0.5625rem; padding-left: 23px; padding-left: 1.4375rem; padding-bottom: 9px; padding-bottom: 0.5625rem; line-height: 20px; line-height: 1.25rem; position: relative; color: #00476b; font-weight: 500; } .account--menu.is--personalized .navigation--link.navigation--personalized:before, .account--menu.is--personalized .navigation--link.navigation--personalized::before { width: 16px; width: 1rem; height: 16px; height: 1rem; left: 2px; left: 0.125rem; content: "\e614"; font-family: 'shopware'; position: absolute; } .account--menu.is--personalized .navigation--link.navigation--personalized [class^="icon--"] { margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; display: inline-block; } .account--menu.is--personalized .navigation--link.navigation--personalized .icon--logout { position: relative; top: 10px; top: 0.625rem; } .account--menu.is--personalized .navigation--link.navigation--personalized:hover { color: #00476b; } .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: 15px; padding-top: 0.9375rem; padding-bottom: 15px; padding-bottom: 0.9375rem; margin-top: 7px; margin-top: 0.4375rem; border-bottom: 1px solid #dadae5; display: block; text-align: center; } .account--dropdown-navigation .navigation--signin .navigation--signin-btn.btn { margin-bottom: 5px; margin-bottom: 0.3125rem; width: 95%; text-align: center; } .account--dropdown-navigation .navigation--register { font-size: 13px; font-size: 0.8125rem; } .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized { line-height: 20px; line-height: 1.25rem; padding-left: 33px; padding-left: 2.0625rem; color: #00476b; font-weight: 500; } .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized:before, .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized::before { left: 10px; left: 0.625rem; } .account--dropdown-navigation .navigation--link.link--logout.navigation--personalized:hover { color: #00476b; } .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: 9px; padding-top: 0.5625rem; padding-bottom: 9px; 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: 0px 5px 0px 0px; 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: 15px; width: 0.9375rem; height: 15px; height: 0.9375rem; margin-top: 8px; margin-top: 0.5rem; margin-left: 1px; margin-left: 0.0625rem; background: #efeff4; content: ''; display: block; } .entry--search.is--active .main-search--form { top: 50px; top: 3.125rem; background: #efeff4; left: 0; display: block; position: absolute; } .header-main.is--active-searchfield { padding-bottom: 70px; padding-bottom: 4.375rem; } .has--cssanimations .form--ajax-loader { top: 20px; top: 1.25rem; right: 55px; right: 3.4375rem; position: absolute; display: none; } .has--cssanimations .form--ajax-loader::before { width: 16px; width: 1rem; height: 16px; 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 #dadae5; border-top: 2px solid #4f4f71; display: block; content: ""; } .has--no-cssanimations .form--ajax-loader { top: 24px; top: 1.5rem; right: 55px; right: 3.4375rem; width: 16px; width: 1rem; height: 16px; height: 1rem; position: absolute; display: none; background-image: url('../../themes/Frontend/Responsive/frontend/_public/src/img/icons/loading-indicator.gif'); } .main-search--results { top: 110px; 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: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; box-shadow: 0 10px 25px -15px #000000; border-top: 1px solid #dadae5; border-bottom: 1px solid #dadae5; background: #fff; -ms-touch-action: manipulation; } .results--list::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 12px; width: 0.75rem; height: 12px; height: 0.75rem; top: -6px; top: -0.375rem; content: ''; display: block; position: absolute; background: #fff; left: 48%; border: 1px solid #dadae5; 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: 30px; line-height: 1.875rem; border-bottom: 1px solid #dadae5; } .results--list .list--entry:last-child { border: 0 none; } .results--list .entry--no-results { width: 100%; text-align: center; list-style: none; font-weight: 500; } .results--list .is--active, .results--list .list--entry:hover { color: #00476b; } .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: #00476b; } .results--list .search-result--link { padding: 6px 0px 6px 0px; 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: 30px; height: 1.875rem; line-height: 30px; line-height: 1.875rem; display: block; } .results--list .price--unit { font-size: 11px; font-size: 0.6875rem; line-height: 18px; line-height: 1.125rem; float: right; } .results--list .entry--media { height: 30px; 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: 10px; padding-left: 0.625rem; width: 60%; color: #00476b; 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: #00476b; white-space: nowrap; } .results--list .entry--all-results { padding: 6px 5px 6px 5px; padding: 0.375rem 0.3125rem 0.375rem 0.3125rem; font-weight: 500; } .results--list .entry--all-results-link { width: 70%; padding: 0; } .results--list .entry--all-results-link .icon--arrow-right { top: -1px; top: -0.0625rem; margin: 0px 8px 0px 0px; margin: 0rem 0.5rem 0rem 0rem; position: relative; } .results--list .entry--all-results-number { font-weight: 500; color: #00476b; } .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: 0px; top: 0rem; bottom: 0px; bottom: 0rem; right: 0px; right: 0rem; padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; height: 40px; height: 2.5rem; } .main-search--results { top: 50px; top: 3.125rem; width: 450px; width: 28.125rem; margin-left: -110px; 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 #dadae5; background: #fff; } .header-main.is--active-searchfield { padding-bottom: 10px; padding-bottom: 0.625rem; } .has--cssanimations .form--ajax-loader { top: 10px; top: 0.625rem; right: 45px; right: 2.8125rem; position: absolute; } .has--no-cssanimations .form--ajax-loader { top: 14px; top: 0.875rem; right: 45px; 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: 4px 0px 4px 0px; 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: 0px 15px 0px 15px; padding: 0rem 0.9375rem 0rem 0.9375rem; line-height: 25px; 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: #00476b; cursor: pointer; } .header-main .top-bar--navigation .navigation--entry:hover, .header-main .top-bar--navigation .navigation--link:hover { color: #00476b; } .header-main .top-bar--navigation .field--select, .header-main .top-bar--navigation .navigation--entry { height: 25px; height: 1.5625rem; } .header-main .top-bar--navigation .field--select { position: relative; } .header-main .top-bar--navigation .select-field { height: 25px; height: 1.5625rem; } .header-main .top-bar--navigation .select-field select { border-radius: 0; padding: 0px 18px 0px 0px; padding: 0rem 1.125rem 0rem 0rem; line-height: 25px; line-height: 1.5625rem; background: none; border: 0 none; } .header-main .top-bar--navigation .select-field:after { height: 25px; height: 1.5625rem; line-height: 24px; line-height: 1.5rem; width: auto; border: 0 none; } .header-main .top-bar--navigation .top-bar--language .select-field { width: 32px; 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: -6px; 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: -3px; top: -0.1875rem; margin-left: 5px; margin-left: 0.3125rem; content: "\e612"; font-family: 'shopware'; position: relative; } .header-main .top-bar--navigation .entry--service.js--is--dropdown-active { color: #00476b; } .header-main .top-bar--navigation .service--list { min-width: 150px; min-width: 9.375rem; padding: 5px 0px 5px 0px; padding: 0.3125rem 0rem 0.3125rem 0rem; top: 32px; top: 2rem; right: 12px; right: 0.75rem; text-align: left; position: absolute; display: none; list-style: none; background: #fff; z-index: 3500; border: 1px solid #dadae5; } .header-main .top-bar--navigation .service--list::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 8px; width: 0.5rem; height: 8px; height: 0.5rem; top: -5px; top: -0.3125rem; right: 18px; right: 1.125rem; content: ''; display: block; position: absolute; background: #fff; border-color: #dadae5; border-width: 0 0 1px 1px; border-style: solid; } .header-main .top-bar--navigation .service--list .service--link { padding: 5px 10px 5px 10px; padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; display: block; color: #00476b; } .header-main .top-bar--navigation .service--list .service--link:hover { color: #00476b; } .header-main .top-bar--navigation .js--is--dropdown-active .service--list { display: block; } .header-main .header--navigation { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .header-main .logo-main { padding: 0px 0px 0px 10px; padding: 0rem 0rem 0rem 0.625rem; width: 35%; } .header-main .logo-main .logo--link { height: 50px; height: 3.125rem; } .header-main .logo-main .logo--shop { height: 50px; 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 #dadae5; } .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: 10px; 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: 5px 0px 5px 0px; padding: 0.3125rem 0rem 0.3125rem 0rem; display: block; width: 35%; } .logo-main, .shop--navigation { float: left; } .shop--navigation { width: 65%; } .shop--navigation .navigation--list { background-image: none; text-align: right; } .shop--navigation .navigation--entry { border-radius: 3px; background-clip: padding-box; border: 0 none; width: auto; float: none; display: inline-block; } .shop--navigation .entry--cart .entry--link { padding: 0; display: inline-block; } .shop--navigation .entry--link { font-weight: 500; } .shop--navigation .entry--menu-left { display: none; } .shop--navigation .cart--quantity, .shop--navigation .search--display, .shop--navigation .entry--account { display: inline-block; } .shop--navigation .entry--search { font-size: 14px; 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: 200px; min-width: 12.5rem; max-width: 250px; max-width: 15.625rem; padding: 5px 0px 5px 0px; padding: 0.3125rem 0rem 0.3125rem 0rem; top: 45px; 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: 6px; padding-bottom: 0.375rem; margin-bottom: 6px; margin-bottom: 0.375rem; margin-top: 5px; 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: 8px; width: 0.5rem; height: 8px; height: 0.5rem; right: 18px; right: 1.125rem; content: ''; display: block; position: absolute; background: #fff; border-color: #dadae5; 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: 3px 0px 3px 0px; padding: 0.1875rem 0rem 0.1875rem 0rem; } .account--dropdown-navigation .account--menu .sidebar--navigation .link--logout { padding: 10px 0px 0px 23px; padding: 0.625rem 0rem 0rem 1.4375rem; } .account--dropdown-navigation .account--menu .sidebar--navigation .link--logout:before { left: 2px; left: 0.125rem; } .account--dropdown-navigation .account--menu .sidebar--navigation .link--abort { padding-top: 0px; padding-top: 0rem; margin-top: 0px; margin-top: 0rem; border-top: 0 none; white-space: nowrap; } .main-search--results { width: 450px; width: 28.125rem; margin-left: -225px; margin-left: -14.0625rem; top: 55px; 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 #dadae5; } .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: 50px; 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: #00476b; font-weight: 700; } .navigation--list .entry--cart .icon--basket { left: 8px; left: 0.5rem; display: block; position: absolute; top: 50%; } .navigation--list .entry--account .account--link { padding-left: 36px; 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: 8px; left: 0.5rem; display: block; position: absolute; top: 50%; } .navigation--list .account--display { display: inline-block; } .navigation--list .account--display.navigation--personalized { line-height: 16px; line-height: 1rem; font-size: 12px; font-size: 0.75rem; max-width: 90px; max-width: 5.625rem; margin-top: 2px; 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: 2px; 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 #dadae5; } .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: 8px 16px 16px 16px; padding: 0.5rem 1rem 1rem 1rem; } .shop--navigation .entry--link { font-size: 14px; font-size: 0.875rem; } .shop--navigation .entry--trigger { margin-right: 14px; 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: 0px 25px 0px 5px; margin: 0rem 1.5625rem 0rem 0.3125rem; font-weight: 700; color: #00476b; } } /* Main navigation ========================================== Contains the styles of the main navigation of the Shopware storefront. The main navigation is positioned above the content section. It contains the viewport specific styles inside media queries. */ .navigation-main { background: #fff; display: none; } @media screen and (min-width: 48em) { .navigation-main { border-bottom: 1px solid #00476b; display: block; position: relative; } .navigation-main .navigation--list { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; margin: 0; position: relative; white-space: nowrap; } .navigation-main .navigation--list:after { content: ""; display: table; clear: both; } .navigation-main .navigation--entry { display: inline-block; -ms-touch-action: none; } .navigation-main .navigation--link { -webkit-transition: none; transition: none; padding: 8px 14px 8px 14px; padding: 0.5rem 0.875rem 0.5rem 0.875rem; font-size: 16px; font-size: 1rem; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; margin: 0; display: block; cursor: pointer; color: #00476b; } .navigation-main .navigation--link:hover { color: #00476b; } .navigation-main .is--active .navigation--link { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); font-weight: 700; color: #fff; } .navigation-main .is--active .navigation--link:hover { color: #fff; } } @media screen and (min-width: 78.75em) { .navigation-main .navigation--list { padding: 0; } } /* Breadcrumb ================================= Defines the styling for the content breadcrumb elements that display the page location. Every breadcrumb entry is followed by a breadcrumb separator list-entry with an arrow icon. The main breadcrumb is positioned below the main navigation bar. ``` <nav class="content--breadcrumb"> <ul class="breadcrumb--list" role="menu"> <li class="breadcrumb--entry" role="menuitem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="breadcrumb--link" href="" itemprop="url"> <span class="breadcrumb--title" itemprop="title"> Breadcrumb entry 1 </span> </a> </li> <li class="breadcrumb--separator"> <i class="icon--arrow-right"></i> </li> <li class="breadcrumb--entry" role="menuitem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a class="breadcrumb--link" href="" itemprop="url"> <span class="breadcrumb--title" itemprop="title"> Breadcrumb entry 2 </span> </a> </li> </ul> </nav> ``` */ .content--breadcrumb { font-size: 14px; font-size: 0.875rem; display: block; float: none; border-bottom: 1px solid #dadae5; } .content--breadcrumb:after { content: ""; display: table; clear: both; } .content--breadcrumb .breadcrumb--list { overflow: hidden; } .content--breadcrumb .breadcrumb--entry, .content--breadcrumb .breadcrumb--separator { display: none; float: left; list-style: none; white-space: nowrap; overflow: hidden; } .content--breadcrumb .breadcrumb--entry:last-child, .content--breadcrumb .breadcrumb--separator:last-child { display: list-item; } .content--breadcrumb .breadcrumb--link, .content--breadcrumb .breadcrumb--separator { line-height: 24px; line-height: 1.5rem; padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .content--breadcrumb .breadcrumb--separator { font-size: 9px; font-size: 0.5625rem; } .content--breadcrumb .breadcrumb--link { display: block; color: #00476b; } .content--breadcrumb .breadcrumb--link:hover { color: #00476b; } .content--breadcrumb .is--active .breadcrumb--link { color: #00476b; } .content--breadcrumb .breadcrumb--button { padding: 10px 0px 10px 10px; padding: 0.625rem 0rem 0.625rem 0.625rem; display: inline-block; float: left; list-style: none; } .content--breadcrumb .breadcrumb--button .breadcrumb--title { padding-right: 20px; padding-right: 1.25rem; border-right: 1px solid #dadae5; } .content--breadcrumb .breadcrumb--button .icon--arrow-left { font-size: 9px; font-size: 0.5625rem; margin-right: 10px; margin-right: 0.625rem; } @media screen and (min-width: 48em) { .content--breadcrumb { padding: 0px 20px 0px 20px; padding: 0rem 1.25rem 0rem 1.25rem; } .content--breadcrumb .breadcrumb--list { padding-left: 0; } .content--breadcrumb .breadcrumb--entry, .content--breadcrumb .breadcrumb--separator { display: list-item; } .content--breadcrumb .breadcrumb--button { margin-right: 10px; margin-right: 0.625rem; padding: 10px 30px 10px 10px; padding: 0.625rem 1.875rem 0.625rem 0.625rem; } .content--breadcrumb .breadcrumb--button .breadcrumb--title { padding-right: 0px; padding-right: 0rem; border-right: 0 none; } } @media screen and (min-width: 78.75em) { .content--breadcrumb { padding: 0px 40px 0px 40px; padding: 0rem 2.5rem 0rem 2.5rem; } } /* Detail ======================================= Defines the styling for the Shopware 5 detail page elements. It contains the product actions, the product information such as pictures and details and the user ratings of the product. */ .product--details .product--actions { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; padding: 0px 0px 10px 0px; padding: 0rem 0rem 0.625rem 0rem; border-top: 0 none; border-bottom: 1px solid #dadae5; } .product--details .product--actions:after { content: ""; display: table; clear: both; } .product--details .product--actions .js--off-canvas-button { display: inline-block; } .product--details .product--header { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; min-height: 70px; min-height: 4.375rem; box-sizing: content-box; } .product--details .product--header:after { content: ""; display: table; clear: both; } .product--details .product--header .product--title { font-size: 21px; font-size: 1.3125rem; margin: 0; padding: 0; font-weight: 700; color: #00141f; } .product--details .product--supplier, .product--details .product--rating-container { width: 50%; } .product--details .product--rating-link { display: inline-block; } .product--details .product--rating { font-size: 19px; font-size: 1.1875rem; display: block; letter-spacing: -1px; color: #00476b; } .product--details .product--rating:after { content: ""; display: table; clear: both; } .product--details .product--rating .rating--count-wrapper { font-size: 16px; font-size: 1rem; margin-left: 10px; margin-left: 0.625rem; line-height: 25px; line-height: 1.5625rem; vertical-align: text-top; letter-spacing: 1px; } .product--details .product--supplier { height: 35px; height: 2.1875rem; text-align: right; float: right; margin: 0; } .product--details .product--supplier .product--supplier-link { height: 35px; height: 2.1875rem; display: inline-block; max-width: 100%; } .product--details .product--rating-container { margin: 5px 0px 0px 0px; margin: 0.3125rem 0rem 0rem 0rem; float: left; } .product--details .product--image-container { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; width: 100%; } .product--details .product--image-container .image-slider--slide { margin-right: -0.5px; } .product--details .alert { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .product--details .product--tax { font-size: 12px; font-size: 0.75rem; margin: 0; } .product--details .product--buybox { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; width: 100%; } .product--details .product--buybox .product--price { margin: 0; } .product--details .product--buybox .price--label { font-weight: 700; } .product--details .product--buybox .price--line-through { text-decoration: line-through; } .product--details .product--buybox .price--discount .price--content { color: #e74c3c; } .product--details .product--buybox .price--content { font-size: 28px; font-size: 1.75rem; white-space: nowrap; color: #00141f; font-weight: 700; display: inline-block; line-height: 1; } .product--details .product--buybox .content--discount { font-size: 14px; font-size: 0.875rem; padding: 4px 0px 4px 0px; padding: 0.25rem 0rem 0.25rem 0rem; white-space: nowrap; display: inline-block; } .product--details .product--buybox .price--discount-icon { padding: 6px 7px 6px 7px; padding: 0.375rem 0.4375rem 0.375rem 0.4375rem; margin: 0px 5px 0px 5px; margin: 0rem 0.3125rem 0rem 0.3125rem; font-size: 13px; font-size: 0.8125rem; border-radius: 3px; border-radius: 0.1875rem; display: inline-block; position: relative; background: #e74c3c; color: #ffffff; text-align: center; font-weight: 700; vertical-align: top; } .product--details .product--configurator .reset--configuration { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; white-space: nowrap; } .product--details .product--configurator .alert { margin: 10px 0px 0px 0px; margin: 0.625rem 0rem 0rem 0rem; } .product--details .buybox--form { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .product--details .buybox--quantity { margin: 0 2% 0 0; width: 35%; } .product--details .buybox--quantity .select-field select { font-size: 16px; font-size: 1rem; font-weight: 700; } .product--details .buybox--button { font-size: 16px; font-size: 1rem; white-space: nowrap; width: 63%; } .product--details .product--base-info { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; font-size: 14px; font-size: 0.875rem; } .product--details .product--base-info .entry--label { margin: 0px 8px 0px 0px; margin: 0rem 0.5rem 0rem 0rem; width: 35%; display: inline-block; } .product--details .content--description, .product--details .content--product-reviews, .product--details .content--related-products, .product--details .content--similar-products { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; } .product--details .product--properties { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .product--details .product--properties .product--properties-table { width: 100%; background: #ffffff; } .product--details .product--properties td { padding: 5px 10px 5px 10px; padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; width: 50%; border: 0 none; } .product--details .product--properties tr:nth-child(even) td { background: #f5f5f5; } .product--details .content--title { font-size: 18px; font-size: 1.125rem; margin: 10px 0px 5px 0px; margin: 0.625rem 0rem 0.3125rem 0rem; font-weight: 700; color: #00141f; } .product--details .content--title.title--description-supplier { margin-top: 25px; margin-top: 1.5625rem; } .product--details .content--link [class^=icon] { font-size: 10px; font-size: 0.625rem; margin: -2px 8px 0px 0px; margin: -0.125rem 0.5rem 0rem 0rem; } .product--details .block-prices--container { margin: 0px 0px 12px 0px; margin: 0rem 0rem 0.75rem 0rem; display: block; } .product--details .block-prices--container .block-prices--table { width: 100%; } .product--details .block-prices--container .block-prices--table td, .product--details .block-prices--container .block-prices--table th { padding: 4px 10px 4px 10px; padding: 0.25rem 0.625rem 0.25rem 0.625rem; } .product--details .block-prices--container .block-prices--table th { color: #fff; text-align: left; } .product--details .listing .product--box .panel--body { border-left: 1px solid #dadae5; border-right: 1px solid #dadae5; } .product--details .action--form { float: left; } .product--details .action--link { background: none; border: none; margin: 0; padding: 0; font-size: 14px; font-size: 0.875rem; margin: 0px 35px 5px 0px; margin: 0rem 2.1875rem 0.3125rem 0rem; color: #00476b; white-space: nowrap; } .product--details .action--link.action--compare { display: none; } .product--details .action--link:last-child { margin-right: 0; } .product--details .action--link:hover { color: #00476b; } .product--details .action--link *[class^="icon"] { font-size: 12px; font-size: 0.75rem; margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; } .product--details .action--link *[class="icon--star"] { font-size: 14px; font-size: 0.875rem; margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; } .product--details .action--compare { display: none; } .product--details .link--notepad:focus { outline: none; } .product--details .link--notepad.js--is-saved { color: #2ecc71; } .product--details .price--unit { font-size: 12px; font-size: 0.75rem; } .product--details .delivery--text { font-size: 14px; font-size: 0.875rem; } .product--details .similar--content .product-slider, .product--details .viewed--content .product-slider, .product--details .bought--content .product-slider, .product--details .related--content .product-slider, .product--details .product-streams--content .product-slider { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; min-height: 270px; min-height: 16.875rem; } .product--details .similar--content .product-slider--arrow.arrow--prev, .product--details .viewed--content .product-slider--arrow.arrow--prev, .product--details .bought--content .product-slider--arrow.arrow--prev, .product--details .related--content .product-slider--arrow.arrow--prev, .product--details .product-streams--content .product-slider--arrow.arrow--prev { border-left: 0 none; } .product--details .similar--content .product-slider--arrow.arrow--next, .product--details .viewed--content .product-slider--arrow.arrow--next, .product--details .bought--content .product-slider--arrow.arrow--next, .product--details .related--content .product-slider--arrow.arrow--next, .product--details .product-streams--content .product-slider--arrow.arrow--next { border-right: 0 none; } .product--navigation { display: none; } .review--form .review--field { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; width: 100%; } .review--form .review--field.select-field { max-width: 100%; } .review--form .review--notice { font-size: 12px; font-size: 0.75rem; } .product--description ol, .product--description ul { margin: 0px 16px 16px 16px; margin: 0rem 1rem 1rem 1rem; padding: 0; } .product--description ol li, .product--description ul li { margin: 0px 0px 0px 6px; margin: 0rem 0rem 0rem 0.375rem; } .review--entry { border-radius: 3px; background-clip: padding-box; margin: 0px 0px 25px 0px; margin: 0rem 0rem 1.5625rem 0rem; padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; font-size: 14px; font-size: 0.875rem; background: #fff; border: 1px solid #dadae5; } .review--entry.is--last { margin: 0px 0px 30px 0px; 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: 10px; margin-bottom: 0.625rem; } .review--entry .content--label { margin: 0px 8px 0px 0px; margin: 0rem 0.5rem 0rem 0rem; float: left; } .review--entry .content--field:after { content: ""; display: table; clear: both; } .review--entry .content--title { font-size: 16px; font-size: 1rem; } .review--entry .review--content { font-size: 14px; font-size: 0.875rem; margin: 0; } .review--entry.is--answer { margin: 0px 10px 30px 10px; margin: 0rem 0.625rem 1.875rem 0.625rem; padding: 20px 10px 20px 10px; 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: -9px; top: -0.5625rem; background: #f5f5f8; } .content--product-reviews .alert { margin: 0px 0px 16px 0px; margin: 0rem 0rem 1rem 0rem; } .content--product-reviews .captcha--notice { font-size: 12px; font-size: 0.75rem; line-height: 1.2; } .product--rating-count { margin-left: 8px; margin-left: 0.5rem; padding: 2px 7px 2px 7px; padding: 0.125rem 0.4375rem 0.125rem 0.4375rem; border-radius: 3px; background-clip: padding-box; background: #8ed300; color: #fff; font-weight: 700; } .product--notification { margin: 0px 0px 16px 0px; margin: 0rem 0rem 1rem 0rem; } .product--notification .alert { margin: 0px 0px 8px 0px; margin: 0rem 0rem 0.5rem 0rem; word-wrap: break-word; } .product--notification .notification--field { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; position: relative; width: 80%; } .product--notification .notification--field:focus { z-index: 1; } .product--notification .notification--button { padding: 3px 10px 3px 10px; padding: 0.1875rem 0.625rem 0.1875rem 0.625rem; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; margin-left: -1px; margin-left: -0.0625rem; position: relative; width: 20%; } .product--notification .notification--button .icon--mail { font-size: 12px; font-size: 0.75rem; } .product--notification .privacy-information { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } .configurator--form { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .configurator--form .select-field { max-width: 100%; } .configurator--label { margin: 6px 0px 4px 0px; margin: 0.375rem 0rem 0.25rem 0rem; font-size: 14px; font-size: 0.875rem; font-weight: 700; } .is--ctl-detail .content-main--inner { background: #fff; position: relative; } .link--prev-button, .link--next-button { display: none; } .base-info--entry { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; } .tab--navigation { display: none; } .tab--title { color: #00476b; font-weight: 700; } .tab--title:hover { color: #00476b; } .tab--title:after { right: 10px; right: 0.625rem; font-size: 18px; font-size: 1.125rem; position: absolute; top: 50%; margin-top: -9px; content: ""; font-family: 'shopware'; } .tab-menu--cross-selling .tab--container { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #dadae5; display: none; } .tab-menu--cross-selling .tab--container.has--content { display: block; } .tab-menu--cross-selling .tab--container:last-child { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } .tab-menu--cross-selling .tab--header.is--active { border-bottom: 1px solid #dadae5; } .tab-menu--cross-selling .tab--header.is--active .tab--title:after { content: "\e68e"; } .tab-menu--cross-selling .tab--title { padding: 10px 38px 10px 10px; padding: 0.625rem 2.375rem 0.625rem 0.625rem; line-height: 20px; line-height: 1.25rem; position: relative; display: block; } .tab-menu--cross-selling .tab--title:after { content: "\e68f"; } @media screen and (min-width: 30em) { .product--details .configurator--form .select-field { height: 38px; height: 2.375rem; max-width: 80%; } .product--details .configurator--form .select-field select { line-height: 36px; line-height: 2.25rem; } .product--details .configurator--form .select-field:after { height: 36px; height: 2.25rem; } .product--details .configurator--form, .product--details .buybox--form { width: 80%; } .tab-menu--product { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .tab-menu--product .tab--navigation { display: block; } .tab-menu--product .tab--header, .tab-menu--product .tab--preview { display: none; } } @media screen and (min-width: 48em) { .product--details .product--header { padding: 30px 0px 20px 0px; padding: 1.875rem 0rem 1.25rem 0rem; } .product--details .product--header .product--title { font-size: 28px; font-size: 1.75rem; line-height: 30px; line-height: 1.875rem; width: 80%; float: left; border: 0 none; } .product--details .product--supplier { height: 70px; height: 4.375rem; width: 20%; float: right; } .product--details .product--supplier .product--supplier-link { height: 70px; height: 4.375rem; } .product--details .action--link.action--compare { display: inline-block; } .product--details .product--rating-container { width: 80%; float: left; } .product--details .product--image-container { width: 100%; } .product--details .product--base-info .entry--label { margin: 0px 8px 0px 0px; margin: 0rem 0.5rem 0rem 0rem; } .product--details .content--description, .product--details .content--product-reviews { padding: 30px 30px 30px 30px; padding: 1.875rem 1.875rem 1.875rem 1.875rem; } .product--details .content--related-products, .product--details .content--similar-products { padding: 20px 35px 20px 35px; padding: 1.25rem 2.1875rem 1.25rem 2.1875rem; } .product--details .product--properties { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .product--details .block-prices--container { margin-top: 12px; margin-top: 0.75rem; } .product--details .tab--navigation { display: block; } .product--details .tab--header, .product--details .tab--preview { display: none; } .product--details .review--entry { padding: 30px 30px 30px 30px; padding: 1.875rem 1.875rem 1.875rem 1.875rem; } .product--details .review--entry.is--answer { padding: 30px 20px 30px 20px; padding: 1.875rem 1.25rem 1.875rem 1.25rem; } .product--details .tab--container { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } .product--details .tab-menu--product { margin: 0px 0px 30px 0px; margin: 0rem 0rem 1.875rem 0rem; } .product--details .tab-menu--cross-selling .tab--container { display: none; } .product--details .review--form-container { width: 80%; } } @media screen and (min-width: 64em) { .product--details .product--image-container { width: 58%; margin-right: 4%; float: left; } .product--details .product--buybox { width: 38%; } .product--details .configurator--form { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .product--details .buybox--inner { width: 100%; float: none; } .product--details .product--base-info { margin: 10px 0px 20px 0px; margin: 0.625rem 0rem 1.25rem 0rem; padding: 0; width: 100%; float: none; } .product--details .product--properties { width: 50%; } .product--details .action--link { margin-right: 25px; margin-right: 1.5625rem; } .product--details .review--form-container { width: 70%; } .product--details .product--actions { padding: 0px 0px 5px 0px; padding: 0rem 0rem 0.3125rem 0rem; border-bottom: 1px solid #dadae5; } .product--details .product--buybox { border-bottom: 0 none; } .product--details .configurator--form, .product--details .buybox--form { width: 100%; } } @media screen and (min-width: 78.75em) { .is--ctl-detail .page-wrap { overflow-x: hidden; } .product--details .product--header { padding-top: 45px; padding-top: 2.8125rem; } .product--details .review--form-container { width: 60%; } .product--navigation { display: block; position: relative; } .product--navigation .navigation--link { top: 140px; top: 8.75rem; display: none; position: absolute; } .product--navigation .link--prev-button, .product--navigation .link--next-button { width: 40px; width: 2.5rem; height: 255px; height: 15.9375rem; line-height: 255px; line-height: 15.9375rem; font-size: 25px; font-size: 1.5625rem; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; background: rgba(142, 211, 0, 0.1); text-align: center; color: #fff; display: block; } .product--navigation .link--prev-button .link--prev-inner, .product--navigation .link--next-button .link--prev-inner, .product--navigation .link--prev-button .link--next-inner, .product--navigation .link--next-button .link--next-inner { display: none; } .product--navigation .image--wrapper { padding: 15px 15px 15px 15px; padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem; width: 200px; width: 12.5rem; height: 255px; height: 15.9375rem; float: left; background: #fff; position: relative; } .product--navigation .image--container { -webkit-transition: all 0.45s cubic-bezier(0.16, 0.04, 0.14, 1); transition: all 0.45s cubic-bezier(0.16, 0.04, 0.14, 1); width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; position: relative; } .product--navigation .link--prev-button { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; float: left; } .product--navigation .link--prev-button:before { font-family: 'shopware'; content: "\e611"; } .product--navigation .link--next-button { border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; float: right; } .product--navigation .link--next-button:before { font-family: 'shopware'; content: "\e60f"; } .product--navigation .link--prev, .product--navigation .link--next { -webkit-transition: all 0.38s cubic-bezier(0.16, 0.04, 0.14, 1); transition: all 0.38s cubic-bezier(0.16, 0.04, 0.14, 1); } .product--navigation .link--prev:hover .link--prev-button, .product--navigation .link--next:hover .link--prev-button, .product--navigation .link--prev:hover .link--next-button, .product--navigation .link--next:hover .link--next-button { background: rgba(142, 211, 0, 0.2); } .product--navigation .link--prev { left: -40px; left: -2.5rem; } .product--navigation .link--prev .image--container { left: 50px; left: 3.125rem; } .product--navigation .link--prev.can--slide:hover { left: -140px; left: -8.75rem; } .product--navigation .link--prev.can--slide:hover .image--container { left: 0; } .product--navigation .link--next { right: -40px; right: -2.5rem; } .product--navigation .link--next .image--container { right: 50px; right: 3.125rem; } .product--navigation .link--next.can--slide:hover { right: -140px; right: -8.75rem; } .product--navigation .link--next.can--slide:hover .image--container { right: 0; } .product--supplier { height: 70px; height: 4.375rem; } .product--supplier .product--supplier-link { height: 70px; height: 4.375rem; } .content--description, .content--product-reviews { padding: 10px 45px 45px 45px; padding: 0.625rem 2.8125rem 2.8125rem 2.8125rem; } .content--related-products, .content--similar-products { padding: 30px 45px 20px 45px; padding: 1.875rem 2.8125rem 1.25rem 2.8125rem; } .product--notification { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .product--notification .alert { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } } /* Footer ========================================== Defines the styles for the storefront footer and its components. Contains the footer columns, the navigation elements and the vat notice/logo at the bottom of the page. It contains the viewport specific styles inside media queries. The footer element sizes are defined with the unitize mixin. */ .footer-main { background: #fff; } .footer-main .footer--phone-link { font-size: 19px; font-size: 1.1875rem; font-weight: 700; color: #8ed300; } .footer-main .footer--column { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; border-top: 1px solid #dadae5; } .footer-main .footer--column.is--last { border-bottom: 1px solid #dadae5; } .footer-main .column--headline { -webkit-user-select: none; user-select: none; padding: 8px 0px 8px 0px; padding: 0.5rem 0rem 0.5rem 0rem; margin: 0; font-weight: 700; color: #00476b; cursor: pointer; font-size: 16px; font-size: 1rem; line-height: 26px; line-height: 1.625rem; } .footer-main .column--headline.is--active::after { content: "\e68e"; } .footer-main .column--headline::after { font-size: 18px; font-size: 1.125rem; font-family: 'shopware'; color: #00476b; font-weight: 700; content: "\e68f"; float: right; } .footer-main .column--content { display: none; } .footer-main .column--content.is--active { display: block; } .footer-main .footer--bottom { font-size: 12px; font-size: 0.75rem; padding: 16px 12px 0px 12px; padding: 1.33333333rem 1rem 0rem 1rem; text-align: center; } .footer-main .footer--copyright { font-size: 13px; font-size: 0.8125rem; } .footer-main .footer--logo { font-size: 28px; font-size: 1.75rem; color: #009fe3; } .footer-main .navigation--list { padding: 0px 0px 16px 0px; padding: 0rem 0rem 1rem 0rem; } .footer-main .navigation--list .is--level1 { padding-bottom: 10px; padding-bottom: 0.625rem; } .footer-main .navigation--list .is--level1 .navigation--entry { margin-left: 10px; margin-left: 0.625rem; } .footer-main .navigation--link { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; display: block; color: #00476b; } .footer-main .navigation--link:hover { color: #00476b; } .footer-main .newsletter--form { padding: 0px 0px 16px 0px; padding: 0rem 0rem 1rem 0rem; } .footer-main .newsletter--form:after { content: ""; display: table; clear: both; } .footer-main .newsletter--field { border-top-left-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 3px; background-clip: padding-box; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; position: relative; width: 87.5%; float: left; } .footer-main .newsletter--field:focus { z-index: 1; } .footer-main .newsletter--button { box-shadow: 0 0 0 transparent; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; padding: 3px 5px 3px 5px; padding: 0.1875rem 0.3125rem 0.1875rem 0.3125rem; margin-left: -1px; margin-left: -0.0625rem; position: relative; width: 12.5%; text-align: center; float: left; } .footer-main .newsletter--button .icon--mail { font-size: 14px; font-size: 0.875rem; margin-right: 0px; margin-right: 0rem; } .footer-main .newsletter--button .button--text { display: none; } .footer-main .footer--logo { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .footer-vat { margin-top: 10px; margin-top: 0.625rem; padding: 0px 5px 0px 5px; padding: 0rem 0.3125rem 0rem 0.3125rem; background: transparent; } .footer--vat-info .vat-info--text { font-size: 12px; font-size: 0.75rem; margin-bottom: 10px; margin-bottom: 0.625rem; text-align: center; } .footer-minimal { font-size: 13px; font-size: 0.8125rem; padding: 40px 10px 20px 10px; padding: 2.5rem 0.625rem 1.25rem 0.625rem; background: transparent; text-align: center; } .footer-main .footer-minimal { padding: 0; } .footer-minimal .footer--service-menu .service--list { list-style-type: none; padding: 0; margin: 0; } .footer-minimal .footer--service-menu .service--list .service--link { padding: 8px 2px 8px 2px; padding: 0.5rem 0.125rem 0.5rem 0.125rem; display: inline-block; } .footer-minimal .footer--service-menu .service--list .service--entry { display: inline-block; } .footer-minimal .footer--service-menu .service--list .service--entry:after { height: 10px; height: 0.625rem; width: 1px; width: 0.0625rem; margin: 0px 5px 0px 5px; margin: 0rem 0.3125rem 0rem 0.3125rem; border-left: 1px solid #bcbcd0; display: inline-block; content: ''; } .footer-minimal .footer--service-menu .service--list .service--entry:last-child:after { display: none; } .footer-minimal .footer--vat-info { margin: 15px 0px 10px 0px; margin: 0.9375rem 0rem 0.625rem 0rem; } .footer-minimal .footer--vat-info .vat-info--text { line-height: 18px; line-height: 1.125rem; margin: 0; } @media screen and (min-width: 48em) { .footer-main .footer-minimal { display: none; } } @media screen and (min-width: 48em) { .footer-main { border-top: 1px solid #dadae5; } .footer-main .column--headline { margin: 28px 0px 10px 0px; margin: 1.75rem 0rem 0.625rem 0rem; padding: 0; cursor: text; } .footer-main .column--headline::after { display: none; } .footer-main .footer--column { padding: 0px 10px 0px 0px; padding: 0rem 0.625rem 0rem 0rem; width: 25%; border: 0 none; } .footer-main .footer--column.is--last { padding-right: 0; border-bottom: 0 none; } .footer-main .footer--columns { padding: 0px 30px 0px 30px; padding: 0rem 1.875rem 0rem 1.875rem; border-bottom: 1px solid #dadae5; } .footer-main .column--content { display: block; } .footer-main .navigation--list .is--level1 { display: none; } .footer-main .navigation--entry { padding: 0; } .footer-main .navigation--link { line-height: 1.7; padding: 0; } .footer-main .newsletter--field { width: 80%; } .footer-main .newsletter--button { width: 20%; } .footer-main .newsletter--button .icon--mail { font-size: 12px; font-size: 0.75rem; } .footer-vat { padding: 0; } .footer--vat-info .vat-info--text { margin-bottom: 20px; margin-bottom: 1.25rem; } } @media screen and (min-width: 78.75em) { .footer-main .footer--columns { padding: 0px 0px 20px 0px; padding: 0rem 0rem 1.25rem 0rem; } .footer-main .footer--bottom { font-size: 15px; font-size: 0.9375rem; } .footer-minimal { padding-top: 0; } } /* Sidebar ============================================== Defines the styling of the storefront sidebar navigation and its components. The sidebar is displayed inside the off-canvas menu on small devices. ``` <ul class="sidebar--navigation"> <li class="navigation--entry is--active has--sub-categories has--sub-children"> <a class="navigation--link is--active has--sub-categories"> Sidebar Head </a> <ul class="sidebar--navigation is--level1"> <li class="navigation--entry has--sub-children" role="menuitem"> <a class="navigation--link"> Navigation entry </a> <a class="navigation--link"> Navigation entry </a> <a class="navigation--link"> Navigation entry </a> </li> </ul> </li> </ul> ``` */ body > .sidebar-main { padding-bottom: 20px; padding-bottom: 1.25rem; border-right: #dadae5; } body > .sidebar-main:after { content: ""; display: table; clear: both; } .sidebar-main.off-canvas { background: #f5f5f8; } .mobile--switches { padding: 6px 10px 6px 10px; padding: 0.375rem 0.625rem 0.375rem 0.625rem; height: 43px; height: 2.6875rem; display: block; } .mobile--switches:after { content: ""; display: table; clear: both; } .mobile--switches .navigation--entry { margin-right: 20px; margin-right: 1.25rem; float: left; } .mobile--switches .field--select, .mobile--switches .navigation--entry { height: 30px; height: 1.875rem; } .mobile--switches .field--select { position: relative; } .mobile--switches .select-field { height: 30px; height: 1.875rem; } .mobile--switches .select-field select { border-radius: 0; padding: 0px 18px 0px 0px; padding: 0rem 1.125rem 0rem 0rem; line-height: 28px; line-height: 1.75rem; font-size: 16px; font-size: 1rem; background: none; border: 0 none; } .mobile--switches .select-field:after { height: 25px; height: 1.5625rem; line-height: 28px; line-height: 1.75rem; width: auto; border: 0 none; } .mobile--switches .top-bar--language .select-field { width: 32px; width: 2rem; } .mobile--switches .top-bar--language .select-field select { text-indent: -9999px; } .mobile--switches .top-bar--language .language--flag { margin-top: -6px; 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: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; width: 100%; height: 100%; display: block; } .sidebar--navigation .navigation--link .is--icon-right { margin-top: 5px; margin-top: 0.3125rem; font-size: 10px; font-size: 0.625rem; display: inline-block; float: right; } .sidebar--navigation .navigation--link:hover { color: #00476b; } .sidebar--navigation.show--active-items .navigation--link.is--active { color: #00476b; font-weight: 700; } .offcanvas--overlay { width: 280px; width: 17.5rem; top: 42px; 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: 10px; margin-bottom: 0.625rem; border-bottom: 1px solid #dadae5; width: 100%; background: #fff; } .offcanvas--overlay .overlay--category { margin: 16px 10px 6px 10px; margin: 1rem 0.625rem 0.375rem 0.625rem; line-height: 26px; line-height: 1.625rem; } .offcanvas--overlay .overlay--category .category--headline { font-size: 14px; font-size: 0.875rem; color: #00141f; margin: 0; padding: 0; font-weight: 700; } .offcanvas--overlay .is--icon-left { margin-top: 5px; margin-top: 0.3125rem; margin-right: 5px; margin-right: 0.3125rem; font-size: 10px; font-size: 0.625rem; display: inline-block; } .offcanvas--overlay .is--icon-right { margin-top: 5px; margin-top: 0.3125rem; font-size: 10px; font-size: 0.625rem; display: inline-block; float: right; } .offcanvas--overlay .is--back-button { font-weight: 700; } .offcanvas--overlay .is--display-button { color: #00476b; font-weight: 700; } .has--cssanimations .sidebar--ajax-loader { top: 12px; top: 0.75rem; right: 15px; right: 0.9375rem; position: absolute; display: none; } .has--cssanimations .sidebar--ajax-loader::before { width: 16px; width: 1rem; height: 16px; 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 #dadae5; border-top: 2px solid #4f4f71; } .sidebar--ajax-loader { top: 12px; top: 0.75rem; right: 15px; right: 0.9375rem; position: absolute; display: none; } .sidebar--ajax-loader::before { width: 16px; width: 1rem; height: 16px; 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 #dadae5; border-top: 2px solid #4f4f71; } .listing--sidebar { overflow: hidden; width: 0; height: 0; } .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 #dadae5; } .listing--sidebar .sidebar-filter .filter--active { max-width: 100%; } .listing--sidebar .sidebar-filter .filter--container { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; margin: 0; } .listing--sidebar .sidebar-filter .filter--container .filter-panel { margin: 0px 0px 10px 0px; 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: 230px; width: 14.375rem; height: auto; display: block; float: left; } .listing--sidebar + .content--wrapper { margin-left: 260px; 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: 230px; width: 14.375rem; margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; padding-top: 30px; 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: 260px; 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: 20px 10px 10px 10px; margin: 1.25rem 0.625rem 0.625rem 0.625rem; } .campaign--box { margin: 0px 0px 20px 0px; 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: 20px; margin-bottom: 1.25rem; } .sidebar--navigation { border-radius: 3px; background-clip: padding-box; border: 1px solid #dadae5; } .sidebar--navigation .navigation--entry { padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; margin: 0px 10px 0px 10px; margin: 0rem 0.625rem 0rem 0.625rem; } .sidebar--navigation ul.sidebar--navigation { border-radius: 0; } .sidebar--navigation ul.sidebar--navigation .navigation--entry { margin: 0px 0px 0px 10px; margin: 0rem 0rem 0rem 0.625rem; } .sidebar--navigation .navigation--link { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; } .sidebar--navigation .navigation--link:hover { color: #00476b; } .sidebar--navigation .navigation--link.is--active { color: #00476b; font-weight: 700; } .sidebar--navigation .navigation--link .is--icon-right { display: none; } .sidebar--navigation .is--level1 { margin-bottom: 10px; margin-bottom: 0.625rem; border: 0 none; } .sidebar--navigation .is--level1 .navigation--entry { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; border: 0 none; } .sidebar--navigation .is--level1 .navigation--link { padding: 5px 10px 5px 10px; padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; } .sidebar--navigation .is--level1 .navigation--link.is--active { font-weight: 700; text-shadow: none; color: #00476b; background: transparent; border: 0 none; } .sidebar--navigation .is--level2 { font-size: 12px; font-size: 0.75rem; } .sidebar--navigation .navigation--level-high { border: 0 none; } .shop-sites--container { padding: 15px 10px 15px 10px; padding: 0.9375rem 0.625rem 0.9375rem 0.625rem; margin-bottom: 20px; margin-bottom: 1.25rem; border: 1px solid #dadae5; } .shop-sites--container .shop-sites--headline { padding-bottom: 10px; padding-bottom: 0.66666667rem; font-size: 16px; font-size: 1rem; margin-top: 0; border-bottom: 1px solid #dadae5; color: #00141f; 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: 5px 10px 5px 10px; 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: 260px; 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: 45px; padding-top: 2.8125rem; display: block; } .sidebar-main.off-canvas { position: relative; top: 0; left: 0; z-index: 1000; } } /* Listing ========================================== Contains the styles of the product listing and its components. The styling defines the listing components such as the product filter element. It contains the viewport specific styles inside media queries. */ .listing--content { margin: 20px 0px 20px 0px; margin: 1.25rem 0rem 1.25rem 0rem; } .banner--container { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .category--teaser { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .category--teaser .hero--text { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; } .category--teaser .offcanvas--content { padding: 20px; padding: 1.25rem; } .category--teaser .offcanvas--content .content--title { font-size: 18px; font-size: 1.125rem; margin: 10px 0px 15px 0px; margin: 0.625rem 0rem 0.9375rem 0rem; font-weight: 700; color: #00141f; } .vendor--info { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .vendor--info:after { content: ""; display: table; clear: both; } .vendor--info .vendor--image-wrapper { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; max-width: 200px; max-width: 12.5rem; height: 70px; height: 4.375rem; margin-left: auto; margin-right: auto; } .vendor--info .vendor--image { margin: 0 auto; } .vendor--info .vendor--text { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .listing--actions { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .listing--actions:after { content: ""; display: table; clear: both; } .listing--wrapper.js--is-loading .js--loading-indicator { top: 150px; top: 9.375rem; } .listing { -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; opacity: 1; } .listing.is--loading { opacity: 0; } .action--filter-btn { margin-bottom: 10px; margin-bottom: 0.625rem; } .action--filter-btn .filter--trigger { height: 34px; height: 2.125rem; padding: 4px 4px 4px 10px; padding: 0.25rem 0.25rem 0.25rem 0.625rem; line-height: 24px; line-height: 1.5rem; display: block; position: relative; overflow: hidden; } .action--filter-btn .filter--trigger .icon--filter { margin-right: 8px; margin-right: 0.5rem; } .action--filter-btn .filter--trigger .action--collapse-icon { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; line-height: 24px; line-height: 1.5rem; background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); border-radius: 3px; background-clip: padding-box; display: inline-block; color: #fff; float: right; } .action--filter-options .filter--container { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; } .action--filter-options .filter--close-btn { padding: 12px 10px 12px 10px; padding: 0.75rem 0.625rem 0.75rem 0.625rem; background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 100%); display: block; color: #fff; font-weight: 700; } .action--filter-options .filter--close-btn:hover { color: #fff; } .action--filter-options .filter--close-btn .icon--arrow-right { margin: 3px 0px 0px 0px; margin: 0.1875rem 0rem 0rem 0rem; float: right; } .action--filter-options .filter--btn-apply { clear: both; } .action--filter-options .filter--list { list-style: none; } .action--filter-options .filter--entry { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; font-size: 16px; font-size: 1rem; display: block; border-bottom: 1px solid #dadae5; } .action--filter-options .filter--entry:last-child { border: 0 none; } .action--filter-options .filter--link { color: #00476b; } .action--filter-options .filter--link:hover { color: #00476b; } .action--sort { margin-bottom: 20px; margin-bottom: 1.25rem; display: block; } .action--sort .sort--label { display: none; } .action--sort .sort--select { height: 34px; height: 2.125rem; max-width: 100%; } .action--sort .sort--select:after, .action--sort .sort--select .sort--field { line-height: 34px; line-height: 2.125rem; } .action--per-page { display: none; } .listing--paging { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; display: block; } .listing--paging:after { content: ""; display: table; clear: both; } .listing--paging .paging--label { display: none; } .listing--paging .paging--display { line-height: 30px; line-height: 1.875rem; margin-left: 10px; margin-left: 0.625rem; } .listing--bottom-paging { margin: 10px 0px 20px 0px; margin: 0.625rem 0rem 1.25rem 0rem; } .listing--container { overflow: hidden; } .listing { margin: -2% 0 0 -2%; padding: 0 0 2% 0; } .listing:after { content: ""; display: table; clear: both; } .infinite--actions { width: 100%; margin: 0 auto; text-align: center; } .infinite--actions .js--load-more, .infinite--actions .js--load-previous { margin-bottom: 20px; margin-bottom: 1.25rem; } @media (max-width: 1024px) { .product--supplier { display: none; } .listing .product--info .nettopreis { display: none; } } @media screen and (min-width: 48em) { .category--teaser .hero--headline { font-size: 26px; font-size: 1.625rem; padding: 40px 0px 0px 0px; padding: 2.5rem 0rem 0rem 0rem; margin: 0px 40px 0px 40px; margin: 0rem 2.5rem 0rem 2.5rem; } .category--teaser .hero--text { padding: 25px 40px 10px 40px; padding: 1.5625rem 2.5rem 0.625rem 2.5rem; } .listing--content { margin: 30px 0px 30px 0px; margin: 1.875rem 0rem 1.875rem 0rem; } .listing--content:after { content: ""; display: table; clear: both; } .vendor--info .vendor--image-wrapper { margin: 0px 20px 20px 0px; margin: 0rem 1.25rem 1.25rem 0rem; float: left; } .vendor--info .vendor--image-wrapper + .vendor--text { margin: 0px 0px 0px 250px; margin: 0rem 0rem 0rem 15.625rem; } .vendor--info .vendor--image-wrapper .vendor--image { margin: 0; } .listing--actions { border-radius: 3px; background-clip: padding-box; margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; padding-top: 10px; padding-top: 0.625rem; border: 1px solid #dadae5; background: #f5f5f8; } .listing--actions .listing--paging { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; border-top: 1px solid #dadae5; } .listing--actions.without-facets.without-sortings.without-pagination { display: none; } .listing--actions.without-facets.without-sortings { padding-top: 0px; padding-top: 0rem; border-top: none; } .action--per-page { line-height: 32px; line-height: 2rem; display: inline-block; width: 30%; text-align: right; float: right; } .action--per-page .per-page--label { display: none; } .action--per-page .per-page--select { width: 80px; width: 5rem; height: 32px; height: 2rem; vertical-align: top; } .action--per-page .per-page--select:after, .action--per-page .per-page--select .per-page--field { line-height: 30px; line-height: 1.875rem; text-align: center; } .action--sort { width: 200px; width: 12.5rem; margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; display: inline-block; text-align: right; float: right; } .action--sort .sort--select { max-width: 200px; max-width: 12.5rem; } .action--filter-btn { width: 190px; width: 11.875rem; margin: 0px 20px 10px 10px; margin: 0rem 1.25rem 0.625rem 0.625rem; float: left; } .action--filter-btn .filter--trigger .action--collapse-icon { display: none; } .action--filter-btn .filter--trigger:before, .action--filter-btn .filter--trigger:after { -webkit-transition: margin-top 0.4s cubic-bezier(0.02, 0.01, 0.47, 1); transition: margin-top 0.4s cubic-bezier(0.02, 0.01, 0.47, 1); width: 16px; width: 1rem; height: 16px; height: 1rem; right: 10px; right: 0.625rem; margin-top: -8px; margin-top: -0.5rem; font-size: 6px; font-size: 0.375rem; line-height: 16px; line-height: 1rem; font-family: 'shopware'; content: "\e612"; position: absolute; text-align: center; background: none; color: inherit; top: 50%; } .action--filter-btn .filter--trigger:after { margin-top: -48px; margin-top: -3rem; content: "\e610"; } .action--filter-btn .filter--trigger.is--active { padding: 2px 12px 2px 12px; padding: 0.125rem 0.75rem 0.125rem 0.75rem; line-height: 34px; line-height: 2.125rem; background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); border: 0 none; color: #ffffff; /** State: Small button */ /** State: Large button */ background-image: none; background-color: #8ed300; color: #00476b; } .action--filter-btn .filter--trigger.is--active:hover { background: #00476b; color: #ffffff; } .action--filter-btn .filter--trigger.is--active.is--small { line-height: 30px; line-height: 1.875rem; } .action--filter-btn .filter--trigger.is--active.is--large { line-height: 38px; line-height: 2.375rem; } .action--filter-btn .filter--trigger.is--active:before { margin-top: 40px; margin-top: 2.5rem; } .action--filter-btn .filter--trigger.is--active:after { margin-top: -8px; margin-top: -0.5rem; } .action--filter-options { width: auto; height: auto; padding: 0; overflow: visible; position: relative; background: #fff; border: 0 none; clear: both; } .action--filter-options.is--collapsed, .action--filter-options.is--active-filter { border-width: 1px 0 0 0; border-style: solid; border-color: #dadae5; } .action--filter-options.is--active-filter .filter--active-container { display: block; } .action--filter-options.is--instant-filter-active .filter--active-container { display: block; } .action--filter-options .filter--close-btn { display: none; } .action--filter-options .filter--container { margin-left: -2%; padding-left: 3%; } .action--filter-options .filter--container:after { content: ""; display: table; clear: both; } .action--filter-options .filter--group { height: 38px; height: 2.375rem; width: 31%; margin: 0 2% 2% 0; position: relative; float: left; } .action--filter-options .filter--header { width: 100%; position: absolute; top: 0; left: 0; z-index: 1100; } .action--filter-options .filter--header.is--active { z-index: 1300; } .action--filter-options .filter--content { top: 38px; top: 2.375rem; width: 100%; position: absolute; left: 0; } .action--filter-options #filter:after { content: ""; display: table; clear: both; } .listing--bottom-paging { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #dadae5; background: #f5f5f8; } } @media screen and (min-width: 78.75em) { .listing--content { padding-top: 45px; padding-top: 2.8125rem; margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } .action--filter-btn { width: 20%; margin-right: 2%; } .action--filter-btn .filter--trigger { font-size: 14px; font-size: 0.875rem; } .action--filter-btn .filter--trigger .action--collapse-icon { margin-top: -8px; margin-top: -0.5rem; } .action--filter-options { background: #fff; } .action--filter-options.is--collapsed, .action--filter-options.is--active-filter { border-width: 1px 0 0 0; } .action--sort { line-height: 32px; line-height: 2rem; margin: 0px 10px 10px 0px; margin: 0rem 0.625rem 0.625rem 0rem; width: 40%; } .action--sort .sort--label { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; display: inline-block; font-weight: 700; } .action--sort .sort--select { max-width: 200px; max-width: 12.5rem; vertical-align: top; } .action--per-page .per-page--label { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; display: inline-block; font-weight: 700; } .listing--paging { display: block; clear: both; } .listing--paging .paging--label { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; font-weight: 700; } .listing--paging .paging--display { line-height: 30px; line-height: 1.875rem; } } /* Product-box =============================== Defines the element styles of the Shopware product boxes. Shopware provides 3 product box types:<br/> `box-basic`<br/> `box-minimal`<br/> `box-image` ``` <div class="product--box"> <div class="box--content is--rounded"> <div class="product--info"> <a href="" class="product--image"> <!-- Article images --> </a> <div class="product--rating-container"> <!-- Product rating stars --> </div> <a href="" class="product--title" title=""> Product title </a> <div class="product--description"> Dux texo propino, hic tres, casus Ubertas, pax Alumnus catena, ut, acer tero an, per edo in is arx Arma querul. </div> <div class="product--price-info"> <div class="price--unit"> </div> <div class="product--price"> <span class="price--default is--nowrap"> 35,00 € </span> </div> </div> <div class="product--btn-container""> <!-- Product buy button </div> <div class="product--actions"> <!-- Product action links e.g. product compare </div> </div> </div> </div> ``` */ .product--box { display: block; width: 50%; padding: 2% 0 0 2%; float: left; /* Product Badges ========================================== Creates a corner product badge on a product-box. ``` <div class="product--box"> <div class="product--badges"> <div class="product--badge badge--discount"> <i class="icon--percent2"></i> </div> </div> </div> ``` */ } .product--box:after { content: ""; display: table; clear: both; } .product--box .box--content { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; height: 100%; border: 1px solid #dadae5; position: relative; } .product--box .product--image { height: 180px; height: 11.25rem; margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; display: block; text-align: center; } .product--box .product--image .image--element { height: 100%; width: 100%; display: block; margin: 0 auto; position: relative; } .product--box .product--image .image--element img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: inline-block; vertical-align: middle; z-index: 500; } .product--box .product--rating-container { height: 25px; height: 1.5625rem; display: block; } .product--box .product--title { height: 40px; height: 2.5rem; margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; font-size: 16px; font-size: 1rem; line-height: 20px; line-height: 1.25rem; display: block; width: 100%; color: #00141f; font-weight: 700; overflow: hidden; } .product--box .product--title:hover { color: #00476b; } .product--box .variant--description { height: 40px; height: 2.5rem; margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; font-size: 12px; font-size: 0.75rem; line-height: 20px; line-height: 1.25rem; display: block; width: 100%; color: #00141f; overflow: hidden; font-weight: 500; } .product--box .variant--description .variant--groupName { font-weight: 700; } .product--box .variant--description .variant--description--line { white-space: nowrap; } .product--box .product--description { height: 72px; height: 4.5rem; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; font-size: 14px; font-size: 0.875rem; line-height: 18px; line-height: 1.125rem; display: block; width: 100%; overflow: hidden; } .product--box .product--price-info { height: 40px; height: 2.5rem; } .product--box .product--price-info .price--unit { height: 20px; height: 1.25rem; font-size: 11px; font-size: 0.6875rem; line-height: 16px; line-height: 1rem; display: block; overflow: hidden; } .product--box .product--price { height: 20px; height: 1.25rem; } .product--box .product--price .price--default { font-size: 18px; font-size: 1.125rem; line-height: 20px; line-height: 1.25rem; display: inline-block; color: #00141f; font-weight: 700; } .product--box .product--price .price--default.is--discount { color: #e74c3c; } .product--box .product--price .price--pseudo { font-size: 12px; font-size: 0.75rem; line-height: 20px; line-height: 1.25rem; } .product--box .product--price .price--discount { font-size: 12px; font-size: 0.75rem; line-height: 20px; line-height: 1.25rem; display: inline-block; text-decoration: line-through; vertical-align: baseline; } .product--box .buybox--form { height: 42px; height: 2.625rem; margin-top: 7px; margin-top: 0.4375rem; } .product--box .buybox--form i.icon--basket { display: none; } .product--box .product--detail-btn { height: 42px; height: 2.625rem; margin-top: 7px; margin-top: 0.4375rem; } .product--box .product--actions { margin: 15px 0px 0px 0px; margin: 0.9375rem 0rem 0rem 0rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; overflow: auto; } .product--box .product--actions form { display: inline-block; } .product--box .product--action { background: none; border: none; margin: 0; padding: 0; margin: 0px 20px 0px 0px; margin: 0rem 1.25rem 0rem 0rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; display: inline-block; color: #00476b; word-break: keep-all; white-space: nowrap; } .product--box .product--action [class^="icon--"] { margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; font-size: 12px; font-size: 0.75rem; } .product--box .product--action:hover { color: #00476b; } .product--box .action--compare { display: none; } .product--box .action--note:focus { outline: none; } .product--box .action--note.js--is-saved { color: #2ecc71; } .product--box .product--badges { top: 20px; top: 1.25rem; left: -1px; left: -0.0625rem; position: absolute; z-index: 750; } .product--box .product--badges .product--badge { padding: 3px 10px 3px 10px; padding: 0.1875rem 0.625rem 0.1875rem 0.625rem; margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; font-size: 14px; font-size: 0.875rem; line-height: 16px; line-height: 1rem; border-top-left-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 0; background-clip: padding-box; display: block; float: left; position: relative; text-align: center; font-weight: 700; clear: both; } .product--box .product--badges .badge--discount { color: #ffffff; background: #e74c3c; } .product--box .product--badges .badge--recommend { color: #ffffff; background: #2ecc71; } .product--box .product--badges .badge--newcomer { color: #ffffff; background: #f1c40f; } .product--box .product--badges .badge--esd { background: #4aa3df; color: #ffffff; } .box--minimal { width: 50%; } .box--minimal .product--image { height: 120px; height: 7.5rem; } .box--minimal .product--price-info { height: 70px; height: 4.375rem; } .box--minimal .product--price-info .price--unit { height: 30px; height: 1.875rem; font-size: 10px; font-size: 0.625rem; line-height: 14px; line-height: 0.875rem; display: block; } .box--minimal .product--price-outer { height: 40px; height: 2.5rem; position: relative; } .box--minimal .product--price { line-height: 20px; line-height: 1.25rem; position: absolute; bottom: 0; left: 0; height: auto; } .box--minimal .product--price .price--default { font-size: 16px; font-size: 1rem; line-height: 20px; line-height: 1.25rem; margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; vertical-align: bottom; float: left; } .box--minimal .product--price .price--pseudo, .box--minimal .product--price .price--discount { font-size: 10px; font-size: 0.625rem; line-height: 14px; line-height: 0.875rem; } .box--minimal .buybox--form .buy-btn--cart-text { display: none; } .box--minimal .buybox--form i.icon--basket { left: 2px; left: 0.125rem; top: 1px; top: 0.0625rem; font-size: 14px; font-size: 0.875rem; display: inline-block; position: relative; } .box--image .product--image { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 200px; height: 12.5rem; } .box--image .product--info { padding: 0; } .box--slider { display: block; padding: 0; position: relative; text-align: center; float: none; } .box--slider:hover .product--title { color: #00476b; } .box--slider .box--content { border: 0 none; padding: 0; } .box--slider .product--price-info { height: auto; } .box--slider .product--price-info .price--unit { height: 14px; height: 0.875rem; font-size: 10px; font-size: 0.625rem; } .box--slider .product--price-info .price--default { font-size: 14px; font-size: 0.875rem; } .box--slider .product--price-info .is--discount { font-weight: 700; } .box--slider .product--image { height: 140px; height: 8.75rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin-bottom: 10px; margin-bottom: 0.625rem; display: block; text-align: center; position: relative; } .box--slider .image--element { height: 100%; width: 100%; display: block; margin: 0 auto; position: relative; } .box--slider .image--element img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: inline-block; vertical-align: middle; z-index: 500; } .box--slider .product--title { font-size: 14px; font-size: 0.875rem; height: 40px; height: 2.5rem; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; color: #00476b; font-weight: 500; white-space: normal; } .box--list .buybox--form { max-width: 280px; max-width: 17.5rem; } .box--list .product--detail-btn { max-width: 280px; max-width: 17.5rem; } @media screen and (min-width: 30em) { .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 160px; width: 10rem; } .box--basic .product--info { position: relative; padding: 0px 0px 0px 180px; padding: 0rem 0rem 0rem 11.25rem; } .box--minimal { width: 33.3%; } .box--image .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 50%; } .box--image .product--info { position: relative; padding-left: 52%; } .box--image .product--price-info { height: 60px; height: 3.75rem; } .box--image .product--price-info .price--unit { height: 40px; height: 2.5rem; } .box--list .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 180px; width: 11.25rem; } .box--list .product--info { position: relative; padding: 0px 0px 0px 200px; padding: 0rem 0rem 0rem 12.5rem; } } @media screen and (min-width: 48em) { .product--box .action--compare { display: inline-block; } .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 160px; width: 10rem; } .box--basic .product--info { position: relative; padding: 0px 0px 0px 180px; padding: 0rem 0rem 0rem 11.25rem; } .box--image .product--image { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 240px; height: 15rem; } .box--image .product--info { padding: 0; } .box--image .product--price-info { height: 40px; height: 2.5rem; } .box--image .product--price-info .price--unit { height: 20px; height: 1.25rem; } .is--ctl-search .box--basic, .is--ctl-listing.is--no-sidebar .box--basic { width: 50%; } .is--ctl-search .box--basic .product--image, .is--ctl-listing.is--no-sidebar .box--basic .product--image { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 180px; height: 11.25rem; } .is--ctl-search .box--basic .product--info, .is--ctl-listing.is--no-sidebar .box--basic .product--info { padding: 0; } .is--ctl-search .box--minimal, .is--ctl-listing.is--no-sidebar .box--minimal { width: 25%; } .is--ctl-search .box--minimal .product--image, .is--ctl-listing.is--no-sidebar .box--minimal .product--image { height: 180px; height: 11.25rem; } .is--ctl-search .box--image, .is--ctl-listing.is--no-sidebar .box--image { width: 50%; } .is--ctl-search .has--sidebar-filter .box--basic, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic { width: 100%; } .is--ctl-search .has--sidebar-filter .box--basic .product--image, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 160px; width: 10rem; } .is--ctl-search .has--sidebar-filter .box--basic .product--info, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info { position: relative; padding: 0px 0px 0px 180px; padding: 0rem 0rem 0rem 11.25rem; } .is--ctl-search .has--sidebar-filter .box--minimal, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--minimal { width: 33.3%; } } @media screen and (min-width: 64em) { .box--basic { width: 50%; } .box--basic .product--image { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 180px; height: 11.25rem; } .box--basic .product--info { padding: 0; } .box--minimal { width: 25%; } .box--image { width: 50%; } .box--image .product--image { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 280px; height: 17.5rem; } .box--image .product--info { padding: 0; } .is--ctl-search .box--basic .product--image, .is--ctl-listing.is--no-sidebar .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 170px; width: 10.625rem; } .is--ctl-search .box--basic .product--info, .is--ctl-listing.is--no-sidebar .box--basic .product--info { position: relative; padding: 0px 0px 0px 190px; padding: 0rem 0rem 0rem 11.875rem; } .is--ctl-search .box--minimal, .is--ctl-listing.is--no-sidebar .box--minimal { width: 20%; } .is--ctl-search .box--image, .is--ctl-listing.is--no-sidebar .box--image { width: 33.3%; } .is--ctl-search .has--sidebar-filter .box--basic, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic { width: 50%; } .is--ctl-search .has--sidebar-filter .box--basic .product--image, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 180px; height: 11.25rem; } .is--ctl-search .has--sidebar-filter .box--basic .product--info, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info { padding: 0; } .is--ctl-search .has--sidebar-filter .box--minimal, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--minimal { width: 25%; } } @media screen and (min-width: 78.75em) { .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 170px; width: 10.625rem; } .box--basic .product--info { position: relative; padding: 0px 0px 0px 190px; padding: 0rem 0rem 0rem 11.875rem; } .box--basic .box--content { padding: 20px 10px 20px 10px; padding: 1.25rem 0.625rem 1.25rem 0.625rem; } .box--minimal { width: 25%; } .box--minimal .buybox--form .buy-btn--cart-text { display: inline-block; } .box--minimal .buybox--form i.icon--basket { display: none; } .box--image .product--image { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; width: auto; position: relative; height: 300px; height: 18.75rem; } .box--image .product--info { padding: 0; } .is--ctl-search .box--minimal, .is--ctl-listing.is--no-sidebar .box--minimal { width: 20%; } .is--ctl-search .has--sidebar-filter .box--basic .product--image, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--image { height: 100%; margin: 0; position: absolute; top: 0; left: 0; width: 170px; width: 10.625rem; } .is--ctl-search .has--sidebar-filter .box--basic .product--info, .is--ctl-listing.is--no-sidebar .has--sidebar-filter .box--basic .product--info { position: relative; padding: 0px 0px 0px 190px; padding: 0rem 0rem 0rem 11.875rem; } } /* Last-viewed ============================================== Defines the styling of the `.viewlast` element. The viewlast element displays the users recently viewed products inside a slim element that is usually displayed at the bottom of the listing and detail pages. It contains a thumbnail image and the product name. */ .viewlast { clear: both; } /* Tell-a-friend ========================================== Contains the tell-a-friend element styling that can be used to share products. The option can be enabled in the Shopware backend and is disabled by default. */ .tellafriend--content { padding-top: 10px; padding-top: 0.625rem; width: 100%; } .tellafriend--content .tellafriend--field { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; width: 100%; } .tellafriend--content .tellafriend--buttons:after { content: ""; display: table; clear: both; } .tellafriend--content .captcha--placeholder { margin-bottom: 10px; margin-bottom: 0.625rem; } .tellafriend--content .captcha--notice { margin-bottom: 10px; margin-bottom: 0.625rem; display: block; } .tellafriend--content .alert { margin-top: 30px; margin-top: 1.875rem; } .tellafriend--content .review--notice { margin-bottom: 10px; margin-bottom: 0.625rem; font-size: 14px; font-size: 0.875rem; } @media screen and (min-width: 48em) { .tellafriend--content { padding-top: 20px; padding-top: 1.25rem; width: 100%; } .tellafriend--content .tellafriend--field { margin-bottom: 15px; margin-bottom: 0.9375rem; } .tellafriend--content .alert { margin: 0px 0px 16px 0px; margin: 0rem 0rem 1rem 0rem; } } @media screen and (min-width: 78.75em) { .tellafriend--content { padding-top: 45px; padding-top: 2.8125rem; } } /* Topseller ========================= The topseller element is a modified product slider that is used to display a selection of best selling articles inside a slim slider element. */ .topseller { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .topseller:after { content: ""; display: table; clear: both; } .topseller .topseller--content { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; } .topseller .product-slider--arrow.arrow--next { right: -1px; right: -0.0625rem; } .topseller .product-slider--arrow.arrow--prev { left: -1px; left: -0.0625rem; } .topseller--product { text-align: center; } .topseller--product:hover .badge { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); color: #fff; text-shadow: 0 1px 1px #AD1200; } .topseller--product:hover .product--title { color: #00476b; } .topseller--number { margin: 10px 0px 5px 0px; margin: 0.625rem 0rem 0.3125rem 0rem; } /* Register ========================================== Contains the styles of the registration process form and its components. The user can see the registration steps, advantages and required information. */ .register--content { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; width: 100%; display: none; } .register--content:after { content: ""; display: table; clear: both; } .register--content.is--collapsed { display: block; } .register--content .alert { margin: 20px 18px 20px 18px; margin: 1.25rem 1.125rem 1.25rem 1.125rem; } .register--content .register--check { padding-bottom: 8px; padding-bottom: 0.5rem; } .register--content .register--action { margin: 20px 20px 20px 20px; margin: 1.25rem 1.25rem 1.25rem 1.25rem; } .register--content .register--action .register--submit { width: 100%; text-align: center; } .register--content .register--required-info { padding-bottom: 30px; padding-bottom: 1.875rem; margin: 0px 26px 16px 26px; margin: 0rem 1.625rem 1rem 1.625rem; font-size: 14px; font-size: 0.875rem; } .register--content .select-field { margin-bottom: 10px; margin-bottom: 0.625rem; max-width: 100%; } .register--content .register--field { margin-bottom: 10px; margin-bottom: 0.625rem; width: 100%; } .register--content .register--customertype { display: block; } .register--content .register--zip-city .register--field-zipcode { width: 28%; float: left; } .register--content .register--zip-city .register--field-city { width: 70%; float: left; } .register--content .register--zip-city .register--field-city:after { content: ""; display: table; clear: both; } .register--content .register--zip-city .register--spacer { margin-right: 2%; } .register--content .birthday--label { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; display: block; font-weight: 700; } .register--content .birthday--label:after { content: ""; display: table; clear: both; } .register--content .register--password-description { padding-bottom: 20px; padding-bottom: 1.25rem; } .register--content .register--birthdate .select-field { margin-bottom: 15px; margin-bottom: 0.9375rem; max-width: 100%; float: left; } .register--content .register--birthdate .register--birthyear, .register--content .register--birthdate .register--birthyear.select-field { margin-right: 0px; margin-right: 0rem; } .register--content .register--privacy { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; margin: 0px 20px 20px 20px; margin: 0rem 1.25rem 1.25rem 1.25rem; font-size: 14px; font-size: 0.875rem; border: 1px solid #dadae5; } .register--content .register--privacy input[type="checkbox"] { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; } .register--content .register--personal { padding-bottom: 10px; padding-bottom: 0.625rem; } .register--content .register--personal:after { content: ""; display: table; clear: both; } .register--login:after { content: ""; display: table; clear: both; } .register--login .register--new-customer { margin: 20px 0px 20px 0px; margin: 1.25rem 0rem 1.25rem 0rem; } .register--login .register--new-customer .new-customer-btn { display: block; width: 100%; text-align: center; position: relative; } .register--login .register--new-customer .new-customer-btn:after { width: 16px; width: 1rem; height: 16px; height: 1rem; line-height: 16px; line-height: 1rem; margin-top: -8px; margin-top: -0.5rem; font-size: 6px; font-size: 0.375rem; right: 10px; right: 0.625rem; position: absolute; font-family: 'shopware'; font-weight: 500; content: "\e612"; color: inherit; top: 50%; } .register--login .register--new-customer .new-customer-btn.is--active:after { content: "\e610"; } .register--login .register--login-field { margin-bottom: 10px; margin-bottom: 0.625rem; width: 100%; } .register--login .register--login-description { padding-bottom: 20px; padding-bottom: 1.25rem; } .register--login .register--login-lostpassword { padding-bottom: 20px; padding-bottom: 1.25rem; } .register--login .register--login-btn { width: 100%; text-align: center; } .register--advantages { display: none; } .password--success { margin: 10px 0px 20px 0px; margin: 0.625rem 0rem 1.25rem 0rem; } .steps--container { background: transparent; } .steps--content { padding-top: 16px; padding-top: 1rem; display: table; border-top: 1px solid #dadae5; width: 100%; } .steps--content .steps--list { display: table-row; } .steps--content .steps--list:after { content: ""; display: table; clear: both; } .steps--content .steps--entry { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; display: table-cell; list-style: none; vertical-align: top; text-align: center; } .steps--content .steps--spacer { display: none; vertical-align: middle; } .steps--content .steps--entry .icon { background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 100%); border-radius: 22px; background-clip: padding-box; padding: 10px 16px 10px 16px; padding: 0.625rem 1rem 0.625rem 1rem; width: 46px; width: 2.875rem; font-size: 20px; font-size: 1.25rem; display: inline-block; text-align: center; color: #fff; font-weight: 700; } .steps--content .is--active .icon { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); color: #fff; } .steps--content .steps--entry .text { margin: 0px 0px 0px 10px; margin: 0rem 0rem 0rem 0.625rem; height: 52px; height: 3.25rem; position: relative; top: -2px; display: none; vertical-align: middle; } .steps--content .steps--entry .text::after { content: ''; height: 100%; } .steps--content .is--active .text { color: #00476b; display: inline-block; font-weight: 700; } .steps--content .steps--entry .text--inner, .steps--content .steps--entry .text::after { display: inline-block; vertical-align: middle; } .account--change-payment .payment--method { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .account--change-payment .payment--selection-input { width: 40px; width: 2.5rem; float: left; text-align: center; } .account--change-payment .payment--selection-label, .account--change-payment .payment--description, .account--change-payment .payment--content { padding: 0px 0px 0px 40px; padding: 0rem 0rem 0rem 2.5rem; width: 100%; } .account--change-payment .payment--content input { max-width: 100%; } @media screen and (min-width: 48em) { .register--content { margin-top: 50px; margin-top: 3.125rem; width: 64%; float: right; display: block; } .register--content .select-field { margin-bottom: 15px; margin-bottom: 0.9375rem; } .register--content .select-field .register--birthday { margin-right: 2%; } .register--content .register--field { margin-bottom: 15px; margin-bottom: 0.9375rem; } .register--content .register--check { padding-bottom: 8px; padding-bottom: 0.5rem; } .register--content .select-field { max-width: 290px; max-width: 18.125rem; } .register--content .register--birthdate .select-field { width: 32%; margin-right: 2%; } .register--content .register--action { text-align: right; } .register--content .register--action .register--submit { width: 35%; } .steps--content { padding: 30px 0px 24px 0px; padding: 1.875rem 0rem 1.5rem 0rem; background: transparent; border: none; } .steps--content .steps--spacer { width: 80px; width: 5rem; display: table-cell; text-align: center; } .steps--content .steps--entry .text { margin: 0px 10px 0px 10px; margin: 0rem 0.625rem 0rem 0.625rem; display: inline-block; font-weight: 700; } .register--login { margin-top: 50px; margin-top: 3.125rem; width: 34%; float: left; } .register--login .register--new-customer { display: none; } .register--login .register--login-field { margin-bottom: 15px; margin-bottom: 0.9375rem; } .register--login .register--login-btn { width: auto; text-align: left; } .register--advantages { display: block; width: 34%; float: left; } .register--advantages:after { content: ""; display: table; clear: both; } .register--advantages .panel--title { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } } @media screen and (min-width: 78.75em) { .steps--content .steps--entry.step--payment { width: 30%; } .steps--content .steps--entry .text { margin: 0px 0px 0px 10px; margin: 0rem 0rem 0rem 0.625rem; width: 70%; text-align: left; } .steps--content .steps--spacer { width: 15%; } } /* Shopping cart ============================================== Defines the basic styling of the Shopware 5 shopping cart element. Shopware offers two different shopping cart element options that can be selected in the Shopware backend. **Shopping Cart options:** [`off-canvas cart`](./_components-offcanvas-menu.html>) [`collapse-cart`](./_components-collapse-cart.html>) */ .is--ctl-checkout .panel--body > .alert { margin: 30px 0px 30px 0px; margin: 1.875rem 0rem 1.875rem 0rem; } .is--ctl-checkout .basket--info-messages { margin-top: 10px; 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: 20px 20px 0px 20px; padding: 1.25rem 1.25rem 0rem 1.25rem; } .is--act-shippingpayment .payment--method-list { margin-top: 10px; margin-top: 0.625rem; } .product--table { margin-top: 10px; margin-top: 0.625rem; } .product--table .alert { margin-bottom: 10px; margin-bottom: 0.625rem; } .product--table .is--no-star { margin-left: -6px; margin-left: -0.375rem; } .product--table .panel { border: 0 none; } .product--table .panel--body { padding: 0; } .product--table .premium-product.panel { margin: 10px 0px 0px 0px; margin: 0.625rem 0rem 0rem 0rem; border: 1px solid #dadae5; } .product--table .delivery--status-icon { display: none; } .product--table .table--actions { margin-top: 10px; 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: 10px; margin-bottom: 0.625rem; } .product--table .actions--bottom .main--actions { margin-bottom: 0px; margin-bottom: 0rem; } .product--table .table--header { display: none; } .product--table .table--tr { padding: 10px 0px 8px 0px; padding: 0.625rem 0rem 0.5rem 0rem; position: relative; border-bottom: 1px solid #dadae5; width: 100%; height: 100%; } .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: 10px 0px 10px 0px; 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: 70px; max-width: 4.375rem; max-height: 70px; max-height: 4.375rem; border: 1px solid #dadae5; 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: 12px; font-size: 0.75rem; width: 70%; } .product--table .delivery--status-icon { font-size: 12px; font-size: 0.75rem; margin: 0; } .product--table .delivery--information { font-size: 14px; font-size: 0.875rem; } .product--table .content--title { font-size: 16px; font-size: 1rem; font-weight: 700; color: #00476b; } .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: 40px; line-height: 2.5rem; padding: 0px 14px 0px 15px; padding: 0rem 0.875rem 0rem 0.9375rem; } .product--table .column--actions .icon--cross { font-size: 12px; font-size: 0.75rem; } .product--table .column--label { color: #00141f; text-align: left; margin: 0%; float: left; font-weight: 700; } .product--table .column--label.quantity--label { margin-top: 11px; 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: 70px; 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: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; width: 24%; } .product--table .row--rebate .table--content, .product--table .row--premium-product .table--content { padding-top: 21px; 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: 100px; min-width: 6.25rem; max-width: 160px; 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: 5px 0px 5px 10px; padding: 0.3125rem 0rem 0.3125rem 0.625rem; margin-left: 22%; width: 78%; } .product--table .column--quantity { padding: 0px 0px 0px 10px; padding: 0rem 0rem 0rem 0.625rem; } .product--table .column--unit-price { padding: 0px 0px 9px 10px; padding: 0rem 0rem 0.5625rem 0.625rem; } .product--table .product--delivery { margin: 0; } .product--table .cart--badge { border-radius: 3px 0 0 3px; background-clip: padding-box; display: block; position: absolute; width: 20px; height: 100%; top: 0; left: 0; background: #00476b; } .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: 48px; line-height: 3rem; font-size: 16px; font-size: 1rem; border-radius: 128px; background-clip: padding-box; height: 48px; height: 3rem; width: 48px; width: 3rem; margin: 0 auto; text-align: center; font-weight: 700; background: #00476b; color: #fff; } .product--table .basket--badge .icon--arrow-right { font-size: 13px; font-size: 0.8125rem; } .product--table .basket--badge .icon--coupon { font-size: 28px; font-size: 1.75rem; line-height: 50px; line-height: 3.125rem; } .product--table .row--premium-product .basket--badge { font-size: 11px; font-size: 0.6875rem; } .product--table .table--actions + .alert { margin-top: 10px; margin-top: 0.625rem; } .product--table .content { font-size: 14px; font-size: 0.875rem; margin: 0; } .product--table .add-product--form { margin: 20px 0px 20px 0px; 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: 38px; height: 2.375rem; width: 90%; } .product--table .add-voucher--field { background: #fff; } .product--table .add-product--button, .product--table .add-voucher--button { height: 38px; height: 2.375rem; padding: 3px 0px 3px 0px; 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: 0px 0px 12px 0px; margin: 0rem 0rem 0.75rem 0rem; } .product--table .add-voucher--panel { margin: 10px 0px 0px 0px; margin: 0.625rem 0rem 0rem 0rem; } .product--table .table--aggregation { margin: 0px -10px 0px -10px; margin: 0rem -0.625rem 0rem -0.625rem; padding: 12px 10px 12px 10px; padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #f8f8fa; border-color: #dadae5; 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: 38px; height: 2.375rem; line-height: 36px; 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: 14px; font-size: 0.875rem; } .product--table .table--footer .benefit--text { font-size: 14px; font-size: 0.875rem; } .product--table .benefit--headline { font-size: 14px; font-size: 0.875rem; color: #00141f; font-weight: 700; } .aggregation--list { margin: 0px -10px 0px -10px; margin: 0rem -0.625rem 0rem -0.625rem; padding: 12px 10px 12px 10px; padding: 0.75rem 0.625rem 0.75rem 0.625rem; background: #f8f8fa; border-bottom: 1px solid #dadae5; } .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: #00141f; } .aggregation--list .entry--totalnet, .aggregation--list .entry--taxes { font-size: 12px; font-size: 0.75rem; } .premium-product.panel { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; } .premium-product--content { height: 320px; height: 20rem; } .premium-product--content .product-slider--container { padding: 0; } .premium-product p { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; } .premium-product .premium-product--difference { border-color: #dadae5; display: block; } .premium-product .premium-product--difference .difference--price { font-size: 14px; font-size: 0.875rem; } .premium-product .product-slider--arrow.arrow--next { right: -1px; right: -0.0625rem; } .premium-product .product-slider--arrow.arrow--prev { left: -1px; left: -0.0625rem; } .premium-product .product--inner { padding: 5px 30px 5px 30px; padding: 0.3125rem 1.875rem 0.3125rem 1.875rem; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .premium-product .product--inner .product--image { border-radius: 3px; background-clip: padding-box; height: 175px; height: 10.9375rem; margin: 0px 0px 15px 0px; margin: 0rem 0rem 0.9375rem 0rem; padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; display: block; border: 1px solid #dadae5; position: relative; text-align: center; } .premium-product .product--inner .product--image .image--element { height: 100%; width: 100%; display: block; margin: 0 auto; position: relative; } .premium-product .product--inner .product--image .image--element img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: inline-block; vertical-align: middle; z-index: 500; } .premium-product .product--inner .premium-product--badge { border-radius: 38px; background-clip: padding-box; height: 38px; height: 2.375rem; width: 38px; width: 2.375rem; line-height: 38px; line-height: 2.375rem; top: -19px; top: -1.1875rem; right: -19px; right: -1.1875rem; background: #00476b; 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: 38px; height: 2.375rem; margin-left: -2px; margin-left: -0.125rem; width: 20%; } .premium-product .product--inner .premium--variant .select-field { margin-right: 2px; 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: 38px; line-height: 2.375rem; height: 38px; height: 2.375rem; font-weight: 700; } .premium-product .product--inner .premium--variant .select-field:after { height: 36px; height: 2.25rem; } .js--modal .modal--checkout-add-article .link--article-image .image--media { display: block; width: 100%; height: 100%; position: relative; } .js--modal .modal--checkout-add-article .link--article-image .image--media img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .js--modal .modal--checkout-add-article .modal--title { padding: 10px 40px 10px 20px; padding: 0.625rem 2.5rem 0.625rem 1.25rem; font-size: 16px; font-size: 1rem; font-weight: 700; border-bottom: 1px solid #dadae5; } .js--modal .modal--checkout-add-article .modal--error { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .js--modal .modal--checkout-add-article .modal--article { padding: 20px; padding: 1.25rem; } .js--modal .modal--checkout-add-article .article--info { margin-left: 80px; 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: 5px; padding: 0.3125rem; width: 80px; width: 5rem; height: 80px; height: 5rem; border-radius: 3px; background-clip: padding-box; float: left; border: 1px solid #dadae5; } .js--modal .modal--checkout-add-article .article--name { width: 100%; } .js--modal .modal--checkout-add-article .list--name { margin-left: 15px; margin-left: 0.9375rem; } .js--modal .modal--checkout-add-article .list--name .entry--name { margin-bottom: 10px; margin-bottom: 0.625rem; } .js--modal .modal--checkout-add-article .list--name .link--name { color: #00476b; font-weight: 700; } .js--modal .modal--checkout-add-article .article--price { margin: 15px 0px 0px 15px; margin: 0.9375rem 0rem 0rem 0.9375rem; width: 100%; } .js--modal .modal--checkout-add-article .list--price .entry--price { margin-bottom: 10px; margin-bottom: 0.625rem; color: #00476b; font-weight: 700; } .js--modal .modal--checkout-add-article .modal--actions { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; padding: 10px 20px 0px 20px; 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: 10px; margin-top: 0.625rem; } .js--modal .modal--checkout-add-article .modal--actions .is--left { padding-left: 35px; padding-left: 2.1875rem; } .js--modal .modal--checkout-add-article .modal--cross-selling { padding: 0px 20px 20px 20px; 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: 10px; padding-bottom: 0.625rem; height: 170px; height: 10.625rem; border-bottom: 1px solid #dadae5; margin: 0 auto; text-align: center; } .js--modal .modal--checkout-add-article .modal--cross-selling .link--image, .js--modal .modal--checkout-add-article .modal--cross-selling .link--image span { overflow: hidden; display: block; height: 100%; } .js--modal .modal--checkout-add-article .modal--cross-selling .link--image img { margin: 0 auto; } .js--modal .modal--checkout-add-article .modal--cross-selling .image--slider-item, .js--modal .modal--checkout-add-article .modal--cross-selling .image--no-picture { display: inline-block; vertical-align: middle; text-align: center; } .js--modal .modal--checkout-add-article .modal--cross-selling .link--name { color: #00141f; font-weight: 700; } .js--modal .modal--checkout-add-article .modal--cross-selling .item--price-unit { font-size: 11px; font-size: 0.6875rem; } .js--modal .modal--checkout-add-article .modal--cross-selling .price--normal { font-size: 17px; font-size: 1.0625rem; color: #00141f; 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: 10px; font-size: 0.625rem; text-decoration: line-through; } .content--confirm .alert { margin-top: 10px; margin-top: 0.625rem; } .content--confirm .has--border { border: 1px solid #dadae5; } .content--confirm .confirm--actions .main--actions { text-align: center; width: 100%; } .content--confirm .payment--method-list, .content--confirm .dispatch--method-list { margin-bottom: 10px; margin-bottom: 0.625rem; } .content--confirm .payment--method, .content--confirm .dispatch--method { padding-bottom: 10px; padding-bottom: 0.625rem; margin-bottom: 10px; margin-bottom: 0.625rem; border-bottom: 1px solid #dadae5; } .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: 40px; width: 2.5rem; text-align: center; float: left; } .content--confirm .method--label { padding-left: 40px; padding-left: 2.5rem; width: 100%; } .content--confirm .method--description { padding-left: 40px; padding-left: 2.5rem; } .content--confirm .payment--method-logo { margin-left: 40px; margin-left: 2.5rem; } .content--confirm .method--bankdata { padding-left: 40px; 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: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; margin: 0px -10px 0px -10px; margin: 0rem -0.625rem 0rem -0.625rem; border-top: 1px solid #dadae5; } @media screen and (min-width: 30em) { .product--table .column--label { text-align: right; width: 100%; margin: 0; } .product--table .table--tr { padding: 10px 0px 20px 0px; 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: 0px; 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: 10px; padding-right: 0.625rem; margin-left: 13.5%; } .product--table .column--quantity .quantity--label { margin: 0px 0px 3px 0px; 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: 10px; padding-right: 0.625rem; margin: 0; } .product--table .column--unit-price .unit-price--label { margin-bottom: 12px; margin-bottom: 0.75rem; } .product--table .column--total-price { padding: 0px 10px 5px 10px; padding: 0rem 0.625rem 0.3125rem 0.625rem; margin: 0; } .product--table .column--total-price .total-price--label { margin-bottom: 12px; margin-bottom: 0.75rem; } .product--table .column--tax-price { margin: 0; } .product--table .column--tax-price .tax-price--label { margin-bottom: 12px; 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: 10px; 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: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; padding: 10px 20px 0px 20px; 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: 35px; padding-left: 2.1875rem; } } @media screen and (min-width: 48em) { .is--ctl-checkout .basket--info-messages { margin: 20px 0px 4px 0px; 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: 20px; margin-top: 1.25rem; } .is--act-shippingpayment .payment--method-list { margin-top: 0; } .is--act-shippingpayment .basket--footer .aggregation--list { padding-right: 20px; padding-right: 1.25rem; } .product--table { margin: 20px 0px 20px 0px; margin: 1.25rem 0rem 1.25rem 0rem; } .product--table .alert { margin-bottom: 20px; margin-bottom: 1.25rem; } .product--table .row--voucher, .product--table .row--premium-product { height: 100%; } .product--table .panel--body { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; border: 1px solid #dadae5; } .product--table .premium-product--content { height: 330px; height: 20.625rem; border: 0 none; } .product--table .premium-product.panel { margin: 20px 0px 0px 0px; 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: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; border-bottom: 1px solid #dadae5; display: block; } .product--table .table--header .table--column { font-size: 16px; font-size: 1rem; padding-bottom: 0; font-weight: 700; color: #00141f; } .product--table .table--header .panel--th { padding: 5px 10px 9px 10px; padding: 0.3125rem 0.625rem 0.5625rem 0.625rem; font-size: 16px; 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 #dadae5; } .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: 10px 10px 10px 10px; 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: 0px 0px 0px 16px; padding: 0rem 0rem 0rem 1rem; } .product--table .column--unit-price, .product--table .column--total-price { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 14.5%; } .product--table .row--product .column--quantity { padding-top: 26px; padding-top: 1.625rem; } .product--table .row--product .column--unit-price, .product--table .row--product .column--total-price { line-height: 42px; line-height: 2.625rem; padding-top: 26px; padding-top: 1.625rem; } .product--table .row--product .column--actions { padding-top: 26px; padding-top: 1.625rem; } .product--table .content--title { font-size: 16px; font-size: 1rem; font-weight: 700; color: #00476b; } .product--table .column--total-price { float: left; font-weight: 700; } .product--table .basket--badge { width: 48px; 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: 13px; padding-top: 0.8125rem; } .product--table .row--rebate .table--content, .product--table .row--premium-product .table--content { padding-top: 21px; padding-top: 1.3125rem; } .product--table .row--rebate .column--total-price, .product--table .row--premium-product .column--total-price { padding-top: 22px; padding-top: 1.375rem; } .product--table .row--voucher .column--total-price { padding-top: 22px; 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: 15px 0px 20px 0px; 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: 0px -20px -20px -20px; margin: 0rem -1.25rem -1.25rem -1.25rem; border-top: 1px solid #dadae5; background: #f8f8fa; } .product--table .basket--footer:after { content: ""; display: table; clear: both; } .product--table .aggregation--list, .product--table .table--aggregation { padding: 20px 20px 20px 20px; 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: 20px; padding-bottom: 1.25rem; margin: 0; } .product--table .table--actions .is--secondary { margin-right: 20px; margin-right: 1.25rem; } .product--table .table--actions .btn--inquiry { margin-left: -130px; margin-left: -8.125rem; width: 260px; 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: 0px; margin-bottom: 0rem; } .product--table .actions--bottom .main--actions { margin-top: 20px; margin-top: 1.25rem; } .product--table .table--footer { display: block; } .footer--benefit { font-size: 14px; font-size: 0.875rem; padding: 0px 20px 0px 0px; 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: 20px; margin-bottom: 1.25rem; } .content--confirm .confirm--inner-container .panel--body { border: 0 none; } .content--confirm .confirm--inner-container .has--border { border: 1px solid #dadae5; } .content--confirm .confirm--inner-container .basket--footer { border: 1px solid #dadae5; 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: 45px 0px 0px 0px; margin: 2.8125rem 0rem 0rem 0rem; } .is--act-shippingpayment .product--table { margin-top: 25px; margin-top: 1.5625rem; } .product--table { margin-top: 45px; 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: 21px; padding-top: 1.3125rem; } .product--table .row--product .column--actions { padding-top: 34px; padding-top: 2.125rem; } .product--table .table--tr .column--actions .column--actions-link { line-height: 18px; line-height: 1.125rem; padding: 0px 5px 2px 5px; padding: 0rem 0.3125rem 0.125rem 0.3125rem; } .product--table .table--tr .column--actions .icon--cross { font-size: 9px; 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: 20px; margin-top: 1.25rem; } .finish--content { padding-top: 10px; padding-top: 0.625rem; } .finish--content .information--panel-item { margin-bottom: 20px; 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: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .teaser--btn-back { margin: 0px 0px 20px 0px; 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: 4px 0px 0px 0px; margin: 0.25rem 0rem 0rem 0rem; float: left; } .finish--table .panel--body { border: 1px solid #dadae5; } .finish--table .table--tr { padding: 10px 10px 10px 10px; 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 #dadae5; } .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: 12px; 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: 40px; margin-top: 2.5rem; } .finish--content { padding-top: 20px; padding-top: 1.25rem; } .finish--content .information--panel-wrapper { margin: -2% 0 0 -2%; margin-bottom: 20px; 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: 0px 20px 0px 0px; margin: 0rem 1.25rem 0rem 0rem; width: auto; } .finish--table { margin: 20px 0px 0px 0px; margin: 1.25rem 0rem 0rem 0rem; } .finish--table .table--header .panel--th { padding-right: 0; } .finish--table .panel--body { padding: 20px 20px 20px 20px; 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: 42px; 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: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } } @media screen and (min-width: 64em) { .finish--content .information--panel-wrapper { margin-bottom: 20px; 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: 45px; 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: 9px; font-size: 0.5625rem; } .footer-minimal a, .footer-main a { color: #00476b; } } /* 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: 10px 0px 0px 0px; margin: 0.625rem 0rem 0rem 0rem; } .partner-statistic .panel--title { padding-bottom: 20px; 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: 24px; font-size: 1.5rem; margin: 10px 0px 20px 0px; margin: 0.625rem 0rem 1.25rem 0rem; } .account--logout .logout--actions { margin-bottom: 10px; margin-bottom: 0.625rem; } .account--logout .logout-back-to-shop { display: block; } .account--menu .link--logout { font-weight: 700; color: #00476b; } .account--menu .navigation--logout-personalized { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account--box { margin: 0px 0px 20px 0px; 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: 20px; margin-bottom: 1.25rem; } .account--welcome .panel--body { padding: 0; } .account--welcome .panel--title { padding: 20px 0px 20px 0px; padding: 1.25rem 0rem 1.25rem 0rem; margin: 0; } .account--welcome .panel--actions { padding: 0; } .account--error, .account--success { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .register--error-msg { color: #e74c3c; } .account--actions { margin: 0px 20px 20px 16px; 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: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; } .account--paging { padding: 10px 10px 10px 10px; 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 #dadae5; } .account--orders-overview p { font-size: 14px; font-size: 0.875rem; } .account--orders-overview .orders--table-header { display: none; background: #ffffff; } .account--orders-overview .orders--table-header .panel--th { color: #00141f; } .account--orders-overview .panel--tr { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .account--orders-overview .panel--td { padding: 5px 10px 5px 10px; 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: 5px 10px 0px 0px; 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: 5px 10px 0px 0px; 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: 0px 0px 16px 0px; padding: 0rem 0rem 1rem 0rem; } .is--act-partnerStatistic .account--welcome { padding: 0px 0px 0px 10px; padding: 0rem 0rem 0rem 0.625rem; } .is--act-partnerStatistic .listing--actions { padding: 10px 18px 24px 18px; padding: 0.625rem 1.125rem 1.5rem 1.125rem; border-bottom: 1px solid #dadae5; } .is--act-partnerStatistic .date-filter { font-size: 14px; font-size: 0.875rem; height: 50px; height: 3.125rem; display: block; width: 100%; } .is--act-partnerStatistic .date-filter--label { padding: 9px 0px 10px 0px; padding: 0.5625rem 0rem 0.625rem 0rem; width: 40px; width: 2.5rem; display: block; float: left; } .is--act-partnerStatistic .date-filter--input { margin: 0px 0px 0px 40px; margin: 0rem 0rem 0rem 2.5rem; width: auto; } .is--act-partnerStatistic .datepicker { padding-right: 35px; padding-right: 2.1875rem; width: 100%; float: left; } .is--act-partnerStatistic .ui-datepicker-trigger { width: 20px; width: 1.25rem; height: 20px; height: 1.25rem; margin: 10px 0px 0px -30px; margin: 0.625rem 0rem 0rem -1.875rem; display: inline; border: 0; background: transparent; text-align: center; color: #00476b; 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: 8px 10px 7px 10px; 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: 3px 10px 2px 10px; padding: 0.1875rem 0.625rem 0.125rem 0.625rem; font-size: 12px; font-size: 0.75rem; color: #00476b; } .is--act-partnerStatistic .is--odd { padding: 0px 0px 9px 0px; padding: 0rem 0rem 0.5625rem 0rem; border-bottom: 1px solid #dadae5; } .is--act-partnerStatistic .is--odd .column--price, .is--act-partnerStatistic .is--odd .column--total { padding: 10px 10px 10px 10px; 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: 8px; width: 0.5rem; height: 8px; height: 0.5rem; top: 8px; 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: #00141f; } .order--details, .order--price-unit, .order--current-price { display: none; } .order--details .panel--tr { border-bottom: 1px solid #dadae5; } .order--repeat { text-align: center; background: #f5f5f8; border-bottom: 1px solid #dadae5; } .order--actions { text-align: center !important; } .order--user-comments, .order--shop-comments { border-bottom: 1px solid #dadae5; } .account--downloads { border: 1px solid #dadae5; } .account--downloads p { font-size: 14px; font-size: 0.875rem; } .account--downloads .downloads--table-header { display: none; } .account--downloads .panel--tr { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .account--downloads .panel--td { padding: 5px 10px 5px 10px; 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: 10px; margin-top: 0.625rem; } .account--password-reset p { margin: 0; } .account--password-reset .password-reset--input { margin: 0px 0px 30px 0px; 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: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .account--password-new { margin-top: 10px; margin-top: 0.625rem; } .account--password-new .password-new--input { margin-bottom: 15px; 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: 0px; margin: 0rem; padding-top: 30px; 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: 20px; margin-bottom: 1.25rem; } .account--profile .js--loading { width: 18px; width: 1.125rem; height: 18px; height: 1.125rem; border-radius: 100%; background-clip: padding-box; margin: 0px 0px 0px 5px; margin: 0rem 0rem 0rem 0.3125rem; top: 4px; top: 0.25rem; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; border: 2px solid #dadae5; border-top: 2px solid #4f4f71; display: inline-block; position: relative; } .account--profile .panel { margin-bottom: 20px; margin-bottom: 1.25rem; } .account--profile .required-info { font-size: 14px; font-size: 0.875rem; } .account--profile .select-field { margin-bottom: 10px; margin-bottom: 0.625rem; max-width: 100%; } .account--profile .profile--field { margin-bottom: 10px; 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: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; display: block; font-weight: 700; } .account--profile .profile--birthdate:after { content: ""; display: table; clear: both; } .account--profile .profile--birthdate .select-field { margin-bottom: 15px; margin-bottom: 0.9375rem; max-width: 100%; float: left; } .account--profile .profile--birthdate .profile--birthyear, .account--profile .profile--birthdate .profile--birthyear.select-field { margin-right: 0px; 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: 10px; margin-top: 0.625rem; } .account--password-reset .password-reset--input { margin: 10px 0px 30px 0px; margin: 0.625rem 0rem 1.875rem 0rem; } .account--password-reset .password-reset--link { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; width: auto; } .account--password-reset .password-reset--link:first-child { margin: 0px 10px 0px 0px; 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: 30px 0px 0px 0px; margin: 1.875rem 0rem 0rem 0rem; } .account--content.is--wide { width: 100%; } .account--password-reset { margin: 20px 0px 0px 0px; margin: 1.25rem 0rem 0rem 0rem; } .account--password-new { margin-top: 20px; margin-top: 1.25rem; } .account--password-new .password-new--input { width: 320px; width: 20rem; } .account--menu { border: 1px solid #dadae5; } .account--menu .navigation--headline { padding: 20px 0px 0px 0px; padding: 1.25rem 0rem 0rem 0rem; margin: 0px 20px 0px 20px; margin: 0rem 1.25rem 0rem 1.25rem; font-size: 16px; font-size: 1rem; display: block; font-weight: 700; color: #00141f; padding: 20px 0px 10px 0px; padding: 1.25rem 0rem 0.625rem 0rem; text-decoration: none !important; border-bottom: 1px solid #dadae5; } .account--menu .navigation--headline.is--underline { padding: 20px 0px 10px 0px; padding: 1.25rem 0rem 0.625rem 0rem; border-bottom: 1px solid #dadae5; text-decoration: none !important; } .account--menu .navigation--headline.is--secondary { color: #00476b; } .account--menu .navigation--headline.is--primary { color: #00476b; } .account--menu .account--menu-container { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; display: block; position: relative; padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; } .account--menu .account--menu-container.has--border { border: 1px solid #dadae5; } .account--menu .account--menu-container.is--slim { padding: 5px 5px 5px 5px; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } .account--menu .account--menu-container.is--wide { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .account--menu .account--menu-container.is--flat { background: #f5f5f8; } .account--menu .account--menu-container.is--embossed { box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); background: #f5f5f8; } .account--menu .navigation--list { padding: 0; border: 0 none; } .account--menu .navigation--entry { margin: 0; border: 0 none; } .account--menu .navigation--link { padding: 5px 0px 5px 0px; padding: 0.3125rem 0rem 0.3125rem 0rem; } .account--menu .navigation--link.link--logout { margin: 10px 0px 0px 0px; margin: 0.625rem 0rem 0rem 0rem; padding: 10px 0px 0px 0px; padding: 0.625rem 0rem 0rem 0rem; border-top: 1px solid #dadae5; font-weight: 700; color: #00476b; } .account--menu .navigation--link.link--logout [class^="icon--"] { margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; display: inline-block; } .account--welcome .panel--title { font-size: 26px; font-size: 1.625rem; } .account--orders-overview .orders--table-header { display: block; } .account--orders-overview .panel--tr { padding: 0; border-width: 0 0 1px 0; } .account--orders-overview .panel--tr.order--repeat { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .account--orders-overview .panel--td { padding: 10px 10px 10px 10px; 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: 12px; font-size: 0.75rem; } .order--download, .order--price-unit, .order--current-price { display: block !important; } .order--download { margin: 10px 0px 0px 0px; 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: #00141f; } .account--downloads .panel--tr { padding: 0; border-width: 0 0 1px 0; } .account--downloads .panel--td { padding: 10px 10px 10px 10px; 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: 320px; width: 20rem; } .account--error, .account--success { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .is--act-partnerStatistic .content-main--inner { padding: 0px 20px 16px 20px; padding: 0rem 1.25rem 1rem 1.25rem; } .is--act-partnerStatistic .account--welcome { padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } .is--act-partnerStatistic .listing--actions { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; border-radius: 3px; background-clip: padding-box; border: 1px solid #dadae5; background: #f8f8fa; } .is--act-partnerStatistic .date-filter { padding: 0px 10px 0px 10px; 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: 10px 10px 10px 10px; 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: 0px; margin: 0rem; } .account--profile .select-field { margin-bottom: 15px; margin-bottom: 0.9375rem; } .account--profile .profile--field { margin-bottom: 15px; margin-bottom: 0.9375rem; } .account--profile .select-field { max-width: 290px; 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: 20px 0px 0px 0px; margin: 1.25rem 0rem 0rem 0rem; } .account--info .panel--body, .account--payment .panel--body { height: 120px; 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: 0px 45px 45px 45px; padding: 0rem 2.8125rem 2.8125rem 2.8125rem; } .account--profile { padding-top: 45px; padding-top: 2.8125rem; } .account--content { margin: 45px 0px 0px 0px; margin: 2.8125rem 0rem 0rem 0rem; } .account--password-reset { margin: 45px 0px 0px 0px; margin: 2.8125rem 0rem 0rem 0rem; } .account--password-new { margin-top: 45px; margin-top: 2.8125rem; } .account--error, .account--success { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } } .partner-statistic .account--welcome { margin-bottom: 0; } .partner-statistic .partner-statistic-body { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .partner-statistic .date-filter { display: inline-block; } .partner-statistic .date-filter--input { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .partner-statistic .ui-datepicker-trigger { padding: 2px 10px 2px 10px; padding: 0.125rem 0.625rem 0.125rem 0.625rem; line-height: 32px; line-height: 2rem; border-radius: 3px; background-clip: padding-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 14px; font-size: 0.875rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); -webkit-font-smoothing: inherit; display: inline-block; position: relative; font-weight: 700; text-decoration: none; text-align: left; cursor: pointer; border: 1px solid #dadae5; color: #00476b; /** Button icon font size */ /** Larger icon */ /* ######Icon alignment To work properly the button needs the class `is--icon-left` or `is--icon-right` and an `icon` inside it. ``` <button class="btn is--icon-left"> <i class="icon--account"></i> Icon left </button> <button class="btn is--icon-right"> <i class="icon--account"></i> Icon right </button> ``` */ /* ######Button size class Adding a button-size class creates a larger or smaller button or changes the button properies. Options: `is--large`, `is--small`, `is--full`, `is--center` ``` <button class="btn is--large"> Large button </button> <button class="btn is--small"> Small button </button> ``` */ /** State: Small button */ /** State: Medium button */ /** State: Large button */ /** State: Button with 100% width */ /** State: Button with text align center */ padding: 10px 10px 9px 10px; padding: 0.625rem 0.625rem 0.5625rem 0.625rem; margin: 0px 25px 0px 0px; margin: 0rem 1.5625rem 0rem 0rem; line-height: 20px; line-height: 1.25rem; } .partner-statistic .ui-datepicker-trigger [class^="icon--"] { font-size: 10px; font-size: 0.625rem; } .partner-statistic .ui-datepicker-trigger .is--large { font-size: 16px; font-size: 1rem; } .partner-statistic .ui-datepicker-trigger.is--icon-right { padding-right: 36px; padding-right: 2.25rem; } .partner-statistic .ui-datepicker-trigger.is--icon-right [class^="icon--"] { height: 16px; height: 1rem; line-height: 32px; line-height: 2rem; margin: -16px 0px 0px 0px; margin: -1rem 0rem 0rem 0rem; right: 12px; right: 0.75rem; font-weight: 500; display: block; position: absolute; top: 50%; } .partner-statistic .ui-datepicker-trigger.is--icon-left { padding-left: 36px; padding-left: 2.25rem; } .partner-statistic .ui-datepicker-trigger.is--icon-left [class^="icon--"] { height: 16px; height: 1rem; line-height: 32px; line-height: 2rem; margin: -16px 0px 0px 0px; margin: -1rem 0rem 0rem 0rem; left: 12px; left: 0.75rem; font-weight: 500; display: block; position: absolute; top: 50%; } .partner-statistic .ui-datepicker-trigger:disabled, .partner-statistic .ui-datepicker-trigger:disabled:hover, .partner-statistic .ui-datepicker-trigger.is--disabled, .partner-statistic .ui-datepicker-trigger.is--disabled:hover { opacity: 0.5; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); border: 1px solid #dadae5; color: #00476b; cursor: not-allowed; } .partner-statistic .ui-datepicker-trigger:hover { background: #ffffff; color: #00476b; border-color: #00476b; } .partner-statistic .ui-datepicker-trigger:focus { outline: none; } .partner-statistic .ui-datepicker-trigger.is--small { line-height: 28px; line-height: 1.75rem; } .partner-statistic .ui-datepicker-trigger.is--medium { line-height: 32px; line-height: 2rem; height: 38px; height: 2.375rem; } .partner-statistic .ui-datepicker-trigger.is--large { line-height: 36px; line-height: 2.25rem; height: 42px; height: 2.625rem; } .partner-statistic .ui-datepicker-trigger.is--full { display: block; } .partner-statistic .ui-datepicker-trigger.is--center { text-align: center; } /* Note ============================================== Contains the styling of the note page inside Shopware 5. The users can add an article to their note list if they are interested in the product and the product will be saved inside the list if the user is logged in inside their account. The articles are displayed inside a slim product box with an article thumbnail and the general item information. The styling also contains the viewport specific styles inside media queries. */ .note--content { margin: 20px 0px 20px 0px; margin: 1.25rem 0rem 1.25rem 0rem; } .note--overview .panel--td { padding: 0; } .note--item { padding: 20px 0px 20px 0px; padding: 1.25rem 0rem 1.25rem 0rem; position: relative; } .note--info, .note--sale { width: 80%; } .note--image-container { width: 75px; width: 4.6875rem; margin: 0px 20px 20px 0px; margin: 0rem 1.25rem 1.25rem 0rem; display: table-row; float: left; } .note--image-link { width: 75px; width: 4.6875rem; height: 75px; height: 4.6875rem; padding: 5px 5px 5px 5px; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; line-height: 65px; line-height: 4.0625rem; border-radius: 3px; background-clip: padding-box; display: table-cell; text-align: center; vertical-align: middle; border: 1px solid #dadae5; } .note--image { max-width: 65px; max-width: 4.0625rem; max-height: 65px; max-height: 4.0625rem; margin: 0 auto; } .note--title { margin: 0px 0px 5px 95px; margin: 0rem 0rem 0.3125rem 5.9375rem; font-size: 18px; font-size: 1.125rem; display: block; font-weight: 700; color: #00141f; } .note--title:hover { color: #00476b; } .note--rating { margin: 0px 0px 10px 95px; margin: 0rem 0rem 0.625rem 5.9375rem; } .note--rating [class^="icon--"] { color: #f1c40f; } .note--supplier { display: none; } .note--ordernumber, .note--date, .note--overview .product--rating { margin: 0px 0px 0px 95px; margin: 0rem 0rem 0rem 5.9375rem; display: block; } .note--delivery { margin: 0px 0px 0px 95px; margin: 0rem 0rem 0rem 5.9375rem; } .note--delivery .delivery--status-icon { display: none; } .note--delivery .delivery--text-available { display: block; } .note--compare { margin: 10px 0px 0px 95px; margin: 0.625rem 0rem 0rem 5.9375rem; display: none; } .note--compare .compare--link { background: none; border: none; margin: 0; padding: 0; color: #00476b; } .note--compare .compare--link:hover { color: #00476b; } .note--compare [class^="icon--"] { margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; font-size: 12px; font-size: 0.75rem; } .note--price-unit { margin: 5px 0px 0px 95px; margin: 0.3125rem 0rem 0rem 5.9375rem; font-size: 12px; font-size: 0.75rem; line-height: 18px; line-height: 1.125rem; display: block; } .note--price { font-size: 18px; font-size: 1.125rem; margin: 15px 0px 0px 95px; margin: 0.9375rem 0rem 0rem 5.9375rem; color: #00141f; font-weight: 700; } .note--delete { width: 40px; width: 2.5rem; height: 40px; height: 2.5rem; font-size: 10px; font-size: 0.625rem; line-height: 38px; line-height: 2.375rem; background-color: #ffffff; background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8fa 100%); border-radius: 3px; background-clip: padding-box; top: 20px; top: 1.25rem; right: 0; left: auto; display: block; position: absolute; border: 1px solid #dadae5; text-align: center; font-weight: 500; color: #00476b; } .note--delete:hover { color: #00476b; border-color: #00476b; } @media screen and (min-width: 48em) { .note--overview .panel--table { padding: 0px 20px 0px 20px; padding: 0rem 1.25rem 0rem 1.25rem; border: 1px solid #dadae5; } .note--compare { display: block; } } @media screen and (min-width: 64em) { .note--info { padding-right: 20px; padding-right: 1.25rem; width: 70%; } .note--sale { padding-right: 55px; padding-right: 3.4375rem; width: 30%; } .note--zoom { font-size: 12px; font-size: 0.75rem; display: block; color: #00476b; text-align: center; } .note--zoom:hover { color: #00476b; } .note--title { margin: 0px 0px 5px 105px; margin: 0rem 0rem 0.3125rem 6.5625rem; } .note--supplier, .note--ordernumber, .note--date, .note--overview .product--rating { margin: 0px 0px 0px 105px; margin: 0rem 0rem 0rem 6.5625rem; display: block; } .note--delivery { margin: 0px 0px 0px 105px; margin: 0rem 0rem 0rem 6.5625rem; } .note--compare { margin: 5px 0px 0px 0px; margin: 0.3125rem 0rem 0rem 0rem; } .note--price { margin: 0; } .note--price-unit { padding-right: 50px; padding-right: 3.125rem; margin: 5px 0px 0px 0px; margin: 0.3125rem 0rem 0rem 0rem; } } @media screen and (min-width: 78.75em) { .note--content { margin: 45px 0px 0px 0px; margin: 2.8125rem 0rem 0rem 0rem; } } /* Forms ========================================== Defines the general form element styles. It contains the components as: `capacha`, `description`, `required information` etc. */ .forms--content { width: 100%; } .forms--content .forms--headline { margin-bottom: 20px; margin-bottom: 1.25rem; } .forms--content .forms--headline .forms--title { margin-top: 0px; margin-top: 0rem; } .forms--content .forms--headline .forms--text p { margin-bottom: 12px; margin-bottom: 0.75rem; } .forms--content .alert { margin: 30px 0px 0px 0px; margin: 1.875rem 0rem 0rem 0rem; } .forms--content .forms--field { margin-bottom: 5px; margin-bottom: 0.3125rem; width: 100%; } .forms--content input { margin-bottom: 10px; margin-bottom: 0.625rem; width: 100%; } .forms--content input[type="checkbox"] { width: auto; } .forms--content textarea { margin-bottom: 10px; margin-bottom: 0.625rem; width: 100%; } .forms--content .field--select { margin-bottom: 10px; margin-bottom: 0.625rem; } .forms--content .btn { float: right; } .forms--content .buttons:after { content: ""; display: table; clear: both; } .forms--content .strasse { margin-right: 2%; width: 80%; float: left; } .forms--content .nr { width: 18%; float: left; } .forms--content .plz { margin-right: 2%; width: 28%; float: left; } .forms--content .ort { width: 70%; float: left; } .forms--content .ort:after { content: ""; display: table; clear: both; } .forms--content .forms--required { font-size: 12px; font-size: 0.75rem; margin-bottom: 10px; margin-bottom: 0.625rem; } .forms--content .forms--description { margin: -8px 0px 10px 0px; margin: -0.5rem 0rem 0.625rem 0rem; clear: both; } .forms--content .forms--captcha strong.captcha--notice { margin-bottom: 8px; margin-bottom: 0.5rem; display: block; } .forms--content .forms--checkbox label { top: -2px; top: -0.125rem; position: relative; } .forms--content .forms--checkbox input[type="checkbox"] { width: auto; } @media screen and (min-width: 48em) { .forms--content { margin-top: 45px; margin-top: 2.8125rem; } .forms--content input { margin-bottom: 15px; margin-bottom: 0.9375rem; } .forms--content textarea { margin-bottom: 15px; margin-bottom: 0.9375rem; } .forms--content .forms--captcha strong.captcha--notice { margin-bottom: 16px; margin-bottom: 1rem; } } @media screen and (min-width: 78.75em) { .forms--content { margin-top: 45px; margin-top: 2.8125rem; } .forms--content .alert { margin: 0px 0px 0px 0px; margin: 0rem 0rem 0rem 0rem; } } /* Sitemap ========================================== Contains the styles for the the Sitemap. The sitemap page shows all categories and subpages of the shop in an overview. The sitemap link is located in the footer information column. */ .sitemap--content { margin-top: 10px; margin-top: 0.625rem; } .sitemap--content .sitemap--headline { margin-bottom: 10px; margin-bottom: 0.625rem; } .sitemap--content .sitemap--headline .sitemap--title { margin-top: 0; } .sitemap--content .sitemap--headline .sitemap--headline-text { margin-bottom: 0px; margin-bottom: 0rem; } .sitemap--content .sitemap--category { padding-bottom: 10px; padding-bottom: 0.625rem; margin-bottom: 16px; margin-bottom: 1rem; min-height: 60px; min-height: 3.75rem; background-color: #f8f8fa; } .sitemap--content .sitemap--category .sitemap--navigation-link { padding: 4px 0px 4px 20px; padding: 0.25rem 0rem 0.25rem 1.25rem; color: #00476b; display: block; } .sitemap--content .sitemap--category .sitemap--navigation-link:hover { color: #00476b; } .sitemap--content .sitemap--navigation-entry-inner .sitemap--navigation-link { padding-left: 35px; padding-left: 2.1875rem; } .sitemap--content .sitemap--navigation-head { padding: 4px 10px 4px 10px; padding: 0.25rem 0.625rem 0.25rem 0.625rem; margin-bottom: 8px; margin-bottom: 0.5rem; background: #8ed300; } .sitemap--content .sitemap--navigation-head .sitemap--navigation-head-link { color: #fff; } @media screen and (min-width: 48em) { .sitemap--content { margin-top: 20px; margin-top: 1.25rem; } .sitemap--content .sitemap--headline { margin-bottom: 20px; margin-bottom: 1.25rem; } .sitemap--content .sitemap--category { width: 49%; float: left; margin-right: 2%; } .sitemap--content .sitemap--category:last-child, .sitemap--content .sitemap--category:nth-child(2) { margin-right: 0px; margin-right: 0rem; } } @media screen and (min-width: 64em) { .sitemap--content .sitemap--category { width: 24%; float: left; margin-right: 1.25%; } .sitemap--content .sitemap--category:last-child { margin-right: 0px; margin-right: 0rem; } .sitemap--content .sitemap--category:nth-child(2) { margin-right: 1.25%; } } @media screen and (min-width: 78.75em) { .sitemap--content { margin-top: 45px; margin-top: 2.8125rem; } } /* Search ========================================== Contains the styles for the main search-box component of the Shopware storefront. The styling defines the search result page layout and its components. It contains the viewport specific styles inside media queries. */ .search--content { padding: 40px 0px 0px 0px; padding: 2.5rem 0rem 0rem 0rem; } .search--headline { margin: 0px 0px 40px 0px; margin: 0rem 0rem 2.5rem 0rem; text-align: center; } .search--cat-filter { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .search--cat-filter .cat-filter--headline { padding: 0px 0px 5px 0px; padding: 0rem 0rem 0.3125rem 0rem; margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; font-size: 16px; font-size: 1rem; line-height: 24px; line-height: 1.5rem; border-bottom: 1px solid #dadae5; } .search--cat-filter .cat-filter--reset { margin: 0px 0px 15px 0px; margin: 0rem 0rem 0.9375rem 0rem; line-height: 24px; line-height: 1.5rem; border-color: #00476b; } .search--cat-filter .cat-filter--reset [class^="icon--"] { top: -1px; top: -0.0625rem; margin-right: 10px; margin-right: 0.625rem; font-size: 8px; font-size: 0.5rem; position: relative; } .search--cat-filter .cat-filter--active-path { margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .search--cat-filter .cat-filter--label { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; font-weight: 700; } .search--cat-filter .cat-filter--path { white-space: nowrap; } .search--cat-filter .cat-filter--path [class^="icon--"] { margin: 0px 20px 0px 20px; margin: 0rem 1.25rem 0rem 1.25rem; font-size: 10px; font-size: 0.625rem; } .search--cat-filter .cat-filter--link, .search--cat-filter .cat-filter--sub-cat { color: #00476b; } .search--cat-filter .cat-filter--link:hover, .search--cat-filter .cat-filter--sub-cat:hover { color: #00476b; } .search--cat-filter .cat-filter--link .checkbox, .search--cat-filter .cat-filter--sub-cat .checkbox { margin: 0px 5px 0px 0px; margin: 0rem 0.3125rem 0rem 0rem; top: -1px; top: -0.0625rem; position: relative; } .search--cat-filter .cat-filter--sub-cat { width: 180px; width: 11.25rem; line-height: 24px; line-height: 1.5rem; margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; display: block; } @media screen and (min-width: 48em) { .search--cat-filter { margin: 0px 0px 40px 0px; margin: 0rem 0rem 2.5rem 0rem; } } @media screen and (min-width: 78.75em) { .search--content { padding: 45px 0px 0px 0px; padding: 2.8125rem 0rem 0rem 0rem; } } /* Custom pages ============================================== Defines the layout for the custom pages. The styling defines the basic layout of the Shopware 5 custom pages that can be created and customized for multiple purposes. */ .custom-page--content { margin-top: 10px; margin-top: 0.625rem; } .custom-page--content ul, .custom-page--content ol { padding-left: 20px; padding-left: 1.25rem; } .custom-page--content .custom-page--tab-headline { margin-top: 0px; margin-top: 0rem; font-size: 24px; font-size: 1.5rem; } .custom-page--content .content--custom.panel--body { padding: 20px; padding: 1.25rem; } .custom-page--content .is--active-parent { display: block; } .ajax-modal--custom { padding: 8px 8px 8px 8px; padding: 0.5rem 0.5rem 0.5rem 0.5rem; } @media screen and (min-width: 48em) { .custom-page--content { margin-top: 30px; margin-top: 1.875rem; } .custom-page--content .custom-page--tab-headline { margin-top: 10px; margin-top: 0.625rem; } .ajax-modal--custom { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; } } @media screen and (min-width: 78.75em) { .ajax-modal--custom { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .custom-page--content { margin-top: 45px; 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: 8px 0px 0px 0px; margin: 0.5rem 0rem 0rem 0rem; } .confirm--content .body--revocation { font-weight: 700; } .confirm--content .panel { margin: 8px 0px 8px 0px; 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: #00476b; padding-bottom: 0; } .confirm--content .product--table .table--tr, .confirm--content .product--table .table--media img { border-color: #dadae5; } .confirm--content .product--table .basket--footer { margin: 0px -10px 0px -10px; margin: 0rem -0.625rem 0rem -0.625rem; background: #f8f8fa; border-color: #dadae5; } .confirm--content .product--table .basket--footer .aggregation--list { margin: 0; background: transparent; border-top: 1px solid #dadae5; } .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: 0px 0px 9px 10px; padding: 0rem 0rem 0.5625rem 0.625rem; } .confirm--content .agb_info, .confirm--content .list--checkbox { margin: 0px 0px 21px 0px; 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: 12px 0px 12px 0px; 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: 5px 0px 5px 0px; 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: 20px 0px 10px 0px; margin: 1.25rem 0rem 0.625rem 0rem; } .confirm--content .table--actions .btn { width: 100%; } .confirm--content .table-footer--country-notice { margin: 11px 0px 0px 0px; margin: 0.6875rem 0rem 0rem 0rem; } .confirm--content .table--aggregation { display: none; } .confirm--content .js--loading { width: 18px; width: 1.125rem; height: 18px; height: 1.125rem; border-radius: 100%; background-clip: padding-box; right: 6px; right: 0.375rem; top: 2px; top: 0.125rem; margin: 8px 5px 8px 5px; 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 #dadae5; border-top: 2px solid #4f4f71; display: block; position: absolute; } .confirm--content .payment--panel .payment--method-info, .confirm--content .payment--panel .shipping--method-info { margin-bottom: 10px; 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: 15px; 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: 20px; margin-top: 1.25rem; padding-top: 20px; 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: 10px; 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: 10px; 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: 20px 0px 0px 0px; margin: 1.25rem 0rem 0rem 0rem; } .confirm--content .panel { margin: 20px 0px 20px 0px; margin: 1.25rem 0rem 1.25rem 0rem; } .confirm--content .product--table .table--header { background: #ffffff; border-color: #dadae5; } .confirm--content .product--table .table--header .panel--th { color: #00141f; } .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: 42px; line-height: 2.625rem; padding-top: 26px; padding-top: 1.625rem; } .confirm--content .product--table .panel--body { padding-bottom: 20px; padding-bottom: 1.25rem; } .confirm--content .product--table .basket--footer { margin: 0px -20px -20px -20px; 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: 21px; 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: 12px; 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: 12px; 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--group { width: 40%; margin: 0 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: 95px; 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: 20px; 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: 25px; padding-top: 1.5625rem; } .confirm--content > .alert { margin: 45px 0px 0px 0px; margin: 2.8125rem 0rem 0rem 0rem; } .confirm--content .product--table .row--premium-product .column--product, .confirm--content .product--table .row--rebate .column--product { width: 58%; } .confirm--content .product--table .row--premium-product .column--image, .confirm--content .product--table .row--rebate .column--image { width: 11.3%; } .confirm--content .product--table .row--premium-product .column--tax-price, .confirm--content .product--table .row--rebate .column--tax-price { margin-left: 0; } .confirm--content .product--table .aggregation--list { padding-right: 9.6%; } } /* Newsletter ========================================== Contains the styles of the newsletter sign-up page and the form element inside it. It contains the viewport specific styles inside media queries. */ .newsletter--content { padding-top: 10px; padding-top: 0.625rem; } .newsletter--content:after { content: ""; display: table; clear: both; } .newsletter--content .newsletter--error-messages { margin-bottom: 10px; margin-bottom: 0.625rem; } .newsletter--content .newsletter--headline { margin-bottom: 10px; margin-bottom: 0.625rem; } .newsletter--content .newsletter--headline .newsletter--title { margin-top: 10px; margin-top: 0.625rem; } .newsletter--content .newsletter--headline .newsletter--info { margin: 0; } .newsletter--content .select-field { margin-bottom: 10px; margin-bottom: 0.625rem; max-width: 100%; } .newsletter--content .newsletter--required-info { margin-bottom: 16px; margin-bottom: 1rem; } .newsletter--content .newsletter--action:after { content: ""; display: table; clear: both; } .newsletter-listing--content { margin-top: 10px; margin-top: 0.625rem; } .newsletter-listing--content .newsletter-listing--headline { margin-bottom: 10px; margin-bottom: 0.625rem; } .newsletter-listing--content .newsletter--title { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name { width: 65%; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button { width: 35%; } .newsletter-listing--content .newsletter-listing--entry { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; border-bottom: 1px solid #dadae5; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description { margin-top: 4px; margin-top: 0.25rem; width: 65%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button { width: 35%; } .newsletter-listing--content .newsletter-listing--entry:last-child { border: none; } .newsletter-detail--content { margin-top: 10px; margin-top: 0.625rem; } .newsletter-detail--content .newsletter-detail--container:after { content: ""; display: table; clear: both; } .newsletter-detail--content .newsletter-detail--container .newsletter-detail--iframe { overflow: auto; -webkit-overflow-scrolling: touch; } .newsletter-detail--content .newsletter-detail--container .newsletter-detail--iframe iframe { min-height: 500px; min-height: 31.25rem; width: 100%; border: none; outline: none; } .newsletter-detail--content .newsletter-detail--buttons { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; } .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--backlink { width: 100%; } .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window { margin-bottom: 10px; margin-bottom: 0.625rem; width: 100%; } @media screen and (min-width: 30em) { .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name { width: 80%; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button { width: 20%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description { width: 80%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button { width: 20%; } .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--backlink, .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window { width: auto; margin: 0; } } @media screen and (min-width: 48em) { .newsletter--content { padding-top: 20px; padding-top: 1.25rem; } .newsletter--content .newsletter--error-messages { margin-bottom: 20px; margin-bottom: 1.25rem; } .newsletter--content .newsletter--headline { margin-bottom: 20px; margin-bottom: 1.25rem; } .newsletter--content .select-field { margin-bottom: 15px; margin-bottom: 0.9375rem; max-width: 290px; max-width: 18.125rem; } .newsletter-listing--content { margin-top: 20px; margin-top: 1.25rem; } .newsletter-listing--content .newsletter-listing--headline { margin-bottom: 20px; margin-bottom: 1.25rem; } .newsletter-detail--content { margin-top: 20px; margin-top: 1.25rem; } .newsletter-detail--content .newsletter-detail--buttons .newsletter-detail--window { width: auto; text-align: right; } } @media screen and (min-width: 78.75em) { .newsletter--error-messages { padding-top: 0px; padding-top: 0rem; } .newsletter--content { margin-top: 45px; margin-top: 2.8125rem; padding: 0; } .newsletter--content .newsletter--headline .newsletter--title { margin-top: 0px; margin-top: 0rem; } .newsletter-listing--content { margin-top: 45px; margin-top: 2.8125rem; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-name { width: 90%; } .newsletter-listing--content .newsletter-listing--table-headline .newsletter-listing--headline-button { width: 10%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-description { width: 90%; } .newsletter-listing--content .newsletter-listing--entry .newsletter-listing--entry-button { width: 10%; } .newsletter-detail--content { margin-top: 45px; margin-top: 2.8125rem; } } /* Blog ================================================ Defines the styles for the blog page and its components. It contains the sidebar selection, the comment section and the details. More precise designations are commented inside the document. */ .blog--listing { margin-top: 16px; margin-top: 1rem; } .blog--filter-btn { margin-bottom: 20px; margin-bottom: 1.25rem; } .blog--filter-btn .filter--trigger { display: block; } .blog--filter-options { border-right: 1px solid #dadae5; } .blog--filter-options .filter--container { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; } .blog--filter-options .blog--filter-close-btn { padding: 12px 10px 12px 10px; padding: 0.75rem 0.625rem 0.75rem 0.625rem; background-color: #8ed300; background-image: linear-gradient(to bottom, #8ed300 0%, #5b8600 100%); display: block; color: #fff; font-weight: 700; } .blog--filter-options .blog--filter-close-btn:hover { color: #fff; } .blog--filter-options .blog--filter-close-btn .icon--arrow-right { margin: 3px 0px 0px 0px; margin: 0.1875rem 0rem 0rem 0rem; float: right; } .blog--filter-options .blog--subscribe { display: none; } .blog--filter-options .filter--headline { font-size: 16px; font-size: 1rem; line-height: 26px; line-height: 1.625rem; margin: 16px 10px 6px 10px; margin: 1rem 0.625rem 0.375rem 0.625rem; font-weight: 700; color: #00141f; } .blog--filter-options .filter--entry { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; font-size: 16px; font-size: 1rem; display: block; border-bottom: 1px solid #dadae5; } .blog--filter-options .filter--entry:last-child { border: 0 none; } .blog--filter-options .filter--link { color: #00476b; } .blog--filter-options .filter--link:hover { color: #00476b; } .blog--sidebar { width: 100%; } .blog--sidebar .block-group { width: 100%; } .blog--sidebar .blog--navigation .has--border { border: none; } .blog--sidebar .blog--navigation .collapse--header { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; margin-bottom: 5px; margin-bottom: 0.3125rem; font-weight: 500; color: #00476b; } .blog--sidebar .blog--navigation .collapse--header:hover { color: #00476b; } .blog--sidebar .blog--navigation .is--active { color: #fff; font-weight: 700; } .blog--sidebar .blog--navigation .is--active:hover { color: #fff; } .blog--sidebar .blog--navigation .collapse--content { padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } .blog--sidebar .blog--navigation .collapse--content .filter--entry-link { color: #00476b; } .blog--sidebar .blog--navigation .collapse--content .filter--entry-link:hover { color: #00476b; } .blog--sidebar .blog--filter-content, .blog--sidebar .blog--subscribe-content { display: none; } .blog--sidebar .blog--filter-content.is--active, .blog--sidebar .blog--subscribe-content.is--active { display: block; } .blog--sidebar .blog--filter-tags:after { content: ""; display: table; clear: both; } .blog--box { margin-bottom: 20px; margin-bottom: 1.25rem; } .blog--box:after { content: ""; display: table; clear: both; } .blog--box .blog--box-metadata { padding-bottom: 14px; padding-bottom: 0.875rem; padding-top: 5px; padding-top: 0.3125rem; font-size: 12px; font-size: 0.75rem; margin: 0px 20px 0px 20px; margin: 0rem 1.25rem 0rem 1.25rem; border-bottom: 1px solid #dadae5; } .blog--box .blog--box-metadata .blog--metadata { padding-right: 8px; padding-right: 0.5rem; margin-right: 8px; margin-right: 0.5rem; display: inline-block; border-right: 1px solid #dadae5; } .blog--box .blog--box-metadata .blog--metadata:last-child { border-right: 0 none; } .blog--box .blog--box-metadata .blog--metadata-rating { font-size: 14px; font-size: 0.875rem; color: #00476b; } .blog--box .blog--box-headline { font-size: 18px; font-size: 1.125rem; } .blog--box .blog--box-link { color: #00141f; } .blog--box .blog--box-link:hover { color: #00476b; } .blog--box .blog--box-picture { display: block; height: auto; width: 100%; } .blog--box .blog--picture-preview { width: 100%; } .blog--box .blog--box-description { margin-top: 16px; margin-top: 1rem; } .blog--box .blog--box-description .blog--box-description-short { margin-bottom: 16px; margin-bottom: 1rem; margin-top: -6px; margin-top: -0.375rem; } .blog--box .blog--box-tags { margin-top: 8px; margin-top: 0.5rem; font-size: 12px; font-size: 0.75rem; } .blog--detail { margin-top: 10px; margin-top: 0.625rem; } .blog--detail ul, .blog--detail ol { padding-left: 30px; padding-left: 1.875rem; } .blog--detail .listing { margin: 0; } .blog--detail .blog--box { margin-bottom: 0; } .blog--detail .blog--detail-header { margin-bottom: 20px; margin-bottom: 1.25rem; } .blog--detail .blog--detail-headline { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; } .blog--detail .blog--detail-headline, .blog--detail .blog--detail-box-headline { font-size: 18px; font-size: 1.125rem; } .blog--detail .select-field { max-width: 100%; } .blog--detail .blog--rating-link { font-size: 14px; font-size: 0.875rem; color: #00476b; } .blog--detail .blog--bookmarks-icons { margin-top: 10px; margin-top: 0.625rem; float: right; } .blog--detail .blog--bookmark { font-size: 40px; font-size: 2.5rem; } .blog--detail .blog--detail-thumbnails { margin-bottom: 10px; margin-bottom: 0.625rem; } .blog--detail .blog--detail-thumbnails .blog--thumbnail-image { margin: 0 auto; } .blog--detail .blog--detail-thumbnails .block { height: 80px; height: 5rem; width: 23%; } .blog--detail .blog--image { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 100%; } .blog--detail .blog--thumbnail { padding: 5px 5px 5px 5px; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; margin: 2% 1%; display: block; float: left; } .blog--detail .blog--thumbnail:first-child { margin-left: 0; } .blog--detail .blog--thumbnail:last-child { margin-right: 0; } .blog--detail .blog--comments-wrapper { padding: 20px 0px 20px 0px; padding: 1.25rem 0rem 1.25rem 0rem; } .blog--detail .blog--comments { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; } .blog--detail .blog--comments .comments--actions .btn--create-entry { width: 100%; } .blog--detail .blog--comments .comments--list { margin-top: 30px; margin-top: 1.875rem; } .blog--detail .blog--comments .list--entry { margin-top: 10px; margin-top: 0.625rem; } .blog--detail .blog--comments .list--entry:after { content: ""; display: table; clear: both; } .blog--detail .blog--comments .entry--meta { width: 100%; } .blog--detail .blog--comments .entry--meta .meta--rating { margin-bottom: 5px; margin-bottom: 0.3125rem; } .blog--detail .blog--comments .entry--content { width: 100%; } .blog--detail .blog--comments .content--headline { margin: 10px 0px 5px 0px; margin: 0.625rem 0rem 0.3125rem 0rem; font-size: 16px; font-size: 1rem; } .blog--detail .blog--comments-headline { font-size: 21px; font-size: 1.3125rem; margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; } .blog--detail .blog--comments-entry { margin-bottom: 20px; margin-bottom: 1.25rem; } .blog--detail .blog--comments-entry:last-child { margin: 0; } .blog--detail .blog--comments-entry-left { padding: 20px 40px 16px 40px; padding: 1.25rem 2.5rem 1rem 2.5rem; border-bottom: 1px solid #dadae5; } .blog--detail .blog--comments-entry-left::after { margin: 0px 0px 0px -9px; margin: 0rem 0rem 0rem -0.5625rem; width: 18px; width: 1.125rem; height: 18px; height: 1.125rem; bottom: -9px; bottom: -0.5625rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; position: absolute; left: 50%; background: #fff; border: 1px solid #dadae5; border-left: 0 none; border-top: 0 none; } .blog--detail .blog--comments-rating { font-size: 18px; font-size: 1.125rem; color: #f1c40f; } .blog--detail .blog--comments-entry-right { padding: 20px 40px 16px 40px; padding: 1.25rem 2.5rem 1rem 2.5rem; } .blog--detail .blog--comments-entry-headline { font-size: 16px; font-size: 1rem; color: #00141f; margin-top: 0; } .blog--detail .blog--comments-form .form--comment-add { margin-top: 20px; } .blog--detail .blog--comments-form-errors .alert { margin: 20px 0px 20px 0px; margin: 1.25rem 0rem 1.25rem 0rem; } .blog--detail .blog--comments-voting { margin-bottom: 10px; margin-bottom: 0.625rem; line-height: 1; } .blog--detail .collapse--soft-hidden { display: none; } .blog--detail .collapse--soft-show { display: block; } @media screen and (min-width: 48em) { .blog--listing { margin-top: 16px; margin-top: 1rem; } .blog--listing .panel--title { margin: 0px 20px 0px 20px; margin: 0rem 1.25rem 0rem 1.25rem; } .blog--listing .panel--body { padding-left: 20px; padding-left: 1.25rem; padding-right: 20px; padding-right: 1.25rem; } .blog--box .blog--box-metadata { font-size: 14px; font-size: 0.875rem; } .blog--box .blog--box-picture { width: 20%; float: left; } .blog--box .blog--box-description { padding-top: 0; margin-top: 0; width: 76%; float: right; } .blog--box .blog--box-tags { font-size: 14px; font-size: 0.875rem; } .blog--content { margin-top: 45px; margin-top: 2.8125rem; } .blog--content .blog--navigation { padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } .blog--content .blog--navigation .has--border { border: 1px solid #dadae5; } .blog--content .blog--navigation .blog--sidebar-title { padding: 20px 0px 10px 0px; padding: 1.25rem 0rem 0.625rem 0rem; margin: 0px 20px 0px 20px; margin: 0rem 1.25rem 0rem 1.25rem; border-radius: 0; color: #00141f; border-color: #dadae5; border-width: 0 0 1px 0; display: block; font-weight: 700; background: none; box-shadow: none; cursor: default; } .blog--content .blog--navigation .blog--sidebar-body { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; border: 0 none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .blog--content .blog--navigation .collapse--header:hover { color: #00141f; } .blog--content .blog--navigation .blog--subscribe { display: block; } .blog--content .blog--navigation .blog--subscribe-content, .blog--content .blog--navigation .blog--filter-content { display: block; } .blog--content .filter--container { padding: 0; } .blog--content .blog--filter-btn { display: none; } .blog--content .blog--filter-options { display: block; float: right; width: 20%; border: none; background: none; } .blog--content .blog--filter-options .filter--group { margin: 0px 0px 16px 0px; margin: 0rem 0rem 1rem 0rem; width: 100%; height: auto; } .blog--content .blog--filter-options .filter--entry { font-size: 14px; font-size: 0.875rem; padding: 0; border: 0 none; } .blog--content .blog--filter-options .blog--filter-close-btn { display: none; } .blog--content .blog--filter-options .filter--headline { display: none; } .blog--content .filter--expand-collapse { display: none; } .blog--content .blog--listing { margin-top: 0; width: 78%; float: left; } .blog--content .blog--box .blog--box-headline { font-size: 18px; font-size: 1.125rem; } .blog--content .blog--box .blog--box-link { color: #00141f; } .blog--content .blog--box .blog--box-link:hover { color: #00476b; } .blog--content .blog--box .blog--box-metadata { padding-top: 5px; padding-top: 0.3125rem; } .blog--content .blog--box .blog--box-content .blog--box-description { width: 74%; } .blog--detail { margin-top: 30px; margin-top: 1.875rem; } .blog--detail .blog--detail-headline { font-size: 18px; font-size: 1.125rem; margin-bottom: 5px; margin-bottom: 0.3125rem; } .blog--detail .blog--box-metadata, .blog--detail .panel--title { margin: 0; } .blog--detail .panel--body { padding-left: 0; padding-right: 0; } .blog--detail .blog--detail-thumbnails { margin-bottom: 10px; margin-bottom: 0.625rem; } .blog--detail .blog--detail-thumbnails .blog--thumbnail-image { margin: 0 auto; } .blog--detail .blog--detail-thumbnails .block { width: 80px; width: 5rem; height: 80px; height: 5rem; } .blog--detail .blog--comments .entry--meta { width: 25%; text-align: left; } .blog--detail .blog--comments .entry--content { width: 75%; float: left; } .blog--detail .blog--comments .comments--actions .btn--create-entry { width: auto; } .blog--detail .blog--comments-name, .blog--detail .blog--comments-summary { padding-right: 10px; padding-right: 0.625rem; width: 50%; float: left; } .blog--detail .blog--comments-email, .blog--detail .blog--comments-voting { padding-left: 10px; padding-left: 0.625rem; width: 50%; float: right; } .blog--detail .blog--comments-voting { margin-bottom: 10px; margin-bottom: 0.625rem; } .blog--detail .blog--comments-opinion { clear: both; } .blog--detail .blog--comments-captcha { margin-bottom: 10px; margin-bottom: 0.625rem; } .blog--detail .blog--comments-captcha:after { content: ""; display: table; clear: both; } .blog--detail .blog--comments-captcha { width: 50%; } .blog--detail .blog--comments-captcha .captcha--placeholder { padding-right: 10px; padding-right: 0.625rem; width: 30%; float: left; } .blog--detail .blog--comments-captcha .captcha--code { padding-right: 10px; padding-right: 0.625rem; width: 70%; float: right; } } @media screen and (min-width: 64em) { .blog--detail .blog--detail-description { width: 100%; } .blog--detail .blog--detail-image-container { width: 40%; margin: 0 0 3% 3%; float: right; } } @media screen and (min-width: 78.75em) { .blog--listing .listing--actions { margin-top: 15px; margin-top: 0.9375rem; padding-top: 0; margin-bottom: 0; } .blog--listing .listing--paging { border: 0 none; } .blog--detail { margin-top: 50px; margin-top: 3.125rem; } .blog--detail .blog--detail-headline { font-size: 21px; font-size: 1.3125rem; } .blog--detail .blog--bookmark { font-size: 32px; font-size: 2rem; } } /* Configurator ========================================== Defines the styles for the product configuration options element. The configurator element allows the user to choose from different article variations on the Shopware product detail page and configure his product. */ .configurator--variant .variant--group { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .configurator--variant .variant--group:after { content: ""; display: table; clear: both; } .configurator--variant .variant--name { margin: 0px 0px 5px 0px; margin: 0rem 0rem 0.3125rem 0rem; font-weight: 700; } .configurator--variant .variant--option { height: 50px; height: 3.125rem; line-height: 40px; line-height: 2.5rem; margin-bottom: 10px; margin-bottom: 0.625rem; overflow: hidden; display: block; width: 23%; margin-right: 2%; position: relative; float: left; } .configurator--variant .option--input { opacity: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1000; cursor: pointer; /** * Checkbox/Radio Hack * Changes the styling of the next label element * based on the state of the radio element. */ } .configurator--variant .option--input:hover ~ label { color: #00476b; border-color: #00476b; } .configurator--variant .option--input:hover ~ label.is--disabled { color: #00476b; border-color: #dadae5; } .configurator--variant .option--input:checked ~ label { color: #00476b; border-color: #00476b; } .configurator--variant .option--input:disabled ~ label { opacity: 0.5; } .configurator--variant .option--input:disabled { cursor: not-allowed; } .configurator--variant .option--label { padding: 5px 5px 5px 5px; padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; line-height: 40px; line-height: 2.5rem; border-radius: 3px; background-clip: padding-box; display: block; width: 100%; height: 100%; position: relative; z-index: 500; border: 1px solid #dadae5; 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: 50px; line-height: 3.125rem; vertical-align: middle; text-align: center; } .configurator--variant .option--label img { margin: 0 auto; } /* Compare ============================================== Defines the styling of the comparison tool and its elements. The comparision creates a fixed modalbox in that the user can compare multiple articles. The user can open the tool inside the product detail section. */ .top-bar--navigation { position: relative; } .top-bar--navigation .entry--compare { padding: 0px 8px 0px 8px; padding: 0rem 0.5rem 0rem 0.5rem; } .top-bar--navigation .entry--compare .compare--quantity { margin-left: 5px; margin-left: 0.3125rem; font-weight: 700; display: inline-block; color: #00476b; } .top-bar--navigation .entry--compare .icon--compare { font-size: 12px; font-size: 0.75rem; } .top-bar--navigation .compare--list { width: 280px; width: 17.5rem; padding: 5px 10px 10px 10px; padding: 0.3125rem 0.625rem 0.625rem 0.625rem; top: 32px; top: 2rem; right: 12px; right: 0.75rem; text-align: left; position: absolute; display: none; list-style: none; background: #fff; z-index: 4000; border: 1px solid #dadae5; } .top-bar--navigation .compare--list::after { -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 8px; width: 0.5rem; height: 8px; height: 0.5rem; top: -5px; top: -0.3125rem; left: 25px; left: 1.5625rem; content: ''; display: block; position: absolute; background: #fff; border-color: #dadae5; border-width: 0 0 1px 1px; border-style: solid; } .top-bar--navigation .compare--list .btn--compare-delete { width: 100%; } .top-bar--navigation .js--is--dropdown-active .compare--list { display: block; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--entry { cursor: default; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--entry form { display: inline-block; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--link { width: 230px; width: 14.375rem; padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; font-size: 14px; font-size: 0.875rem; color: #00476b; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--link:hover { color: #00476b; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--button { padding: 3px 4px 3px 4px; padding: 0.1875rem 0.25rem 0.1875rem 0.25rem; margin: 3px 0px 0px 0px; margin: 0.1875rem 0rem 0rem 0rem; float: right; } .top-bar--navigation .js--is--dropdown-active .compare--list .btn--item-delete { height: 21px; height: 1.3125rem; width: 21px; width: 1.3125rem; padding: 4px 5px 4px 5px; padding: 0.25rem 0.3125rem 0.25rem 0.3125rem; margin: 8px 0px 8px 0px; margin: 0.5rem 0rem 0.5rem 0rem; font-size: 8px; font-size: 0.5rem; line-height: 14px; line-height: 0.875rem; float: right; } .top-bar--navigation .js--is--dropdown-active .compare--list .btn--item-delete .icon--cross { padding: 0; margin: 0; } .top-bar--navigation .js--is--dropdown-active .compare--list .compare--button .icon--cross { padding: 0; margin: 0; } .top-bar--navigation .js--is--dropdown-active .compare--list .btn--compare { margin-top: 5px; margin-top: 0.3125rem; } .compare--wrapper { display: block; overflow: auto; } .modal--compare { font-size: 14px; font-size: 0.875rem; letter-spacing: -4px; 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: 10px 40px 10px 20px; padding: 0.625rem 2.5rem 0.625rem 1.25rem; font-size: 16px; font-size: 1rem; font-weight: 700; border-bottom: 1px solid #00476b; letter-spacing: 0; } .modal--compare .modal--error { padding: 20px 20px 20px 20px; 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: 200px; width: 12.5rem; display: inline-block; white-space: normal; vertical-align: top; letter-spacing: 0; } .modal--compare .group--small { width: 200px; width: 12.5rem; } .modal--compare .compare--group-list { margin: 0; padding: 0; } .modal--compare .list--entry { padding: 10px 30px 10px 10px; padding: 0.625rem 1.875rem 0.625rem 0.625rem; color: #00476b; border-bottom: 1px solid #dadae5; } .modal--compare .entry--picture { height: 160px; height: 10rem; position: relative; } .modal--compare .entry--picture .image--element img { max-width: 90%; max-height: 90%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } .modal--compare .entry--name { height: 125px; height: 7.8125rem; } .modal--compare .link--name { position: relative; display: block; height: 70px; color: #00141f; font-weight: 700; } .modal--compare .entry--voting { height: 50px; height: 3.125rem; } .modal--compare .entry--voting .icon--star, .modal--compare .entry--voting .icon--star-empty { color: #f1c40f; } .modal--compare .entry--description { height: 150px; height: 9.375rem; text-align: left; word-wrap: break-word; } .modal--compare .entry--price { height: 130px; height: 8.125rem; } .modal--compare .entry--price .price--pseudoprice { text-decoration: line-through; } .modal--compare .entry--price .price--normal { font-size: 16px; font-size: 1rem; color: #00141f; font-weight: 700; } .modal--compare .entry--price .price--reduced { color: #e74c3c; } .modal--compare .entry--property { height: auto; } @media screen and (min-width: 78.75em) { .top-bar--navigation .compare--list { right: 0; } } /* Home ============================================== Defines the styling of the home-page content elements. */ .content--home { margin-top: 20px; margin-top: 1.25rem; } @media screen and (min-width: 48em) { .content--home { margin-top: 30px; margin-top: 1.875rem; } } @media screen and (min-width: 78.75em) { .content--home { margin-top: 50px; margin-top: 3.125rem; } } /* Payment ============================================== Defines the styling of the payment-form elements. The payment page allows the user to choose the prefered payment option and add his personal payment informations inside form elements. The payment page is a part of the Shopware checkout process. */ .payment--form-group { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; } .payment--form-group .payment--field { margin-bottom: 10px; 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: 20px; 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: 18px; width: 1.125rem; height: 18px; height: 1.125rem; border-radius: 100%; background-clip: padding-box; right: 6px; right: 0.375rem; top: 2px; top: 0.125rem; margin: 8px 5px 8px 5px; 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 #dadae5; border-top: 2px solid #4f4f71; display: block; position: absolute; } .account--address.account--content, .address-manager--modal.account--content { margin: 0px; margin: 0rem; padding-top: 45px; padding-top: 2.8125rem; } .account--address .address--item-body .panel--title, .address-manager--modal .address--item-body .panel--title { margin: 0px 0px 20px 0px; 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: 20px 18px 20px 18px; 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: 10px; margin-bottom: 0.625rem; width: 100%; text-align: center; } .account--address .address--actions-set-defaults, .address-manager--modal .address--actions-set-defaults { margin-bottom: 10px; 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: #8ed300; } .account--address .address--actions-set-defaults .btn:hover, .address-manager--modal .address--actions-set-defaults .btn:hover { color: #00476b; } .account--address .address--required-info, .address-manager--modal .address--required-info { margin: 0px 26px 16px 26px; margin: 0rem 1.625rem 1rem 1.625rem; font-size: 14px; font-size: 0.875rem; } .account--address .select-field, .address-manager--modal .select-field { margin-bottom: 5px; margin-bottom: 0.3125rem; max-width: 100%; } .account--address .address--field, .address-manager--modal .address--field { margin-bottom: 10px; 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: 20px; 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: 18px; width: 1.125rem; height: 18px; height: 1.125rem; border-radius: 100%; background-clip: padding-box; margin: 0px 0px 0px 5px; margin: 0rem 0rem 0rem 0.3125rem; top: 4px; top: 0.25rem; -webkit-animation: keyframe--spin 1s linear infinite; animation: keyframe--spin 1s linear infinite; border: 2px solid #dadae5; border-top: 2px solid #4f4f71; 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: 15px; margin-bottom: 0.9375rem; width: 70%; } .account--address.account--content .select-field { max-width: 290px; 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: 1145px; max-width: 71.5625rem; } .address-manager--modal.address-manager--selection .content .modal--container .modal--container-item { width: 33.3%; } } .page-wrap--cookie-permission { padding: 10px; padding: 0.625rem; z-index: 8000; border-top: 1px solid #dadae5; background: #fff; position: fixed; bottom: 0; right: 0; left: 0; } .page-wrap--cookie-permission .cookie-permission--container { width: 100%; text-align: center; position: relative; } .page-wrap--cookie-permission .cookie-permission--container:after { content: ""; display: table; clear: both; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--button { margin: 0 auto; margin-top: 20px; margin-top: 1.25rem; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--decline-button { margin-right: 5px; margin-right: 0.3125rem; } .cookie-removal--container { padding: 25px; padding: 1.5625rem; } .cookie-removal--container .cookie-removal--list { margin-bottom: 20px; margin-bottom: 1.25rem; list-style-position: inside; } .cookie-removal--container .cookie-removal--buttons { margin-top: 20px; margin-top: 1.25rem; } .cookie-removal--container .cookie-removal--buttons .btn { margin-bottom: 6px; margin-bottom: 0.375rem; display: inline-block; width: 48%; float: right; } .cookie-removal--container .cookie-removal--buttons .btn:last-child { margin-right: 2%; } @media screen and (min-width: 30em) { .cookie-removal--container .cookie-removal--footer:after { content: ""; display: table; clear: both; } .cookie-removal--container .cookie-removal--footer .cookie-removal--buttons { float: right; } .cookie-removal--container .cookie-removal--buttons { min-width: 260px; min-width: 16.25rem; margin: 0; } .cookie-removal--container .privacy--notice { padding-top: 8px; padding-top: 0.5rem; display: inline-block; } } @media screen and (min-width: 64em) { .page-wrap--cookie-permission .cookie-permission--container { width: 100%; } .page-wrap--cookie-permission .cookie-permission--container:after { content: ""; display: table; clear: both; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--content { width: calc(100% - 230px); text-align: left; } .page-wrap--cookie-permission .cookie-permission--container.cookie-mode--1 .cookie-permission--button { width: 240px; width: 15rem; right: 5px; right: 0.3125rem; position: absolute; top: calc(50% - 21px); } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--content { padding: 12px; padding: 0.75rem; float: left; } .page-wrap--cookie-permission .cookie-permission--container .cookie-permission--button { margin: 0; float: right; } } /* 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: -4px 0px 0px 0px; margin: -0.25rem 0rem 0rem 0rem; font-size: 8px; } .table--footer i, .premium-product--product .btn i, .compare--button i, .modal--compare .btn i { font-size: 8px; } .js--modal.sizing--auto.is--fullscreen { height: 100% !important; width: 100% !important; } .js--modal.sizing--fixed { max-height: none !important; max-width: none !important; } .is--inactive { overflow: hidden !important; } .btn::-moz-focus-inner { border: 0; padding: 0; } .is--ie .action--sort .sort--select:after { line-height: 34px; } .is--ie .register--login .register--new-customer .new-customer-btn::after { line-height: 16px; } .is--ie .filter-panel--input input[type='checkbox']:checked ~ .input--state::before, .is--ie .filter-panel--checkbox input[type='checkbox']:checked ~ .input--state::before, .is--ie .filter-panel--radio input[type='checkbox']:checked ~ .input--state::before, .is--ie .filter-panel--input input[type='checkbox']:checked ~ .checkbox--state::before, .is--ie .filter-panel--checkbox input[type='checkbox']:checked ~ .checkbox--state::before, .is--ie .filter-panel--radio input[type='checkbox']:checked ~ .checkbox--state::before { line-height: 12px; } @media screen and (min-width: 48em) { .top-bar--navigation .entry--service:after, .top-bar--navigation .entry--service::after { font-size: 5px; } .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active:before, .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active::before { font-size: 5px; } .is--ie .header-main .top-bar--navigation .select-field:after { line-height: 24px; } .is--ie .action--filter-btn .filter--trigger:before, .is--ie .action--filter-btn .filter--trigger:after { line-height: 16px; } .is--ie .header-main .top-bar--navigation .top-bar--language .select-field select, .is--edge .header-main .top-bar--navigation .top-bar--language .select-field select { font-size: 0; } .is--ie .header-main .top-bar--navigation .top-bar--language .select-field select option, .is--edge .header-main .top-bar--navigation .top-bar--language .select-field select option { font-size: 14px; font-size: 0.875rem; } } .budget-header { width: 100%; text-align: center; } .budget-header .budgetContainer { text-align: center; } .advanced-menu { max-width: 1260px; max-width: 78.75rem; box-shadow: 0 10px 25px -15px #000000; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: #ffffff; width: 100%; position: absolute; color: #00141f; z-index: 3000; } .advanced-menu:after { content: ""; display: table; clear: both; } .advanced-menu .menu--list { list-style: none; display: block; } .advanced-menu .content--wrapper { margin: 20px 20px 20px 20px; margin: 1.25rem 1.25rem 1.25rem 1.25rem; position: relative; } .advanced-menu .menu--delimiter { content: ""; width: 1px; background: #dadae5; position: absolute; display: block; top: 0; bottom: 0; } .advanced-menu .menu--teaser { padding: 10px 10px 0px 20px; padding: 0.625rem 0.625rem 0rem 1.25rem; position: relative; float: left; } .advanced-menu .teaser--image { height: 250px; height: 15.625rem; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; display: block; } .advanced-menu .teaser--image + .teaser--headline, .advanced-menu .teaser--image + .teaser--text { margin-top: 40px; margin-top: 2.5rem; } .advanced-menu .teaser--headline { font-size: 21px; font-size: 1.3125rem; margin: 0px 0px 20px 0px; margin: 0rem 0rem 1.25rem 0rem; font-weight: bold; } .advanced-menu .teaser--text-link { color: #00476b; } .advanced-menu .teaser--text-link:hover { color: #00476b; } .advanced-menu .menu--list-item { -webkit-hyphens: auto; hyphens: auto; word-break: normal; word-wrap: break-word; } .advanced-menu .menu--list-item-link { padding: 5px 0px 5px 0px; padding: 0.3125rem 0rem 0.3125rem 0rem; font-size: 16px; font-size: 1rem; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; color: #00141f; display: block; } .advanced-menu .menu--list-item-link:hover { padding: 5px 0px 5px 3px; padding: 0.3125rem 0rem 0.3125rem 0.1875rem; color: #00476b; } .advanced-menu .button-container { font-size: 16px; font-size: 1rem; padding: 20px 30px 20px 0px; padding: 1.25rem 1.875rem 1.25rem 0rem; background: #00141f; color: #ffffff; font-weight: bold; } .advanced-menu .button-container .button--category { padding: 20px 50px 20px 50px; padding: 1.25rem 3.125rem 1.25rem 3.125rem; -webkit-transition: padding 0.1s ease; transition: padding 0.1s ease; color: #ffffff; position: relative; } .advanced-menu .button-container .button--category:hover { padding: 20px 50px 20px 55px; padding: 1.25rem 3.125rem 1.25rem 3.4375rem; } .advanced-menu .button-container .icon--arrow-right { font-size: 12px; font-size: 0.75rem; margin-top: -6px; margin-top: -0.375rem; position: absolute; top: 50%; right: 30px; right: 1.875rem; } .advanced-menu .button-container .button--close { padding: 20px 20px 20px 20px; padding: 1.25rem 1.25rem 1.25rem 1.25rem; margin-top: -20px; margin-top: -1.25rem; float: right; cursor: pointer; } .advanced-menu .menu--container { display: none; } .advanced-menu .menu--container.menu--is-active { display: block; } .advanced-menu .menu--level-0 { padding: 10px 10px 0px 10px; padding: 0.625rem 0.625rem 0rem 0.625rem; float: left; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .advanced-menu .menu--level-0.columns--1 { -webkit-column-count: 1; column-count: 1; } .advanced-menu .menu--level-0.columns--2 { -webkit-column-count: 2; column-count: 2; } .advanced-menu .menu--level-0.columns--3 { -webkit-column-count: 3; column-count: 3; } .advanced-menu .menu--level-0.columns--4 { -webkit-column-count: 4; column-count: 4; } .advanced-menu .menu--level-1 { margin: 5px 0px 0px 20px; margin: 0.3125rem 0rem 0rem 1.25rem; } .advanced-menu .menu--level-2 { margin: 0px 0px 5px 20px; margin: 0rem 0rem 0.3125rem 1.25rem; } .advanced-menu .item--level-0 { padding-bottom: 40px; padding-bottom: 2.5rem; display: block; position: relative; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .advanced-menu .item--level-0 .menu--list-item-link { font-weight: bold; } .advanced-menu .item--level-1:last-child { margin: 0; } .advanced-menu .item--level-1 .menu--list-item-link { padding: 5px 0px 5px 0px; padding: 0.3125rem 0rem 0.3125rem 0rem; font-size: 16px; font-size: 1rem; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; color: #00141f; display: block; font-weight: normal; } .advanced-menu .item--level-1 .menu--list-item-link:hover { padding: 5px 0px 5px 3px; padding: 0.3125rem 0rem 0.3125rem 0.1875rem; color: #00476b; } .advanced-menu .item--level-2 .menu--list-item-link { font-size: 14px; font-size: 0.875rem; } .advanced-menu .item--level-2 .menu--list-item-link + .menu--level-3 { margin: 0px 0px 5px 20px; margin: 0rem 0rem 0.3125rem 1.25rem; } .advanced-menu .item--level-3 .menu--list-item-link { font-size: 12px; font-size: 0.75rem; } .navigation-main .navigation--list .navigation--entry.is--hovered { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: #00141f; } .navigation-main .navigation--list .navigation--entry.is--hovered .navigation--link { background: #00141f; color: #ffffff; } @media screen and (min-width: 78.75em) { .advanced-menu .content--wrapper { margin: 40px 40px 40px 40px; margin: 2.5rem 2.5rem 2.5rem 2.5rem; } } input.mnd-switch { position: relative; -webkit-appearance: none; outline: none; width: 50px; height: 30px; background-color: #fff; border: 2px solid #f5f5f8; border-radius: 50px; box-shadow: inset -20px 0 0 0 #f5f5f8; } input.mnd-switch.always-active { opacity: .3; } input.mnd-switch:after { content: ""; position: absolute; top: 1px; left: 1px; background: transparent; width: 26px; height: 26px; border-radius: 50%; box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2); } input.mnd-switch:checked { box-shadow: inset 20px 0 0 0 #2ecc71; border-color: #2ecc71; } input.mnd-switch:checked:after { left: 20px; box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05); } .mnd-cookie-modal { z-index: 11000; max-width: 750px; max-width: 46.875rem; width: auto !important; } .mnd-cookie-bar-wrapper { padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-text { width: 100%; float: unset; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions { text-align: center; padding: 15px 0px 5px 0px; padding: 0.9375rem 0rem 0.3125rem 0rem; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button:nth-child(2) { margin: 0px 10px 0px 10px; margin: 0rem 0.625rem 0rem 0.625rem; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button.is--link { background: transparent; color: #00476b; font-weight: normal; border: none; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button:hover.is--link { background: transparent; color: #00476b; border: none; } .mnd-cookie-bar-template-one .mnd-cookie-bar-text, .mnd-cookie-bar-template-one .mnd-cookie-bar-btn { width: 100%; display: block; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .mnd-cookie-bar-template-one .mnd-cookie-bar-btn { margin-bottom: 0; } .mnd-cookie-bar-template-one .mnd-cookie-bar-btn a { display: block; margin-top: 10px; text-align: center; } .mnd-cookie-bar-template-two { text-align: center; } .mnd-cookie-bar-template-two .mnd-cookie-bar-text, .mnd-cookie-bar-template-two .mnd-cookie-bar-btn { width: auto; display: inline-block; text-align: center; } .mnd-cookie-bar-template-two .mnd-cookie-bar-text-wrapper { display: inline-block; max-width: 1060px; max-width: 66.25rem; } .mnd-cookie-bar-template-two .mnd-cookie-bar-btn { display: block; } .mnd-cookie-bar-template-two .mnd-cookie-bar-btn button { display: block; margin: 0; text-align: center; } .mnd-privacy-settings-container { padding: 0px 0px 20px 0px; padding: 0rem 0rem 1.25rem 0rem; } .mnd-privacy-settings-container p { padding: 0px 0px 0px 10px; padding: 0rem 0rem 0rem 0.625rem; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .mnd-privacy-settings-container p:empty { margin: 0; } .mnd-privacy-settings-row { overflow: hidden; padding: 5px 10px 5px 10px; padding: 0.3125rem 0.625rem 0.3125rem 0.625rem; display: table; width: 100%; border-top: 1px solid #dadae5; } .mnd-privacy-settings-row span { display: table-cell; vertical-align: middle; width: 40%; font-weight: 700; } .mnd-privacy-settings-row span.mnd-privacy-setting-action { text-align: right; width: 20%; } .mnd-privacy-settings-row span.mnd-privacy-setting-action .btn { min-width: 80px; min-width: 5rem; text-align: center; } .mnd-cookie-overlay-btns { width: 100%; padding: 15px 15px; display: block; overflow: hidden; } .mnd-cookie-overlay-btns button { margin: 0px 20px 0px 0px; margin: 0rem 1.25rem 0rem 0rem; line-height: 32px; line-height: 2rem; } .mnd-cookie-overlay-btns button.btn { margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; } .mnd-cookie-overlay-btns button.is--link { background: transparent; color: #00476b; padding-left: 0; font-weight: normal; } .mnd-cookie-overlay-btns button:hover.is--link { background: transparent; color: #00476b; } .mnd-cookie-overlay-btns .btn.is--primary { float: right; margin: 0px 0px 0px 10px; margin: 0rem 0rem 0rem 0.625rem; } .mnd-privacy-functional-cookies { padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .mnd-privacy-functional-cookies .mnd-privacy-settings-row { border: none; } .mnd-privacy-functional-cookies p { font-size: 12px; font-size: 0.75rem; padding: 10px 10px 0px 10px; padding: 0.625rem 0.625rem 0rem 0.625rem; } .mnd-privacy-settings-buttons { padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; width: 100%; overflow: hidden; background: #fff; } .mnd-privacy-settings-buttons .btn.is--primary { float: right; } @media screen and (min-width: 48em) { .mnd-cookie-bar-template-one .mnd-cookie-bar-text, .mnd-cookie-bar-template-one .mnd-cookie-bar-btn { margin: 0; } .mnd-cookie-bar-template-one .mnd-cookie-bar-btn { text-align: right; width: 25%; } .mnd-cookie-bar-template-one .mnd-cookie-bar-btn button { display: inline-block; margin: 0; text-align: left; } .mnd-cookie-bar-template-two .mnd-cookie-bar-btn { display: inline-block; } .mnd-cookie-bar-template-two .mnd-cookie-bar-btn button { display: inline-block; margin: 10px 10px; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button { margin: 0px 10px 5px 10px; margin: 0rem 0.625rem 0.3125rem 0.625rem; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button.btn { margin: 0px 0px 5px 10px; margin: 0rem 0rem 0.3125rem 0.625rem; } } @media screen and (max-width: 667px) { .mnd-cookie-overlay-btns { display: flex; display: -webkit-flex; flex-flow: column; } .mnd-cookie-overlay-btns button { display: block; width: 100%; text-align: center; margin: 0; } .mnd-cookie-overlay-btns .btn-privacy-settings { order: 3; } .mnd-cookie-overlay-btns .btn-accept-functional { order: 2; } .mnd-cookie-overlay-btns .btn.is--primary { order: 1; float: none; margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions { display: flex; display: -webkit-flex; flex-flow: column; padding: 10px 0px 0px 0px; padding: 0.625rem 0rem 0rem 0rem; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button { display: block; width: 100%; text-align: center; margin: 0; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button.mnd-cookie-bar-privacy-settings-link { order: 3; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button.btn-accept-functional { order: 2; } .mnd-cookie-bar-wrapper .mnd-cookie-bar-actions button.is--primary { margin: 0px 0px 10px 0px; margin: 0rem 0rem 0.625rem 0rem; order: 1; } } /* * import needed less files * root folder is Views/responsive/frontend/_public/src/less */ /* max-width 480px */ @media screen and (max-width: 30em) { #hp_frame_cc, #hp_frame_dc { border: 0; width: 310px; height: 290px; } } /* min-width 480px */ @media screen and (min-width: 30em) { #hp_frame_cc, #hp_frame_dc { border: 0; width: 310px; height: 290px; } } /* more viewports */ /* 768px */ @media screen and (min-width: 48em) { #hp_frame_cc, #hp_frame_dc { border: 0; width: 310px; height: 290px; } } /* 1024px*/ @media screen and (min-width: 64em) { #hp_frame_cc, #hp_frame_dc { border: 0; width: 310px; height: 290px; } } /* 1260px */ @media screen and (min-width: 78.75em) { #hp_frame_cc, #hp_frame_dc { border: 0; width: 310px; height: 290px; } } /**/ .KrmeMessages { background: #8ed300; } .KrmeMessages--container { position: relative; max-width: 1260px; max-width: 78.75rem; margin: 0 auto; width: 100%; color: #f5f5f8; text-align: center; padding-top: 15px; padding-bottom: 15px; } .KrmeMessages--container:after { content: ""; display: table; clear: both; } .KrmeMessages--container p:last-of-type { margin: 0; padding: 0; } .KrmeMessages--container--row { padding-left: 10px; padding-right: 10px; } .KrmeMessages--remove { cursor: pointer; position: absolute; right: 10px; top: 10px; font-size: 24px; color: #f5f5f8; } .KrmeMessages--remove:hover { opacity: 0.95; } @media screen and (min-width: 78.75em) { .KrmeMessages--remove { right: 0; } } .vacation--info { display: inline-block; } .vacation--info .product--vacation-info { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; padding: 13px 13px 13px 13px; padding: 0.8125rem 0.8125rem 0.8125rem 0.8125rem; border: solid 1px #ff0000; color: #ffffff; background-color: #ff0000; } /* * ###################################################################### * # MANUELLE ANPASSUNGEN AN DIESER DATEI WERDEN ÜBERSCHRIEBEN! # * ###################################################################### */ .promotion-notices { /** Ausgabe im Listing */ /** Ausgabe auf der Detailseite */ } .promotion-notices .notice { /** Überschrift */ /** Beschreibung */ /** Schalfläche "Weitere Informationen" */ } .promotion-notices .notice .headline { font-weight: 600; display: block; line-height: 18px; line-height: 1.125rem; } .promotion-notices .notice .description { line-height: 18px; line-height: 1.125rem; } .promotion-notices .notice .btn-additional-info { line-height: 24px; line-height: 1.5rem; margin-top: 12px; margin-top: 0.75rem; float: right; } .promotion-notices .notice .btn-additional-info i { font-size: 15px; font-size: 0.9375rem; } .promotion-notices.has-listing-scope .notice { margin-bottom: 10px; margin-bottom: 0.625rem; } .promotion-notices.has-detail-scope { /** Styling für Position: Über dem Preis */ /** Styling für Position: Unter dem Preis */ } .promotion-notices.has-detail-scope.has-abovePrice-position { /** 20px margin bottom auf das letzte .notice */ } .promotion-notices.has-detail-scope.has-abovePrice-position .notice:last-child { margin-bottom: 20px; margin-bottom: 1.25rem; } .promotion-notices.has-detail-scope.has-underPrice-position { /** 20px margin bottom auf das letzte .notice */ } .promotion-notices.has-detail-scope.has-underPrice-position .notice:first-child { margin-top: 20px; margin-top: 1.25rem; } .dreisc-discount-notice-info-modal .content { margin: 10px; margin: 0.625rem; } .product--badges .product--badge.badge--color-success { background: #2ecc71; } .product--badges .product--badge.badge--color-info { background: #4aa3df; } .product--badges .product--badge.badge--color-warning { background: #f1c40f; } /* @phoneLandscapeViewportWidth: 30em; // 480px @tabletViewportWidth: 48em; // 768px @tabletLandscapeViewportWidth: 64em; // 1024px @desktopViewportWidth: 78.75em; // 1260px */ .content.shoppinglist .account--orders-overview .column--label { width: 93px; width: 5.8125rem; } .content.shoppinglist .account--orders-overview .order--actions { text-align: right !important; } .content.shoppinglist .account--orders-overview .order--actions .actionDuplicate button.btn { padding: 2px 7px 2px 8px; padding: 0.125rem 0.4375rem 0.125rem 0.5rem; } .content.shoppinglist .account--orders-overview .order--actions .actionDuplicate button.btn .icon--docs { font-weight: 700; position: relative; font-size: 15px; font-size: 0.9375rem; top: 2px; top: 0.125rem; } .content.shoppinglist .account--orders-overview .order--item, .content.shoppinglist .account--orders-overview .panel--tr { position: relative; } .content.shoppinglist .account--orders-overview .orders--table-header { position: relative; display: none; } .content.shoppinglist .order--item { background-color: #0070a8; background-image: linear-gradient(to bottom, #0070a8 0%, #00476b 100%); color: #ffffff; } .content.shoppinglist .order--item .column--actions { width: 30%; position: static; float: left; } .content.shoppinglist .order--item .column--actions .btn { overflow: inherit; } .content.shoppinglist .order--item .column--name { width: 86%; } .content.shoppinglist .order--item .column--date { margin-top: 0; width: 70%; float: left; } .content.shoppinglist .order--details .column--name { width: 55%; } .content.shoppinglist .order--details .column--actions { width: 15%; float: left !important; } .content.shoppinglist .order--details .column--label, .content.shoppinglist .order--details .column--value { margin-left: 95px; margin-left: 5.9375rem; } .content.shoppinglist .order--details .select-field { width: auto; } .content.shoppinglist .column--value { width: 100%; float: none; font-size: 16px; font-size: 1rem; font-weight: bold; padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } .content.shoppinglist .column--value .inputChange { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 3px; background-clip: padding-box; box-sizing: border-box; line-height: 19px; line-height: 1.1875rem; font-size: 14px; font-size: 0.875rem; margin-top: 0px; margin-top: 0rem; margin-left: 0px; margin-left: 0rem; padding: 7px 9px 6px 10px; padding: 0.4375rem 0.5625rem 0.375rem 0.625rem; display: inline-block; } .content.shoppinglist .column--value .inputChange:hover { box-shadow: 0 0 0 transparent; border: 1px solid #00476b; background: #fff !important; color: #00476b; text-align: left; outline: none; } .content.shoppinglist .column--value .inputChange:hover:after { content: "\e618"; font-family: 'shopware'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-left: 10px; padding-left: 0.625rem; } .content.shoppinglist .column--value .articleCount { margin-left: 4px; margin-left: 0.25rem; } .content.shoppinglist .editable-input input { width: 207px; width: 12.9375rem; padding: 7px 24px 6px 10px; padding: 0.4375rem 1.5rem 0.375rem 0.625rem; } @media screen and (min-width: 48em) { .content.shoppinglist .editable-input .input { width: inherit; } } .content.shoppinglist .editable-buttons { margin-left: 4px; margin-left: 0.25rem; } .content.shoppinglist .editable-buttons button.ui-button-icon-only { height: inherit; width: inherit; } .content.shoppinglist .editable-buttons .editable-cancel { margin-left: 4px; margin-left: 0.25rem; } .content.shoppinglist .editable-click, .content.shoppinglist a.editable-click, .content.shoppinglist a.editable-click:hover { border-bottom: none; } .content.shoppinglist .editable-empty, .content.shoppinglist .editable-empty:hover, .content.shoppinglist .editable-empty:focus { font-style: normal; color: #fff; } .content.shoppinglist .editableform-loading { background-image: none; } .content.shoppinglist .btnCollapse .icon--arrow-down { position: relative; padding: 2px 5px 2px 5px; padding: 0.125rem 0.3125rem 0.125rem 0.3125rem; font-size: 0.5rem; } .content.shoppinglist .btnCollapse .icon--arrow-down:before { position: absolute; right: -2px; right: -0.125rem; top: 3px; top: 0.1875rem; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s; transition: all 0.5s; } .content.shoppinglist .btnCollapse.is--active .icon--arrow-down:before { top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .content.shoppinglist .articleCount { display: none; } @media screen and (max-width: 48em) { .content.shoppinglist .order--details .column--actions { position: absolute; right: 0; top: 0; width: 136px; width: 8.5rem; } .content.shoppinglist .order--details .column--name { width: 92%; } .content.shoppinglist .order--details .column--quantity, .content.shoppinglist .order--details .column--price { width: 100%; } .content.shoppinglist .order--details .column--quantity .column--label, .content.shoppinglist .order--details .column--price .column--label, .content.shoppinglist .order--details .column--quantity .column--value, .content.shoppinglist .order--details .column--price .column--value { display: block; text-align: left; } } @media screen and (max-width: 30em) { .content.shoppinglist .order--item .column--actions { position: absolute; float: none; right: 0; top: 0; width: 100%; } .content.shoppinglist .order--item .column--date { margin-top: 30px; margin-top: 1.875rem; width: 100%; } .content.shoppinglist .order--details .column--name { width: 258px; width: 16.125rem; } } @media screen and (min-width: 48em) { .content.shoppinglist .order--item .column--name { width: 55%; } } @media screen and (min-width: 64em) { .content.shoppinglist .account--orders-overview .orders--table-header { display: block; } .content.shoppinglist .order--details .column--quantity { width: 15%; } .content.shoppinglist .order--details .column--actions { width: 10%; } .content.shoppinglist .order--details .column--label, .content.shoppinglist .order--details .column--value { margin-left: 0px; margin-left: 0rem; } .content.shoppinglist .order--details .select-field { width: auto; } .content.shoppinglist .editable-input input { width: 290px; width: 18.125rem; } } .flex { display: flex; flex-wrap: wrap; } .flex.flex33 .flexItem { flex: 1 1 100%; } @media screen and (min-width: 64em) { .flex.flex33 .flexItem { flex: 1 1 33%; } } .flex .flexItem { margin-bottom: 10px; margin-bottom: 0.625rem; padding: 0px 0px 0px 0px; padding: 0rem 0rem 0rem 0rem; } @media screen and (min-width: 64em) { .flex .flexItem { margin-bottom: 0px; margin-bottom: 0rem; padding: 0px 4px 0px 4px; padding: 0rem 0.25rem 0rem 0.25rem; } } .is--ctl-note .flex { margin-bottom: 20px; margin-bottom: 1.25rem; } /* globals */ .inline { display: inline; } .inlineBlock { display: inline-block; } /* fixes */ #FriedmShoppingListForm input, #FriedmShoppingListForm button, #FriedmShoppingListForm .js--fancy-select { width: 100%; max-width: inherit; } #FriedmShoppingListForm input[type="text"] { padding-bottom: 11px; padding-bottom: 0.6875rem; } #FriedmShoppingListForm button.is--primary { padding: 4px 36px 4px 12px; padding: 0.25rem 2.25rem 0.25rem 0.75rem; } /* // Breakpoints always < 480px -> xl @phoneLandscapeViewportWidth: 30em; // 480px -> s @tabletViewportWidth: 48em; // 768px -> m @tabletLandscapeViewportWidth: 64em; // 1024px -> l @desktopViewportWidth: 78.75em; // 1260px -> xl */ @media screen and (min-width: 48em) { .GbmedShoppingListConc .column--name { width: 70%; } } /*! X-editable - v1.5.3 * In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery * http://github.com/vitalets/x-editable * Copyright (c) 2015 Vitaliy Potapov; Licensed MIT */ .editableform { margin-bottom: 0; /* overwrites bootstrap margin */ } .editableform .control-group { margin-bottom: 0; /* overwrites bootstrap margin */ white-space: nowrap; /* prevent wrapping buttons on new line */ line-height: 20px; /* overwriting bootstrap line-height. See #133 */ } /* BS3 width:1005 for inputs breaks editable form in popup See: https://github.com/vitalets/x-editable/issues/393 */ .editableform .form-control { width: auto; } .editable-buttons { display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */ vertical-align: top; margin-left: 7px; /* inline-block emulation for IE7*/ zoom: 1; *display: inline; } .editable-buttons.editable-buttons-bottom { display: block; margin-top: 7px; margin-left: 0; } .editable-input { vertical-align: top; display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */ width: auto; /* bootstrap-responsive has width: 100% that breakes layout */ white-space: normal; /* reset white-space decalred in parent*/ /* display-inline emulation for IE7*/ zoom: 1; *display: inline; } .editable-buttons .editable-cancel { margin-left: 7px; } /*for jquery-ui buttons need set height to look more pretty*/ .editable-buttons button.ui-button-icon-only { height: 24px; width: 30px; } .editableform-loading { background: url('../../custom/plugins/FriedmShoppingList/Resources/views/frontend/_public/src/vendors/js/jqueryui-editable/img/loading.gif') center center no-repeat; height: 25px; width: auto; min-width: 25px; } .editable-inline .editableform-loading { background-position: left 5px; } .editable-error-block { max-width: 300px; margin: 5px 0 0 0; width: auto; white-space: normal; } /*add padding for jquery ui*/ .editable-error-block.ui-state-error { padding: 3px; } .editable-error { color: red; } /* ---- For specific types ---- */ .editableform .editable-date { padding: 0; margin: 0; float: left; } /* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */ .editable-inline .add-on .icon-th { margin-top: 3px; margin-left: 1px; } /* checklist vertical alignment */ .editable-checklist label input[type="checkbox"], .editable-checklist label span { vertical-align: middle; margin: 0; } .editable-checklist label { white-space: nowrap; } /* set exact width of textarea to fit buttons toolbar */ .editable-wysihtml5 { width: 566px; height: 250px; } /* clear button shown as link in date inputs */ .editable-clear { clear: both; font-size: 0.9em; text-decoration: none; text-align: right; } /* IOS-style clear button for text inputs */ .editable-clear-x { background: url('../../custom/plugins/FriedmShoppingList/Resources/views/frontend/_public/src/vendors/js/jqueryui-editable/img/clear.png') center center no-repeat; display: block; width: 13px; height: 13px; position: absolute; opacity: 0.6; z-index: 100; top: 50%; right: 6px; margin-top: -6px; } .editable-clear-x:hover { opacity: 1; } .editable-pre-wrapped { white-space: pre-wrap; } .editable-container.editable-popup { max-width: none !important; /* without this rule poshytip/tooltip does not stretch */ } .editable-container.popover { width: auto; /* without this rule popover does not stretch */ } .editable-container.editable-inline { display: inline-block; vertical-align: middle; width: auto; /* inline-block emulation for IE7*/ zoom: 1; *display: inline; } .editable-container.ui-widget { font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */ z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */ } .editable-click, a.editable-click, a.editable-click:hover { text-decoration: none; border-bottom: dashed 1px #0088cc; } .editable-click.editable-disabled, a.editable-click.editable-disabled, a.editable-click.editable-disabled:hover { color: #585858; cursor: default; border-bottom: none; } .editable-empty, .editable-empty:hover, .editable-empty:focus { font-style: italic; color: #DD1144; /* border-bottom: none; */ text-decoration: none; } .editable-unsaved { font-weight: bold; } .editable-unsaved:after { /* content: '*'*/ } .editable-bg-transition { -webkit-transition: background-color 1400ms ease-out; -moz-transition: background-color 1400ms ease-out; -o-transition: background-color 1400ms ease-out; -ms-transition: background-color 1400ms ease-out; transition: background-color 1400ms ease-out; } /*see https://github.com/vitalets/x-editable/issues/139 */ .form-horizontal .editable { padding-top: 5px; display: inline-block; } .sociallogos { position: relative; display: inline; float: right; padding-top: 10px; } .sociallogos img { max-width: 50px; height: auto; margin-right: 10px; float: left; } .is--primary { background-image: none; background-color: #8ed300; color: #00476b; } .product--delivery .delivery--status-not-available { background: #00476b; } .product--delivery .delivery--text-not-available { color: #00476b; } .emotion--wrapper { max-width: 100%; } .startbox { position: relative; min-height: 300px; height: 100%; background: #fff; } .startbox.box_logo_patchservice { background-image: url(../../themes/Frontend/Weartexx/frontend/_public/src/img/logo_und_patchservice.jpg); cursor: pointer; } .startbox.box_topangebot { background-image: url(../../themes/Frontend/Weartexx/frontend/_public/src/img/bg_topangebot.jpg); cursor: pointer; } .startbox .boxtitel { font-size: 21px; font-size: 1.3125rem; background: #8ed300; color: #fff; width: 70%; font-style: italic; padding: 12px 24px; text-transform: uppercase; font-weight: 700; } .startbox .boxmain { position: absolute; bottom: 0; padding: 24px; background: rgba(0, 71, 107, 0.5); color: #fff; min-height: 50%; } .startbox .boxmain .boxslogan { font-size: 21px; font-size: 1.3125rem; font-weight: 700; font-style: italic; text-transform: uppercase; } .startbox .boxmain .boxslogan .preis { color: #8ed300; } .startbox .boxmain .boxtext { font-size: 13px; font-size: 0.8125rem; } .startbox .boxmain .boxtext .hersteller, .startbox .boxmain .boxtext .uvp, .startbox .boxmain .boxtext .mwst { display: block; clear: both; } .startbox .boxmain a { color: #fff; } .emotion--category-teaser { overflow: hidden; } .emotion--category-teaser .category-teaser--overlay { padding: 10px 20px 10px 20px; padding: 0.625rem 1.25rem 0.625rem 1.25rem; display: block; width: 100%; position: absolute; bottom: 0; left: 0; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 100%; } .emotion--category-teaser .category-teaser--link:hover .category-teaser--overlay { background: rgba(0, 71, 107, 0.5); } .emotion--category-teaser .category-teaser--title { font-size: 21px; font-size: 1.3125rem; background: transparent; font-weight: 700; font-style: italic; text-transform: uppercase; } @media screen and (min-width: 78.75em) { .emotion--banner-slider .image-slider--dots { text-align: right; padding-right: 2em; } .emotion--banner-slider .image-slider--dots .dot--link { border-radius: unset; width: 50px; width: 3.125rem; height: 5px; height: 0.3125rem; background: #8ed300; border: none; text-indent: 99999em; } .emotion--banner-slider .image-slider--dots .dot--link.is--active { background: #fff; } } .image-slider--thumbnails { margin: 20px 0px 0px 0px; margin: 1.25rem 0rem 0rem 0rem; height: 6rem; width: 99%; } .image-slider--thumbnails .thumbnail--link { display: inline-block; margin: 0px 10px 0px 0px; margin: 0rem 0.625rem 0rem 0rem; } a.link_unterstrichen { text-decoration: underline; } .product--box .hersteller { color: #00476b; } .product--box .product--title { color: #00476b; } .container.footerinfo { margin-top: 10px; margin-bottom: 20px; } .zahlungsweisen { width: 80%; float: left; padding: 0px 10px 0px 10px; padding: 0rem 0.625rem 0rem 0.625rem; overflow: hidden; } .zahlungsweisen img { max-height: 60px; width: auto; float: left; padding: 10px 5px 10px 5px; padding: 0.625rem 0.3125rem 0.625rem 0.3125rem; margin: 0px 10px 10px 0px; margin: 0rem 0.625rem 0.625rem 0rem; border: 2px solid #dadae5; border-radius: 8px; background-clip: padding-box; } .trusted { width: 18%; float: right; } .trusted img { max-height: 80px; width: auto; float: right; } .shopseiten-bilder .shopseiten-bild { max-width: 300px; float: left; margin-right: 10px; margin-bottom: 10px; cursor: pointer; } .logo-gls-footer { margin-top: 10px; } .liste-unsere-marken { overflow: hidden; } .liste-unsere-marken .marke-item { width: 250px; height: 300px; margin-right: 10px; margin-bottom: 10px; float: left; text-align: center; } .liste-unsere-marken .marke-item .marke-bild img { max-width: 100%; margin-left: auto; margin-right: auto; margin-top: 10px; } @media screen and (min-width: 48em) { .content-main { box-shadow: none; } } @media screen and (min-width: 78.75em) { .content-main { margin-top: 0; } .content-main--inner { padding: 0; } .zahlungsweisen { padding: 0; } } .header-main .logo-main { width: 50%; } .header-main .logo-main .logo--shop { height: 136px; height: 8.5rem; width: 500px; width: 31.25rem; max-width: 100%; } .header-main .logo-main .logo--shop img { width: 100%; height: auto; } .header-main .logo-main .logo--link { height: 136px; height: 8.5rem; width: 500px; width: 31.25rem; } .header-main .shop--navigation { width: 50%; } .main-search--form .main-search--button { color: #00476b; } @media screen and (max-width: 48em) { .header-main .logo-main { width: 100%; } .header-main .shop--navigation { width: 100%; } } @media screen and (min-width: 48em) { .navigation-main { border-bottom: none; padding: 0 5px; } .navigation-main .navigation--link { background-color: #00476b; color: #FFF; text-transform: uppercase; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-clip: padding-box; } .navigation-main .navigation--link:hover { color: #FFF; background-color: #00141f; } .navigation-main .is--active .navigation--link { background-color: #00141f; background-image: none; } } @media screen and (min-width: 78.75em) { .navigation-main .navigation--list { padding: 0; background: #00476b; } } .content--breadcrumb { padding-left: 0; color: #8ed300; } .content--breadcrumb .breadcrumb-before { display: list-item; float: left; line-height: 24px; line-height: 1.5rem; padding: 10px 0px 10px 0px; padding: 0.625rem 0rem 0.625rem 0rem; } .content--breadcrumb .breadcrumb--link, .content--breadcrumb .is--active .breadcrumb--link { color: #8ed300; } .content--breadcrumb .breadcrumb--separator { color: #8ed300; font-size: 16px; font-size: 1rem; } .content--breadcrumb .breadcrumb--separator .icon--arrow-right::before { content: '/'; } .product--details .product--actions { border-bottom: none; } .product--details .product--buybox .detail--artikelnr { margin: 10px 0px 10px 0px; margin: 0.625rem 0rem 0.625rem 0rem; } .product--details .product--buybox .price--content { font-style: italic; color: #8ed300; } .product--details .product--buybox .price--netto { font-weight: 700; font-style: italic; } .product--details .product--supplier { float: none; width: 100%; text-align: left; } .product--details .product--image-container { margin: 10px 0px 20px 0px; margin: 0.625rem 0rem 1.25rem 0rem; } @media screen and (min-width: 30em) { .tab-menu--product { padding: 20px 0px 0px 0px; padding: 1.25rem 0rem 0rem 0rem; border-top: 1px solid #dadae5; } } @media screen and (min-width: 64em) { .product--details .product--image-container { margin-top: 4%; } } .footer-main { background: #00476b; color: #fff; } .footer-main a { color: #fff; } .footer-main .container { background: none; } .footer-main .footer--phone-link { color: #fff; } .footer-main .column--headline { color: #fff; text-transform: uppercase; } .footer-main .column--headline::after { color: #fff; } .footer-main .footer--logo { color: #fff; } .footer-main .navigation--list .footerTel { float: right; } .footer-main .navigation--link { color: #fff; } .footer-main .navigation--link:hover { color: #fff; } @media screen and (min-width: 48em) { .footer-main .footer--column { width: 16.5%; } } @media screen and (min-width: 48em) { .sidebar-main { width: 300px; width: 18.75rem; } .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: 330px; margin-left: 20.625rem; } .sidebar--categories-navigation { text-transform: uppercase; } .sidebar--navigation { background: #f5f5f8; } .sidebar--navigation .navigation--entry { border-bottom: none; } .sidebar--navigation .navigation--entry .navigation--link { color: #00476b; } .sidebar--navigation.is--level0 .navigation--entry { margin-left: 0; margin-right: 0; } .sidebar--navigation.is--level0 .navigation--entry .navigation--link.is--active { background: #8ed300; color: #fff; } .sidebar--navigation.is--level0 > .navigation--entry { display: none; } .sidebar--navigation.is--level0 > .navigation--entry.is--active { display: block; } .sidebar--navigation.is--level0 > .navigation--entry.is--active > .navigation--link.is--active { font-size: 18px; font-size: 1.125rem; font-style: italic; } .sidebar--navigation.is--level1 .navigation--entry .navigation--link.is--active { background: #00476b; } .sidebar--navigation.is--level2 .navigation--entry .navigation--link.is--active { background: none; color: #00476b; } .categories--navigation.is--level0 .navigation--entry:first-child .navigation--link.is--active { border-radius: 0; } } .product--box .box--content { border: none; } .product--box .product--image .image--element img { margin: 0 auto; padding: 10px 10px 10px 10px; padding: 0.625rem 0.625rem 0.625rem 0.625rem; border: 1px solid #dadae5; } .product--box .product--price .price--default { color: #8ed300; } .product--box .product--price-info { height: auto; } .product--box .nettopreis .price--discount { font-size: 12px; font-size: 0.75rem; line-height: 20px; line-height: 1.25rem; vertical-align: baseline; font-style: italic; text-decoration: line-through; } .product--box .btn--zum-artikel { background: #8ed300; } .product--title { color: #00476b; } .product--info .info_brutto, .product--info .nettopreis { color: #00476b; } .box--image .product--price { font-style: italic; } .box--image .product--info .nettopreis .price--netto { font-weight: 700; font-style: italic; } @media screen and (min-width: 30em) { .box--image .product--price-info { height: auto; } } @media screen and (min-width: 48em) { .box--image .product--price-info { height: auto; } } .custom-page--content a.hervorgehoben { font-size: 20px; font-size: 1.25rem; color: #8ed300; } @media screen and (min-width: 78.75em) { .content--home { margin-top: 0; } } .advanced-menu { background: rgba(0, 20, 31, 0.95); } .advanced-menu .menu--list-item-link { font-size: 14px; font-size: 0.875rem; color: #fff; } .advanced-menu .menu--list-item-link:hover { color: #fff; } .advanced-menu .button-container { display: none; } .advanced-menu .item--level-0 { text-transform: uppercase; } .advanced-menu .item--level-0 .menu--list-item-link { border-bottom: 2px solid #8ed300; } .advanced-menu .item--level-1 { text-transform: none; } .advanced-menu .item--level-1:last-child { margin: 0; } .advanced-menu .item--level-1 .menu--list-item-link { font-size: 14px; font-size: 0.875rem; color: #fff; border-bottom: none; padding: 0; } .advanced-menu .item--level-1 .menu--list-item-link:hover { color: #fff; } .advanced-menu .item--level-1 .menu--list-item-link:hover { padding: 0px 0px 0px 5px; padding: 0rem 0rem 0rem 0.3125rem; } .navigation-main .navigation--list .navigation--entry.is--hovered { background: #00141f; } .navigation-main .navigation--list .navigation--entry.is--hovered .navigation--link { background: #00141f; } /*# sourceMappingURL=/web/cache/css.source.map */