/* ============================================================================
   FUNCTIONS -> FUNCTIONS
============================================================================ */
/**
 * Global functions.
 */
/* ============================================================================
SETTINGS -> BREAKPOINTS
============================================================================ */
/* Variables
============================================================================ */
/* ============================================================================
SETTINGS -> BREAKPOINTS
============================================================================ */
/* Variables
============================================================================ */
/* ============================================================================
SETTINGS -> COLORS
============================================================================ */
/**
* Color configuration.
*/
/* Variables
============================================================================ */
/* Devine a unique color to search for while the development */
@keyframes overlay-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes overlay-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes play-pulse {
  0% {
    box-shadow: 0 0 0 3px #23384d, 0 0 0 3px rgba(35, 56, 77, 0.4);
  }
  100% {
    box-shadow: 0 0 0 3px #23384d, 0 0 24px 12px rgba(35, 56, 77, 0.4);
  }
}
/* ============================================================================
SETTINGS -> CORE
============================================================================ */
/**
* Core configuration.
*/
/* Variables
============================================================================ */
/* ============================================================================
SETTINGS -> FONT
============================================================================ */
/**
 * Font settings.
 */
/* Variables
============================================================================ */
/* ============================================================================
SETTINGS -> ELEMENTS
============================================================================ */
/**
* Define default styles for elements.
*/
/* Elements heading
============================================================================ */
/* Elements hr
============================================================================ */
/* Elements images
============================================================================ */
/* Elements input
============================================================================ */
/* Elements link
============================================================================ */
/* Elements list
============================================================================ */
/* Elements page
============================================================================ */
/* Elements paragraph
============================================================================ */
/* Elements PayPal Express
============================================================================ */
/* ============================================================================
SETTINGS -> GENERIC
============================================================================ */
/**
* Define default generic styles.
*/
/* ============================================================================
SETTINGS -> SHOWCASE
============================================================================ */
/**
* Define default styles for showcase.
*/
/* Variables
============================================================================ */
/**
* Container spacing
*/
/**
* Vertical spacing
*/
/**
* Centerwrap horizontal spacing
*/
/**
* Font family
*/
/**
* Font sizes
*/
/**
* Colors
*/
/**
* Image
*/
/**
* Slideshow
*/
/**
* Stage
*/
/**
* Description
*/
/* ============================================================================
LITEBOX :: hatraco/staticsrc/css/global/modules/_modules.litebox.scss
============================================================================ */
:root {
  --litebox-drawer-header-padding: 1rem 1.5rem;
  --litebox-header-color: white;
  --litebox-header-background: rgb(27.03125, 43.25, 59.46875);
  --litebox-title-font-family: futura-pt-book, Trebuchet MS, Arial, sans-serif;
}

/* ============================================================================
ACCORDION :: hatraco/staticsrc/css/global/mixins/_mixins.accordion.scss
============================================================================ */
/* ============================================================================
BREADCRUMB :: hatraco/staticsrc/css/global/mixins/_mixins.breadcrumb.scss
============================================================================ */
/* ============================================================================
BUTTON :: hatraco/staticsrc/css/global/mixins/_mixins.button.scss
============================================================================ */
/* ============================================================================
MESSAGING :: hatraco/staticsrc/css/global/mixins/_mixins.messaging.scss
============================================================================ */
/* local variables */
/* ============================================================================
NAVIGATION-SCROLLTOP :: hatraco/staticsrc/css/global/mixins/_mixins.navigation-scrolltop.scss
============================================================================ */
/* ============================================================================
PROMOTION-MODAL :: hatraco/staticsrc/css/global/mixins/_mixins.promotion-modal.scss
============================================================================ */
/* ============================================================================
NOTIFICATION :: hatraco/staticsrc/css/global/mixins/_mixins.notification.scss
============================================================================ */
/* ============================================================================
ICONS :: hatraco/staticsrc/css/global/mixins/_mixins.icons.scss
============================================================================ */
/* ============================================================================
SHOPMESSAGE :: hatraco/staticsrc/css/global/mixins/_mixins.shopmessage.scss
============================================================================ */
/* ============================================================================
DEALS :: staticsrc/css/global/mixins/_mixins.deal.scss
============================================================================ */
/* ============================================================================
PAYMENT :: hatraco/staticsrc/css/global/mixins/_mixins.payment.scss
============================================================================ */
/* ============================================================================
PAYMENT :: hatraco/staticsrc/css/global/mixins/_mixins.product-rating-form.scss
============================================================================ */
/* ============================================================================
CONTAINER-POSITION :: hatraco/staticsrc/css/global/mixins/_mixins.container-position.scss
============================================================================ */
/* ============================================================================
TABLE :: hatraco/staticsrc/css/global/mixins/_mixins.table.scss
============================================================================ */
/* ============================================================================
TOOLTIP :: hatraco/staticsrc/css/global/components/_components.tooltip.scss
============================================================================ */
/* ============================================================================
FOOTNOTE :: hatraco/staticsrc/css/global/components/_components.footnote.scss
============================================================================ */
/* ============================================================================
STORELOCATOR :: hatraco/staticsrc/css/global/modules/_modules.storelocator.scss
============================================================================ */
/* ============================================================================
SETTINGS -> CHECKOUT
============================================================================ */
/**
* Set variables for checkout.
*/
/* Checkout express checkout
============================================================================ */
/* Checkout Amazon Pay
============================================================================ */
/* Checkout PayPal express
============================================================================ */
/* Warning if address fields trimmed by external payment
============================================================================ */
/* SUGGEST */
/* SEARCH RESULTS */
/*
  V15
*/
.ss360-layer .ss360-filter__group--active::after {
  z-index: 1;
  position: absolute;
  height: 1px;
  inset: auto 0 0;
  background: white;
  content: "";
}

/* ============================================================================
TOOLS -> TOOLS
============================================================================ */
/**
 * Global tools import file
 */
/* ============================================================================
   TOOLS -> BROWSER
============================================================================ */
/* SAFARI.
============================================================================ */
/* IE/EDGE.
============================================================================ */
/**
 * Mixin to target Microsoft Internet Explorer 10+.
 */
/**
 * Mixin to target Microsoft Edge Browser 12+ (All).
 */
/* ============================================================================
TOOLS -> CONTAINER
============================================================================ */
/* Variables
============================================================================ */
/**
* Container mixins and functions used throughout the page
*/
/* Global container mixins
============================================================================ */
/**
* Mixin to transform a centerd container to a fullsize container
*/
/**
* Mixin to remove container gutter on small and add it at a
* specific breakpoint.
*/
/* Page container
============================================================================ */
/**
* Mixin to layout a page container
*/
/* Promotionbanner
============================================================================ */
/**
* Mixin to layout a promotionbanner
*/
/* Header
============================================================================ */
/**
* Mixin to layout a header
*/
/* Footer
============================================================================ */
/**
* Mixin to layout a footer
*/
/* Navigation
============================================================================ */
/**
* Mixin to layout a navigation
*/
/* Section
============================================================================ */
/**
* Mixin to layout a section
*/
/* Content
============================================================================ */
/**
* Mixin to layout a content
*/
/* Content container
============================================================================ */
/**
* Mixin to layout a content container with a maximum width
*/
/* ============================================================================
   TOOLS -> FLEX-CONTAINER
============================================================================ */
/**
 * Mixin to generate a flex-container with a specific flex-direction.
 * Direction takes it's corresponding property.
 * Defaults are:
 * - direction  ==> row
 */
/**
 * Mixin to generate a flex-item with a specific width.
 * The width has to be declared as a fraction e.g. 1/2.
 * If no width is declared, it defaults to 1 (100%).
 */
/**
 * Mixin to generate an offset for a flex-item.
 * Function is the same as for the flex-item calculation.
 */
/* ============================================================================
   TOOLS -> FONT
============================================================================ */
/**
* Mixin to create responsive type.
*/
/* ============================================================================
   TOOLS -> GRID
============================================================================ */
/**
 * Mixin to generate a grid-container with a specific gutter.
 */
/**
 * Mixin to generate a grid-item with a specific gutter.
 */
/**
 * Mixin to reset all spacing inside of a grid .
 */
/* ============================================================================
TOOLS -> HELPER
============================================================================ */
/**
* Mixin to create helper.
*/
/* Set to empty map () to reset */
/* Map of the form: $breakpoint-mplus: $font-size-m, */
/* Map of the form: $breakpoint-mplus: $font-size-m, */
.c-xsellers.swiper:not(.swiper-initialized) {
  opacity: 0;
}

@font-face {
  font-family: "graef-iconfont";
  src: url("../fonts/graef-iconfont.woff2?2480e65ce840aa91b0fa8257916d2ef8d5b3b86a96b9ef6c549c13165012b9fe11cc340c3edeed99") format("woff2"), url("../fonts/graef-iconfont.woff?2480e65ce840aa91b0fa8257916d2ef8d5b3b86a96b9ef6c549c13165012b9fe11cc340c3edeed99") format("woff");
  font-display: swap;
}
.icon.icon-youtube:before {
  content: "\f101"/"";
}

.icon.icon-whatsapp:before {
  content: "\f102"/"";
}

.icon.icon-video:before {
  content: "\f103"/"";
}

.icon.icon-update:before {
  content: "\f104"/"";
}

.icon.icon-twitter:before {
  content: "\f105"/"";
}

.icon.icon-trash:before {
  content: "\f106"/"";
}

.icon.icon-threesixty:before {
  content: "\f107"/"";
}

.icon.icon-threesixty-alt:before {
  content: "\f108"/"";
}

.icon.icon-storelocator:before {
  content: "\f109"/"";
}

.icon.icon-stockrecord:before {
  content: "\f10a"/"";
}

.icon.icon-star:before {
  content: "\f10b"/"";
}

.icon.icon-shopping-cart:before {
  content: "\f10c"/"";
}

.icon.icon-share:before {
  content: "\f10d"/"";
}

.icon.icon-secure:before {
  content: "\f10e"/"";
}

.icon.icon-preview:before {
  content: "\f10f"/"";
}

.icon.icon-plus:before {
  content: "\f110"/"";
}

.icon.icon-plus-small:before {
  content: "\f111"/"";
}

.icon.icon-play:before {
  content: "\f112"/"";
}

.icon.icon-play-filled:before {
  content: "\f113"/"";
}

.icon.icon-play-circle:before {
  content: "\f114"/"";
}

.icon.icon-play-circle-filled:before {
  content: "\f115"/"";
}

.icon.icon-pinterest:before {
  content: "\f116"/"";
}

.icon.icon-pdf:before {
  content: "\f117"/"";
}

.icon.icon-pause:before {
  content: "\f118"/"";
}

.icon.icon-pause-circle:before {
  content: "\f119"/"";
}

.icon.icon-passkey:before {
  content: "\f11a"/"";
}

.icon.icon-package:before {
  content: "\f11b"/"";
}

.icon.icon-out:before {
  content: "\f11c"/"";
}

.icon.icon-notify:before {
  content: "\f11d"/"";
}

.icon.icon-newsletter-coupon:before {
  content: "\f11e"/"";
}

.icon.icon-nav:before {
  content: "\f11f"/"";
}

.icon.icon-nav-expand:before {
  content: "\f120"/"";
}

.icon.icon-minus:before {
  content: "\f121"/"";
}

.icon.icon-minus-small:before {
  content: "\f122"/"";
}

.icon.icon-magnifier:before {
  content: "\f123"/"";
}

.icon.icon-logout:before {
  content: "\f124"/"";
}

.icon.icon-login:before {
  content: "\f125"/"";
}

.icon.icon-link:before {
  content: "\f126"/"";
}

.icon.icon-language:before {
  content: "\f127"/"";
}

.icon.icon-instagram:before {
  content: "\f128"/"";
}

.icon.icon-imagemap:before {
  content: "\f129"/"";
}

.icon.icon-icon-video:before {
  content: "\f12a"/"";
}

.icon.icon-icon-store:before {
  content: "\f12b"/"";
}

.icon.icon-icon-download:before {
  content: "\f12c"/"";
}

.icon.icon-icon-audio:before {
  content: "\f12d"/"";
}

.icon.icon-home:before {
  content: "\f12e"/"";
}

.icon.icon-help:before {
  content: "\f12f"/"";
}

.icon.icon-heart:before {
  content: "\f130"/"";
}

.icon.icon-globe:before {
  content: "\f131"/"";
}

.icon.icon-globe-language:before {
  content: "\f132"/"";
}

.icon.icon-german-manufacturer:before {
  content: "\f133"/"";
}

.icon.icon-german-manufacturer-old:before {
  content: "\f134"/"";
}

.icon.icon-german-manufacturer-alt:before {
  content: "\f135"/"";
}

.icon.icon-free-delivery:before {
  content: "\f136"/"";
}

.icon.icon-filter:before {
  content: "\f137"/"";
}

.icon.icon-filter-search:before {
  content: "\f138"/"";
}

.icon.icon-filter-reset-circle:before {
  content: "\f139"/"";
}

.icon.icon-filter-open:before {
  content: "\f13a"/"";
}

.icon.icon-filter-drawer:before {
  content: "\f13b"/"";
}

.icon.icon-filter-close:before {
  content: "\f13c"/"";
}

.icon.icon-filter-check:before {
  content: "\f13d"/"";
}

.icon.icon-file-upload-tiff:before {
  content: "\f13e"/"";
}

.icon.icon-file-upload-png:before {
  content: "\f13f"/"";
}

.icon.icon-file-upload-pdf:before {
  content: "\f140"/"";
}

.icon.icon-file-upload-jpeg:before {
  content: "\f141"/"";
}

.icon.icon-file-upload-default:before {
  content: "\f142"/"";
}

.icon.icon-facebook:before {
  content: "\f143"/"";
}

.icon.icon-facebook-f:before {
  content: "\f144"/"";
}

.icon.icon-external-link:before {
  content: "\f145"/"";
}

.icon.icon-edit:before {
  content: "\f146"/"";
}

.icon.icon-edit-square:before {
  content: "\f147"/"";
}

.icon.icon-easy-credit:before {
  content: "\f148"/"";
}

.icon.icon-download:before {
  content: "\f149"/"";
}

.icon.icon-discount-code:before {
  content: "\f14a"/"";
}

.icon.icon-descending:before {
  content: "\f14b"/"";
}

.icon.icon-configurator:before {
  content: "\f14c"/"";
}

.icon.icon-close:before {
  content: "\f14d"/"";
}

.icon.icon-close-circle:before {
  content: "\f14e"/"";
}

.icon.icon-clippy:before {
  content: "\f14f"/"";
}

.icon.icon-clippy-check:before {
  content: "\f150"/"";
}

.icon.icon-check:before {
  content: "\f151"/"";
}

.icon.icon-check-circle:before {
  content: "\f152"/"";
}

.icon.icon-catalog-view-matrix:before {
  content: "\f153"/"";
}

.icon.icon-catalog-view-list:before {
  content: "\f154"/"";
}

.icon.icon-bulletpoint:before {
  content: "\f155"/"";
}

.icon.icon-blog:before {
  content: "\f156"/"";
}

.icon.icon-augmented-reality:before {
  content: "\f157"/"";
}

.icon.icon-ascending:before {
  content: "\f158"/"";
}

.icon.icon-arrow-up:before {
  content: "\f159"/"";
}

.icon.icon-arrow-right:before {
  content: "\f15a"/"";
}

.icon.icon-arrow-left:before {
  content: "\f15b"/"";
}

.icon.icon-arrow-down:before {
  content: "\f15c"/"";
}

.icon.icon-angle-up:before {
  content: "\f15d"/"";
}

.icon.icon-angle-up-down:before {
  content: "\f15e"/"";
}

.icon.icon-angle-right:before {
  content: "\f15f"/"";
}

.icon.icon-angle-left:before {
  content: "\f160"/"";
}

.icon.icon-angle-last:before {
  content: "\f161"/"";
}

.icon.icon-angle-first:before {
  content: "\f162"/"";
}

.icon.icon-angle-down:before {
  content: "\f163"/"";
}

.icon.icon-angle-double-up:before {
  content: "\f164"/"";
}

.icon.icon-angle-double-down:before {
  content: "\f165"/"";
}

.icon.icon-account:before {
  content: "\f166"/"";
}

.icon.icon-DICIANOVA:before {
  content: "\f167"/"";
}

.icon {
  display: inline-block;
  font: normal normal normal 14px/1 "graef-iconfont";
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  vertical-align: -10%;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

/* ============================================================================
COMPONENTS -> SHOWCASE IMAGE
============================================================================ */
/**
* Define styles for image plugin.
*/
/* Image-plugin.
============================================================================ */
/* Included in
 hatraco/hatraco/templates/showcase/nextgen/plugins/showcase_container_image.html
 */

/*# sourceMappingURL=partials.showcase.image.css.map */