@charset "utf-8";

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

a {
    background: 0 0
}

a:focus {
    outline: thin dotted
}

a:active,
a:hover {
    outline: 0
}

.spotPriceItem--headline,
h1 {
    font-size: 2em;
    margin: .67em 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

mark {
    background: #ff0;
    color: #000
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em
}

pre {
    white-space: pre-wrap
}

q {
    quotes: "“" "”" "‘" "’"
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0
}

button,
input {
    line-height: normal
}

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
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

@font-face {
    font-family: icons;
    font-display: swap;
    src: url("../fonts/icons1786922271.woff2") format("woff2"), url("../fonts/icons1786922271.woff") format("woff")
}

.icon {
    font-family: icons;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-decoration: none;
    text-transform: none
}

:root {
    --base-icon-360: "\E001";
    --base-icon-academy: "\E002";
    --base-icon-adress: "\E003";
    --base-icon-adressbook: "\E004";
    --base-icon-angle-down-bold: "\E005";
    --base-icon-angle-down-light: "\E006";
    --base-icon-angle-down: "\E007";
    --base-icon-angle-left-bold: "\E008";
    --base-icon-angle-left-light: "\E009";
    --base-icon-angle-left: "\E00A";
    --base-icon-angle-right-bold: "\E00B";
    --base-icon-angle-right-light: "\E00C";
    --base-icon-angle-right: "\E00D";
    --base-icon-angle-up-bold: "\E00E";
    --base-icon-angle-up-light: "\E00F";
    --base-icon-angle-up: "\E010";
    --base-icon-angles-up-regular: "\E011";
    --base-icon-archive: "\E012";
    --base-icon-arrow-down-left: "\E013";
    --base-icon-arrow-down-right: "\E014";
    --base-icon-arrow-down: "\E015";
    --base-icon-arrow-left: "\E016";
    --base-icon-arrow-pointer: "\E017";
    --base-icon-arrow-right: "\E018";
    --base-icon-arrow-up-left: "\E019";
    --base-icon-arrow-up-right: "\E01A";
    --base-icon-arrow-up: "\E01B";
    --base-icon-badge: "\E01C";
    --base-icon-bank-location-light: "\E01D";
    --base-icon-bank-location: "\E01E";
    --base-icon-bank-user-light: "\E01F";
    --base-icon-bank-user: "\E020";
    --base-icon-bank: "\E021";
    --base-icon-bars-light: "\E022";
    --base-icon-bars: "\E023";
    --base-icon-basket: "\E024";
    --base-icon-bell-off: "\E025";
    --base-icon-bell: "\E026";
    --base-icon-book: "\E027";
    --base-icon-bookmark: "\E028";
    --base-icon-box-taped-light: "\E029";
    --base-icon-box-taped: "\E02A";
    --base-icon-box: "\E02B";
    --base-icon-briefcase: "\E02C";
    --base-icon-broadcast: "\E02D";
    --base-icon-building: "\E02E";
    --base-icon-camera-off: "\E02F";
    --base-icon-camera: "\E030";
    --base-icon-car: "\E031";
    --base-icon-chart-down: "\E032";
    --base-icon-chart-up: "\E033";
    --base-icon-chart: "\E034";
    --base-icon-chat-light: "\E035";
    --base-icon-chat: "\E036";
    --base-icon-check-bold: "\E037";
    --base-icon-check-circle-light: "\E038";
    --base-icon-check-circle: "\E039";
    --base-icon-check: "\E03A";
    --base-icon-clipboard: "\E03B";
    --base-icon-clock: "\E03C";
    --base-icon-close-bold: "\E03D";
    --base-icon-close-circle: "\E03E";
    --base-icon-close-light: "\E03F";
    --base-icon-close: "\E040";
    --base-icon-cloud: "\E041";
    --base-icon-columns: "\E042";
    --base-icon-copy: "\E043";
    --base-icon-crop: "\E044";
    --base-icon-date-light: "\E045";
    --base-icon-date: "\E046";
    --base-icon-document-archive: "\E047";
    --base-icon-dollar: "\E048";
    --base-icon-dots-annotation: "\E049";
    --base-icon-dots-horizontal: "\E04A";
    --base-icon-dots-vertical: "\E04B";
    --base-icon-dots: "\E04C";
    --base-icon-download: "\E04D";
    --base-icon-drag-drop: "\E04E";
    --base-icon-edit: "\E04F";
    --base-icon-emoji-happy: "\E050";
    --base-icon-emoji-sad: "\E051";
    --base-icon-euro: "\E052";
    --base-icon-exclamation-circle: "\E053";
    --base-icon-exclamation: "\E054";
    --base-icon-facebook: "\E055";
    --base-icon-fast-forward: "\E056";
    --base-icon-file-doc: "\E057";
    --base-icon-file-document: "\E058";
    --base-icon-file-image: "\E059";
    --base-icon-file-minus: "\E05A";
    --base-icon-file-pdf: "\E05B";
    --base-icon-file-plus: "\E05C";
    --base-icon-file-powerpoint: "\E05D";
    --base-icon-file-video: "\E05E";
    --base-icon-file-xls: "\E05F";
    --base-icon-filter-02: "\E060";
    --base-icon-filter-144: "\E061";
    --base-icon-filter-63: "\E062";
    --base-icon-filter: "\E063";
    --base-icon-folder-minus: "\E064";
    --base-icon-gift: "\E065";
    --base-icon-gold: "\E066";
    --base-icon-grid-masonry: "\E067";
    --base-icon-headphones: "\E068";
    --base-icon-heart-filled: "\E069";
    --base-icon-heart: "\E06A";
    --base-icon-home: "\E06B";
    --base-icon-inbox: "\E06C";
    --base-icon-info: "\E06D";
    --base-icon-instagram: "\E06E";
    --base-icon-invoice: "\E06F";
    --base-icon-key-light: "\E070";
    --base-icon-key: "\E071";
    --base-icon-language-light: "\E072";
    --base-icon-language: "\E073";
    --base-icon-layer: "\E074";
    --base-icon-link: "\E075";
    --base-icon-linkedin: "\E076";
    --base-icon-list: "\E077";
    --base-icon-loading: "\E078";
    --base-icon-lock: "\E079";
    --base-icon-logged: "\E07A";
    --base-icon-login: "\E07B";
    --base-icon-logout: "\E07C";
    --base-icon-mail: "\E07D";
    --base-icon-map-pin: "\E07E";
    --base-icon-map: "\E07F";
    --base-icon-marketing: "\E080";
    --base-icon-maximize: "\E081";
    --base-icon-minimize: "\E082";
    --base-icon-minus-circle: "\E083";
    --base-icon-minus-light: "\E084";
    --base-icon-minus: "\E085";
    --base-icon-monitor: "\E086";
    --base-icon-music: "\E087";
    --base-icon-password-hide: "\E088";
    --base-icon-password-show: "\E089";
    --base-icon-pause: "\E08A";
    --base-icon-payment-light: "\E08B";
    --base-icon-payment: "\E08C";
    --base-icon-pen-to-square: "\E08D";
    --base-icon-percentage: "\E08E";
    --base-icon-phone: "\E08F";
    --base-icon-pinterest: "\E090";
    --base-icon-play: "\E091";
    --base-icon-plus-circle: "\E092";
    --base-icon-plus-light: "\E093";
    --base-icon-plus: "\E094";
    --base-icon-print: "\E095";
    --base-icon-question: "\E096";
    --base-icon-quickorder: "\E097";
    --base-icon-redo: "\E098";
    --base-icon-register: "\E099";
    --base-icon-reload: "\E09A";
    --base-icon-retoure: "\E09B";
    --base-icon-rewind: "\E09C";
    --base-icon-save: "\E09D";
    --base-icon-search: "\E09E";
    --base-icon-send: "\E09F";
    --base-icon-service: "\E0A0";
    --base-icon-settings: "\E0A1";
    --base-icon-share: "\E0A2";
    --base-icon-shield-check-light: "\E0A3";
    --base-icon-shield-check: "\E0A4";
    --base-icon-shield-close: "\E0A5";
    --base-icon-shield-warning: "\E0A6";
    --base-icon-shield: "\E0A7";
    --base-icon-shipping: "\E0A8";
    --base-icon-skip-back: "\E0A9";
    --base-icon-skip-forward: "\E0AA";
    --base-icon-slash: "\E0AB";
    --base-icon-sorting: "\E0AC";
    --base-icon-spinner: "\E0AD";
    --base-icon-star-filled: "\E0AE";
    --base-icon-star-half: "\E0AF";
    --base-icon-star: "\E0B0";
    --base-icon-stop: "\E0B1";
    --base-icon-subscriptions: "\E0B2";
    --base-icon-sun: "\E0B3";
    --base-icon-tag: "\E0B4";
    --base-icon-target: "\E0B5";
    --base-icon-ticket: "\E0B6";
    --base-icon-tiktok: "\E0B7";
    --base-icon-trash: "\E0B8";
    --base-icon-twitter: "\E0B9";
    --base-icon-undo: "\E0BA";
    --base-icon-upload: "\E0BB";
    --base-icon-user-check: "\E0BC";
    --base-icon-user-close: "\E0BD";
    --base-icon-user-minus: "\E0BE";
    --base-icon-user-plus: "\E0BF";
    --base-icon-user-shield-light: "\E0C0";
    --base-icon-user-shield: "\E0C1";
    --base-icon-user: "\E0C2";
    --base-icon-users-minus: "\E0C3";
    --base-icon-users-plus: "\E0C4";
    --base-icon-users: "\E0C5";
    --base-icon-volume: "\E0C6";
    --base-icon-warning-annotation: "\E0C7";
    --base-icon-warning-triangle: "\E0C8";
    --base-icon-whatsapp: "\E0C9";
    --base-icon-xing: "\E0CA";
    --base-icon-youtube: "\E0CB";
    --base-icon-zip-file: "\E0CC";
    --base-icon-zoom-out: "\E0CD";
    --base-icon-zoom: "\E0CE"
}

.icon-360:before {
    content: var(--base-icon-360)
}

.icon-academy:before {
    content: var(--base-icon-academy)
}

.icon-adress:before {
    content: var(--base-icon-adress)
}

.icon-adressbook:before {
    content: var(--base-icon-adressbook)
}

.icon-angle-down-bold:before {
    content: var(--base-icon-angle-down-bold)
}

.icon-angle-down-light:before {
    content: var(--base-icon-angle-down-light)
}

.icon-angle-down:before {
    content: var(--base-icon-angle-down)
}

.icon-angle-left-bold:before {
    content: var(--base-icon-angle-left-bold)
}

.icon-angle-left-light:before {
    content: var(--base-icon-angle-left-light)
}

.icon-angle-left:before {
    content: var(--base-icon-angle-left)
}

.icon-angle-right-bold:before {
    content: var(--base-icon-angle-right-bold)
}

.icon-angle-right-light:before {
    content: var(--base-icon-angle-right-light)
}

.icon-angle-right:before {
    content: var(--base-icon-angle-right)
}

.icon-angle-up-bold:before {
    content: var(--base-icon-angle-up-bold)
}

.icon-angle-up-light:before {
    content: var(--base-icon-angle-up-light)
}

.icon-angle-up:before {
    content: var(--base-icon-angle-up)
}

.icon-angles-up-regular:before {
    content: var(--base-icon-angles-up-regular)
}

.icon-archive:before {
    content: var(--base-icon-archive)
}

.icon-arrow-down-left:before {
    content: var(--base-icon-arrow-down-left)
}

.icon-arrow-down-right:before {
    content: var(--base-icon-arrow-down-right)
}

.icon-arrow-down:before {
    content: var(--base-icon-arrow-down)
}

.icon-arrow-left:before {
    content: var(--base-icon-arrow-left)
}

.icon-arrow-pointer:before {
    content: var(--base-icon-arrow-pointer)
}

.icon-arrow-right:before {
    content: var(--base-icon-arrow-right)
}

.icon-arrow-up-left:before {
    content: var(--base-icon-arrow-up-left)
}

.icon-arrow-up-right:before {
    content: var(--base-icon-arrow-up-right)
}

.icon-arrow-up:before {
    content: var(--base-icon-arrow-up)
}

.icon-badge:before {
    content: var(--base-icon-badge)
}

.icon-bank-location-light:before {
    content: var(--base-icon-bank-location-light)
}

.icon-bank-location:before {
    content: var(--base-icon-bank-location)
}

.icon-bank-user-light:before {
    content: var(--base-icon-bank-user-light)
}

.icon-bank-user:before {
    content: var(--base-icon-bank-user)
}

.icon-bank:before {
    content: var(--base-icon-bank)
}

.icon-bars-light:before {
    content: var(--base-icon-bars-light)
}

.icon-bars:before {
    content: var(--base-icon-bars)
}

.icon-basket:before {
    content: var(--base-icon-basket)
}

.icon-bell-off:before {
    content: var(--base-icon-bell-off)
}

.icon-bell:before {
    content: var(--base-icon-bell)
}

.icon-book:before {
    content: var(--base-icon-book)
}

.icon-bookmark:before {
    content: var(--base-icon-bookmark)
}

.icon-box-taped-light:before {
    content: var(--base-icon-box-taped-light)
}

.icon-box-taped:before {
    content: var(--base-icon-box-taped)
}

.icon-box:before {
    content: var(--base-icon-box)
}

.icon-briefcase:before {
    content: var(--base-icon-briefcase)
}

.icon-broadcast:before {
    content: var(--base-icon-broadcast)
}

.icon-building:before {
    content: var(--base-icon-building)
}

.icon-camera-off:before {
    content: var(--base-icon-camera-off)
}

.icon-camera:before {
    content: var(--base-icon-camera)
}

.icon-car:before {
    content: var(--base-icon-car)
}

.icon-chart-down:before {
    content: var(--base-icon-chart-down)
}

.icon-chart-up:before {
    content: var(--base-icon-chart-up)
}

.icon-chart:before {
    content: var(--base-icon-chart)
}

.icon-chat-light:before {
    content: var(--base-icon-chat-light)
}

.icon-chat:before {
    content: var(--base-icon-chat)
}

.icon-check-bold:before {
    content: var(--base-icon-check-bold)
}

.icon-check-circle-light:before {
    content: var(--base-icon-check-circle-light)
}

.icon-check-circle:before {
    content: var(--base-icon-check-circle)
}

.icon-check:before {
    content: var(--base-icon-check)
}

.icon-clipboard:before {
    content: var(--base-icon-clipboard)
}

.icon-clock:before {
    content: var(--base-icon-clock)
}

.icon-close-bold:before {
    content: var(--base-icon-close-bold)
}

.icon-close-circle:before {
    content: var(--base-icon-close-circle)
}

.icon-close-light:before {
    content: var(--base-icon-close-light)
}

.icon-close:before {
    content: var(--base-icon-close)
}

.icon-cloud:before {
    content: var(--base-icon-cloud)
}

.icon-columns:before {
    content: var(--base-icon-columns)
}

.icon-copy:before {
    content: var(--base-icon-copy)
}

.icon-crop:before {
    content: var(--base-icon-crop)
}

.icon-date-light:before {
    content: var(--base-icon-date-light)
}

.icon-date:before {
    content: var(--base-icon-date)
}

.icon-document-archive:before {
    content: var(--base-icon-document-archive)
}

.icon-dollar:before {
    content: var(--base-icon-dollar)
}

.icon-dots-annotation:before {
    content: var(--base-icon-dots-annotation)
}

.icon-dots-horizontal:before {
    content: var(--base-icon-dots-horizontal)
}

.icon-dots-vertical:before {
    content: var(--base-icon-dots-vertical)
}

.icon-dots:before {
    content: var(--base-icon-dots)
}

.icon-download:before {
    content: var(--base-icon-download)
}

.icon-drag-drop:before {
    content: var(--base-icon-drag-drop)
}

.icon-edit:before {
    content: var(--base-icon-edit)
}

.icon-emoji-happy:before {
    content: var(--base-icon-emoji-happy)
}

.icon-emoji-sad:before {
    content: var(--base-icon-emoji-sad)
}

.icon-euro:before {
    content: var(--base-icon-euro)
}

.icon-exclamation-circle:before {
    content: var(--base-icon-exclamation-circle)
}

.icon-exclamation:before {
    content: var(--base-icon-exclamation)
}

.icon-facebook:before {
    content: var(--base-icon-facebook)
}

.icon-fast-forward:before {
    content: var(--base-icon-fast-forward)
}

.icon-file-doc:before {
    content: var(--base-icon-file-doc)
}

.icon-file-document:before {
    content: var(--base-icon-file-document)
}

.icon-file-image:before {
    content: var(--base-icon-file-image)
}

.icon-file-minus:before {
    content: var(--base-icon-file-minus)
}

.icon-file-pdf:before {
    content: var(--base-icon-file-pdf)
}

.icon-file-plus:before {
    content: var(--base-icon-file-plus)
}

.icon-file-powerpoint:before {
    content: var(--base-icon-file-powerpoint)
}

.icon-file-video:before {
    content: var(--base-icon-file-video)
}

.icon-file-xls:before {
    content: var(--base-icon-file-xls)
}

.icon-filter-02:before {
    content: var(--base-icon-filter-02)
}

.icon-filter-144:before {
    content: var(--base-icon-filter-144)
}

.icon-filter-63:before {
    content: var(--base-icon-filter-63)
}

.icon-filter:before {
    content: var(--base-icon-filter)
}

.icon-folder-minus:before {
    content: var(--base-icon-folder-minus)
}

.icon-gift:before {
    content: var(--base-icon-gift)
}

.icon-gold:before {
    content: var(--base-icon-gold)
}

.icon-grid-masonry:before {
    content: var(--base-icon-grid-masonry)
}

.icon-headphones:before {
    content: var(--base-icon-headphones)
}

.icon-heart-filled:before {
    content: var(--base-icon-heart-filled)
}

.icon-heart:before {
    content: var(--base-icon-heart)
}

.icon-home:before {
    content: var(--base-icon-home)
}

.icon-inbox:before {
    content: var(--base-icon-inbox)
}

.icon-info:before {
    content: var(--base-icon-info)
}

.icon-instagram:before {
    content: var(--base-icon-instagram)
}

.icon-invoice:before {
    content: var(--base-icon-invoice)
}

.icon-key-light:before {
    content: var(--base-icon-key-light)
}

.icon-key:before {
    content: var(--base-icon-key)
}

.icon-language-light:before {
    content: var(--base-icon-language-light)
}

.icon-language:before {
    content: var(--base-icon-language)
}

.icon-layer:before {
    content: var(--base-icon-layer)
}

.icon-link:before {
    content: var(--base-icon-link)
}

.icon-linkedin:before {
    content: var(--base-icon-linkedin)
}

.icon-list:before {
    content: var(--base-icon-list)
}

.icon-loading:before {
    content: var(--base-icon-loading)
}

.icon-lock:before {
    content: var(--base-icon-lock)
}

.icon-logged:before {
    content: var(--base-icon-logged)
}

.icon-login:before {
    content: var(--base-icon-login)
}

.icon-logout:before {
    content: var(--base-icon-logout)
}

.icon-mail:before {
    content: var(--base-icon-mail)
}

.icon-map-pin:before {
    content: var(--base-icon-map-pin)
}

.icon-map:before {
    content: var(--base-icon-map)
}

.icon-marketing:before {
    content: var(--base-icon-marketing)
}

.icon-maximize:before {
    content: var(--base-icon-maximize)
}

.icon-minimize:before {
    content: var(--base-icon-minimize)
}

.icon-minus-circle:before {
    content: var(--base-icon-minus-circle)
}

.icon-minus-light:before {
    content: var(--base-icon-minus-light)
}

.icon-minus:before {
    content: var(--base-icon-minus)
}

.icon-monitor:before {
    content: var(--base-icon-monitor)
}

.icon-music:before {
    content: var(--base-icon-music)
}

.icon-password-hide:before {
    content: var(--base-icon-password-hide)
}

.icon-password-show:before {
    content: var(--base-icon-password-show)
}

.icon-pause:before {
    content: var(--base-icon-pause)
}

.icon-payment-light:before {
    content: var(--base-icon-payment-light)
}

.icon-payment:before {
    content: var(--base-icon-payment)
}

.icon-pen-to-square:before {
    content: var(--base-icon-pen-to-square)
}

.icon-percentage:before {
    content: var(--base-icon-percentage)
}

.icon-phone:before {
    content: var(--base-icon-phone)
}

.icon-pinterest:before {
    content: var(--base-icon-pinterest)
}

.icon-play:before {
    content: var(--base-icon-play)
}

.icon-plus-circle:before {
    content: var(--base-icon-plus-circle)
}

.icon-plus-light:before {
    content: var(--base-icon-plus-light)
}

.icon-plus:before {
    content: var(--base-icon-plus)
}

.icon-print:before {
    content: var(--base-icon-print)
}

.icon-question:before {
    content: var(--base-icon-question)
}

.icon-quickorder:before {
    content: var(--base-icon-quickorder)
}

.icon-redo:before {
    content: var(--base-icon-redo)
}

.icon-register:before {
    content: var(--base-icon-register)
}

.icon-reload:before {
    content: var(--base-icon-reload)
}

.icon-retoure:before {
    content: var(--base-icon-retoure)
}

.icon-rewind:before {
    content: var(--base-icon-rewind)
}

.icon-save:before {
    content: var(--base-icon-save)
}

.icon-search:before {
    content: var(--base-icon-search)
}

.icon-send:before {
    content: var(--base-icon-send)
}

.icon-service:before {
    content: var(--base-icon-service)
}

.icon-settings:before {
    content: var(--base-icon-settings)
}

.icon-share:before {
    content: var(--base-icon-share)
}

.icon-shield-check-light:before {
    content: var(--base-icon-shield-check-light)
}

.icon-shield-check:before {
    content: var(--base-icon-shield-check)
}

.icon-shield-close:before {
    content: var(--base-icon-shield-close)
}

.icon-shield-warning:before {
    content: var(--base-icon-shield-warning)
}

.icon-shield:before {
    content: var(--base-icon-shield)
}

.icon-shipping:before {
    content: var(--base-icon-shipping)
}

.icon-skip-back:before {
    content: var(--base-icon-skip-back)
}

.icon-skip-forward:before {
    content: var(--base-icon-skip-forward)
}

.icon-slash:before {
    content: var(--base-icon-slash)
}

.icon-sorting:before {
    content: var(--base-icon-sorting)
}

.icon-spinner:before {
    content: var(--base-icon-spinner)
}

.icon-star-filled:before {
    content: var(--base-icon-star-filled)
}

.icon-star-half:before {
    content: var(--base-icon-star-half)
}

.icon-star:before {
    content: var(--base-icon-star)
}

.icon-stop:before {
    content: var(--base-icon-stop)
}

.icon-subscriptions:before {
    content: var(--base-icon-subscriptions)
}

.icon-sun:before {
    content: var(--base-icon-sun)
}

.icon-tag:before {
    content: var(--base-icon-tag)
}

.icon-target:before {
    content: var(--base-icon-target)
}

.icon-ticket:before {
    content: var(--base-icon-ticket)
}

.icon-tiktok:before {
    content: var(--base-icon-tiktok)
}

.icon-trash:before {
    content: var(--base-icon-trash)
}

.icon-twitter:before {
    content: var(--base-icon-twitter)
}

.icon-undo:before {
    content: var(--base-icon-undo)
}

.icon-upload:before {
    content: var(--base-icon-upload)
}

.icon-user-check:before {
    content: var(--base-icon-user-check)
}

.icon-user-close:before {
    content: var(--base-icon-user-close)
}

.icon-user-minus:before {
    content: var(--base-icon-user-minus)
}

.icon-user-plus:before {
    content: var(--base-icon-user-plus)
}

.icon-user-shield-light:before {
    content: var(--base-icon-user-shield-light)
}

.icon-user-shield:before {
    content: var(--base-icon-user-shield)
}

.icon-user:before {
    content: var(--base-icon-user)
}

.icon-users-minus:before {
    content: var(--base-icon-users-minus)
}

.icon-users-plus:before {
    content: var(--base-icon-users-plus)
}

.icon-users:before {
    content: var(--base-icon-users)
}

.icon-volume:before {
    content: var(--base-icon-volume)
}

.icon-warning-annotation:before {
    content: var(--base-icon-warning-annotation)
}

.icon-warning-triangle:before {
    content: var(--base-icon-warning-triangle)
}

.icon-whatsapp:before {
    content: var(--base-icon-whatsapp)
}

.icon-xing:before {
    content: var(--base-icon-xing)
}

.icon-youtube:before {
    content: var(--base-icon-youtube)
}

.icon-zip-file:before {
    content: var(--base-icon-zip-file)
}

.icon-zoom-out:before {
    content: var(--base-icon-zoom-out)
}

.icon-zoom:before {
    content: var(--base-icon-zoom)
}

:root {
    --main-color-white: #ffffff;
    --main-color-black: #3c3c3b;
    --main-color-gray-base: #D8D8D8;
    --main-color-middle-gray: #949494;
    --main-color-dark-gray: #707070;
    --main-color-light-gray: #EEE;
    --main-color-primary: #BE9F56;
    --main-color-primary-light: #F8F5EE;
    --main-color-primary-medium: #CBB278;
    --main-color-primary-dark: #A18646;
    --main-color-primary-darken: #756025;
    --main-color-secondary: #002E55;
    --main-color-secondary-light: #E5EAEE;
    --main-color-secondary-medium: #4D6D88;
    --main-color-secondary-dark: #01213C;
    --main-color-action: #002E55;
    --main-color-danger: #880727;
    --main-color-danger-dark: #780520;
    --main-color-danger-darken: #65041d;
    --main-color-warning: #FAAF00;
    --main-color-warning-dark: #df9d00;
    --main-color-warning-darken: #bc8700;
    --main-color-success: #1E874C;
    --main-color-success-dark: #1a7844;
    --main-color-success-darken: #104a2a;
    --main-color-info: #949494;
    --main-color-gray-background: #F5F5F5;
    --main-color-primary-contrast: #3c3c3b;
    --main-color-primary-light-contrast: #3c3c3b;
    --main-color-primary-medium-contrast: #3c3c3b;
    --main-color-primary-dark-contrast: #3c3c3b;
    --main-color-primary-darken-contrast: #ffffff;
    --main-color-secondary-contrast: #ffffff;
    --main-color-secondary-light-contrast: #3c3c3b;
    --main-color-secondary-medium-contrast: #ffffff;
    --main-color-secondary-dark-contrast: #ffffff;
    --main-color-action-contrast: #ffffff;
    --main-color-danger-contrast: #ffffff;
    --main-color-danger-dark-contrast: #ffffff;
    --main-color-danger-darken-contrast: #ffffff;
    --main-color-warning-contrast: #3c3c3b;
    --main-color-warning-dark-contrast: #3c3c3b;
    --main-color-warning-darken-contrast: #3c3c3b;
    --main-color-success-contrast: #ffffff;
    --main-color-success-dark-contrast: #ffffff;
    --main-color-success-darken-contrast: #ffffff;
    --main-color-info-contrast: #3c3c3b;
    --main-font-family: Figtree, Helvetica, Arial, sans-serif;
    --main-font-weight: 300;
    --main-font-weight-medium: 400;
    --main-font-weight-bold: 500;
    --main-font-size-base: 1.6rem;
    --main-font-size-small: 1.4rem;
    --main-font-size-big: 1.8rem;
    --main-line-height: 1.4;
    --main-link-color: #707070;
    --main-link-color-hover: #BE9F56
}

[role=tooltip] {
    display: none
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.overflow-auto {
    overflow: auto
}

.overflow-hidden {
    overflow: hidden
}

.overflow-visible {
    overflow: visible
}

.overflow-scroll {
    overflow: scroll
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.overflow-x-visible {
    overflow-x: visible
}

.overflow-x-scroll {
    overflow-x: scroll
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-y-hidden {
    overflow-y: hidden
}

.overflow-y-visible {
    overflow-y: visible
}

.overflow-y-scroll {
    overflow-y: scroll
}

.shadow {
    box-shadow: 0 0 40px rgba(0, 0, 0, .08)
}

.shadow-sm {
    box-shadow: 0 0 60px rgba(0, 0, 0, .08)
}

.shadow-lg {
    box-shadow: 0 0 80px rgba(0, 0, 0, .08)
}

.shadow-none {
    box-shadow: none
}

.position-static {
    position: static
}

.position-relative {
    position: relative
}

.position-absolute {
    position: absolute
}

.position-fixed {
    position: fixed
}

.position-sticky {
    position: sticky
}

.translate-middle {
    transform: translate(-50%, -50%)
}

.translate-middle-x {
    transform: translateX(-50%)
}

.translate-middle-y {
    transform: translateY(-50%)
}

.flex-fill {
    flex: 1 1 auto
}

.flex-row {
    flex-direction: row
}

.flex-column {
    flex-direction: column
}

.flex-row-reverse {
    flex-direction: row-reverse
}

.flex-column-reverse {
    flex-direction: column-reverse
}

.flex-grow-0 {
    flex-grow: 0
}

.flex-grow-1 {
    flex-grow: 1
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-shrink-1 {
    flex-shrink: 1
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-nowrap {
    flex-wrap: nowrap
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse
}

.justify-content-start {
    justify-content: flex-start
}

.justify-content-end {
    justify-content: flex-end
}

.justify-content-center {
    justify-content: center
}

.justify-content-between {
    justify-content: space-between
}

.justify-content-around {
    justify-content: space-around
}

.justify-content-evenly {
    justify-content: space-evenly
}

.align-items-start {
    align-items: flex-start
}

.align-items-end {
    align-items: flex-end
}

.align-items-center {
    align-items: center
}

.align-items-baseline {
    align-items: baseline
}

.align-items-stretch {
    align-items: stretch
}

.align-content-start {
    align-content: flex-start
}

.align-content-end {
    align-content: flex-end
}

.align-content-center {
    align-content: center
}

.align-content-between {
    align-content: space-between
}

.align-content-around {
    align-content: space-around
}

.align-content-stretch {
    align-content: stretch
}

.align-self-auto {
    align-self: auto
}

.align-self-start {
    align-self: flex-start
}

.align-self-end {
    align-self: flex-end
}

.align-self-center {
    align-self: center
}

.align-self-baseline {
    align-self: baseline
}

.align-self-stretch {
    align-self: stretch
}

.order-first {
    order: -1
}

.order-0 {
    order: 0
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-last {
    order: 6
}

.text-start {
    text-align: left
}

.text-end {
    text-align: right
}

.text-center {
    text-align: center
}

.rounded {
    border-radius: var(--dc-border-radius)
}

.rounded-0 {
    border-radius: 0
}

.rounded-1 {
    border-radius: var(--dc-border-radius-sm)
}

.rounded-2 {
    border-radius: var(--dc-border-radius)
}

.rounded-3 {
    border-radius: var(--dc-border-radius-lg)
}

.rounded-4 {
    border-radius: var(--dc-border-radius-xl)
}

.rounded-5 {
    border-radius: var(--dc-border-radius-xxl)
}

.rounded-circle {
    border-radius: 50%
}

.rounded-pill {
    border-radius: var(--dc-border-radius-pill)
}

.rounded-top {
    border-top-left-radius: var(--dc-border-radius);
    border-top-right-radius: var(--dc-border-radius)
}

.rounded-top-0 {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.rounded-top-1 {
    border-top-left-radius: var(--dc-border-radius-sm);
    border-top-right-radius: var(--dc-border-radius-sm)
}

.rounded-top-2 {
    border-top-left-radius: var(--dc-border-radius);
    border-top-right-radius: var(--dc-border-radius)
}

.rounded-top-3 {
    border-top-left-radius: var(--dc-border-radius-lg);
    border-top-right-radius: var(--dc-border-radius-lg)
}

.rounded-top-4 {
    border-top-left-radius: var(--dc-border-radius-xl);
    border-top-right-radius: var(--dc-border-radius-xl)
}

.rounded-top-5 {
    border-top-left-radius: var(--dc-border-radius-xxl);
    border-top-right-radius: var(--dc-border-radius-xxl)
}

.rounded-top-circle {
    border-top-left-radius: 50%;
    border-top-right-radius: 50%
}

.rounded-top-pill {
    border-top-left-radius: var(--dc-border-radius-pill);
    border-top-right-radius: var(--dc-border-radius-pill)
}

.rounded-end {
    border-top-right-radius: var(--dc-border-radius);
    border-bottom-right-radius: var(--dc-border-radius)
}

.rounded-end-0 {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.rounded-end-1 {
    border-top-right-radius: var(--dc-border-radius-sm);
    border-bottom-right-radius: var(--dc-border-radius-sm)
}

.rounded-end-2 {
    border-top-right-radius: var(--dc-border-radius);
    border-bottom-right-radius: var(--dc-border-radius)
}

.rounded-end-3 {
    border-top-right-radius: var(--dc-border-radius-lg);
    border-bottom-right-radius: var(--dc-border-radius-lg)
}

.rounded-end-4 {
    border-top-right-radius: var(--dc-border-radius-xl);
    border-bottom-right-radius: var(--dc-border-radius-xl)
}

.rounded-end-5 {
    border-top-right-radius: var(--dc-border-radius-xxl);
    border-bottom-right-radius: var(--dc-border-radius-xxl)
}

.rounded-end-circle {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%
}

.rounded-end-pill {
    border-top-right-radius: var(--dc-border-radius-pill);
    border-bottom-right-radius: var(--dc-border-radius-pill)
}

.rounded-bottom {
    border-bottom-right-radius: var(--dc-border-radius);
    border-bottom-left-radius: var(--dc-border-radius)
}

.rounded-bottom-0 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.rounded-bottom-1 {
    border-bottom-right-radius: var(--dc-border-radius-sm);
    border-bottom-left-radius: var(--dc-border-radius-sm)
}

.rounded-bottom-2 {
    border-bottom-right-radius: var(--dc-border-radius);
    border-bottom-left-radius: var(--dc-border-radius)
}

.rounded-bottom-3 {
    border-bottom-right-radius: var(--dc-border-radius-lg);
    border-bottom-left-radius: var(--dc-border-radius-lg)
}

.rounded-bottom-4 {
    border-bottom-right-radius: var(--dc-border-radius-xl);
    border-bottom-left-radius: var(--dc-border-radius-xl)
}

.rounded-bottom-5 {
    border-bottom-right-radius: var(--dc-border-radius-xxl);
    border-bottom-left-radius: var(--dc-border-radius-xxl)
}

.rounded-bottom-circle {
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%
}

.rounded-bottom-pill {
    border-bottom-right-radius: var(--dc-border-radius-pill);
    border-bottom-left-radius: var(--dc-border-radius-pill)
}

.rounded-start {
    border-bottom-left-radius: var(--dc-border-radius);
    border-top-left-radius: var(--dc-border-radius)
}

.rounded-start-0 {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.rounded-start-1 {
    border-bottom-left-radius: var(--dc-border-radius-sm);
    border-top-left-radius: var(--dc-border-radius-sm)
}

.rounded-start-2 {
    border-bottom-left-radius: var(--dc-border-radius);
    border-top-left-radius: var(--dc-border-radius)
}

.rounded-start-3 {
    border-bottom-left-radius: var(--dc-border-radius-lg);
    border-top-left-radius: var(--dc-border-radius-lg)
}

.rounded-start-4 {
    border-bottom-left-radius: var(--dc-border-radius-xl);
    border-top-left-radius: var(--dc-border-radius-xl)
}

.rounded-start-5 {
    border-bottom-left-radius: var(--dc-border-radius-xxl);
    border-top-left-radius: var(--dc-border-radius-xxl)
}

.rounded-start-circle {
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%
}

.rounded-start-pill {
    border-bottom-left-radius: var(--dc-border-radius-pill);
    border-top-left-radius: var(--dc-border-radius-pill)
}

@media (min-width:768px) {
    .flex-sm-fill {
        flex: 1 1 auto
    }

    .flex-sm-row {
        flex-direction: row
    }

    .flex-sm-column {
        flex-direction: column
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse
    }

    .flex-sm-grow-0 {
        flex-grow: 0
    }

    .flex-sm-grow-1 {
        flex-grow: 1
    }

    .flex-sm-shrink-0 {
        flex-shrink: 0
    }

    .flex-sm-shrink-1 {
        flex-shrink: 1
    }

    .flex-sm-wrap {
        flex-wrap: wrap
    }

    .flex-sm-nowrap {
        flex-wrap: nowrap
    }

    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse
    }

    .justify-content-sm-start {
        justify-content: flex-start
    }

    .justify-content-sm-end {
        justify-content: flex-end
    }

    .justify-content-sm-center {
        justify-content: center
    }

    .justify-content-sm-between {
        justify-content: space-between
    }

    .justify-content-sm-around {
        justify-content: space-around
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly
    }

    .align-items-sm-start {
        align-items: flex-start
    }

    .align-items-sm-end {
        align-items: flex-end
    }

    .align-items-sm-center {
        align-items: center
    }

    .align-items-sm-baseline {
        align-items: baseline
    }

    .align-items-sm-stretch {
        align-items: stretch
    }

    .align-content-sm-start {
        align-content: flex-start
    }

    .align-content-sm-end {
        align-content: flex-end
    }

    .align-content-sm-center {
        align-content: center
    }

    .align-content-sm-between {
        align-content: space-between
    }

    .align-content-sm-around {
        align-content: space-around
    }

    .align-content-sm-stretch {
        align-content: stretch
    }

    .align-self-sm-auto {
        align-self: auto
    }

    .align-self-sm-start {
        align-self: flex-start
    }

    .align-self-sm-end {
        align-self: flex-end
    }

    .align-self-sm-center {
        align-self: center
    }

    .align-self-sm-baseline {
        align-self: baseline
    }

    .align-self-sm-stretch {
        align-self: stretch
    }

    .order-sm-first {
        order: -1
    }

    .order-sm-0 {
        order: 0
    }

    .order-sm-1 {
        order: 1
    }

    .order-sm-2 {
        order: 2
    }

    .order-sm-3 {
        order: 3
    }

    .order-sm-4 {
        order: 4
    }

    .order-sm-5 {
        order: 5
    }

    .order-sm-last {
        order: 6
    }

    .text-sm-start {
        text-align: left
    }

    .text-sm-end {
        text-align: right
    }

    .text-sm-center {
        text-align: center
    }
}

@media (min-width:1024px) {
    .flex-md-fill {
        flex: 1 1 auto
    }

    .flex-md-row {
        flex-direction: row
    }

    .flex-md-column {
        flex-direction: column
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse
    }

    .flex-md-grow-0 {
        flex-grow: 0
    }

    .flex-md-grow-1 {
        flex-grow: 1
    }

    .flex-md-shrink-0 {
        flex-shrink: 0
    }

    .flex-md-shrink-1 {
        flex-shrink: 1
    }

    .flex-md-wrap {
        flex-wrap: wrap
    }

    .flex-md-nowrap {
        flex-wrap: nowrap
    }

    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse
    }

    .justify-content-md-start {
        justify-content: flex-start
    }

    .justify-content-md-end {
        justify-content: flex-end
    }

    .justify-content-md-center {
        justify-content: center
    }

    .justify-content-md-between {
        justify-content: space-between
    }

    .justify-content-md-around {
        justify-content: space-around
    }

    .justify-content-md-evenly {
        justify-content: space-evenly
    }

    .align-items-md-start {
        align-items: flex-start
    }

    .align-items-md-end {
        align-items: flex-end
    }

    .align-items-md-center {
        align-items: center
    }

    .align-items-md-baseline {
        align-items: baseline
    }

    .align-items-md-stretch {
        align-items: stretch
    }

    .align-content-md-start {
        align-content: flex-start
    }

    .align-content-md-end {
        align-content: flex-end
    }

    .align-content-md-center {
        align-content: center
    }

    .align-content-md-between {
        align-content: space-between
    }

    .align-content-md-around {
        align-content: space-around
    }

    .align-content-md-stretch {
        align-content: stretch
    }

    .align-self-md-auto {
        align-self: auto
    }

    .align-self-md-start {
        align-self: flex-start
    }

    .align-self-md-end {
        align-self: flex-end
    }

    .align-self-md-center {
        align-self: center
    }

    .align-self-md-baseline {
        align-self: baseline
    }

    .align-self-md-stretch {
        align-self: stretch
    }

    .order-md-first {
        order: -1
    }

    .order-md-0 {
        order: 0
    }

    .order-md-1 {
        order: 1
    }

    .order-md-2 {
        order: 2
    }

    .order-md-3 {
        order: 3
    }

    .order-md-4 {
        order: 4
    }

    .order-md-5 {
        order: 5
    }

    .order-md-last {
        order: 6
    }

    .text-md-start {
        text-align: left
    }

    .text-md-end {
        text-align: right
    }

    .text-md-center {
        text-align: center
    }
}

@media (min-width:1250px) {
    .flex-lg-fill {
        flex: 1 1 auto
    }

    .flex-lg-row {
        flex-direction: row
    }

    .flex-lg-column {
        flex-direction: column
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse
    }

    .flex-lg-grow-0 {
        flex-grow: 0
    }

    .flex-lg-grow-1 {
        flex-grow: 1
    }

    .flex-lg-shrink-0 {
        flex-shrink: 0
    }

    .flex-lg-shrink-1 {
        flex-shrink: 1
    }

    .flex-lg-wrap {
        flex-wrap: wrap
    }

    .flex-lg-nowrap {
        flex-wrap: nowrap
    }

    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse
    }

    .justify-content-lg-start {
        justify-content: flex-start
    }

    .justify-content-lg-end {
        justify-content: flex-end
    }

    .justify-content-lg-center {
        justify-content: center
    }

    .justify-content-lg-between {
        justify-content: space-between
    }

    .justify-content-lg-around {
        justify-content: space-around
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly
    }

    .align-items-lg-start {
        align-items: flex-start
    }

    .align-items-lg-end {
        align-items: flex-end
    }

    .align-items-lg-center {
        align-items: center
    }

    .align-items-lg-baseline {
        align-items: baseline
    }

    .align-items-lg-stretch {
        align-items: stretch
    }

    .align-content-lg-start {
        align-content: flex-start
    }

    .align-content-lg-end {
        align-content: flex-end
    }

    .align-content-lg-center {
        align-content: center
    }

    .align-content-lg-between {
        align-content: space-between
    }

    .align-content-lg-around {
        align-content: space-around
    }

    .align-content-lg-stretch {
        align-content: stretch
    }

    .align-self-lg-auto {
        align-self: auto
    }

    .align-self-lg-start {
        align-self: flex-start
    }

    .align-self-lg-end {
        align-self: flex-end
    }

    .align-self-lg-center {
        align-self: center
    }

    .align-self-lg-baseline {
        align-self: baseline
    }

    .align-self-lg-stretch {
        align-self: stretch
    }

    .order-lg-first {
        order: -1
    }

    .order-lg-0 {
        order: 0
    }

    .order-lg-1 {
        order: 1
    }

    .order-lg-2 {
        order: 2
    }

    .order-lg-3 {
        order: 3
    }

    .order-lg-4 {
        order: 4
    }

    .order-lg-5 {
        order: 5
    }

    .order-lg-last {
        order: 6
    }

    .text-lg-start {
        text-align: left
    }

    .text-lg-end {
        text-align: right
    }

    .text-lg-center {
        text-align: center
    }
}

@media (min-width:1540px) {
    .flex-xlg-fill {
        flex: 1 1 auto
    }

    .flex-xlg-row {
        flex-direction: row
    }

    .flex-xlg-column {
        flex-direction: column
    }

    .flex-xlg-row-reverse {
        flex-direction: row-reverse
    }

    .flex-xlg-column-reverse {
        flex-direction: column-reverse
    }

    .flex-xlg-grow-0 {
        flex-grow: 0
    }

    .flex-xlg-grow-1 {
        flex-grow: 1
    }

    .flex-xlg-shrink-0 {
        flex-shrink: 0
    }

    .flex-xlg-shrink-1 {
        flex-shrink: 1
    }

    .flex-xlg-wrap {
        flex-wrap: wrap
    }

    .flex-xlg-nowrap {
        flex-wrap: nowrap
    }

    .flex-xlg-wrap-reverse {
        flex-wrap: wrap-reverse
    }

    .justify-content-xlg-start {
        justify-content: flex-start
    }

    .justify-content-xlg-end {
        justify-content: flex-end
    }

    .justify-content-xlg-center {
        justify-content: center
    }

    .justify-content-xlg-between {
        justify-content: space-between
    }

    .justify-content-xlg-around {
        justify-content: space-around
    }

    .justify-content-xlg-evenly {
        justify-content: space-evenly
    }

    .align-items-xlg-start {
        align-items: flex-start
    }

    .align-items-xlg-end {
        align-items: flex-end
    }

    .align-items-xlg-center {
        align-items: center
    }

    .align-items-xlg-baseline {
        align-items: baseline
    }

    .align-items-xlg-stretch {
        align-items: stretch
    }

    .align-content-xlg-start {
        align-content: flex-start
    }

    .align-content-xlg-end {
        align-content: flex-end
    }

    .align-content-xlg-center {
        align-content: center
    }

    .align-content-xlg-between {
        align-content: space-between
    }

    .align-content-xlg-around {
        align-content: space-around
    }

    .align-content-xlg-stretch {
        align-content: stretch
    }

    .align-self-xlg-auto {
        align-self: auto
    }

    .align-self-xlg-start {
        align-self: flex-start
    }

    .align-self-xlg-end {
        align-self: flex-end
    }

    .align-self-xlg-center {
        align-self: center
    }

    .align-self-xlg-baseline {
        align-self: baseline
    }

    .align-self-xlg-stretch {
        align-self: stretch
    }

    .order-xlg-first {
        order: -1
    }

    .order-xlg-0 {
        order: 0
    }

    .order-xlg-1 {
        order: 1
    }

    .order-xlg-2 {
        order: 2
    }

    .order-xlg-3 {
        order: 3
    }

    .order-xlg-4 {
        order: 4
    }

    .order-xlg-5 {
        order: 5
    }

    .order-xlg-last {
        order: 6
    }

    .text-xlg-start {
        text-align: left
    }

    .text-xlg-end {
        text-align: right
    }

    .text-xlg-center {
        text-align: center
    }
}

.icon-favorites:before {
    content: var(--base-icon-heart)
}

.icon-favorites-filled:before {
    content: var(--base-icon-heart-filled)
}

.icon-spinner-up:before {
    content: var(--base-icon-plus)
}

.icon-spinner-down:before {
    content: var(--base-icon-minus)
}

.icon-account:before {
    content: var(--base-icon-user)
}

.icon-customer:before {
    content: var(--base-icon-user)
}

.icon-addresses:before {
    content: var(--base-icon-adressbook)
}

.icon-history:before {
    content: var(--base-icon-invoice)
}

.icon-digital-products:before {
    content: var(--base-icon-download)
}

.icon-digital-tickets:before {
    content: var(--base-icon-file-document)
}

.icon-newsletter:before {
    content: var(--base-icon-mail)
}

.icon-order-address:before {
    content: var(--base-icon-adress)
}

.icon-order-payment:before {
    content: var(--base-icon-payment)
}

.icon-order-check:before {
    content: var(--base-icon-adressbook)
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/figtree-v8-latin-300.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/figtree-v8-latin-regular.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/figtree-v8-latin-500.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/figtree-v8-latin-600.woff2") format("woff2")
}

@keyframes rotation {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(359deg)
    }
}

@keyframes scaleRequestIcon {
    0% {
        opacity: 0;
        scale: 0
    }

    50% {
        opacity: 1;
        scale: 1.2
    }

    100% {
        opacity: 1;
        scale: 1
    }
}

@keyframes scaleRequestIconBigger {
    0% {
        opacity: 0;
        scale: 0
    }

    50% {
        opacity: 1;
        scale: 1.6
    }

    100% {
        opacity: 1;
        scale: 1
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

html {
    font-size: 9px
}

@media (min-width:1024px) {
    html {
        font-size: 10px
    }
}

body {
    background-color: var(--main-color-white);
    font-size: var(--main-font-size-base);
    font-weight: var(--main-font-weight);
    line-height: var(--main-line-height);
    font-family: var(--main-font-family);
    color: var(--main-color-black);
    min-width: 320px
}

@media (min-width:2100px) {
    body {
        overflow-x: clip;
        max-width: 2100px;
        margin-left: auto;
        margin-right: auto
    }
}

.leadtext {
    font-size: calc(var(--main-font-size-base) + .2rem)
}

.smalltext {
    font-size: calc(var(--main-font-size-base) - .2rem)
}

.link:active,
.link:focus,
.link:hover,
a:active,
a:focus,
a:hover {
    color: var(--main-link-color-hover);
    text-decoration: underline
}

.link,
a {
    color: var(--main-link-color);
    text-decoration: underline;
    cursor: pointer
}

b,
strong {
    font-weight: var(--main-font-weight-bold)
}

label {
    font-size: var(--main-font-size-small);
    display: inline-block
}

hr {
    border: 0;
    border-top: 1px solid var(--main-color-light-gray);
    margin-top: 30px;
    margin-bottom: 30px
}

.text-decoration-underline {
    text-decoration: underline
}

p {
    margin-top: 0;
    margin-bottom: 1em
}

small {
    font-size: var(--main-font-size-small)
}

:focus-visible {
    outline: 1px dotted var(--main-color-gray-base);
    outline-offset: 2px
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.itemcardHeadline,
.orderboxSummary__headline,
.spotPriceItem--headline,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--main-font-weight-medium);
    margin: 0;
    margin-bottom: clamp(10px, 1em, 20px)
}

.h1.highlighted,
.h2.highlighted,
.h3.highlighted,
.h4.highlighted,
.h5.highlighted,
.h6.highlighted,
.highlighted.itemcardHeadline,
.highlighted.orderboxSummary__headline,
.highlighted.spotPriceItem--headline,
h1.highlighted,
h2.highlighted,
h3.highlighted,
h4.highlighted,
h5.highlighted,
h6.highlighted {
    font-weight: var(--main-font-weight);
    line-height: 96%
}

@media (max-width:767px) {

    .h1.highlighted,
    .h2.highlighted,
    .h3.highlighted,
    .h4.highlighted,
    .h5.highlighted,
    .h6.highlighted,
    .highlighted.itemcardHeadline,
    .highlighted.orderboxSummary__headline,
    .highlighted.spotPriceItem--headline,
    h1.highlighted,
    h2.highlighted,
    h3.highlighted,
    h4.highlighted,
    h5.highlighted,
    h6.highlighted {
        line-height: 1.1
    }
}

.h1,
.spotPriceItem--headline,
h1 {
    margin-bottom: clamp(10px, 1em, 30px);
    line-height: 1.2;
    font-weight: var(--main-font-weight);
    font-size: 3rem
}

@media (min-width:768px) {

    .h1,
    .spotPriceItem--headline,
    h1 {
        font-size: 4.5rem
    }
}

@media (min-width:1024px) {

    .h1,
    .spotPriceItem--headline,
    h1 {
        font-size: 4.8rem
    }
}

@media (min-width:1250px) {

    .h1,
    .spotPriceItem--headline,
    h1 {
        font-size: 5.1rem
    }
}

@media (min-width:1540px) {

    .h1,
    .spotPriceItem--headline,
    h1 {
        font-size: 6rem
    }
}

.h1.highlighted,
.highlighted.spotPriceItem--headline,
h1.highlighted {
    font-size: 3rem
}

@media (min-width:768px) {

    .h1.highlighted,
    .highlighted.spotPriceItem--headline,
    h1.highlighted {
        font-size: 5.5rem
    }
}

@media (min-width:1024px) {

    .h1.highlighted,
    .highlighted.spotPriceItem--headline,
    h1.highlighted {
        font-size: 6rem
    }
}

@media (min-width:1250px) {

    .h1.highlighted,
    .highlighted.spotPriceItem--headline,
    h1.highlighted {
        font-size: 7rem
    }
}

@media (min-width:1540px) {

    .h1.highlighted,
    .highlighted.spotPriceItem--headline,
    h1.highlighted {
        font-size: 6rem
    }
}

.h2,
h2 {
    line-height: 1.2;
    font-size: 2.2rem
}

@media (min-width:768px) {

    .h2,
    h2 {
        font-size: 3.1rem
    }
}

@media (min-width:1024px) {

    .h2,
    h2 {
        font-size: 3.28rem
    }
}

@media (min-width:1250px) {

    .h2,
    h2 {
        font-size: 3.46rem
    }
}

@media (min-width:1540px) {

    .h2,
    h2 {
        font-size: 4rem
    }
}

.h2.highlighted,
h2.highlighted {
    font-size: 2.2rem
}

@media (min-width:768px) {

    .h2.highlighted,
    h2.highlighted {
        font-size: 2.2rem
    }
}

@media (min-width:1024px) {

    .h2.highlighted,
    h2.highlighted {
        font-size: 2.2rem
    }
}

@media (min-width:1250px) {

    .h2.highlighted,
    h2.highlighted {
        font-size: 2.2rem
    }
}

@media (min-width:1540px) {

    .h2.highlighted,
    h2.highlighted {
        font-size: 2.2rem
    }
}

.h3,
.itemcardHeadline,
.orderboxSummary__headline,
h3 {
    line-height: 1.2;
    font-size: 2rem
}

@media (min-width:768px) {

    .h3,
    .itemcardHeadline,
    .orderboxSummary__headline,
    h3 {
        font-size: 2.5rem
    }
}

@media (min-width:1024px) {

    .h3,
    .itemcardHeadline,
    .orderboxSummary__headline,
    h3 {
        font-size: 2.6rem
    }
}

@media (min-width:1250px) {

    .h3,
    .itemcardHeadline,
    .orderboxSummary__headline,
    h3 {
        font-size: 2.7rem
    }
}

@media (min-width:1540px) {

    .h3,
    .itemcardHeadline,
    .orderboxSummary__headline,
    h3 {
        font-size: 3rem
    }
}

.h4,
h4 {
    line-height: 1.24;
    font-size: 1.8rem
}

@media (min-width:768px) {

    .h4,
    h4 {
        font-size: 2.2rem
    }
}

@media (min-width:1024px) {

    .h4,
    h4 {
        font-size: 2.28rem
    }
}

@media (min-width:1250px) {

    .h4,
    h4 {
        font-size: 2.36rem
    }
}

@media (min-width:1540px) {

    .h4,
    h4 {
        font-size: 2.6rem
    }
}

.h5,
h5 {
    line-height: 1.33;
    font-size: 1.4rem
}

@media (min-width:768px) {

    .h5,
    h5 {
        font-size: 1.45rem
    }
}

@media (min-width:1024px) {

    .h5,
    h5 {
        font-size: 1.46rem
    }
}

@media (min-width:1250px) {

    .h5,
    h5 {
        font-size: 1.47rem
    }
}

@media (min-width:1540px) {

    .h5,
    h5 {
        font-size: 1.5rem
    }
}

.h6,
h6 {
    line-height: 1.2;
    font-size: 1.6rem
}

@media (min-width:768px) {

    .h6,
    h6 {
        font-size: 1.8rem
    }
}

@media (min-width:1024px) {

    .h6,
    h6 {
        font-size: 1.84rem
    }
}

@media (min-width:1250px) {

    .h6,
    h6 {
        font-size: 1.88rem
    }
}

@media (min-width:1540px) {

    .h6,
    h6 {
        font-size: 2rem
    }
}

.account .shopSiteHeadline.spotPriceItem--headline,
.account h1.shopSiteHeadline {
    font-size: 3rem
}

.account .shopSiteHeadline.spotPriceItem--headline span,
.account h1.shopSiteHeadline span {
    display: block;
    font-size: 1.6rem;
    font-weight: var(--main-font-weight);
    margin-top: 10px
}

@media (max-width:1023px) {
    .textCenter-xs-sm {
        text-align: center
    }
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.visible {
    visibility: visible !important
}

.invisible {
    visibility: hidden !important
}

.d-none {
    display: none !important
}

.d-block {
    display: block !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-flex {
    display: flex !important
}

.d-inline-flex {
    display: inline-flex !important
}

.d-xs-none {
    display: none !important
}

.d-xs-block {
    display: block !important
}

.d-xs-inline {
    display: inline !important
}

.d-xs-inline-block {
    display: inline-block !important
}

.d-xs-flex {
    display: flex !important
}

.d-xs-inline-flex {
    display: inline-flex !important
}

@media (min-width:768px) {
    .d-sm-none {
        display: none !important
    }
}

@media (min-width:768px) {
    .d-sm-block {
        display: block !important
    }
}

@media (min-width:768px) {
    .d-sm-inline {
        display: inline !important
    }
}

@media (min-width:768px) {
    .d-sm-inline-block {
        display: inline-block !important
    }
}

@media (min-width:768px) {
    .d-sm-flex {
        display: flex !important
    }
}

@media (min-width:768px) {
    .d-sm-inline-flex {
        display: inline-flex !important
    }
}

@media (min-width:1024px) {
    .d-md-none {
        display: none !important
    }
}

@media (min-width:1024px) {
    .d-md-block {
        display: block !important
    }
}

@media (min-width:1024px) {
    .d-md-inline {
        display: inline !important
    }
}

@media (min-width:1024px) {
    .d-md-inline-block {
        display: inline-block !important
    }
}

@media (min-width:1024px) {
    .d-md-flex {
        display: flex !important
    }
}

@media (min-width:1024px) {
    .d-md-inline-flex {
        display: inline-flex !important
    }
}

@media (min-width:1250px) {
    .d-lg-none {
        display: none !important
    }
}

@media (min-width:1250px) {
    .d-lg-block {
        display: block !important
    }
}

@media (min-width:1250px) {
    .d-lg-inline {
        display: inline !important
    }
}

@media (min-width:1250px) {
    .d-lg-inline-block {
        display: inline-block !important
    }
}

@media (min-width:1250px) {
    .d-lg-flex {
        display: flex !important
    }
}

@media (min-width:1250px) {
    .d-lg-inline-flex {
        display: inline-flex !important
    }
}

@media (min-width:1540px) {
    .d-xlg-none {
        display: none !important
    }
}

@media (min-width:1540px) {
    .d-xlg-block {
        display: block !important
    }
}

@media (min-width:1540px) {
    .d-xlg-inline {
        display: inline !important
    }
}

@media (min-width:1540px) {
    .d-xlg-inline-block {
        display: inline-block !important
    }
}

@media (min-width:1540px) {
    .d-xlg-flex {
        display: flex !important
    }
}

@media (min-width:1540px) {
    .d-xlg-inline-flex {
        display: inline-flex !important
    }
}

.hardcodedHint {
    outline: 2px dotted red;
    position: relative
}

.hardcodedHint:before {
    content: "! Hardcoded !";
    position: absolute;
    left: -2px;
    bottom: 100%;
    background: red;
    color: #fff;
    padding: 2px 5px;
    font-size: 10px;
    line-height: 1;
    display: none
}

.hardcodedHint:hover:before {
    display: block
}

.offset-white-white {
    background: linear-gradient(180deg, #fff 50%, #fff 50%)
}

.offset-white-black {
    background: linear-gradient(180deg, #fff 50%, #3c3c3b 50%)
}

.offset-white-gray-base {
    background: linear-gradient(180deg, #fff 50%, #d8d8d8 50%)
}

.offset-white-middle-gray {
    background: linear-gradient(180deg, #fff 50%, #949494 50%)
}

.offset-white-dark-gray {
    background: linear-gradient(180deg, #fff 50%, #707070 50%)
}

.offset-white-light-gray {
    background: linear-gradient(180deg, #fff 50%, #eee 50%)
}

.offset-white-primary {
    background: linear-gradient(180deg, #fff 50%, #be9f56 50%)
}

.offset-white-primary-light {
    background: linear-gradient(180deg, #fff 50%, #f8f5ee 50%)
}

.offset-white-primary-medium {
    background: linear-gradient(180deg, #fff 50%, #cbb278 50%)
}

.offset-white-primary-dark {
    background: linear-gradient(180deg, #fff 50%, #a18646 50%)
}

.offset-white-primary-darken {
    background: linear-gradient(180deg, #fff 50%, #756025 50%)
}

.offset-white-secondary {
    background: linear-gradient(180deg, #fff 50%, #002e55 50%)
}

.offset-white-secondary-light {
    background: linear-gradient(180deg, #fff 50%, #e5eaee 50%)
}

.offset-white-secondary-medium {
    background: linear-gradient(180deg, #fff 50%, #4d6d88 50%)
}

.offset-white-secondary-dark {
    background: linear-gradient(180deg, #fff 50%, #01213c 50%)
}

.offset-white-action {
    background: linear-gradient(180deg, #fff 50%, #002e55 50%)
}

.offset-white-danger {
    background: linear-gradient(180deg, #fff 50%, #880727 50%)
}

.offset-white-warning {
    background: linear-gradient(180deg, #fff 50%, #faaf00 50%)
}

.offset-white-success {
    background: linear-gradient(180deg, #fff 50%, #1e874c 50%)
}

.offset-white-info {
    background: linear-gradient(180deg, #fff 50%, #949494 50%)
}

.offset-white-extra-light-gray {
    background: linear-gradient(180deg, #fff 50%, #f5f5f5 50%)
}

.offset-black-white {
    background: linear-gradient(180deg, #3c3c3b 50%, #fff 50%)
}

.offset-black-black {
    background: linear-gradient(180deg, #3c3c3b 50%, #3c3c3b 50%)
}

.offset-black-gray-base {
    background: linear-gradient(180deg, #3c3c3b 50%, #d8d8d8 50%)
}

.offset-black-middle-gray {
    background: linear-gradient(180deg, #3c3c3b 50%, #949494 50%)
}

.offset-black-dark-gray {
    background: linear-gradient(180deg, #3c3c3b 50%, #707070 50%)
}

.offset-black-light-gray {
    background: linear-gradient(180deg, #3c3c3b 50%, #eee 50%)
}

.offset-black-primary {
    background: linear-gradient(180deg, #3c3c3b 50%, #be9f56 50%)
}

.offset-black-primary-light {
    background: linear-gradient(180deg, #3c3c3b 50%, #f8f5ee 50%)
}

.offset-black-primary-medium {
    background: linear-gradient(180deg, #3c3c3b 50%, #cbb278 50%)
}

.offset-black-primary-dark {
    background: linear-gradient(180deg, #3c3c3b 50%, #a18646 50%)
}

.offset-black-primary-darken {
    background: linear-gradient(180deg, #3c3c3b 50%, #756025 50%)
}

.offset-black-secondary {
    background: linear-gradient(180deg, #3c3c3b 50%, #002e55 50%)
}

.offset-black-secondary-light {
    background: linear-gradient(180deg, #3c3c3b 50%, #e5eaee 50%)
}

.offset-black-secondary-medium {
    background: linear-gradient(180deg, #3c3c3b 50%, #4d6d88 50%)
}

.offset-black-secondary-dark {
    background: linear-gradient(180deg, #3c3c3b 50%, #01213c 50%)
}

.offset-black-action {
    background: linear-gradient(180deg, #3c3c3b 50%, #002e55 50%)
}

.offset-black-danger {
    background: linear-gradient(180deg, #3c3c3b 50%, #880727 50%)
}

.offset-black-warning {
    background: linear-gradient(180deg, #3c3c3b 50%, #faaf00 50%)
}

.offset-black-success {
    background: linear-gradient(180deg, #3c3c3b 50%, #1e874c 50%)
}

.offset-black-info {
    background: linear-gradient(180deg, #3c3c3b 50%, #949494 50%)
}

.offset-black-extra-light-gray {
    background: linear-gradient(180deg, #3c3c3b 50%, #f5f5f5 50%)
}

.offset-gray-base-white {
    background: linear-gradient(180deg, #d8d8d8 50%, #fff 50%)
}

.offset-gray-base-black {
    background: linear-gradient(180deg, #d8d8d8 50%, #3c3c3b 50%)
}

.offset-gray-base-gray-base {
    background: linear-gradient(180deg, #d8d8d8 50%, #d8d8d8 50%)
}

.offset-gray-base-middle-gray {
    background: linear-gradient(180deg, #d8d8d8 50%, #949494 50%)
}

.offset-gray-base-dark-gray {
    background: linear-gradient(180deg, #d8d8d8 50%, #707070 50%)
}

.offset-gray-base-light-gray {
    background: linear-gradient(180deg, #d8d8d8 50%, #eee 50%)
}

.offset-gray-base-primary {
    background: linear-gradient(180deg, #d8d8d8 50%, #be9f56 50%)
}

.offset-gray-base-primary-light {
    background: linear-gradient(180deg, #d8d8d8 50%, #f8f5ee 50%)
}

.offset-gray-base-primary-medium {
    background: linear-gradient(180deg, #d8d8d8 50%, #cbb278 50%)
}

.offset-gray-base-primary-dark {
    background: linear-gradient(180deg, #d8d8d8 50%, #a18646 50%)
}

.offset-gray-base-primary-darken {
    background: linear-gradient(180deg, #d8d8d8 50%, #756025 50%)
}

.offset-gray-base-secondary {
    background: linear-gradient(180deg, #d8d8d8 50%, #002e55 50%)
}

.offset-gray-base-secondary-light {
    background: linear-gradient(180deg, #d8d8d8 50%, #e5eaee 50%)
}

.offset-gray-base-secondary-medium {
    background: linear-gradient(180deg, #d8d8d8 50%, #4d6d88 50%)
}

.offset-gray-base-secondary-dark {
    background: linear-gradient(180deg, #d8d8d8 50%, #01213c 50%)
}

.offset-gray-base-action {
    background: linear-gradient(180deg, #d8d8d8 50%, #002e55 50%)
}

.offset-gray-base-danger {
    background: linear-gradient(180deg, #d8d8d8 50%, #880727 50%)
}

.offset-gray-base-warning {
    background: linear-gradient(180deg, #d8d8d8 50%, #faaf00 50%)
}

.offset-gray-base-success {
    background: linear-gradient(180deg, #d8d8d8 50%, #1e874c 50%)
}

.offset-gray-base-info {
    background: linear-gradient(180deg, #d8d8d8 50%, #949494 50%)
}

.offset-gray-base-extra-light-gray {
    background: linear-gradient(180deg, #d8d8d8 50%, #f5f5f5 50%)
}

.offset-middle-gray-white {
    background: linear-gradient(180deg, #949494 50%, #fff 50%)
}

.offset-middle-gray-black {
    background: linear-gradient(180deg, #949494 50%, #3c3c3b 50%)
}

.offset-middle-gray-gray-base {
    background: linear-gradient(180deg, #949494 50%, #d8d8d8 50%)
}

.offset-middle-gray-middle-gray {
    background: linear-gradient(180deg, #949494 50%, #949494 50%)
}

.offset-middle-gray-dark-gray {
    background: linear-gradient(180deg, #949494 50%, #707070 50%)
}

.offset-middle-gray-light-gray {
    background: linear-gradient(180deg, #949494 50%, #eee 50%)
}

.offset-middle-gray-primary {
    background: linear-gradient(180deg, #949494 50%, #be9f56 50%)
}

.offset-middle-gray-primary-light {
    background: linear-gradient(180deg, #949494 50%, #f8f5ee 50%)
}

.offset-middle-gray-primary-medium {
    background: linear-gradient(180deg, #949494 50%, #cbb278 50%)
}

.offset-middle-gray-primary-dark {
    background: linear-gradient(180deg, #949494 50%, #a18646 50%)
}

.offset-middle-gray-primary-darken {
    background: linear-gradient(180deg, #949494 50%, #756025 50%)
}

.offset-middle-gray-secondary {
    background: linear-gradient(180deg, #949494 50%, #002e55 50%)
}

.offset-middle-gray-secondary-light {
    background: linear-gradient(180deg, #949494 50%, #e5eaee 50%)
}

.offset-middle-gray-secondary-medium {
    background: linear-gradient(180deg, #949494 50%, #4d6d88 50%)
}

.offset-middle-gray-secondary-dark {
    background: linear-gradient(180deg, #949494 50%, #01213c 50%)
}

.offset-middle-gray-action {
    background: linear-gradient(180deg, #949494 50%, #002e55 50%)
}

.offset-middle-gray-danger {
    background: linear-gradient(180deg, #949494 50%, #880727 50%)
}

.offset-middle-gray-warning {
    background: linear-gradient(180deg, #949494 50%, #faaf00 50%)
}

.offset-middle-gray-success {
    background: linear-gradient(180deg, #949494 50%, #1e874c 50%)
}

.offset-middle-gray-info {
    background: linear-gradient(180deg, #949494 50%, #949494 50%)
}

.offset-middle-gray-extra-light-gray {
    background: linear-gradient(180deg, #949494 50%, #f5f5f5 50%)
}

.offset-dark-gray-white {
    background: linear-gradient(180deg, #707070 50%, #fff 50%)
}

.offset-dark-gray-black {
    background: linear-gradient(180deg, #707070 50%, #3c3c3b 50%)
}

.offset-dark-gray-gray-base {
    background: linear-gradient(180deg, #707070 50%, #d8d8d8 50%)
}

.offset-dark-gray-middle-gray {
    background: linear-gradient(180deg, #707070 50%, #949494 50%)
}

.offset-dark-gray-dark-gray {
    background: linear-gradient(180deg, #707070 50%, #707070 50%)
}

.offset-dark-gray-light-gray {
    background: linear-gradient(180deg, #707070 50%, #eee 50%)
}

.offset-dark-gray-primary {
    background: linear-gradient(180deg, #707070 50%, #be9f56 50%)
}

.offset-dark-gray-primary-light {
    background: linear-gradient(180deg, #707070 50%, #f8f5ee 50%)
}

.offset-dark-gray-primary-medium {
    background: linear-gradient(180deg, #707070 50%, #cbb278 50%)
}

.offset-dark-gray-primary-dark {
    background: linear-gradient(180deg, #707070 50%, #a18646 50%)
}

.offset-dark-gray-primary-darken {
    background: linear-gradient(180deg, #707070 50%, #756025 50%)
}

.offset-dark-gray-secondary {
    background: linear-gradient(180deg, #707070 50%, #002e55 50%)
}

.offset-dark-gray-secondary-light {
    background: linear-gradient(180deg, #707070 50%, #e5eaee 50%)
}

.offset-dark-gray-secondary-medium {
    background: linear-gradient(180deg, #707070 50%, #4d6d88 50%)
}

.offset-dark-gray-secondary-dark {
    background: linear-gradient(180deg, #707070 50%, #01213c 50%)
}

.offset-dark-gray-action {
    background: linear-gradient(180deg, #707070 50%, #002e55 50%)
}

.offset-dark-gray-danger {
    background: linear-gradient(180deg, #707070 50%, #880727 50%)
}

.offset-dark-gray-warning {
    background: linear-gradient(180deg, #707070 50%, #faaf00 50%)
}

.offset-dark-gray-success {
    background: linear-gradient(180deg, #707070 50%, #1e874c 50%)
}

.offset-dark-gray-info {
    background: linear-gradient(180deg, #707070 50%, #949494 50%)
}

.offset-dark-gray-extra-light-gray {
    background: linear-gradient(180deg, #707070 50%, #f5f5f5 50%)
}

.offset-light-gray-white {
    background: linear-gradient(180deg, #eee 50%, #fff 50%)
}

.offset-light-gray-black {
    background: linear-gradient(180deg, #eee 50%, #3c3c3b 50%)
}

.offset-light-gray-gray-base {
    background: linear-gradient(180deg, #eee 50%, #d8d8d8 50%)
}

.offset-light-gray-middle-gray {
    background: linear-gradient(180deg, #eee 50%, #949494 50%)
}

.offset-light-gray-dark-gray {
    background: linear-gradient(180deg, #eee 50%, #707070 50%)
}

.offset-light-gray-light-gray {
    background: linear-gradient(180deg, #eee 50%, #eee 50%)
}

.offset-light-gray-primary {
    background: linear-gradient(180deg, #eee 50%, #be9f56 50%)
}

.offset-light-gray-primary-light {
    background: linear-gradient(180deg, #eee 50%, #f8f5ee 50%)
}

.offset-light-gray-primary-medium {
    background: linear-gradient(180deg, #eee 50%, #cbb278 50%)
}

.offset-light-gray-primary-dark {
    background: linear-gradient(180deg, #eee 50%, #a18646 50%)
}

.offset-light-gray-primary-darken {
    background: linear-gradient(180deg, #eee 50%, #756025 50%)
}

.offset-light-gray-secondary {
    background: linear-gradient(180deg, #eee 50%, #002e55 50%)
}

.offset-light-gray-secondary-light {
    background: linear-gradient(180deg, #eee 50%, #e5eaee 50%)
}

.offset-light-gray-secondary-medium {
    background: linear-gradient(180deg, #eee 50%, #4d6d88 50%)
}

.offset-light-gray-secondary-dark {
    background: linear-gradient(180deg, #eee 50%, #01213c 50%)
}

.offset-light-gray-action {
    background: linear-gradient(180deg, #eee 50%, #002e55 50%)
}

.offset-light-gray-danger {
    background: linear-gradient(180deg, #eee 50%, #880727 50%)
}

.offset-light-gray-warning {
    background: linear-gradient(180deg, #eee 50%, #faaf00 50%)
}

.offset-light-gray-success {
    background: linear-gradient(180deg, #eee 50%, #1e874c 50%)
}

.offset-light-gray-info {
    background: linear-gradient(180deg, #eee 50%, #949494 50%)
}

.offset-light-gray-extra-light-gray {
    background: linear-gradient(180deg, #eee 50%, #f5f5f5 50%)
}

.offset-primary-white {
    background: linear-gradient(180deg, #be9f56 50%, #fff 50%)
}

.offset-primary-black {
    background: linear-gradient(180deg, #be9f56 50%, #3c3c3b 50%)
}

.offset-primary-gray-base {
    background: linear-gradient(180deg, #be9f56 50%, #d8d8d8 50%)
}

.offset-primary-middle-gray {
    background: linear-gradient(180deg, #be9f56 50%, #949494 50%)
}

.offset-primary-dark-gray {
    background: linear-gradient(180deg, #be9f56 50%, #707070 50%)
}

.offset-primary-light-gray {
    background: linear-gradient(180deg, #be9f56 50%, #eee 50%)
}

.offset-primary-primary {
    background: linear-gradient(180deg, #be9f56 50%, #be9f56 50%)
}

.offset-primary-primary-light {
    background: linear-gradient(180deg, #be9f56 50%, #f8f5ee 50%)
}

.offset-primary-primary-medium {
    background: linear-gradient(180deg, #be9f56 50%, #cbb278 50%)
}

.offset-primary-primary-dark {
    background: linear-gradient(180deg, #be9f56 50%, #a18646 50%)
}

.offset-primary-primary-darken {
    background: linear-gradient(180deg, #be9f56 50%, #756025 50%)
}

.offset-primary-secondary {
    background: linear-gradient(180deg, #be9f56 50%, #002e55 50%)
}

.offset-primary-secondary-light {
    background: linear-gradient(180deg, #be9f56 50%, #e5eaee 50%)
}

.offset-primary-secondary-medium {
    background: linear-gradient(180deg, #be9f56 50%, #4d6d88 50%)
}

.offset-primary-secondary-dark {
    background: linear-gradient(180deg, #be9f56 50%, #01213c 50%)
}

.offset-primary-action {
    background: linear-gradient(180deg, #be9f56 50%, #002e55 50%)
}

.offset-primary-danger {
    background: linear-gradient(180deg, #be9f56 50%, #880727 50%)
}

.offset-primary-warning {
    background: linear-gradient(180deg, #be9f56 50%, #faaf00 50%)
}

.offset-primary-success {
    background: linear-gradient(180deg, #be9f56 50%, #1e874c 50%)
}

.offset-primary-info {
    background: linear-gradient(180deg, #be9f56 50%, #949494 50%)
}

.offset-primary-extra-light-gray {
    background: linear-gradient(180deg, #be9f56 50%, #f5f5f5 50%)
}

.offset-primary-light-white {
    background: linear-gradient(180deg, #f8f5ee 50%, #fff 50%)
}

.offset-primary-light-black {
    background: linear-gradient(180deg, #f8f5ee 50%, #3c3c3b 50%)
}

.offset-primary-light-gray-base {
    background: linear-gradient(180deg, #f8f5ee 50%, #d8d8d8 50%)
}

.offset-primary-light-middle-gray {
    background: linear-gradient(180deg, #f8f5ee 50%, #949494 50%)
}

.offset-primary-light-dark-gray {
    background: linear-gradient(180deg, #f8f5ee 50%, #707070 50%)
}

.offset-primary-light-light-gray {
    background: linear-gradient(180deg, #f8f5ee 50%, #eee 50%)
}

.offset-primary-light-primary {
    background: linear-gradient(180deg, #f8f5ee 50%, #be9f56 50%)
}

.offset-primary-light-primary-light {
    background: linear-gradient(180deg, #f8f5ee 50%, #f8f5ee 50%)
}

.offset-primary-light-primary-medium {
    background: linear-gradient(180deg, #f8f5ee 50%, #cbb278 50%)
}

.offset-primary-light-primary-dark {
    background: linear-gradient(180deg, #f8f5ee 50%, #a18646 50%)
}

.offset-primary-light-primary-darken {
    background: linear-gradient(180deg, #f8f5ee 50%, #756025 50%)
}

.offset-primary-light-secondary {
    background: linear-gradient(180deg, #f8f5ee 50%, #002e55 50%)
}

.offset-primary-light-secondary-light {
    background: linear-gradient(180deg, #f8f5ee 50%, #e5eaee 50%)
}

.offset-primary-light-secondary-medium {
    background: linear-gradient(180deg, #f8f5ee 50%, #4d6d88 50%)
}

.offset-primary-light-secondary-dark {
    background: linear-gradient(180deg, #f8f5ee 50%, #01213c 50%)
}

.offset-primary-light-action {
    background: linear-gradient(180deg, #f8f5ee 50%, #002e55 50%)
}

.offset-primary-light-danger {
    background: linear-gradient(180deg, #f8f5ee 50%, #880727 50%)
}

.offset-primary-light-warning {
    background: linear-gradient(180deg, #f8f5ee 50%, #faaf00 50%)
}

.offset-primary-light-success {
    background: linear-gradient(180deg, #f8f5ee 50%, #1e874c 50%)
}

.offset-primary-light-info {
    background: linear-gradient(180deg, #f8f5ee 50%, #949494 50%)
}

.offset-primary-light-extra-light-gray {
    background: linear-gradient(180deg, #f8f5ee 50%, #f5f5f5 50%)
}

.offset-primary-medium-white {
    background: linear-gradient(180deg, #cbb278 50%, #fff 50%)
}

.offset-primary-medium-black {
    background: linear-gradient(180deg, #cbb278 50%, #3c3c3b 50%)
}

.offset-primary-medium-gray-base {
    background: linear-gradient(180deg, #cbb278 50%, #d8d8d8 50%)
}

.offset-primary-medium-middle-gray {
    background: linear-gradient(180deg, #cbb278 50%, #949494 50%)
}

.offset-primary-medium-dark-gray {
    background: linear-gradient(180deg, #cbb278 50%, #707070 50%)
}

.offset-primary-medium-light-gray {
    background: linear-gradient(180deg, #cbb278 50%, #eee 50%)
}

.offset-primary-medium-primary {
    background: linear-gradient(180deg, #cbb278 50%, #be9f56 50%)
}

.offset-primary-medium-primary-light {
    background: linear-gradient(180deg, #cbb278 50%, #f8f5ee 50%)
}

.offset-primary-medium-primary-medium {
    background: linear-gradient(180deg, #cbb278 50%, #cbb278 50%)
}

.offset-primary-medium-primary-dark {
    background: linear-gradient(180deg, #cbb278 50%, #a18646 50%)
}

.offset-primary-medium-primary-darken {
    background: linear-gradient(180deg, #cbb278 50%, #756025 50%)
}

.offset-primary-medium-secondary {
    background: linear-gradient(180deg, #cbb278 50%, #002e55 50%)
}

.offset-primary-medium-secondary-light {
    background: linear-gradient(180deg, #cbb278 50%, #e5eaee 50%)
}

.offset-primary-medium-secondary-medium {
    background: linear-gradient(180deg, #cbb278 50%, #4d6d88 50%)
}

.offset-primary-medium-secondary-dark {
    background: linear-gradient(180deg, #cbb278 50%, #01213c 50%)
}

.offset-primary-medium-action {
    background: linear-gradient(180deg, #cbb278 50%, #002e55 50%)
}

.offset-primary-medium-danger {
    background: linear-gradient(180deg, #cbb278 50%, #880727 50%)
}

.offset-primary-medium-warning {
    background: linear-gradient(180deg, #cbb278 50%, #faaf00 50%)
}

.offset-primary-medium-success {
    background: linear-gradient(180deg, #cbb278 50%, #1e874c 50%)
}

.offset-primary-medium-info {
    background: linear-gradient(180deg, #cbb278 50%, #949494 50%)
}

.offset-primary-medium-extra-light-gray {
    background: linear-gradient(180deg, #cbb278 50%, #f5f5f5 50%)
}

.offset-primary-dark-white {
    background: linear-gradient(180deg, #a18646 50%, #fff 50%)
}

.offset-primary-dark-black {
    background: linear-gradient(180deg, #a18646 50%, #3c3c3b 50%)
}

.offset-primary-dark-gray-base {
    background: linear-gradient(180deg, #a18646 50%, #d8d8d8 50%)
}

.offset-primary-dark-middle-gray {
    background: linear-gradient(180deg, #a18646 50%, #949494 50%)
}

.offset-primary-dark-dark-gray {
    background: linear-gradient(180deg, #a18646 50%, #707070 50%)
}

.offset-primary-dark-light-gray {
    background: linear-gradient(180deg, #a18646 50%, #eee 50%)
}

.offset-primary-dark-primary {
    background: linear-gradient(180deg, #a18646 50%, #be9f56 50%)
}

.offset-primary-dark-primary-light {
    background: linear-gradient(180deg, #a18646 50%, #f8f5ee 50%)
}

.offset-primary-dark-primary-medium {
    background: linear-gradient(180deg, #a18646 50%, #cbb278 50%)
}

.offset-primary-dark-primary-dark {
    background: linear-gradient(180deg, #a18646 50%, #a18646 50%)
}

.offset-primary-dark-primary-darken {
    background: linear-gradient(180deg, #a18646 50%, #756025 50%)
}

.offset-primary-dark-secondary {
    background: linear-gradient(180deg, #a18646 50%, #002e55 50%)
}

.offset-primary-dark-secondary-light {
    background: linear-gradient(180deg, #a18646 50%, #e5eaee 50%)
}

.offset-primary-dark-secondary-medium {
    background: linear-gradient(180deg, #a18646 50%, #4d6d88 50%)
}

.offset-primary-dark-secondary-dark {
    background: linear-gradient(180deg, #a18646 50%, #01213c 50%)
}

.offset-primary-dark-action {
    background: linear-gradient(180deg, #a18646 50%, #002e55 50%)
}

.offset-primary-dark-danger {
    background: linear-gradient(180deg, #a18646 50%, #880727 50%)
}

.offset-primary-dark-warning {
    background: linear-gradient(180deg, #a18646 50%, #faaf00 50%)
}

.offset-primary-dark-success {
    background: linear-gradient(180deg, #a18646 50%, #1e874c 50%)
}

.offset-primary-dark-info {
    background: linear-gradient(180deg, #a18646 50%, #949494 50%)
}

.offset-primary-dark-extra-light-gray {
    background: linear-gradient(180deg, #a18646 50%, #f5f5f5 50%)
}

.offset-primary-darken-white {
    background: linear-gradient(180deg, #756025 50%, #fff 50%)
}

.offset-primary-darken-black {
    background: linear-gradient(180deg, #756025 50%, #3c3c3b 50%)
}

.offset-primary-darken-gray-base {
    background: linear-gradient(180deg, #756025 50%, #d8d8d8 50%)
}

.offset-primary-darken-middle-gray {
    background: linear-gradient(180deg, #756025 50%, #949494 50%)
}

.offset-primary-darken-dark-gray {
    background: linear-gradient(180deg, #756025 50%, #707070 50%)
}

.offset-primary-darken-light-gray {
    background: linear-gradient(180deg, #756025 50%, #eee 50%)
}

.offset-primary-darken-primary {
    background: linear-gradient(180deg, #756025 50%, #be9f56 50%)
}

.offset-primary-darken-primary-light {
    background: linear-gradient(180deg, #756025 50%, #f8f5ee 50%)
}

.offset-primary-darken-primary-medium {
    background: linear-gradient(180deg, #756025 50%, #cbb278 50%)
}

.offset-primary-darken-primary-dark {
    background: linear-gradient(180deg, #756025 50%, #a18646 50%)
}

.offset-primary-darken-primary-darken {
    background: linear-gradient(180deg, #756025 50%, #756025 50%)
}

.offset-primary-darken-secondary {
    background: linear-gradient(180deg, #756025 50%, #002e55 50%)
}

.offset-primary-darken-secondary-light {
    background: linear-gradient(180deg, #756025 50%, #e5eaee 50%)
}

.offset-primary-darken-secondary-medium {
    background: linear-gradient(180deg, #756025 50%, #4d6d88 50%)
}

.offset-primary-darken-secondary-dark {
    background: linear-gradient(180deg, #756025 50%, #01213c 50%)
}

.offset-primary-darken-action {
    background: linear-gradient(180deg, #756025 50%, #002e55 50%)
}

.offset-primary-darken-danger {
    background: linear-gradient(180deg, #756025 50%, #880727 50%)
}

.offset-primary-darken-warning {
    background: linear-gradient(180deg, #756025 50%, #faaf00 50%)
}

.offset-primary-darken-success {
    background: linear-gradient(180deg, #756025 50%, #1e874c 50%)
}

.offset-primary-darken-info {
    background: linear-gradient(180deg, #756025 50%, #949494 50%)
}

.offset-primary-darken-extra-light-gray {
    background: linear-gradient(180deg, #756025 50%, #f5f5f5 50%)
}

.offset-secondary-white {
    background: linear-gradient(180deg, #002e55 50%, #fff 50%)
}

.offset-secondary-black {
    background: linear-gradient(180deg, #002e55 50%, #3c3c3b 50%)
}

.offset-secondary-gray-base {
    background: linear-gradient(180deg, #002e55 50%, #d8d8d8 50%)
}

.offset-secondary-middle-gray {
    background: linear-gradient(180deg, #002e55 50%, #949494 50%)
}

.offset-secondary-dark-gray {
    background: linear-gradient(180deg, #002e55 50%, #707070 50%)
}

.offset-secondary-light-gray {
    background: linear-gradient(180deg, #002e55 50%, #eee 50%)
}

.offset-secondary-primary {
    background: linear-gradient(180deg, #002e55 50%, #be9f56 50%)
}

.offset-secondary-primary-light {
    background: linear-gradient(180deg, #002e55 50%, #f8f5ee 50%)
}

.offset-secondary-primary-medium {
    background: linear-gradient(180deg, #002e55 50%, #cbb278 50%)
}

.offset-secondary-primary-dark {
    background: linear-gradient(180deg, #002e55 50%, #a18646 50%)
}

.offset-secondary-primary-darken {
    background: linear-gradient(180deg, #002e55 50%, #756025 50%)
}

.offset-secondary-secondary {
    background: linear-gradient(180deg, #002e55 50%, #002e55 50%)
}

.offset-secondary-secondary-light {
    background: linear-gradient(180deg, #002e55 50%, #e5eaee 50%)
}

.offset-secondary-secondary-medium {
    background: linear-gradient(180deg, #002e55 50%, #4d6d88 50%)
}

.offset-secondary-secondary-dark {
    background: linear-gradient(180deg, #002e55 50%, #01213c 50%)
}

.offset-secondary-action {
    background: linear-gradient(180deg, #002e55 50%, #002e55 50%)
}

.offset-secondary-danger {
    background: linear-gradient(180deg, #002e55 50%, #880727 50%)
}

.offset-secondary-warning {
    background: linear-gradient(180deg, #002e55 50%, #faaf00 50%)
}

.offset-secondary-success {
    background: linear-gradient(180deg, #002e55 50%, #1e874c 50%)
}

.offset-secondary-info {
    background: linear-gradient(180deg, #002e55 50%, #949494 50%)
}

.offset-secondary-extra-light-gray {
    background: linear-gradient(180deg, #002e55 50%, #f5f5f5 50%)
}

.offset-secondary-light-white {
    background: linear-gradient(180deg, #e5eaee 50%, #fff 50%)
}

.offset-secondary-light-black {
    background: linear-gradient(180deg, #e5eaee 50%, #3c3c3b 50%)
}

.offset-secondary-light-gray-base {
    background: linear-gradient(180deg, #e5eaee 50%, #d8d8d8 50%)
}

.offset-secondary-light-middle-gray {
    background: linear-gradient(180deg, #e5eaee 50%, #949494 50%)
}

.offset-secondary-light-dark-gray {
    background: linear-gradient(180deg, #e5eaee 50%, #707070 50%)
}

.offset-secondary-light-light-gray {
    background: linear-gradient(180deg, #e5eaee 50%, #eee 50%)
}

.offset-secondary-light-primary {
    background: linear-gradient(180deg, #e5eaee 50%, #be9f56 50%)
}

.offset-secondary-light-primary-light {
    background: linear-gradient(180deg, #e5eaee 50%, #f8f5ee 50%)
}

.offset-secondary-light-primary-medium {
    background: linear-gradient(180deg, #e5eaee 50%, #cbb278 50%)
}

.offset-secondary-light-primary-dark {
    background: linear-gradient(180deg, #e5eaee 50%, #a18646 50%)
}

.offset-secondary-light-primary-darken {
    background: linear-gradient(180deg, #e5eaee 50%, #756025 50%)
}

.offset-secondary-light-secondary {
    background: linear-gradient(180deg, #e5eaee 50%, #002e55 50%)
}

.offset-secondary-light-secondary-light {
    background: linear-gradient(180deg, #e5eaee 50%, #e5eaee 50%)
}

.offset-secondary-light-secondary-medium {
    background: linear-gradient(180deg, #e5eaee 50%, #4d6d88 50%)
}

.offset-secondary-light-secondary-dark {
    background: linear-gradient(180deg, #e5eaee 50%, #01213c 50%)
}

.offset-secondary-light-action {
    background: linear-gradient(180deg, #e5eaee 50%, #002e55 50%)
}

.offset-secondary-light-danger {
    background: linear-gradient(180deg, #e5eaee 50%, #880727 50%)
}

.offset-secondary-light-warning {
    background: linear-gradient(180deg, #e5eaee 50%, #faaf00 50%)
}

.offset-secondary-light-success {
    background: linear-gradient(180deg, #e5eaee 50%, #1e874c 50%)
}

.offset-secondary-light-info {
    background: linear-gradient(180deg, #e5eaee 50%, #949494 50%)
}

.offset-secondary-light-extra-light-gray {
    background: linear-gradient(180deg, #e5eaee 50%, #f5f5f5 50%)
}

.offset-secondary-medium-white {
    background: linear-gradient(180deg, #4d6d88 50%, #fff 50%)
}

.offset-secondary-medium-black {
    background: linear-gradient(180deg, #4d6d88 50%, #3c3c3b 50%)
}

.offset-secondary-medium-gray-base {
    background: linear-gradient(180deg, #4d6d88 50%, #d8d8d8 50%)
}

.offset-secondary-medium-middle-gray {
    background: linear-gradient(180deg, #4d6d88 50%, #949494 50%)
}

.offset-secondary-medium-dark-gray {
    background: linear-gradient(180deg, #4d6d88 50%, #707070 50%)
}

.offset-secondary-medium-light-gray {
    background: linear-gradient(180deg, #4d6d88 50%, #eee 50%)
}

.offset-secondary-medium-primary {
    background: linear-gradient(180deg, #4d6d88 50%, #be9f56 50%)
}

.offset-secondary-medium-primary-light {
    background: linear-gradient(180deg, #4d6d88 50%, #f8f5ee 50%)
}

.offset-secondary-medium-primary-medium {
    background: linear-gradient(180deg, #4d6d88 50%, #cbb278 50%)
}

.offset-secondary-medium-primary-dark {
    background: linear-gradient(180deg, #4d6d88 50%, #a18646 50%)
}

.offset-secondary-medium-primary-darken {
    background: linear-gradient(180deg, #4d6d88 50%, #756025 50%)
}

.offset-secondary-medium-secondary {
    background: linear-gradient(180deg, #4d6d88 50%, #002e55 50%)
}

.offset-secondary-medium-secondary-light {
    background: linear-gradient(180deg, #4d6d88 50%, #e5eaee 50%)
}

.offset-secondary-medium-secondary-medium {
    background: linear-gradient(180deg, #4d6d88 50%, #4d6d88 50%)
}

.offset-secondary-medium-secondary-dark {
    background: linear-gradient(180deg, #4d6d88 50%, #01213c 50%)
}

.offset-secondary-medium-action {
    background: linear-gradient(180deg, #4d6d88 50%, #002e55 50%)
}

.offset-secondary-medium-danger {
    background: linear-gradient(180deg, #4d6d88 50%, #880727 50%)
}

.offset-secondary-medium-warning {
    background: linear-gradient(180deg, #4d6d88 50%, #faaf00 50%)
}

.offset-secondary-medium-success {
    background: linear-gradient(180deg, #4d6d88 50%, #1e874c 50%)
}

.offset-secondary-medium-info {
    background: linear-gradient(180deg, #4d6d88 50%, #949494 50%)
}

.offset-secondary-medium-extra-light-gray {
    background: linear-gradient(180deg, #4d6d88 50%, #f5f5f5 50%)
}

.offset-secondary-dark-white {
    background: linear-gradient(180deg, #01213c 50%, #fff 50%)
}

.offset-secondary-dark-black {
    background: linear-gradient(180deg, #01213c 50%, #3c3c3b 50%)
}

.offset-secondary-dark-gray-base {
    background: linear-gradient(180deg, #01213c 50%, #d8d8d8 50%)
}

.offset-secondary-dark-middle-gray {
    background: linear-gradient(180deg, #01213c 50%, #949494 50%)
}

.offset-secondary-dark-dark-gray {
    background: linear-gradient(180deg, #01213c 50%, #707070 50%)
}

.offset-secondary-dark-light-gray {
    background: linear-gradient(180deg, #01213c 50%, #eee 50%)
}

.offset-secondary-dark-primary {
    background: linear-gradient(180deg, #01213c 50%, #be9f56 50%)
}

.offset-secondary-dark-primary-light {
    background: linear-gradient(180deg, #01213c 50%, #f8f5ee 50%)
}

.offset-secondary-dark-primary-medium {
    background: linear-gradient(180deg, #01213c 50%, #cbb278 50%)
}

.offset-secondary-dark-primary-dark {
    background: linear-gradient(180deg, #01213c 50%, #a18646 50%)
}

.offset-secondary-dark-primary-darken {
    background: linear-gradient(180deg, #01213c 50%, #756025 50%)
}

.offset-secondary-dark-secondary {
    background: linear-gradient(180deg, #01213c 50%, #002e55 50%)
}

.offset-secondary-dark-secondary-light {
    background: linear-gradient(180deg, #01213c 50%, #e5eaee 50%)
}

.offset-secondary-dark-secondary-medium {
    background: linear-gradient(180deg, #01213c 50%, #4d6d88 50%)
}

.offset-secondary-dark-secondary-dark {
    background: linear-gradient(180deg, #01213c 50%, #01213c 50%)
}

.offset-secondary-dark-action {
    background: linear-gradient(180deg, #01213c 50%, #002e55 50%)
}

.offset-secondary-dark-danger {
    background: linear-gradient(180deg, #01213c 50%, #880727 50%)
}

.offset-secondary-dark-warning {
    background: linear-gradient(180deg, #01213c 50%, #faaf00 50%)
}

.offset-secondary-dark-success {
    background: linear-gradient(180deg, #01213c 50%, #1e874c 50%)
}

.offset-secondary-dark-info {
    background: linear-gradient(180deg, #01213c 50%, #949494 50%)
}

.offset-secondary-dark-extra-light-gray {
    background: linear-gradient(180deg, #01213c 50%, #f5f5f5 50%)
}

.offset-action-white {
    background: linear-gradient(180deg, #002e55 50%, #fff 50%)
}

.offset-action-black {
    background: linear-gradient(180deg, #002e55 50%, #3c3c3b 50%)
}

.offset-action-gray-base {
    background: linear-gradient(180deg, #002e55 50%, #d8d8d8 50%)
}

.offset-action-middle-gray {
    background: linear-gradient(180deg, #002e55 50%, #949494 50%)
}

.offset-action-dark-gray {
    background: linear-gradient(180deg, #002e55 50%, #707070 50%)
}

.offset-action-light-gray {
    background: linear-gradient(180deg, #002e55 50%, #eee 50%)
}

.offset-action-primary {
    background: linear-gradient(180deg, #002e55 50%, #be9f56 50%)
}

.offset-action-primary-light {
    background: linear-gradient(180deg, #002e55 50%, #f8f5ee 50%)
}

.offset-action-primary-medium {
    background: linear-gradient(180deg, #002e55 50%, #cbb278 50%)
}

.offset-action-primary-dark {
    background: linear-gradient(180deg, #002e55 50%, #a18646 50%)
}

.offset-action-primary-darken {
    background: linear-gradient(180deg, #002e55 50%, #756025 50%)
}

.offset-action-secondary {
    background: linear-gradient(180deg, #002e55 50%, #002e55 50%)
}

.offset-action-secondary-light {
    background: linear-gradient(180deg, #002e55 50%, #e5eaee 50%)
}

.offset-action-secondary-medium {
    background: linear-gradient(180deg, #002e55 50%, #4d6d88 50%)
}

.offset-action-secondary-dark {
    background: linear-gradient(180deg, #002e55 50%, #01213c 50%)
}

.offset-action-action {
    background: linear-gradient(180deg, #002e55 50%, #002e55 50%)
}

.offset-action-danger {
    background: linear-gradient(180deg, #002e55 50%, #880727 50%)
}

.offset-action-warning {
    background: linear-gradient(180deg, #002e55 50%, #faaf00 50%)
}

.offset-action-success {
    background: linear-gradient(180deg, #002e55 50%, #1e874c 50%)
}

.offset-action-info {
    background: linear-gradient(180deg, #002e55 50%, #949494 50%)
}

.offset-action-extra-light-gray {
    background: linear-gradient(180deg, #002e55 50%, #f5f5f5 50%)
}

.offset-danger-white {
    background: linear-gradient(180deg, #880727 50%, #fff 50%)
}

.offset-danger-black {
    background: linear-gradient(180deg, #880727 50%, #3c3c3b 50%)
}

.offset-danger-gray-base {
    background: linear-gradient(180deg, #880727 50%, #d8d8d8 50%)
}

.offset-danger-middle-gray {
    background: linear-gradient(180deg, #880727 50%, #949494 50%)
}

.offset-danger-dark-gray {
    background: linear-gradient(180deg, #880727 50%, #707070 50%)
}

.offset-danger-light-gray {
    background: linear-gradient(180deg, #880727 50%, #eee 50%)
}

.offset-danger-primary {
    background: linear-gradient(180deg, #880727 50%, #be9f56 50%)
}

.offset-danger-primary-light {
    background: linear-gradient(180deg, #880727 50%, #f8f5ee 50%)
}

.offset-danger-primary-medium {
    background: linear-gradient(180deg, #880727 50%, #cbb278 50%)
}

.offset-danger-primary-dark {
    background: linear-gradient(180deg, #880727 50%, #a18646 50%)
}

.offset-danger-primary-darken {
    background: linear-gradient(180deg, #880727 50%, #756025 50%)
}

.offset-danger-secondary {
    background: linear-gradient(180deg, #880727 50%, #002e55 50%)
}

.offset-danger-secondary-light {
    background: linear-gradient(180deg, #880727 50%, #e5eaee 50%)
}

.offset-danger-secondary-medium {
    background: linear-gradient(180deg, #880727 50%, #4d6d88 50%)
}

.offset-danger-secondary-dark {
    background: linear-gradient(180deg, #880727 50%, #01213c 50%)
}

.offset-danger-action {
    background: linear-gradient(180deg, #880727 50%, #002e55 50%)
}

.offset-danger-danger {
    background: linear-gradient(180deg, #880727 50%, #880727 50%)
}

.offset-danger-warning {
    background: linear-gradient(180deg, #880727 50%, #faaf00 50%)
}

.offset-danger-success {
    background: linear-gradient(180deg, #880727 50%, #1e874c 50%)
}

.offset-danger-info {
    background: linear-gradient(180deg, #880727 50%, #949494 50%)
}

.offset-danger-extra-light-gray {
    background: linear-gradient(180deg, #880727 50%, #f5f5f5 50%)
}

.offset-warning-white {
    background: linear-gradient(180deg, #faaf00 50%, #fff 50%)
}

.offset-warning-black {
    background: linear-gradient(180deg, #faaf00 50%, #3c3c3b 50%)
}

.offset-warning-gray-base {
    background: linear-gradient(180deg, #faaf00 50%, #d8d8d8 50%)
}

.offset-warning-middle-gray {
    background: linear-gradient(180deg, #faaf00 50%, #949494 50%)
}

.offset-warning-dark-gray {
    background: linear-gradient(180deg, #faaf00 50%, #707070 50%)
}

.offset-warning-light-gray {
    background: linear-gradient(180deg, #faaf00 50%, #eee 50%)
}

.offset-warning-primary {
    background: linear-gradient(180deg, #faaf00 50%, #be9f56 50%)
}

.offset-warning-primary-light {
    background: linear-gradient(180deg, #faaf00 50%, #f8f5ee 50%)
}

.offset-warning-primary-medium {
    background: linear-gradient(180deg, #faaf00 50%, #cbb278 50%)
}

.offset-warning-primary-dark {
    background: linear-gradient(180deg, #faaf00 50%, #a18646 50%)
}

.offset-warning-primary-darken {
    background: linear-gradient(180deg, #faaf00 50%, #756025 50%)
}

.offset-warning-secondary {
    background: linear-gradient(180deg, #faaf00 50%, #002e55 50%)
}

.offset-warning-secondary-light {
    background: linear-gradient(180deg, #faaf00 50%, #e5eaee 50%)
}

.offset-warning-secondary-medium {
    background: linear-gradient(180deg, #faaf00 50%, #4d6d88 50%)
}

.offset-warning-secondary-dark {
    background: linear-gradient(180deg, #faaf00 50%, #01213c 50%)
}

.offset-warning-action {
    background: linear-gradient(180deg, #faaf00 50%, #002e55 50%)
}

.offset-warning-danger {
    background: linear-gradient(180deg, #faaf00 50%, #880727 50%)
}

.offset-warning-warning {
    background: linear-gradient(180deg, #faaf00 50%, #faaf00 50%)
}

.offset-warning-success {
    background: linear-gradient(180deg, #faaf00 50%, #1e874c 50%)
}

.offset-warning-info {
    background: linear-gradient(180deg, #faaf00 50%, #949494 50%)
}

.offset-warning-extra-light-gray {
    background: linear-gradient(180deg, #faaf00 50%, #f5f5f5 50%)
}

.offset-success-white {
    background: linear-gradient(180deg, #1e874c 50%, #fff 50%)
}

.offset-success-black {
    background: linear-gradient(180deg, #1e874c 50%, #3c3c3b 50%)
}

.offset-success-gray-base {
    background: linear-gradient(180deg, #1e874c 50%, #d8d8d8 50%)
}

.offset-success-middle-gray {
    background: linear-gradient(180deg, #1e874c 50%, #949494 50%)
}

.offset-success-dark-gray {
    background: linear-gradient(180deg, #1e874c 50%, #707070 50%)
}

.offset-success-light-gray {
    background: linear-gradient(180deg, #1e874c 50%, #eee 50%)
}

.offset-success-primary {
    background: linear-gradient(180deg, #1e874c 50%, #be9f56 50%)
}

.offset-success-primary-light {
    background: linear-gradient(180deg, #1e874c 50%, #f8f5ee 50%)
}

.offset-success-primary-medium {
    background: linear-gradient(180deg, #1e874c 50%, #cbb278 50%)
}

.offset-success-primary-dark {
    background: linear-gradient(180deg, #1e874c 50%, #a18646 50%)
}

.offset-success-primary-darken {
    background: linear-gradient(180deg, #1e874c 50%, #756025 50%)
}

.offset-success-secondary {
    background: linear-gradient(180deg, #1e874c 50%, #002e55 50%)
}

.offset-success-secondary-light {
    background: linear-gradient(180deg, #1e874c 50%, #e5eaee 50%)
}

.offset-success-secondary-medium {
    background: linear-gradient(180deg, #1e874c 50%, #4d6d88 50%)
}

.offset-success-secondary-dark {
    background: linear-gradient(180deg, #1e874c 50%, #01213c 50%)
}

.offset-success-action {
    background: linear-gradient(180deg, #1e874c 50%, #002e55 50%)
}

.offset-success-danger {
    background: linear-gradient(180deg, #1e874c 50%, #880727 50%)
}

.offset-success-warning {
    background: linear-gradient(180deg, #1e874c 50%, #faaf00 50%)
}

.offset-success-success {
    background: linear-gradient(180deg, #1e874c 50%, #1e874c 50%)
}

.offset-success-info {
    background: linear-gradient(180deg, #1e874c 50%, #949494 50%)
}

.offset-success-extra-light-gray {
    background: linear-gradient(180deg, #1e874c 50%, #f5f5f5 50%)
}

.offset-info-white {
    background: linear-gradient(180deg, #949494 50%, #fff 50%)
}

.offset-info-black {
    background: linear-gradient(180deg, #949494 50%, #3c3c3b 50%)
}

.offset-info-gray-base {
    background: linear-gradient(180deg, #949494 50%, #d8d8d8 50%)
}

.offset-info-middle-gray {
    background: linear-gradient(180deg, #949494 50%, #949494 50%)
}

.offset-info-dark-gray {
    background: linear-gradient(180deg, #949494 50%, #707070 50%)
}

.offset-info-light-gray {
    background: linear-gradient(180deg, #949494 50%, #eee 50%)
}

.offset-info-primary {
    background: linear-gradient(180deg, #949494 50%, #be9f56 50%)
}

.offset-info-primary-light {
    background: linear-gradient(180deg, #949494 50%, #f8f5ee 50%)
}

.offset-info-primary-medium {
    background: linear-gradient(180deg, #949494 50%, #cbb278 50%)
}

.offset-info-primary-dark {
    background: linear-gradient(180deg, #949494 50%, #a18646 50%)
}

.offset-info-primary-darken {
    background: linear-gradient(180deg, #949494 50%, #756025 50%)
}

.offset-info-secondary {
    background: linear-gradient(180deg, #949494 50%, #002e55 50%)
}

.offset-info-secondary-light {
    background: linear-gradient(180deg, #949494 50%, #e5eaee 50%)
}

.offset-info-secondary-medium {
    background: linear-gradient(180deg, #949494 50%, #4d6d88 50%)
}

.offset-info-secondary-dark {
    background: linear-gradient(180deg, #949494 50%, #01213c 50%)
}

.offset-info-action {
    background: linear-gradient(180deg, #949494 50%, #002e55 50%)
}

.offset-info-danger {
    background: linear-gradient(180deg, #949494 50%, #880727 50%)
}

.offset-info-warning {
    background: linear-gradient(180deg, #949494 50%, #faaf00 50%)
}

.offset-info-success {
    background: linear-gradient(180deg, #949494 50%, #1e874c 50%)
}

.offset-info-info {
    background: linear-gradient(180deg, #949494 50%, #949494 50%)
}

.offset-info-extra-light-gray {
    background: linear-gradient(180deg, #949494 50%, #f5f5f5 50%)
}

.offset-extra-light-gray-white {
    background: linear-gradient(180deg, #f5f5f5 50%, #fff 50%)
}

.offset-extra-light-gray-black {
    background: linear-gradient(180deg, #f5f5f5 50%, #3c3c3b 50%)
}

.offset-extra-light-gray-gray-base {
    background: linear-gradient(180deg, #f5f5f5 50%, #d8d8d8 50%)
}

.offset-extra-light-gray-middle-gray {
    background: linear-gradient(180deg, #f5f5f5 50%, #949494 50%)
}

.offset-extra-light-gray-dark-gray {
    background: linear-gradient(180deg, #f5f5f5 50%, #707070 50%)
}

.offset-extra-light-gray-light-gray {
    background: linear-gradient(180deg, #f5f5f5 50%, #eee 50%)
}

.offset-extra-light-gray-primary {
    background: linear-gradient(180deg, #f5f5f5 50%, #be9f56 50%)
}

.offset-extra-light-gray-primary-light {
    background: linear-gradient(180deg, #f5f5f5 50%, #f8f5ee 50%)
}

.offset-extra-light-gray-primary-medium {
    background: linear-gradient(180deg, #f5f5f5 50%, #cbb278 50%)
}

.offset-extra-light-gray-primary-dark {
    background: linear-gradient(180deg, #f5f5f5 50%, #a18646 50%)
}

.offset-extra-light-gray-primary-darken {
    background: linear-gradient(180deg, #f5f5f5 50%, #756025 50%)
}

.offset-extra-light-gray-secondary {
    background: linear-gradient(180deg, #f5f5f5 50%, #002e55 50%)
}

.offset-extra-light-gray-secondary-light {
    background: linear-gradient(180deg, #f5f5f5 50%, #e5eaee 50%)
}

.offset-extra-light-gray-secondary-medium {
    background: linear-gradient(180deg, #f5f5f5 50%, #4d6d88 50%)
}

.offset-extra-light-gray-secondary-dark {
    background: linear-gradient(180deg, #f5f5f5 50%, #01213c 50%)
}

.offset-extra-light-gray-action {
    background: linear-gradient(180deg, #f5f5f5 50%, #002e55 50%)
}

.offset-extra-light-gray-danger {
    background: linear-gradient(180deg, #f5f5f5 50%, #880727 50%)
}

.offset-extra-light-gray-warning {
    background: linear-gradient(180deg, #f5f5f5 50%, #faaf00 50%)
}

.offset-extra-light-gray-success {
    background: linear-gradient(180deg, #f5f5f5 50%, #1e874c 50%)
}

.offset-extra-light-gray-info {
    background: linear-gradient(180deg, #f5f5f5 50%, #949494 50%)
}

.offset-extra-light-gray-extra-light-gray {
    background: linear-gradient(180deg, #f5f5f5 50%, #f5f5f5 50%)
}

.bg--white {
    background-color: #fff
}

.border--white {
    border-color: #fff
}

.color--white {
    color: #fff
}

.color--white .link:not(:hover):not(:focus):not(:active),
.color--white a:not(:hover):not(:focus):not(:active) {
    color: #fff
}

.bg--black {
    background-color: #3c3c3b;
    color: #fff
}

.bg--black .link,
.bg--black a:not(.button) {
    color: #fff
}

.border--black {
    border-color: #3c3c3b
}

.color--black {
    color: #3c3c3b
}

.color--black .link:not(:hover):not(:focus):not(:active),
.color--black a:not(:hover):not(:focus):not(:active) {
    color: #3c3c3b
}

.bg--gray-base {
    background-color: #d8d8d8;
    color: #3c3c3b
}

.bg--gray-base .link,
.bg--gray-base a:not(.button) {
    color: #3c3c3b
}

.border--gray-base {
    border-color: #d8d8d8
}

.color--gray-base {
    color: #d8d8d8
}

.color--gray-base .link:not(:hover):not(:focus):not(:active),
.color--gray-base a:not(:hover):not(:focus):not(:active) {
    color: #d8d8d8
}

.bg--middle-gray {
    background-color: #949494;
    color: #3c3c3b
}

.bg--middle-gray .link,
.bg--middle-gray a:not(.button) {
    color: #3c3c3b
}

.border--middle-gray {
    border-color: #949494
}

.color--middle-gray {
    color: #949494
}

.color--middle-gray .link:not(:hover):not(:focus):not(:active),
.color--middle-gray a:not(:hover):not(:focus):not(:active) {
    color: #949494
}

.bg--dark-gray {
    background-color: #707070;
    color: #fff
}

.bg--dark-gray .link,
.bg--dark-gray a:not(.button) {
    color: #fff
}

.border--dark-gray {
    border-color: #707070
}

.color--dark-gray {
    color: #707070
}

.color--dark-gray .link:not(:hover):not(:focus):not(:active),
.color--dark-gray a:not(:hover):not(:focus):not(:active) {
    color: #707070
}

.bg--light-gray {
    background-color: #eee;
    color: #3c3c3b
}

.bg--light-gray .link,
.bg--light-gray a:not(.button) {
    color: #3c3c3b
}

.border--light-gray {
    border-color: #eee
}

.color--light-gray {
    color: #eee
}

.color--light-gray .link:not(:hover):not(:focus):not(:active),
.color--light-gray a:not(:hover):not(:focus):not(:active) {
    color: #eee
}

.bg--primary {
    background-color: #be9f56;
    color: var(--main-color-white)
}

.bg--primary .link,
.bg--primary a:not(.button) {
    color: var(--main-color-white)
}

.border--primary {
    border-color: #be9f56
}

.color--primary {
    color: #be9f56
}

.color--primary .link:not(:hover):not(:focus):not(:active),
.color--primary a:not(:hover):not(:focus):not(:active) {
    color: #be9f56
}

.bg--primary-light {
    background-color: #f8f5ee;
    color: #3c3c3b
}

.bg--primary-light .link,
.bg--primary-light a:not(.button) {
    color: #3c3c3b
}

.border--primary-light {
    border-color: #f8f5ee
}

.color--primary-light {
    color: #f8f5ee
}

.color--primary-light .link:not(:hover):not(:focus):not(:active),
.color--primary-light a:not(:hover):not(:focus):not(:active) {
    color: #f8f5ee
}

.bg--primary-medium {
    background-color: #cbb278;
    color: #3c3c3b
}

.bg--primary-medium .link,
.bg--primary-medium a:not(.button) {
    color: #3c3c3b
}

.border--primary-medium {
    border-color: #cbb278
}

.color--primary-medium {
    color: #cbb278
}

.color--primary-medium .link:not(:hover):not(:focus):not(:active),
.color--primary-medium a:not(:hover):not(:focus):not(:active) {
    color: #cbb278
}

.bg--primary-dark {
    background-color: #a18646;
    color: #3c3c3b
}

.bg--primary-dark .link,
.bg--primary-dark a:not(.button) {
    color: #3c3c3b
}

.border--primary-dark {
    border-color: #a18646
}

.color--primary-dark {
    color: #a18646
}

.color--primary-dark .link:not(:hover):not(:focus):not(:active),
.color--primary-dark a:not(:hover):not(:focus):not(:active) {
    color: #a18646
}

.bg--primary-darken {
    background-color: #756025;
    color: #fff
}

.bg--primary-darken .link,
.bg--primary-darken a:not(.button) {
    color: #fff
}

.border--primary-darken {
    border-color: #756025
}

.color--primary-darken {
    color: #756025
}

.color--primary-darken .link:not(:hover):not(:focus):not(:active),
.color--primary-darken a:not(:hover):not(:focus):not(:active) {
    color: #756025
}

.bg--secondary {
    background-color: #002e55;
    color: #fff
}

.bg--secondary .link,
.bg--secondary a:not(.button) {
    color: #fff
}

.border--secondary {
    border-color: #002e55
}

.color--secondary {
    color: #002e55
}

.color--secondary .link:not(:hover):not(:focus):not(:active),
.color--secondary a:not(:hover):not(:focus):not(:active) {
    color: #002e55
}

.bg--secondary-light {
    background-color: #e5eaee;
    color: #3c3c3b
}

.bg--secondary-light .link,
.bg--secondary-light a:not(.button) {
    color: #3c3c3b
}

.border--secondary-light {
    border-color: #e5eaee
}

.color--secondary-light {
    color: #e5eaee
}

.color--secondary-light .link:not(:hover):not(:focus):not(:active),
.color--secondary-light a:not(:hover):not(:focus):not(:active) {
    color: #e5eaee
}

.bg--secondary-medium {
    background-color: #4d6d88;
    color: #fff
}

.bg--secondary-medium .link,
.bg--secondary-medium a:not(.button) {
    color: #fff
}

.border--secondary-medium {
    border-color: #4d6d88
}

.color--secondary-medium {
    color: #4d6d88
}

.color--secondary-medium .link:not(:hover):not(:focus):not(:active),
.color--secondary-medium a:not(:hover):not(:focus):not(:active) {
    color: #4d6d88
}

.bg--secondary-dark {
    background-color: #01213c;
    color: #fff
}

.bg--secondary-dark .link,
.bg--secondary-dark a:not(.button) {
    color: #fff
}

.border--secondary-dark {
    border-color: #01213c
}

.color--secondary-dark {
    color: #01213c
}

.color--secondary-dark .link:not(:hover):not(:focus):not(:active),
.color--secondary-dark a:not(:hover):not(:focus):not(:active) {
    color: #01213c
}

.bg--action {
    background-color: #002e55;
    color: #fff
}

.bg--action .link,
.bg--action a:not(.button) {
    color: #fff
}

.border--action {
    border-color: #002e55
}

.color--action {
    color: #002e55
}

.color--action .link:not(:hover):not(:focus):not(:active),
.color--action a:not(:hover):not(:focus):not(:active) {
    color: #002e55
}

.bg--danger {
    background-color: #880727;
    color: #fff
}

.bg--danger .link,
.bg--danger a:not(.button) {
    color: #fff
}

.border--danger {
    border-color: #880727
}

.color--danger {
    color: #880727
}

.color--danger .link:not(:hover):not(:focus):not(:active),
.color--danger a:not(:hover):not(:focus):not(:active) {
    color: #880727
}

.bg--warning {
    background-color: #faaf00;
    color: #3c3c3b
}

.bg--warning .link,
.bg--warning a:not(.button) {
    color: #3c3c3b
}

.border--warning {
    border-color: #faaf00
}

.color--warning {
    color: #faaf00
}

.color--warning .link:not(:hover):not(:focus):not(:active),
.color--warning a:not(:hover):not(:focus):not(:active) {
    color: #faaf00
}

.bg--success {
    background-color: #1e874c;
    color: #fff
}

.bg--success .link,
.bg--success a:not(.button) {
    color: #fff
}

.border--success {
    border-color: #1e874c
}

.color--success {
    color: #1e874c
}

.color--success .link:not(:hover):not(:focus):not(:active),
.color--success a:not(:hover):not(:focus):not(:active) {
    color: #1e874c
}

.bg--info {
    background-color: #949494;
    color: #3c3c3b
}

.bg--info .link,
.bg--info a:not(.button) {
    color: #3c3c3b
}

.border--info {
    border-color: #949494
}

.color--info {
    color: #949494
}

.color--info .link:not(:hover):not(:focus):not(:active),
.color--info a:not(:hover):not(:focus):not(:active) {
    color: #949494
}

.bg--extra-light-gray {
    background-color: #f5f5f5;
    color: #3c3c3b
}

.bg--extra-light-gray .link,
.bg--extra-light-gray a:not(.button) {
    color: #3c3c3b
}

.border--extra-light-gray {
    border-color: #f5f5f5
}

.color--extra-light-gray {
    color: #f5f5f5
}

.color--extra-light-gray .link:not(:hover):not(:focus):not(:active),
.color--extra-light-gray a:not(:hover):not(:focus):not(:active) {
    color: #f5f5f5
}

.bg--black .button--action {
    background: var(--main-color-white);
    color: var(--main-color-black)
}

.bg--action .button--action,
.bg--secondary .button--action,
.bg--secondary-dark .button--action {
    background: var(--main-color-white);
    color: var(--main-color-secondary)
}

.bg--action .button--bordered,
.bg--secondary .button--bordered,
.bg--secondary-dark .button--bordered {
    border-color: var(--main-color-white);
    color: var(--main-color-white)
}

.bg--action .buttonLink:after,
.bg--secondary .buttonLink:after,
.bg--secondary-dark .buttonLink:after {
    background: var(--main-color-white)
}

.bg--action .buttonLink:hover:after,
.bg--secondary .buttonLink:hover:after,
.bg--secondary-dark .buttonLink:hover:after {
    background: var(--main-color-primary)
}

.bg--primary {
    color: var(--main-color-white)
}

.bg--primary .button--action:hover,
.bg--primary .button--bordered:hover {
    background: var(--main-color-secondary-dark)
}

.bg--primary .button--primary,
.bg--primary-dark .button--primary,
.bg--primary-medium .button--primary {
    background: var(--main-color-white);
    color: var(--main-color-primary)
}

.bg--primary .buttonLink:after,
.bg--primary-dark .buttonLink:after,
.bg--primary-medium .buttonLink:after {
    background: var(--main-color-white)
}

.bg--primary .buttonLink:hover:after,
.bg--primary-dark .buttonLink:hover:after,
.bg--primary-medium .buttonLink:hover:after {
    background: var(--main-color-secondary)
}

.bg--danger .button--bordered,
.bg--dark-gray .button--bordered,
.bg--middle-gray .button--bordered,
.bg--secondary-medium .button--bordered,
.bg--success .button--bordered {
    border-color: var(--main-color-white);
    color: var(--main-color-white)
}

.alert--success a {
    color: var(--main-color-white)
}

.alert--success .site p {
    margin-bottom: 0
}

.bg--extra-light-gray .button--bordered {
    border-color: var(--main-color-secondary);
    color: var(--main-color-secondary)
}

.bg--extra-light-gray .button--bordered:hover {
    background: var(--main-color-secondary);
    color: var(--main-color-white)
}

.banner2>.link:focus .button,
.banner2>.link:hover .button,
.banner3>.link:focus .button,
.banner3>.link:hover .button,
.banner>.link:focus .button,
.banner>.link:hover .button,
.btn-disabled:focus,
.btn-disabled:hover,
.button:focus,
.button:hover,
.button_disabled:focus,
.button_disabled:hover,
a.banner2:focus .contentText__button,
a.banner2:hover .contentText__button,
a.banner3:focus .contentText__button,
a.banner3:hover .contentText__button,
a.banner:focus .contentText__button,
a.banner:hover .contentText__button,
button.disabled:focus,
button.disabled:hover,
button:focus,
button:hover {
    background: var(--main-color-secondary);
    border-color: var(--main-color-secondary);
    color: var(--main-color-white);
    text-decoration: none
}

.btn-disabled,
.button,
.button[disabled],
.button_disabled,
button,
button.disabled {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid var(--main-color-secondary);
    border-radius: 8px;
    color: var(--main-color-secondary);
    cursor: pointer;
    background: 0 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
    text-decoration: none;
    line-height: 18px;
    font-size: 1.5555556rem;
    padding: 8px 12px 8px 12px;
    transition: ease-in-out .2s;
    position: relative;
    letter-spacing: .14px;
    font-weight: var(--main-font-weight-medium)
}

.btn-disabled:has(.icon),
.button:has(.icon),
.button_disabled:has(.icon),
button:has(.icon) {
    display: inline-flex;
    gap: 8px
}

.btn-disabled:has(.icon) .icon-angle-right,
.button:has(.icon) .icon-angle-right,
.button_disabled:has(.icon) .icon-angle-right,
button:has(.icon) .icon-angle-right {
    font-size: 12px
}

@media (min-width:768px) {

    .btn-disabled,
    .button,
    .button[disabled],
    .button_disabled,
    button,
    button.disabled {
        line-height: 20px;
        font-size: var(--main-font-size-base);
        padding: 12px 16px 12px 16px;
        letter-spacing: .16px
    }
}

.btn-disabled:active,
.button:active,
.button_disabled:active,
button:active {
    background: var(--main-color-secondary);
    border-color: var(--main-color-secondary);
    color: var(--main-color-white);
    text-decoration: none
}

.button--primary,
button--primary {
    background: var(--main-color-primary);
    color: var(--main-color-white);
    border-color: var(--main-color-primary)
}

.button--primary:focus,
.button--primary:hover,
button--primary:focus,
button--primary:hover {
    background: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-white)
}

.button--primary:active,
button--primary:active {
    background: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-white)
}

.button--action,
button--action {
    background: var(--main-color-secondary);
    color: var(--main-color-white);
    border-color: var(--main-color-secondary)
}

.button--action:focus,
.button--action:hover,
button--action:focus,
button--action:hover {
    background: var(--main-color-secondary-dark);
    border-color: var(--main-color-secondary-dark);
    color: var(--main-color-white)
}

.button--action:active,
button--action:active {
    background: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-white)
}

.button--action:focus-within,
button--action:focus-within {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.button--bordered,
button--bordered {
    background: 0 0;
    color: var(--main-color-secondary);
    border-color: var(--main-color-secondary)
}

.button--bordered:focus,
.button--bordered:hover,
button--bordered:focus,
button--bordered:hover {
    background: var(--main-color-secondary-dark);
    border-color: var(--main-color-secondary-dark);
    color: var(--main-color-white)
}

.button--bordered:active,
button--bordered:active {
    background: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-white)
}

.button--bordered:focus-within,
button--bordered:focus-within {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.button--danger,
button--danger {
    background: var(--main-color-danger);
    color: var(--main-color-white);
    border-color: var(--main-color-danger)
}

.button--danger:focus,
.button--danger:hover,
button--danger:focus,
button--danger:hover {
    background: var(--main-color-danger-dark);
    border-color: var(--main-color-danger-dark);
    color: var(--main-color-danger-dark-contrast)
}

.button--danger:active,
button--danger:active {
    background: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-white)
}

.button--sm,
button--sm {
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    line-height: 18px;
    font-size: var(--main-font-size-small)
}

@media (min-width:768px) {

    .button--xl,
    button--xl {
        padding-top: 18px;
        padding-right: 30px;
        padding-bottom: 18px;
        padding-left: 30px;
        line-height: 22px;
        font-size: var(--main-font-size-big)
    }
}

.button.is-error,
.button.is-loading,
.button.is-success,
.is-error.btn-disabled,
.is-error.button_disabled,
.is-loading.btn-disabled,
.is-loading.button_disabled,
.is-success.btn-disabled,
.is-success.button_disabled,
button.is-error,
button.is-loading,
button.is-success {
    background: var(--main-color-middle-gray) !important;
    border-color: var(--main-color-middle-gray) !important;
    cursor: not-allowed;
    pointer-events: none;
    padding-right: 40px;
    padding-left: 10px
}

.button.is-error .icon,
.button.is-loading .icon,
.button.is-success .icon,
.is-error.btn-disabled .icon,
.is-error.button_disabled .icon,
.is-loading.btn-disabled .icon,
.is-loading.button_disabled .icon,
.is-success.btn-disabled .icon,
.is-success.button_disabled .icon,
button.is-error .icon,
button.is-loading .icon,
button.is-success .icon {
    opacity: 0
}

.button.is-error:after,
.button.is-loading:after,
.button.is-success:after,
.is-error.btn-disabled:after,
.is-error.button_disabled:after,
.is-loading.btn-disabled:after,
.is-loading.button_disabled:after,
.is-success.btn-disabled:after,
.is-success.button_disabled:after,
button.is-error:after,
button.is-loading:after,
button.is-success:after {
    position: absolute;
    right: 10px;
    top: 50%;
    font-family: icons, Helvetica, Arial, sans-serif;
    translate: 0 -50%;
    font-size: 16px
}

.button.is-loading,
.is-loading.btn-disabled,
.is-loading.button_disabled,
button.is-loading {
    cursor: wait;
    color: var(--main-color-black) !important
}

.button.is-loading:after,
.is-loading.btn-disabled:after,
.is-loading.button_disabled:after,
button.is-loading:after {
    content: var(--base-icon-loading);
    opacity: 1;
    animation: rotation 1s infinite ease-in-out
}

.button.is-success,
.is-success.btn-disabled,
.is-success.button_disabled,
button.is-success {
    background: var(--main-color-success) !important;
    border-color: var(--main-color-success) !important;
    color: var(--main-color-white) !important
}

.button.is-success:after,
.is-success.btn-disabled:after,
.is-success.button_disabled:after,
button.is-success:after {
    content: var(--base-icon-check);
    animation: scaleRequestIconBtn 1s forwards ease-in-out
}

.button.is-error,
.is-error.btn-disabled,
.is-error.button_disabled,
button.is-error {
    background: var(--main-color-danger) !important;
    border-color: var(--main-color-danger) !important;
    color: var(--main-color-white) !important
}

.button.is-error:after,
.is-error.btn-disabled:after,
.is-error.button_disabled:after,
button.is-error:after {
    content: var(--base-icon-close);
    animation: scaleRequestIconBtn 1s forwards ease-in-out
}

.btn-disabled,
.button[disabled],
.button_disabled,
button.disabled {
    background: var(--main-color-light-gray);
    color: var(--main-color-black);
    border-color: var(--main-color-light-gray);
    cursor: not-allowed
}

.btn-disabled:active,
.btn-disabled:focus,
.btn-disabled:hover,
.button[disabled]:active,
.button[disabled]:focus,
.button[disabled]:hover,
.button_disabled:active,
.button_disabled:focus,
.button_disabled:hover,
button.disabled:active,
button.disabled:focus,
button.disabled:hover {
    background: var(--main-color-light-gray);
    border-color: var(--main-color-light-gray);
    color: var(--main-color-black)
}

.buttonDevider {
    width: 1px;
    height: 32px;
    margin-left: 20px;
    margin-right: 15px;
    background: var(--main-color-gray-base);
    display: inline-block;
    vertical-align: middle
}

.js-purchaseAccept {
    pointer-events: none;
    background: var(--main-color-light-gray);
    color: var(--main-color-black);
    border-color: var(--main-color-light-gray)
}

.js-purchaseAccept:active,
.js-purchaseAccept:focus,
.js-purchaseAccept:hover {
    background: var(--main-color-light-gray);
    border-color: var(--main-color-light-gray);
    color: var(--main-color-black)
}

.js-purchaseAccept.is-active {
    cursor: pointer;
    pointer-events: all;
    background: var(--main-color-primary);
    color: var(--main-color-white);
    border-color: var(--main-color-primary)
}

.js-purchaseAccept.is-active:focus,
.js-purchaseAccept.is-active:hover {
    background: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-white)
}

.js-purchaseAccept.is-active:active {
    background: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-white)
}

@keyframes scaleRequestIconBtn {
    0% {
        opacity: 0;
        scale: 0
    }

    50% {
        opacity: 1;
        scale: 1.2
    }

    100% {
        opacity: 1;
        scale: 1
    }
}

.button--icon {
    display: flex;
    width: 44px;
    height: 44px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--main-color-secondary);
    color: var(--main-color-secondary);
    text-decoration: none
}

.button--icon .icon {
    font-size: 14px;
    line-height: 1;
    display: block
}

.button--icon:active,
.button--icon:focus,
.button--icon:hover {
    color: var(--main-color-white);
    background-color: var(--main-color-secondary);
    text-decoration: none
}

.button--icon.primary {
    border: 1px solid var(--main-color-primary);
    color: var(--main-color-primary)
}

.button--icon.primary:active,
.button--icon.primary:focus,
.button--icon.primary:hover {
    color: var(--main-color-white);
    background-color: var(--main-color-primary)
}

.button--icon.gray {
    border: 1px solid var(--main-color-gray-base);
    color: var(--main-color-black)
}

.button--icon.gray:active,
.button--icon.gray:focus,
.button--icon.gray:hover {
    border-color: var(--main-color-black);
    background-color: var(--main-color-white)
}

.button--icon.danger {
    border: 1px solid var(--main-color-danger);
    color: var(--main-color-danger)
}

.button--icon.danger:active,
.button--icon.danger:focus,
.button--icon.danger:hover {
    border-color: var(--main-color-black);
    background-color: var(--main-color-white)
}

.button--iconWithText>span {
    position: absolute;
    bottom: -20px;
    font-size: 12px;
    line-height: 1;
    color: var(--main-color-secondary)
}

.button--iconWithText:active>span,
.button--iconWithText:focus>span,
.button--iconWithText:hover>span {
    color: var(--main-color-secondary)
}

.button--iconWithText.text-left {
    border-radius: 16px;
    border: unset;
    padding: 10px;
    width: auto;
    height: auto;
    flex-direction: row
}

.button--iconWithText.text-left:active,
.button--iconWithText.text-left:focus,
.button--iconWithText.text-left:hover {
    background: 0 0
}

.button--iconWithText.text-left:active>span,
.button--iconWithText.text-left:focus>span,
.button--iconWithText.text-left:hover>span {
    color: var(--main-color-black)
}

.button--iconWithText.text-left:active i,
.button--iconWithText.text-left:focus i,
.button--iconWithText.text-left:hover i {
    border-color: var(--main-color-black);
    background-color: var(--main-color-primary)
}

.button--iconWithText.text-left i {
    border-radius: 50%;
    border: 1px solid var(--main-color-secondary);
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    transition: .2s ease-in-out
}

.button--iconWithText.text-left>span {
    bottom: unset;
    text-align: left;
    position: relative;
    font-size: 16px
}

.banner2>.link:focus .buttonLink,
.banner2>.link:hover .buttonLink,
.banner3>.link:focus .buttonLink,
.banner3>.link:hover .buttonLink,
.banner>.link:focus .buttonLink,
.banner>.link:hover .buttonLink,
.buttonLink:active,
.buttonLink:focus,
.buttonLink:hover,
.contentBox>.link:active .buttonLink,
.contentBox>.link:focus .buttonLink,
.contentBox>.link:hover .buttonLink,
a.banner2:focus .buttonLink,
a.banner2:hover .buttonLink,
a.banner3:focus .buttonLink,
a.banner3:hover .buttonLink,
a.banner:focus .buttonLink,
a.banner:hover .buttonLink {
    background: 0 0;
    text-decoration: none;
    color: var(--main-color-black)
}

.banner2>.link:focus .buttonLink:after,
.banner2>.link:hover .buttonLink:after,
.banner3>.link:focus .buttonLink:after,
.banner3>.link:hover .buttonLink:after,
.banner>.link:focus .buttonLink:after,
.banner>.link:hover .buttonLink:after,
.buttonLink:active:after,
.buttonLink:focus:after,
.buttonLink:hover:after,
.contentBox>.link:active .buttonLink:after,
.contentBox>.link:focus .buttonLink:after,
.contentBox>.link:hover .buttonLink:after,
a.banner2:focus .buttonLink:after,
a.banner2:hover .buttonLink:after,
a.banner3:focus .buttonLink:after,
a.banner3:hover .buttonLink:after,
a.banner:focus .buttonLink:after,
a.banner:hover .buttonLink:after {
    background: var(--main-color-black)
}

.buttonLink {
    display: inline-flex;
    align-items: center;
    color: var(--main-color-black);
    cursor: pointer;
    position: relative;
    background-color: transparent;
    padding: 5px 0 3px 0;
    border: 0;
    text-decoration: none;
    gap: 5px
}

.buttonLink:after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #9d9d9d;
    height: 1px;
    transition: background-color .2s ease-in
}

.buttonLink:has(.icon) .icon {
    font-size: 12px;
    width: 16px
}

.buttonLink:has(.icon):after {
    width: calc(100% - 20px)
}

.buttonLink:has(.icon-angle-left):after {
    right: 0;
    left: auto
}

.buttonLink.is-loading {
    background: 0 0 !important
}

.buttonLink.is-loading:after {
    display: none
}

.buttonLink.is-loading .icon {
    animation: rotation 1s infinite ease-in-out
}

.buttonLink.is-loading .icon:before {
    opacity: 1
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px var(--main-color-white) inset !important
}

.customSelect__selected,
.filterReset,
.selectBody__selected,
input,
select,
textarea {
    background-color: var(--main-color-white);
    color: var(--main-color-black);
    border: 1px solid var(--main-color-middle-gray);
    border-radius: 8px;
    box-shadow: none;
    display: block;
    width: 100%;
    line-height: 18px;
    font-size: clamp(16px, var(--main-font-size-small), 20px);
    padding: 12px 12px 12px 12px
}

@media (min-width:768px) {

    .customSelect__selected,
    .filterReset,
    .selectBody__selected,
    input,
    select,
    textarea {
        line-height: 20px;
        font-size: var(--main-font-size-base);
        padding: 12px 16px 12px 16px
    }
}

.customSelect__selected:not(:disabled):active,
.customSelect__selected:not(:disabled):focus,
.filterReset:not(:disabled):active,
.filterReset:not(:disabled):focus,
.selectBody__selected:not(:disabled):active,
.selectBody__selected:not(:disabled):focus,
input:not(:disabled):active,
input:not(:disabled):focus,
select:not(:disabled):active,
select:not(:disabled):focus,
textarea:not(:disabled):active,
textarea:not(:disabled):focus {
    outline: 0;
    border-color: var(--main-color-primary)
}

.customSelect__selected:not(:disabled):focus-visible,
.filterReset:not(:disabled):focus-visible,
.selectBody__selected:not(:disabled):focus-visible,
input:not(:disabled):focus-visible,
select:not(:disabled):focus-visible,
textarea:not(:disabled):focus-visible {
    outline: 1px solid var(--main-color-primary);
    outline-offset: -1px
}

.customSelect__selected:not(:disabled):focus-within,
.filterReset:not(:disabled):focus-within,
.selectBody__selected:not(:disabled):focus-within,
input:not(:disabled):focus-within,
select:not(:disabled):focus-within,
textarea:not(:disabled):focus-within {
    border-color: var(--main-color-primary)
}

.error.customSelect__selected,
.error.filterReset,
.error.selectBody__selected,
input.error,
select.error,
textarea.error {
    border-color: var(--main-color-danger)
}

.customSelect__selected:disabled,
.filterReset:disabled,
.selectBody__selected:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--main-color-light-gray);
    border-color: var(--main-color-light-gray);
    color: var(--main-color-middle-gray)
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=submit] {
    width: auto
}

input[type=number] {
    -moz-appearance: textfield
}

input[type=file]+.full {
    flex-grow: 1;
    padding-left: 15px;
    padding-right: 15px !important;
    display: flex;
    align-items: center;
    justify-content: space-between
}

input[type=file]+.full i {
    font-size: 18px
}

input[type=file]:hover+.full i {
    color: var(--main-color-primary)
}

textarea {
    resize: vertical;
    min-height: 120px
}

textarea::-webkit-scrollbar {
    width: 0
}

.customSelect__selected:after,
.selectBody:after {
    content: var(--base-icon-angle-down-light);
    font-family: icons, Helvetica, Arial, sans-serif;
    position: absolute;
    right: 16px;
    top: 50%;
    font-size: 16px;
    pointer-events: none;
    transform: translateY(-50%);
    margin-top: 1px
}

.customSelect__selected,
.selectBody {
    background-color: var(--main-color-white);
    cursor: pointer;
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis
}

.selectBody__fake {
    position: relative;
    cursor: pointer;
    user-select: none
}

.selectBody__fake.open {
    overflow: visible
}

.selectBody__fake.open .selectBody__options {
    display: block
}

.selectBody__fakeOption {
    padding: 10px 10px 10px 10px;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 25px 1fr 100px auto;
    align-items: center;
    border-bottom: 1px solid var(--main-color-light-gray)
}

.selectBody__fakeOption.disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed
}

.selectBody__fakeOption .radiobox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--main-color-dark-gray);
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    flex-shrink: 0
}

.selectBody__fakeOption .radiobox.checked {
    border-color: var(--main-color-secondary);
    background-color: var(--main-color-secondary)
}

.selectBody__fakeOption .radiobox.checked:after {
    font-family: icons, Helvetica, Arial, sans-serif;
    content: var(--base-icon-check);
    color: var(--main-color-white);
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.selectBody__fakeOption .pricePerMonth {
    font-size: 2rem;
    font-weight: var(--main-font-weight-bold);
    color: var(--main-color-secondary);
    flex-direction: column;
    gap: 5px;
    display: flex;
    align-items: flex-end;
    line-height: 1
}

.selectBody__fakeOption .pricePerMonth>span {
    font-size: 1.2rem;
    color: var(--main-color-dark-gray)
}

.selectBody__fakeOption img {
    max-width: 100px
}

.selectBody__fakeOption:hover {
    background-color: var(--main-color-light-gray)
}

@media (max-width:767px) {
    .selectBody__fakeOption {
        grid-template-columns: 25px 1fr;
        grid-template-rows: auto auto
    }

    .selectBody__fakeOption>:nth-child(3),
    .selectBody__fakeOption>:nth-child(4) {
        grid-column: span 1;
        grid-row: 2
    }

    .selectBody__fakeOption>:nth-child(4) {
        grid-column: span 1;
        grid-row: 2
    }

    .selectBody__fakeOption img {
        margin-left: 35px
    }
}

@media (max-width:359px) {
    .selectBody__fakeOption>:nth-child(3) {
        grid-column: span 2;
        grid-row: 2
    }

    .selectBody__fakeOption>:nth-child(4) {
        grid-column: span 2;
        grid-row: 3
    }
}

.selectBody__fakeOptionText {
    font-size: 16px;
    font-weight: var(--main-font-weight-medium);
    color: var(--main-color-secondary)
}

.selectBody__fakeOptionText>span {
    font-size: 12px;
    color: var(--main-color-dark-gray)
}

@media (max-width:767px) {
    .selectBody__fakeOptionText {
        font-size: 14px;
        white-space: normal
    }
}

.selectBody__selected {
    padding-right: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-weight: var(--main-font-weight-medium)
}

.selectBody__options {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--main-color-middle-gray);
    background: var(--main-color-white);
    z-index: 20;
    contain: paint
}

.customSelect__selected select,
.selectBody select {
    color: var(--main-color-black);
    border-color: var(--main-color-middle-gray);
    cursor: pointer;
    padding-right: 40px;
    appearance: none;
    display: block;
    width: 100%
}

.customSelect__selected select::-ms-expand,
.selectBody select::-ms-expand {
    display: none
}

.focus.customSelect__selected select,
.selectBody.focus select {
    border-color: var(--main-color-primary)
}

.disabled.customSelect__selected select,
.selectBody.disabled select {
    cursor: default
}

form {
    margin: 0
}

.infieldInputGroup.marginBottom--small {
    margin-bottom: 16px
}

.infieldInputGroup:has(textarea)>label {
    top: 14px;
    transform: translate(0)
}

.infieldInputGroup--withTooltip {
    position: relative
}

.infieldInputGroup--withTooltip>.icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    cursor: help;
    z-index: 1
}

.infieldInputGroup--withTooltip input,
.infieldInputGroup--withTooltip select,
.infieldInputGroup--withTooltip textarea {
    padding-right: calc(16px * 2 + 16px)
}

.fileBody {
    display: block;
    position: relative;
    width: 100%
}

.fileBody input {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    padding: 0;
    cursor: pointer
}

.fileBody input+span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: var(--main-color-white);
    color: var(--main-color-black);
    border: 1px solid var(--main-color-middle-gray);
    border-radius: 8px;
    box-shadow: none;
    width: 100%;
    line-height: 18px;
    font-size: clamp(16px, var(--main-font-size-small), 20px);
    padding: 8px 12px 8px 12px;
    min-height: 36px;
    cursor: pointer;
    display: block;
    padding-right: 50px
}

@media (min-width:768px) {
    .fileBody input+span {
        line-height: 20px;
        font-size: var(--main-font-size-base);
        padding: 12px 16px 12px 16px;
        min-height: 46px
    }
}

.fileBody input:not(:disabled):active+span,
.fileBody input:not(:disabled):focus+span {
    border-color: var(--main-color-primary)
}

.fileBody input.error+span {
    border-color: var(--main-color-danger)
}

.fileBody input:disabled+span {
    background-color: var(--main-color-light-gray);
    border-color: var(--main-color-light-gray)
}

.fileBody .icon {
    font-size: 2rem;
    width: 36px;
    min-height: 36px;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1
}

@media (min-width:768px) {
    .fileBody .icon {
        min-height: 46px;
        width: 46px
    }
}

.specialcheckbox,
.specialcheckboxSwitch,
.specialradiobox {
    position: relative;
    line-height: 20px;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 10px;
    padding-left: 24px;
    color: var(--main-color-black)
}

.specialcheckbox i,
.specialcheckboxSwitch i,
.specialradiobox i {
    font-style: normal;
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    background-color: var(--main-color-white);
    border: 1px solid var(--main-color-middle-gray);
    border-radius: 50%;
    top: -2px;
    display: block;
    pointer-events: none;
    margin-bottom: 0;
    font-family: var(--main-font-family)
}

.specialcheckbox i:after,
.specialcheckboxSwitch i:after,
.specialradiobox i:after {
    content: " ";
    pointer-events: none;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 2px;
    top: 2px;
    opacity: 0;
    transition: opacity .1s ease-in;
    background-color: var(--main-color-primary);
    border-radius: 50%;
    display: block
}

.specialcheckbox:has(input:checked) i:after,
.specialcheckboxSwitch:has(input:checked) i:after,
.specialradiobox:has(input:checked) i:after {
    opacity: 1
}

.specialcheckbox:has(input:disabled) i,
.specialcheckboxSwitch:has(input:disabled) i,
.specialradiobox:has(input:disabled) i {
    background: var(--main-color-light-gray);
    border-color: var(--main-color-light-gray)
}

.specialcheckbox:has(input:disabled) i:after,
.specialcheckboxSwitch:has(input:disabled) i:after,
.specialradiobox:has(input:disabled) i:after {
    color: var(--main-color-gray-base)
}

.specialcheckbox:has(input:focus)+i,
.specialcheckboxSwitch:has(input:focus)+i,
.specialradiobox:has(input:focus)+i {
    border-color: var(--main-color-primary)
}

.specialcheckbox input,
.specialcheckboxSwitch input,
.specialradiobox input {
    position: absolute;
    width: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0
}

.specialcheckbox input:disabled,
.specialcheckboxSwitch input:disabled,
.specialradiobox input:disabled {
    cursor: not-allowed
}

.specialcheckbox:has(input:active):not(.disabled) i:after,
.specialcheckboxSwitch:has(input:active):not(.disabled) i:after,
.specialradiobox:has(input:active):not(.disabled) i:after {
    opacity: 1
}

.specialcheckbox:has(input:active):disabled,
.specialcheckboxSwitch:has(input:active):disabled,
.specialradiobox:has(input:active):disabled {
    cursor: not-allowed
}

.specialcheckbox:has(input:active):disabled+i,
.specialcheckboxSwitch:has(input:active):disabled+i,
.specialradiobox:has(input:active):disabled+i {
    background: var(--main-color-light-gray);
    border-color: var(--main-color-light-gray)
}

.specialcheckbox:has(input:active):disabled+i:after,
.specialcheckboxSwitch:has(input:active):disabled+i:after,
.specialradiobox:has(input:active):disabled+i:after {
    color: var(--main-color-gray-base)
}

.specialcheckbox:has(input:active):focus+i,
.specialcheckboxSwitch:has(input:active):focus+i,
.specialradiobox:has(input:active):focus+i {
    border-color: var(--main-color-primary)
}

.specialcheckbox:active:not(.disabled) i:after,
.specialcheckboxSwitch:active:not(.disabled) i:after,
.specialradiobox:active:not(.disabled) i:after {
    opacity: .7
}

.specialcheckbox:active:not(.disabled) input:disabled:not(:checked)+i:after,
.specialcheckboxSwitch:active:not(.disabled) input:disabled:not(:checked)+i:after,
.specialradiobox:active:not(.disabled) input:disabled:not(:checked)+i:after {
    opacity: 0
}

.specialcheckbox.disabled,
.specialcheckboxSwitch.disabled,
.specialradiobox.disabled {
    cursor: default;
    color: var(--main-color-black)
}

.specialcheckbox:focus i,
.specialcheckboxSwitch:focus i,
.specialradiobox:focus i {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.specialcheckbox {
    padding-left: 24px;
    line-height: 18px;
    outline: 0
}

.specialcheckbox i {
    border-radius: 4px;
    width: 14px;
    height: 14px;
    top: 2px
}

.specialcheckbox i:after {
    left: -1px;
    content: var(--base-icon-check-bold);
    font-family: icons, Helvetica, Arial, sans-serif;
    color: var(--main-color-white);
    top: -1px;
    opacity: 0;
    line-height: 14px;
    transition: opacity .1s ease-in;
    font-size: 10px;
    background-color: var(--main-color-secondary);
    border-radius: 4px;
    padding-left: 2px;
    width: 14px;
    height: 14px
}

.specialcheckbox input {
    width: 14px;
    height: 14px;
    left: 0;
    top: 0
}

.specialcheckbox:focus i {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.specialcheckboxSwitch {
    padding-left: 55px;
    margin-bottom: 0
}

.specialcheckboxSwitch i {
    background: var(--main-color-gray-base);
    border-radius: 16px;
    width: 40px;
    height: 20px;
    border: none;
    position: absolute;
    margin-top: 3px;
    transition: .2s ease-in-out
}

.specialcheckboxSwitch i:after {
    content: "";
    display: block;
    background: var(--main-color-white);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 3px;
    left: 3px;
    opacity: 1;
    transition: .2s ease-in-out
}

.specialcheckboxSwitch input {
    width: 40px;
    height: 20px;
    left: 0;
    top: 0
}

.specialcheckboxSwitch:has(input:checked) i {
    background: var(--main-color-primary)
}

.specialcheckboxSwitch:has(input:checked) i:after {
    left: 22px;
    background: var(--main-color-white)
}

.specialcheckboxSwitch:focus i {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.specialradiobox i {
    top: 2px
}

img,
svg {
    height: auto !important;
    max-width: 100%;
    object-fit: contain
}

.image,
.imageCover,
.itemcardImagesMain .itemcardImages__img,
.itemcardImagesThumbs .itemcardImages__img {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.image>img,
.image>svg,
.image>video,
.imageCover>img,
.imageCover>svg,
.imageCover>video,
.itemcardImagesMain .itemcardImages__img>img,
.itemcardImagesMain .itemcardImages__img>svg,
.itemcardImagesMain .itemcardImages__img>video,
.itemcardImagesThumbs .itemcardImages__img>img,
.itemcardImagesThumbs .itemcardImages__img>svg,
.itemcardImagesThumbs .itemcardImages__img>video {
    object-fit: contain;
    object-position: center center;
    max-height: 100% !important;
    aspect-ratio: 1;
    width: 100%
}

.imageCover>img,
.imageCover>svg,
.imageCover>video {
    object-fit: cover;
    min-width: 100%
}

.imageRound {
    border-radius: 50%;
    overflow: hidden
}

.imageRound>img {
    min-width: 100%;
    object-fit: cover
}

.banner .contentImage,
.banner2 .contentImage,
.banner3 .contentImage,
.contentBox.contentBox--textinbox {
    position: relative;
    overflow: hidden
}

.banner .contentImage:after,
.banner2 .contentImage:after,
.banner3 .contentImage:after,
.contentBox.contentBox--textinbox:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none
}

video {
    height: auto !important;
    max-width: 100% !important
}

table:not(.order_sum, .vat_table) {
    font-size: var(--main-font-size-base)
}

table:not(.order_sum, .vat_table) tr:nth-child(odd) td,
table:not(.order_sum, .vat_table) tr:nth-child(odd) th {
    background-color: #f6f6f6
}

td,
th {
    padding: 10px 5px;
    border-bottom: 0;
    text-align: left
}

@media (min-width:1250px) {

    td,
    th {
        padding-left: 10px;
        padding-right: 20px
    }
}

tr:first-child td,
tr:first-child th {
    border-top: 0
}

tr th {
    font-size: 1.6rem;
    font-weight: var(--main-font-weight-bold)
}

.table_wrapper {
    max-width: 100%;
    overflow: hidden;
    overflow-x: auto
}

@media (max-width:767px) {
    .table_wrapper table {
        font-size: var(--main-font-size-small)
    }
}

.table {
    width: 100%
}

@media (min-width:768px) {
    .table {
        display: table
    }
}

.table__row {
    border-bottom: 0
}

@media (min-width:768px) {
    .table__row {
        display: table-row
    }
}

@media (min-width:768px) {
    .table__row:not(.table__row--header):nth-child(odd) {
        background-color: #f6f6f6
    }
}

.table__row.table__row--header {
    font-weight: var(--main-font-weight-bold);
    font-size: 1.4rem
}

@media (max-width:767px) {
    .table__row.table__row--header {
        display: none
    }
}

@media (max-width:767px) {
    .table__row {
        margin-bottom: 10px;
        border-bottom: 1px solid var(--main-color-middle-gray);
        padding-bottom: 10px
    }
}

@media (min-width:768px) {
    .table__cell {
        display: table-cell;
        vertical-align: middle;
        padding: 10px 5px;
        border-bottom: 0
    }

    .table__cell--label {
        display: none
    }
}

@media (min-width:1250px) {
    .table__cell {
        padding-left: 10px;
        padding-right: 10px
    }
}

@media (max-width:767px) {
    .table__cell {
        text-align: left !important;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .table__cell .button {
        margin-top: 10px
    }

    .table__cell--label {
        display: inline-block;
        font-weight: var(--main-font-weight-bold)
    }
}

.tablePadding--small .table__cell {
    padding: 5px
}

::-webkit-scrollbar {
    width: 6px;
    height: 1px
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0
}

::-webkit-scrollbar-thumb {
    background: var(--main-color-gray-base);
    border: 0 none transparent;
    border-radius: 0
}

::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover {
    background: var(--main-color-black)
}

::-webkit-scrollbar-track {
    background: 0 0;
    border: 0 none transparent;
    border-radius: 0
}

::-webkit-scrollbar-track:hover {
    background: 0 0
}

::-webkit-scrollbar-track:active {
    background: 0 0
}

::-webkit-scrollbar-corner {
    background: 0 0
}

embed,
iframe,
object {
    max-width: 100%;
    border: 0
}

.embedResponsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    width: 100%
}

.embedResponsive>* {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100% !important;
    width: 100% !important;
    border: 0
}

.embedResponsive--1by1 {
    padding-bottom: 100%
}

.embedResponsive--4by3 {
    padding-bottom: 75%
}

.embedResponsive--16by9 {
    padding-bottom: 56.25%
}

.embedResponsive--21by9 {
    padding-bottom: 42.85%
}

.padding {
    padding: 16px
}

.paddingTop {
    padding-top: 16px
}

.paddingRight {
    padding-right: 16px
}

.paddingBottom {
    padding-bottom: 16px
}

.paddingLeft {
    padding-left: 16px
}

.p--small {
    padding: 32px
}

.pt--small {
    padding-top: 32px
}

.pr--small {
    padding-right: 32px
}

.pb--small {
    padding-bottom: 32px
}

.pl--small {
    padding-left: 32px
}

.padding--small {
    padding: 32px
}

.paddingTop--small {
    padding-top: 32px
}

.paddingRight--small {
    padding-right: 32px
}

.paddingBottom--small {
    padding-bottom: 32px
}

.paddingLeft--small {
    padding-left: 32px
}

.p--middle {
    padding: 48px
}

.pt--middle {
    padding-top: 48px
}

.pr--middle {
    padding-right: 48px
}

.pb--middle {
    padding-bottom: 48px
}

.pl--middle {
    padding-left: 48px
}

.padding--middle {
    padding: 48px
}

.paddingTop--middle {
    padding-top: 48px
}

.paddingRight--middle {
    padding-right: 48px
}

.paddingBottom--middle {
    padding-bottom: 48px
}

.paddingLeft--middle {
    padding-left: 48px
}

.p--large {
    padding: 80px
}

.pt--large {
    padding-top: 80px
}

.pr--large {
    padding-right: 80px
}

.pb--large {
    padding-bottom: 80px
}

.pl--large {
    padding-left: 80px
}

.padding--large {
    padding: 80px
}

.paddingTop--large {
    padding-top: 80px
}

.paddingRight--large {
    padding-right: 80px
}

.paddingBottom--large {
    padding-bottom: 80px
}

.paddingLeft--large {
    padding-left: 80px
}

.p--xlarge {
    padding: 150px
}

.pt--xlarge {
    padding-top: 150px
}

.pr--xlarge {
    padding-right: 150px
}

.pb--xlarge {
    padding-bottom: 150px
}

.pl--xlarge {
    padding-left: 150px
}

.padding--xlarge {
    padding: 150px
}

.paddingTop--xlarge {
    padding-top: 150px
}

.paddingRight--xlarge {
    padding-right: 150px
}

.paddingBottom--xlarge {
    padding-bottom: 150px
}

.paddingLeft--xlarge {
    padding-left: 150px
}

@media (max-width:767.98px) {
    .p--middle {
        padding: 32px
    }

    .pt--middle {
        padding-top: 32px
    }

    .pr--middle {
        padding-right: 32px
    }

    .pb--middle {
        padding-bottom: 32px
    }

    .pl--middle {
        padding-left: 32px
    }

    .padding--middle {
        padding: 32px
    }

    .paddingTop--middle {
        padding-top: 32px
    }

    .paddingRight--middle {
        padding-right: 32px
    }

    .paddingBottom--middle {
        padding-bottom: 32px
    }

    .paddingLeft--middle {
        padding-left: 32px
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .p--middle {
        padding: 40px
    }

    .pt--middle {
        padding-top: 40px
    }

    .pr--middle {
        padding-right: 40px
    }

    .pb--middle {
        padding-bottom: 40px
    }

    .pl--middle {
        padding-left: 40px
    }

    .padding--middle {
        padding: 40px
    }

    .paddingTop--middle {
        padding-top: 40px
    }

    .paddingRight--middle {
        padding-right: 40px
    }

    .paddingBottom--middle {
        padding-bottom: 40px
    }

    .paddingLeft--middle {
        padding-left: 40px
    }
}

@media (max-width:767.98px) {
    .p--large {
        padding: 40px
    }

    .pt--large {
        padding-top: 40px
    }

    .pr--large {
        padding-right: 40px
    }

    .pb--large {
        padding-bottom: 40px
    }

    .pl--large {
        padding-left: 40px
    }

    .padding--large {
        padding: 40px
    }

    .paddingTop--large {
        padding-top: 40px
    }

    .paddingRight--large {
        padding-right: 40px
    }

    .paddingBottom--large {
        padding-bottom: 40px
    }

    .paddingLeft--large {
        padding-left: 40px
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .p--large {
        padding: 60px
    }

    .pt--large {
        padding-top: 60px
    }

    .pr--large {
        padding-right: 60px
    }

    .pb--large {
        padding-bottom: 60px
    }

    .pl--large {
        padding-left: 60px
    }

    .padding--large {
        padding: 60px
    }

    .paddingTop--large {
        padding-top: 60px
    }

    .paddingRight--large {
        padding-right: 60px
    }

    .paddingBottom--large {
        padding-bottom: 60px
    }

    .paddingLeft--large {
        padding-left: 60px
    }
}

@media (max-width:767.98px) {
    .p--xlarge {
        padding: 60px
    }

    .pt--xlarge {
        padding-top: 60px
    }

    .pr--xlarge {
        padding-right: 60px
    }

    .pb--xlarge {
        padding-bottom: 60px
    }

    .pl--xlarge {
        padding-left: 60px
    }

    .padding--xlarge {
        padding: 60px
    }

    .paddingTop--xlarge {
        padding-top: 60px
    }

    .paddingRight--xlarge {
        padding-right: 60px
    }

    .paddingBottom--xlarge {
        padding-bottom: 60px
    }

    .paddingLeft--xlarge {
        padding-left: 60px
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .p--xlarge {
        padding: 80px
    }

    .pt--xlarge {
        padding-top: 80px
    }

    .pr--xlarge {
        padding-right: 80px
    }

    .pb--xlarge {
        padding-bottom: 80px
    }

    .pl--xlarge {
        padding-left: 80px
    }

    .padding--xlarge {
        padding: 80px
    }

    .paddingTop--xlarge {
        padding-top: 80px
    }

    .paddingRight--xlarge {
        padding-right: 80px
    }

    .paddingBottom--xlarge {
        padding-bottom: 80px
    }

    .paddingLeft--xlarge {
        padding-left: 80px
    }
}

@media (min-width:1024px) and (max-width:1249.98px) {
    .p--xlarge {
        padding: 100px
    }

    .pt--xlarge {
        padding-top: 100px
    }

    .pr--xlarge {
        padding-right: 100px
    }

    .pb--xlarge {
        padding-bottom: 100px
    }

    .pl--xlarge {
        padding-left: 100px
    }

    .padding--xlarge {
        padding: 100px
    }

    .paddingTop--xlarge {
        padding-top: 100px
    }

    .paddingRight--xlarge {
        padding-right: 100px
    }

    .paddingBottom--xlarge {
        padding-bottom: 100px
    }

    .paddingLeft--xlarge {
        padding-left: 100px
    }
}

@media (max-width:767.98px) {
    .xs-padding {
        padding-bottom: 10px
    }

    .xs-padding-base {
        padding-bottom: 16px
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .sm-padding {
        padding-bottom: 10px
    }

    .sm-padding-base {
        padding-bottom: 16px
    }
}

@media (min-width:1024px) and (max-width:1249.98px) {
    .md-padding {
        padding-bottom: 10px
    }

    .md-padding-base {
        padding-bottom: 16px
    }
}

@media (min-width:1250px) and (max-width:1539.98px) {
    .lg-padding {
        padding-bottom: 10px
    }

    .lg-padding-base {
        padding-bottom: 16px
    }
}

@media (min-width:1540px) {
    .xlg-padding {
        padding-bottom: 10px
    }

    .xlg-padding-base {
        padding-bottom: 16px
    }
}

.margin {
    margin: 16px
}

.marginTop {
    margin-top: 16px
}

.marginRight {
    margin-right: 16px
}

.marginBottom {
    margin-bottom: 16px
}

.marginLeft {
    margin-left: 16px
}

.m--small {
    margin: 32px
}

.mt--small {
    margin-top: 32px
}

.mr--small {
    margin-right: 32px
}

.mb--small {
    margin-bottom: 32px
}

.ml--small {
    margin-left: 32px
}

.margin--small {
    margin: 32px
}

.marginTop--small {
    margin-top: 32px
}

.marginRight--small {
    margin-right: 32px
}

.marginBottom--small {
    margin-bottom: 32px
}

.marginLeft--small {
    margin-left: 32px
}

.m--middle {
    margin: 48px
}

.mt--middle {
    margin-top: 48px
}

.mr--middle {
    margin-right: 48px
}

.mb--middle {
    margin-bottom: 48px
}

.ml--middle {
    margin-left: 48px
}

.margin--middle {
    margin: 48px
}

.marginTop--middle {
    margin-top: 48px
}

.marginRight--middle {
    margin-right: 48px
}

.marginBottom--middle {
    margin-bottom: 48px
}

.marginLeft--middle {
    margin-left: 48px
}

.m--large {
    margin: 80px
}

.mt--large {
    margin-top: 80px
}

.mr--large {
    margin-right: 80px
}

.mb--large {
    margin-bottom: 80px
}

.ml--large {
    margin-left: 80px
}

.margin--large {
    margin: 80px
}

.marginTop--large {
    margin-top: 80px
}

.marginRight--large {
    margin-right: 80px
}

.marginBottom--large {
    margin-bottom: 80px
}

.marginLeft--large {
    margin-left: 80px
}

.m--xlarge {
    margin: 150px
}

.mt--xlarge {
    margin-top: 150px
}

.mr--xlarge {
    margin-right: 150px
}

.mb--xlarge {
    margin-bottom: 150px
}

.ml--xlarge {
    margin-left: 150px
}

.margin--xlarge {
    margin: 150px
}

.marginTop--xlarge {
    margin-top: 150px
}

.marginRight--xlarge {
    margin-right: 150px
}

.marginBottom--xlarge {
    margin-bottom: 150px
}

.marginLeft--xlarge {
    margin-left: 150px
}

@media (max-width:767.98px) {
    .m--middle {
        margin: 32px
    }

    .mt--middle {
        margin-top: 32px
    }

    .mr--middle {
        margin-right: 32px
    }

    .mb--middle {
        margin-bottom: 32px
    }

    .ml--middle {
        margin-left: 32px
    }

    .margin--middle {
        margin: 32px
    }

    .marginTop--middle {
        margin-top: 32px
    }

    .marginRight--middle {
        margin-right: 32px
    }

    .marginBottom--middle {
        margin-bottom: 32px
    }

    .marginLeft--middle {
        margin-left: 32px
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .m--middle {
        margin: 40px
    }

    .mt--middle {
        margin-top: 40px
    }

    .mr--middle {
        margin-right: 40px
    }

    .mb--middle {
        margin-bottom: 40px
    }

    .ml--middle {
        margin-left: 40px
    }

    .margin--middle {
        margin: 40px
    }

    .marginTop--middle {
        margin-top: 40px
    }

    .marginRight--middle {
        margin-right: 40px
    }

    .marginBottom--middle {
        margin-bottom: 40px
    }

    .marginLeft--middle {
        margin-left: 40px
    }
}

@media (max-width:767.98px) {
    .m--large {
        margin: 40px
    }

    .mt--large {
        margin-top: 40px
    }

    .mr--large {
        margin-right: 40px
    }

    .mb--large {
        margin-bottom: 40px
    }

    .ml--large {
        margin-left: 40px
    }

    .margin--large {
        margin: 40px
    }

    .marginTop--large {
        margin-top: 40px
    }

    .marginRight--large {
        margin-right: 40px
    }

    .marginBottom--large {
        margin-bottom: 40px
    }

    .marginLeft--large {
        margin-left: 40px
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .m--large {
        margin: 60px
    }

    .mt--large {
        margin-top: 60px
    }

    .mr--large {
        margin-right: 60px
    }

    .mb--large {
        margin-bottom: 60px
    }

    .ml--large {
        margin-left: 60px
    }

    .margin--large {
        margin: 60px
    }

    .marginTop--large {
        margin-top: 60px
    }

    .marginRight--large {
        margin-right: 60px
    }

    .marginBottom--large {
        margin-bottom: 60px
    }

    .marginLeft--large {
        margin-left: 60px
    }
}

@media (max-width:767.98px) {
    .m--xlarge {
        margin: 60px
    }

    .mt--xlarge {
        margin-top: 60px
    }

    .mr--xlarge {
        margin-right: 60px
    }

    .mb--xlarge {
        margin-bottom: 60px
    }

    .ml--xlarge {
        margin-left: 60px
    }

    .margin--xlarge {
        margin: 60px
    }

    .marginTop--xlarge {
        margin-top: 60px
    }

    .marginRight--xlarge {
        margin-right: 60px
    }

    .marginBottom--xlarge {
        margin-bottom: 60px
    }

    .marginLeft--xlarge {
        margin-left: 60px
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .m--xlarge {
        margin: 80px
    }

    .mt--xlarge {
        margin-top: 80px
    }

    .mr--xlarge {
        margin-right: 80px
    }

    .mb--xlarge {
        margin-bottom: 80px
    }

    .ml--xlarge {
        margin-left: 80px
    }

    .margin--xlarge {
        margin: 80px
    }

    .marginTop--xlarge {
        margin-top: 80px
    }

    .marginRight--xlarge {
        margin-right: 80px
    }

    .marginBottom--xlarge {
        margin-bottom: 80px
    }

    .marginLeft--xlarge {
        margin-left: 80px
    }
}

@media (min-width:1024px) and (max-width:1249.98px) {
    .m--xlarge {
        margin: 100px
    }

    .mt--xlarge {
        margin-top: 100px
    }

    .mr--xlarge {
        margin-right: 100px
    }

    .mb--xlarge {
        margin-bottom: 100px
    }

    .ml--xlarge {
        margin-left: 100px
    }

    .margin--xlarge {
        margin: 100px
    }

    .marginTop--xlarge {
        margin-top: 100px
    }

    .marginRight--xlarge {
        margin-right: 100px
    }

    .marginBottom--xlarge {
        margin-bottom: 100px
    }

    .marginLeft--xlarge {
        margin-left: 100px
    }
}

@media (max-width:767.98px) {
    .xs-margin {
        margin-bottom: 10px
    }

    .xs-margin-base {
        margin-bottom: 16px
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .sm-margin {
        margin-bottom: 10px
    }

    .sm-margin-base {
        margin-bottom: 16px
    }
}

@media (min-width:1024px) and (max-width:1249.98px) {
    .md-margin {
        margin-bottom: 10px
    }

    .md-margin-base {
        margin-bottom: 16px
    }
}

@media (min-width:1250px) and (max-width:1539.98px) {
    .lg-margin {
        margin-bottom: 10px
    }

    .lg-margin-base {
        margin-bottom: 16px
    }
}

@media (min-width:1540px) {
    .xlg-margin {
        margin-bottom: 10px
    }

    .xlg-margin-base {
        margin-bottom: 16px
    }
}

@media (max-width:767px) {
    .noMarginBottom-xs {
        margin-bottom: 0
    }
}

.container,
.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px
}

.container {
    max-width: 1540px
}

.container--xxsmall {
    max-width: 500px
}

.container--xsmall {
    max-width: 800px
}

.container--small {
    max-width: 930px
}

.container--middle {
    max-width: 1240px
}

.container--large {
    max-width: 1840px
}

.container--full {
    width: 100%;
    max-width: 1920px;
    padding-left: 0;
    padding-right: 0;
    margin-right: auto;
    margin-left: auto
}

*,
::after,
::before {
    box-sizing: border-box
}

.row {
    min-width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 5px;
    padding-left: 5px
}

.row>.marginBottom {
    margin-bottom: 10px
}

.col {
    flex: 1 0 0%
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    flex: 0 0 auto;
    width: 8.3333333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.6666666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.3333333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.6666666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.3333333333%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.6666666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    flex: 0 0 auto;
    width: 83.3333333333%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.6666666667%
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

.offset-1 {
    margin-left: 8.3333333333%
}

.offset-2 {
    margin-left: 16.6666666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.3333333333%
}

.offset-5 {
    margin-left: 41.6666666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.3333333333%
}

.offset-8 {
    margin-left: 66.6666666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.3333333333%
}

.offset-11 {
    margin-left: 91.6666666667%
}

@media (min-width:768px) {
    .col-sm {
        flex: 1 0 0%
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.3333333333%
    }

    .offset-sm-2 {
        margin-left: 16.6666666667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.3333333333%
    }

    .offset-sm-5 {
        margin-left: 41.6666666667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.3333333333%
    }

    .offset-sm-8 {
        margin-left: 66.6666666667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.3333333333%
    }

    .offset-sm-11 {
        margin-left: 91.6666666667%
    }
}

@media (min-width:1024px) {
    .col-md {
        flex: 1 0 0%
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.3333333333%
    }

    .offset-md-2 {
        margin-left: 16.6666666667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.3333333333%
    }

    .offset-md-5 {
        margin-left: 41.6666666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.3333333333%
    }

    .offset-md-8 {
        margin-left: 66.6666666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.3333333333%
    }

    .offset-md-11 {
        margin-left: 91.6666666667%
    }
}

@media (min-width:1250px) {
    .col-lg {
        flex: 1 0 0%
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.3333333333%
    }

    .offset-lg-2 {
        margin-left: 16.6666666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.3333333333%
    }

    .offset-lg-5 {
        margin-left: 41.6666666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.3333333333%
    }

    .offset-lg-8 {
        margin-left: 66.6666666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.3333333333%
    }

    .offset-lg-11 {
        margin-left: 91.6666666667%
    }
}

@media (min-width:1540px) {
    .col-xlg {
        flex: 1 0 0%
    }

    .col-xlg-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xlg-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-xlg-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xlg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xlg-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-xlg-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-xlg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xlg-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-xlg-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-xlg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xlg-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-xlg-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-xlg-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xlg-0 {
        margin-left: 0
    }

    .offset-xlg-1 {
        margin-left: 8.3333333333%
    }

    .offset-xlg-2 {
        margin-left: 16.6666666667%
    }

    .offset-xlg-3 {
        margin-left: 25%
    }

    .offset-xlg-4 {
        margin-left: 33.3333333333%
    }

    .offset-xlg-5 {
        margin-left: 41.6666666667%
    }

    .offset-xlg-6 {
        margin-left: 50%
    }

    .offset-xlg-7 {
        margin-left: 58.3333333333%
    }

    .offset-xlg-8 {
        margin-left: 66.6666666667%
    }

    .offset-xlg-9 {
        margin-left: 75%
    }

    .offset-xlg-10 {
        margin-left: 83.3333333333%
    }

    .offset-xlg-11 {
        margin-left: 91.6666666667%
    }
}

@media (min-width:1250px) {
    .col-lg-1-5 {
        width: 20%
    }

    .col-lg-2-5 {
        width: 40%
    }

    .col-lg-3-5 {
        width: 60%
    }

    .col-lg-4-5 {
        width: 80%
    }

    .col-lg-5-5 {
        width: 100%
    }
}

@media (min-width:1540px) {
    .col-xlg-1-5 {
        width: 20%
    }

    .col-xlg-2-5 {
        width: 40%
    }

    .col-xlg-3-5 {
        width: 60%
    }

    .col-xlg-4-5 {
        width: 80%
    }

    .col-xlg-5-5 {
        width: 100%
    }
}

.row.gridGap--noGap {
    margin-left: 0;
    margin-right: 0
}

.row.gridGap--noGap>* {
    padding-left: 0;
    padding-right: 0
}

.row.gridGap--noGap>.marginBottom {
    margin-bottom: 0
}

.row.gridGap--small {
    margin-left: -5px;
    margin-right: -5px
}

.row.gridGap--small>* {
    padding-left: 5px;
    padding-right: 5px
}

.row.gridGap--small>.marginBottom {
    margin-bottom: 10px
}

@media (min-width:1620px) {
    .row.gridGap--large {
        margin-left: -40px;
        margin-right: -40px
    }

    .row.gridGap--large>* {
        padding-left: 40px;
        padding-right: 40px
    }

    .row.gridGap--large>.marginBottom {
        margin-bottom: 80px
    }
}

@media (max-width:1619px) {
    .row.gridGap--large {
        margin-left: -20px;
        margin-right: -20px
    }

    .row.gridGap--large>* {
        padding-left: 20px;
        padding-right: 20px
    }

    .row.gridGap--large>.marginBottom {
        margin-bottom: 40px
    }
}

@media (min-width:1620px) {
    .row.gridGap--xlarge {
        margin-left: -80px;
        margin-right: -80px
    }

    .row.gridGap--xlarge>* {
        padding-left: 80px;
        padding-right: 80px
    }

    .row.gridGap--xlarge>.marginBottom {
        margin-bottom: 80px
    }
}

@media (max-width:1619px) {
    .row.gridGap--xlarge {
        margin-left: -20px;
        margin-right: -20px
    }

    .row.gridGap--xlarge>* {
        padding-left: 40px;
        padding-right: 40px
    }

    .row.gridGap--xlarge>.marginBottom {
        margin-bottom: 40px
    }
}

@media (min-width:1010px) {
    .container--small>.row.gridGap--large {
        margin-left: -40px;
        margin-right: -40px
    }

    .container--small>.row.gridGap--large>* {
        padding-left: 40px;
        padding-right: 40px
    }

    .container--small>.row.gridGap--large>.marginBottom {
        margin-bottom: 80px
    }
}

@media (min-width:880px) {
    .container--xsmall>.row.gridGap--large {
        margin-left: -40px;
        margin-right: -40px
    }

    .container--xsmall>.row.gridGap--large>* {
        padding-left: 40px;
        padding-right: 40px
    }

    .container--xsmall>.row.gridGap--large>.marginBottom {
        margin-bottom: 80px
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .row.scrollSnapTablet {
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        margin-left: -5px;
        margin-right: -20px
    }

    .row.scrollSnapTablet>* {
        scroll-snap-align: center;
        flex-shrink: 0;
        padding-left: 8px;
        padding-right: 8px;
        width: calc(100% - 80px / 2);
        width: -moz-calc(100% - 80px / 2);
        width: -webkit-calc(100% - 80px / 2);
        width: -o-calc(100% - 80px / 2)
    }

    .row.scrollSnapTablet>.col-sm-6 {
        width: calc(50% - 80px / 2);
        width: -moz-calc(50% - 80px / 2);
        width: -webkit-calc(50% - 80px / 2);
        width: -o-calc(50% - 80px / 2)
    }

    .row.scrollSnapTablet>.col-sm-4 {
        width: calc(33% - 80px / 2);
        width: -moz-calc(33% - 80px / 2);
        width: -webkit-calc(33% - 80px / 2);
        width: -o-calc(33% - 80px / 2)
    }

    .row.scrollSnapTablet>.col-sm-8 {
        width: calc(67% - 80px / 2);
        width: -moz-calc(67% - 80px / 2);
        width: -webkit-calc(67% - 80px / 2);
        width: -o-calc(67% - 80px / 2)
    }

    .row.scrollSnapTablet.pl--large,
    .row.scrollSnapTablet.pl--middle,
    .row.scrollSnapTablet.pr--large,
    .row.scrollSnapTablet.pr--middle {
        padding-left: 10px;
        padding-right: 10px
    }
}

@media (max-width:767px) {
    .row.scrollSnapMobile {
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        margin-left: -5px;
        margin-right: -20px
    }

    .row.scrollSnapMobile>* {
        scroll-snap-align: center;
        flex-shrink: 0;
        padding-left: 8px;
        padding-right: 8px;
        width: calc(100% - 80px / 2);
        width: -moz-calc(100% - 80px / 2);
        width: -webkit-calc(100% - 80px / 2);
        width: -o-calc(100% - 80px / 2)
    }

    .row.scrollSnapMobile>.col-6 {
        width: calc(50% - 80px / 2);
        width: -moz-calc(50% - 80px / 2);
        width: -webkit-calc(50% - 80px / 2);
        width: -o-calc(50% - 80px / 2)
    }

    .row.scrollSnapMobile>.col-4 {
        width: calc(33% - 80px / 2);
        width: -moz-calc(33% - 80px / 2);
        width: -webkit-calc(33% - 80px / 2);
        width: -o-calc(33% - 80px / 2)
    }

    .row.scrollSnapMobile>.col-8 {
        width: calc(67% - 80px / 2);
        width: -moz-calc(67% - 80px / 2);
        width: -webkit-calc(67% - 80px / 2);
        width: -o-calc(67% - 80px / 2)
    }

    .row.scrollSnapMobile.pl--large,
    .row.scrollSnapMobile.pl--middle,
    .row.scrollSnapMobile.pr--large,
    .row.scrollSnapMobile.pr--middle {
        padding-left: 10px;
        padding-right: 10px
    }
}

@media (min-width:768px) {
    .order-sm-1 {
        order: 1
    }
}

@media (min-width:1024px) {
    .order-md-1 {
        order: 1
    }
}

@media (min-width:1250px) {
    .order-lg-1 {
        order: 1
    }
}

.align-items-start {
    align-items: flex-start
}

.align-items-end {
    align-items: flex-end
}

.align-items-center {
    align-items: center
}

.align-items-baseline {
    align-items: baseline
}

.align-items-stretch {
    align-items: stretch
}

.align-self-start {
    align-self: flex-start
}

.align-self-end {
    align-self: flex-end
}

.align-self-center {
    align-self: center
}

.align-self-baseline {
    align-self: baseline
}

.align-self-stretch {
    align-self: stretch
}

.justify-content-start {
    justify-content: flex-start;
    display: flex
}

.justify-content-end {
    justify-content: flex-end;
    display: flex
}

.justify-content-center {
    justify-content: center;
    display: flex
}

.justify-content-between {
    justify-content: space-between;
    display: flex
}

.justify-content-around {
    justify-content: around;
    display: flex
}

@media (max-width:767.98px) {
    .align-items-xs-start {
        align-items: flex-start
    }

    .align-items-xs-end {
        align-items: flex-end
    }

    .align-items-xs-center {
        align-items: center
    }

    .align-items-xs-baseline {
        align-items: baseline
    }

    .align-items-xs-stretch {
        align-items: stretch
    }

    .align-self-xs-start {
        align-self: flex-start
    }

    .align-self-xs-end {
        align-self: flex-end
    }

    .align-self-xs-center {
        align-self: center
    }

    .align-self-xs-baseline {
        align-self: baseline
    }

    .align-self-xs-stretch {
        align-self: stretch
    }

    .justify-content-xs-start {
        justify-content: flex-start
    }

    .justify-content-xs-end {
        justify-content: flex-end
    }

    .justify-content-xs-center {
        justify-content: center
    }

    .justify-content-xs-between {
        justify-content: space-between
    }

    .justify-content-xs-around {
        justify-content: around
    }
}

@media (min-width:768px) and (max-width:1023.98px) {
    .align-items-sm-start {
        align-items: flex-start
    }

    .align-items-sm-end {
        align-items: flex-end
    }

    .align-items-sm-center {
        align-items: center
    }

    .align-items-sm-baseline {
        align-items: baseline
    }

    .align-items-sm-stretch {
        align-items: stretch
    }

    .align-self-sm-start {
        align-self: flex-start
    }

    .align-self-sm-end {
        align-self: flex-end
    }

    .align-self-sm-center {
        align-self: center
    }

    .align-self-sm-baseline {
        align-self: baseline
    }

    .align-self-sm-stretch {
        align-self: stretch
    }

    .justify-content-sm-start {
        justify-content: flex-start
    }

    .justify-content-sm-end {
        justify-content: flex-end
    }

    .justify-content-sm-center {
        justify-content: center
    }

    .justify-content-sm-between {
        justify-content: space-between
    }

    .justify-content-sm-around {
        justify-content: around
    }
}

@media (min-width:1024px) and (max-width:1249.98px) {
    .align-items-md-start {
        align-items: flex-start
    }

    .align-items-md-end {
        align-items: flex-end
    }

    .align-items-md-center {
        align-items: center
    }

    .align-items-md-baseline {
        align-items: baseline
    }

    .align-items-md-stretch {
        align-items: stretch
    }

    .align-self-md-start {
        align-self: flex-start
    }

    .align-self-md-end {
        align-self: flex-end
    }

    .align-self-md-center {
        align-self: center
    }

    .align-self-md-baseline {
        align-self: baseline
    }

    .align-self-md-stretch {
        align-self: stretch
    }

    .justify-content-md-start {
        justify-content: flex-start
    }

    .justify-content-md-end {
        justify-content: flex-end
    }

    .justify-content-md-center {
        justify-content: center
    }

    .justify-content-md-between {
        justify-content: space-between
    }

    .justify-content-md-around {
        justify-content: around
    }
}

@media (min-width:1250px) and (max-width:1539.98px) {
    .align-items-lg-start {
        align-items: flex-start
    }

    .align-items-lg-end {
        align-items: flex-end
    }

    .align-items-lg-center {
        align-items: center
    }

    .align-items-lg-baseline {
        align-items: baseline
    }

    .align-items-lg-stretch {
        align-items: stretch
    }

    .align-self-lg-start {
        align-self: flex-start
    }

    .align-self-lg-end {
        align-self: flex-end
    }

    .align-self-lg-center {
        align-self: center
    }

    .align-self-lg-baseline {
        align-self: baseline
    }

    .align-self-lg-stretch {
        align-self: stretch
    }

    .justify-content-lg-start {
        justify-content: flex-start
    }

    .justify-content-lg-end {
        justify-content: flex-end
    }

    .justify-content-lg-center {
        justify-content: center
    }

    .justify-content-lg-between {
        justify-content: space-between
    }

    .justify-content-lg-around {
        justify-content: around
    }
}

@media (min-width:1540px) {
    .align-items-xlg-start {
        align-items: flex-start
    }

    .align-items-xlg-end {
        align-items: flex-end
    }

    .align-items-xlg-center {
        align-items: center
    }

    .align-items-xlg-baseline {
        align-items: baseline
    }

    .align-items-xlg-stretch {
        align-items: stretch
    }

    .align-self-xlg-start {
        align-self: flex-start
    }

    .align-self-xlg-end {
        align-self: flex-end
    }

    .align-self-xlg-center {
        align-self: center
    }

    .align-self-xlg-baseline {
        align-self: baseline
    }

    .align-self-xlg-stretch {
        align-self: stretch
    }

    .justify-content-xlg-start {
        justify-content: flex-start
    }

    .justify-content-xlg-end {
        justify-content: flex-end
    }

    .justify-content-xlg-center {
        justify-content: center
    }

    .justify-content-xlg-between {
        justify-content: space-between
    }

    .justify-content-xlg-around {
        justify-content: around
    }
}

.row--flexsub>:not(script):not(style) {
    display: flex
}

.fullwidth {
    width: 100%
}

#container {
    background-color: var(--main-color-white);
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

#container .footer,
#container .header {
    flex-shrink: 0
}

#container .mainContent {
    flex-grow: 1
}

.row.align-items-stretch>div>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    align-items: flex-start
}

.row.align-items-stretch>div>div>.textcontent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%
}

.row.align-items-stretch>div>div>.textcontent>div {
    flex-grow: 1
}

@media (max-width:767px) {
    .hidden-xs {
        display: none
    }
}

.bg-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

.flatpickr-calendar {
    background: 0 0;
    opacity: 0;
    display: none;
    text-align: center;
    visibility: hidden;
    padding: 0;
    -webkit-animation: none;
    animation: none;
    direction: ltr;
    border: 0;
    font-size: 14px;
    line-height: 24px;
    border-radius: 5px;
    position: absolute;
    width: 307.875px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background: #fff;
    -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, .08);
    box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, .08)
}

.flatpickr-calendar.inline,
.flatpickr-calendar.open {
    opacity: 1;
    max-height: 640px;
    visibility: visible
}

.flatpickr-calendar.open {
    display: inline-block;
    z-index: 99999
}

.flatpickr-calendar.animate.open {
    -webkit-animation: fpFadeInDown .3s cubic-bezier(.23, 1, .32, 1);
    animation: fpFadeInDown .3s cubic-bezier(.23, 1, .32, 1)
}

.flatpickr-calendar.inline {
    display: block;
    position: relative;
    top: 2px
}

.flatpickr-calendar.static {
    position: absolute;
    top: calc(100% + 2px)
}

.flatpickr-calendar.static.open {
    z-index: 999;
    display: block
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
    -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
    box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6
}

.flatpickr-calendar .hasTime .dayContainer,
.flatpickr-calendar .hasWeeks .dayContainer {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.flatpickr-calendar .hasWeeks .dayContainer {
    border-left: 0
}

.flatpickr-calendar.hasTime .flatpickr-time {
    height: 40px;
    border-top: 1px solid #e6e6e6
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    height: auto
}

.flatpickr-calendar:after,
.flatpickr-calendar:before {
    position: absolute;
    display: block;
    pointer-events: none;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    left: 22px
}

.flatpickr-calendar.arrowRight:after,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.rightMost:before {
    left: auto;
    right: 22px
}

.flatpickr-calendar.arrowCenter:after,
.flatpickr-calendar.arrowCenter:before {
    left: 50%;
    right: 50%
}

.flatpickr-calendar:before {
    border-width: 5px;
    margin: 0 -5px
}

.flatpickr-calendar:after {
    border-width: 4px;
    margin: 0 -4px
}

.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowTop:before {
    bottom: 100%
}

.flatpickr-calendar.arrowTop:before {
    border-bottom-color: #e6e6e6
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #fff
}

.flatpickr-calendar.arrowBottom:after,
.flatpickr-calendar.arrowBottom:before {
    top: 100%
}

.flatpickr-calendar.arrowBottom:before {
    border-top-color: #e6e6e6
}

.flatpickr-calendar.arrowBottom:after {
    border-top-color: #fff
}

.flatpickr-calendar:focus {
    outline: 0
}

.flatpickr-wrapper {
    position: relative;
    display: inline-block
}

.flatpickr-months {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flatpickr-months .flatpickr-month {
    background: 0 0;
    color: rgba(0, 0, 0, .9);
    fill: rgba(0, 0, 0, 0.9);
    height: 34px;
    line-height: 1;
    text-align: center;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.flatpickr-months .flatpickr-next-month,
.flatpickr-months .flatpickr-prev-month {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    height: 34px;
    padding: 10px;
    z-index: 3;
    color: rgba(0, 0, 0, .9);
    fill: rgba(0, 0, 0, 0.9)
}

.flatpickr-months .flatpickr-next-month.flatpickr-disabled,
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled {
    display: none
}

.flatpickr-months .flatpickr-next-month i,
.flatpickr-months .flatpickr-prev-month i {
    position: relative
}

.flatpickr-months .flatpickr-next-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
    left: 0
}

.flatpickr-months .flatpickr-next-month.flatpickr-next-month,
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month {
    right: 0
}

.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:hover {
    color: #959ea9
}

.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months .flatpickr-prev-month:hover svg {
    fill: #f64747
}

.flatpickr-months .flatpickr-next-month svg,
.flatpickr-months .flatpickr-prev-month svg {
    width: 14px;
    height: 14px
}

.flatpickr-months .flatpickr-next-month svg path,
.flatpickr-months .flatpickr-prev-month svg path {
    -webkit-transition: fill .1s;
    transition: fill .1s;
    fill: inherit
}

.numInputWrapper {
    position: relative;
    height: auto
}

.numInputWrapper input,
.numInputWrapper span {
    display: inline-block
}

.numInputWrapper input {
    width: 100%
}

.numInputWrapper input::-ms-clear {
    display: none
}

.numInputWrapper input::-webkit-inner-spin-button,
.numInputWrapper input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none
}

.numInputWrapper span {
    position: absolute;
    right: 0;
    width: 14px;
    padding: 0 4px 0 2px;
    height: 50%;
    line-height: 50%;
    opacity: 0;
    cursor: pointer;
    border: 1px solid rgba(57, 57, 57, .15);
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.numInputWrapper span:hover {
    background: rgba(0, 0, 0, .1)
}

.numInputWrapper span:active {
    background: rgba(0, 0, 0, .2)
}

.numInputWrapper span:after {
    display: block;
    content: "";
    position: absolute
}

.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, .6);
    top: 26%
}

.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, .6);
    top: 40%
}

.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, .05)
}

.numInputWrapper:hover span {
    opacity: 1
}

.flatpickr-current-month {
    font-size: 135%;
    line-height: inherit;
    font-weight: 300;
    color: inherit;
    position: absolute;
    width: 75%;
    left: 12.5%;
    padding: 7.48px 0 0 0;
    line-height: 1;
    height: 34px;
    display: inline-block;
    text-align: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.flatpickr-current-month span.cur-month {
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    display: inline-block;
    margin-left: .5ch;
    padding: 0
}

.flatpickr-current-month span.cur-month:hover {
    background: rgba(0, 0, 0, .05)
}

.flatpickr-current-month .numInputWrapper {
    width: 6ch;
    display: inline-block
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: rgba(0, 0, 0, .9)
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: rgba(0, 0, 0, .9)
}

.flatpickr-current-month input.cur-year {
    background: 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    cursor: text;
    padding: 0 0 0 .5ch;
    margin: 0;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    line-height: inherit;
    height: auto;
    border: 0;
    border-radius: 0;
    vertical-align: initial;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.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, .5);
    background: 0 0;
    pointer-events: none
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: menulist;
    background: 0 0;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    height: auto;
    line-height: inherit;
    margin: -1px 0 0 0;
    outline: 0;
    padding: 0 0 0 .5ch;
    position: relative;
    vertical-align: initial;
    -webkit-box-sizing: border-box;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    width: auto
}

.flatpickr-current-month .flatpickr-monthDropdown-months:active,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
    outline: 0
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(0, 0, 0, .05)
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: transparent;
    outline: 0;
    padding: 0
}

.flatpickr-weekdays {
    background: 0 0;
    text-align: center;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 28px
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

span.flatpickr-weekday {
    cursor: default;
    font-size: 90%;
    background: 0 0;
    color: rgba(0, 0, 0, .54);
    line-height: 1;
    margin: 0;
    text-align: center;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight: bolder
}

.dayContainer,
.flatpickr-weeks {
    padding: 1px 0 0 0
}

.flatpickr-days {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 307.875px
}

.flatpickr-days:focus {
    outline: 0
}

.dayContainer {
    padding: 0;
    outline: 0;
    text-align: left;
    width: 307.875px;
    min-width: 307.875px;
    max-width: 307.875px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
}

.dayContainer+.dayContainer {
    -webkit-box-shadow: -1px 0 0 #e6e6e6;
    box-shadow: -1px 0 0 #e6e6e6
}

.flatpickr-day {
    background: 0 0;
    border: 1px solid transparent;
    border-radius: 150px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #393939;
    cursor: pointer;
    font-weight: 400;
    width: 14.2857143%;
    -webkit-flex-basis: 14.2857143%;
    -ms-flex-preferred-size: 14.2857143%;
    flex-basis: 14.2857143%;
    max-width: 39px;
    height: 39px;
    line-height: 39px;
    margin: 0;
    display: inline-block;
    position: relative;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.flatpickr-day.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day.nextMonthDay:focus,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.today.inRange,
.flatpickr-day:focus,
.flatpickr-day:hover {
    cursor: pointer;
    outline: 0;
    background: #e6e6e6;
    border-color: #e6e6e6
}

.flatpickr-day.today {
    border-color: #959ea9
}

.flatpickr-day.today:focus,
.flatpickr-day.today:hover {
    border-color: #959ea9;
    background: #959ea9;
    color: #fff
}

.flatpickr-day.endRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.endRange:focus,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.startRange:focus,
.flatpickr-day.startRange:hover {
    background: #569ff7;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #569ff7
}

.flatpickr-day.endRange.startRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange {
    border-radius: 50px 0 0 50px
}

.flatpickr-day.endRange.endRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange {
    border-radius: 0 50px 50px 0
}

.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -10px 0 0 #569ff7;
    box-shadow: -10px 0 0 #569ff7
}

.flatpickr-day.endRange.startRange.endRange,
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange {
    border-radius: 50px
}

.flatpickr-day.inRange {
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
    box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.nextMonthDay,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.prevMonthDay {
    color: rgba(57, 57, 57, .3);
    background: 0 0;
    border-color: transparent;
    cursor: default
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    cursor: not-allowed;
    color: rgba(57, 57, 57, .1)
}

.flatpickr-day.week.selected {
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
    box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7
}

.flatpickr-day.hidden {
    visibility: hidden
}

.rangeMode .flatpickr-day {
    margin-top: 1px
}

.flatpickr-weekwrapper {
    float: left
}

.flatpickr-weekwrapper .flatpickr-weeks {
    padding: 0 12px;
    -webkit-box-shadow: 1px 0 0 #e6e6e6;
    box-shadow: 1px 0 0 #e6e6e6
}

.flatpickr-weekwrapper .flatpickr-weekday {
    float: none;
    width: 100%;
    line-height: 28px
}

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
    display: block;
    width: 100%;
    max-width: none;
    color: rgba(57, 57, 57, .3);
    background: 0 0;
    cursor: default;
    border: none
}

.flatpickr-innerContainer {
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.flatpickr-rContainer {
    display: inline-block;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.flatpickr-time {
    text-align: center;
    outline: 0;
    display: block;
    height: 0;
    line-height: 40px;
    max-height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flatpickr-time:after {
    content: "";
    display: table;
    clear: both
}

.flatpickr-time .numInputWrapper {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 40%;
    height: 40px;
    float: left
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: #393939
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: #393939
}

.flatpickr-time.hasSeconds .numInputWrapper {
    width: 26%
}

.flatpickr-time.time24hr .numInputWrapper {
    width: 49%
}

.flatpickr-time input {
    background: 0 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    text-align: center;
    margin: 0;
    padding: 0;
    height: inherit;
    line-height: inherit;
    color: #393939;
    font-size: 14px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.flatpickr-time input.flatpickr-hour {
    font-weight: 700
}

.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
    font-weight: 400
}

.flatpickr-time input:focus {
    outline: 0;
    border: 0
}

.flatpickr-time .flatpickr-am-pm,
.flatpickr-time .flatpickr-time-separator {
    height: inherit;
    float: left;
    line-height: inherit;
    color: #393939;
    font-weight: 700;
    width: 2%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center
}

.flatpickr-time .flatpickr-am-pm {
    outline: 0;
    width: 18%;
    cursor: pointer;
    text-align: center;
    font-weight: 400
}

.flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time input:hover {
    background: #eee
}

.flatpickr-input[readonly] {
    cursor: pointer
}

@-webkit-keyframes fpFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fpFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.flatpickr-calendar {
    border-radius: 0
}

.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months .flatpickr-prev-month:hover svg {
    fill: var(--main-color-primary)
}

.flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 400
}

.flatpickr-current-month .numInputWrapper input {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px
}

.flatpickr-current-month .numInputWrapper .arrowDown,
.flatpickr-current-month .numInputWrapper .arrowUp {
    display: none
}

.flatpickr-day {
    line-height: 37px;
    color: var(--main-color-black);
    font-weight: 400;
    border-radius: 0 !important
}

.flatpickr-day:focus,
.flatpickr-day:hover {
    background-color: var(--main-color-light-gray);
    border-color: var(--main-color-light-gray)
}

.flatpickr-day.today {
    border-color: var(--main-color-dark-gray)
}

.flatpickr-day.today.hover,
.flatpickr-day.today:focus {
    border-color: var(--main-color-primary);
    background-color: var(--main-color-primary)
}

.flatpickr-day.flatpickr-disabled {
    color: var(--main-color-light-gray)
}

.flatpickr-day.flatpickr-disabled:hover {
    color: var(--main-color-light-gray)
}

.flatpickr-day.inRange {
    background: var(--main-color-light-gray);
    border-color: var(--main-color-light-gray);
    box-shadow: -5px 0 0 var(--main-color-light-gray), 5px 0 0 var(--main-color-light-gray)
}

.flatpickr-day.endRange,
.flatpickr-day.selected,
.flatpickr-day.startRange {
    background-color: var(--main-color-black);
    color: var(--main-color-white);
    border-color: var(--main-color-black)
}

.flatpickr-day.endRange.inRange,
.flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.inRange,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.inRange,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.startRange.prevMonthDay {
    background-color: var(--main-color-black);
    color: var(--main-color-white);
    border-color: var(--main-color-black)
}

.flatpickr-day.endRange:hover,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover {
    background-color: var(--main-color-gray-base);
    color: var(--main-color-white);
    border-color: var(--main-color-gray-base)
}

.flatpickr-day.endRange:focus,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus {
    background-color: var(--main-color-black);
    color: var(--main-color-white);
    border-color: var(--main-color-black)
}

.flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time input:hover {
    background-color: var(--main-color-light-gray)
}

.js-dateRangeInline {
    display: none !important
}

.filterDropdown .flatpickr-calendar {
    width: 100%;
    border: 0;
    box-shadow: none
}

.googlemaps_content {
    max-width: 100%
}

.googlemaps_content img {
    max-width: none !important
}

.custom-clustericon {
    border-radius: 50%;
    background: var(--main-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color-white)
}

.custom-clustericon:before {
    content: "";
    display: block;
    width: 80%;
    height: 80%;
    background: var(--main-color-primary-dark);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.grecaptcha-badge {
    visibility: hidden !important
}

@font-face {
    font-family: swiper-icons;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0, 0, 0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper::before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - var(--swiper-navigation-size)/ 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform, .2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform, .2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active {
    pointer-events: auto
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: "";
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-cube .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

.swiper-button-next:after,
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    display: none
}

.swiper-slide {
    height: auto
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--main-color-dark-gray);
    cursor: pointer;
    font-size: 16px;
    width: 32px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.swiper-button-next .icon,
.swiper-button-prev .icon {
    display: block;
    line-height: 1
}

.swiper-button-next:active,
.swiper-button-next:focus,
.swiper-button-next:hover,
.swiper-button-prev:active,
.swiper-button-prev:focus,
.swiper-button-prev:hover {
    color: var(--main-link-color-hover)
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--main-color-black)
}

@media (min-width:768px) {
    .swiper-pagination-bullet {
        width: 16px;
        height: 16px
    }
}

.swiper-pagination-bullet-active {
    background: var(--main-color-black)
}

.swiper-pagination {
    position: static;
    transform: none
}

.swiper-pagination.swiper-pagination-horizontal {
    margin-top: 20px;
    top: auto;
    bottom: 0
}

.swiper-pagination.swiper-pagination-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.swiper-pagination.swiper-pagination-vertical .swiper-pagination-bullet {
    margin: 0
}

.swiper-wrapper {
    height: auto
}

.swiper-scrollbar {
    display: none
}

.scrollbar .swiper-wrapper {
    transition-timing-function: linear !important
}

.lottieContainer {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1
}

.iti {
    position: relative;
    display: inline-block
}

.iti * {
    box-sizing: border-box
}

.iti__hide {
    display: none
}

.iti__v-hide {
    visibility: hidden
}

.iti input.iti__tel-input,
.iti input.iti__tel-input[type=tel],
.iti input.iti__tel-input[type=text] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 36px;
    margin-right: 0
}

.iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 1px
}

.iti__selected-flag {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 6px 0 8px
}

.iti__arrow {
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #555
}

[dir=rtl] .iti__arrow {
    margin-right: 6px;
    margin-left: 0
}

.iti__arrow--up {
    border-top: none;
    border-bottom: 4px solid #555
}

.iti__dropdown-content {
    position: absolute;
    z-index: 2;
    margin-left: -1px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.iti__dropdown-content--dropup {
    bottom: 100%;
    margin-bottom: -1px
}

.iti__search-input {
    width: 100%;
    border-width: 0
}

.iti__country-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.iti--flexible-dropdown-width .iti__country-list {
    white-space: nowrap
}

@media (max-width:500px) {
    .iti--flexible-dropdown-width .iti__country-list {
        white-space: normal
    }
}

.iti__flag-box {
    display: inline-block;
    width: 20px
}

.iti__divider {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ccc
}

.iti__country {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    outline: 0
}

.iti__dial-code {
    color: #999
}

.iti__country.iti__highlight {
    background-color: rgba(0, 0, 0, .05)
}

.iti__country-name,
.iti__flag-box {
    margin-right: 6px
}

[dir=rtl] .iti__country-name,
[dir=rtl] .iti__flag-box {
    margin-right: 0;
    margin-left: 6px
}

.iti--allow-dropdown input.iti__tel-input,
.iti--allow-dropdown input.iti__tel-input[type=tel],
.iti--allow-dropdown input.iti__tel-input[type=text],
.iti--separate-dial-code input.iti__tel-input,
.iti--separate-dial-code input.iti__tel-input[type=tel],
.iti--separate-dial-code input.iti__tel-input[type=text] {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 0
}

[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel],
[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
[dir=rtl] .iti--separate-dial-code input.iti__tel-input,
[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel],
[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text] {
    padding-right: 52px;
    padding-left: 6px;
    margin-right: 0
}

.iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
    right: auto;
    left: 0
}

[dir=rtl] .iti--allow-dropdown .iti__flag-container,
[dir=rtl] .iti--separate-dial-code .iti__flag-container {
    right: 0;
    left: auto
}

.iti--allow-dropdown .iti__flag-container:hover {
    cursor: pointer
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: rgba(0, 0, 0, .05)
}

.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
    cursor: default
}

.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
    background-color: transparent
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: rgba(0, 0, 0, .05)
}

.iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
    margin-left: 6px
}

[dir=rtl] .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
    margin-left: 0;
    margin-right: 6px
}

.iti--container {
    position: absolute;
    top: -1000px;
    left: -1000px;
    z-index: 1060;
    padding: 1px
}

.iti--container:hover {
    cursor: pointer
}

.iti--fullscreen-popup.iti--container {
    background-color: rgba(0, 0, 0, .5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.iti--fullscreen-popup .iti__dropdown-content {
    max-height: 100%;
    position: relative
}

.iti--fullscreen-popup .iti__country {
    padding: 10px 10px;
    line-height: 1.5em
}

.iti__flag {
    width: 20px
}

.iti__flag.iti__be {
    width: 18px
}

.iti__flag.iti__ch {
    width: 15px
}

.iti__flag.iti__mc {
    width: 19px
}

.iti__flag.iti__ne {
    width: 18px
}

.iti__flag.iti__np {
    width: 13px
}

.iti__flag.iti__va {
    width: 15px
}

@media (min-resolution:2x) {
    .iti__flag {
        background-size: 5762px 15px
    }
}

.iti__flag.iti__ac {
    height: 10px;
    background-position: 0 0
}

.iti__flag.iti__ad {
    height: 14px;
    background-position: -22px 0
}

.iti__flag.iti__ae {
    height: 10px;
    background-position: -44px 0
}

.iti__flag.iti__af {
    height: 14px;
    background-position: -66px 0
}

.iti__flag.iti__ag {
    height: 14px;
    background-position: -88px 0
}

.iti__flag.iti__ai {
    height: 10px;
    background-position: -110px 0
}

.iti__flag.iti__al {
    height: 15px;
    background-position: -132px 0
}

.iti__flag.iti__am {
    height: 10px;
    background-position: -154px 0
}

.iti__flag.iti__ao {
    height: 14px;
    background-position: -176px 0
}

.iti__flag.iti__aq {
    height: 14px;
    background-position: -198px 0
}

.iti__flag.iti__ar {
    height: 13px;
    background-position: -220px 0
}

.iti__flag.iti__as {
    height: 10px;
    background-position: -242px 0
}

.iti__flag.iti__at {
    height: 14px;
    background-position: -264px 0
}

.iti__flag.iti__au {
    height: 10px;
    background-position: -286px 0
}

.iti__flag.iti__aw {
    height: 14px;
    background-position: -308px 0
}

.iti__flag.iti__ax {
    height: 13px;
    background-position: -330px 0
}

.iti__flag.iti__az {
    height: 10px;
    background-position: -352px 0
}

.iti__flag.iti__ba {
    height: 10px;
    background-position: -374px 0
}

.iti__flag.iti__bb {
    height: 14px;
    background-position: -396px 0
}

.iti__flag.iti__bd {
    height: 12px;
    background-position: -418px 0
}

.iti__flag.iti__be {
    height: 15px;
    background-position: -440px 0
}

.iti__flag.iti__bf {
    height: 14px;
    background-position: -460px 0
}

.iti__flag.iti__bg {
    height: 12px;
    background-position: -482px 0
}

.iti__flag.iti__bh {
    height: 12px;
    background-position: -504px 0
}

.iti__flag.iti__bi {
    height: 12px;
    background-position: -526px 0
}

.iti__flag.iti__bj {
    height: 14px;
    background-position: -548px 0
}

.iti__flag.iti__bl {
    height: 14px;
    background-position: -570px 0
}

.iti__flag.iti__bm {
    height: 10px;
    background-position: -592px 0
}

.iti__flag.iti__bn {
    height: 10px;
    background-position: -614px 0
}

.iti__flag.iti__bo {
    height: 14px;
    background-position: -636px 0
}

.iti__flag.iti__bq {
    height: 14px;
    background-position: -658px 0
}

.iti__flag.iti__br {
    height: 14px;
    background-position: -680px 0
}

.iti__flag.iti__bs {
    height: 10px;
    background-position: -702px 0
}

.iti__flag.iti__bt {
    height: 14px;
    background-position: -724px 0
}

.iti__flag.iti__bv {
    height: 15px;
    background-position: -746px 0
}

.iti__flag.iti__bw {
    height: 14px;
    background-position: -768px 0
}

.iti__flag.iti__by {
    height: 10px;
    background-position: -790px 0
}

.iti__flag.iti__bz {
    height: 12px;
    background-position: -812px 0
}

.iti__flag.iti__ca {
    height: 10px;
    background-position: -834px 0
}

.iti__flag.iti__cc {
    height: 10px;
    background-position: -856px 0
}

.iti__flag.iti__cd {
    height: 15px;
    background-position: -878px 0
}

.iti__flag.iti__cf {
    height: 14px;
    background-position: -900px 0
}

.iti__flag.iti__cg {
    height: 14px;
    background-position: -922px 0
}

.iti__flag.iti__ch {
    height: 15px;
    background-position: -944px 0
}

.iti__flag.iti__ci {
    height: 14px;
    background-position: -961px 0
}

.iti__flag.iti__ck {
    height: 10px;
    background-position: -983px 0
}

.iti__flag.iti__cl {
    height: 14px;
    background-position: -1005px 0
}

.iti__flag.iti__cm {
    height: 14px;
    background-position: -1027px 0
}

.iti__flag.iti__cn {
    height: 14px;
    background-position: -1049px 0
}

.iti__flag.iti__co {
    height: 14px;
    background-position: -1071px 0
}

.iti__flag.iti__cp {
    height: 14px;
    background-position: -1093px 0
}

.iti__flag.iti__cq {
    height: 12px;
    background-position: -1115px 0
}

.iti__flag.iti__cr {
    height: 12px;
    background-position: -1137px 0
}

.iti__flag.iti__cu {
    height: 10px;
    background-position: -1159px 0
}

.iti__flag.iti__cv {
    height: 12px;
    background-position: -1181px 0
}

.iti__flag.iti__cw {
    height: 14px;
    background-position: -1203px 0
}

.iti__flag.iti__cx {
    height: 10px;
    background-position: -1225px 0
}

.iti__flag.iti__cy {
    height: 14px;
    background-position: -1247px 0
}

.iti__flag.iti__cz {
    height: 14px;
    background-position: -1269px 0
}

.iti__flag.iti__de {
    height: 12px;
    background-position: -1291px 0
}

.iti__flag.iti__dg {
    height: 10px;
    background-position: -1313px 0
}

.iti__flag.iti__dj {
    height: 14px;
    background-position: -1335px 0
}

.iti__flag.iti__dk {
    height: 15px;
    background-position: -1357px 0
}

.iti__flag.iti__dm {
    height: 10px;
    background-position: -1379px 0
}

.iti__flag.iti__do {
    height: 14px;
    background-position: -1401px 0
}

.iti__flag.iti__dz {
    height: 14px;
    background-position: -1423px 0
}

.iti__flag.iti__ea {
    height: 14px;
    background-position: -1445px 0
}

.iti__flag.iti__ec {
    height: 14px;
    background-position: -1467px 0
}

.iti__flag.iti__ee {
    height: 13px;
    background-position: -1489px 0
}

.iti__flag.iti__eg {
    height: 14px;
    background-position: -1511px 0
}

.iti__flag.iti__eh {
    height: 10px;
    background-position: -1533px 0
}

.iti__flag.iti__er {
    height: 10px;
    background-position: -1555px 0
}

.iti__flag.iti__es {
    height: 14px;
    background-position: -1577px 0
}

.iti__flag.iti__et {
    height: 10px;
    background-position: -1599px 0
}

.iti__flag.iti__eu {
    height: 14px;
    background-position: -1621px 0
}

.iti__flag.iti__ez {
    height: 14px;
    background-position: -1643px 0
}

.iti__flag.iti__fi {
    height: 12px;
    background-position: -1665px 0
}

.iti__flag.iti__fj {
    height: 10px;
    background-position: -1687px 0
}

.iti__flag.iti__fk {
    height: 10px;
    background-position: -1709px 0
}

.iti__flag.iti__fm {
    height: 11px;
    background-position: -1731px 0
}

.iti__flag.iti__fo {
    height: 15px;
    background-position: -1753px 0
}

.iti__flag.iti__fr {
    height: 14px;
    background-position: -1775px 0
}

.iti__flag.iti__fx {
    height: 14px;
    background-position: -1797px 0
}

.iti__flag.iti__ga {
    height: 15px;
    background-position: -1819px 0
}

.iti__flag.iti__gb {
    height: 10px;
    background-position: -1841px 0
}

.iti__flag.iti__gd {
    height: 12px;
    background-position: -1863px 0
}

.iti__flag.iti__ge {
    height: 14px;
    background-position: -1885px 0
}

.iti__flag.iti__gf {
    height: 14px;
    background-position: -1907px 0
}

.iti__flag.iti__gg {
    height: 14px;
    background-position: -1929px 0
}

.iti__flag.iti__gh {
    height: 14px;
    background-position: -1951px 0
}

.iti__flag.iti__gi {
    height: 10px;
    background-position: -1973px 0
}

.iti__flag.iti__gl {
    height: 14px;
    background-position: -1995px 0
}

.iti__flag.iti__gm {
    height: 14px;
    background-position: -2017px 0
}

.iti__flag.iti__gn {
    height: 14px;
    background-position: -2039px 0
}

.iti__flag.iti__gp {
    height: 14px;
    background-position: -2061px 0
}

.iti__flag.iti__gq {
    height: 14px;
    background-position: -2083px 0
}

.iti__flag.iti__gr {
    height: 14px;
    background-position: -2105px 0
}

.iti__flag.iti__gs {
    height: 10px;
    background-position: -2127px 0
}

.iti__flag.iti__gt {
    height: 13px;
    background-position: -2149px 0
}

.iti__flag.iti__gu {
    height: 11px;
    background-position: -2171px 0
}

.iti__flag.iti__gw {
    height: 10px;
    background-position: -2193px 0
}

.iti__flag.iti__gy {
    height: 12px;
    background-position: -2215px 0
}

.iti__flag.iti__hk {
    height: 14px;
    background-position: -2237px 0
}

.iti__flag.iti__hm {
    height: 10px;
    background-position: -2259px 0
}

.iti__flag.iti__hn {
    height: 10px;
    background-position: -2281px 0
}

.iti__flag.iti__hr {
    height: 10px;
    background-position: -2303px 0
}

.iti__flag.iti__ht {
    height: 12px;
    background-position: -2325px 0
}

.iti__flag.iti__hu {
    height: 10px;
    background-position: -2347px 0
}

.iti__flag.iti__ic {
    height: 14px;
    background-position: -2369px 0
}

.iti__flag.iti__id {
    height: 14px;
    background-position: -2391px 0
}

.iti__flag.iti__ie {
    height: 10px;
    background-position: -2413px 0
}

.iti__flag.iti__il {
    height: 15px;
    background-position: -2435px 0
}

.iti__flag.iti__im {
    height: 10px;
    background-position: -2457px 0
}

.iti__flag.iti__in {
    height: 14px;
    background-position: -2479px 0
}

.iti__flag.iti__io {
    height: 10px;
    background-position: -2501px 0
}

.iti__flag.iti__iq {
    height: 14px;
    background-position: -2523px 0
}

.iti__flag.iti__ir {
    height: 12px;
    background-position: -2545px 0
}

.iti__flag.iti__is {
    height: 15px;
    background-position: -2567px 0
}

.iti__flag.iti__it {
    height: 14px;
    background-position: -2589px 0
}

.iti__flag.iti__je {
    height: 12px;
    background-position: -2611px 0
}

.iti__flag.iti__jm {
    height: 10px;
    background-position: -2633px 0
}

.iti__flag.iti__jo {
    height: 10px;
    background-position: -2655px 0
}

.iti__flag.iti__jp {
    height: 14px;
    background-position: -2677px 0
}

.iti__flag.iti__ke {
    height: 14px;
    background-position: -2699px 0
}

.iti__flag.iti__kg {
    height: 12px;
    background-position: -2721px 0
}

.iti__flag.iti__kh {
    height: 13px;
    background-position: -2743px 0
}

.iti__flag.iti__ki {
    height: 10px;
    background-position: -2765px 0
}

.iti__flag.iti__km {
    height: 12px;
    background-position: -2787px 0
}

.iti__flag.iti__kn {
    height: 14px;
    background-position: -2809px 0
}

.iti__flag.iti__kp {
    height: 10px;
    background-position: -2831px 0
}

.iti__flag.iti__kr {
    height: 14px;
    background-position: -2853px 0
}

.iti__flag.iti__kw {
    height: 10px;
    background-position: -2875px 0
}

.iti__flag.iti__ky {
    height: 10px;
    background-position: -2897px 0
}

.iti__flag.iti__kz {
    height: 10px;
    background-position: -2919px 0
}

.iti__flag.iti__la {
    height: 14px;
    background-position: -2941px 0
}

.iti__flag.iti__lb {
    height: 14px;
    background-position: -2963px 0
}

.iti__flag.iti__lc {
    height: 10px;
    background-position: -2985px 0
}

.iti__flag.iti__li {
    height: 12px;
    background-position: -3007px 0
}

.iti__flag.iti__lk {
    height: 10px;
    background-position: -3029px 0
}

.iti__flag.iti__lr {
    height: 11px;
    background-position: -3051px 0
}

.iti__flag.iti__ls {
    height: 14px;
    background-position: -3073px 0
}

.iti__flag.iti__lt {
    height: 12px;
    background-position: -3095px 0
}

.iti__flag.iti__lu {
    height: 12px;
    background-position: -3117px 0
}

.iti__flag.iti__lv {
    height: 10px;
    background-position: -3139px 0
}

.iti__flag.iti__ly {
    height: 10px;
    background-position: -3161px 0
}

.iti__flag.iti__ma {
    height: 14px;
    background-position: -3183px 0
}

.iti__flag.iti__mc {
    height: 15px;
    background-position: -3205px 0
}

.iti__flag.iti__md {
    height: 10px;
    background-position: -3226px 0
}

.iti__flag.iti__me {
    height: 10px;
    background-position: -3248px 0
}

.iti__flag.iti__mf {
    height: 14px;
    background-position: -3270px 0
}

.iti__flag.iti__mg {
    height: 14px;
    background-position: -3292px 0
}

.iti__flag.iti__mh {
    height: 11px;
    background-position: -3314px 0
}

.iti__flag.iti__mk {
    height: 10px;
    background-position: -3336px 0
}

.iti__flag.iti__ml {
    height: 14px;
    background-position: -3358px 0
}

.iti__flag.iti__mm {
    height: 14px;
    background-position: -3380px 0
}

.iti__flag.iti__mn {
    height: 10px;
    background-position: -3402px 0
}

.iti__flag.iti__mo {
    height: 14px;
    background-position: -3424px 0
}

.iti__flag.iti__mp {
    height: 10px;
    background-position: -3446px 0
}

.iti__flag.iti__mq {
    height: 14px;
    background-position: -3468px 0
}

.iti__flag.iti__mr {
    height: 14px;
    background-position: -3490px 0
}

.iti__flag.iti__ms {
    height: 10px;
    background-position: -3512px 0
}

.iti__flag.iti__mt {
    height: 14px;
    background-position: -3534px 0
}

.iti__flag.iti__mu {
    height: 14px;
    background-position: -3556px 0
}

.iti__flag.iti__mv {
    height: 14px;
    background-position: -3578px 0
}

.iti__flag.iti__mw {
    height: 14px;
    background-position: -3600px 0
}

.iti__flag.iti__mx {
    height: 12px;
    background-position: -3622px 0
}

.iti__flag.iti__my {
    height: 10px;
    background-position: -3644px 0
}

.iti__flag.iti__mz {
    height: 14px;
    background-position: -3666px 0
}

.iti__flag.iti__na {
    height: 14px;
    background-position: -3688px 0
}

.iti__flag.iti__nc {
    height: 10px;
    background-position: -3710px 0
}

.iti__flag.iti__ne {
    height: 15px;
    background-position: -3732px 0
}

.iti__flag.iti__nf {
    height: 10px;
    background-position: -3752px 0
}

.iti__flag.iti__ng {
    height: 10px;
    background-position: -3774px 0
}

.iti__flag.iti__ni {
    height: 12px;
    background-position: -3796px 0
}

.iti__flag.iti__nl {
    height: 14px;
    background-position: -3818px 0
}

.iti__flag.iti__no {
    height: 15px;
    background-position: -3840px 0
}

.iti__flag.iti__np {
    height: 15px;
    background-position: -3862px 0
}

.iti__flag.iti__nr {
    height: 10px;
    background-position: -3877px 0
}

.iti__flag.iti__nu {
    height: 10px;
    background-position: -3899px 0
}

.iti__flag.iti__nz {
    height: 10px;
    background-position: -3921px 0
}

.iti__flag.iti__om {
    height: 10px;
    background-position: -3943px 0
}

.iti__flag.iti__pa {
    height: 14px;
    background-position: -3965px 0
}

.iti__flag.iti__pe {
    height: 14px;
    background-position: -3987px 0
}

.iti__flag.iti__pf {
    height: 14px;
    background-position: -4009px 0
}

.iti__flag.iti__pg {
    height: 15px;
    background-position: -4031px 0
}

.iti__flag.iti__ph {
    height: 10px;
    background-position: -4053px 0
}

.iti__flag.iti__pk {
    height: 14px;
    background-position: -4075px 0
}

.iti__flag.iti__pl {
    height: 13px;
    background-position: -4097px 0
}

.iti__flag.iti__pm {
    height: 14px;
    background-position: -4119px 0
}

.iti__flag.iti__pn {
    height: 10px;
    background-position: -4141px 0
}

.iti__flag.iti__pr {
    height: 14px;
    background-position: -4163px 0
}

.iti__flag.iti__ps {
    height: 10px;
    background-position: -4185px 0
}

.iti__flag.iti__pt {
    height: 14px;
    background-position: -4207px 0
}

.iti__flag.iti__pw {
    height: 13px;
    background-position: -4229px 0
}

.iti__flag.iti__py {
    height: 11px;
    background-position: -4251px 0
}

.iti__flag.iti__qa {
    height: 8px;
    background-position: -4273px 0
}

.iti__flag.iti__re {
    height: 14px;
    background-position: -4295px 0
}

.iti__flag.iti__ro {
    height: 14px;
    background-position: -4317px 0
}

.iti__flag.iti__rs {
    height: 14px;
    background-position: -4339px 0
}

.iti__flag.iti__ru {
    height: 14px;
    background-position: -4361px 0
}

.iti__flag.iti__rw {
    height: 14px;
    background-position: -4383px 0
}

.iti__flag.iti__sa {
    height: 14px;
    background-position: -4405px 0
}

.iti__flag.iti__sb {
    height: 10px;
    background-position: -4427px 0
}

.iti__flag.iti__sc {
    height: 10px;
    background-position: -4449px 0
}

.iti__flag.iti__sd {
    height: 10px;
    background-position: -4471px 0
}

.iti__flag.iti__se {
    height: 13px;
    background-position: -4493px 0
}

.iti__flag.iti__sg {
    height: 14px;
    background-position: -4515px 0
}

.iti__flag.iti__sh {
    height: 10px;
    background-position: -4537px 0
}

.iti__flag.iti__si {
    height: 10px;
    background-position: -4559px 0
}

.iti__flag.iti__sj {
    height: 15px;
    background-position: -4581px 0
}

.iti__flag.iti__sk {
    height: 14px;
    background-position: -4603px 0
}

.iti__flag.iti__sl {
    height: 14px;
    background-position: -4625px 0
}

.iti__flag.iti__sm {
    height: 15px;
    background-position: -4647px 0
}

.iti__flag.iti__sn {
    height: 14px;
    background-position: -4669px 0
}

.iti__flag.iti__so {
    height: 14px;
    background-position: -4691px 0
}

.iti__flag.iti__sr {
    height: 14px;
    background-position: -4713px 0
}

.iti__flag.iti__ss {
    height: 10px;
    background-position: -4735px 0
}

.iti__flag.iti__st {
    height: 10px;
    background-position: -4757px 0
}

.iti__flag.iti__su {
    height: 10px;
    background-position: -4779px 0
}

.iti__flag.iti__sv {
    height: 12px;
    background-position: -4801px 0
}

.iti__flag.iti__sx {
    height: 14px;
    background-position: -4823px 0
}

.iti__flag.iti__sy {
    height: 14px;
    background-position: -4845px 0
}

.iti__flag.iti__sz {
    height: 14px;
    background-position: -4867px 0
}

.iti__flag.iti__ta {
    height: 10px;
    background-position: -4889px 0
}

.iti__flag.iti__tc {
    height: 10px;
    background-position: -4911px 0
}

.iti__flag.iti__td {
    height: 14px;
    background-position: -4933px 0
}

.iti__flag.iti__tf {
    height: 14px;
    background-position: -4955px 0
}

.iti__flag.iti__tg {
    height: 13px;
    background-position: -4977px 0
}

.iti__flag.iti__th {
    height: 14px;
    background-position: -4999px 0
}

.iti__flag.iti__tj {
    height: 10px;
    background-position: -5021px 0
}

.iti__flag.iti__tk {
    height: 10px;
    background-position: -5043px 0
}

.iti__flag.iti__tl {
    height: 10px;
    background-position: -5065px 0
}

.iti__flag.iti__tm {
    height: 14px;
    background-position: -5087px 0
}

.iti__flag.iti__tn {
    height: 14px;
    background-position: -5109px 0
}

.iti__flag.iti__to {
    height: 10px;
    background-position: -5131px 0
}

.iti__flag.iti__tr {
    height: 14px;
    background-position: -5153px 0
}

.iti__flag.iti__tt {
    height: 12px;
    background-position: -5175px 0
}

.iti__flag.iti__tv {
    height: 10px;
    background-position: -5197px 0
}

.iti__flag.iti__tw {
    height: 14px;
    background-position: -5219px 0
}

.iti__flag.iti__tz {
    height: 14px;
    background-position: -5241px 0
}

.iti__flag.iti__ua {
    height: 14px;
    background-position: -5263px 0
}

.iti__flag.iti__ug {
    height: 14px;
    background-position: -5285px 0
}

.iti__flag.iti__uk {
    height: 10px;
    background-position: -5307px 0
}

.iti__flag.iti__um {
    height: 11px;
    background-position: -5329px 0
}

.iti__flag.iti__un {
    height: 14px;
    background-position: -5351px 0
}

.iti__flag.iti__us {
    height: 11px;
    background-position: -5373px 0
}

.iti__flag.iti__uy {
    height: 14px;
    background-position: -5395px 0
}

.iti__flag.iti__uz {
    height: 10px;
    background-position: -5417px 0
}

.iti__flag.iti__va {
    height: 15px;
    background-position: -5439px 0
}

.iti__flag.iti__vc {
    height: 14px;
    background-position: -5456px 0
}

.iti__flag.iti__ve {
    height: 14px;
    background-position: -5478px 0
}

.iti__flag.iti__vg {
    height: 10px;
    background-position: -5500px 0
}

.iti__flag.iti__vi {
    height: 14px;
    background-position: -5522px 0
}

.iti__flag.iti__vn {
    height: 14px;
    background-position: -5544px 0
}

.iti__flag.iti__vu {
    height: 12px;
    background-position: -5566px 0
}

.iti__flag.iti__wf {
    height: 14px;
    background-position: -5588px 0
}

.iti__flag.iti__ws {
    height: 10px;
    background-position: -5610px 0
}

.iti__flag.iti__xk {
    height: 15px;
    background-position: -5632px 0
}

.iti__flag.iti__ye {
    height: 14px;
    background-position: -5654px 0
}

.iti__flag.iti__yt {
    height: 14px;
    background-position: -5676px 0
}

.iti__flag.iti__za {
    height: 14px;
    background-position: -5698px 0
}

.iti__flag.iti__zm {
    height: 14px;
    background-position: -5720px 0
}

.iti__flag.iti__zw {
    height: 10px;
    background-position: -5742px 0
}

.iti__flag {
    height: 15px;
    box-shadow: 0 0 1px 0 #888;
    background-image: url(../img/flags.png?1);
    background-repeat: no-repeat;
    background-color: #dbdbdb;
    background-position: 20px 0
}

@media (min-resolution:2x) {
    .iti__flag {
        background-image: url(../img/flags@2x.png?1)
    }
}

.iti__flag.iti__np {
    background-color: transparent
}

.iti {
    display: flex;
    width: 100%
}

.iti__flag {
    background-image: url("../images/flags.png")
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .iti__flag {
        background-image: url("../images/flags%402x.png")
    }
}

.iti--separate-dial-code .iti__selected-flag {
    background: 0 0
}

.inputGroup .iti__flag-container+input {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important
}

.inputGroup .iti__country-list {
    margin-top: 10px;
    padding-top: 10px;
    border-radius: 8px;
    border-color: var(--main-color-middle-gray);
    box-shadow: 0 0 40px rgba(0, 0, 0, .2)
}

.dealerSearchItems {
    width: 100%;
    overflow: hidden;
    overflow-y: auto
}

.dealerSearchItems::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

.dealerSearchItems::-webkit-scrollbar-button {
    width: 0;
    height: 0
}

.dealerSearchItems::-webkit-scrollbar-thumb {
    background: var(--main-color-gray-base);
    border: 0 none transparent;
    border-radius: 3px
}

.dealerSearchItems::-webkit-scrollbar-thumb:hover {
    background: var(--main-color-black)
}

.dealerSearchItems::-webkit-scrollbar-thumb:active {
    background: var(--main-color-black)
}

.dealerSearchItems::-webkit-scrollbar-track {
    background: var(--main-color-light-gray);
    border: 0 none transparent;
    border-radius: 0
}

.dealerSearchItems::-webkit-scrollbar-track:hover {
    background: var(--main-color-light-gray)
}

.dealerSearchItems::-webkit-scrollbar-track:active {
    background: var(--main-color-light-gray)
}

.dealerSearchItems::-webkit-scrollbar-corner {
    background: 0 0
}

.dealerSearchItem {
    border-bottom: 1px solid var(--main-color-light-gray);
    padding-bottom: 10px;
    padding-top: 10px;
    padding-right: 10px
}

@media (min-height:1050px) {
    .dealerSearchItem {
        padding-bottom: 30px;
        padding-top: 30px;
        padding-right: 20px
    }
}

@media (min-width:1024px) {
    .dealerSearchItem {
        padding-bottom: 20px;
        padding-top: 20px
    }
}

.dealerSearchItem__headline {
    font-weight: var(--main-font-weight-bold);
    margin-top: 5px;
    margin-bottom: 5px
}

@media (min-width:1024px) {
    .dealerSearchItem__headline {
        margin-top: 0;
        margin-bottom: 0
    }
}

.dealerSearchItem:first-child {
    padding-top: 10px
}

.dealerSearchMap {
    aspect-ratio: 1
}

@media (min-width:1250px) {
    .dealerSearchMap {
        aspect-ratio: 4/3
    }
}

.dealerSearchResults {
    display: flex;
    flex-wrap: nowrap;
    grid-gap: 10px;
    flex-direction: column;
    margin-top: 30px
}

@media (min-width:768px) {
    .dealerSearchResults {
        flex-direction: row
    }
}

.dealerSearchResults .dealerSearchItemsWrapper {
    width: 100%;
    flex-shrink: 0
}

.dealerSearchResults .dealerSearchItemsWrapper .dealerSearchItems {
    overflow: hidden;
    overflow-y: auto;
    max-height: 30vh
}

@media (min-width:768px) {
    .dealerSearchResults .dealerSearchItemsWrapper {
        width: 30%;
        position: relative
    }

    .dealerSearchResults .dealerSearchItemsWrapper .dealerSearchItems {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-height: 100%
    }
}

.dealerSearchResults .dealerSearchMapWrapper {
    flex-grow: 1
}

.openStreetMap__target {
    aspect-ratio: 3/4
}

@media (min-width:768px) {
    .openStreetMap__target {
        aspect-ratio: 16/6
    }
}

.openStreetMap .leaflet-container .leaflet-bottom,
.openStreetMap .leaflet-container .leaflet-control,
.openStreetMap .leaflet-container .leaflet-top {
    z-index: 2
}

.openStreetMap .leaflet-container .leaflet-pane {
    z-index: 1
}

.openStreetMap .leaflet-container .leaflet-bar a {
    color: var(--main-color-black);
    border-color: var(--main-color-light-gray)
}

.openStreetMap .leaflet-container .leaflet-touch .leaflet-bar,
.openStreetMap .leaflet-container .leaflet-touch .leaflet-control-layers {
    border-color: var(--main-color-light-gray);
    box-shadow: none
}

.openStreetMap .leaflet-container .leaflet-popup-content-wrapper {
    color: var(--main-color-black);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    border-radius: 5px
}

.openStreetMap .leaflet-container .leaflet-popup-content {
    margin: 10px 20px 10px 10px;
    font-size: 14px
}

.openStreetMap .leaflet-container .awesome-marker:not(.awesome-marker-shadow) {
    background-image: none
}

.openStreetMap .leaflet-container .awesome-marker:not(.awesome-marker-shadow):after {
    content: var(--base-icon-map-pin);
    font-family: icons, Helvetica, Arial, sans-serif;
    color: var(--main-color-secondary);
    display: block;
    font-size: 32px
}

.openStreetMap .leaflet-container .awesome-marker:not(.awesome-marker-shadow) .fa {
    display: none
}

.openStreetMap .leaflet-container .marker-cluster,
.openStreetMap .leaflet-container .marker-cluster-medium {
    color: var(--main-color-black);
    background-color: rgba(190, 159, 86, .3)
}

.openStreetMap .leaflet-container .marker-cluster div,
.openStreetMap .leaflet-container .marker-cluster-medium div {
    background: #be9f56
}

.openStreetMap.hasLeftContent {
    height: 960px;
    display: flex;
    gap: 40px
}

@media (max-width:1249px) {
    .openStreetMap.hasLeftContent {
        height: auto;
        flex-direction: column
    }

    .openStreetMap.hasLeftContent .googlemaps_content {
        height: 500px !important
    }
}

.openStreetMap .openStreetMap__left {
    width: 580px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex-shrink: 0
}

.openStreetMap .openStreetMap__left .openStreetMap__entries {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 960px;
    padding-bottom: 30px;
    padding-right: 20px
}

.openStreetMap .openStreetMap__left .openStreetMap__entries>a {
    text-decoration: none;
    color: var(--main-color-black)
}

.openStreetMap .openStreetMap__left .openStreetMap__entries>a:active,
.openStreetMap .openStreetMap__left .openStreetMap__entries>a:focus,
.openStreetMap .openStreetMap__left .openStreetMap__entries>a:hover {
    color: var(--main-color-black)
}

.openStreetMap .openStreetMap__left .openStreetMap__entries>a:active .button--icon,
.openStreetMap .openStreetMap__left .openStreetMap__entries>a:focus .button--icon,
.openStreetMap .openStreetMap__left .openStreetMap__entries>a:hover .button--icon {
    background-color: var(--main-color-secondary);
    color: var(--main-color-white)
}

.openStreetMap .openStreetMap__left .fadeOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0))
}

@media (max-width:1249px) {
    .openStreetMap .openStreetMap__left {
        flex-direction: row;
        width: 100%;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        max-width: 100vw
    }

    .openStreetMap .openStreetMap__left .openStreetMap__entries {
        flex-direction: row;
        white-space: nowrap;
        scroll-snap-align: center;
        padding-right: 30px;
        padding-bottom: 20px
    }

    .openStreetMap .openStreetMap__left .fadeOverlay {
        top: 0;
        bottom: 0;
        right: 0;
        left: unset;
        width: 60px;
        height: 100%;
        background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0))
    }
}

.openStreetMap__entry {
    border: 1px solid var(--main-color-light-gray);
    border-radius: 16px;
    padding: 24px;
    padding-right: 60px;
    cursor: pointer;
    position: relative
}

.openStreetMap__entry.highlight {
    background: var(--main-color-light-gray);
    transition: background .5s ease
}

.openStreetMap__entry svg {
    margin-bottom: 10px
}

.openStreetMap__entry:hover svg path {
    fill: var(--main-color-primary)
}

.openStreetMap__entry--active {
    background: var(--main-color-light-gray)
}

.openStreetMap__entry .button--icon {
    position: absolute;
    right: 20px;
    bottom: 20px
}

@media (max-width:1249px) {
    .openStreetMap__entry {
        padding: 12px;
        padding-right: 60px
    }

    .openStreetMap__entry .button--icon {
        right: 12px;
        bottom: 12px;
        width: 36px;
        height: 36px
    }
}

.alert {
    border-radius: 8px;
    position: relative;
    color: var(--main-color-black);
    background: var(--main-color-light-gray);
    padding: 10px;
    padding-left: 50px;
    min-height: 50px;
    display: flex;
    align-items: center
}

.alert:before {
    content: var(--base-icon-info);
    font-family: icons, Helvetica, Arial, sans-serif;
    position: absolute;
    left: 10px;
    top: 50%;
    font-size: 24px;
    width: 40px;
    translate: 0 -50%;
    text-align: center;
    line-height: 1;
    display: block
}

.alert--primary {
    background: #be9f56;
    color: #3c3c3b
}

.alert--secondary {
    background: #002e55;
    color: #fff
}

.alert--action {
    background: #002e55;
    color: #fff
}

.alert--danger {
    background: #880727;
    color: #fff
}

.alert--warning {
    background: #faaf00;
    color: #3c3c3b
}

.alert--success {
    background: #1e874c;
    color: #fff
}

.buttonRow,
.buttonRowBottom,
.buttonRowTop {
    margin-top: 32px;
    margin-bottom: 32px;
    margin-left: -5px;
    margin-right: -5px
}

.buttonRow .button,
.buttonRow .buttonLink,
.buttonRowBottom .button,
.buttonRowBottom .buttonLink,
.buttonRowTop .button,
.buttonRowTop .buttonLink {
    margin: 16px 5px
}

@media (max-width:481px) {

    .buttonRow,
    .buttonRowBottom,
    .buttonRowTop {
        text-align: center
    }

    .buttonRow .pull-left,
    .buttonRow .pull-right,
    .buttonRowBottom .pull-left,
    .buttonRowBottom .pull-right,
    .buttonRowTop .pull-left,
    .buttonRowTop .pull-right {
        float: none !important
    }
}

.buttonRowBottom {
    margin-bottom: 0
}

.buttonRowBottom .button,
.buttonRowBottom .buttonLink {
    margin-bottom: 0
}

.buttonRowTop {
    margin-top: 0
}

.buttonRowTop .button,
.buttonRowTop .buttonLink {
    margin-top: 0
}

.linklist .button {
    min-width: 0
}

.linklist.table_area .table_row .table_cell {
    padding-top: 16px;
    padding-bottom: 16px
}

.linklist.table_area .table_row.table_body:not(.no-hover):hover {
    cursor: pointer
}

.linklist.table_area .table_row.table_body:not(.no-hover):hover .table_cell {
    background-color: var(--main-color-light-gray)
}

@media (max-width:767px) {
    .linklist .read_more {
        margin-top: 8px
    }

    .linklist.table_area .table_row {
        padding-bottom: 16px;
        padding-top: 16px
    }

    .linklist.table_area .table_row:first-child {
        padding-top: 0
    }

    .linklist.table_area .table_row .table_cell {
        padding-top: 0;
        padding-bottom: 0
    }
}

ol,
ul {
    margin: 0;
    padding: 0;
    padding-left: 20px
}

ol li,
ul li {
    margin: 0;
    padding: 0;
    margin-bottom: 10px
}

ul.checkList {
    list-style: none;
    padding-left: 25px
}

ul.checkList li {
    position: relative
}

ul.checkList li b,
ul.checkList li strong {
    display: block;
    font-size: 1.8rem
}

ul.checkList li:before {
    content: var(--base-icon-check-bold);
    font-family: icons, Helvetica, Arial, sans-serif;
    position: absolute;
    left: -25px;
    font-size: 14px;
    margin-top: 1px;
    color: var(--main-color-secondary-medium)
}

ul.checkList--circle {
    padding-left: 35px
}

ul.checkList--circle li b,
ul.checkList--circle li strong {
    display: block;
    font-size: 1.8rem
}

ul.checkList--circle li:before {
    position: absolute;
    left: -35px;
    font-size: 14px;
    margin-top: -1px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main-color-secondary-medium);
    width: 26px;
    height: 26px;
    padding-top: 2px
}

ul.checkList--large {
    padding-left: 35px
}

ul.checkList--large li {
    font-size: 2.6rem;
    font-weight: var(--main-font-weight-medium);
    margin-bottom: 22px
}

ul.checkList--large li:before {
    font-size: 2.6rem;
    color: var(--main-color-black);
    left: -35px
}

@media (max-width:767px) {
    ul.checkList--large {
        padding-left: 30px
    }

    ul.checkList--large li {
        font-size: 2rem;
        margin-bottom: 10px
    }

    ul.checkList--large li:before {
        font-size: 2rem;
        left: -25px
    }
}

ol.checkList--circle {
    counter-reset: list-counter;
    position: relative;
    list-style: none;
    padding-left: 0
}

ol.checkList--circle li {
    counter-increment: list-counter;
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px
}

ol.checkList--circle li b,
ol.checkList--circle li strong {
    display: block;
    font-size: 1.8rem
}

ol.checkList--circle li:before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid var(--main-color-secondary-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color-secondary-medium);
    padding-top: 1px
}

#overlay {
    display: none;
    background-color: rgba(255, 255, 255, .7);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 103
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0
}

.pagination li {
    margin: 0;
    padding: 0;
    list-style: none
}

.pagination__item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    text-decoration: none;
    color: var(--main-color-black);
    border: 0;
    border-radius: 0;
    font-size: 18px;
    margin: 0 8px;
    padding: 0 3px
}

.pagination__item--active {
    color: var(--main-color-secondary-medium) !important;
    text-decoration: underline;
    text-underline-offset: 3px
}

.pagination__item:hover {
    color: var(--main-color-secondary-medium)
}

.pagination .icon {
    font-size: 16px
}

a.pagination__item,
button.pagination__item {
    color: var(--main-color-black);
    cursor: pointer
}

a.pagination__item:active,
a.pagination__item:focus,
a.pagination__item:hover,
button.pagination__item:active,
button.pagination__item:focus,
button.pagination__item:hover {
    color: var(--main-color-secondary-medium);
    text-decoration: none
}

.processbar {
    margin: 20px -10px 20px -10px;
    z-index: 1;
    position: relative
}

@media (min-width:768px) {
    .processbar {
        margin-bottom: 60px
    }
}

.processbar__icon {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 5px
}

.processbar__icon .icon {
    display: block
}

.processbar__item {
    margin: 0;
    list-style-type: none;
    padding: 0 10px 30px 10px;
    width: 33%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1rem;
    color: var(--main-color-middle-gray);
    position: relative;
    flex-shrink: 0
}

@media (min-width:768px) {
    .processbar__item {
        font-size: var(--main-font-size-small)
    }
}

@media (min-width:1024px) {
    .processbar__item {
        width: 200px
    }
}

.processbar__item:after {
    content: "";
    width: 23px;
    height: 23px;
    border: 4px solid var(--main-color-white);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    background: var(--main-color-middle-gray);
    transform: translateX(-50%)
}

.processbar__item.is-active,
.processbar__item.is-done {
    color: var(--main-color-black);
    font-weight: var(--main-font-weight-bold)
}

.processbar__item.is-active:after,
.processbar__item.is-done:after {
    background: var(--main-color-primary)
}

.processbar__item:first-child:before,
.processbar__item:last-child:before {
    content: "";
    height: 5px;
    width: 50%;
    background: var(--main-color-white);
    display: block;
    position: absolute;
    bottom: 9px
}

.processbar__item:first-child:before {
    right: 50%
}

.processbar__item:last-child:before {
    left: 50%
}

.processbar__items {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0;
    padding: 0
}

.processbar__active,
.processbar__inactive {
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--main-color-middle-gray);
    bottom: 11px;
    left: 0;
    z-index: -1
}

.processbar__active {
    background: var(--main-color-primary);
    height: 3px;
    bottom: 10px;
    width: 0;
    transition: width .6s ease-in-out
}

.scrollTopButton {
    position: fixed;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    justify-content: center;
    z-index: 101;
    width: 40px;
    height: 40px;
    font-size: 20px;
    background-color: var(--main-color-primary);
    color: var(--main-color-primary-contrast);
    text-align: center;
    cursor: pointer;
    right: -45px;
    bottom: 0;
    -webkit-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -ms-transition: .2s ease-in;
    -o-transition: .2s ease-in
}

.scrollTopButton:hover {
    background-color: var(--main-color-primary-darken)
}

.scrollTopButton.sticky {
    right: 0
}

.tabs {
    margin-bottom: 32px
}

.tabs .tabs_item {
    float: left;
    padding: 8px 32px;
    border: 1px solid var(--main-color-middle-gray)
}

.tabs .tabs_item:hover {
    background-color: var(--main-color-middle-gray)
}

.tabs .tabs_item:hover input {
    color: var(--main-color-black)
}

.tabs .tabs_item .form-group {
    margin-bottom: 0
}

.tabs .tabs_item:last-child {
    border-left: 0
}

.tabs:after {
    clear: both;
    display: block;
    content: " "
}

.iconbarIcon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--main-color-text-base);
    text-decoration: none;
    position: relative
}

.iconbarIcon.is-active,
.iconbarIcon:active,
.iconbarIcon:focus,
.iconbarIcon:focus-within,
.iconbarIcon:hover {
    text-decoration: none;
    color: var(--main-color-text-base)
}

.iconbarIcon.is-active .iconbarIcon__icon,
.iconbarIcon:active .iconbarIcon__icon,
.iconbarIcon:focus .iconbarIcon__icon,
.iconbarIcon:focus-within .iconbarIcon__icon,
.iconbarIcon:hover .iconbarIcon__icon {
    color: var(--main-color-primary)
}

.iconbarIcon.is-active .iconbarIcon__count,
.iconbarIcon:active .iconbarIcon__count,
.iconbarIcon:focus .iconbarIcon__count,
.iconbarIcon:focus-within .iconbarIcon__count,
.iconbarIcon:hover .iconbarIcon__count {
    color: var(--main-color-primary-contrast)
}

.iconbarIcon__icon {
    font-size: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0
}

@media (max-width:767px) {
    .iconbarIcon__icon {
        font-size: 18px;
        width: 36px;
        height: 36px
    }
}

.iconbarIcon__badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    margin-left: 10px;
    background: #949494;
    color: #3c3c3b;
    font-size: 1.2rem
}

.iconbarIcon__label {
    font-size: 1.3rem;
    line-height: 1;
    display: none
}

@media (min-width:1250px) {
    .iconbarIcon__label {
        display: block
    }
}

.iconbarIcon__count {
    position: absolute;
    left: calc(50% + 2px);
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: var(--main-color-light-gray);
    color: var(--main-color-primary-contrast)
}

.iconbarIcon__count.is-action {
    display: flex !important;
    background: var(--main-color-action);
    color: var(--main-color-white);
    animation: scaleRequestIconBigger 1s forwards ease-in-out
}

.iconbar {
    display: flex;
    align-items: flex-end
}

@media (min-width:1250px) {
    .iconbar {
        margin-left: 0;
        margin-right: 0
    }

    .iconbar .iconbarIcon {
        padding-left: 0;
        padding-right: 0
    }
}

.iconbar--landscape {
    align-items: center
}

.iconbar--landscape .iconbarIcon {
    flex-direction: row
}

.iconbar:not(.iconbar--landscape) .iconbarIcon__badge {
    order: -1;
    margin: 0;
    margin-bottom: 5px
}

.iconbarHover {
    z-index: 104;
    background: var(--main-color-white);
    padding: 10px 20px;
    display: none;
    flex-direction: column;
    width: auto;
    max-width: 100vw;
    position: absolute;
    top: 100%;
    bottom: auto;
    right: 50%;
    max-height: 70vh;
    border-radius: 8px;
    transform: translateX(5%);
    margin-top: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1)
}

@media (max-width:767px) {
    .iconbarHover {
        display: none
    }
}

.iconbarHover--bigger {
    width: 320px;
    transform: translateX(10%)
}

.iconbarHover__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1
}

@media (min-width:768px) {
    .iconbarHover__close {
        display: none
    }
}

.iconbarHover__navigation {
    margin: 0;
    padding: 0;
    font-size: 1.5rem
}

.iconbarHover__navigation li {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.iconbarHover__navigation li:last-child {
    border-bottom: 0
}

.iconbarHover__navigation li>a,
.iconbarHover__navigation li>span {
    display: flex;
    align-items: center;
    color: var(--main-color-black);
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    font-weight: var(--main-font-weight-bold);
    white-space: nowrap
}

.iconbarHover__navigation li>a.is-active,
.iconbarHover__navigation li>a:active,
.iconbarHover__navigation li>a:focus,
.iconbarHover__navigation li>a:hover,
.iconbarHover__navigation li>span.is-active,
.iconbarHover__navigation li>span:active,
.iconbarHover__navigation li>span:focus,
.iconbarHover__navigation li>span:hover {
    color: var(--main-color-primary);
    text-decoration: none
}

.iconbarHover__navigation li>a .icon,
.iconbarHover__navigation li>span .icon {
    font-size: 18px;
    margin-right: 10px;
    color: var(--main-color-secondary-medium)
}

.iconbarHover__headline {
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 10px
}

.iconbarHover__body {
    overflow: hidden;
    overflow-y: auto;
    padding-right: 10px;
    margin-right: -10px
}

.iconbarHover__footer {
    padding-top: 20px
}

.iconbarItem {
    position: relative
}

.iconbarItem::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px
}

@media (min-width:768px) {

    .iconbarItem.hoverintent .iconbarHover,
    .iconbarItem.showIconbarHover .iconbarHover,
    .iconbarItem:focus-within .iconbarHover {
        display: flex
    }
}

.iconList {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-bottom: -5px;
    column-gap: 24px
}

.iconList a {
    color: var(--main-color-primary);
    text-decoration: none;
    margin-right: 5px;
    margin-bottom: 5px
}

.iconList a:active,
.iconList a:focus,
.iconList a:hover {
    color: var(--main-color-white);
    text-decoration: none
}

.iconList .icon {
    font-size: 40px;
    line-height: 1;
    display: block
}

.iconbox {
    position: relative;
    font-weight: 600;
    border-right: 1px solid var(--main-color-gray-base);
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 0;
    margin-left: 25px
}

.iconbox .icon {
    color: var(--main-color-secondary-medium);
    font-size: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0
}

.iconbox small {
    display: block;
    font-weight: var(--main-font-weight);
    font-size: 1.6rem
}

.iconbox.iconbox--last {
    border-right: none
}

@media (max-width:1249px) {
    .iconbox {
        border-right: 1px solid var(--main-color-white)
    }
}

@media (max-width:767px) {
    .iconbox {
        border-right: 1px solid var(--main-color-gray-base);
        margin-left: 0
    }
}

.trustIcons--basket .textcontent {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.trustIcons--basket .textcontent .iconbox {
    width: calc(25% - 40px)
}

.trustIcons--basket .textcontent .iconbox:last-child {
    border-right: none
}

@media (max-width:1249px) {
    .trustIcons--basket .textcontent .iconbox:nth-child(2) {
        border-right: none
    }

    .trustIcons--basket .textcontent .iconbox {
        width: calc(50% - 40px)
    }
}

@media (max-width:767px) {
    .trustIcons--basket .textcontent .iconbox {
        width: 100%;
        border-right: none
    }
}

.trustIcons--checkout .textcontent {
    display: flex;
    flex-wrap: wrap
}

.trustIcons--checkout .textcontent .iconbox {
    margin-left: 15px;
    width: calc(25% - 15px);
    padding-left: 35px;
    padding-right: 20px;
    line-height: 1.2;
    display: flex;
    align-items: center
}

.trustIcons--checkout .textcontent .iconbox:last-child {
    border-right: none
}

.trustIcons--checkout .textcontent .iconbox .icon {
    font-size: 20px;
    height: 100%;
    margin-bottom: 0
}

@media (max-width:1023px) {
    .trustIcons--checkout .textcontent {
        gap: 20px 0
    }

    .trustIcons--checkout .textcontent .iconbox {
        width: calc(50% - 15px)
    }

    .trustIcons--checkout .textcontent .iconbox:nth-child(2) {
        border-right: none
    }
}

@media (max-width:481px) {
    .trustIcons--checkout .textcontent .iconbox {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--main-color-gray-base);
        margin-left: 0;
        padding-bottom: 20px
    }

    .trustIcons--checkout .textcontent .iconbox .icon {
        padding-bottom: 20px
    }
}

.trustIconsSwiper .swiper-pagination-bullet {
    width: 5px;
    height: 5px
}

.trustIconsSwiper .swiper-pagination-bullet-active {
    background: var(--main-color-primary)
}

@media screen and (min-width:1024px) {
    .trustIconsSwiper .swiper-slide:last-child .iconbox {
        border-right: 0
    }
}

.trustBar {
    display: flex;
    position: relative;
    width: 100%;
    overflow: hidden
}

@media (min-width:768px) {
    .trustBar {
        line-height: 20px
    }
}

@media (max-width:767px) {
    .trustBar {
        font-size: 1.3rem
    }
}

.trustBar__close {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 1
}

.trustBar__close .icon {
    display: block;
    margin: 0
}

.trustBar__close:hover {
    color: var(--main-color-secondary)
}

.trustBar a {
    color: var(--main-color-black);
    text-decoration: underline
}

.trustBar a:active,
.trustBar a:focus,
.trustBar a:hover {
    color: var(--main-color-black);
    text-decoration: underline
}

.trustBar .textcontent {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    padding-left: 35px;
    padding-right: 35px;
    text-align: center
}

.trustBar .textcontent .icon {
    font-size: 1.2em;
    position: relative;
    top: -2px;
    display: inline-block;
    vertical-align: middle
}

.trustBar .textcontent .icon:first-child {
    margin-right: 7px
}

.trustBar .textcontent .icon:last-child {
    margin-left: 7px
}

.trustBar .swiper-wrapper {
    display: flex;
    align-items: center
}

.trustInfobar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: -15px;
    margin-right: -30px;
    text-decoration: none;
    color: var(--main-color-black)
}

.trustInfobar:active,
.trustInfobar:focus,
.trustInfobar:hover {
    text-decoration: none;
    color: var(--main-color-black)
}

.trustInfobar>* {
    margin-bottom: 15px;
    margin-right: 32px
}

.trustInfobar img {
    object-fit: contain;
    max-height: 120px
}

@media (max-width:1539px) {
    .trustInfobar__label {
        width: 100%;
        margin-right: 0
    }
}

@media (max-width:1023px) {
    .trustInfobar>* {
        margin-bottom: 32px;
        margin-right: 20px
    }
}

.trustList {
    margin: 0 -5px -10px -5px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    font-size: 1.2rem
}

.trustList li {
    list-style-type: none;
    margin: 0;
    padding: 0 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.trustList .icon {
    font-size: 20px;
    margin-right: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.inputGroup {
    display: flex;
    width: 100%;
    transition: .2s ease-in-out;
    box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    position: relative
}

.inputGroup .input,
.inputGroup input {
    flex-grow: 1;
    transition: .2s ease-in-out
}

.inputGroup__addon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--main-color-middle-gray);
    overflow: hidden;
    text-decoration: none;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px
}

@media (min-width:768px) {
    .inputGroup__addon {
        height: 46px;
        padding-left: 16px;
        padding-right: 16px
    }
}

.inputGroup__addon:first-child {
    margin-right: -1px
}

.inputGroup__addon:last-child {
    margin-left: -1px
}

.inputGroup__addon .button {
    min-width: 0;
    border-radius: 0;
    margin: -1px;
    min-height: 0
}

.inputGroup__addon .icon {
    line-height: 1;
    display: block;
    font-size: 16px
}

@media (min-width:768px) {
    .inputGroup__addon .icon {
        font-size: 20px
    }
}

.inputGroup__addon+input,
.inputGroup__addon+select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.inputGroup__addon--clickable {
    cursor: pointer
}

.inputGroup__addon--clickable:hover {
    color: var(--main-color-primary)
}

.inputGroup button.inputGroup__addon {
    min-width: 36px;
    background: 0 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

@media (min-width:768px) {
    .inputGroup button.inputGroup__addon {
        min-width: 46px
    }
}

.inputGroup button.inputGroup__addon:active,
.inputGroup button.inputGroup__addon:focus,
.inputGroup button.inputGroup__addon:hover {
    background: var(--main-color-primary);
    color: var(--main-color-primary-darken)
}

.inputGroup button.inputGroup__addon i {
    display: flex;
    align-items: center;
    justify-content: center
}

.inputGroup--infieldAddon .inputGroup__addon {
    position: absolute;
    height: 100%;
    background: 0 0 !important;
    border: 0
}

.inputGroup--infieldAddon .inputGroup__addon:first-child {
    left: 0
}

.inputGroup--infieldAddon .inputGroup__addon:last-child {
    right: 0
}

.inputGroup--infieldAddon>input:first-child {
    padding-right: 36px
}

@media (min-width:768px) {
    .inputGroup--infieldAddon>input:first-child {
        padding-right: 46px
    }
}

.inputGroup--infieldAddon>input:last-child {
    padding-left: 36px
}

@media (min-width:768px) {
    .inputGroup--infieldAddon>input:last-child {
        padding-left: 46px
    }
}

.inputGroup.is-focus {
    border-color: var(--main-color-primary)
}

.inputGroup.is-focus select,
.inputGroup.is-focus>.input,
.inputGroup.is-focus>input {
    background: var(--main-color-white);
    border-color: var(--main-color-primary)
}

.inputGroup.is-focus .inputGroup__addon {
    background: var(--main-color-white);
    border-color: var(--main-color-primary)
}

.inputGroup.is-inactive input {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important
}

.inputGroup.is-inactive .inputGroup__addon {
    display: none
}

.bg--secondary input,
.bg--secondary select,
.bg--secondary textarea {
    background: 0 0 !important;
    border-color: var(--main-color-white)
}

.bg--secondary .customSelect__selected,
.bg--secondary .selectBody {
    background: 0 0
}

.bg--secondary .customSelect__selected select option,
.bg--secondary .selectBody select option {
    color: #000 !important;
    background: #fff !important
}

.bg--secondary input,
.bg--secondary select,
.bg--secondary textarea {
    color: var(--main-color-white)
}

.bg--secondary .specialcheckbox {
    color: var(--main-color-white)
}

.bg--secondary .specialcheckbox i {
    border: 0
}

.bg--secondary .specialcheckbox i:after {
    left: 0;
    top: 0;
    background: var(--main-color-white);
    color: var(--main-color-secondary)
}

.bg--secondary .contactformular .button--primary {
    background: var(--main-color-white);
    color: var(--main-color-secondary);
    border-color: var(--main-color-white);
    font-weight: 600
}

.bg--secondary .contactformular .button--primary:hover {
    background: var(--main-color-primary);
    border-color: var(--main-color-primary);
    color: var(--main-color-white)
}

.bg--secondary .infieldInputGroup--select>label,
.bg--secondary .infieldInputGroup.is-filled>label,
.bg--secondary .infieldInputGroup.is-focus>label {
    background: var(--main-color-secondary);
    color: var(--main-color-white)
}

.infieldInputGroup {
    position: relative
}

.infieldInputGroup>label {
    position: absolute;
    top: 50%;
    transform: translate(0, calc(-50% - 1px));
    left: 12px;
    margin-top: 1px;
    line-height: 18px;
    transition: .2s ease-in-out;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 24px)
}

@media (min-width:768px) {
    .infieldInputGroup>label {
        left: 16px;
        line-height: 20px;
        max-width: calc(100% - 32px)
    }
}

.infieldInputGroup:has(.inputGroup--infieldAddon)>label {
    left: 16px
}

@media (min-width:768px) {
    .infieldInputGroup:has(.inputGroup--infieldAddon)>label {
        left: 16px
    }
}

.infieldInputGroup:has(.inputGroup--infieldAddon).is-filled>label,
.infieldInputGroup:has(.inputGroup--infieldAddon).is-focus>label {
    left: 12px
}

@media (min-width:768px) {

    .infieldInputGroup:has(.inputGroup--infieldAddon).is-filled>label,
    .infieldInputGroup:has(.inputGroup--infieldAddon).is-focus>label {
        left: 16px
    }
}

.infieldInputGroup input,
.infieldInputGroup select,
.infieldInputGroup textarea {
    transition: padding .2s ease-in-out
}

.infieldInputGroup--select>label,
.infieldInputGroup.is-filled>label,
.infieldInputGroup.is-focus>label {
    top: 0;
    transform: translate(-5px, -50%);
    color: var(--main-color-dark-gray);
    font-size: .7em;
    background: var(--main-color-white);
    line-height: 1;
    padding-left: 5px;
    padding-right: 5px;
    max-width: 100%
}

.infieldInputGroup:has(.iti--show-flags)>label {
    top: 0;
    transform: translate(-5px, -50%);
    color: var(--main-color-dark-gray);
    font-size: .7em;
    background: var(--main-color-white);
    line-height: 1;
    padding-left: 5px;
    padding-right: 5px;
    max-width: 100%
}

.infieldInputGroup.infieldInputGroup--withPlaceholder>label {
    top: 0;
    transform: translate(-5px, -50%);
    color: var(--main-color-dark-gray);
    font-size: .7em;
    background: var(--main-color-white);
    line-height: 1;
    padding-left: 5px;
    padding-right: 5px
}

.searchBar {
    width: 100%;
    min-width: 340px;
    border-radius: 0
}

@media (min-width:768px) and (max-width:1023px) {
    .searchBar {
        padding-left: 60px;
        min-width: 240px
    }
}

@media (min-width:1024px) and (max-width:1249px) {
    .searchBar {
        padding-left: 60px;
        min-width: 340px
    }
}

.searchBar input {
    background: 0 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--main-color-black);
    padding: 10px 0
}

.searchBar input::placeholder {
    color: var(--main-color-black);
    opacity: 1;
    transition: color .5s ease
}

.searchBar input:focus::placeholder {
    color: transparent
}

.searchBar input:-webkit-autofill,
.searchBar input:-webkit-autofill:active,
.searchBar input:-webkit-autofill:focus,
.searchBar input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important
}

.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
    order: -1;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid var(--main-color-black);
    transition: .2s ease-in-out;
    padding-right: 16px;
    padding-left: 0;
    border-radius: 0;
    min-width: 40px;
    height: 44px;
    color: var(--main-color-black)
}

.searchBar .inputGroup__addon:focus,
.searchBar .inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover {
    background: 0 0;
    color: var(--main-color-primary)
}

.searchBar .inputGroup__addon:focus-within,
.searchBar button.inputGroup__addon:focus-within {
    outline: 1px dotted;
    outline-offset: 2px
}

.searchBar--minified {
    position: relative
}

.searchBar--minified input {
    width: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: .2s ease-in-out
}

.searchBar--minified .inputGroup__addon {
    z-index: 1
}

.searchBar--minified.is-active input {
    width: 300px;
    padding-right: 46px;
    opacity: 1;
    pointer-events: auto
}

.searchBar--small {
    width: 100%;
    max-width: 200px;
    position: relative;
    border-radius: 0
}

.searchBar--small input {
    padding: 5px 30px 5px 5px;
    font-size: var(--main-font-size-small);
    border: 0;
    border-bottom: 1px solid var(--main-color-middle-gray);
    border-radius: 0;
    background: 0 0 !important
}

.searchBar--small .inputGroup__addon,
.searchBar--small button.inputGroup__addon {
    padding: 0;
    min-width: 0;
    height: 30px;
    width: 30px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0;
    background: 0 0 !important;
    border-color: transparent !important
}

.searchBar--small .inputGroup__addon .icon,
.searchBar--small button.inputGroup__addon .icon {
    font-size: 18px
}

.searchBar--small.is-focus input {
    border-color: transparent !important
}

.searchBar--small.is-focus .inputGroup__addon,
.searchBar--small.is-focus button.inputGroup__addon {
    border-color: transparent !important
}

@media (max-width:767px) {
    .searchBar {
        min-width: 100%
    }

    .searchBar--minified-xs {
        position: relative
    }

    .searchBar--minified-xs input {
        width: 0;
        right: 0;
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: .5s ease-in-out
    }

    .searchBar--minified-xs .inputGroup__addon {
        z-index: 1;
        border-radius: 0;
        padding-left: 5px;
        padding-right: 5px;
        background: 0 0;
        border-color: transparent
    }

    .searchBar--minified-xs.is-focus {
        box-shadow: none
    }

    .searchBar--minified-xs.is-focus input {
        width: 300px;
        padding-right: 46px;
        opacity: 1;
        pointer-events: auto;
        border: 1px solid var(--main-color-primary);
        border-radius: 0
    }

    .searchBar--minified-xs.is-focus .inputGroup__addon {
        background: 0 0 !important;
        border-color: transparent !important
    }

    .searchBar--minified-xs.is-focus .inputGroup__addon:focus,
    .searchBar--minified-xs.is-focus .inputGroup__addon:hover {
        background: 0 0 !important;
        border-color: transparent !important
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .searchBar--minified-sm {
        position: relative
    }

    .searchBar--minified-sm input {
        width: 0;
        right: 0;
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: .5s ease-in-out
    }

    .searchBar--minified-sm .inputGroup__addon {
        z-index: 1;
        border-radius: 0;
        padding-left: 5px;
        padding-right: 5px;
        background: 0 0;
        border-color: transparent
    }

    .searchBar--minified-sm.is-focus {
        box-shadow: none
    }

    .searchBar--minified-sm.is-focus input {
        width: 300px;
        padding-right: 46px;
        opacity: 1;
        pointer-events: auto;
        border: 1px solid var(--main-color-primary);
        border-radius: 0
    }

    .searchBar--minified-sm.is-focus .inputGroup__addon {
        background: 0 0 !important;
        border-color: transparent !important
    }

    .searchBar--minified-sm.is-focus .inputGroup__addon:focus,
    .searchBar--minified-sm.is-focus .inputGroup__addon:hover {
        background: 0 0 !important;
        border-color: transparent !important
    }
}

@media (min-width:1024px) and (max-width:1249px) {
    .searchBar--minified-md {
        position: relative
    }

    .searchBar--minified-md input {
        width: 0;
        right: 0;
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: .5s ease-in-out
    }

    .searchBar--minified-md .inputGroup__addon {
        z-index: 1;
        border-radius: 0;
        padding-left: 5px;
        padding-right: 5px;
        background: 0 0;
        border-color: transparent
    }

    .searchBar--minified-md.is-focus {
        box-shadow: none
    }

    .searchBar--minified-md.is-focus input {
        width: 300px;
        padding-right: 46px;
        opacity: 1;
        pointer-events: auto;
        border: 1px solid var(--main-color-primary);
        border-radius: 0
    }

    .searchBar--minified-md.is-focus .inputGroup__addon {
        background: 0 0 !important;
        border-color: transparent !important
    }

    .searchBar--minified-md.is-focus .inputGroup__addon:focus,
    .searchBar--minified-md.is-focus .inputGroup__addon:hover {
        background: 0 0 !important;
        border-color: transparent !important
    }
}

@media (min-width:1250px) and (max-width:1539px) {
    .searchBar--minified-lg {
        position: relative
    }

    .searchBar--minified-lg input {
        width: 0;
        right: 0;
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: .5s ease-in-out
    }

    .searchBar--minified-lg .inputGroup__addon {
        z-index: 1;
        border-radius: 0;
        padding-left: 5px;
        padding-right: 5px;
        background: 0 0;
        border-color: transparent
    }

    .searchBar--minified-lg.is-focus {
        box-shadow: none
    }

    .searchBar--minified-lg.is-focus input {
        width: 300px;
        padding-right: 46px;
        opacity: 1;
        pointer-events: auto;
        border: 1px solid var(--main-color-primary);
        border-radius: 0
    }

    .searchBar--minified-lg.is-focus .inputGroup__addon {
        background: 0 0 !important;
        border-color: transparent !important
    }

    .searchBar--minified-lg.is-focus .inputGroup__addon:focus,
    .searchBar--minified-lg.is-focus .inputGroup__addon:hover {
        background: 0 0 !important;
        border-color: transparent !important
    }
}

@media (min-width:1540px) {
    .searchBar--minified-xlg {
        position: relative
    }

    .searchBar--minified-xlg input {
        width: 0;
        right: 0;
        position: absolute;
        opacity: 0;
        pointer-events: none;
        transition: .5s ease-in-out
    }

    .searchBar--minified-xlg .inputGroup__addon {
        z-index: 1;
        border-radius: 0;
        padding-left: 5px;
        padding-right: 5px;
        background: 0 0;
        border-color: transparent
    }

    .searchBar--minified-xlg.is-focus {
        box-shadow: none
    }

    .searchBar--minified-xlg.is-focus input {
        width: 300px;
        padding-right: 46px;
        opacity: 1;
        pointer-events: auto;
        border: 1px solid var(--main-color-primary);
        border-radius: 0
    }

    .searchBar--minified-xlg.is-focus .inputGroup__addon {
        background: 0 0 !important;
        border-color: transparent !important
    }

    .searchBar--minified-xlg.is-focus .inputGroup__addon:focus,
    .searchBar--minified-xlg.is-focus .inputGroup__addon:hover {
        background: 0 0 !important;
        border-color: transparent !important
    }
}

.searchSuggestionItem {
    border-bottom: 1px solid var(--main-color-middle-gray);
    text-decoration: none;
    padding: 10px;
    color: var(--main-color-black);
    display: grid;
    grid-gap: 10px;
    align-items: center;
    grid-template-columns: auto 1fr;
    grid-template-areas: "searchSuggestionImg searchSuggestionDescription";
    cursor: pointer
}

.searchSuggestionItem__img {
    grid-area: searchSuggestionImg;
    width: 60px
}

.searchSuggestionItem__description {
    grid-area: searchSuggestionDescription
}

.searchSuggestionItem.is-active,
.searchSuggestionItem:hover {
    color: var(--main-color-black);
    text-decoration: none;
    background: var(--main-color-light-gray)
}

.searchBarSuggestions {
    background: var(--main-color-white);
    border-radius: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    max-height: 300px;
    overflow: hidden;
    overflow-y: auto
}

.searchBarWrapper {
    position: relative
}

.searchBarWrapper .searchBarSuggestions {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 1
}

.searchBarWrapper.is-loading .searchBar {
    pointer-events: none
}

.searchBarWrapper.is-loading .inputGroup__addon .icon {
    animation: rotation 1s infinite ease-in-out
}

.searchBarWrapper.is-loading .inputGroup__addon .icon:before {
    content: var(--base-icon-loading)
}

.rating {
    display: flex;
    align-items: center
}

.rating__star {
    display: block;
    line-height: 1
}

.rating__star--active .icon:before {
    content: var(--base-icon-star-filled)
}

.rating__star--active-half .icon:before {
    content: var(--base-icon-star-half)
}

.rating__label {
    margin-left: 10px
}

.rating__stars {
    display: flex;
    align-items: center
}

.ratingSelection {
    font-size: 1.8em;
    margin-right: -5px
}

.ratingSelection .rating__star {
    cursor: pointer;
    margin-right: 5px
}

.ratingSelection .rating__star:hover {
    color: var(--main-color-primary)
}

.ratingListItem__stars {
    margin-right: 20px
}

.ratingListItem__header {
    margin-bottom: 20px;
    display: flex;
    align-items: center
}

.ratingList .ratingListItem:not(:last-child) {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--main-color-middle-gray);
    margin-bottom: 20px
}

.itemcardRatingLink {
    color: var(--main-color-black);
    text-decoration: none
}

.itemcardRatingLink:active,
.itemcardRatingLink:focus,
.itemcardRatingLink:hover {
    color: var(--main-color-primary);
    text-decoration: none
}

.itemcardRatingViewHeadline {
    display: flex;
    align-items: center
}

@media (max-width:767px) {
    .itemcardRatingViewHeadline {
        justify-content: space-between
    }
}

.itemcardRatingViewHeadline h2 {
    margin-bottom: 0
}

.itemcardRatingViewHeadline .rating {
    margin-left: 20px
}

.actionIcon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    color: var(--main-color-black);
    text-decoration: none;
    position: relative;
    border: 0;
    background: 0 0;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    backdrop-filter: none !important
}

.actionIcon:hover {
    background: 0 0;
    text-decoration: none;
    color: var(--main-color-primary)
}

.actionIcon:hover .icon-favorites:before {
    content: var(--base-icon-heart)
}

.actionIcon:hover .icon-favorites-filled:before {
    content: var(--base-icon-heart-filled)
}

.actionIcon:active,
.actionIcon:focus {
    background: 0 0;
    text-decoration: none;
    color: var(--main-color-primary)
}

.actionIcon:before {
    display: none
}

.actionIcon:after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: icons, Helvetica, Arial, sans-serif;
    content: "";
    transition: .2s ease-in-out;
    opacity: 0;
    position: absolute
}

.actionIcon .icon {
    opacity: 1;
    font-size: 1em
}

.actionIcon.is-error,
.actionIcon.is-loading,
.actionIcon.is-success {
    color: var(--main-color-middle-gray) !important;
    cursor: not-allowed;
    padding: 0;
    background: var(--main-color-white) !important
}

.actionIcon.is-error .icon,
.actionIcon.is-loading .icon,
.actionIcon.is-success .icon {
    opacity: 0
}

.actionIcon.is-loading {
    cursor: wait
}

.actionIcon.is-loading:after {
    content: var(--base-icon-loading);
    opacity: 1;
    animation: rotation 1s infinite ease-in-out
}

.actionIcon.is-success {
    color: var(--main-color-success) !important
}

.actionIcon.is-success:after {
    content: var(--base-icon-check);
    animation: scaleRequestIcon 1s forwards ease-in-out
}

.actionIcon.is-error {
    color: var(--main-color-danger) !important
}

.actionIcon.is-error:after {
    content: var(--base-icon-close);
    animation: scaleRequestIcon 1s forwards ease-in-out
}

.tag {
    background: var(--main-color-light-gray);
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    font-size: var(--main-font-size-small);
    cursor: pointer;
    text-decoration: none;
    color: var(--main-color-black);
    border-radius: 4px;
    line-height: 1;
    text-align: center
}

.tag.is-active,
.tag:hover {
    background: var(--main-color-primary);
    color: #333;
    text-decoration: none
}

.tag:active,
.tag:focus {
    background: var(--main-color-primary-dark);
    color: #333;
    text-decoration: none
}

.tag .icon {
    font-size: 1.4em;
    margin-left: 5px;
    line-height: 1;
    display: block;
    margin-top: -1px
}

.tag .icon.icon-close {
    font-size: 1.2rem
}

.tag.is-error,
.tag.is-loading,
.tag.is-success {
    background: var(--main-color-middle-gray) !important;
    border-color: var(--main-color-middle-gray) !important;
    color: var(--main-color-black) !important;
    cursor: not-allowed;
    pointer-events: none;
    position: relative
}

.tag.is-error .icon,
.tag.is-loading .icon,
.tag.is-success .icon {
    opacity: 0
}

.tag.is-error:after,
.tag.is-loading:after,
.tag.is-success:after {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: icons, Helvetica, Arial, sans-serif;
    translate: -50% -50%;
    font-size: 20px
}

.tag.is-loading {
    cursor: wait;
    color: var(--main-color-middle-gray) !important
}

.tag.is-loading:after {
    content: var(--base-icon-loading);
    color: var(--main-color-black);
    opacity: 1;
    animation: rotation 1s infinite ease-in-out
}

.tag.is-success {
    background: var(--main-color-success) !important;
    border-color: var(--main-color-success) !important;
    color: var(--main-color-success) !important
}

.tag.is-success:after {
    content: var(--base-icon-check);
    color: var(--main-color-white);
    animation: scaleRequestIconBtn 1s forwards ease-in-out
}

.tag.is-error {
    background: var(--main-color-danger) !important;
    border-color: var(--main-color-danger) !important;
    color: var(--main-color-danger) !important
}

.tag.is-error:after {
    content: var(--base-icon-close);
    color: var(--main-color-white);
    animation: scaleRequestIconBtn 1s forwards ease-in-out
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

@media (max-width:1249px) {
    .tags {
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        max-width: 100vw;
        gap: 5px
    }

    .tags>* {
        scroll-snap-align: center;
        flex-shrink: 0
    }
}

button.tag {
    border: 0
}

button.tag:focus,
button.tag:focus-within {
    border: 0;
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px;
    color: var(--main-color-white)
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 107;
    opacity: 0;
    transition: .4s ease;
    pointer-events: none;
    align-items: flex-end;
    display: none;
    overflow-x: hidden;
    overflow-y: auto
}

@media (min-width:768px) {
    .modal {
        padding: 30px;
        align-items: flex-start
    }
}

@media (min-width:1250px) {
    .modal {
        padding: 60px
    }
}

.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: .4s ease;
    background: var(--main-color-white);
    box-shadow: 0 5px 30px rgba(0, 0, 0, .2);
    transform: translateY(20%)
}

@media (max-width:767px) {
    .modal__dialog {
        max-height: 100%;
        max-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto
    }
}

@media (min-width:768px) {
    .modal__dialog {
        border-radius: 10px;
        overflow: hidden;
        transform: translateY(-20%)
    }
}

@media (min-width:1250px) {
    .modal__dialog {
        box-shadow: 0 10px 60px rgba(0, 0, 0, .2)
    }
}

.modal__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: opacity .2s ease-in;
    opacity: 1
}

.modal__close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    opacity: 1;
    text-decoration: none;
    color: var(--main-color-black);
    border-radius: 50%;
    text-align: center;
    border: 2px solid transparent
}

.modal__close:focus,
.modal__close:hover {
    color: var(--main-color-secondary);
    text-decoration: none;
    border-color: var(--main-color-secondary);
    background: var(--main-color-white);
    opacity: 1
}

.modal__close i {
    display: block
}

.modal__close i:before {
    line-height: 1;
    display: block
}

.modal__header {
    padding: 20px 40px 0 20px
}

@media (min-width:768px) {
    .modal__header {
        padding: 30px 50px 0 30px
    }
}

.modal__body {
    padding: 20px
}

@media (min-width:768px) {
    .modal__body {
        padding: 30px;
        padding-top: 0
    }
}

.modal__footer {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

@media (min-width:768px) {
    .modal__footer {
        padding: 30px
    }
}

.modal__footer:not(.modal__footer--bg) {
    padding-top: 0
}

.modal__title {
    font-weight: var(--main-font-weight-bold);
    font-size: var(--main-font-size-big);
    margin-bottom: 1em
}

.modal__title small {
    font-size: var(--main-font-size-base);
    font-weight: var(--main-font-weight)
}

.modal--error .modal__header,
.modal--info .modal__header,
.modal--success .modal__header {
    padding: 0
}

.modal--error .modal__dialog,
.modal--info .modal__dialog,
.modal--success .modal__dialog {
    text-align: center;
    max-width: 420px;
    padding-top: 90px
}

@media (min-width:768px) {

    .modal--error .modal__dialog,
    .modal--info .modal__dialog,
    .modal--success .modal__dialog {
        padding-top: 130px
    }
}

.modal--error .modal__dialog:before,
.modal--info .modal__dialog:before,
.modal--success .modal__dialog:before {
    content: var(--base-icon-exclamation);
    font-family: icons, Helvetica, Arial, sans-serif;
    border: 2px solid var(--main-color-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    border-radius: 50%;
    color: var(--main-color-warning);
    transform: translateX(-50%);
    line-height: 1;
    top: 20px;
    font-size: 24px;
    width: 40px;
    height: 40px
}

@media (min-width:768px) {

    .modal--error .modal__dialog:before,
    .modal--info .modal__dialog:before,
    .modal--success .modal__dialog:before {
        top: 40px;
        font-size: 40px;
        width: 60px;
        height: 60px;
        border-width: 3px
    }
}

.modal--error .modal__dialog:before {
    content: var(--base-icon-exclamation);
    border-color: var(--main-color-danger);
    color: var(--main-color-danger)
}

.modal--success .modal__dialog:before {
    content: var(--base-icon-check);
    border-color: var(--main-color-success);
    color: var(--main-color-success)
}

.modal--flyout {
    padding: 0;
    width: 320px;
    transition: all .3s ease
}

.modal--flyout .modal__dialog {
    height: 100%;
    height: 100svh;
    overflow: hidden;
    overflow-y: auto;
    transform: none
}

.modal--flyoutRight {
    position: fixed;
    right: -320px;
    left: auto
}

.modal--flyoutRight.open {
    right: 0
}

.modal--flyoutRight .modal__dialog {
    margin-left: auto;
    margin-right: 0
}

.modal--flyoutLeft {
    position: fixed;
    left: -320px;
    margin-right: auto;
    margin-left: 0;
    right: auto
}

.modal--flyoutLeft.open {
    left: 0
}

.modal--flyoutLeft .modal__dialog {
    margin-right: auto;
    margin-left: 0
}

.modal--loading .modal__title {
    opacity: 0
}

.modal--loading .modal__body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%
}

.modal--loading .modal__body .icon {
    font-size: 60px;
    animation: rotation 1s infinite linear
}

.modal--lg .modal__dialog {
    max-width: 1200px
}

.modal--md .modal__dialog {
    max-width: 900px
}

.modal--sm .modal__dialog {
    max-width: 600px
}

.modal--xs .modal__dialog {
    max-width: 420px
}

.modal--white .modal__dialog {
    background: var(--main-color-white);
    color: var(--main-color-black)
}

.modal--maxHeight .modal__body {
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: 0
}

.modal--maxHeight .modal__body .table__row--header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--main-color-white)
}

.modal--maxHeight .modal__footer {
    padding-top: 30px
}

.modal.open {
    opacity: 1;
    pointer-events: auto
}

.modal.open .modal__dialog {
    transform: none
}

.modal--disabled .modal__dialog {
    pointer-events: none;
    margin-top: -10px
}

.modal--disabled .modal__content {
    opacity: .2
}

.modal .contentTabs__header {
    gap: 16px
}

.modalBg {
    background: rgba(204, 204, 204, .7);
    z-index: 106;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none
}

body.modal-open,
html.modal-open {
    overflow: hidden
}

@media (min-width:1024px) {

    body.modal-open,
    html.modal-open {
        padding-right: 6px
    }
}

.radioListItem {
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 10px 10px 50px;
    border-top: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;
    cursor: pointer;
    min-height: 65px
}

.radioListItem:active,
.radioListItem:focus,
.radioListItem:focus-within,
.radioListItem:hover {
    background-color: var(--main-color-gray-background)
}

@media (min-width:768px) {

    .radioListItem:active,
    .radioListItem:focus,
    .radioListItem:focus-within,
    .radioListItem:hover {
        z-index: 1
    }
}

.radioListItem.hasChildren .childShippingGroup,
.radioListItem.hasChildren .valueStorageDropdown,
.radioListItem.isStockable .childShippingGroup,
.radioListItem.isStockable .valueStorageDropdown {
    position: relative;
    flex-direction: column
}

@media (min-width:768px) {

    .radioListItem.hasChildren .childShippingGroup,
    .radioListItem.hasChildren .valueStorageDropdown,
    .radioListItem.isStockable .childShippingGroup,
    .radioListItem.isStockable .valueStorageDropdown {
        z-index: 2
    }
}

.radioListItem.hasChildren .customSelect .customSelect__selected,
.radioListItem.isStockable .customSelect .customSelect__selected {
    display: flex;
    gap: 5px;
    align-items: center
}

.radioListItem.hasChildren .customSelect .customSelect__dropdownItemHeadline,
.radioListItem.isStockable .customSelect .customSelect__dropdownItemHeadline {
    display: flex;
    gap: 5px;
    align-items: center
}

.radioListItem.hasChildren .customSelect__errorMsg,
.radioListItem.isStockable .customSelect__errorMsg {
    display: none;
    color: var(--main-color-danger);
    margin-top: 4px
}

.radioListItem.hasChildren .customSelect__errorMsg.is-visible,
.radioListItem.isStockable .customSelect__errorMsg.is-visible {
    display: block
}

.radioListItem.disabled {
    opacity: .5;
    cursor: not-allowed;
    font-size: 1.6rem
}

.radioListItem.disabled .radioListItem__textHover {
    display: none;
    position: absolute;
    right: 0;
    width: 0;
    opacity: 0;
    z-index: 99;
    color: var(--main-color-black);
    padding-left: 50px;
    transition: all .2s ease-in-out
}

.radioListItem.disabled:hover {
    opacity: 1;
    transition: all .2s ease-in-out
}

.radioListItem.disabled:hover .radioListItem__textHover {
    display: block;
    left: 0;
    right: 60px;
    width: 100%;
    opacity: 1;
    background-color: var(--main-color-gray-background)
}

.radioListItem__image {
    padding-left: 20px
}

.radioListItem__image img {
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center center;
    display: block;
    width: 100px
}

.radioListItem__headline {
    font-size: var(--main-font-size-base)
}

.radioListItem__summary {
    display: block;
    margin-top: 5px
}

.radioListItem__text {
    flex-grow: 1
}

.radioListItem .icon {
    position: relative;
    z-index: 102;
    font-size: 1.6rem
}

.radioListItem input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer
}

.radioListItem input+i {
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--main-color-white);
    border: 1px solid var(--main-color-middle-gray);
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.radioListItem input+i:after {
    content: "";
    background: var(--main-color-primary);
    pointer-events: none;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 4px;
    top: 4px;
    opacity: 0;
    transition: opacity .1s ease-in;
    background-color: var(--main-color-primary);
    border-radius: 50%;
    display: block
}

.radioListItem input:focus+i {
    border-color: var(--main-color-primary)
}

.radioListItem input:checked+i:after {
    opacity: 1
}

.radioListItem.hasChildren {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px
}

.radioList {
    margin-bottom: -20px
}

.radioList .radioListItem {
    margin-bottom: -1px
}

.radioList--small {
    margin: 0
}

.radioList--small .radioListItem {
    margin-bottom: 0;
    border-radius: 0;
    padding: 5px 10px 5px 40px;
    min-height: 53px;
    margin-top: -1px
}

.radioList--small .radioListItem:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 0
}

.radioList--small .radioListItem:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.radioList--small .radioListItem__summary {
    margin-top: 0
}

.radioList--small .radioListItem input+i {
    left: 10px
}

.linkWithIcon {
    display: inline-flex;
    align-items: center;
    color: var(--main-color-black);
    text-decoration: none;
    line-height: 1
}

.linkWithIcon .icon {
    font-size: 1.2em;
    position: relative
}

.linkWithIcon .icon:first-child {
    margin-right: 5px
}

.linkWithIcon .icon:last-child {
    margin-left: 5px
}

.linkWithIcon:active,
.linkWithIcon:focus,
.linkWithIcon:hover {
    text-decoration: none;
    color: var(--main-link-color-hover)
}

.linkWithIcon.is-error,
.linkWithIcon.is-loading,
.linkWithIcon.is-success {
    color: var(--main-color-middle-gray) !important;
    cursor: not-allowed;
    position: relative;
    pointer-events: none;
    background: 0 0 !important
}

.linkWithIcon.is-error:after,
.linkWithIcon.is-loading:after,
.linkWithIcon.is-success:after {
    display: none
}

.linkWithIcon.is-error:before,
.linkWithIcon.is-loading:before,
.linkWithIcon.is-success:before {
    font-family: icons, Helvetica, Arial, sans-serif;
    position: absolute;
    left: 0;
    top: 50%;
    line-height: 20px;
    margin-top: -10px
}

.linkWithIcon.is-error .icon,
.linkWithIcon.is-loading .icon,
.linkWithIcon.is-success .icon {
    opacity: 0
}

.linkWithIcon.is-loading {
    cursor: wait
}

.linkWithIcon.is-loading:before {
    content: var(--base-icon-loading);
    opacity: 1;
    animation: rotation 1s infinite ease-in-out
}

.linkWithIcon.is-success {
    color: var(--main-color-success) !important
}

.linkWithIcon.is-success:before {
    content: var(--base-icon-check);
    animation: scaleRequestIcon 1s forwards ease-in-out
}

.linkWithIcon.is-error {
    color: var(--main-color-danger) !important
}

.linkWithIcon.is-error:before {
    content: var(--base-icon-close);
    animation: scaleRequestIcon 1s forwards ease-in-out
}

button.linkWithIcon {
    border: 0;
    padding: 0;
    background: 0 0;
    color: var(--main-color-black);
    text-decoration: none;
    cursor: pointer
}

button.linkWithIcon:active,
button.linkWithIcon:focus,
button.linkWithIcon:hover {
    text-decoration: none;
    color: var(--main-link-color-hover)
}

.shareLink {
    color: var(--main-color-black);
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px 10px 10px;
    border: 1px solid var(--main-color-middle-gray);
    border-radius: 8px;
    cursor: pointer
}

.shareLink:hover {
    text-decoration: none;
    color: var(--main-color-white);
    background: var(--main-link-color);
    border-color: var(--main-link-color)
}

.shareLink:active,
.shareLink:focus {
    text-decoration: none;
    color: var(--main-color-white);
    background: var(--main-link-color-hover);
    border-color: var(--main-link-color-hover)
}

.shareLink .icon {
    margin-right: 5px;
    width: 30px;
    height: 30px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.shareLink.is-error,
.shareLink.is-loading,
.shareLink.is-success {
    background: var(--main-color-middle-gray) !important;
    border-color: var(--main-color-middle-gray) !important;
    cursor: not-allowed;
    pointer-events: none
}

.shareLink.is-loading {
    cursor: wait;
    color: var(--main-color-white) !important
}

.shareLink.is-loading .icon:before {
    content: var(--base-icon-loading);
    animation: rotation 1s infinite ease-in-out
}

.shareLink.is-success {
    background: var(--main-color-success) !important;
    border-color: var(--main-color-success) !important;
    color: var(--main-color-white) !important
}

.shareLink.is-success .icon:before {
    content: var(--base-icon-check);
    animation: scaleRequestIconBtn 1s forwards ease-in-out
}

.shareLink.is-error {
    background: var(--main-color-danger) !important;
    border-color: var(--main-color-danger) !important;
    color: var(--main-color-white) !important
}

.shareLink.is-error .icon:before {
    content: var(--base-icon-close);
    animation: scaleRequestIconBtn 1s forwards ease-in-out
}

.shareLinks {
    display: flex;
    flex-direction: column;
    margin-bottom: -10px
}

.shareLinks .shareLink {
    margin-bottom: 10px
}

.customSelect {
    position: relative;
    width: 100%
}

.customSelect__selectedLabel {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    overflow: hidden
}

.customSelect__selectedCount {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--main-color-primary);
    color: var(--main-color-primary-contrast);
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    font-size: 1.4rem;
    vertical-align: middle;
    margin-top: -2px;
    display: none;
    flex-shrink: 0
}

.customSelect__selectedCount.is-active {
    display: inline-flex
}

.customSelect__selected {
    padding-right: 40px;
    display: flex
}

.customSelect__selected:focus,
.customSelect__selected:focus-within {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.customSelect__hiddenFormField {
    display: none
}

.customSelect__dropdown {
    z-index: 2;
    background: var(--main-color-white);
    font-size: var(--main-font-size-small);
    overflow: hidden;
    flex-direction: column
}

@media (max-width:767px) {
    .customSelect__dropdown {
        box-shadow: 0 0 40px rgba(0, 0, 0, .2);
        padding: 10px;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        translate: 0 110%;
        transition: .2s ease-in-out;
        pointer-events: none;
        opacity: 0;
        z-index: 104;
        max-height: 100vh;
        max-height: 100svh
    }
}

@media (min-width:768px) {
    .customSelect__dropdown {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        min-width: 300px;
        max-width: 100vw;
        box-shadow: 0 0 20px rgba(0, 0, 0, .1);
        border: 1px solid var(--main-color-middle-gray);
        border-radius: 8px;
        margin-top: 5px;
        display: none
    }
}

.customSelect__dropdownClose {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1
}

@media (min-width:768px) {
    .customSelect__dropdownClose {
        display: none
    }
}

.customSelect__dropdownTitle {
    font-weight: var(--main-font-weight-bold);
    padding-right: 40px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.8rem
}

.customSelect__dropdownTitle:not(:last-child) {
    margin-bottom: 20px
}

@media (min-width:768px) {
    .customSelect__dropdownTitle {
        display: none
    }
}

.customSelect__dropdownHeader {
    padding: 10px;
    margin-bottom: 10px
}

.customSelect__dropdownBody {
    overflow: hidden;
    overflow-y: auto
}

@media (min-width:768px) {
    .customSelect__dropdownBody {
        max-height: 260px
    }
}

.customSelect__dropdownFooter {
    margin-top: 10px;
    padding: 10px;
    padding-bottom: 15px;
    border-top: 1px solid var(--main-color-light-gray);
    text-align: center
}

@media (max-width:767px) {
    .customSelect__dropdownFooter {
        padding-bottom: 0
    }
}

.customSelect__dropdownFooter .button {
    width: 100%;
    margin-bottom: 10px
}

.customSelect__dropdownFooter .linkWithIcon {
    font-size: var(--main-font-size-small)
}

.customSelect__dropdownFooter .linkWithIcon .icon {
    margin: 0
}

.customSelect__dropdownItemHeadline {
    font-weight: var(--main-font-weight-bold)
}

.customSelect__dropdownItemText {
    font-size: .9em;
    color: var(--main-color-dark-gray);
    padding-left: 20px
}

.customSelect__dropdownItem {
    padding: 10px 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--main-color-black);
    text-decoration: none
}

.customSelect__dropdownItem:focus,
.customSelect__dropdownItem:hover {
    background: var(--main-color-light-gray);
    color: var(--main-color-black);
    text-decoration: none;
    outline: 0
}

.customSelect__dropdownItem.is-active {
    background: var(--main-color-light-gray)
}

.customSelect__dropdownItem:focus-within {
    border: 2px dotted var(--main-color-primary);
    outline-offset: 0
}

.customSelect__dropdownItem.disabled {
    pointer-events: none;
    cursor: not-allowed;
    color: var(--main-color-middle-gray)
}

.customSelect__dropdownItem.disabled .customSelect__dropdownItemText {
    color: var(--main-color-middle-gray)
}

.customSelect__dropdownItem.disabled [data-toggle=tooltip] {
    pointer-events: auto
}

.customSelect__dropdownItem--checkbox,
.customSelect__dropdownItem--radio {
    padding-left: 40px
}

.customSelect__dropdownItem--checkbox:after,
.customSelect__dropdownItem--checkbox:before,
.customSelect__dropdownItem--radio:after,
.customSelect__dropdownItem--radio:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    translate: 0 -50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.customSelect__dropdownItem--checkbox:before,
.customSelect__dropdownItem--radio:before {
    border: 1px solid var(--main-color-middle-gray);
    border-radius: 8px;
    background: var(--main-color-white)
}

.customSelect__dropdownItem--checkbox:after,
.customSelect__dropdownItem--radio:after {
    opacity: 0
}

.customSelect__dropdownItem--checkbox.is-active:before,
.customSelect__dropdownItem--radio.is-active:before {
    border-color: var(--main-color-black)
}

.customSelect__dropdownItem--checkbox.is-active:after,
.customSelect__dropdownItem--radio.is-active:after {
    opacity: 1
}

.customSelect__dropdownItem--radio:after,
.customSelect__dropdownItem--radio:before {
    border-radius: 50%
}

.customSelect__dropdownItem--radio:after {
    background: var(--main-color-black);
    width: 12px;
    height: 12px;
    margin-left: 4px;
    opacity: 0
}

.customSelect__dropdownItem--checkbox:after {
    content: var(--base-icon-check);
    font-family: icons, Helvetica, Arial, sans-serif;
    font-size: 18px
}

.customSelect__dropdownItem--checkbox.is-active {
    background: 0 0
}

.customSelect__dropdownItem--checkbox.is-active:before {
    border-color: var(--main-color-black)
}

.customSelect__dropdownItem--checkbox.is-active:after {
    opacity: 1
}

.customSelect select {
    display: none
}

.customSelect.is-active .customSelect__selected {
    border-color: var(--main-color-primary)
}

.customSelect.is-active .customSelect__selected:after {
    content: var(--base-icon-angle-up)
}

.customSelect.is-active .customSelect__dropdown {
    display: flex
}

@media (max-width:767px) {
    .customSelect.is-active .customSelect__dropdown {
        translate: 0 0;
        pointer-events: auto;
        opacity: 1
    }
}

.customSelect.is-error .customSelect__selected,
.customSelect.is-loading .customSelect__selected,
.customSelect.is-success .customSelect__selected {
    background: var(--main-color-middle-gray) !important;
    border-color: var(--main-color-middle-gray) !important;
    cursor: not-allowed;
    pointer-events: none;
    padding-right: 40px;
    padding-left: 10px;
    position: relative
}

.customSelect.is-error .customSelect__selected .icon,
.customSelect.is-loading .customSelect__selected .icon,
.customSelect.is-success .customSelect__selected .icon {
    opacity: 0
}

.customSelect.is-error .customSelect__selected:after,
.customSelect.is-loading .customSelect__selected:after,
.customSelect.is-success .customSelect__selected:after {
    position: absolute;
    right: 15px;
    top: 50%;
    font-family: icons, Helvetica, Arial, sans-serif;
    transform: translateY(0);
    translate: 0 -50%;
    font-size: 24px;
    margin-top: 0
}

.customSelect.is-loading .customSelect__selected {
    cursor: wait;
    color: var(--main-color-black) !important
}

.customSelect.is-loading .customSelect__selected:after {
    content: var(--base-icon-loading);
    opacity: 1;
    animation: rotation 1s infinite ease-in-out
}

.customSelect.is-success .customSelect__selected {
    background: var(--main-color-success) !important;
    border-color: var(--main-color-success) !important;
    color: var(--main-color-black) !important
}

.customSelect.is-success .customSelect__selected:after {
    content: var(--base-icon-check);
    animation: scaleRequestIconBtn 1s forwards ease-in-out
}

.customSelect.is-error .customSelect__selected {
    background: var(--main-color-danger) !important;
    border-color: var(--main-color-danger) !important;
    color: var(--main-color-white) !important
}

.customSelect.is-error .customSelect__selected:after {
    content: var(--base-icon-close);
    animation: scaleRequestIconBtn 1s forwards ease-in-out
}

.customSelect--small {
    width: auto;
    display: inline-flex
}

.customSelect--small .customSelect__selected {
    padding: 0;
    padding-right: 20px;
    background: 0 0;
    border: 0;
    border-radius: 0
}

.customSelect--small .customSelect__selected:after {
    font-size: 1.2rem;
    right: 0
}

.customSelect--small.is-error .customSelect__selected,
.customSelect--small.is-loading .customSelect__selected,
.customSelect--small.is-success .customSelect__selected {
    padding-right: 20px;
    padding-left: 0
}

.customSelect--small.is-error .customSelect__selected:after,
.customSelect--small.is-loading .customSelect__selected:after,
.customSelect--small.is-success .customSelect__selected:after {
    right: 0;
    font-size: 16px
}

.customSelect--small.is-loading .customSelect__selected {
    cursor: wait;
    background: 0 0 !important;
    border-color: transparent !important;
    color: var(--main-color-black) !important
}

.customSelect--small.is-success .customSelect__selected {
    background: 0 0 !important;
    border-color: transparent !important;
    color: var(--main-color-success) !important
}

.customSelect--small.is-error .customSelect__selected {
    background: 0 0 !important;
    border-color: transparent !important;
    color: var(--main-color-danger) !important
}

.customSelect--openRight .customSelect__dropdown {
    left: auto;
    right: 0
}

.customSelect--openTop .customSelect__dropdown {
    top: auto;
    bottom: 35px
}

.viewer360Images img {
    user-drag: none;
    -webkit-user-drag: none;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center center
}

.viewer360Images img:not(.is-active) {
    display: none
}

.viewer360 {
    position: relative;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.viewer360__loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: .4s ease-in-out;
    color: var(--main-color-dark-gray);
    line-height: 1;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
    border-radius: 50%;
    background: var(--main-color-white);
    z-index: 1
}

.viewer360__loader:before {
    font-family: icons, Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    content: var(--base-icon-loading);
    opacity: 1;
    animation: rotation 1s infinite ease-in-out;
    position: absolute;
    left: 50%;
    top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: -15px
}

.viewer360.is-loading {
    cursor: wait;
    pointer-events: none
}

.viewer360.loaded .viewer360__loader {
    opacity: 0;
    pointer-events: none
}

.viewer360Wrapper {
    position: relative;
    pointer-events: none
}

.viewer360Wrapper__zoom {
    font-size: 24px;
    color: var(--main-color-dark-gray);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--main-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: .2s ease-in-out
}

.viewer360Wrapper__zoom:active,
.viewer360Wrapper__zoom:focus,
.viewer360Wrapper__zoom:hover {
    color: var(--main-color-primary)
}

.viewer360Wrapper:has(.viewer360.loaded) {
    pointer-events: auto
}

.viewer360Wrapper:has(.viewer360.loaded) .viewer360Wrapper__zoom {
    opacity: 1;
    pointer-events: auto
}

.fullscreenGallery .viewer360Images {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.fullscreenGallery .viewer360Images img {
    position: absolute;
    width: 100%;
    height: 100% !important
}

.contentBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, .08);
    color: var(--main-color-black);
    text-decoration: none
}

@media (min-width:768px) {
    .contentBox {
        box-shadow: 0 0 40px rgba(0, 0, 0, .08)
    }
}

.contentBox .contentImage {
    max-width: 100%;
    width: 100%;
    background-color: var(--main-color-white);
    overflow: hidden
}

.contentBox .contentImage img {
    object-fit: cover;
    aspect-ratio: 4/3;
    transition: .2s ease-in-out;
    display: block;
    min-width: 100%
}

.contentBox .contentText {
    padding: 30px;
    flex-grow: 1;
    display: flex
}

.contentBox .contentText .textcontent {
    width: 100%
}

@container containerRowColumn (min-inline-size:600px) {
    .contentBox {
        flex-direction: row
    }

    .contentBox .contentImage {
        width: 50%;
        flex-shrink: 0;
        display: flex
    }

    .contentBox .contentImage>.textcontent {
        display: flex
    }

    .contentBox .contentImage img {
        min-height: 100%
    }

    .contentBox.reverse {
        flex-direction: row-reverse
    }
}

.contentBox>.link {
    color: var(--main-color-black);
    text-decoration: none;
    display: flex;
    flex-direction: column
}

@container containerRowColumn (min-inline-size:600px) {
    .contentBox>.link {
        flex-direction: row
    }
}

.contentBox>.link:active,
.contentBox>.link:focus,
.contentBox>.link:hover {
    color: var(--main-color-black);
    text-decoration: none
}

.contentBox>.link:active .contentImage img,
.contentBox>.link:focus .contentImage img,
.contentBox>.link:hover .contentImage img {
    scale: 1.05
}

a.contentBox {
    color: var(--main-color-black);
    text-decoration: none
}

a.contentBox:active,
a.contentBox:focus,
a.contentBox:hover {
    color: var(--main-color-black);
    text-decoration: none
}

a.contentBox:active .contentImage img,
a.contentBox:focus .contentImage img,
a.contentBox:hover .contentImage img {
    scale: 1.05
}

.contentBox.hasLink>.link {
    cursor: pointer;
    color: var(--main-color-black)
}

.contentBox.hasLink>.link:active,
.contentBox.hasLink>.link:focus,
.contentBox.hasLink>.link:hover {
    color: var(--main-color-black);
    text-decoration: none
}

.contentBox.hasLink>.link:active .contentImage img,
.contentBox.hasLink>.link:focus .contentImage img,
.contentBox.hasLink>.link:hover .contentImage img {
    scale: 1.05
}

.contentBox.contentBox--textinbox {
    position: relative;
    color: var(--main-color-white);
    border-radius: 0
}

.contentBox.contentBox--textinbox .contentText {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 15px;
    z-index: 1
}

@media (min-width:768px) {
    .contentBox.contentBox--textinbox .contentText {
        padding: 30px
    }
}

.contentBox.contentBox--textinbox .contentText .h2,
.contentBox.contentBox--textinbox .contentText h2 {
    line-height: 1.1;
    font-weight: 400;
    font-size: 1.6rem
}

@media (min-width:768px) {

    .contentBox.contentBox--textinbox .contentText .h2,
    .contentBox.contentBox--textinbox .contentText h2 {
        font-size: 2rem
    }
}

@media (min-width:1024px) {

    .contentBox.contentBox--textinbox .contentText .h2,
    .contentBox.contentBox--textinbox .contentText h2 {
        font-size: 2.6rem
    }
}

@media (min-width:1250px) {

    .contentBox.contentBox--textinbox .contentText .h2,
    .contentBox.contentBox--textinbox .contentText h2 {
        font-size: 3rem
    }
}

.contentBox.contentBox--textinbox .contentText .h2:last-child,
.contentBox.contentBox--textinbox .contentText h2:last-child {
    margin-bottom: 0
}

.contentBox.contentBox--textinbox .contentText a {
    color: var(--main-color-white)
}

.contentBox.contentBox--textinbox .contentText .buttonLink:after {
    background: var(--main-color-white)
}

.contentBox.contentBox--textinbox .contentImage img {
    aspect-ratio: auto
}

.contentBox.contentBox--textinbox.hasLink>.link {
    color: var(--main-color-white)
}

.contentBox.contentBox--textinbox.hasLink>.link:active,
.contentBox.contentBox--textinbox.hasLink>.link:focus,
.contentBox.contentBox--textinbox.hasLink>.link:hover {
    color: var(--main-color-white)
}

a.contentBox.contentBox--textinbox:active,
a.contentBox.contentBox--textinbox:focus,
a.contentBox.contentBox--textinbox:hover {
    color: var(--main-color-white)
}

.contentTabs__header {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    border-bottom: 1px solid var(--main-color-gray-base);
    gap: 40px
}

.contentTabs__header li {
    margin: 0;
    padding: 15px 0;
    list-style-type: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: var(--main-font-weight-bold);
    outline: 0
}

.contentTabs__header li.is-active,
.contentTabs__header li:hover {
    border-bottom: 1px solid var(--main-color-black);
    margin-bottom: -1px
}

.contentTabs__header li:focus,
.contentTabs__header li:focus-visible,
.contentTabs__header li:focus-within {
    color: var(--main-color-primary)
}

@media (max-width:767px) {
    .contentTabs__header {
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        max-width: 100vw;
        gap: 20px;
        padding-bottom: 1px
    }

    .contentTabs__header li {
        white-space: nowrap;
        scroll-snap-align: center;
        flex-shrink: 0
    }
}

.contentTabs__content {
    padding: 30px 0
}

.contentTabs__content>* {
    display: none
}

.contentTabs__content>.is-active {
    display: block
}

.contentTabs:not(.initialized) .contentTabs__content>:first-child {
    display: block
}

@media (max-width:767px) {
    .contentTabs.contentTabs--responsive {
        display: flex;
        flex-direction: column
    }

    .contentTabs.contentTabs--responsive .contentTabs__content,
    .contentTabs.contentTabs--responsive .contentTabs__header {
        display: contents
    }

    .contentTabs.contentTabs--responsive .contentTabs__header li {
        width: 100%;
        justify-content: space-between;
        white-space: normal;
        flex-shrink: 1;
        border-bottom: 1px solid var(--main-color-gray-base)
    }

    .contentTabs.contentTabs--responsive .contentTabs__header li:after {
        content: var(--base-icon-angle-down-light);
        font-family: icons, Helvetica, Arial, sans-serif;
        font-size: 12px;
        display: block;
        transition: all .2s ease-in-out
    }

    .contentTabs.contentTabs--responsive .contentTabs__header li.is-active,
    .contentTabs.contentTabs--responsive .contentTabs__header li.is-open {
        margin-bottom: 0;
        border-bottom: 1px solid var(--main-color-gray-base)
    }

    .contentTabs.contentTabs--responsive .contentTabs__header li.is-active:after,
    .contentTabs.contentTabs--responsive .contentTabs__header li.is-open:after {
        content: var(--base-icon-angle-up-light)
    }

    .contentTabs.contentTabs--responsive .contentTabs__content>* {
        display: none;
        padding: 10px 0 10px
    }

    .contentTabs.contentTabs--responsive .contentTabs__content>.is-open {
        display: block
    }
}

.itemcardBuybox .contentTabs__header {
    justify-content: flex-start;
    gap: 40px
}

.itemcardBuybox .contentTabs__header li:after {
    content: var(--base-icon-angle-down-light);
    font-family: icons, Helvetica, Arial, sans-serif;
    font-size: 12px;
    display: block;
    transition: all .2s ease-in-out
}

.itemcardBuybox .contentTabs__header li.is-active:after,
.itemcardBuybox .contentTabs__header li.is-open:after,
.itemcardBuybox .contentTabs__header li:hover:after {
    content: var(--base-icon-angle-up-light)
}

.tabs--pills {
    margin-bottom: 30px
}

.tabs--pills .contentTabs__header {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--main-color-secondary);
    border-radius: 50px;
    overflow: hidden;
    width: max-content;
    gap: 0
}

.tabs--pills .contentTabs__header li {
    padding: 8px 20px;
    cursor: pointer;
    background: var(--main-color-white);
    text-align: center;
    align-items: center;
    color: var(--main-color-secondary);
    transition: background-color .2s, color .2s;
    user-select: none;
    border-radius: 50px;
    font-weight: var(--main-font-weight-bold);
    line-height: 26px;
    min-width: 133px
}

.tabs--pills .contentTabs__header li:focus-visible {
    color: var(--main-color-primary)
}

.tabs--pills .contentTabs__header li a {
    text-decoration: none;
    flex-grow: 1;
    color: var(--main-color-secondary)
}

.tabs--pills .contentTabs__header li.is-active {
    background: var(--main-color-secondary);
    color: var(--main-color-white);
    cursor: default;
    justify-content: center
}

.tabs--pills .contentTabs__header li:not(.is-active):hover {
    color: var(--main-color-secondary-medium);
    background: 0 0;
    border-radius: 0
}

.tabs--pills .contentTabs__header li:not(.is-active):hover a {
    color: var(--main-color-secondary-medium)
}

.emptybox {
    padding: 20px;
    background-color: var(--main-color-light-gray)
}

@media (min-width:1024px) {
    .emptybox {
        padding: 30px
    }
}

.flashMessage {
    width: 400px;
    max-width: calc(100% - 40px);
    padding: 15px 20px 15px 55px;
    background-color: var(--main-color-white);
    color: var(--main-color-black);
    align-items: center;
    display: flex;
    cursor: pointer;
    position: fixed;
    box-shadow: 0 0 40px rgba(0, 0, 0, .1);
    border-radius: 8px;
    font-size: var(--main-font-size-small);
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    left: 50%;
    bottom: 40%;
    transition: transform .3s ease, opacity .3s ease;
    will-change: transform, opacity;
    z-index: 109
}

.flashMessage.is-active {
    pointer-events: auto
}

.flashMessage__icon {
    position: absolute;
    left: 15px;
    top: 50%;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: var(--main-color-light-gray);
    text-align: center;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    translate: 0 -50%;
    color: var(--main-color-white)
}

.flashMessage__icon .icon {
    display: block;
    line-height: 1
}

.flashMessage__close {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--main-font-size-base);
    width: 20px;
    height: 20px;
    transition: .2s ease-in;
    background: var(--main-color-white);
    border-radius: 50%;
    color: var(--main-color-black)
}

.flashMessage__close .icon {
    display: block;
    line-height: 1;
    transition: scale .2s ease-in
}

.flashMessage__close:hover {
    background: var(--main-color-black);
    color: var(--main-color-white)
}

.flashMessage__msg:not(:last-child) {
    padding-bottom: 2px;
    margin-bottom: 2px
}

.flashMessage--warning .flashMessage__icon {
    background: var(--main-color-warning);
    color: var(--main-color-warning-contrast)
}

.flashMessage--error .flashMessage__icon {
    background: var(--main-color-danger);
    color: var(--main-color-danger-contrast)
}

.flashMessage--success .flashMessage__icon {
    background: var(--main-color-success);
    color: var(--main-color-success-contrast)
}

.breadcrumb {
    margin: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

@media (max-width:1023px) {
    .breadcrumb {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: auto
    }
}

.breadcrumb li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline-flex;
    align-items: center
}

.breadcrumb i {
    margin: 0 8px
}

.breadcrumb a i {
    display: block;
    margin: 0;
    font-size: 14px
}

.breadcrumb a:focus-within {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.breadcrumb a:focus-within .icon-home {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.breadcrumb .current {
    color: var(--main-color-black)
}

.breadcrumb .current a {
    color: var(--main-color-black)
}

.breadcrumbBackbutton {
    color: var(--main-color-dark-gray);
    display: inline-flex;
    align-items: center
}

.breadcrumbBackbutton:hover {
    color: var(--main-color-primary);
    text-decoration: none
}

.breadcrumbBackbutton i {
    margin-right: 4px
}

@media (max-width:1023px) {
    .breadcrumbBackbutton {
        margin-top: 10px
    }
}

.breadcrumbWrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: var(--main-font-size-small);
    line-height: 1;
    color: var(--main-color-dark-gray)
}

@media (min-width:1024px) {
    .breadcrumbWrapper {
        margin-bottom: 40px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between
    }
}

.breadcrumbWrapper a {
    color: var(--main-color-dark-gray);
    text-decoration: none
}

.breadcrumbWrapper a:hover {
    color: var(--main-color-primary);
    text-decoration: none
}

body.pg_404 .breadcrumbWrapper {
    display: none
}

.navToggler {
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: relative
}

.navToggler__bar {
    width: 100%;
    height: 2px;
    background-color: var(--main-color-black);
    border-radius: 2px;
    position: absolute;
    left: 0;
    width: calc(100% - 22px);
    width: -moz-calc(100% - 22px);
    width: -webkit-calc(100% - 22px);
    width: -o-calc(100% - 22px);
    transition: .2s linear
}

.navToggler__bar:first-child {
    top: 11px
}

.navToggler__bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%)
}

.navToggler__bar:last-child {
    bottom: 11px
}

.navToggler.is-active .navToggler__bar:first-child {
    rotate: 45deg;
    top: 19px
}

.navToggler.is-active .navToggler__bar:nth-child(2) {
    height: 0;
    width: 0;
    left: 50%
}

.navToggler.is-active .navToggler__bar:last-child {
    rotate: -45deg;
    bottom: 19px
}

.js-toggleLinkSlide {
    cursor: pointer
}

.navChildrenToggle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.navChildrenToggle:after {
    content: var(--base-icon-plus);
    font-family: icons, Helvetica, Arial, sans-serif
}

.navChildrenToggle.is-active:after {
    content: var(--base-icon-minus)
}

.nav {
    display: flex;
    flex-wrap: nowrap
}

.nav ul {
    margin: 0;
    padding: 0
}

.nav li {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.nav a {
    color: var(--main-color-black);
    text-decoration: none;
    font-size: 1.4rem
}

.nav a.active,
.nav a.active_tree,
.nav a:active,
.nav a:focus,
.nav a:hover {
    color: var(--main-color-primary)
}

.nav li.active>a,
.nav li.active_tree>a,
.nav li:active>a,
.nav li:focus>a,
.nav li:hover>a {
    color: var(--main-color-primary)
}

.nav ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px
}

@media (min-width:768px) {
    .nav ul {
        margin-left: -15px;
        margin-right: -15px
    }
}

.nav ul>li {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px
}

@media (min-width:768px) {
    .nav ul>li {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 0;
        margin-bottom: 0
    }
}

.nav>a {
    margin-right: 20px
}

@media (min-width:768px) {
    .nav>a {
        margin-right: 30px
    }
}

.megaMenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 101;
    background: var(--main-color-white);
    width: 100%;
    border-top: 1px solid var(--main-color-black);
    box-shadow: 0 20px 20px rgba(0, 0, 0, .1);
    padding-top: 60px;
    padding-bottom: 60px
}

.megaMenu li {
    padding-top: 5px;
    padding-bottom: 5px
}

.megaMenu a {
    font-weight: var(--main-font-weight);
    display: block;
    font-size: 16px;
    line-height: 1.33;
    margin-bottom: 10px
}

@media (min-width:1540px) {
    .megaMenu a {
        font-size: 18px
    }
}

.megaMenu a.navigation__additionalLink,
.megaMenu a.navigation__viewAll {
    display: inline-flex
}

.megaMenu__navigation {
    max-width: 1500px
}

.megaMenu__navigation>ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 60px
}

.megaMenu__navigation>ul>li {
    display: flex;
    flex-direction: column;
    width: calc(33.3333333333% - 40px);
    border-right: 1px solid var(--main-color-gray-base);
    padding-right: 60px
}

.megaMenu__navigation>ul>li:last-child,
.megaMenu__navigation>ul>li:nth-child(3) {
    border-right: none
}

.megaMenu__navigation>ul>li:active>a,
.megaMenu__navigation>ul>li:focus>a,
.megaMenu__navigation>ul>li:hover>a {
    color: var(--main-color-black)
}

.megaMenu__navigation>ul>li>a:not(.navigation__viewAll):not(.navigation__additionalLink) {
    font-size: 2.5rem;
    font-weight: var(--main-font-weight-medium);
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    line-height: 1.2;
    color: var(--main-color-black)
}

@media (min-width:1540px) {
    .megaMenu__navigation>ul>li>a:not(.navigation__viewAll):not(.navigation__additionalLink) {
        font-size: 3rem
    }
}

.megaMenu__navigation>ul>li>a:not(.navigation__viewAll):not(.navigation__additionalLink):has(+ .navigation__additionalLink) {
    margin-bottom: 10px
}

.megaMenu__navigation>ul>li>a.navigation__additionalLink {
    align-self: flex-end;
    margin-bottom: 40px
}

@media (max-width:1539px) {
    .megaMenu__navigation>ul {
        gap: 30px
    }

    .megaMenu__navigation>ul>li {
        padding-right: 30px
    }
}

.megaMenu ul.nav--content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 30px
}

.megaMenu ul.nav--content>li {
    display: flex;
    flex-direction: column;
    width: calc(25% - 30px);
    border-right: 1px solid var(--main-color-gray-base);
    padding-right: 60px
}

.megaMenu ul.nav--content>li:last-child,
.megaMenu ul.nav--content>li:nth-child(4) {
    border-right: none
}

.megaMenu ul.nav--content>li>a {
    font-size: 3rem;
    font-weight: var(--main-font-weight-medium);
    color: var(--main-color-black);
    display: flex;
    line-height: 1.2;
    hyphens: auto;
    flex-direction: column
}

.megaMenu ul.nav--content>li>a .navigationName {
    min-height: 80px
}

.megaMenu ul.nav--content>li>a:hover {
    color: var(--main-color-primary)
}

@media (max-width:1539px) {
    .megaMenu ul.nav--content>li {
        padding-right: 30px
    }
}

.megaMenu .groupNavigationWrapper {
    display: flex;
    justify-content: space-between;
    gap: 10px
}

.megaMenu .groupNavigationWrapper ul.level_3 {
    flex-shrink: 0
}

.megaMenu .groupNavigationWrapper ul.level_3:not(:has(.groupNavigation)) {
    display: none
}

.megaMenu .groupNavigationWrapper:not(:has(.categoryIconLink)):has(.groupNavigation:nth-of-type(2)) ul.level_3:has(.groupNavigationTitle) {
    column-gap: 20px;
    column-count: 2
}

@media (min-width:1540px) {
    .megaMenu .groupNavigationWrapper:not(:has(.categoryIconLink)):has(.groupNavigation:nth-of-type(2)) ul.level_3:has(.groupNavigationTitle) {
        column-gap: 40px
    }
}

.megaMenu .groupNavigationWrapper:not(:has(.categoryIconLink)):has(.groupNavigation:nth-of-type(2)) ul.level_3:has(.groupNavigationTitle) .groupNavigation {
    break-inside: avoid
}

.megaMenu .groupNavigationWrapper:not(:has(.categoryIconLink)):has(.groupNavigation:nth-of-type(2)) ul.level_3:has(.groupNavigationTitle) .groupNavigationList {
    column-count: 1
}

.megaMenu .groupNavigation {
    margin-bottom: 40px
}

.megaMenu .categoryIcon {
    max-width: 220px;
    aspect-ratio: 1;
    border-radius: 8px
}

@media (max-width:1539px) {
    .megaMenu .categoryIcon {
        max-width: 180px
    }
}

.megaMenu .categoryIconLink {
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.megaMenu .categoryIconLink .navigation__viewAll {
    max-width: 220px;
    justify-content: space-between
}

.megaMenu .container {
    font-size: var(--main-font-size-base);
    display: flex;
    padding-top: 0
}

.megaMenu .container .megaMenu__navigation {
    flex-grow: 1
}

.megaMenu .container .megaMenu__content {
    flex-shrink: 0;
    padding-left: 10px;
    width: 25%;
    display: none
}

.megaMenu .container .megaMenu__content>a {
    flex-direction: column;
    align-items: flex-start
}

.megaMenu .container .megaMenu__content>a .categoryIcon {
    margin-top: 40px;
    margin-bottom: 20px
}

@media (min-width:1250px) {
    .megaMenu .container .megaMenu__content {
        display: block
    }
}

.megaMenu::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 0;
    width: 100%;
    height: 35px;
    background: 0 0;
    border-color: transparent;
    pointer-events: auto;
    display: block
}

.megaMenu .navigation__additionalLink,
.megaMenu .navigation__viewAll {
    font-size: 18px;
    font-weight: var(--main-font-weight);
    color: var(--main-color-black);
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.megaMenu .navigation__additionalLink .icon,
.megaMenu .navigation__viewAll .icon {
    font-size: 12px
}

.megaMenu .navigation__additionalLink:active,
.megaMenu .navigation__additionalLink:focus,
.megaMenu .navigation__additionalLink:hover,
.megaMenu .navigation__viewAll:active,
.megaMenu .navigation__viewAll:focus,
.megaMenu .navigation__viewAll:hover {
    color: var(--main-color-primary)
}

@media (max-width:1539px) {

    .megaMenu .navigation__additionalLink,
    .megaMenu .navigation__viewAll {
        font-size: 16px
    }
}

.groupNavigationTitle {
    font-size: 15px;
    font-weight: var(--main-font-weight-bold);
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1.33;
    margin-bottom: 25px;
    display: inline-flex
}

.subnav {
    font-size: var(--main-font-size-base)
}

.subnav ul {
    margin: 0;
    padding: 5px 0
}

.subnav ul:last-child {
    padding-bottom: 0
}

.subnav li {
    margin: 0;
    padding: 5px 0;
    list-style-type: none
}

.subnav li:last-child {
    padding-bottom: 0
}

.subnav li:not(.is-active)>ul {
    display: none
}

.subnav a {
    color: var(--main-color-black);
    font-weight: var(--main-font-weight);
    text-decoration: none;
    position: relative
}

.subnav a:hover {
    color: var(--main-color-primary);
    text-decoration: none
}

.subnav>ul {
    padding: 0
}

.subnav>ul>li {
    padding-bottom: 10px
}

.subnav>ul>li>a {
    font-weight: var(--main-font-weight-bold);
    font-size: var(--main-font-size-big)
}

.subnav>ul ul {
    padding-top: 10px
}

.subnav>ul ul a {
    padding-left: 20px;
    white-space: nowrap
}

.subnav>ul ul a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-30px);
    width: 12px;
    height: 8px;
    background-color: var(--main-color-primary);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    pointer-events: none
}

.subnav>ul ul a.is-active:before,
.subnav>ul ul a:hover:before {
    opacity: 1;
    transform: translate(0, -50%)
}

.navgroup {
    margin-bottom: -15px
}

.navgroup a,
.navgroup li>span {
    color: var(--main-color-black);
    display: block;
    margin-bottom: 15px;
    text-decoration: none
}

.navgroup a:active,
.navgroup a:focus,
.navgroup a:hover {
    color: var(--main-color-primary);
    text-decoration: none
}

.navgroup li {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.navgroup li:hover>a {
    color: var(--main-color-primary)
}

.navgroup ul {
    margin: 0;
    padding: 0
}

.navgroup>ul>li>a,
.navgroup>ul>li>span {
    color: var(--main-color-dark-gray);
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 45px
}

@media (max-width:1023px) {

    .navgroup>ul>li>a,
    .navgroup>ul>li>span {
        margin-bottom: 22.5px
    }
}

@media (max-width:1023px) {

    .navgroup>ul>li>a,
    .navgroup>ul>li>span {
        margin-bottom: 15px
    }
}

.navgroup--col-2>ul,
.navgroup--col-3>ul,
.navgroup--col-4>ul,
.navgroup--col-5>ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -40px
}

.navgroup--col-2>ul>li,
.navgroup--col-3>ul>li,
.navgroup--col-4>ul>li,
.navgroup--col-5>ul>li {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px
}

@media (min-width:768px) {
    .navgroup--col-2>ul>li {
        width: 50%;
        min-width: 180px
    }
}

@media (min-width:768px) {
    .navgroup--col-3>ul>li {
        width: 33.3333333333%
    }
}

@media (min-width:768px) {
    .navgroup--col-4>ul>li {
        width: 50%
    }
}

@media (min-width:1024px) {
    .navgroup--col-4>ul>li {
        width: 25%
    }
}

@media (min-width:768px) {
    .navgroup--col-5>ul>li {
        width: 50%
    }
}

@media (min-width:1024px) {
    .navgroup--col-5>ul>li {
        width: 25%
    }
}

@media (min-width:1250px) {
    .navgroup--col-5>ul>li {
        width: 20%
    }
}

@media (max-width:767px) {
    .navgroup--collapse-mobile a {
        margin-bottom: 15px;
        line-height: 30px
    }

    .navgroup--collapse-mobile li.hasChildren>a,
    .navgroup--collapse-mobile li.hasChildren>span {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .navgroup--collapse-mobile>ul {
        margin-left: 0;
        margin-right: 0
    }

    .navgroup--collapse-mobile>ul>li {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--main-color-gray-base)
    }

    .navgroup--collapse-mobile>ul>li>ul {
        display: none
    }

    .navgroup--collapse-mobile>ul>li.open>ul {
        display: block
    }
}

.mainnav {
    display: flex;
    align-items: center
}

.mainnav__seperator {
    width: 1px;
    height: 27px;
    background: var(--main-color-gray-base);
    display: block;
    margin-left: 10px;
    margin-right: 10px
}

@media (min-width:1250px) {
    .mainnav__seperator {
        margin-left: 10px;
        margin-right: 10px
    }
}

.mainnav ul {
    margin: 0;
    padding: 0
}

.mainnav li {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.mainnav a {
    color: var(--main-color-text-base);
    text-decoration: none
}

.mainnav li:active>a,
.mainnav li:focus>a,
.mainnav li:hover>a {
    color: var(--main-color-primary)
}

.mainnav li.is-active-tree>a,
.mainnav li.is-active>a {
    color: var(--main-color-black)
}

.mainnav li.is-active-tree>a:after,
.mainnav li.is-active>a:after {
    height: 2px;
    background: var(--main-color-black)
}

.mainnav li.is-active-tree:active>a,
.mainnav li.is-active-tree:focus>a,
.mainnav li.is-active-tree:hover>a,
.mainnav li.is-active:active>a,
.mainnav li.is-active:focus>a,
.mainnav li.is-active:hover>a {
    color: var(--main-color-primary)
}

.mainnav li.is-active-tree:active>a:after,
.mainnav li.is-active-tree:focus>a:after,
.mainnav li.is-active-tree:hover>a:after,
.mainnav li.is-active:active>a:after,
.mainnav li.is-active:focus>a:after,
.mainnav li.is-active:hover>a:after {
    background: var(--main-color-primary)
}

.mainnav .textcontent>ul,
.mainnav>ul {
    display: flex;
    gap: 10px;
    font-size: var(--main-font-size-base)
}

@media (min-width:1540px) {

    .mainnav .textcontent>ul,
    .mainnav>ul {
        gap: 10px;
        font-size: 2rem
    }
}

.mainnav .textcontent>ul>li>a,
.mainnav>ul>li>a {
    font-weight: var(--main-font-weight);
    position: relative;
    display: block;
    padding: 20px
}

.mainnav .textcontent>ul>li>a::before,
.mainnav>ul>li>a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-30px);
    width: 12px;
    height: 8px;
    background-color: var(--main-color-primary);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    pointer-events: none
}

.mainnav .textcontent>ul>li>a.active_tree::before,
.mainnav .textcontent>ul>li>a.is-active-tree::before,
.mainnav>ul>li>a.active_tree::before,
.mainnav>ul>li>a.is-active-tree::before {
    transform: translateY(-50%) translateX(0);
    opacity: 1
}

.mainnav .textcontent>ul>li:hover>a::before,
.mainnav>ul>li:hover>a::before {
    transform: translateY(-50%) translateX(0);
    opacity: 1
}

.mainnav .textcontent>ul.nav--content>li:last-child>a,
.mainnav>ul.nav--content>li:last-child>a {
    padding-right: 0
}

.mainnav .textcontent>ul.nav--content>li>a,
.mainnav>ul.nav--content>li>a {
    font-weight: var(--main-font-weight)
}

.mainnav .textcontent>ul.nav--showMore,
.mainnav>ul.nav--showMore {
    margin-left: 10px
}

@media (min-width:1540px) {

    .mainnav .textcontent>ul.nav--showMore,
    .mainnav>ul.nav--showMore {
        margin-left: 10px
    }
}

.mainnav>ul>li.hoverintent .megaMenu,
.mainnav>ul>li.hoverintent>ul {
    display: block
}

.mainnav ul.nav--shop {
    margin-right: 10px
}

@media (min-width:1540px) {
    .mainnav ul.nav--shop {
        margin-right: 10px
    }
}

.loadingScreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 108;
    padding: 30px;
    font-size: 20px;
    font-weight: var(--main-font-weight-bold);
    background-color: var(--main-color-white);
    transition: .2s ease-in-out;
    background: linear-gradient(253deg, var(--main-color-white), var(--main-color-gray-base));
    background-size: 400% 400%;
    animation: loadingScreenGradient 3s ease infinite;
    pointer-events: none
}

.loadingScreen__icon {
    font-size: 120px;
    font-weight: 400;
    animation: rotation 1s infinite linear
}

@keyframes loadingScreenGradient {

    0%,
    100% {
        background-position: 0 87%
    }

    50% {
        background-position: 100% 14%
    }
}

body.is-loading-screen {
    overflow: hidden
}

.actionBox {
    padding: 30px;
    background-color: var(--main-color-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2)
}

@media (min-width:768px) {
    .actionBox {
        padding: 60px;
        box-shadow: 0 0 30px rgba(0, 0, 0, .2)
    }
}

.maxHeightContent {
    max-height: 40vh;
    max-height: 40svh;
    overflow: hidden;
    position: relative
}

.maxHeightContent__buttonWrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background: linear-gradient(0deg, #fff 20px, rgba(255, 255, 255, .5) 60px, rgba(255, 255, 255, 0) 100%);
    padding-top: 40px
}

.maxHeightContent__button {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    cursor: pointer;
    line-height: 1
}

.maxHeightContent__button:before {
    content: "+"
}

.maxHeightContent.is-open {
    max-height: none;
    padding-bottom: 60px
}

.maxHeightContent.is-open .maxHeightContent__button:before {
    content: "-"
}

.maxHeightContent:not(.is-active) .maxHeightContent__buttonWrapper {
    display: none
}

.dynamicPlaceholders {
    min-height: 100%;
    flex-grow: 1;
    contain: paint
}

.dynamicPlaceholders__container {
    container-type: inline-size;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: inherit;
    padding-left: 40px;
    opacity: 1
}

.dynamicPlaceholders__container.is-hidden {
    z-index: -1;
    opacity: 0
}

.dynamicPlaceholders__container>.inner {
    display: flex;
    position: relative;
    align-items: center;
    gap: 5px;
    height: 100%;
    font-size: 1.8rem;
    line-height: 1.3333;
    color: var(--main-color-dark-gray)
}

.dynamicPlaceholders__container>.inner>div:first-child {
    height: 100%;
    align-content: center
}

.dynamicPlaceholders__element {
    position: absolute;
    transform: translateY(50%);
    bottom: -25%;
    height: 100%;
    align-content: center;
    transition: bottom .4s ease-in-out;
    z-index: -1;
    opacity: 0
}

.dynamicPlaceholders__element.is-active {
    bottom: 50%;
    z-index: inherit;
    opacity: 1
}

.dynamicPlaceholders__element.is-fadingOut {
    bottom: 125%;
    z-index: inherit;
    opacity: 1
}

.roundCorners {
    border-radius: 16px;
    contain: paint
}

.roundCorners .youtubecontent,
.roundCorners img,
.roundCorners picture {
    border-radius: 16px;
    contain: paint
}

.offset-250 .itemboxList {
    margin-top: -250px !important
}

@media (max-width:1023px) {
    .offset-250 .itemboxList {
        margin-top: -180px !important
    }
}

@media (max-width:767px) {
    .offset-250 .itemboxList {
        margin-top: -100px !important
    }
}

@media (max-width:767px) {
    .offset-250:has(.banner) .banner .contentImage {
        height: 420px
    }
}

.borderElements {
    position: relative
}

.borderElements:after {
    content: "";
    width: 1px;
    position: absolute;
    left: 50%;
    height: 100%;
    background: var(--main-color-gray-base);
    display: block;
    top: 0
}

@media screen and (max-width:1250px) {
    .borderElements:after {
        display: none
    }
}

.borderElements:has(> .col-lg-6) {
    justify-content: space-between
}

.borderElements>.col-lg-6 {
    max-width: 593px
}

@media screen and (max-width:1250px) {
    .borderElements>.col-lg-6 {
        max-width: 100%
    }
}

.languageSwitcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    position: relative
}

.languageSwitcher__flag {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    contain: paint
}

.languageSwitcher__flag img {
    object-fit: cover;
    height: 100% !important;
    border-radius: 50%
}

.languageSwitcher__language {
    font-size: 1.8rem;
    text-transform: uppercase
}

@media (max-width:1023px) {
    .languageSwitcher__language {
        font-size: 14px
    }
}

.languageSwitcher__list {
    position: absolute;
    top: 100%;
    right: 20px;
    z-index: 202;
    background-color: var(--main-color-white);
    margin: 0;
    padding: 20px;
    display: none;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, .2);
    border-radius: 8px;
    color: var(--main-color-black)
}

.languageSwitcher__list>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--main-color-gray-base)
}

.languageSwitcher__list>div span {
    white-space: nowrap;
    width: 250px;
    font-weight: 700;
    position: relative;
    padding-right: 10px;
    contain: paint;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px
}

.languageSwitcher__list>div span img {
    width: 14px;
    height: 14px !important;
    border-radius: 50%;
    contain: paint;
    object-fit: cover
}

.languageSwitcher__list>div nav {
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    max-width: 223px;
    flex-shrink: 0;
    justify-content: flex-end
}

.languageSwitcher__list>div a {
    margin-left: 5px;
    margin-right: 5px
}

.languageSwitcher__list>div a.is-active {
    font-weight: var(--main-font-weight-bold)
}

.languageSwitcher__list>div:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0
}

.languageSwitcher.hoverintent .languageSwitcher__list,
.languageSwitcher.is-active .languageSwitcher__list {
    display: block
}

.languageSwitcher:focus-visible {
    outline: 1px dotted;
    outline-offset: 2px;
    border-radius: 0
}

@media (max-width:1023px) {
    .languageSwitcher {
        justify-content: flex-start
    }

    .languageSwitcher__list {
        transition: .2s all ease;
        position: absolute;
        top: 30px;
        left: -20px;
        right: -20px;
        bottom: 50px;
        height: 210px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .2)
    }
}

.contactBox {
    position: fixed;
    right: 20px;
    top: 250px;
    z-index: 12;
    transition: all .4s ease;
    outline: 0
}

.contactBox .contactBox--wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background: var(--main-color-secondary);
    color: var(--main-color-white);
    border-radius: 50px;
    padding: 20px 13px;
    overflow: hidden;
    transition: all .4s ease
}

.contactBox .contactBox--icons {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    gap: 16px;
    transition: transform .4s ease;
    cursor: pointer
}

.contactBox .contactBox--content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .5s ease;
    pointer-events: none;
    width: 0
}

.contactBox .contactBox--content a {
    display: flex;
    color: var(--main-color-white);
    white-space: nowrap
}

.contactBox .contactBox--content a:hover {
    color: var(--main-color-primary)
}

.contactBox .contactBox--content .openingTimes {
    display: flex;
    justify-content: space-between;
    white-space: nowrap
}

.contactBox.hoverintent .contactBox--wrapper,
.contactBox:focus-within .contactBox--wrapper {
    border-radius: 10px;
    height: auto;
    padding-left: 18px;
    padding-right: 18px
}

.contactBox.hoverintent .contactBox--content,
.contactBox:focus-within .contactBox--content {
    opacity: 1;
    width: 250px;
    padding: 0 0 0 25px;
    max-height: 175px;
    pointer-events: auto
}

body.isLandingPage-header:not(.card) #header,
body.isLandingPage:not(.card) #header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform .3s ease-in-out, opacity .3s ease, color .3s ease;
    width: 100%;
    max-width: 2100px
}

body.isLandingPage-header:not(.card) #header>:not(.headerTrust),
body.isLandingPage:not(.card) #header>:not(.headerTrust) {
    transition: color .3s ease
}

body.isLandingPage-header:not(.card) #header:not(.sticky-visible):not(.sticky-hidden),
body.isLandingPage:not(.card) #header:not(.sticky-visible):not(.sticky-hidden) {
    position: absolute;
    transform: translateY(0)
}

body.isLandingPage-header:not(.card) .dynamicPlaceholders__container>.inner,
body.isLandingPage-header:not(.card) .navToggler__bar,
body.isLandingPage:not(.card) .dynamicPlaceholders__container>.inner,
body.isLandingPage:not(.card) .navToggler__bar {
    transition: border-color .3s ease, color .3s ease
}

body.isLandingPage:not(.card) #header {
    background: 0 0
}

body.isLandingPage:not(.card) #header>:not(.headerTrust) {
    background: 0 0;
    box-shadow: none;
    color: var(--main-color-white);
    transition: none
}

body.isLandingPage:not(.card) #header:hover>:not(.headerTrust) {
    background: var(--main-color-white);
    color: var(--main-color-black);
    box-shadow: none;
    transition: none
}

body.isLandingPage:not(.card) #header:hover .navToggler__bar {
    background-color: var(--main-color-black)
}

body.isLandingPage:not(.card) #header:hover .searchBar .inputGroup__addon,
body.isLandingPage:not(.card) #header:hover .searchBar input {
    background: 0 0;
    border-color: var(--main-color-black);
    color: var(--main-color-black);
    transition: none
}

body.isLandingPage:not(.card) #header:hover .dynamicPlaceholders__container>.inner {
    color: var(--main-color-black)
}

body.isLandingPage:not(.card) #header:hover .button--bordered {
    border-color: var(--main-color-white);
    color: var(--main-color-white)
}

body.isLandingPage:not(.card) .navToggler__bar {
    background-color: var(--main-color-white)
}

body.isLandingPage:not(.card) .searchBar .inputGroup__addon,
body.isLandingPage:not(.card) .searchBar input {
    background: 0 0;
    border-color: var(--main-color-white);
    color: var(--main-color-white);
    transition: none
}

body.isLandingPage:not(.card) .dynamicPlaceholders__container>.inner {
    color: var(--main-color-white)
}

body.isLandingPage:not(.card) .button--bordered {
    border-color: var(--main-color-white);
    color: var(--main-color-white)
}

body.isLandingPage:not(.card) .button--bordered:hover {
    border-color: var(--main-color-secondary-dark)
}

body.isLandingPage:not(.card) .bg--extra-light-gray .button--bordered {
    border-color: var(--main-color-secondary);
    color: var(--main-color-secondary)
}

body.isLandingPage:not(.card) .bg--extra-light-gray .button--bordered:focus,
body.isLandingPage:not(.card) .bg--extra-light-gray .button--bordered:focus-within,
body.isLandingPage:not(.card) .bg--extra-light-gray .button--bordered:hover {
    background: var(--main-color-secondary-dark);
    border-color: var(--main-color-secondary-dark);
    color: var(--main-color-white)
}

body.isLandingPage:not(.card) .iconbarHover--basket {
    color: var(--main-color-black)
}

body.isLandingPage:not(.card) .mainnav li.is-active-tree>a {
    color: var(--main-color-white)
}

body.isLandingPage-header #header {
    background: var(--main-color-white)
}

body.isLandingPage-header #header>:not(.headerTrust) {
    background: var(--main-color-white);
    color: var(--main-color-black);
    box-shadow: none
}

body.isLandingPage-header .navToggler__bar {
    background-color: var(--main-color-black)
}

body.isLandingPage-header .searchBar .inputGroup__addon,
body.isLandingPage-header .searchBar input {
    background: #fff !important;
    border-color: var(--main-color-black);
    color: var(--main-color-black)
}

body.isLandingPage-header .dynamicPlaceholders__container>.inner {
    color: var(--main-color-black)
}

body.isLandingPage-header .button--bordered {
    border-color: var(--main-color-white);
    color: var(--main-color-white)
}

.offset-50 {
    transform: translateY(-50%);
    margin-bottom: -425px
}

@media screen and (max-width:1540px) {
    .offset-50 {
        margin-bottom: -375px
    }
}

@media screen and (max-width:1250px) {
    .offset-50 {
        margin-bottom: -325px
    }
}

@media screen and (max-width:1024px) {
    .offset-50 {
        margin-bottom: -275px
    }
}

@media screen and (max-width:768px) {
    .offset-50 {
        margin-bottom: -225px
    }
}

@media screen and (max-width:481px) {
    .offset-50 {
        margin-bottom: -175px
    }
}

.offset-50 img {
    object-fit: cover;
    width: 100%;
    height: 850px !important;
    border-radius: 16px
}

@media screen and (max-width:1540px) {
    .offset-50 img {
        height: 750px !important
    }
}

@media screen and (max-width:1250px) {
    .offset-50 img {
        height: 650px !important
    }
}

@media screen and (max-width:1024px) {
    .offset-50 img {
        height: 550px !important
    }
}

@media screen and (max-width:768px) {
    .offset-50 img {
        height: 450px !important
    }
}

@media screen and (max-width:481px) {
    .offset-50 img {
        height: 350px !important
    }
}

.mainContent>.gp:has(+ .gp .offset-50) {
    padding-bottom: 425px
}

@media screen and (max-width:1540px) {
    .mainContent>.gp:has(+ .gp .offset-50) {
        padding-bottom: 375px
    }
}

@media screen and (max-width:1250px) {
    .mainContent>.gp:has(+ .gp .offset-50) {
        padding-bottom: 325px
    }
}

@media screen and (max-width:1024px) {
    .mainContent>.gp:has(+ .gp .offset-50) {
        padding-bottom: 275px
    }
}

@media screen and (max-width:768px) {
    .mainContent>.gp:has(+ .gp .offset-50) {
        padding-bottom: 225px
    }
}

@media screen and (max-width:481px) {
    .mainContent>.gp:has(+ .gp .offset-50) {
        padding-bottom: 175px
    }
}

.fullContainerLeftPadding {
    padding-left: calc((100% - 1840px)/ 2);
    overflow: hidden;
    max-width: 100%
}

@media screen and (max-width:1860px) {
    .fullContainerLeftPadding {
        padding-left: 20px
    }
}

.fullContainerLeftPadding .col-12:has(> .swiper) {
    padding-right: 0 !important
}

.goldCalculator {
    max-width: 500px;
    margin-bottom: 100px
}

.goldCalculator .slidecontent {
    border-radius: 8px;
    contain: paint
}

.goldCalculator .slidecontentItem.gold {
    background: linear-gradient(90deg, #a18646 0, #be9f56 50%, #cbb278 100%)
}

.goldCalculator .slidecontentItem.silver {
    background: linear-gradient(90deg, #8b8b8b 0, #b9b9b9 100%)
}

.goldCalculator .slidecontentItem.platinum {
    background: linear-gradient(90deg, #b8b8b8 0, #d4d4d4 100%)
}

.goldCalculator .slidecontentItem.palladium {
    background: linear-gradient(90deg, #a7a7a7 0, #d0d0d0 100%)
}

.goldCalculator .slidecontentItem.is-active {
    padding-bottom: 0
}

.goldCalculator .slidecontentItem__headline {
    color: var(--main-color-white);
    padding-left: 20px;
    padding-right: 50px
}

.goldCalculator .slidecontentItem__headline:after {
    left: unset;
    right: 20px
}

.goldCalculator .slidecontentItem__headline:hover:after {
    color: var(--main-color-white)
}

.goldCalculator .slidecontentItem__content {
    padding: 20px;
    background: var(--main-color-light-gray)
}

.goldCalculator .slidecontentItem__content fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

.goldCalculator .metalType {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    border-bottom: 1px solid var(--main-color-gray-base);
    padding-bottom: 10px
}

.goldCalculator .metalType label {
    font-size: 1.6rem;
    font-weight: var(--main-font-weight-bold)
}

.goldCalculator .metalType input {
    width: 150px;
    padding: 5px 27px 5px 5px;
    text-align: right;
    background: var(--main-color-white)
}

@media (max-width:767px) {
    .goldCalculator .metalType input {
        width: 100px
    }
}

.goldCalculator .metalType>div {
    position: relative
}

.goldCalculator .metalType>div>span {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--main-color-dark-gray)
}

.goldCalculator .metalType span {
    margin-left: .5rem
}

.goldCalculator__result {
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    border-radius: 8px;
    background: var(--main-color-light-gray)
}

.goldCalculator__result--headline {
    font-size: 2.8rem;
    font-weight: var(--main-font-weight-medium);
    margin-bottom: 5px
}

.goldCalculator__result #result {
    font-size: 3rem;
    color: var(--main-color-primary);
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 20px
}

.goldCalculator__result .buttonRowTop {
    margin-bottom: 0
}

.goldCalculator__result button {
    cursor: pointer
}

.goldCalculator__result button[aria-disabled=true] {
    opacity: .5;
    pointer-events: none
}

.is-goldsaving-landingpage .footerBottomTop,
.is-goldsaving-landingpage .footerMain,
.is-goldsaving-landingpage .headerMain,
.is-goldsaving-landingpage .headerNavToggler,
.is-goldsaving-landingpage .headerSearch,
.is-goldsaving-landingpage .headerTrust,
.is-goldsaving-landingpage .iconbarItem--basket,
.is-goldsaving-landingpage .iconbarItem--favorites,
.is-goldsaving-landingpage .languageSwitcher {
    display: none !important
}

@media (min-width:768px) {
    .is-goldsaving-landingpage .headerLogo {
        max-width: 350px
    }

    .is-goldsaving-landingpage .headerLogo a,
    .is-goldsaving-landingpage .headerLogo img {
        aspect-ratio: auto
    }
}

@media (max-width:767px) {
    .is-goldsaving-landingpage .headerLogo {
        max-width: 240px;
        min-width: auto
    }

    .is-goldsaving-landingpage .headerLogo a,
    .is-goldsaving-landingpage .headerLogo img {
        aspect-ratio: auto
    }
}

.is-goldsaving-landingpage .headerTopMiddle {
    position: relative;
    left: unset;
    transform: unset;
    top: 0 !important
}

@media (max-width:767px) {
    .is-goldsaving-landingpage .headerTop .container {
        gap: 0
    }

    .is-goldsaving-landingpage .headerTopMiddle {
        width: 100%;
        text-align: center
    }

    .is-goldsaving-landingpage .headerTopMiddle .headerLogo {
        margin: 0 auto
    }

    .is-goldsaving-landingpage .headerTopRight {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%)
    }
}

@media (max-width:767px) {
    .category-goldsparplan-deutsche-bank .headerLogo {
        max-width: 200px
    }
}

.logoWithText {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px 20px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    flex-wrap: wrap
}

.passwordRequirements {
    list-style: none;
    padding: 0;
    margin: .5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    font-size: 14px
}

.passwordRequirements li {
    color: var(--main-color-dark-gray);
    margin-bottom: .25rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: color .2s ease
}

.passwordRequirements li::before {
    content: "•";
    font-size: 14px;
    transition: opacity .2s ease
}

.passwordRequirements li.is-valid {
    color: var(--main-color-success)
}

.passwordRequirements li.is-valid::before {
    font-family: icons, Helvetica, Arial, sans-serif;
    content: var(--base-icon-check-bold);
    opacity: 1;
    font-size: 12px
}

.passwordRequirements li.is-invalid {
    color: var(--main-color-danger)
}

.passwordRequirements li.is-invalid::before {
    font-family: icons, Helvetica, Arial, sans-serif;
    content: var(--base-icon-close-bold);
    opacity: 1;
    font-size: 10px
}

.banner .contentText__headline {
    margin-top: 0;
    line-height: 1.1;
    margin-bottom: clamp(10px, .5em, 20px);
    font-size: 3rem
}

@media (min-width:1024px) {
    .banner .contentText__headline {
        font-size: 3.4rem
    }
}

@media (min-width:1250px) {
    .banner .contentText__headline {
        font-size: 4rem
    }
}

.banner .contentText .h1:not(.highlighted),
.banner .contentText .spotPriceItem--headline:not(.highlighted),
.banner .contentText h1:not(.highlighted) {
    margin-top: 0;
    line-height: 1.1;
    margin-bottom: clamp(10px, .5em, 20px);
    font-size: 3rem
}

@media (min-width:1024px) {

    .banner .contentText .h1:not(.highlighted),
    .banner .contentText .spotPriceItem--headline:not(.highlighted),
    .banner .contentText h1:not(.highlighted) {
        font-size: 3.4rem
    }
}

@media (min-width:1250px) {

    .banner .contentText .h1:not(.highlighted),
    .banner .contentText .spotPriceItem--headline:not(.highlighted),
    .banner .contentText h1:not(.highlighted) {
        font-size: 4rem
    }
}

@media (min-width:1540px) {

    .banner .contentText .h1:not(.highlighted),
    .banner .contentText .spotPriceItem--headline:not(.highlighted),
    .banner .contentText h1:not(.highlighted) {
        font-size: 6rem
    }
}

.banner .contentText .h2:not(.highlighted),
.banner .contentText h2:not(.highlighted),
.banner .contentText__text {
    margin-top: 0;
    margin-bottom: 32px;
    font-size: 1.8rem
}

@media (min-width:1024px) {

    .banner .contentText .h2:not(.highlighted),
    .banner .contentText h2:not(.highlighted),
    .banner .contentText__text {
        font-size: 2.6rem
    }
}

.banner {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    min-height: 380px
}

.banner .contentImage {
    display: flex;
    width: 100%;
    flex-grow: 1;
    height: 100%;
    min-height: 380px
}

.banner .contentImage:after {
    background: linear-gradient(270deg, rgba(0, 46, 85, 0) 0, rgba(0, 46, 85, .6) 100%)
}

.banner .contentImage .textcontent {
    width: 100%
}

.banner .contentImage img,
.banner .contentImage video {
    display: block;
    min-width: 100%;
    object-fit: cover;
    min-height: 380px;
    width: 100%;
    height: 100% !important;
    max-width: none;
    max-height: none;
    flex: 1
}

@media (max-width:767px) {
    .banner .contentImage {
        aspect-ratio: 1;
        max-height: 380px
    }
}

.banner .contentText {
    color: var(--main-color-white)
}

.banner .contentText .h1:not(.highlighted),
.banner .contentText .spotPriceItem--headline:not(.highlighted),
.banner .contentText h1:not(.highlighted) {
    margin-bottom: 5rem !important
}

@media (max-width:767px) {

    .banner .contentText .h1:not(.highlighted),
    .banner .contentText .spotPriceItem--headline:not(.highlighted),
    .banner .contentText h1:not(.highlighted) {
        margin-bottom: 2rem !important
    }
}

.banner .contentText .h2:not(.highlighted),
.banner .contentText h2:not(.highlighted) {
    margin-bottom: 10px
}

.banner .contentText .h3:not(.highlighted),
.banner .contentText .itemcardHeadline:not(.highlighted),
.banner .contentText .orderboxSummary__headline:not(.highlighted),
.banner .contentText h3:not(.highlighted) {
    margin-bottom: 10px
}

.banner .contentText .h1:last-child,
.banner .contentText .h2:last-child,
.banner .contentText .h3:last-child,
.banner .contentText .itemcardHeadline:last-child,
.banner .contentText .orderboxSummary__headline:last-child,
.banner .contentText .spotPriceItem--headline:last-child,
.banner .contentText h1:last-child,
.banner .contentText h2:last-child,
.banner .contentText h3:last-child {
    margin-bottom: 0
}

.banner .contentText .buttonLink {
    color: var(--main-color-white)
}

.banner .contentText .buttonLink:after {
    background: var(--main-color-white)
}

.banner .contentText .textcontent {
    width: 100%;
    text-align: center
}

@media (min-width:768px) {
    .banner .contentText .textcontent {
        width: auto;
        max-width: 80%
    }
}

.banner .contentText .infieldInputGroup {
    color: var(--main-color-black)
}

.banner .contentText.color--black {
    color: var(--main-color-black)
}

.banner .contentText.color--black .buttonLink {
    color: var(--main-color-black)
}

.banner .contentText.color--black .buttonLink:after {
    background: var(--main-color-black)
}

.banner .contentText {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 32px;
    align-items: center;
    justify-content: center
}

@media (min-width:1250px) {
    .banner .contentText {
        padding: 64px
    }
}

.banner .contentText.contentText--left {
    align-items: flex-start
}

@media (max-width:767px) {
    .banner .contentText.contentText--left {
        justify-content: flex-start
    }
}

.banner .contentText.contentText--right {
    align-items: flex-end
}

.banner .contentText.contentText--vertTop {
    justify-content: flex-start
}

.banner .contentText.contentText--vertBottom {
    justify-content: flex-end
}

.banner.banner--hasNoText .contentImage:after {
    display: none
}

.banner .button--bordered {
    border-color: var(--main-color-white);
    color: var(--main-color-white)
}

@media (min-width:1250px) {
    .banner {
        min-height: 530px
    }

    .banner .contentImage {
        min-height: 530px
    }

    .banner .contentImage img,
    .banner .contentImage video {
        min-height: 530px
    }
}

.noGradient .banner .contentImage:after {
    display: none
}

a.banner {
    color: var(--main-color-black)
}

a.banner:focus .button--bordered,
a.banner:hover .button--bordered {
    border-color: var(--main-color-secondary-dark);
    background-color: var(--main-color-secondary-dark)
}

body.isLandingPage .mainContent>.gp:first-of-type .banner,
body.isLandingPage-header .mainContent>.gp:first-of-type .banner {
    text-decoration: none
}

body.isLandingPage .mainContent>.gp:first-of-type .banner .contentText,
body.isLandingPage-header .mainContent>.gp:first-of-type .banner .contentText {
    position: static;
    padding: 263px 64px 104px 64px;
    display: block;
    margin: 0 auto;
    width: 100%
}

@media screen and (max-width:1250px) {

    body.isLandingPage .mainContent>.gp:first-of-type .banner .contentText,
    body.isLandingPage-header .mainContent>.gp:first-of-type .banner .contentText {
        padding: 120px 64px 64px 64px
    }
}

@media screen and (max-width:768px) {

    body.isLandingPage .mainContent>.gp:first-of-type .banner .contentText,
    body.isLandingPage-header .mainContent>.gp:first-of-type .banner .contentText {
        padding: 180px 20px 20px 20px
    }
}

body.isLandingPage .mainContent>.gp:first-of-type .banner .contentText .textcontent,
body.isLandingPage-header .mainContent>.gp:first-of-type .banner .contentText .textcontent {
    margin: 0 auto
}

body.isLandingPage .mainContent>.gp:first-of-type .banner .contentImage,
body.isLandingPage-header .mainContent>.gp:first-of-type .banner .contentImage {
    position: absolute
}

@media (max-width:767px) {

    body.isLandingPage .mainContent>.gp:first-of-type .banner .contentImage,
    body.isLandingPage-header .mainContent>.gp:first-of-type .banner .contentImage {
        aspect-ratio: unset;
        max-height: unset
    }
}

.banner2 {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto
}

.banner2 .contentImage {
    display: flex;
    width: 100%
}

.banner2 .contentImage .textcontent {
    width: 100%
}

.banner2 .contentImage img,
.banner2 .contentImage video {
    display: block;
    min-width: 100%;
    object-fit: cover;
    min-height: 100%
}

@media (max-width:1023px) {
    .banner2 .contentImage {
        aspect-ratio: 16/8
    }

    .banner2 .contentImage img,
    .banner2 .contentImage video {
        height: 100% !important
    }
}

@media (max-width:767px) {
    .banner2 .contentImage {
        aspect-ratio: 4/3;
        max-height: 400px
    }
}

.banner2 .contentText .h1:last-child,
.banner2 .contentText .h2:last-child,
.banner2 .contentText .h3:last-child,
.banner2 .contentText .itemcardHeadline:last-child,
.banner2 .contentText .orderboxSummary__headline:last-child,
.banner2 .contentText .spotPriceItem--headline:last-child,
.banner2 .contentText h1:last-child,
.banner2 .contentText h2:last-child,
.banner2 .contentText h3:last-child {
    margin-bottom: 0
}

.banner2 .contentText .textcontent {
    width: 100%;
    padding: 0;
    color: var(--main-color-white)
}

@media (min-width:768px) {
    .banner2 .contentText .textcontent {
        width: 50%
    }
}

@media (min-width:1024px) {
    .banner2 .contentText .textcontent {
        max-width: 42%
    }
}

.banner2 .contentText {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

@media (min-width:768px) {
    .banner2 .contentText {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 48px
    }
}

.banner2 .contentText.contentText--left {
    align-items: flex-start
}

.banner2 .contentText.contentText--right {
    align-items: flex-end
}

.banner2 .contentText.contentText--vertTop {
    justify-content: flex-start
}

.banner2 .contentText.contentText--vertBottom {
    justify-content: flex-end
}

.banner2.banner--hasNoText .contentImage:after {
    display: none
}

a.banner2 {
    color: var(--main-color-black);
    text-decoration: none
}

.banner3 .contentText .h1:not(.highlighted),
.banner3 .contentText .spotPriceItem--headline:not(.highlighted),
.banner3 .contentText h1:not(.highlighted),
.banner3 .contentText__headline {
    margin-top: 0;
    line-height: 1.1;
    margin-bottom: clamp(10px, .5em, 20px);
    font-size: 3rem
}

@media (min-width:1024px) {

    .banner3 .contentText .h1:not(.highlighted),
    .banner3 .contentText .spotPriceItem--headline:not(.highlighted),
    .banner3 .contentText h1:not(.highlighted),
    .banner3 .contentText__headline {
        font-size: 3.4rem
    }
}

@media (min-width:1250px) {

    .banner3 .contentText .h1:not(.highlighted),
    .banner3 .contentText .spotPriceItem--headline:not(.highlighted),
    .banner3 .contentText h1:not(.highlighted),
    .banner3 .contentText__headline {
        font-size: 4.7rem
    }
}

.banner3 .contentText .h2:not(.highlighted),
.banner3 .contentText h2:not(.highlighted),
.banner3 .contentText__text {
    font-size: 2rem
}

@media (min-width:1024px) {

    .banner3 .contentText .h2:not(.highlighted),
    .banner3 .contentText h2:not(.highlighted),
    .banner3 .contentText__text {
        font-size: 2.4rem
    }
}

@media (min-width:1250px) {

    .banner3 .contentText .h2:not(.highlighted),
    .banner3 .contentText h2:not(.highlighted),
    .banner3 .contentText__text {
        font-size: 3rem
    }
}

.banner3 {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background: var(--main-color-black);
    color: var(--main-color-white)
}

@media (min-width:768px) {
    .banner3 {
        flex-direction: row
    }
}

.banner3 .contentImage {
    display: flex;
    width: 100%
}

@media (min-width:768px) {
    .banner3 .contentImage {
        width: 50%
    }
}

@media (min-width:1024px) {
    .banner3 .contentImage {
        width: 60%
    }
}

.banner3 .contentImage .textcontent {
    width: 100%
}

.banner3 .contentImage img,
.banner3 .contentImage video {
    display: block;
    min-width: 100%;
    object-fit: cover;
    min-height: 100%;
    aspect-ratio: 5/3
}

@media (min-width:1024px) {

    .banner3 .contentImage img,
    .banner3 .contentImage video {
        aspect-ratio: 1232/520
    }
}

.banner3 .contentText {
    padding: 30px 20px;
    display: flex;
    align-items: flex-end;
    flex-grow: 1
}

@media (min-width:768px) {
    .banner3 .contentText {
        padding: 30px
    }
}

@media (min-width:1024px) {
    .banner3 .contentText {
        padding: 40px
    }
}

@media (min-width:1250px) {
    .banner3 .contentText {
        padding: 60px
    }
}

.banner3 .contentText .h2:not(.highlighted),
.banner3 .contentText h2:not(.highlighted) {
    font-weight: 400;
    margin-bottom: clamp(10px, .5em, 10px)
}

.banner3 .contentText .h3:not(.highlighted),
.banner3 .contentText .itemcardHeadline:not(.highlighted),
.banner3 .contentText .orderboxSummary__headline:not(.highlighted),
.banner3 .contentText h3:not(.highlighted) {
    margin-bottom: 10px
}

.banner3 .contentText .h1:last-child,
.banner3 .contentText .h2:last-child,
.banner3 .contentText .h3:last-child,
.banner3 .contentText .itemcardHeadline:last-child,
.banner3 .contentText .orderboxSummary__headline:last-child,
.banner3 .contentText .spotPriceItem--headline:last-child,
.banner3 .contentText h1:last-child,
.banner3 .contentText h2:last-child,
.banner3 .contentText h3:last-child {
    margin-bottom: 0
}

.banner3.banner--hasNoText .contentImage:after {
    display: none
}

a.banner3 {
    color: var(--main-color-white);
    text-decoration: none
}

.slideshow.swiper .swiper-button-next,
.slideshow.swiper .swiper-button-prev {
    width: 40px;
    height: 40px;
    font-size: 36px;
    color: var(--main-color-white);
    scale: 1;
    transition: .2s ease-in-out
}

.slideshow.swiper .swiper-button-next:active,
.slideshow.swiper .swiper-button-next:focus,
.slideshow.swiper .swiper-button-next:hover,
.slideshow.swiper .swiper-button-prev:active,
.slideshow.swiper .swiper-button-prev:focus,
.slideshow.swiper .swiper-button-prev:hover {
    scale: 1.4
}

.slideshow.swiper .swiper-button-prev {
    left: 10px
}

.slideshow.swiper .swiper-button-next {
    right: 10px
}

@media (min-width:1620px) {

    .slideshow.swiper.slideshow--arrows-outside .swiper-button-next,
    .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
        color: var(--main-color-black)
    }

    .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
        left: -50px
    }

    .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
        right: -50px
    }
}

.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-next,
.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
    color: var(--main-color-white)
}

.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-prev {
    left: 10px
}

.container .slideshow.swiper.slideshow--arrows-outside .swiper-button-next {
    right: 10px
}

.slideshow--3.swiper .swiper-slide {
    display: flex
}

.slideshow--3.swiper .swiper-pagination {
    position: absolute;
    z-index: 1;
    left: auto;
    right: 10px;
    bottom: 0;
    width: auto;
    margin: 0
}

@media (min-width:768px) {
    .slideshow--3.swiper .swiper-pagination {
        right: 15px;
        top: 50%;
        bottom: auto
    }
}

@media (min-width:1024px) {
    .slideshow--3.swiper .swiper-pagination {
        right: 30px
    }
}

@media (min-width:1250px) {
    .slideshow--3.swiper .swiper-pagination {
        right: 40px
    }
}

.slideshow--3.swiper .swiper-pagination .swiper-pagination-bullet {
    background: var(--main-color-white);
    opacity: 1;
    border: 1px solid var(--main-color-white)
}

.slideshow--3.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: 0 0
}

@media (min-width:768px) {
    .bannerGroup {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, minmax(auto, 280px));
        gap: 20px;
        grid-template-areas: "banner1 banner1 banner1 banner1 banner1 banner1" "banner2 banner2 banner2 banner3 banner3 banner3"
    }
}

@media (min-width:1024px) {
    .bannerGroup {
        grid-template-areas: "banner1 banner1 banner1 banner1 banner2 banner2" "banner1 banner1 banner1 banner1 banner3 banner3"
    }
}

.bannerGroup .banner {
    display: flex;
    margin-bottom: 20px;
    overflow: hidden
}

@media (min-width:768px) {
    .bannerGroup .banner {
        margin-bottom: 0
    }
}

.bannerGroup .banner>.link {
    display: flex;
    width: 100%
}

.bannerGroup .banner .contentImage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover
}

.bannerGroup .banner .contentText {
    padding: 20px
}

@media (min-width:1250px) {
    .bannerGroup .banner .contentText {
        padding: 30px
    }
}

.bannerGroup .banner .contentText .textcontent {
    width: 100%
}

.bannerGroup .banner .contentText .textcontent p:last-child {
    margin-bottom: 0
}

.bannerGroup .banner:first-child {
    grid-area: banner1
}

@media (min-width:1024px) {
    .bannerGroup .banner:not(:first-child) .contentImage {
        position: relative;
        width: 100%
    }

    .bannerGroup .banner:not(:first-child) .contentImage img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover
    }
}

@media (max-width:767px) {

    .bannerGroup .banner:nth-child(2) .contentImage,
    .bannerGroup .banner:nth-child(3) .contentImage {
        aspect-ratio: 16/9
    }
}

.bannerGroup .banner:nth-child(2) {
    grid-area: banner2
}

.bannerGroup .banner:nth-child(3) {
    grid-area: banner3
}

.dcCookieBar {
    position: fixed;
    left: 0;
    bottom: 0;
    line-height: 1.3;
    width: 100%;
    min-width: 320px;
    box-shadow: 0 0 10px #000;
    z-index: 6000;
    padding: 15px;
    padding-left: 90px;
    background-color: var(--main-color-white);
    font-size: var(--main-font-size-base);
    color: var(--main-color-black);
    box-sizing: border-box
}

.dcCookieBar a {
    color: var(--main-color-black);
    text-decoration: underline
}

.dcCookieBar a:hover {
    color: var(--main-color-primary)
}

.dcCookieBar__button {
    line-height: 1.6;
    padding: 5px 20px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    min-width: 40px;
    width: auto;
    font-size: var(--main-font-size-base);
    font-weight: var(--main-font-weight);
    color: var(--main-color-black);
    border: 1px solid var(--main-color-gray-base);
    background-color: var(--main-color-white);
    border-radius: 8px;
    transition: .2s ease-in-out
}

.dcCookieBar__button:hover {
    background-color: var(--main-color-primary);
    border-color: var(--main-color-primary);
    color: var(--main-color-primary-contrast)
}

.dcCookieBar__button:active,
.dcCookieBar__button:focus {
    background-color: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-primary-dark-contrast)
}

@media (max-width:1024px) {
    .dcCookieBar__button {
        font-size: var(--main-font-size-base)
    }
}

.dcCookieBar__buttonaction {
    border-color: var(--main-color-primary);
    color: var(--main-color-primary-contrast);
    background-color: var(--main-color-primary)
}

.dcCookieBar__buttonaction:hover {
    background-color: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-primary-dark-contrast)
}

.dcCookieBar__buttonaction:active,
.dcCookieBar__buttonaction:focus {
    background-color: var(--main-color-primary-darken);
    border-color: var(--main-color-primary-darken);
    color: var(--main-color-primary-darken-contrast)
}

.dcCookieBar__buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
    gap: 7.5px
}

.dcCookieBar__buttons .dcCookieBar__button {
    flex-grow: 1;
    box-sizing: border-box;
    width: 100%;
    flex-basis: 100% !important
}

.dcCookieBar__main {
    text-align: center
}

.dcCookieBar__text {
    padding-left: 7.5px;
    padding-right: 7.5px;
    padding-bottom: 15px;
    text-align: left
}

.dcCookieBar__links {
    text-align: right;
    font-size: var(--main-font-size-small)
}

.dcCookieBar__links a {
    display: inline-block;
    vertical-align: middle;
    margin-left: 7.5px;
    margin-right: 7.5px
}

.dcCookieBar__center {
    text-align: center;
    margin-top: 15px
}

.dcCookieBar__center a {
    display: inline-block;
    vertical-align: middle;
    margin-left: 7.5px;
    margin-right: 7.5px
}

.dcCookieModal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: rgba(204, 204, 204, .7);
    color: var(--main-color-black);
    display: none;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 6001;
    font-size: var(--main-font-size-base)
}

@media (min-width:320px) {
    .dcCookieModal.dcCookieTopPadding {
        padding-top: 150px
    }
}

.dcCookieModal__dialog {
    background-color: #fff;
    padding: 30px;
    width: 600px;
    max-width: 100%;
    margin: 15px auto;
    box-shadow: 0 0 40px rgba(0, 0, 0, .2);
    border-radius: 8px
}

@media (max-width:767px) {
    .dcCookieModal__dialog {
        padding: 15px
    }
}

.dcCookieModal a {
    color: var(--main-color-black);
    text-decoration: underline;
    cursor: pointer
}

.dcCookieModal a:hover {
    color: var(--main-color-primary)
}

.dcCookieModal .dcCookieBar__button {
    color: var(--main-color-black);
    background-color: var(--main-color-white);
    text-decoration: none;
    cursor: pointer
}

.dcCookieModal .dcCookieBar__button:hover {
    background-color: var(--main-color-primary);
    border-color: var(--main-color-primary);
    color: var(--main-color-primary-contrast)
}

.dcCookieModal .dcCookieBar__button:active,
.dcCookieModal .dcCookieBar__button:focus {
    background-color: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-primary-dark-contrast)
}

.dcCookieModal .dcCookieBar__buttonaction {
    border-color: var(--main-color-primary);
    color: var(--main-color-primary-contrast);
    background-color: var(--main-color-primary);
    cursor: pointer
}

.dcCookieModal .dcCookieBar__buttonaction:hover {
    background-color: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-primary-dark-contrast)
}

.dcCookieModal .dcCookieBar__buttonaction:active,
.dcCookieModal .dcCookieBar__buttonaction:focus {
    background-color: var(--main-color-primary-darken);
    border-color: var(--main-color-primary-darken);
    color: var(--main-color-primary-darken-contrast)
}

.dcCookieModal .dcCookieBar__links {
    margin-top: 15px;
    text-align: left
}

.dcCookieModal .dcCookieBar__links a {
    margin-left: 0;
    margin-right: 15px
}

.dcCookieModal.open {
    display: block;
    overflow-x: hidden;
    overflow-y: auto
}

.dcCookieModalBody__headline {
    font-size: 20px;
    margin-bottom: 15px
}

.dcCookieModalBody__info {
    margin-bottom: 15px
}

.dcCookieBarSwitch {
    width: 50px;
    position: relative;
    height: 26px;
    display: inline-block;
    cursor: pointer;
    border-radius: 13px;
    margin: 0;
    background-color: var(--main-color-light-gray)
}

.dcCookieBarSwitch span {
    font-style: normal;
    position: absolute;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: var(--main-color-black);
    top: 50%;
    margin-top: -10px;
    display: block;
    pointer-events: none;
    margin-bottom: 0;
    border-radius: 50%;
    transition: .1s ease-in-out
}

.dcCookieBarSwitch input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0
}

.dcCookieBarSwitch input:checked+span {
    left: 100%;
    margin-left: -23px;
    background-color: var(--main-color-primary)
}

.dcCookieBarSwitch__label {
    color: var(--main-color-black);
    margin-bottom: 0;
    line-height: 26px;
    margin-right: 10px
}

.dcCookieBarBox {
    padding: 15px;
    border: 2px solid var(--main-color-light-gray);
    margin-top: 15px
}

.dcCookieBarBox__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px
}

.dcCookieBarBox__title {
    margin-right: 30px;
    font-size: 16px
}

.dcCookieBarBox__info {
    margin-bottom: 15px
}

.dcCookieBarMoreBox {
    margin-top: 15px
}

.dcCookieBarMoreBox.open {
    display: block
}

.dcCookieBarTable {
    margin-top: 15px
}

.dcCookieBarTable__row {
    padding: 8px 0;
    border-bottom: 1px solid var(--main-color-light-gray)
}

.dcCookieBarTable__row:last-child {
    border-bottom: 0
}

.dcCookieBarTable__cell>a {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.dcCookieBarTable__cell--description {
    font-weight: 700;
    font-size: 1.2em
}

.dcCookieBarTable__cell--switch {
    display: flex;
    align-items: center
}

@media (min-width:768px) {
    .dcCookieBarTable__row {
        display: flex;
        align-items: center
    }

    .dcCookieBarTable__cell {
        flex-grow: 1;
        text-align: left;
        width: calc(100% - 200px)
    }

    .dcCookieBarTable__cell:first-child {
        padding-right: 10px;
        flex-shrink: 0;
        flex-grow: 0;
        width: 200px
    }

    .dcCookieBarTable__cell:first-child.dcCookieBarTable__cell--description {
        width: 50%
    }

    .dcCookieBarTable__cell--switch {
        justify-content: flex-end
    }
}

@media (max-width:767px) {
    .dcCookieBarTable__cell:first-child {
        margin-bottom: 4px
    }

    .dcCookieBarTable__cell:first-child:after {
        content: ":"
    }
}

.dcCookieBarRecurringTable__row {
    padding: 8px 0;
    border-bottom: 1px solid var(--main-color-light-gray);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dcCookieBarRecurringTable__row:last-child {
    border-bottom: 0
}

.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label {
    position: relative;
    padding-left: 20px
}

.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--main-color-black);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -6px;
    transition: .2s ease-in-out
}

.dcCookieBarRecurringTable__row--parent .dcCookieBarRecurringTable__label.active:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    border-color: transparent transparent transparent var(--main-color-primary)
}

.dcCookieBarRecurringTable__row--child {
    padding-left: 20px
}

.dcCookieBarRecurringTable__label {
    font-weight: 700
}

.dcCookieBarHistoryTable {
    font-size: 1.1rem
}

.dcCookieBarHistoryTable__row {
    padding: 8px 0;
    border-bottom: 1px solid var(--main-color-light-gray);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dcCookieBarHistoryTable__row:last-child {
    border-bottom: 0
}

.dcCookieBarHistoryTable__label {
    flex-grow: 1;
    margin-right: 8px
}

.dcCookieBarHistoryTable__badge {
    width: 12px;
    height: 12px;
    background-color: red;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 8px;
    margin-top: 1px
}

.dcCookieBarHistoryTable__badge.active {
    background-color: green
}

.dcCookieBarHistoryTable__active {
    margin-left: 8px;
    flex-shrink: 0;
    width: 60px;
    text-align: right
}

.dcCookieBarRecurring {
    z-index: 6001;
    position: fixed;
    left: 20px;
    bottom: 20px;
    box-sizing: border-box
}

.dcCookieBarRecurringBox {
    position: fixed;
    z-index: 6001;
    left: 20px;
    bottom: 80px;
    background-color: var(--main-color-white);
    box-shadow: 0 0 20px #000;
    width: 400px;
    font-size: var(--main-font-size-base)
}

.dcCookieBarRecurringBox__close {
    height: 14px;
    width: 14px;
    cursor: pointer
}

.dcCookieBarRecurringBox__close svg path {
    fill: #000000
}

.dcCookieBarRecurringBox__close:hover svg path {
    fill: var(--main-color-primary)
}

.dcCookieBarRecurringBox__head {
    padding: 15px;
    border-bottom: 1px solid var(--main-color-light-gray);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.dcCookieBarRecurringBox__title {
    margin-right: 15px
}

.dcCookieBarRecurringBox__footer .dcCookieBar__button {
    width: 100%;
    padding: 10px;
    box-sizing: border-box
}

@media (max-width:440px) {
    .dcCookieBarRecurringBox {
        max-width: 100%;
        left: 0;
        bottom: 0;
        max-height: 100vh;
        overflow: hidden;
        overflow-y: auto
    }
}

.dcCookieBarRecurringButton {
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background-color: var(--main-color-primary);
    color: var(--main-color-primary-contrast);
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px #000
}

.dcCookieBarRecurringButton:focus,
.dcCookieBarRecurringButton:hover {
    background-color: var(--main-color-primary-dark)
}

.dcCookieBarRecurringButton svg path {
    fill: #000000
}

.dcCookieBarRecurringButton .closelabel {
    display: none;
    position: relative;
    top: 3px
}

.dcCookieBarRecurringButton .openlabel {
    position: relative;
    top: 6px
}

.dcCookieBarRecurringButton.open .openlabel {
    display: none
}

.dcCookieBarRecurringButton.open .closelabel {
    display: block
}

.dcCookieBarTab {
    text-align: center;
    padding: 10px;
    font-weight: 700;
    cursor: pointer
}

.dcCookieBarTab:not(.active) {
    background-color: var(--main-color-light-gray)
}

.dcCookieBarTab:hover {
    background-color: var(--main-color-white)
}

.dcCookieBarTabContent {
    padding: 15px;
    display: none;
    height: 240px;
    max-height: 50vh;
    overflow: hidden;
    overflow-y: auto
}

.dcCookieBarTabContent.active {
    display: block
}

.dcCookieBarTabs__header {
    display: flex
}

.dcCookieBarTabs__header .dcCookieBarTab {
    flex-grow: 1;
    width: 50%
}

.dcCookieExternal {
    display: flex;
    align-items: center;
    justify-content: center
}

.dcCookieExternal__info {
    padding: 30px;
    border: 1px solid var(--main-color-gray-base);
    background-color: #fff
}

.dcCookieExternal__headline {
    padding-bottom: 20px
}

.dcCookieExternal__button {
    line-height: 1.6;
    padding: 5px 20px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    min-width: 40px;
    width: auto;
    font-size: var(--main-font-size-base);
    font-weight: var(--main-font-weight);
    color: var(--main-color-black);
    border: 1px solid var(--main-color-gray-base);
    background-color: var(--main-color-white);
    transition: .2s ease-in-out
}

.dcCookieExternal__button:hover {
    background-color: var(--main-color-primary);
    border-color: var(--main-color-primary);
    color: var(--main-color-primary-contrast)
}

.dcCookieExternal__button:active,
.dcCookieExternal__button:focus {
    background-color: var(--main-color-primary-dark);
    border-color: var(--main-color-primary-dark);
    color: var(--main-color-primary-dark-contrast)
}

.hidden {
    display: none !important
}

.filegallery {
    margin-bottom: -16px
}

.filegalleryFile {
    margin-bottom: 16px;
    color: var(--main-color-black);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    text-decoration: none
}

.filegalleryFile .icon {
    margin-right: 12px;
    font-size: 18px;
    line-height: 1;
    margin-top: -2px
}

.filegalleryFile span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--main-color-middle-gray);
    text-underline-offset: 4.68px
}

.filegalleryFile:hover {
    color: var(--main-color-black);
    text-decoration: none
}

.filegalleryFile:hover span {
    text-decoration-color: var(--main-color-black)
}

.imageGalleryItem {
    overflow: hidden;
    cursor: pointer
}

.imageGalleryItem__content {
    position: relative;
    height: 100%;
    width: 100%
}

.imageGalleryItem__content:after {
    content: var(--base-icon-search);
    font-family: icons, Helvetica, Arial, sans-serif;
    background: rgba(0, 0, 0, .1);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--main-color-white);
    opacity: 0;
    transition: .2s opacity ease-in-out
}

.imageGalleryItem__img {
    transition: .2s ease-in-out;
    scale: 1
}

.imageGalleryItem:hover .imageGalleryItem__content:after {
    opacity: 1
}

.imageGalleryItem:hover .imageGalleryItem__img {
    scale: 1.1
}

.imageGalleryWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 10px;
    gap: 10px
}

@media screen and (max-width:768px) {
    .imageGalleryWrapper {
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-width:481px) {
    .imageGalleryWrapper {
        grid-template-columns: 1fr
    }
}

.imageGalleryWrapperFourGrid {
    grid-template-columns: 1fr 1fr
}

@media screen and (max-width:481px) {
    .imageGalleryWrapperFourGrid {
        grid-template-columns: 1fr
    }
}

.imageGalleryWrapperFourGrid .imageGalleryItem:first-child,
.imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(4) {
    --rows: 15
}

@media screen and (max-width:481px) {

    .imageGalleryWrapperFourGrid .imageGalleryItem:first-child,
    .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(4) {
        --rows: 10
    }
}

.imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(2),
.imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(3) {
    --rows: 20
}

@media screen and (max-width:481px) {

    .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(2),
    .imageGalleryWrapperFourGrid .imageGalleryItem:nth-child(3) {
        --rows: 15
    }
}

.imageGalleryItem {
    border-radius: 12px;
    grid-row: span var(--rows, 10);
    --rows: 15
}

@media screen and (max-width:481px) {
    .imageGalleryItem {
        --rows: 10
    }
}

.imageGalleryItem:nth-child(2n) {
    --rows: 20
}

@media screen and (max-width:481px) {
    .imageGalleryItem:nth-child(2n) {
        --rows: 15
    }
}

.imageGalleryItem:nth-child(6n+5) {
    --rows: 20
}

@media screen and (max-width:481px) {
    .imageGalleryItem:nth-child(6n+5) {
        --rows: 15
    }
}

.imageGalleryItem:nth-child(6n+6) {
    --rows: 15
}

@media screen and (max-width:481px) {
    .imageGalleryItem:nth-child(6n+6) {
        --rows: 10
    }
}

.imageGalleryItem img {
    object-fit: cover;
    height: 100% !important;
    width: 100%
}

.languageSwitchButton {
    display: block;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    padding-right: 15px
}

.languageSwitchButton:after {
    content: var(--base-icon-angle-down);
    font-family: icons, Helvetica, Arial, sans-serif;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.languageSwitchList {
    padding: 0;
    list-style: none;
    display: flex;
    margin: 0;
    flex-wrap: wrap
}

.languageSwitchList li {
    width: 100%;
    padding: 0;
    display: flex;
    text-align: center
}

.languageSwitchList li:not(:last-child) {
    border-bottom: 1px solid var(--main-color-middle-gray)
}

.languageSwitchList li.is-active a {
    font-weight: var(--main-font-weight-bold)
}

.languageSwitchList li img {
    width: 40px;
    flex-shrink: 0
}

.languageSwitchList li a {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: var(--main-link-color);
    padding: 15px 0;
    width: 100%
}

.languageSwitchList li a:focus,
.languageSwitchList li a:hover {
    text-decoration: underline;
    color: var(--main-link-color)
}

.scrollbar.swiper .swiper-slide {
    text-align: center
}

.scrollbar.swiper .swiper-button-next,
.scrollbar.swiper .swiper-button-prev {
    width: 40px;
    height: 40px;
    font-size: 36px;
    color: var(--main-color-white);
    scale: 1;
    transition: .2s ease-in-out
}

.scrollbar.swiper .swiper-button-next:active,
.scrollbar.swiper .swiper-button-next:focus,
.scrollbar.swiper .swiper-button-next:hover,
.scrollbar.swiper .swiper-button-prev:active,
.scrollbar.swiper .swiper-button-prev:focus,
.scrollbar.swiper .swiper-button-prev:hover {
    scale: 1.4
}

.scrollbar.swiper .swiper-button-prev {
    left: 10px
}

.scrollbar.swiper .swiper-button-next {
    right: 10px
}

@media (min-width:1620px) {

    .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next,
    .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
        color: var(--main-color-black)
    }

    .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
        left: -50px
    }

    .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
        right: -50px
    }
}

.container .scrollbar {
    margin-left: -20px;
    margin-right: -20px
}

.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next,
.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
    color: var(--main-color-white)
}

.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-prev {
    left: 10px
}

.container .scrollbar.swiper.scrollbar--arrows-outside .swiper-button-next {
    right: 10px
}

.slidecontentItem {
    border-top: 1px solid var(--main-color-gray-base);
    border-bottom: 1px solid var(--main-color-gray-base);
    padding: 20px 0 0 0
}

.slidecontentItem:not(:last-child) {
    margin-bottom: -1px
}

.slidecontentItem__headline {
    position: relative;
    font-size: 2rem;
    color: var(--main-color-black);
    padding-left: 40px;
    cursor: pointer;
    line-height: 1.4;
    margin-bottom: 20px
}

.slidecontentItem__headline:after {
    content: var(--base-icon-plus);
    font-family: icons, Helvetica, Arial, sans-serif;
    position: absolute;
    left: 0;
    top: 50%;
    font-size: 24px;
    width: 24px;
    text-align: center;
    transition: .2s ease-in-out;
    translate: 0 -50%
}

.slidecontentItem__headline:active,
.slidecontentItem__headline:hover {
    outline: 0
}

.slidecontentItem__headline:active:after,
.slidecontentItem__headline:hover:after {
    color: var(--main-color-secondary-medium)
}

.slidecontentItem__headline:focus {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 10px
}

.slidecontentItem__headline:focus:after {
    color: var(--main-color-secondary-medium)
}

@media (max-width:767px) {
    .slidecontentItem__headline {
        font-size: 1.8rem;
        padding-left: 35px
    }

    .slidecontentItem__headline:after {
        font-size: 21px;
        width: 21px
    }
}

.slidecontentItem__content {
    display: none;
    padding: 0 10px 0 40px;
    line-height: 1.25
}

@media (max-width:767px) {
    .slidecontentItem__content {
        padding: 0 10px 0 35px
    }
}

.slidecontentItem.is-active,
.slidecontentItem:focus-within {
    padding-bottom: 20px
}

.slidecontentItem.is-active .slidecontentItem__headline:after,
.slidecontentItem:focus-within .slidecontentItem__headline:after {
    content: var(--base-icon-minus)
}

.slidecontentItem.is-active .slidecontentItem__content,
.slidecontentItem:focus-within .slidecontentItem__content {
    display: block
}

.newsletterFooterForm .newsletterForm {
    display: flex;
    width: 100%
}

.newsletterFooterForm .newsletterForm .infieldInputGroup {
    margin: 0;
    flex-grow: 1
}

.newsletterFooterForm .newsletterForm .inputGroup {
    margin: 0;
    flex-grow: 1
}

.newsletterFooterForm .newsletterForm .inputGroup input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    line-height: 26px;
    max-height: 46px
}

.newsletterFooterForm .newsletterForm button {
    align-items: center;
    justify-content: center;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: var(--main-color-secondary);
    color: var(--main-color-white);
    border-color: var(--main-color-secondary)
}

.newsletterFooterForm .newsletterForm .klaviyo-form {
    flex-grow: 1
}

.newsletterFooterForm .newsletterForm .klaviyo-form button {
    width: auto
}

.newsletterFooterForm .button-icon {
    display: none
}

@media (max-width:767px) {
    .newsletterFooterForm button {
        width: 48px
    }

    .newsletterFooterForm .button-text {
        display: none
    }

    .newsletterFooterForm .button-icon {
        display: inline-flex
    }
}

.newsletterBanner .newsletterForm {
    display: flex;
    width: 100%
}

.newsletterBanner .newsletterForm .infieldInputGroup {
    margin: 0;
    flex-grow: 1
}

.newsletterBanner .newsletterForm>label {
    display: none
}

.newsletterBanner .newsletterForm .inputGroup input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.newsletterBanner .newsletterForm button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: var(--main-color-secondary);
    color: var(--main-color-white);
    border-color: var(--main-color-secondary)
}

.banner .textcontent+.newsletterBanner {
    margin-top: 20px
}

.newsletterFormSitepart .specialcheckbox {
    margin-bottom: 26px
}

.fullscreenSwiper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 106;
    background-color: var(--main-color-white);
    display: flex;
    flex-direction: column
}

.fullscreenSwiper:before {
    content: var(--base-icon-loading);
    font-family: icons, Helvetica, Arial, sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    font-size: 80px;
    z-index: 106;
    color: var(--main-color-middle-gray);
    animation: rotation 1s infinite ease-in-out;
    opacity: 0;
    pointer-events: none;
    transition: .2s ease-in-out
}

@media (min-width:768px) {
    .fullscreenSwiper:before {
        font-size: 120px
    }
}

.fullscreenSwiper.is-loading:before {
    opacity: 1
}

.fullscreenSwiper.is-loading .fullscreenSwiperImage,
.fullscreenSwiper.is-loading .fullscreenSwiperThumbs {
    opacity: 0
}

.fullscreenSwiperImage {
    width: 100%;
    flex-grow: 1;
    padding: 96px 160px;
    display: flex;
    justify-content: center;
    transition: opacity .2s ease-in-out
}

.fullscreenSwiperImage:after,
.fullscreenSwiperImage:before {
    display: none
}

.fullscreenSwiperImage::after,
.fullscreenSwiperImage::before {
    display: none
}

.fullscreenSwiperImage .swiper-slide {
    position: relative;
    opacity: 0;
    transition: .2s ease-in-out
}

.fullscreenSwiperImage .swiper-slide>* {
    bottom: 0;
    height: auto;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: auto
}

.fullscreenSwiperImage .swiper-slide iframe {
    width: 100%;
    height: 100%
}

.fullscreenSwiperImage .swiper-slide.swiper-slide-active {
    opacity: 1
}

.fullscreenSwiperImage .swiper-slide .swiper-zoom-container img {
    cursor: -webkit-zoom-in;
    cursor: zoom-in
}

.fullscreenSwiperImage .swiper-button-next,
.fullscreenSwiperImage .swiper-button-prev {
    font-size: 40px;
    border: 2px solid transparent;
    color: var(--main-color-gray-base);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    margin-top: -30px;
    cursor: pointer
}

.fullscreenSwiperImage .swiper-button-next:hover,
.fullscreenSwiperImage .swiper-button-prev:hover {
    color: var(--main-color-action);
    border-color: var(--main-color-action)
}

.fullscreenSwiperImage .swiper-button-next.swiper-button-lock,
.fullscreenSwiperImage .swiper-button-prev.swiper-button-lock {
    display: none
}

.fullscreenSwiperImage .swiper-button-prev {
    left: 20px
}

.fullscreenSwiperImage .swiper-button-next {
    right: 20px
}

@media (max-width:767px) {
    .fullscreenSwiperImage {
        padding: 16px
    }

    .fullscreenSwiperImage .swiper-button-next,
    .fullscreenSwiperImage .swiper-button-prev {
        display: none
    }
}

.fullscreenSwiper .icon-close {
    font-size: 20px
}

@media screen and (max-width:481px) {
    .fullscreenSwiper .icon-close {
        font-size: 15px
    }
}

.fullscreenSwiper .icon-angle-left,
.fullscreenSwiper .icon-angle-right {
    font-size: 30px
}

.fullscreenSwiperThumbs {
    flex-shrink: 0;
    height: 112px;
    padding-bottom: 32px;
    transition: opacity .2s ease-in-out;
    overflow: visible
}

@media (max-width:767px) {
    .fullscreenSwiperThumbs {
        height: 76px;
        padding-bottom: 16px
    }
}

.fullscreenSwiperThumbs .swiper-wrapper {
    justify-content: center
}

.fullscreenSwiperThumbs .swiper-slide {
    width: 80px;
    cursor: pointer;
    opacity: .4;
    transition: .2s ease-in-out
}

@media (max-width:767px) {
    .fullscreenSwiperThumbs .swiper-slide {
        width: 60px
    }
}

.fullscreenSwiperThumbs .swiper-slide>img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain
}

.fullscreenSwiperThumbs .swiper-slide.swiper-slide-thumb-active,
.fullscreenSwiperThumbs .swiper-slide:hover {
    opacity: 1
}

.fullscreenSwiperThumbs .swiper-button-disabled {
    opacity: 0
}

.fullscreenSwiperClose {
    position: fixed;
    right: 20px;
    top: 20px;
    font-size: 40px;
    border: 2px solid transparent;
    color: var(--main-color-black);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    transition: .2s ease-in-out
}

.fullscreenSwiperClose:hover {
    color: var(--main-color-action);
    border-color: var(--main-color-action)
}

@media (max-width:767px) {
    .fullscreenSwiperClose {
        top: 10px;
        right: 10px;
        font-size: 30px;
        border-width: 1px;
        width: 40px;
        height: 40px
    }
}

body.fullscreen-gallery-opened {
    overflow: hidden;
    contain: unset
}

body.fullscreen-gallery-opened .fullscreenSwiperImage .swiper-wrapper {
    height: 100% !important
}

.highlightPicture {
    display: flex;
    flex-direction: column
}

.highlightPicture__image {
    align-self: center;
    position: relative
}

.highlightBullet {
    position: absolute
}

.highlightBullet__button {
    width: 32px;
    height: 32px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: var(--main-color-action);
    color: var(--main-color-white);
    position: relative;
    cursor: pointer;
    z-index: 1
}

.highlightBullet__button:before {
    font-size: 22px;
    font-family: icons, Helvetica, Arial, sans-serif;
    content: var(--base-icon-plus);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--main-color-white);
    transition: .1s all ease-in-out
}

.highlightBullet__button:hover {
    background: var(--main-color-secondary)
}

.highlightBullet__content {
    position: absolute;
    padding: 10px;
    display: none;
    background: var(--main-color-white);
    font-size: var(--main-font-size-base);
    line-height: var(--main-line-height);
    min-width: 150px
}

@media (min-width:768px) {
    .highlightBullet__content {
        min-width: 200px
    }
}

.highlightBullet a {
    color: var(--main-color-black);
    text-decoration: none;
    font-size: var(--main-font-size-base);
    line-height: var(--main-line-height)
}

.highlightBullet a:hover .highlightBullet__description {
    text-decoration: underline
}

.highlightBullet__headline {
    margin-bottom: 0
}

@media (min-width:768px) {
    .highlightBullet__headline {
        white-space: nowrap
    }
}

.highlightBullet__itemNo {
    font-size: var(--main-font-size-small)
}

.highlightBullet__description {
    line-height: 1.2
}

.highlightBullet__inventory {
    margin-top: 5px
}

.highlightBullet__inventory p {
    white-space: nowrap
}

.highlightBullet--left .highlightBullet__content {
    top: 50%;
    right: 16px;
    padding-right: 26px;
    transform: translateY(-50%)
}

.highlightBullet--right .highlightBullet__content {
    top: 50%;
    left: 16px;
    padding-left: 26px;
    transform: translateY(-50%)
}

.highlightBullet.active .highlightBullet__button {
    background: var(--main-color-secondary)
}

.highlightBullet.active .highlightBullet__button:before {
    content: var(--base-icon-minus)
}

body[data-site_code=catalog] .highlightBullet__price {
    display: none
}

.lockerRentalProcess {
    max-width: 900px;
    padding: 40px;
    border: 1px solid var(--main-color-light-gray);
    border-radius: 8px;
    background-color: var(--main-color-gray-background)
}

.lockerRentalProcess .progressWrapper {
    padding: 10px 0;
    background-color: var(--main-color-gray-background);
    position: sticky;
    top: 25px;
    z-index: 2;
    right: 0;
    margin-bottom: 20px
}

.lockerRentalProcess #progress-container {
    margin-bottom: 40px;
    height: 20px;
    background: var(--main-color-white);
    border-radius: 8px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .2)
}

.lockerRentalProcess #progress-bar {
    height: 100%;
    width: 0%;
    max-width: 100%;
    background: var(--main-color-secondary);
    color: var(--main-color-white);
    border-radius: 10px;
    transition: width .3s ease
}

.lockerRentalProcess #step-counter {
    position: relative;
    margin-top: 10px;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 20px;
    color: var(--main-color-black);
    display: flex
}

.lockerRentalProcess .form-group-step,
.lockerRentalProcess .form-step {
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity .5s ease
}

.lockerRentalProcess .form-group-step.show,
.lockerRentalProcess .form-step.show {
    display: block !important;
    opacity: 1
}

@media (max-width:767px) {
    .lockerRentalProcess {
        padding: 20px
    }
}

.flatpickr-day.endRange,
.flatpickr-day.selected,
.flatpickr-day.startRange {
    background: var(--main-color-primary);
    border-color: var(--main-color-primary)
}

.flatpickr-day.endRange:focus,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus {
    background: var(--main-color-secondary);
    border-color: var(--main-color-secondary)
}

.chartHeader {
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media screen and (max-width:768px) {
    .chartHeader {
        flex-direction: column-reverse;
        align-items: unset;
        gap: 20px
    }
}

.chartSelects {
    display: grid;
    grid-template-columns: 300px 300px;
    gap: 20px
}

@media screen and (max-width:768px) {
    .chartSelects {
        grid-template-columns: 100%
    }
}

.chartTools {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px
}

.chartTools button {
    border: 0;
    padding: 0;
    line-height: unset;
    letter-spacing: 0;
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.chartTools button:hover {
    color: var(--main-color-primary);
    cursor: pointer;
    background: 0 0
}

.chartTools button:focus-within {
    border: 0;
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px;
    color: var(--main-color-white)
}

.chartDate {
    position: relative
}

.chartDate .icon {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 0
}

.chartPicker {
    position: relative;
    z-index: 1;
    background: 0 0
}

.chartPicker:hover .icon {
    color: var(--main-color-primary)
}

.chartHints {
    margin-top: 32px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: end
}

@media screen and (max-width:1024px) {
    .chartHints {
        flex-direction: column;
        align-items: unset;
        gap: 20px
    }
}

.chartHints p {
    margin: 0
}

.chartBox {
    height: 200px;
    width: 100%;
    position: relative
}

.chartTags .tags {
    justify-content: end
}

@media screen and (max-width:1024px) {
    .chartTags .tags {
        justify-content: start
    }
}

.priceListNumber {
    grid-area: a
}

.priceListHeader {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

@media screen and (max-width:768px) {
    .priceListHeader {
        gap: 15px;
        margin-bottom: 0
    }
}

.priceListTableHeader {
    background: var(--main-color-secondary);
    color: var(--main-color-white);
    text-transform: uppercase;
    padding: 18px 0
}

@media screen and (max-width:768px) {
    .priceListTableHeader {
        padding: 5px 0
    }
}

.priceListTableHeader .sortable {
    cursor: pointer;
    white-space: nowrap
}

.priceListTableHeader .sortable .sortableIcon {
    position: relative;
    margin-left: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.priceListTableHeader .sortable .sortableIcon:after {
    content: var(--base-icon-angle-down-bold);
    font-family: icons;
    font-size: 9px;
    position: absolute;
    right: 12px;
    bottom: -2px;
    color: var(--main-color-white)
}

.priceListTableHeader .sortable .sortableIcon:before {
    content: var(--base-icon-angle-up-bold);
    font-family: icons;
    font-size: 9px;
    position: absolute;
    top: -2px;
    right: 12px;
    color: var(--main-color-white)
}

.priceListTableHeader .sortable .sortableIcon:focus-within {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.priceListTableHeader .sortable.activeSortingAsc .sortableIcon:after {
    color: var(--main-color-primary)
}

.priceListTableHeader .sortable.activeSortingDesc .sortableIcon:before {
    color: var(--main-color-primary)
}

@media screen and (max-width:768px) {

    .priceListTableHeader .priceListBuy,
    .priceListTableHeader .priceListImage,
    .priceListTableHeader .priceListPriceUpdate,
    .priceListTableHeader .priceListSell {
        display: none
    }
}

.priceListTableBody>a {
    color: var(--main-color-black)
}

.priceListTableRow {
    display: grid;
    grid-template-columns: 200px 140px auto 200px 200px 200px;
    padding: 5px 12px;
    align-items: center;
    text-decoration: none;
    grid-template-areas: "a b c d e f"
}

@media screen and (max-width:1250px) {
    .priceListTableRow {
        grid-template-columns: 100px 100px auto 140px 140px 140px
    }
}

@media screen and (max-width:768px) {
    .priceListTableRow {
        grid-template-columns: 90px 60px auto;
        grid-template-rows: auto auto auto;
        grid-template-areas: "a b c" ". . d" ". . e" ". . f"
    }
}

.priceListTableRow:hover {
    text-decoration: none
}

.priceListTableRow .mobileLabel {
    display: none
}

@media screen and (max-width:768px) {
    .priceListTableRow .mobileLabel {
        display: inline-block;
        font-weight: 400
    }
}

.priceListTableRow:nth-child(2n) {
    background: var(--main-color-secondary-light)
}

.priceListImage {
    text-align: center;
    grid-area: b
}

.priceListImage img {
    max-width: 75px;
    max-height: 75px;
    display: block
}

@media screen and (max-width:768px) {
    .priceListImage img {
        max-width: 50px;
        max-height: 50px
    }
}

.priceListArticle {
    grid-area: c
}

.priceListBuy {
    grid-area: d;
    text-align: right
}

@media screen and (max-width:768px) {
    .priceListBuy {
        text-align: left
    }
}

.priceListSell {
    grid-area: e;
    text-align: right
}

@media screen and (max-width:768px) {
    .priceListSell {
        text-align: left
    }
}

.priceListPriceUpdate {
    grid-area: f;
    text-align: right
}

@media screen and (max-width:768px) {
    .priceListPriceUpdate {
        text-align: left
    }
}

.priceListSearch {
    min-width: 300px;
    position: relative
}

@media screen and (max-width:768px) {
    .priceListSearch {
        width: 100%;
        min-width: 0;
        margin-bottom: 15px
    }
}

.priceListSearch #priceListSearchInput {
    padding-right: 40px
}

.priceListSearch .icon {
    position: absolute;
    right: 15px;
    top: 12px
}

.priceListTags .tag {
    font-size: var(--main-font-size-base);
    padding: 10px 15px
}

@media screen and (max-width:768px) {
    .priceListTags .tag {
        padding: 7px 10px;
        font-size: var(--main-font-size-small)
    }
}

.referenceListTableHeader {
    background: var(--main-color-secondary);
    color: var(--main-color-white);
    text-transform: uppercase;
    padding: 18px 0
}

@media screen and (max-width:768px) {
    .referenceListTableHeader {
        padding: 5px 0
    }
}

@media screen and (max-width:481px) {
    .referenceListTableHeader {
        font-size: var(--main-font-size-small)
    }
}

.referenceListRow {
    display: grid;
    grid-template-columns: 75% 12.5% 12.5%;
    padding: 5px 12px;
    text-decoration: none
}

@media screen and (max-width:1250px) {
    .referenceListRow {
        grid-template-columns: 60% 20% 20%
    }
}

@media screen and (max-width:768px) {
    .referenceListRow {
        grid-template-columns: 33% 33% 33%
    }
}

.referenceListRow:nth-child(2n) {
    background: var(--main-color-secondary-light)
}

.referenceListBuy {
    text-align: right
}

.referenceListSell {
    text-align: right
}

.referenceListTags {
    margin-bottom: 20px
}

@media (max-width:767px) {
    .youtubecontent:has(div.DCCookie_youtube_container) {
        padding-bottom: 30px;
        height: auto
    }

    .youtubecontent:has(div.DCCookie_youtube_container) .DCCookie_youtube_container {
        position: relative
    }

    .youtubecontent:has(div.DCCookie_youtube_container) .DCCookie_youtube_container .dcCookieExternal__info {
        border-radius: 16px
    }
}

.heroBanner {
    height: 90vh;
    position: relative;
    background: var(--main-color-secondary);
    overflow: hidden
}

.heroBanner .contentText {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 1840px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (min-width:1250px) {
    .heroBanner .contentText {
        padding-top: 220px !important
    }
}

@media (min-width:1540px) {
    .heroBanner .contentText {
        padding-top: 295px !important
    }
}

.heroBanner .contentText .subline {
    font-size: 3rem;
    font-weight: var(--main-font-weight-medium);
    line-height: 1.2;
    margin-bottom: 40px
}

@media (max-width:767px) {
    .heroBanner .contentText .subline {
        font-size: 16px;
        margin-bottom: 20px
    }
}

.heroBanner .contentText .highlighted {
    max-width: 100%;
    margin-bottom: 40px
}

@media (max-width:1539px) {
    .heroBanner .contentText .highlighted {
        max-width: 100%
    }
}

@media (max-width:767px) {
    .heroBanner .contentText .highlighted {
        font-size: 38px;
        margin-bottom: 16px;
        line-height: 1.1
    }
}

@media (max-width:481px) {
    .heroBanner .contentText .highlighted {
        font-size: 36px;
        margin-top: 130px;
    }
}

.heroBanner .contentImage {
    border-bottom: 2px solid var(--main-color-primary)
}

@media (max-width:767px) {
    .heroBanner .contentImage {
        max-height: 100%
    }
}

.heroBanner .contentImage:after {
    background: linear-gradient(0, rgba(0, 0, 0, .5) 100%, rgba(255, 255, 255, 0) 0)
}

.heroBanner .contentOverlay {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 1920px;
    height: auto;
    pointer-events: none
}

.heroBanner .contentOverlay .imageWrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: -210px;
    z-index: 11;
    max-height: 300px
}

.heroBanner .contentOverlay .imageWrapper picture {
    max-height: 300px
}

@media (max-width:1539px) {
    .heroBanner {
        height: 800px
    }
}

@media (max-width:1023px) {
    .heroBanner {
        height: 80vh
    }

    .heroBanner .contentOverlay {
        bottom: -90px
    }

    .heroBanner .contentOverlay .imageWrapper {
        margin-bottom: -125px;
        max-height: 180px
    }

    .heroBanner .contentOverlay .imageWrapper img,
    .heroBanner .contentOverlay .imageWrapper picture {
        max-height: 180px
    }
}

@media (max-width:767px) {
    .heroBanner .contentText.contentText--left {
        justify-content: center
    }
}

@media screen and (min-width:1250px) {
    body:has(.js-trustBar) .heroBanner .contentText {
        padding-top: 250px !important
    }
}

@media (max-width:1249px) {
    body:has(.js-trustBar) .heroBanner .contentText {
        padding-top: 160px !important
    }
}

@media (max-width:768px) {
    body:has(.js-trustBar) .heroBanner .contentText {
        padding-top: 150px !important
    }
}

.textImgSection .contentText {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px
}

@media (min-width:768px) {
    .textImgSection .contentText {
        padding: 50px
    }
}

@media (min-width:1250px) {
    .textImgSection .contentText {
        padding: 150px 100px
    }
}

.textImgSection .contentImage .categoryPicture,
.textImgSection .contentImage picture {
    height: 100%
}

.textImgSection .contentImage .categoryPicture img,
.textImgSection .contentImage picture img {
    object-fit: cover;
    height: 100% !important
}

.textImgSection .contentImage .categoryPicture img {
    width: 100% !important;
    max-height: 500px
}

.imageHoverExpand .gridRow {
    display: flex;
    gap: 1rem;
    transition: all .4s ease
}

.imageHoverExpand .gridRow .gridItem {
    flex: 1 1 0;
    transition: flex .6s ease, transform .4s ease;
    height: 680px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    border-radius: 16px
}

.imageHoverExpand .gridRow .gridItem picture {
    flex: 1 1 auto;
    width: 100%;
    height: 100%
}

.imageHoverExpand .gridRow .gridItem picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    border-radius: 16px
}

.imageHoverExpand .gridRow .gridItem .gridItemContent--headline {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: 40px;
    transition: font-size .5s ease;
    transition-delay: 0.2s;
    white-space: nowrap
}

@media (min-width:1250px) {
    .imageHoverExpand .gridRow .gridItem.hoverintent {
        flex: 3 1 0;
        z-index: 2
    }

    .imageHoverExpand .gridRow .gridItem.hoverintent img {
        transform: scale(1.05)
    }

    .imageHoverExpand .gridRow .gridItem.hoverintent .gridItemContent--headline {
        font-size: 4rem
    }
}

.imageHoverExpand .gridRow .gridItem::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 1) 100%);
    z-index: 1;
    pointer-events: none;
    transition: opacity .4s ease
}

.imageHoverExpand .gridRow .gridItem .gridItemContent {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    z-index: 1;
    color: var(--main-color-white);
    transition: opacity .4s ease
}

.imageHoverExpand .gridRow .gridItem>a {
    display: block;
    height: 100%
}

.imageHoverExpand .gridRow .gridItem>a:hover .button--bordered {
    background: var(--main-color-secondary-dark);
    border-color: var(--main-color-secondary-dark)
}

.imageHoverExpand .gridRow .gridItem>a:focus-within .button--icon {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

@media (min-width:1250px) {
    .imageHoverExpand .gridRow:has(.gridItem.hoverintent) .gridItem:not(.hoverintent) .gridItemContent {
        opacity: 0
    }
}

.imageHoverExpand .button--icon {
    color: var(--main-color-white);
    border-color: var(--main-color-white);
    width: 40px;
    height: 40px
}

.imageHoverExpand .button--bordered {
    color: var(--main-color-white);
    border-color: var(--main-color-white);
    display: inline-flex;
    height: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 12px 8px 16px;
    align-items: center;
    gap: 6px;
    font-size: 1.4rem;
    min-width: auto
}

.imageHoverExpand .button--bordered:hover {
    background: var(--main-color-secondary-dark);
    border-color: var(--main-color-secondary-dark)
}

.imageHoverExpand .buttonRow,
.imageHoverExpand .buttonRowBottom,
.imageHoverExpand .buttonRowTop {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 5px;
    margin: 0
}

.imageHoverExpand .buttonRow .button,
.imageHoverExpand .buttonRowBottom .button,
.imageHoverExpand .buttonRowTop .button {
    margin: 0;
    flex-shrink: 0
}

@media (min-width:1250px) {

    .imageHoverExpand .buttonRow,
    .imageHoverExpand .buttonRowBottom,
    .imageHoverExpand .buttonRowTop {
        flex-wrap: nowrap
    }
}

@media (max-width:1249px) {
    .imageHoverExpand {
        margin-right: -20px
    }

    .imageHoverExpand .gridRow {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 1rem
    }

    .imageHoverExpand .gridRow .gridItem {
        flex: 0 0 auto;
        width: 320px;
        min-width: 320px;
        max-width: 320px;
        scroll-snap-align: start;
        transition: width .4s ease;
        height: 480px
    }

    .imageHoverExpand .gridRow .gridItem:last-child {
        margin-right: 20px
    }
}

[data-lang_code$=-en] .imageHoverExpand .buttonRow,
[data-lang_code$=-en] .imageHoverExpand .buttonRowBottom,
[data-lang_code$=-en] .imageHoverExpand .buttonRowTop,
[data-lang_code$=-es] .imageHoverExpand .buttonRow,
[data-lang_code$=-es] .imageHoverExpand .buttonRowBottom,
[data-lang_code$=-es] .imageHoverExpand .buttonRowTop,
[data-lang_code$=-fr] .imageHoverExpand .buttonRow,
[data-lang_code$=-fr] .imageHoverExpand .buttonRowBottom,
[data-lang_code$=-fr] .imageHoverExpand .buttonRowTop,
[data-lang_code$=-it] .imageHoverExpand .buttonRow,
[data-lang_code$=-it] .imageHoverExpand .buttonRowBottom,
[data-lang_code$=-it] .imageHoverExpand .buttonRowTop {
    flex-direction: column;
    align-items: flex-start
}

.swiperTiles {
    display: flex;
    flex-direction: column
}

.swiperTiles .swiper-container {
    overflow: visible;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity .4s ease
}

.swiperTiles .swiper-container.is-loading {
    opacity: 0;
    transition: opacity .4s ease
}

.swiperTiles .contentImage {
    height: 100%;
    max-height: 650px
}

.swiperTiles .contentImage picture {
    height: 100%
}

.swiperTiles .contentImage picture img {
    object-fit: cover
}

.swiperTiles .contentText {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 50px
}

.swiperTiles .contentText--subline {
    font-size: 1.8rem;
    line-height: 1.33;
    margin-bottom: 10px
}

.swiperTiles .contentText--headline {
    font-weight: var(--main-font-weight-medium);
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 40px;
    max-width: 60%
}

.swiperTiles .swiper-slide {
    position: relative;
    border-radius: 16px;
    transition: transform .4s ease, opacity .4s ease;
    contain: paint;
    min-height: 400px
}

.swiperTiles .swiper-slide.dimmed {
    opacity: .5;
    transform: scale(.9)
}

.swiperTiles .swiper-slide.dimmed--right {
    transform: scale(.9) translateX(-40px)
}

.swiperTiles .swiper-slide.dimmed--left {
    transform: scale(.9) translateX(40px)
}

@media (max-width:1249px) {
    .swiperTiles .swiper-slide.dimmed--right {
        transform: scale(.9) translateX(-25px)
    }

    .swiperTiles .swiper-slide.dimmed--left {
        transform: scale(.9) translateX(25px)
    }
}

@media (max-width:1023px) {
    .swiperTiles .swiper-slide.dimmed--right {
        transform: scale(.9) translateX(-15px)
    }

    .swiperTiles .swiper-slide.dimmed--left {
        transform: scale(.9) translateX(15px)
    }
}

@media (max-width:767px) {

    .swiperTiles .swiper-slide.dimmed,
    .swiperTiles .swiper-slide.dimmed--left,
    .swiperTiles .swiper-slide.dimmed--right {
        transform: scale(.95) translateX(0)
    }
}

.swiperTiles .swiperControls {
    display: flex;
    align-items: center;
    gap: 60px
}

.swiperTiles .swiperButtonWrapper {
    position: relative;
    display: flex;
    gap: 32px;
    width: 97px;
    margin-left: -20px
}

@media (max-width:767px) {
    .swiperTiles .swiperButtonWrapper {
        width: 120px
    }
}

.swiperTiles .swiper-pagination {
    display: flex;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px
}

.swiperTiles .swiper-pagination .swiper-pagination-bullet {
    flex: 1 1 0;
    height: 2px;
    border-radius: 0
}

@media (max-width:1249px) {
    .swiperTiles .contentText {
        padding: 20px
    }

    .swiperTiles .contentText--subline {
        font-size: 1.6rem;
        margin-bottom: 5px
    }

    .swiperTiles .contentText--headline {
        font-size: 2.8rem;
        margin-bottom: 20px;
        max-width: 80%
    }

    .swiperTiles .swiperControls {
        gap: 20px
    }

    .swiperTiles .swiper-pagination {
        gap: 5px
    }
}

@media (max-width:767px) {
    .swiperTiles .swiper-pagination {
        margin: 10px 0;
        padding-right: 20px
    }
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 64px
}

@media (max-width:767px) {
    .divider {
        gap: 20px
    }
}

.line {
    flex: 1;
    height: 1px;
    background-color: var(--main-color-gray-base)
}

svg {
    object-fit: contain;
    height: 42px
}

.bannerSlider {
    position: relative;
    color: var(--main-color-white);
    overflow: hidden
}

.bannerSlider .swiperControls {
    position: absolute;
    bottom: 90px;
    left: 20px;
    right: 20px;
    max-width: 1800px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--main-color-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1
}

@media (min-width:1800px) {
    .bannerSlider .swiperControls {
        left: 60px;
        right: 60px;
        width: calc(100% - 120px)
    }
}

@media (max-width:1249px) {
    .bannerSlider .swiperControls {
        padding-top: 32px;
        bottom: 40px
    }
}

@media (max-width:1023px) {
    .bannerSlider .swiperControls {
        bottom: 70px
    }

    .bannerSlider .swiperControls nav {
        position: absolute;
        left: 0;
        bottom: -40px;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch
    }
}

@media (max-width:767px) {
    .bannerSlider .swiperControls {
        padding-top: 16px;
        bottom: 50px
    }
}

.bannerSlider .contentText {
    position: absolute;
    top: 40%;
    left: 10%;
    transform: translate(-10%, -40%);
    text-align: center;
    max-width: 600px;
    padding-left: 20px;
    padding-right: 20px
}

.bannerSlider .contentText .textcontent {
    margin-bottom: 20px
}

.bannerSlider .contentText .button {
    border-color: var(--main-color-white);
    color: var(--main-color-white)
}

.bannerSlider .contentText .button:hover {
    border-color: var(--main-color-secondary-dark)
}

@media (max-width:1249px) {
    .bannerSlider .contentText {
        width: 100%;
        left: 50%;
        top: 40px;
        transform: translateX(-50%)
    }
}

.bannerSlider .contentImage {
    height: 100%
}

.bannerSlider .contentImage picture {
    height: 100%
}

.bannerSlider .contentImage picture img {
    object-fit: cover
}

.bannerSlider .contentImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(0, 46, 85, 0) 0, rgba(0, 46, 85, .6) 100%)
}

@media (max-width:767px) {
    .bannerSlider .contentImage:after {
        background: linear-gradient(180deg, rgba(0, 46, 85, 0) 0, rgba(0, 46, 85, .8) 100%)
    }
}

.bannerSlider .custom-pagination {
    list-style: none;
    display: flex;
    gap: 40px;
    padding-left: 0
}

.bannerSlider .custom-pagination li {
    margin-bottom: 0;
    opacity: .7;
    cursor: pointer;
    font-weight: var(--main-font-weight-medium);
    letter-spacing: .3px;
    outline: 0
}

.bannerSlider .custom-pagination li.is-active,
.bannerSlider .custom-pagination li:focus,
.bannerSlider .custom-pagination li:hover {
    opacity: 1
}

.bannerSlider .custom-pagination li:focus {
    text-decoration: underline
}

@media (max-width:1023px) {
    .bannerSlider .custom-pagination {
        display: inline-flex;
        gap: 20px;
        margin: 0
    }

    .bannerSlider .custom-pagination li {
        flex: 0 0 auto
    }

    .bannerSlider .custom-pagination.is-active {
        opacity: 1
    }
}

.bannerSlider .swiper-slide {
    max-height: 960px
}

@media (max-width:1249px) {
    .bannerSlider .swiper-slide {
        height: 600px
    }
}

@media (max-width:767px) {
    .bannerSlider .swiper-slide {
        height: 525px
    }
}

.bannerSlider .swiper-pagination {
    text-align: right;
    color: var(--main-color-white);
    max-width: 50px;
    margin-top: 0
}

.bannerSlider .swiperButtonWrapper {
    position: relative;
    width: 97px;
    height: 40px;
    margin-left: -20px
}

.bannerSlider .swiperButtonWrapper>div {
    color: var(--main-color-white)
}

.bannerSlider .swiperButtonWrapper>div:focus,
.bannerSlider .swiperButtonWrapper>div:hover {
    color: var(--main-color-primary)
}

.coinSeries {
    width: 1005px;
    align-self: stretch
}

@media screen and (max-width:1540px) {
    .coinSeries {
        width: 50%
    }
}

@media screen and (max-width:1024px) {
    .coinSeries {
        width: 100%
    }
}

.coinSeries .swiper-container {
    height: 100%
}

@media screen and (max-width:1024px) {
    .coinSeries .swiper-container {
        height: auto
    }
}

.coinSeries .swiper-wrapper {
    height: 100%
}

@media screen and (max-width:1024px) {
    .coinSeries .swiper-wrapper {
        height: auto
    }
}

.coinSeries .coinMobileContent {
    display: none
}

@media screen and (max-width:1024px) {
    .coinSeries .coinMobileContent {
        display: block
    }
}

.coinSeries .coinMobileContent .h1 {
    margin-bottom: 10px
}

.coinSeries .contentImage {
    position: relative;
    padding-left: 12%;
    height: 100%
}

@media screen and (max-width:1024px) {
    .coinSeries .contentImage {
        padding-left: 0;
        padding-bottom: 120px
    }
}

@media screen and (max-width:481px) {
    .coinSeries .contentImage {
        padding-bottom: 50px
    }
}

.coinSeries .contentImage .coinImage {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% - 383px);
    width: 383px;
    aspect-ratio: 1/1;
    opacity: 0
}

@media screen and (max-width:1540px) {
    .coinSeries .contentImage .coinImage {
        width: 283px
    }
}

@media screen and (max-width:481px) {
    .coinSeries .contentImage .coinImage {
        width: 183px
    }
}

@media screen and (max-width:1024px) {
    .coinSeries .contentImage .coinImage {
        top: unset;
        bottom: 0;
        left: 50% !important;
        transform: translateY(0) translateX(-50%);
        opacity: 1
    }
}

.coinSeries .contentImage .coinBackground {
    height: 100%
}

.coinSeries .contentImage .coinBackground img,
.coinSeries .contentImage .coinBackground picture {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1005/700;
    border-radius: 12px 0 0 12px;
    height: 700px !important
}

@media screen and (max-width:1024px) {

    .coinSeries .contentImage .coinBackground img,
    .coinSeries .contentImage .coinBackground picture {
        border-radius: 12px;
        height: 400px !important
    }
}

@media screen and (max-width:481px) {

    .coinSeries .contentImage .coinBackground img,
    .coinSeries .contentImage .coinBackground picture {
        height: 300px !important
    }
}

.coinSeries .swiper-slide {
    background: var(--main-color-white)
}

@media screen and (max-width:1024px) {
    .coinSeries .swiper-slide {
        height: 100%
    }
}

.coinSeries .swiper-slide-active .coinImage {
    transition: opacity .5s ease-in-out, left 1s ease-in-out;
    left: 0;
    opacity: 1
}

.coinSeries .swiper-slide.changeEvent .coinImage {
    left: calc(100% - 383px)
}

.coinSeriesWrapper {
    display: flex;
    padding-left: calc((100% - 1840px)/ 2 + 40px)
}

@media screen and (max-width:1860px) {
    .coinSeriesWrapper {
        padding-left: 20px
    }
}

@media screen and (max-width:1024px) {
    .coinSeriesWrapper {
        flex-direction: column
    }
}

.coinSeriesWrapper .swiperControls {
    width: calc(100% - 1005px);
    padding-right: 84px
}

@media screen and (max-width:1540px) {
    .coinSeriesWrapper .swiperControls {
        width: 50%
    }
}

@media screen and (max-width:1024px) {
    .coinSeriesWrapper .swiperControls {
        width: 100%
    }
}

.coinSeriesWrapper .swiperControls .coinBtn {
    margin: 0;
    position: relative;
    cursor: pointer;
    outline: 0
}

.coinSeriesWrapper .swiperControls .coinBtn:focus .coinTitle {
    text-decoration: underline
}

.coinSeriesWrapper .swiperControls .coinBtn .coinDescription {
    margin: 0;
    display: none;
    max-width: 600px
}

.coinSeriesWrapper .swiperControls .coinBtn .coinTitle {
    color: var(--main-color-middle-gray);
    line-height: 100%;
    margin: 0
}

.coinSeriesWrapper .swiperControls .coinBtn:after {
    content: var(--base-icon-angle-right-light);
    font-family: icons, Helvetica, Arial, sans-serif;
    color: var(--main-color-primary);
    font-size: 30px;
    position: absolute;
    opacity: 0;
    right: 0;
    top: 15px;
    transition: opacity .5s ease-out
}

@media screen and (max-width:1540px) {
    .coinSeriesWrapper .swiperControls .coinBtn:after {
        top: 12px;
        font-size: 22px
    }
}

.coinSeriesWrapper .swiperControls .coinBtn.is-active {
    height: auto
}

.coinSeriesWrapper .swiperControls .coinBtn.is-active .coinDescription {
    margin: 20px 0 0 0;
    opacity: 1;
    display: block
}

.coinSeriesWrapper .swiperControls .coinBtn.is-active .coinTitle {
    color: var(--main-color-black)
}

.coinSeriesWrapper .swiperControls .coinBtn.is-active:after {
    opacity: 1
}

.coinSeriesWrapper .swiperControls .coinBtn::marker {
    content: "";
    display: none
}

.coinSeriesWrapper .swiperControls .coinBtn a,
.coinSeriesWrapper .swiperControls .coinBtn a>* {
    text-decoration: none
}

.coinSeriesWrapper .swiperControls .coinBtn a:hover {
    color: var(--main-color-dark-gray)
}

.coinSeriesWrapper .custom-pagination {
    list-style: none;
    display: flex;
    gap: 25px;
    flex-direction: column;
    padding: 0
}

@media screen and (max-width:1024px) {
    .coinSeriesWrapper .custom-pagination {
        display: none
    }
}

.coinSeriesTitle {
    margin-bottom: 65px
}

@media screen and (max-width:1024px) {
    .coinSeriesTitle {
        margin-bottom: 20px
    }
}

.jumpmarks {
    text-align: center;
    white-space: nowrap;
    overflow-x: auto
}

.jumpmarks .jumpmark {
    display: inline-block;
    margin: 0 20px;
    padding-bottom: 10px
}

@media screen and (max-width:1024px) {
    .jumpmarks .jumpmark {
        margin: 0 10px
    }
}

.jumpmarks .jumpmark a {
    text-decoration: none;
    white-space: nowrap
}

.jumpmarks .jumpmark a.active {
    color: var(--main-color-black)
}

.jumpmarks .jumpmark a:hover {
    color: var(--main-color-black)
}

div:has(> .jumpmarks) {
    position: sticky;
    padding: 40px 20px 30px 20px;
    background: var(--main-color-white);
    top: 0;
    z-index: 3
}

@media screen and (max-width:1024px) {
    div:has(> .jumpmarks) {
        padding: 20px
    }
}

.galleryGrid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.galleryGridColumn {
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center
}

.galleryGridColumn:first-child {
    width: calc(56% - 5px)
}

.galleryGridColumn:last-child {
    width: calc(44% - 5px)
}

.galleryGrid picture {
    height: 100%
}

.galleryGrid img {
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: block
}

.galleryGridImage1 {
    aspect-ratio: 507/560;
    overflow: hidden
}

.galleryGridImage2 img {
    aspect-ratio: 377/560
}

.galleryGridImage3 {
    padding-left: 26%
}

.galleryGridImage3 img {
    aspect-ratio: 377/450
}

@media screen and (min-width:1024px) {
    .serviceGrid .swiper-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 40px
    }
}

.serviceGridBox {
    position: relative;
    padding: 60px 40px;
    border-bottom: 1px solid var(--main-color-gray-base);
    border-right: 1px solid var(--main-color-gray-base)
}

@media screen and (max-width:1024px) {
    .serviceGridBox {
        border-bottom: 0;
        padding: 20px !important
    }
}

.serviceGridBox:after {
    content: "";
    position: absolute;
    top: -36px;
    left: calc(100% - 36px);
    width: 72px;
    height: 72px;
    background: var(--main-color-white)
}

@media screen and (max-width:1024px) {
    .serviceGridBox:after {
        display: none
    }
}

.serviceGridBox p {
    margin: 0
}

.serviceGridBox .icon {
    margin-bottom: 32px;
    display: block;
    font-size: 50px;
    color: var(--main-color-secondary-medium)
}

@media screen and (max-width:481px) {
    .serviceGridBox .icon {
        font-size: 30px;
        margin-bottom: 10px
    }
}

.serviceGridBox:nth-child(-n+3) {
    padding-top: 40px
}

@media screen and (max-width:481px) {
    .serviceGridBox:nth-child(-n+3) {
        padding-top: 20px
    }
}

.serviceGridBox:nth-child(-n+3):after {
    display: none
}

.serviceGridBox:nth-last-child(-n+3) {
    padding-bottom: 40px;
    border-bottom: 0
}

.serviceGridBox:nth-child(3n) {
    border-right: none
}

@media screen and (max-width:1024px) {
    .serviceGridBox:nth-child(3n) {
        border-right: 1px solid var(--main-color-gray-base)
    }
}

.serviceGridBox:nth-child(3) {
    border-bottom: 1px solid var(--main-color-gray-base)
}

@media screen and (max-width:1024px) {
    .serviceGridBox:nth-child(3) {
        border-bottom: 0 !important
    }
}

.serviceGridBox:last-child {
    border-bottom: 0
}

@media screen and (max-width:1024px) {
    .serviceGridBox:last-child {
        border-right: 0 !important
    }
}

.serviceGrid .swiper-pagination-bullet {
    width: 5px;
    height: 5px
}

.serviceGrid .swiper-pagination-bullet-active {
    background: var(--main-color-primary)
}

.container:has(.serviceGrid.swiper-initialized) {
    padding-left: 0;
    padding-right: 0
}

.previewGridHeader {
    text-align: center
}

.previewGridButton {
    margin: 80px 0
}

@media (max-width:1249px) {
    .previewGridButton {
        margin: 40px 0
    }
}

@media (max-width:767px) {
    .previewGridButton {
        margin: 20px 0
    }
}

.previewGridButton .button {
    font-weight: 600
}

.previewGridButton .button i {
    font-size: 12px
}

.previewGridBody {
    display: grid;
    grid-template-columns: calc((100% - 20px) * 0.299) calc((100% - 20px) * 0.402) calc((100% - 20px) * 0.299);
    grid-auto-rows: 10px;
    gap: 10px;
    margin: 0 auto
}

@media screen and (max-width:1024px) {
    .previewGridBody {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media screen and (max-width:768px) {
    .previewGridBody {
        gap: 5px
    }
}

.previewGridBody.previewGridTwoColumns {
    grid-template-columns: 1fr 1fr
}

.previewGridBody.previewGridTwoColumns .previewGridBigBox.middleColumn {
    --rows: 30 !important
}

@media screen and (max-width:1024px) {
    .previewGridBody.previewGridTwoColumns .previewGridBigBox.middleColumn .h2:not(.customSize) {
        font-size: 1.8rem
    }
}

@media screen and (max-width:1024px) and (min-width:481px) {
    .previewGridBody.previewGridTwoColumns .previewGridBigBox.middleColumn .h2:not(.customSize) {
        font-size: 2.2rem
    }
}

@media screen and (max-width:768px) {
    .previewGridBody.previewGridTwoColumns .previewGridBigBox.middleColumn {
        --rows: 20 !important
    }
}

.previewGridBody.previewGridTwoColumns .previewGridSpacer {
    grid-column: 2 !important
}

.previewGridBox {
    padding: 40px;
    --rows: 20;
    grid-row: span var(--rows, 10);
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    color: var(--main-color-white) !important
}

@media screen and (max-width:768px) {
    .previewGridBox {
        --rows: 10;
        padding: 20px
    }

    .previewGridBox:nth-of-type(5n+2),
    .previewGridBox:nth-of-type(5n+4) {
        --rows: 20 !important
    }

    .previewGridBox:nth-of-type(5n+1) {
        grid-column: 1/-1;
        --rows: 20 !important
    }
}

.previewGridBox:focus-within,
.previewGridBox:hover {
    color: var(--main-color-white)
}

.previewGridBox:focus-within img,
.previewGridBox:hover img {
    transform: scale(1.2)
}

.previewGridBox:focus-within .previewGridContent .icon,
.previewGridBox:hover .previewGridContent .icon {
    background: rgba(255, 255, 255, .3)
}

.previewGridBigBox {
    --rows: 30
}

@media screen and (max-width:768px) {
    .previewGridBigBox {
        --rows: 10
    }
}

.previewGridBigBox.middleColumn {
    --rows: 40
}

@media screen and (max-width:1024px) {
    .previewGridBigBox.middleColumn {
        --rows: 30
    }

    .previewGridBigBox.middleColumn .h2:not(.customSize) {
        font-size: 1.8rem
    }
}

@media screen and (max-width:1024px) and (min-width:481px) {
    .previewGridBigBox.middleColumn .h2:not(.customSize) {
        font-size: 2.2rem
    }
}

@media screen and (max-width:768px) {
    .previewGridBigBox.middleColumn {
        --rows: 10
    }
}

.previewGridContent {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: calc(100% - 80px);
    display: flex;
    justify-content: space-between;
    gap: 33px;
    align-items: end;
    z-index: 2
}

@media screen and (max-width:768px) {
    .previewGridContent {
        bottom: 20px;
        left: 20px;
        width: calc(100% - 40px)
    }
}

.previewGridContent .icon {
    width: 44px;
    height: 44px;
    border-radius: 100%;
    border: 1px solid var(--main-color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    transition: all .3s linear
}

@media screen and (max-width:768px) {
    .previewGridContent .icon {
        display: none
    }
}

.previewGridTitle {
    width: calc(100% - 77px);
    margin: 0
}

@media screen and (max-width:768px) {
    .previewGridTitle {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%
    }
}

.previewGridImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.previewGridImage picture {
    height: 100%
}

.previewGridImage img {
    object-fit: cover !important;
    object-position: top center;
    transition: all .3s linear
}

.previewGridImage:before {
    content: "";
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.previewGridSpacer {
    display: block;
    visibility: hidden;
    --rows: 5;
    grid-row: span var(--rows);
    grid-column: 1
}

@media screen and (max-width:1024px) {
    .previewGridSpacer {
        --rows: 3
    }
}

@media screen and (max-width:768px) {
    .previewGridSpacer {
        display: none
    }
}

.previewGridSpacer.thirdSpacer {
    --rows: 3;
    grid-column: 3
}

@media screen and (max-width:1024px) {
    .previewGridSpacer.thirdSpacer {
        display: none
    }
}

.canvasContainer {
    position: absolute;
    width: 100vw;
    height: 890px;
    left: 0;
    top: 0;
    background-repeat: repeat, no-repeat;
    z-index: -1
}

.canvasContainer.init {
    background-image: url("../images/degussa-form-animation.png")
}

@media screen and (max-width:1024px) {
    .canvasContainer {
        display: none
    }
}

.spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

@media screen and (max-width:1024px) {
    .spotlight {
        display: none
    }
}

.mainContent:has(.canvasContainer) {
    position: relative;
    z-index: 0
}

.stickyButtonBar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px;
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(3px);
    z-index: 99;
    text-align: center;
    white-space: nowrap;
    overflow-x: scroll;
    opacity: 1;
    transition: opacity 1s ease
}

@media screen and (max-width:768px) {
    .stickyButtonBar {
        padding: 20px
    }
}

.stickyButtonBar .button {
    margin: 0 20px
}

.stickyButtonBar .button .icon {
    font-size: 12px
}

.stickyButtonBar .button:first-child {
    margin-left: 0
}

.stickyButtonBar .button:last-child {
    margin-right: 0
}

.stickyButtonBar.hidden {
    opacity: 0;
    pointer-events: none
}

body:has(.stickyButtonBar) .footerBottom {
    margin-bottom: 110px
}

@media screen and (max-width:768px) {
    body:has(.stickyButtonBar) .footerBottom {
        margin-bottom: 77px
    }
}

.twoColumnsElement {
    padding: 80px 0
}

@media screen and (max-width:1024px) {
    .twoColumnsElement {
        padding: 40px 0
    }
}

@media screen and (max-width:481px) {
    .twoColumnsElement {
        padding: 20px 0
    }
}

@media screen and (min-width:768px) {
    .twoColumnsElementBody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: relative
    }
}

.twoColumnsElementBody:after {
    content: "";
    height: 100%;
    width: 1px;
    background: var(--main-color-white);
    display: block;
    top: 0;
    left: 50%;
    position: absolute
}

@media screen and (max-width:768px) {
    .twoColumnsElementBody:after {
        display: none
    }
}

.twoColumnsElementContent {
    margin: 60px 0 106px 0
}

@media screen and (max-width:768px) {
    .twoColumnsElementContent {
        margin: 40px 0 76px 0
    }
}

.twoColumnsElementContent li {
    margin-bottom: 40px
}

@media screen and (max-width:768px) {
    .twoColumnsElementContent li {
        margin-bottom: 20px
    }
}

.twoColumnsElementColumn {
    box-sizing: border-box;
    padding: 0 160px 0 80px;
    position: relative;
    width: auto
}

@media screen and (max-width:1250px) {
    .twoColumnsElementColumn {
        padding: 0 80px
    }
}

@media screen and (max-width:1024px) {
    .twoColumnsElementColumn {
        padding: 0 40px
    }
}

@media screen and (max-width:768px) {
    .twoColumnsElementColumn {
        padding: 0
    }
}

.twoColumnsElementColumn .button {
    position: absolute;
    bottom: 0
}

.twoColumnsElementColumn:first-child {
    padding: 0 80px 0 160px
}

@media screen and (max-width:1250px) {
    .twoColumnsElementColumn:first-child {
        padding: 0 80px
    }
}

@media screen and (max-width:1024px) {
    .twoColumnsElementColumn:first-child {
        padding: 0 40px
    }
}

@media screen and (max-width:768px) {
    .twoColumnsElementColumn:first-child {
        padding: 0
    }
}

.twoColumnsElementHead {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0 20px
}

.twoColumnsElement .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    background: var(--main-color-white);
    opacity: .7
}

.twoColumnsElement .swiper-pagination-bullet-active {
    background: var(--main-color-primary);
    opacity: 1
}

@media screen and (min-width:768px) {
    .twoColumnsElement .swiper-pagination {
        display: none
    }
}

.collectionArea.is-error,
.collectionArea.is-loading {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .5
}

.collectionArea.is-loading {
    cursor: wait
}

.collectionArea.is-error {
    background: red
}

.news {
    display: flex;
    flex-direction: column;
    color: var(--main-color-black);
    text-decoration: none;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, .08)
}

@container newsItemContainer (min-width:600px) {
    .news {
        box-shadow: 0 0 40px rgba(0, 0, 0, .08)
    }
}

.news:active,
.news:focus,
.news:hover {
    color: var(--main-color-black);
    text-decoration: none
}

.news:active .news__previewimage img,
.news:focus .news__previewimage img,
.news:hover .news__previewimage img {
    scale: 1.05
}

.news:active .news__link,
.news:focus .news__link,
.news:hover .news__link {
    color: var(--main-link-color-hover)
}

.news__previewimage {
    display: flex;
    max-width: 100%;
    width: 100%;
    background-color: var(--main-color-white);
    overflow: hidden
}

.news__previewimage img {
    object-fit: cover;
    aspect-ratio: 1.465;
    transition: .2s ease-in-out
}

.news__headline {
    font-weight: var(--main-font-weight-bold);
    font-size: var(--main-font-size-big);
    margin-bottom: 10px
}

@container newsItemContainer (min-width:600px) {
    .news__headline {
        margin-bottom: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 52px
    }
}

.news__summary {
    flex-grow: 1
}

.news__summary>div {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.news__link {
    font-size: 24px;
    text-align: right;
    padding-top: 10px
}

@container newsItemContainer (min-width:600px) {
    .news__link {
        padding-top: 20px
    }
}

.news__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px
}

@container newsItemContainer (min-width:600px) {
    .news__content {
        padding: 30px
    }
}

@container newsItemContainer (min-width:600px) {
    .news {
        flex-direction: row;
        align-items: center
    }

    .news__previewimage {
        width: 50%;
        flex-shrink: 0
    }

    .news__content {
        flex-grow: 0
    }

    .news__link {
        display: none
    }
}

.newsColumn {
    container: newsItemContainer/inline-size
}

.history {
    position: relative;
    background: linear-gradient(180deg, var(--main-color-secondary) 0, rgba(0, 46, 85, 0) 74.14%);
    contain: paint;
    padding: 8rem 0
}

.historyTimeBeam {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    max-width: 1800px;
    padding: 4rem 2rem
}

.historyTimeBeam .historyHeadline {
    max-width: 880px;
    text-align: center;
    margin-bottom: 4rem;
    color: var(--main-color-white)
}

.historyTimeBeam .historyHeadline .h1,
.historyTimeBeam .historyHeadline .spotPriceItem--headline,
.historyTimeBeam .historyHeadline h1 {
    font-size: 9.6rem;
    margin-bottom: 6rem;
    line-height: 1.2
}

.historyTimeBeam .historyHeadline .h1 span,
.historyTimeBeam .historyHeadline .spotPriceItem--headline span,
.historyTimeBeam .historyHeadline h1 span {
    font-size: 9.6rem
}

@media (max-width:1023px) {

    .historyTimeBeam .historyHeadline .h1,
    .historyTimeBeam .historyHeadline .spotPriceItem--headline,
    .historyTimeBeam .historyHeadline h1 {
        font-size: 5rem
    }

    .historyTimeBeam .historyHeadline .h1 span,
    .historyTimeBeam .historyHeadline .spotPriceItem--headline span,
    .historyTimeBeam .historyHeadline h1 span {
        font-size: 5rem
    }
}

.historyTimeBeam .historyItem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6rem;
    width: 100%;
    min-height: 360px;
    opacity: 0;
    transform: translateY(40px);
    transition: all .9s ease-out;
    z-index: 2
}

.historyTimeBeam .historyItem.visible {
    opacity: 1;
    transform: translateY(0)
}

.historyTimeBeam .historyItem:not(.historyTimeBeam .historyItem:has(.historyItem__img)) {
    text-align: center;
    justify-content: center
}

.historyTimeBeam .historyItem:not(.historyTimeBeam .historyItem:has(.historyItem__img)) .historyItem__content {
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center
}

.historyTimeBeam .historyItem:not(.historyTimeBeam .historyItem:has(.historyItem__img)) .historyItem__content .historyItem__textWrapper {
    padding: 0;
    max-width: 790px;
    margin: 0 auto
}

@media (max-width:767px) {
    .historyTimeBeam .historyItem:not(.historyTimeBeam .historyItem:has(.historyItem__img)) .historyItem__content {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

.historyTimeBeam .historyItem__img {
    flex: 1;
    display: flex;
    justify-content: center
}

.historyTimeBeam .historyItem__img img {
    width: 100%;
    max-width: 760px;
    border-radius: 1rem;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s ease-out, transform .9s ease-out;
    will-change: transform, opacity
}

.historyTimeBeam .historyItem__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: opacity .9s ease-out, transform .9s ease-out;
    will-change: transform, opacity;
    z-index: 3
}

.historyTimeBeam .historyItem__content .historyItem__headline,
.historyTimeBeam .historyItem__content .historyItem__text,
.historyTimeBeam .historyItem__content .historyItem__year {
    transition: color .35s ease, mix-blend-mode .35s ease;
    color: var(--main-color-white);
    mix-blend-mode: normal
}

.historyTimeBeam .historyItem__content .historyItem__year {
    font-size: 20rem;
    line-height: .95;
    margin-bottom: 100px
}

@media (max-width:1539px) {
    .historyTimeBeam .historyItem__content .historyItem__year {
        font-size: 12rem
    }
}

@media (max-width:1249px) {
    .historyTimeBeam .historyItem__content .historyItem__year {
        font-size: 8rem;
        margin-bottom: 50px
    }
}

@media (max-width:1023px) {
    .historyTimeBeam .historyItem__content .historyItem__year {
        font-size: 5rem;
        margin-bottom: 25px;
        text-align: center
    }
}

.historyTimeBeam .historyItem__content .historyItem__headline {
    font-size: 4rem;
    font-weight: var(--main-font-weight-medium);
    margin-bottom: 5rem
}

@media (max-width:1249px) {
    .historyTimeBeam .historyItem__content .historyItem__headline {
        font-size: 3rem;
        margin-bottom: 4rem
    }
}

@media (max-width:767px) {
    .historyTimeBeam .historyItem__content .historyItem__headline {
        font-size: 2.4rem;
        margin-bottom: 10px
    }
}

.historyTimeBeam .historyItem__content .historyItem__text {
    font-size: 3rem;
    line-height: 1.2
}

@media (max-width:1249px) {
    .historyTimeBeam .historyItem__content .historyItem__text {
        font-size: 2.4rem
    }
}

@media (max-width:767px) {
    .historyTimeBeam .historyItem__content .historyItem__text {
        font-size: 2rem
    }
}

.historyTimeBeam .historyItem.leftImage {
    flex-direction: row
}

.historyTimeBeam .historyItem.leftImage .historyItem__img img {
    transform: translateX(-80px)
}

.historyTimeBeam .historyItem.leftImage .historyItem__content {
    transform: translateX(80px);
    text-align: left
}

@media (max-width:1023px) {
    .historyTimeBeam .historyItem.leftImage .historyItem__content {
        text-align: center
    }
}

@media (min-width:1540px) {
    .historyTimeBeam .historyItem.leftImage .historyItem__textWrapper {
        padding-left: 150px
    }
}

.historyTimeBeam .historyItem.rightImage {
    flex-direction: row-reverse
}

.historyTimeBeam .historyItem.rightImage .historyItem__img img {
    transform: translateX(80px)
}

.historyTimeBeam .historyItem.rightImage .historyItem__content {
    transform: translateX(-80px);
    text-align: right
}

@media (max-width:1023px) {
    .historyTimeBeam .historyItem.rightImage .historyItem__content {
        text-align: center
    }
}

@media (min-width:1540px) {
    .historyTimeBeam .historyItem.rightImage .historyItem__textWrapper {
        padding-right: 150px
    }
}

.historyTimeBeam .historyItem.visible .historyItem__img img {
    opacity: 1;
    transform: translateX(0)
}

.historyTimeBeam .historyItem.visible .historyItem__content {
    opacity: 1;
    transform: translateX(0)
}

.historyTimeBeam .historyItem.in-light .historyItem__headline,
.historyTimeBeam .historyItem.in-light .historyItem__text,
.historyTimeBeam .historyItem.in-light .historyItem__year {
    color: var(--main-color-secondary);
    mix-blend-mode: normal
}

@media (max-width:1023px) {
    .historyTimeBeam .historyItem {
        gap: 2rem
    }
}

.historyTimeBeam .historyLine {
    position: relative;
    width: 2px;
    height: 300px;
    background-color: transparent;
    margin: 0 auto;
    transition: background-color .3s ease
}

.historyTimeBeam .historyLine::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-color-white);
    opacity: 0;
    transform: translateY(0);
    transition: background-color .6s ease, opacity .3s ease
}

.historyTimeBeam .historyLine.animate::after {
    animation: growLine 1.2s ease-out forwards
}

.historyTimeBeam .historyLine.in-light::after {
    background-color: var(--main-color-secondary)
}

@media (max-width:1249px) {
    .historyTimeBeam .historyItem {
        margin-bottom: 50px
    }

    .historyTimeBeam .historyLine {
        height: 150px;
        margin-bottom: 50px
    }
}

@media (max-width:1023px) {
    .historyTimeBeam .historyItem {
        flex-direction: column !important;
        margin-bottom: 30px
    }

    .historyTimeBeam .historyItem__content {
        transform: translateY(20px);
        align-items: center
    }

    .historyTimeBeam .historyItem__img img {
        transform: translateY(-20px)
    }

    .historyTimeBeam .historyLine {
        height: 100px;
        margin-bottom: 30px
    }
}

@keyframes growLine {
    0% {
        transform: translateY(0);
        opacity: 0;
        height: 0
    }

    30% {
        opacity: 1
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        height: 100%
    }
}

.col-12:has(> .newsList) {
    display: flex;
    flex-direction: column-reverse
}

.col-12:has(> .newsList) nav {
    margin-top: 100px
}

@media screen and (max-width:768px) {
    .col-12:has(> .newsList) nav {
        margin-top: 60px
    }
}

.js-collectionFilter {
    display: block;
    text-align: center;
    white-space: nowrap
}

@media screen and (max-width:1249px) {
    .js-collectionFilter {
        padding-bottom: 20px
    }
}

.js-collectionFilter .tag {
    background: 0 0;
    font-size: 20px;
    font-weight: 400;
    padding: 0;
    display: inline-block;
    margin: 0 20px
}

@media screen and (max-width:768px) {
    .js-collectionFilter .tag {
        margin: 0 8px
    }
}

.js-collectionFilter .tag:first-child {
    margin-left: 0
}

.js-collectionFilter .tag:last-child {
    margin-right: 0
}

@media screen and (max-width:768px) {
    .js-collectionFilter .tag {
        font-size: 16px
    }
}

.js-collectionFilter .tag:hover {
    text-decoration: underline;
    text-underline-offset: 7px
}

.js-collectionFilter .tag.is-active {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 7px
}

.js-collectionFilter .tag.is-loading {
    background: 0 0 !important
}

.container:has(.isFullView.newsList) {
    max-width: 100%;
    padding: 0
}

.newsHeader {
    display: grid;
    gap: 75px;
    grid-template-columns: 1fr 675px;
    padding-right: calc((100% - 1840px)/ 2 + 20px)
}

@media screen and (max-width:1880px) {
    .newsHeader {
        padding-right: 20px
    }
}

@media screen and (max-width:1250px) {
    .newsHeader {
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-width:1024px) {
    .newsHeader {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        padding-bottom: 40px;
        gap: 10px
    }
}

@media screen and (max-width:481px) {
    .newsHeader {
        gap: 0;
        padding-bottom: 20px
    }
}

.newsHeaderDetails {
    padding: 75px 0
}

@media screen and (max-width:1024px) {
    .newsHeaderDetails {
        padding-bottom: 0;
        padding-top: 40px
    }
}

@media screen and (max-width:481px) {
    .newsHeaderDetails {
        padding-top: 20px
    }
}

.newsHeaderDetails .linkWithIcon {
    font-weight: 400
}

.newsHeaderDetails .linkWithIcon span {
    text-decoration: underline;
    text-decoration-color: var(--main-color-gray-base);
    text-underline-offset: 5px
}

.newsHeaderDetails .linkWithIcon .icon {
    font-size: 12px;
    margin-right: 6px
}

.newsHeaderDetailsLine {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--main-color-gray-base);
    margin-bottom: 100px
}

@media screen and (max-width:1024px) {
    .newsHeaderDetailsLine {
        margin-top: 20px;
        margin-bottom: 40px
    }
}

@media screen and (max-width:768px) {
    .newsHeaderDetailsLine {
        margin-bottom: 20px;
        padding-bottom: 20px
    }
}

.newsHeader img {
    height: 800px !important;
    object-fit: cover !important;
    border-radius: 0 16px 16px 0
}

@media screen and (max-width:1250px) {
    .newsHeader img {
        height: 600px !important
    }
}

@media screen and (max-width:1024px) {
    .newsHeader img {
        height: 400px !important;
        border-radius: 16px
    }
}

@media screen and (max-width:768px) {
    .newsHeader img {
        height: 250px !important
    }
}

@media screen and (max-width:1024px) {
    .newsHeader picture {
        order: 1
    }
}

.newsHeaderDate {
    font-size: 18px;
    font-weight: 500
}

@media screen and (max-width:768px) {
    .newsHeaderDate {
        font-size: 14px
    }
}

.newsHeader.newsHeaderWithoutImage {
    display: block;
    max-width: 895px;
    margin-left: 453px
}

.newsHeader.newsHeaderWithoutImage .newsHeaderDetails {
    padding-bottom: 0
}

.newsIcons {
    display: flex;
    gap: 24px
}

.newsIcons a {
    text-decoration: none
}

.newsIcons .icon {
    font-size: 18px
}

@media screen and (max-width:768px) {
    .newsIcons .icon {
        font-size: 14px
    }
}

.newsIntro {
    padding: 100px 0;
    max-width: 895px;
    margin-left: 453px
}

@media screen and (max-width:1024px) {
    .newsIntro {
        margin-left: 0;
        padding: 0 0 20px 0;
        max-width: 100%
    }
}

@media screen and (max-width:1024px) {
    .newsIntro .youTubeIntro {
        margin-bottom: 20px
    }
}

.newsMain {
    background: #f5f5f5;
    padding: 100px 0
}

@media screen and (max-width:1024px) {
    .newsMain {
        padding: 40px 0
    }
}

.newsMainWrapper {
    display: grid;
    grid-template-columns: 353px auto;
    gap: 100px
}

@media screen and (max-width:1024px) {
    .newsMainWrapper {
        display: block
    }
}

.newsMainContentText {
    max-width: 895px
}

.newsMainContentImage {
    max-height: 900px
}

@media screen and (max-width:1024px) {
    .newsMainContentImage {
        max-height: 500px
    }
}

.newsMainContentImage img {
    border-radius: 16px;
    max-height: 900px;
    width: auto !important
}

@media screen and (max-width:1024px) {
    .newsMainContentImage img {
        max-height: 500px
    }
}

.newsMainContentGallery {
    max-width: 1347px
}

@media screen and (max-width:1024px) {
    .newsSidebar {
        display: none
    }
}

.newsArticle .itembox__detailButton {
    display: block
}

.newsArticle form {
    display: none
}

.newsCollections {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.newsCollections a {
    color: var(--main-color-black);
    text-underline-offset: 4px;
    text-decoration-color: var(--main-color-middle-gray);
    text-decoration-thickness: 6%
}

.newsCollections a:hover {
    color: var(--main-color-middle-gray)
}

.newsList {
    position: relative
}

.newsPost {
    display: block;
    padding: 32px 0;
    border-bottom: 1px solid var(--main-color-middle-gray);
    text-decoration: none;
    color: var(--main-color-black)
}

.newsPost.newsPostWithImage {
    display: grid;
    grid-template-columns: 100px auto;
    gap: 16px
}

.newsPostImage img {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    object-position: center;
    border-radius: 4px
}

.newsPostDetail {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.newsPostReadMore {
    display: flex;
    align-items: center;
    gap: 6px
}

.newsPostReadMore .icon {
    font-size: 12px
}

.newsPostReadMore span {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--main-color-middle-gray)
}

.newsPost p {
    margin: 0
}

.newsPost:hover {
    text-decoration: none
}

.newsPost:hover .newsPostReadMore span {
    text-decoration-color: var(--main-color-primary)
}

.pressNotificationWrapper {
    text-decoration: none;
    color: var(--main-color-black)
}

.pressNotificationWrapper:hover {
    text-decoration: none;
    color: var(--main-color-dark-gray)
}

.pressNotification.isList {
    margin-top: -18px
}

.pressNotificationGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px
}

@media screen and (max-width:1024px) {
    .pressNotificationGrid {
        grid-template-columns: 1fr
    }
}

@media screen and (max-width:481px) {
    .pressNotificationGrid {
        gap: 32px
    }
}

.pressNotificationImage {
    margin-bottom: 32px
}

@media screen and (max-width:481px) {
    .pressNotificationImage {
        margin-bottom: 20px
    }
}

.pressNotificationImage img {
    border-radius: 12px;
    aspect-ratio: 565/400;
    object-fit: cover !important
}

@media screen and (max-width:1024px) {
    .pressNotificationImage img {
        max-height: 400px
    }
}

.pressNotificationDetails {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--main-color-gray-base);
    font-size: 18px
}

@media screen and (max-width:481px) {
    .pressNotificationDetails {
        padding-bottom: 20px;
        font-size: 14px
    }
}

.pressNotificationDate {
    font-weight: 500
}

.pressNotificationButton {
    display: flex;
    align-items: center;
    gap: 6px
}

.pressNotificationButton span {
    text-decoration: underline;
    text-decoration-color: #9D9D9D;
    text-decoration-thickness: 6%;
    text-underline-offset: 26%
}

.pressNotificationButton .icon {
    font-size: 12px
}

.pressNotificationTitle {
    margin-top: 32px
}

@media screen and (max-width:481px) {
    .pressNotificationTitle {
        margin-top: 20px
    }
}

.pressNotificationIntro {
    max-width: 895px;
    margin: 100px auto
}

@media screen and (max-width:1024px) {
    .pressNotificationIntro {
        margin: 0 auto 40px auto
    }
}

@media screen and (max-width:481px) {
    .pressNotificationIntro {
        margin-bottom: 20px
    }
}

.pressNotificationContent {
    max-width: 895px;
    margin: 0 auto
}

.pressNotificationContent .newsMainContentGallery {
    margin-top: 80px
}

@media screen and (max-width:481px) {
    .pressNotificationContent .newsMainContentGallery {
        margin-top: 40px
    }
}

@media screen and (max-width:481px) {
    .newsMain:has(.pressNotificationContent) {
        padding: 20px 0
    }
}

div[class*=col-]:has(.pressnotifications) .pagination {
    justify-content: end;
    transform: translateY(35px);
    margin-right: calc((100% - 1840px)/ 2 + 20px)
}

@media screen and (max-width:1840px) {
    div[class*=col-]:has(.pressnotifications) .pagination {
        margin-right: 20px
    }
}

@media screen and (max-width:1024px) {
    div[class*=col-]:has(.pressnotifications) .pagination {
        justify-content: center;
        transform: translateY(0);
        margin: 20px 0
    }
}

@media screen and (max-width:1024px) {
    div[class*=col-]:has(.pressnotifications) {
        display: flex;
        flex-direction: column-reverse
    }
}

.pressReportsGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px
}

@media screen and (max-width:1024px) {
    .pressReportsGrid {
        grid-template-columns: 1fr
    }
}

@media screen and (max-width:481px) {
    .pressReportsGrid {
        gap: 40px
    }
}

.pressReportsWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    text-decoration: none;
    color: var(--main-color-black)
}

@media screen and (max-width:481px) {
    .pressReportsWrapper {
        grid-template-columns: 1fr;
        gap: 20px
    }
}

.pressReportsWrapper:hover {
    color: var(--main-color-dark-gray);
    text-decoration: none
}

.pressReportsMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--main-color-gray-base);
    font-size: 18px;
    font-weight: 500
}

@media screen and (max-width:1250px) {
    .pressReportsMeta {
        font-size: 14px
    }
}

@media screen and (max-width:481px) {
    .pressReportsMeta {
        padding-bottom: 20px
    }
}

.pressReportsImage img {
    height: 300px !important;
    object-fit: cover !important;
    border-radius: 12px
}

@media screen and (max-width:481px) {
    .pressReportsImage img {
        height: 230px !important
    }
}

.pressReportsTitle {
    margin: 30px 0
}

@media screen and (max-width:481px) {
    .pressReportsTitle {
        margin: 20px 0
    }
}

.pressReportsText {
    line-height: 125%
}

div[class*=col-]:has(.pressreports) .pagination {
    justify-content: end;
    transform: translateY(35px);
    margin-right: calc((100% - 1840px)/ 2 + 20px)
}

@media screen and (max-width:1840px) {
    div[class*=col-]:has(.pressreports) .pagination {
        margin-right: 20px
    }
}

@media screen and (max-width:1024px) {
    div[class*=col-]:has(.pressreports) .pagination {
        justify-content: center;
        transform: translateY(0);
        margin: 20px 0
    }
}

@media screen and (max-width:1024px) {
    div[class*=col-]:has(.pressreports) {
        display: flex;
        flex-direction: column-reverse
    }
}

.promotion {
    min-width: 40px;
    border-radius: 6px;
    border: 1px solid var(--main-color-primary);
    background: var(--main-color-primary-light);
    color: var(--main-color-primary);
    line-height: 1;
    padding: 4px;
    display: inline-flex;
    font-size: 12px;
    text-align: center;
    justify-content: center
}

@media (min-width:1024px) {
    .promotion {
        font-size: 14px;
        min-width: 64px;
        padding: 4px 8px
    }
}

.promotion.promotion--3 {
    border-color: var(--main-color-success);
    color: var(--main-color-success)
}

.promotion--clickable {
    cursor: pointer
}

.promotion--clickable:hover {
    background: var(--main-color-primary);
    color: var(--main-color-primary-contrast)
}

.promotion--clickable:hover.promotion--1,
.promotion--clickable:hover.promotion--2 {
    background: var(--main-color-danger-dark);
    color: var(--main-color-danger-dark-contrast)
}

.promotion--clickable:hover.promotion--3 {
    background: var(--main-color-success-dark);
    color: var(--main-color-success-dark-contrast)
}

.promotions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px
}

.crossPrice {
    display: inline-block;
    position: relative;
    white-space: nowrap
}

.crossPrice:before {
    content: " ";
    height: 1px;
    background-color: var(--main-color-danger);
    width: calc(100% + 6px);
    display: block;
    position: absolute;
    left: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(-7deg)
}

@media (min-width:768px) {
    .crossPrice:before {
        height: 1.5px
    }
}

.actionPrice,
.basePrice {
    white-space: nowrap;
    font-weight: var(--main-font-weight-medium)
}

.priceNotice {
    width: 100%;
    margin-top: 5px;
    font-size: var(--main-font-size-small)
}

.prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap
}

.prices .crossPrice+.basePrice {
    color: var(--main-color-danger);
    margin-left: 10px
}

@media (min-width:768px) {
    .prices .crossPrice+.basePrice {
        margin-left: 20px
    }
}

.inventory {
    position: relative;
    padding-left: 15px;
    display: inline-flex;
    align-items: center
}

.inventory:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 1;
    translate: 0 -50%;
    background-color: var(--main-color-success)
}

.inventory.low_availability:before {
    background-color: var(--main-color-warning)
}

.inventory.not_available_red:before {
    background-color: var(--main-color-danger)
}

.inventory.not_available {
    padding-left: 20px
}

.inventory.not_available:before {
    content: var(--base-icon-info);
    background-color: transparent;
    font-family: icons, Helvetica, Arial, sans-serif;
    width: 16px;
    height: 16px
}

.inventory p {
    margin: 0
}

.inventoryShippingInfo {
    border-left: 1px solid var(--main-color-black);
    padding-left: 5px;
    margin-left: 5px;
    display: none
}

.inventoryWrapper {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    font-size: var(--main-font-size-small);
    line-height: 1
}

.inventoryStorageWrapper {
    margin-top: 30px;
    border-top: 1px solid var(--main-color-light-gray);
    border-bottom: 1px solid var(--main-color-light-gray);
    padding: 10px 0;
    padding-right: 200px
}

@media (max-width:767px) {
    .inventoryStorageWrapper {
        padding-right: 0
    }
}

.inventoryStorageWrapper .h5 {
    margin-bottom: 10px
}

.inventoryStorageWrapper .inventoryWrapper {
    gap: 20px
}

.quantity {
    max-width: 90px;
    display: flex;
    flex-shrink: 0;
    width: 100%;
    height: 40px
}

.quantity input {
    flex-grow: 1;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 5px;
    border: 0
}

.quantity input:disabled {
    background-color: var(--main-color-white)
}

.quantity__spinner {
    width: 25px;
    position: relative;
    border-left: 0;
    flex-shrink: 0;
    overflow: hidden
}

.quantity__spinnerItem {
    position: absolute;
    right: 0;
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    background: var(--main-color-white);
    border-radius: 8px
}

.quantity__spinnerItem:active,
.quantity__spinnerItem:focus,
.quantity__spinnerItem:hover {
    color: var(--main-color-secondary)
}

.quantity__spinnerItem .icon:before {
    line-height: 1
}

.quantity__spinnerItem--up {
    top: 0;
    border-bottom: 1px solid var(--main-color-white)
}

.quantity__spinnerItem--down {
    bottom: 0
}

.quantity--small {
    position: relative;
    padding-left: 30px;
    width: 130px;
    max-width: 100%;
    border: 1px solid var(--main-color-gray-base);
    border-right: 0;
    border-radius: 8px 0 0 8px
}

.quantity--small input {
    line-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0
}

.quantity--small .quantity__spinner {
    position: static;
    border: 0;
    border-radius: 0
}

.quantity--small .quantity__spinnerItem {
    width: 30px;
    height: 100%
}

.quantity--small .quantity__spinnerItem--up {
    border-bottom: 0;
    border-radius: 0;
    right: 16px
}

.quantity--small .quantity__spinnerItem--down {
    right: auto;
    left: 12px;
    top: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

@media (max-width:767px) {
    .quantity--small {
        width: 100px
    }

    .quantity--small .quantity__spinnerItem {
        width: 30px;
        height: 100%
    }

    .quantity--small .quantity__spinnerItem--up {
        right: 6px
    }

    .quantity--small .quantity__spinnerItem--down {
        left: 6px
    }
}

.quantity--big {
    border: 1px solid var(--main-color-gray-base);
    border-radius: 8px;
    overflow: hidden;
    padding-left: 40px;
    padding-right: 40px;
    width: 150px;
    height: 50px;
    position: relative;
    max-width: 100%
}

.quantity--big input {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    font-size: 2rem
}

.quantity--big .quantity__spinner {
    position: static;
    border: 0;
    border-radius: 0;
    width: auto
}

.quantity--big .quantity__spinnerItem {
    width: 40px;
    height: 100%
}

.quantity--big .quantity__spinnerItem--up {
    border-bottom: 0;
    border-radius: 0;
    right: 0
}

.quantity--big .quantity__spinnerItem--down {
    right: auto;
    left: 0;
    top: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.quantity--inactive .quantity__spinnerItem {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .3;
    background-color: var(--main-color-white)
}

.categoryItem {
    width: 100%;
    display: flex;
    flex-direction: column;
    color: var(--main-color-black);
    position: relative;
    text-decoration: none;
    align-items: center
}

.categoryItem__image {
    background: var(--main-color-white);
    display: flex;
    align-items: center;
    height: 350px;
    overflow: hidden;
    width: 100%
}

@media (max-width:1023px) {
    .categoryItem__image {
        height: 220px
    }
}

.categoryItem__image img {
    transition: .2s ease-in-out;
    aspect-ratio: 1;
    height: 350px !important;
    object-fit: cover;
    width: 100% !important
}

@media (max-width:1023px) {
    .categoryItem__image img {
        height: 220px !important
    }
}

.categoryItem__content {
    padding: 15px
}

.categoryItem__headline {
    line-height: 1.1;
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 2rem
}

@media (min-width:768px) {
    .categoryItem__headline {
        font-size: 2.4rem
    }
}

@media (min-width:1024px) {
    .categoryItem__headline {
        font-size: 3.5rem
    }
}

@media (min-width:1250px) {
    .categoryItem__headline {
        font-size: 4rem
    }
}

.categoryItem__headline .icon {
    line-height: 1;
    transition: transform .3s ease, color .3s ease;
    font-size: 12px
}

@media (min-width:768px) {
    .categoryItem__headline .icon {
        font-size: 16px
    }
}

@media (min-width:1024px) {
    .categoryItem__headline .icon {
        font-size: 20px
    }
}

@media (min-width:1250px) {
    .categoryItem__headline .icon {
        font-size: 24px
    }
}

@media (min-width:1250px) {
    .categoryItem__headline .icon {
        margin-top: 6px
    }
}

.categoryItem__description {
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.categoryItem:active,
.categoryItem:focus,
.categoryItem:hover {
    text-decoration: none;
    color: var(--main-color-black)
}

.categoryItem:active .icon,
.categoryItem:focus .icon,
.categoryItem:hover .icon {
    transform: translateX(15px);
    color: var(--main-color-primary)
}

.categoryList--slider {
    display: flex;
    width: 100%;
    align-items: stretch;
    overflow: hidden;
    margin-bottom: 64px
}

@media (max-width:1023px) {
    .categoryList--slider {
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        margin-bottom: 32px
    }
}

.categoryList--slider .categoryList__sidebar {
    flex: 0 0 auto;
    min-width: 155px;
    padding-right: 24px;
    margin-right: 24px;
    border-right: 1px solid var(--main-color-gray-base);
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

@media (max-width:1023px) {
    .categoryList--slider .categoryList__sidebar {
        min-width: 0;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 16px;
        border-right: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
}

.categoryList--slider .categoryList__sidebarTitle {
    margin-bottom: 20px;
    line-height: 1.2;
    font-size: 2.6rem;
    font-weight: var(--main-font-weight-medium)
}

.categoryList--slider .categoryList__sidebarTitle span {
    display: block
}

@media (max-width:1023px) {
    .categoryList--slider .categoryList__sidebarTitle {
        margin-bottom: 0;
        font-size: 1.8rem
    }

    .categoryList--slider .categoryList__sidebarTitle span {
        display: inline
    }
}

.categoryList--slider .categoryList__sidebarNav {
    display: flex;
    gap: 10px
}

.categoryList--slider .categoryList__sidebarNav .swiper-button-next,
.categoryList--slider .categoryList__sidebarNav .swiper-button-prev {
    position: static;
    margin: 0;
    border: none;
    background: 0 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none
}

.categoryList--slider .categoryList__sidebarNav .swiper-button-next:active,
.categoryList--slider .categoryList__sidebarNav .swiper-button-next:focus,
.categoryList--slider .categoryList__sidebarNav .swiper-button-next:hover,
.categoryList--slider .categoryList__sidebarNav .swiper-button-prev:active,
.categoryList--slider .categoryList__sidebarNav .swiper-button-prev:focus,
.categoryList--slider .categoryList__sidebarNav .swiper-button-prev:hover {
    background: 0 0;
    border: none;
    box-shadow: none
}

.categoryList--slider .categoryList__swiper {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    max-width: 100%
}

.categoryList--slider .categoryList__swiper::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: linear-gradient(to right, transparent, var(--main-color-white));
    pointer-events: none;
    z-index: 2
}

@media (max-width:1023px) {
    .categoryList--slider .categoryList__swiper::after {
        width: 50px
    }
}

.categoryList--slider .categoryItem__image {
    height: 210px;
    border-radius: 8px
}

.categoryList--slider .categoryItem__image img {
    height: 210px !important;
    border-radius: 8px
}

@media (max-width:1023px) {
    .categoryList--slider .categoryItem__image {
        height: 110px
    }

    .categoryList--slider .categoryItem__image img {
        height: 110px !important
    }
}

.categoryList--slider .categoryItem__headline {
    font-size: 1.6rem !important
}

.categoryList--slider .swiper-slide {
    transition: transform .3s ease, opacity .3s ease
}

.categoryList--slider .swiper-slide-visible:not(.swiper-slide-fully-visible) {
    opacity: .7;
    transform: scale(.92)
}

.categoryList--slider .swiper-slide .categoryItem:not(:has(.categoryItem__image)) {
    min-height: 210px;
    background: var(--main-color-light-gray);
    border-radius: 8px;
    justify-content: flex-end
}

@media (max-width:1023px) {
    .categoryList--slider .swiper-slide .categoryItem:not(:has(.categoryItem__image)) {
        min-height: 110px
    }
}

.categoryList.categoryList--marken .categoryItem:after,
.categoryList.categoryList--marken .categoryItem__content {
    display: none
}

.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .gridGap--large {
    margin-left: -10px;
    margin-right: -10px
}

.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem:after {
    display: none
}

.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem .categoryItem__headline {
    font-size: 2.5rem
}

.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem .categoryItem__content {
    border: 1px solid var(--main-color-secondary);
    border-radius: 8px;
    padding: 5px 15px
}

.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem:active .categoryItem__content,
.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem:focus .categoryItem__content,
.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem:hover .categoryItem__content {
    background: var(--main-color-secondary);
    color: var(--main-color-white)
}

.categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image))>div>.col-6 {
    width: auto;
    padding-left: 10px;
    padding-right: 10px
}

@media (max-width:767px) {
    .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .gridGap--large {
        margin-left: -5px;
        margin-right: -5px
    }

    .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem .categoryItem__headline {
        font-size: 1.6rem
    }

    .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image)) .categoryItem .categoryItem__content {
        padding: 5px
    }

    .categoryList:not(.categoryList:has(.categoryItem > .categoryItem__image))>div>.col-6 {
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px
    }
}

.categoryBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--main-color-black);
    text-align: center;
    color: var(--main-color-white);
    text-decoration: none;
    padding: 30px 10px
}

@media (min-width:768px) {
    .categoryBox {
        padding: 60px 30px
    }
}

.categoryBox:active,
.categoryBox:focus,
.categoryBox:hover {
    background: var(--main-color-primary);
    color: var(--main-color-black);
    text-decoration: none
}

.categoryBox__headline {
    line-height: 1.1;
    font-size: 1.6rem
}

@media (min-width:768px) {
    .categoryBox__headline {
        font-size: 2rem
    }
}

@media (min-width:1024px) {
    .categoryBox__headline {
        font-size: 2.6rem
    }
}

@media (min-width:1250px) {
    .categoryBox__headline {
        font-size: 3rem
    }
}

.categoryPicture {
    margin-bottom: 30px
}

.categoryMain {
    display: flex;
    gap: 80px;
    align-items: flex-start
}

.categoryNav {
    display: none
}

@media (min-width:1024px) {
    .categoryNav {
        display: block;
        width: 20%;
        position: sticky;
        top: 122px
    }
}

@media (min-width:1250px) {
    .categoryNav {
        width: 16.6666666667%;
        top: 142px
    }
}

.categoryContent {
    flex: 1;
    max-width: 100%
}

.categoryContent .itemListView:not(:has(.categoryList)) .filterSortLine {
    margin-bottom: 80px
}

@media (max-width:1539px) {
    .categoryContent .itemListView:not(:has(.categoryList)) .filterSortLine {
        margin-bottom: 10px
    }
}

.categoryInfo__description {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px
}

.categoryInfo__description .shopSiteHeadline,
.categoryInfo__description .spotPriceItem--headline,
.categoryInfo__description h1 {
    margin-bottom: 0;
    line-height: 1
}

@media (max-width:767px) {
    .categoryInfo__description {
        gap: 20px;
        margin-bottom: 20px
    }
}

.categoryContent--bottom:has(.contentText) .textImgSection {
    margin-top: 60px
}

.categoryContent--bottom:has(.contentText) .textImgSection .contentText {
    padding: 20px;
    justify-content: center
}

@media (min-width:768px) {
    .categoryContent--bottom:has(.contentText) .textImgSection .contentText {
        padding: 50px
    }
}

@media (min-width:1250px) {
    .categoryContent--bottom:has(.contentText) .textImgSection .contentText {
        padding: 100px 150px
    }
}

.categoryContent--bottom .categoryPicture {
    margin-bottom: 0
}

.categoryItempreview {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    text-decoration: none;
    color: var(--main-color-black);
    transition: .2s ease-in-out;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1)
}

@media (min-width:768px) {
    .categoryItempreview {
        padding: 20px
    }
}

.categoryItempreview:active,
.categoryItempreview:focus,
.categoryItempreview:hover {
    text-decoration: none;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    color: var(--main-color-black)
}

.categoryItempreview:active .categoryItempreview__count,
.categoryItempreview:active .categoryItempreview__headline,
.categoryItempreview:focus .categoryItempreview__count,
.categoryItempreview:focus .categoryItempreview__headline,
.categoryItempreview:hover .categoryItempreview__count,
.categoryItempreview:hover .categoryItempreview__headline {
    color: var(--main-color-primary)
}

.categoryItempreview__headline {
    text-decoration: none;
    font-weight: var(--main-font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: .2s ease-in-out;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 1.4rem
}

@media (min-width:768px) {
    .categoryItempreview__headline {
        margin-bottom: 20px;
        font-size: var(--main-font-size-base)
    }
}

.categoryItempreview__count {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: var(--main-font-weight-bold);
    line-height: 1;
    font-size: 1.6rem
}

@media (min-width:768px) {
    .categoryItempreview__count {
        font-size: 2.4rem
    }
}

.categoryItempreview__itemImage {
    overflow: hidden
}

.categoryItempreview__item img {
    scale: 1;
    transition: .2s ease-in-out;
    aspect-ratio: 1/1
}

.categoryItempreview__item:first-child {
    grid-column: 1/span 3
}

.categoryItempreview__items {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr auto;
    flex-grow: 1
}

@media (min-width:768px) {
    .categoryItempreview__items {
        grid-gap: 10px
    }
}

.itembox {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: 0 0;
    position: relative;
    transition: .1s ease-in-out
}

.itembox__badges {
    position: absolute;
    left: 25px;
    top: 25px;
    z-index: 1
}

@media (max-width:767px) {
    .itembox__badges {
        left: 10px;
        top: 10px
    }
}

.itembox__actions {
    position: absolute;
    z-index: 1;
    right: 5px;
    top: 5px
}

@media (min-width:768px) {
    .itembox__actions {
        right: 20px;
        top: 20px
    }
}

.itembox__name {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    flex-direction: column;
    font-size: 14px;
    font-weight: var(--main-font-weight-bold)
}

@media (min-width:768px) {
    .itembox__name {
        font-size: 16px
    }
}

.itembox__rating {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.itembox__rating .rating__label {
    margin-left: 5px
}

.itembox__prices {
    margin-top: 16px
}

@media (max-width:767px) {
    .itembox__prices {
        font-size: 14px;
        margin-top: 8px
    }
}

.itembox__prices .prices {
    justify-content: center
}

.itembox__image {
    background-color: var(--main-color-gray-background)
}

.itembox__image img {
    aspect-ratio: 63/59;
    width: 100%;
    display: block
}

.itembox__imageSrc {
    opacity: 1;
    transition: .2s opacity ease-in-out
}

.itembox__imageSrc--hover {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100% !important;
    object-fit: contain;
    transition: .2s opacity ease-in-out
}

.itembox__head {
    position: relative
}

.itembox__content {
    flex-grow: 1;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column
}

@media (max-width:767px) {
    .itembox__content {
        padding: 10px 0
    }
}

.itembox__main {
    flex-grow: 1;
    color: var(--main-color-black);
    text-decoration: none;
    display: flex;
    flex-direction: column
}

.itembox__main:active,
.itembox__main:focus,
.itembox__main:hover {
    color: var(--main-color-black);
    text-decoration: none
}

.itembox__addon {
    position: relative;
    width: 100%;
    background: 0 0;
    padding: 0 20px 20px 20px;
    z-index: 2
}

@media (max-width:767px) {
    .itembox__addon {
        padding: 0
    }
}

.itembox .quantity .quantity__spinnerItem,
.itembox .quantity input {
    background-color: transparent
}

.itembox .inventoryWrapper {
    font-size: 1.1rem;
    justify-content: center
}

.itembox .orderButtonWrapper+.inventoryWrapper {
    margin-top: 10px
}

.itembox .priceNotice {
    text-align: center
}

.itembox .orderButtonWrapper {
    gap: 0;
    align-items: center;
    justify-content: center
}

.itembox .orderButtonWrapper .orderButton {
    flex-grow: 0;
    padding: 8px 12px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
    border-left: 1px solid var(--main-color-gray-base);
    border-color: var(--main-color-gray-base)
}

.itembox .orderButtonWrapper .orderButton .icon {
    font-size: 20px;
    right: unset
}

.itembox .orderButtonWrapper .orderButton>span {
    display: none
}

.itembox .orderButtonWrapper .orderButton:active,
.itembox .orderButtonWrapper .orderButton:focus,
.itembox .orderButtonWrapper .orderButton:hover {
    background: var(--main-color-secondary-medium);
    border-color: var(--main-color-secondary-medium)
}

.itembox .orderButtonWrapper .orderButton:active .icon,
.itembox .orderButtonWrapper .orderButton:focus .icon,
.itembox .orderButtonWrapper .orderButton:hover .icon {
    color: var(--main-color-white)
}

.itembox .orderButtonWrapper .orderButton.disabled {
    background: var(--main-color-white)
}

@media (max-width:767px) {
    .itembox .orderButtonWrapper .orderButton {
        min-width: 40px
    }
}

.itembox .orderButtonWrapper.inactive {
    cursor: not-allowed;
    opacity: .5
}

.itembox.hoverintent.has-hover-image .itembox__imageSrc {
    opacity: 0
}

.itembox.hoverintent.has-hover-image .itembox__imageSrc--hover {
    opacity: 1
}

.itembox .inventoryStorageWrapper,
.itembox .inventoryWrapper,
.itembox .priceNotice {
    display: none
}

.itembox__detailButton {
    display: none;
    margin: 10px auto 0 auto
}

.itembox__detailButton>.button--action {
    font-weight: 500;
    letter-spacing: .5px
}

.itembox__detailButton>.button--action .icon {
    font-size: 10px;
    font-weight: 600
}

.itemboxList {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 40px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
}

@media (min-width:768px) {
    .itemboxList {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))
    }
}

@media (min-width:1024px) {
    .itemboxList {
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr))
    }
}

@media (min-width:1250px) {
    .itemboxList {
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr))
    }
}

@media (min-width:1540px) {
    .itemboxList {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr))
    }
}

@media (max-width:481px) {
    .itemboxList {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        grid-row-gap: 20px
    }
}

.itemboxList.swiper {
    max-width: 1840px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    padding-bottom: 0;
    display: block;
    margin-top: -10px;
    margin-bottom: -10px
}

.itemboxList.swiper>.swiper-wrapper {
    align-items: stretch;
    margin-left: -5px
}

.itemboxList.swiper>.swiper-wrapper>* {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    height: auto;
    padding: 5px
}

.itemboxList.swiper .swiper-slide:not(.swiper-slide-visible) {
    opacity: 0
}

.itemboxList.swiper .itembox {
    height: 100%
}

.itemboxList.swiper.itemboxList--5 {
    padding-top: 70px;
    margin-top: -80px
}

.itemboxList.swiper.itemboxList--5 .swiper-button-prev {
    top: 20px;
    right: 50px;
    left: unset
}

.itemboxList.swiper.itemboxList--5 .swiper-button-next {
    top: 20px;
    right: 0
}

@media (max-width:1023px) {
    .itemboxList.swiper.itemboxList--5 {
        margin-right: -20px;
        padding-top: 0;
        margin-top: -20px
    }

    .itemboxList.swiper.itemboxList--5 .swiper-button-next,
    .itemboxList.swiper.itemboxList--5 .swiper-button-prev {
        display: none
    }
}

.itemboxList.swiper.itemboxList--5:not(.swiper-initialized)>.swiper-wrapper>* {
    width: 45.4545454545%
}

@media (min-width:768px) {
    .itemboxList.swiper.itemboxList--5:not(.swiper-initialized)>.swiper-wrapper>* {
        width: 33.3333333333%
    }
}

@media (min-width:1024px) {
    .itemboxList.swiper.itemboxList--5:not(.swiper-initialized)>.swiper-wrapper>* {
        width: 33.3333333333%
    }
}

@media (min-width:1540px) {
    .itemboxList.swiper.itemboxList--5:not(.swiper-initialized)>.swiper-wrapper>* {
        width: 25%
    }
}

.itemboxList.swiper.itemboxList--cta:not(.swiper-initialized)>.swiper-wrapper,
.itemboxList.swiper.itemboxList--highlight:not(.swiper-initialized)>.swiper-wrapper {
    display: flex
}

.itemboxList.swiper.itemboxList--cta .itembox__prices,
.itemboxList.swiper.itemboxList--highlight .itembox__prices {
    margin-bottom: 16px
}

.itemboxList.swiper.itemboxList--cta .itembox__button,
.itemboxList.swiper.itemboxList--highlight .itembox__button {
    max-width: max-content
}

.itemboxList.swiper.itemboxList--cta .itembox__content,
.itemboxList.swiper.itemboxList--highlight .itembox__content {
    align-items: center
}

@media (max-width:1023px) {

    .itemboxList.swiper.itemboxList--cta,
    .itemboxList.swiper.itemboxList--highlight {
        padding-bottom: 30px
    }

    .itemboxList.swiper.itemboxList--cta .swiper-scrollbar,
    .itemboxList.swiper.itemboxList--highlight .swiper-scrollbar {
        display: block;
        margin-top: 24px
    }
}

.itemboxList.swiper.itemboxList--preview {
    padding-top: 70px;
    margin-top: -80px
}

.itemboxList.swiper.itemboxList--preview .swiper-button-prev {
    top: 20px;
    right: 90px;
    left: unset
}

.itemboxList.swiper.itemboxList--preview .swiper-button-next {
    top: 20px;
    right: 40px
}

@media (max-width:1023px) {
    .itemboxList.swiper.itemboxList--preview {
        margin-right: -20px;
        padding-top: 0;
        margin-top: 0
    }

    .itemboxList.swiper.itemboxList--preview .swiper-button-next,
    .itemboxList.swiper.itemboxList--preview .swiper-button-prev {
        display: none
    }
}

.itemboxList.swiper.itemboxList--highlight .swiper-button-prev {
    right: 50px
}

.itemboxList.swiper.itemboxList--highlight .swiper-button-next {
    right: 0
}

.itemboxList.swiper.itemboxList--highlight .itembox__content {
    position: relative;
    padding-top: 90px
}

.itemboxList.swiper.itemboxList--highlight .itembox__image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 400px;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.itemboxList.swiper.itemboxList--highlight .itembox__image .itembox__imageSrc {
    width: 240px;
    aspect-ratio: 1;
    border-radius: 12px;
    margin-bottom: -70px;
    z-index: 1
}

.itemboxList.swiper.itemboxList--highlight .itembox__name {
    width: calc(100% - 70px)
}

.itemboxList.swiper.itemboxList--highlight .itembox__actions {
    top: 84px;
    right: 5px
}

@media (max-width:1249px) {
    .itemboxList.swiper.itemboxList--highlight .itembox__content {
        padding-top: 80px
    }

    .itemboxList.swiper.itemboxList--highlight .itembox__image {
        height: 300px
    }

    .itemboxList.swiper.itemboxList--highlight .itembox__image .itembox__imageSrc {
        width: 220px;
        margin-bottom: -60px
    }

    .itemboxList.swiper.itemboxList--highlight .itembox__name {
        width: calc(100% - 60px)
    }

    .itemboxList.swiper.itemboxList--highlight .itembox__actions {
        top: 72px
    }
}

@media (max-width:767px) {
    .itemboxList.swiper.itemboxList--highlight .itembox__content {
        padding-top: 70px
    }

    .itemboxList.swiper.itemboxList--highlight .itembox__image {
        height: 280px
    }

    .itemboxList.swiper.itemboxList--highlight .itembox__image .itembox__imageSrc {
        width: 190px;
        margin-bottom: -50px
    }

    .itemboxList.swiper.itemboxList--highlight .itembox__name {
        width: calc(100% - 60px)
    }

    .itemboxList.swiper.itemboxList--highlight .itembox__actions {
        top: 62px
    }
}

.itemboxList.swiper.itemboxList--carousel {
    max-width: 700px;
    padding-top: 0
}

.itemboxList.swiper.itemboxList--carousel:not(.swiper-initialized)>.swiper-wrapper {
    display: flex
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide {
    opacity: 0 !important;
    width: 340px
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox {
    background: 0 0
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__image {
    background: 0 0
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__image img {
    aspect-ratio: 1
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__content {
    align-items: center;
    position: relative
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__prices {
    margin-bottom: 16px
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__actions {
    top: 14px
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__name {
    width: calc(100% - 60px);
    margin: 0 auto
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide .itembox__button {
    max-width: max-content
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-next,
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-prev {
    opacity: 1 !important
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-next .itembox__content,
.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-prev .itembox__content {
    opacity: 0;
    transition: all .3s ease-in-out;
    display: none
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-prev .itembox {
    transform: translateX(50px);
    margin-top: -10px
}

@media screen and (max-width:481px) {
    .itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-prev .itembox {
        transform: translateX(35px)
    }
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-next .itembox {
    transform: translateX(-50px);
    margin-top: -10px
}

@media screen and (max-width:481px) {
    .itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-next .itembox {
        transform: translateX(-35px)
    }
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-active {
    opacity: 1 !important
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-active .itembox {
    opacity: 1
}

.itemboxList.swiper.itemboxList--carousel .swiper-slide.swiper-slide-active .itembox .itembox__content {
    background: var(--main-color-white);
    display: flex
}

@media (max-width:1249px) {
    .itemboxList.swiper.itemboxList--carousel {
        margin-left: 40%
    }
}

@media (max-width:1023px) {
    .itemboxList.swiper.itemboxList--carousel {
        max-width: 500px
    }

    .itemboxList.swiper.itemboxList--carousel .swiper-slide {
        width: 320px
    }
}

@media (max-width:767px) {
    .itemboxList.swiper.itemboxList--carousel {
        max-width: 100%;
        margin-right: 0;
        margin-left: 0
    }

    .itemboxList.swiper.itemboxList--carousel .swiper-slide {
        width: 250px
    }
}

.swiper-scrollbar {
    height: 2px !important
}

.row--flexsub .itemboxList .swiper-wrapper {
    height: 100%
}

@media (max-width:1023px) {
    .itemboxListWithImage picture {
        margin-bottom: 40px;
        max-height: 500px;
        padding-right: 20px
    }

    .itemboxListWithImage picture img {
        object-fit: cover;
        object-position: top
    }
}

@media (max-width:767px) {
    .itemboxListWithImage picture {
        max-height: 350px
    }
}

@media (max-width:481px) {
    .itemboxListWithImage picture {
        max-height: 250px
    }
}

.itemBasketBox {
    position: relative;
    display: grid;
    padding-top: 20px;
    padding-bottom: 20px;
    grid-gap: 10px;
    grid-template-columns: auto 1fr auto;
    color: var(--main-color-black);
    text-decoration: none;
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxQuantity itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxSumPrice itemBasketBoxAddon"
}

.itemBasketBox:not(:last-child) {
    border-bottom: 1px solid var(--main-color-middle-gray)
}

@media (min-width:768px) {
    .itemBasketBox {
        grid-gap: 10px;
        grid-template-columns: auto 1fr auto auto auto;
        grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon"
    }
}

@media (min-width:1024px) and (max-width:1249px) {
    .itemBasketBox {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxInfo itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxPrice itemBasketBoxPrice itemBasketBoxAddon" "itemBasketBoxImg itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon"
    }
}

@media (min-width:1250px) {
    .itemBasketBox {
        grid-gap: 20px;
        align-items: center;
        grid-template-columns: auto 1fr auto auto auto auto;
        grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxPrice itemBasketBoxQuantity itemBasketBoxSumPrice itemBasketBoxAddon"
    }
}

.itemBasketBox a {
    color: var(--main-color-black);
    text-decoration: none
}

.itemBasketBox a:active,
.itemBasketBox a:focus,
.itemBasketBox a:hover {
    text-decoration: none;
    color: var(--main-color-primary)
}

.itemBasketBox__img {
    flex-shrink: 0;
    grid-area: itemBasketBoxImg;
    padding-right: 10px;
    width: 70px
}

@media (min-width:768px) {
    .itemBasketBox__img {
        width: 90px
    }
}

.itemBasketBox__img img {
    background: var(--main-color-gray-background)
}

.itemBasketBox__badges {
    margin-bottom: 10px
}

.itemBasketBox__description {
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 10px;
    display: block
}

@media (min-width:768px) {
    .itemBasketBox__description {
        font-size: var(--main-font-size-big)
    }
}

.itemBasketBox__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.itemBasketBox__info {
    grid-area: itemBasketBoxInfo
}

@media (min-width:768px) {
    .itemBasketBox__info {
        padding-top: 5px
    }
}

.itemBasketBox__price {
    display: flex;
    align-items: baseline;
    grid-area: itemBasketBoxPrice;
    text-align: right
}

@media (min-width:768px) {
    .itemBasketBox__price {
        padding-top: 5px
    }
}

@media (min-width:1250px) {
    .itemBasketBox__price {
        width: 120px
    }
}

@media (min-width:1540px) {
    .itemBasketBox__price {
        justify-content: flex-end
    }
}

@media (min-width:1250px) {
    .itemBasketBox__price .prices {
        justify-content: flex-end;
        flex-direction: column
    }
}

.itemBasketBox__price .basePrice {
    font-weight: var(--main-font-weight)
}

.itemBasketBox__actions {
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    grid-area: itemBasketBoxActions
}

.itemBasketBox__quantityWrapper {
    display: flex;
    align-items: center
}

.itemBasketBox__quantity {
    grid-area: itemBasketBoxQuantity;
    width: 140px
}

.itemBasketBox__quantity .quantity--small {
    border-radius: 8px;
    border-right: 1px solid var(--main-color-gray-base)
}

.itemBasketBox__quantity .quantity--inactive {
    padding-left: 0;
    border: 0
}

.itemBasketBox__quantity .quantity--inactive input:disabled {
    color: var(--main-color-black);
    line-height: 1
}

@media (max-width:767px) {
    .itemBasketBox__quantity .quantity--inactive input:disabled {
        padding: 0;
        text-align: left
    }
}

.itemBasketBox__quantity .quantity--inactive .quantity__spinner {
    display: none
}

.itemBasketBox__sumPrice {
    font-weight: var(--main-font-weight-bold);
    grid-area: itemBasketBoxSumPrice;
    font-size: var(--main-font-size-big)
}

@media (min-width:768px) {
    .itemBasketBox__sumPrice {
        padding-top: 5px;
        width: 120px;
        text-align: right
    }
}

@media (min-width:1024px) {
    .itemBasketBox__sumPrice {
        padding-top: 0;
        align-self: center
    }
}

.itemBasketBox__addon {
    grid-area: itemBasketBoxAddon;
    width: 40px;
    text-align: center
}

.itemBasketBox__addon .actionIcon {
    background: 0 0;
    font-size: 14px
}

a.itemBasketBox:active,
a.itemBasketBox:focus,
a.itemBasketBox:hover {
    text-decoration: none
}

a.itemBasketBox:active .itemBasketBox__description,
a.itemBasketBox:focus .itemBasketBox__description,
a.itemBasketBox:hover .itemBasketBox__description {
    color: var(--main-color-primary)
}

.orderButtonWrapper {
    display: flex;
    width: 100%;
    gap: 10px
}

@media (min-width:768px) {
    .orderButtonWrapper {
        gap: 20px
    }
}

.orderButtonWrapper .quantity {
    flex-shrink: 0
}

.orderButtonWrapper .orderButton {
    min-width: 0;
    flex-grow: 1;
    position: relative;
    padding-right: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.orderButtonWrapper .orderButton .icon {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transform: translateY(-50%);
    background: 0 0;
    margin: 0
}

@media (min-width:768px) {
    .orderButtonWrapper .orderButton .icon {
        font-size: 26px
    }
}

.orderButtonWrapper .orderButton>span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.orderButtonWrapper .orderButton:focus,
.orderButtonWrapper .orderButton:hover {
    background: var(--main-color-primary-dark)
}

.orderButtonWrapper .orderButton:active {
    background: var(--main-color-primary-darken)
}

.orderButtonWrapper .orderButton.disabled {
    pointer-events: none
}

.orderButton--customizable .icon:before {
    content: var(--base-icon-edit)
}

.itemcardBuybox .orderButtonWrapper .orderButton {
    justify-content: center;
    font-weight: var(--main-font-weight-bold);
    align-items: center;
    padding-right: 16px
}

.itemcardBuybox .orderButtonWrapper .orderButton .icon {
    position: relative;
    font-size: 22px;
    right: unset;
    height: unset;
    width: unset;
    top: unset;
    transform: unset
}

.itemcardBuybox .orderButtonWrapper .orderButton:active,
.itemcardBuybox .orderButtonWrapper .orderButton:focus,
.itemcardBuybox .orderButtonWrapper .orderButton:hover {
    background: var(--main-color-secondary-dark)
}

.itemcardBuybox .orderButtonWrapper .alert {
    transition: all .3s ease-in-out;
    position: absolute;
    bottom: 30px
}

.amountLine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 5px
}

.amountLine__label {
    margin-right: 5px
}

.amountLine__label .tag {
    margin-left: 10px
}

.amountLine--big {
    font-weight: var(--main-font-weight-bold);
    font-size: var(--main-font-size-big)
}

.order_sum,
.vat_table {
    border: 0
}

.order_sum td,
.vat_table td {
    padding: 4px 0;
    border: 0
}

.order_sum tr:first-child td,
.order_sum tr:first-child th,
.vat_table tr:first-child td,
.vat_table tr:first-child th {
    border-top: 0
}

.order_sum .order_price_total,
.order_sum .order_price_total_label,
.vat_table .order_price_total,
.vat_table .order_price_total_label {
    font-weight: var(--main-font-weight-bold);
    font-size: var(--main-font-size-big)
}

.orderboxSummary table {
    background-color: var(--main-color-gray-background)
}

.orderboxSummary table td {
    padding-left: 10px;
    padding-right: 10px
}

@media (min-width:768px) {
    .orderboxSummary {
        padding: 20px 30px;
        background: var(--main-color-gray-background)
    }
}

@media (min-width:1024px) {
    .orderboxSummary {
        padding: 30px
    }
}

.orderboxSummary__headline {
    margin: 0
}

.orderboxSummary__main {
    padding-top: 20px;
    padding-bottom: 20px
}

@media (max-width:767px) {
    .orderboxSummary__main {
        padding-top: 0
    }
}

.orderboxSummary__main a {
    text-decoration: none;
    font-size: var(--main-font-size-small)
}

.orderboxSummary__footer {
    padding-top: 20px;
    border-top: 1px solid var(--main-color-middle-gray)
}

@media (max-width:767px) {
    .orderboxSummary__head {
        display: none
    }
}

.orderboxSummary__head+.orderboxSummary__footer {
    border-top: 0
}

.orderboxSummary__buttons .button {
    width: 100%;
    margin-top: 20px
}

.orderboxSummary__trust {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--main-color-gray-base)
}

@media (min-width:768px) and (max-width:1023px) {
    .orderboxSummary__trust .trustList {
        flex-direction: column
    }
}

.orderboxSummary a:not(.button):not(.tag) {
    color: var(--main-color-black)
}

.orderboxSummary a:not(.button):not(.tag).is-active,
.orderboxSummary a:not(.button):not(.tag):active,
.orderboxSummary a:not(.button):not(.tag):focus,
.orderboxSummary a:not(.button):not(.tag):hover {
    color: var(--main-color-primary)
}

.orderboxSummary .infieldInputGroup #input_coupon_code {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.orderboxSummary .infieldInputGroup .inputGroup__addon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.orderboxSummary .infieldInputGroup .inputGroup__addon:hover {
    color: var(--main-color-white)
}

.orderboxSummary .amountLine.coupon .amountLine__label {
    display: flex;
    align-items: center
}

.orderboxSummary .amountLine.coupon .amountLine__value {
    text-align: right
}

@media (min-width:1250px) {
    .orderBoxContainer {
        margin-left: 50px
    }
}

.backToShop .linkWithIcon .icon {
    font-size: 14px
}

.sortingSelect.customSelect .customSelect__selected {
    padding-right: 25px;
    font-size: var(--main-font-size-base);
    font-weight: var(--main-font-weight-medium)
}

.sortingSelect.customSelect .customSelect__selected:after {
    content: var(--base-icon-angle-down-light);
    font-size: 12px
}

.sortingSelect.customSelect .customSelect__selected:focus-within {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.sortingSelect.customSelect .customSelect__selected .customSelect__dropdownItem:focus-within {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.sortingSelect.customSelect.is-active .customSelect__selected:after {
    content: var(--base-icon-angle-down-light)
}

.sortSelectColumn>form .sortingLabel {
    font-weight: var(--main-font-weight-medium);
    flex-shrink: 0
}

.sortSelectColumn>form {
    display: inline-flex;
    gap: 10px;
    align-items: center
}

.filterForm {
    width: 100%
}

.filterReset {
    padding: 8px;
    line-height: 1;
    font-size: 14px;
    font-weight: var(--main-font-weight-bold);
    background: var(--main-color-secondary-light);
    border-color: var(--main-color-secondary-light);
    text-decoration: none;
    padding-right: 30px !important;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer
}

.filterReset .icon,
.filterReset:before {
    position: absolute;
    font-size: 12px;
    right: 8px;
    top: 50%;
    translate: 0 -50%;
    transition: right .2s ease-in-out
}

.filterReset:before {
    content: var(--base-icon-trash);
    font-family: icons, Helvetica, Arial, sans-serif;
    right: -50%
}

.filterReset:active,
.filterReset:focus,
.filterReset:hover {
    background: var(--main-color-secondary-medium);
    border-color: var(--main-color-secondary-medium);
    color: var(--main-color-white);
    text-decoration: none
}

.filterReset:active .icon,
.filterReset:focus .icon,
.filterReset:hover .icon {
    right: -50%
}

.filterReset:active:before,
.filterReset:focus:before,
.filterReset:hover:before {
    right: 8px
}

.filterReset:focus-within {
    outline: 2px dotted var(--main-color-primary) !important;
    outline-offset: 2px
}

.filterBox__mobileButton {
    margin-bottom: 0;
    display: flex;
    position: relative;
    padding: 5px 10px 5px 25px;
    line-height: 24px
}

.filterBox__mobileButton:focus {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.filterBox__mobileButton:before {
    content: var(--base-icon-filter);
    font-family: icons, Helvetica, Arial, sans-serif;
    font-size: 2rem;
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%
}

@media (min-width:768px) {
    .filterBox__mobileButton {
        display: none
    }
}

.filterBox__filter .customSelect {
    width: 100%
}

.filterBox__filter .customSelect__selected {
    border: 0;
    padding-left: 0
}

.filterBox__filter .customSelect__selected:focus,
.filterBox__filter .customSelect__selected:focus-within {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.filterBox__filter .customSelect__selected select,
.filterBox__filter .selectBody select {
    border: 0;
    padding-left: 0;
    padding-right: 35px
}

@media (max-width:1023px) {

    .filterBox__filter .customSelect__selected select,
    .filterBox__filter .selectBody select {
        padding-top: 5px;
        padding-bottom: 5px
    }
}

.filterBox__filter .customSelect__selected:after,
.filterBox__filter .selectBody:after {
    font-size: 12px
}

@media (max-width:481px) {

    .filterBox__filter .customSelect__selected:after,
    .filterBox__filter .selectBody:after {
        right: 0
    }
}

.filterBox__filter .specialcheckboxSwitch {
    padding-left: 0;
    padding-right: 55px;
    font-size: 1.6rem;
    font-weight: var(--main-font-weight-medium)
}

.filterBox__filter .specialcheckboxSwitch i {
    left: unset;
    right: 0
}

.filterBox__contentTitle {
    font-weight: var(--main-font-weight-bold);
    font-size: 1.9rem
}

.filterBox__close {
    width: 30px;
    height: 30px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.filterBox__close:focus {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

.filterBox__close i {
    display: block
}

.filterBox__close:hover {
    background: var(--main-color-light-gray)
}

.filterBox__contentHeader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

@media (min-width:768px) {
    .filterBox__contentHeader {
        display: none
    }
}

.filterBox__showHiddenFilters:focus {
    outline: 2px dotted var(--main-color-primary);
    outline-offset: 2px
}

@media (max-width:767px) {
    .filterBox__filter {
        flex-grow: 1;
        overflow: hidden;
        overflow-y: scroll
    }
}

@media (min-width:768px) {
    .filterBox__filter .hiddenFilter {
        display: none
    }
}

.filterBox__filter>.row {
    align-items: center;
    justify-content: flex-end;
    gap: 0 20px
}

.filterBox__filter>.row>.filterBox__toggleFilterColumn {
    width: auto;
    display: none
}

@media (min-width:768px) {
    .filterBox__filter>.row>.filterBox__toggleFilterColumn {
        display: flex;
        align-items: center;
        min-height: 46px
    }
}

.filterBox__filter>.row>div {
    width: auto
}

@media (max-width:1249px) {
    .filterBox__filter>.row {
        justify-content: flex-start;
        gap: 0
    }
}

@media (max-width:481px) {
    .filterBox__filter>.row>div {
        width: 100%
    }
}

@media (max-width:767px) {
    .filterBox__buttons {
        flex-shrink: 0;
        padding-top: 10px
    }
}

@media (max-width:767px) {
    .filterBox__content {
        flex-direction: column;
        z-index: 104;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background: var(--main-color-white);
        max-height: 100%;
        padding: 20px;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, .1019607843);
        translate: 0 110%;
        transition: .2s ease-in-out;
        pointer-events: none;
        opacity: 0
    }
}

@media (max-width:767px) {
    .filterBox.is-active .filterBox__content {
        display: flex;
        translate: 0 0;
        pointer-events: auto;
        opacity: 1
    }
}

.filterBox .button {
    min-width: 0
}

.filterBox .button_row {
    margin-top: 0;
    margin-bottom: -10px
}

.filterBox .button_row .button,
.filterBox .button_row .buttonAction,
.filterBox .button_row .buttonLink,
.filterBox .button_row .buttonPrimary {
    margin-top: 0;
    margin-bottom: 10px;
    min-width: 0
}

.sortSelectColumn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap
}

.sortSelectColumn .customSelect,
.sortSelectColumn .inputGroup {
    width: auto;
    max-width: 100%;
    margin: 0
}

@media (min-width:768px) {
    .sortSelectColumn {
        min-height: 46px;
        flex-wrap: nowrap
    }
}

@media (max-width:767px) {

    .sortSelectColumn .customSelect,
    .sortSelectColumn .inputGroup {
        width: 100%
    }

    .sortSelectColumn .customSelect__selected {
        width: 100%;
        padding: 5px 35px 5px 10px;
        line-height: 24px;
        display: flex
    }

    .sortSelectColumn .customSelect__selected:after {
        right: 0
    }
}

.filterSortLine {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 20px
}

.filterSortLine:has(.categoryInfo) {
    justify-content: space-between;
    flex-wrap: nowrap
}

.filterSortLine:has(.categoryInfo) .categoryInfo {
    flex-shrink: 0
}

@media (min-width:768px) {
    .filterSortLine {
        margin-bottom: 30px
    }
}

@media (max-width:1249px) {
    .filterSortLine {
        flex-direction: column;
        row-gap: 10px
    }
}

.filterSortLine .categoryInfo__description {
    margin-bottom: 0
}

.filterSortingWrapper {
    display: flex;
    align-items: baseline;
    gap: 0 40px;
    flex-grow: 1;
    flex-wrap: wrap
}

.filterSortingWrapper .filterBox {
    flex-grow: 1
}

@media (max-width:1249px) {
    .filterSortingWrapper {
        justify-content: space-between;
        width: 100%
    }
}

.rangeSlider {
    position: relative;
    padding-bottom: 45px
}

.rangeSlider__track {
    width: 100%;
    height: 3px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    margin-top: 2px
}

.rangeSlider__inputs {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 200px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.rangeSlider__inputs span {
    flex-grow: 1
}

.rangeSlider__inputs input {
    text-align: center
}

.rangeSlider__ranges {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%
}

.rangeSlider input[type=range] {
    appearance: none;
    width: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    background-color: transparent;
    pointer-events: none;
    line-height: 0;
    padding: 0;
    border: 0;
    z-index: 1
}

.rangeSlider input[type=range]::-moz-range-track,
.rangeSlider input[type=range]::-ms-track,
.rangeSlider input[type=range]::-webkit-slider-runnable-track {
    height: 5px
}

.rangeSlider input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none
}

.rangeSlider input[type=range]::-moz-range-track {
    -moz-appearance: none
}

.rangeSlider input[type=range]::-ms-track {
    appearance: none
}

.rangeSlider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-color: var(--main-color-black);
    cursor: pointer;
    margin-top: -6px;
    pointer-events: auto;
    border-radius: 50%
}

.rangeSlider input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--main-color-black);
    pointer-events: auto
}

.rangeSlider input[type=range]::-ms-thumb {
    appearance: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--main-color-black);
    pointer-events: auto
}

.rangeSlider input[type=range]:active::-webkit-slider-thumb {
    background-color: var(--main-color-primary)
}

.customSelect__dropdownBody .rangeSlider {
    padding-left: 10px;
    padding-right: 10px
}

.customSelect__dropdownBody .rangeSlider__ranges {
    left: 10px;
    max-width: calc(100% - 20px);
    max-width: -moz-calc(100% - 20px);
    max-width: -webkit-calc(100% - 20px);
    max-width: -o-calc(100% - 20px)
}

.variantSelection {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 5px
}

.variantSelection__item {
    border: 2px solid var(--main-color-middle-gray);
    border-radius: 8px;
    padding: 5px;
    display: flex
}

.variantSelection__item:hover {
    border-color: var(--main-color-primary)
}

.variantSelection__item.is-active {
    border-color: var(--main-color-black)
}

.variantSelection__item img {
    aspect-ratio: 1;
    object-fit: contain
}

.variantSelection {
    position: relative
}

.variantSelection .swiper-button-next,
.variantSelection .swiper-button-prev {
    top: 50%;
    margin-top: -10px;
    color: var(--main-color-dark-gray);
    width: 20px;
    height: 20px;
    font-size: 20px
}

.variantSelection .swiper-button-next:not(.swiper-button-disabled),
.variantSelection .swiper-button-prev:not(.swiper-button-disabled) {
    display: flex;
    align-items: center;
    justify-content: center
}

.variantSelection .swiper-button-next:not(.swiper-button-disabled):hover,
.variantSelection .swiper-button-prev:not(.swiper-button-disabled):hover {
    color: var(--main-color-black)
}

.variantSelection .swiper-button-next.swiper-button-disabled,
.variantSelection .swiper-button-prev.swiper-button-disabled {
    display: none
}

.variantSelection .swiper-button-prev {
    left: -20px
}

@media (min-width:1024px) {
    .variantSelection .swiper-button-prev {
        left: -30px
    }
}

.variantSelection .swiper-button-next {
    right: -20px
}

@media (min-width:1024px) {
    .variantSelection .swiper-button-next {
        right: -30px
    }
}

.variantSelection .swiper-slide {
    width: 70px
}

.variantSelection .swiper {
    margin-left: 0;
    margin-right: 0;
    width: 100%
}

.variantSelection .swiper:not(.swiper-initialized) .swiper-wrapper {
    grid-gap: 5px
}

.attributesIcons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px
}

.attributesIcons__img {
    max-width: 40px
}

@media (min-width:768px) {
    .attributesIcons__img {
        max-width: 70px
    }
}

.itemcardBadges {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

.itemcardImagesAttributes {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    max-width: 50%;
    justify-content: flex-end
}

.itemcardImagesMain {
    overflow: hidden;
    position: relative
}

.itemcardImagesMain .itemcardImages__img {
    height: 100% !important;
    aspect-ratio: 4/3
}

.itemcardImagesMain .itemcardImages__img>img,
.itemcardImagesMain .itemcardImages__img>video {
    aspect-ratio: 4/3;
    width: auto
}

.itemcardImagesMain .itemcardImages__img .viewer360Wrapper .viewer360Images img {
    aspect-ratio: 4/3
}

.itemcardImagesMain .itemcardImages__item {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    background: var(--main-color-white)
}

.itemcardImagesThumbs img {
    pointer-events: none;
    user-select: None
}

.itemcardImagesThumbs .itemcardImages__img {
    pointer-events: none
}

.itemcardImagesThumbs .itemcardImages__img>img,
.itemcardImagesThumbs .itemcardImages__img>video {
    width: auto;
    object-fit: cover;
    height: 100% !important
}

.itemcardImagesThumbs .itemcardImages__item {
    width: 70px;
    display: flex;
    cursor: pointer;
    padding: 0;
    pointer-events: none
}

@media (min-width:768px) {
    .itemcardImagesThumbs .itemcardImages__item {
        width: 78px
    }
}

.itemcardImagesThumbs .swiper-container {
    flex-grow: 1
}

@media (max-width:767px) {
    .itemcardImagesThumbs .swiper-wrapper {
        justify-content: center
    }
}

.itemcardImagesThumbs .swiper-slide {
    cursor: pointer;
    transition: .2s ease-in-out;
    display: flex;
    height: auto;
    width: 70px;
    background: var(--main-color-white)
}

@media (min-width:768px) {
    .itemcardImagesThumbs .swiper-slide {
        width: 78px
    }
}

.itemcardImagesThumbs .swiper-slide .itemcardImages__item {
    border: 1px solid var(--main-color-primary)
}

.itemcardImagesThumbs .swiper-slide:not(.swiper-slide-thumb-active) .itemcardImages__item {
    border-color: var(--main-color-gray-base)
}

.itemcardImagesThumbs .swiper-slide:hover {
    opacity: 1
}

.itemcardImagesThumbs.swiper {
    position: relative
}

.itemcardImagesThumbs.swiper .swiper-button-next,
.itemcardImagesThumbs.swiper .swiper-button-prev {
    top: auto;
    bottom: auto;
    left: 50%;
    right: auto;
    margin: 0;
    transform: translateX(-50%) rotate(90deg)
}

.itemcardImagesThumbs.swiper .swiper-button-next.swiper-button-disabled,
.itemcardImagesThumbs.swiper .swiper-button-prev.swiper-button-disabled {
    opacity: 0
}

.itemcardImagesThumbs.swiper .swiper-button-prev {
    top: 0
}

.itemcardImagesThumbs.swiper .swiper-button-next {
    bottom: 0
}

@media (max-width:767px) {
    .itemcardImagesThumbs .swiper-slide {
        width: 16px;
        background: 0 0;
        border-radius: 50%;
        border: 4px solid transparent
    }

    .itemcardImagesThumbs .swiper-slide .itemcardImages__item {
        border: 0;
        background: var(--main-color-gray-base);
        padding: 0;
        height: 8px;
        width: 8px;
        border-radius: 50%
    }

    .itemcardImagesThumbs .swiper-slide.swiper-slide-thumb-active {
        border: 4px solid var(--main-color-white)
    }

    .itemcardImagesThumbs .swiper-slide.swiper-slide-thumb-active .itemcardImages__item {
        background: var(--main-color-primary)
    }

    .itemcardImagesThumbs .itemcardImages__img {
        display: none
    }

    .itemcardImagesThumbs .swiper .swiper-button-next,
    .itemcardImagesThumbs .swiper .swiper-button-prev {
        display: none
    }
}

.itemcardImages {
    position: relative;
    width: 100%
}

.itemcardImages:before {
    content: var(--base-icon-loading);
    font-family: icons, Helvetica, Arial, sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    font-size: 80px;
    z-index: 106;
    color: var(--main-color-middle-gray);
    animation: rotation 1s infinite ease-in-out;
    opacity: 0;
    pointer-events: none;
    transition: .2s ease-in-out
}

@media (min-width:768px) {
    .itemcardImages:before {
        font-size: 120px
    }
}

.itemcardImages>* {
    transition: opacity .2s ease-in-out
}

.itemcardImages.is-loading:before {
    opacity: 1
}

.itemcardImages.initialized:before {
    display: none
}

.itemcardImages:not(.initialized)>* {
    opacity: 0
}

.itemcardImages .itemcardImagesThumbs {
    margin-top: -20px;
    margin-bottom: 30px;
    overflow: hidden
}

@media (min-width:768px) {
    .itemcardImages.thumbsLeft {
        display: flex
    }

    .itemcardImages.thumbsLeft .itemcardImagesMain {
        order: 1;
        flex-grow: 1
    }

    .itemcardImages.thumbsLeft .itemcardImagesThumbs {
        width: 78px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        margin-top: 0;
        flex-shrink: 0;
        position: absolute;
        top: 30px;
        z-index: 2
    }
}

@media (min-width:768px) and (min-width:1250px) {
    .itemcardImages.thumbsLeft .itemcardImagesThumbs {
        margin-right: 30px;
        top: 145px
    }
}

@media (min-width:768px) {
    .itemcardImages.thumbsLeft .itemcardImagesThumbs .swiper-slide {
        width: 100%;
        height: 100px !important
    }

    .itemcardImages.thumbsLeft .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-wrapper {
        flex-direction: column
    }

    .itemcardImages.thumbsLeft .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-wrapper .swiper-slide {
        height: 20%;
        padding-bottom: 20px
    }

    .itemcardImages.thumbsLeft .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-wrapper .swiper-slide:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)) {
        display: none
    }
}

@media (max-width:767px) {
    .itemcardImages .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) {
        margin-left: -5px;
        margin-right: -5px
    }

    .itemcardImages .itemcardImagesThumbs .swiper-container:not(.swiper-initialized) .swiper-slide {
        padding-left: 5px;
        padding-right: 5px
    }
}

.itemcardBuybox {
    background: var(--main-color-white)
}

.itemcardBuybox__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px
}

.itemcardBuybox__head .itemcardActions {
    order: 1;
    margin-left: 20px
}

@media (min-width:768px) {
    .itemcardBuybox__head {
        margin-bottom: 100px
    }
}

@media (min-width:768px) {
    .itemcardBuybox__main {
        padding-bottom: 20px
    }
}

.itemcardBuybox__bottom {
    padding-top: 60px;
    padding-bottom: 60px
}

.itemcardBuybox__bottom .textcontent:has(.iconbox) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    margin-left: 0;
    border-right: 0
}

.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox .icon {
    position: relative;
    margin-bottom: 24px
}

.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox:first-child:before,
.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox:nth-child(3):before {
    content: "";
    position: absolute;
    right: -15px;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: var(--main-color-gray-base)
}

.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox:first-child:after,
.itemcardBuybox__bottom .textcontent:has(.iconbox) .iconbox:nth-child(2):after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--main-color-gray-base)
}

@media (min-width:1250px) {
    .itemcardBuybox__bottom {
        padding-top: 120px;
        padding-bottom: 120px
    }

    .itemcardBuybox__bottom>.textcontent {
        gap: 60px
    }

    .itemcardBuybox__bottom>.textcontent .iconbox {
        padding-left: 30px;
        padding-right: 30px
    }

    .itemcardBuybox__bottom>.textcontent .iconbox:first-child:before,
    .itemcardBuybox__bottom>.textcontent .iconbox:nth-child(3):before {
        right: -30px
    }

    .itemcardBuybox__bottom>.textcontent .iconbox:first-child:after,
    .itemcardBuybox__bottom>.textcontent .iconbox:nth-child(2):after {
        bottom: -30px
    }
}

.itemcardBuybox__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

@media (min-width:768px) {
    .itemcardBuybox__actions {
        margin-top: 40px;
        margin-bottom: 20px
    }
}

.itemcardBuybox__actions .button--primary {
    flex-grow: 1
}

.itemcardBuybox__trustSection {
    padding: 20px 40px
}

.itemcardBuybox__trustSection .trustInfobar img {
    max-height: 30px;
    width: 50px !important
}

.itemcardBuybox .inventoryWrapper {
    margin-top: 20px
}

@media (max-width:767px) {
    .itemcardBuybox .inventoryWrapper {
        padding-bottom: 30px
    }
}

.itemcardBuybox .prices .basePrice {
    margin-bottom: 0;
    font-weight: var(--main-font-weight-bold);
    font-size: 1.6rem
}

@media (min-width:768px) {
    .itemcardBuybox .prices .basePrice {
        font-size: 1.8rem
    }
}

@media (min-width:1024px) {
    .itemcardBuybox .prices .basePrice {
        font-size: 2rem
    }
}

.itemcardBuybox .amountLine:not(:last-child) {
    border-bottom: 1px solid var(--main-color-light-gray)
}

.itemcardBuybox .amountLine__label {
    color: var(--main-color-dark-gray);
    font-size: var(--main-font-size-small)
}

.itemcardBuybox .amountLines {
    margin-bottom: 20px
}

.itemcardBuybox .orderButtonWrapper {
    margin-top: 20px
}

.itemcardBuybox .orderButtonWrapper .quantity--small {
    border-radius: 8px;
    border-right: 1px solid var(--main-color-gray-base);
    height: 46px
}

@media (max-width:767px) {
    .itemcardBuybox .contentTabs .contentTabs__header {
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        scrollbar-width: thin;
        padding-bottom: 1px
    }

    .itemcardBuybox .contentTabs .contentTabs__header::-webkit-scrollbar {
        height: 2px
    }
}

.itemcardBuybox .orderbox_button {
    position: relative
}

.itemcardBuybox #shippingModalLink {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 5px
}

@media (max-width:767px) {
    .itemcardBuybox #shippingModalLink {
        bottom: 0;
        right: unset;
        left: 0
    }
}

.itemcardBuybox:has(.inventoryStorageWrapper) #shippingModalLink {
    bottom: 10px
}

@media (max-width:767px) {
    .itemcardBuybox:has(.inventoryStorageWrapper) #shippingModalLink {
        bottom: 10px
    }
}

.itemcardOrderSections {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%
}

.itemcardOrderSections .itemcardOrderSections__section {
    border-radius: 8px;
    border: 1px solid var(--main-color-middle-gray);
    padding: 16px
}

.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .inventoryWrapper,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .itemcardOrderSections__sectionOptions,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .orderButtonWrapper,
.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .priceNotice {
    display: none
}

.itemcardOrderSections .itemcardOrderSections__section:not(.is-active) .prices .basePrice {
    font-size: var(--main-font-size-base)
}

.itemcardOrderSections .itemcardOrderSections__section.is-active {
    border-width: 2px;
    border-color: var(--main-color-primary)
}

.itemcardHeadline:last-child {
    margin-bottom: 0
}

.itemcardHeadline+.itemcardRating {
    margin-top: -20px
}

.itemcardBreadcrumbs .breadcrumbWrapper {
    margin-bottom: 60px;
    gap: 10px
}

@media (max-width:767px) {
    .itemcardBreadcrumbs .breadcrumbWrapper {
        margin-bottom: 20px
    }
}

.itemcardActions {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-wrap: wrap
}

.itemcardBrand .image,
.itemcardBrand .imageCover,
.itemcardBrand .itemcardImagesMain .itemcardImages__img,
.itemcardBrand .itemcardImagesThumbs .itemcardImages__img,
.itemcardImagesMain .itemcardBrand .itemcardImages__img,
.itemcardImagesThumbs .itemcardBrand .itemcardImages__img {
    max-width: 80px
}

.itemcardBrand .image img,
.itemcardBrand .imageCover img,
.itemcardBrand .itemcardImagesMain .itemcardImages__img img,
.itemcardBrand .itemcardImagesThumbs .itemcardImages__img img,
.itemcardImagesMain .itemcardBrand .itemcardImages__img img,
.itemcardImagesThumbs .itemcardBrand .itemcardImages__img img {
    aspect-ratio: 4/3;
    object-position: left center
}

.itemNo {
    color: var(--main-color-middle-gray);
    margin-bottom: 10px
}

.itemcardAttributesTable caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.itemcardAttributesTable tr:nth-child(odd) td,
.itemcardAttributesTable tr:nth-child(odd) th {
    background-color: #f6f6f6
}

.itemcardAttributesTable td,
.itemcardAttributesTable th {
    padding: 5px;
    text-align: left
}

@media (min-width:768px) {

    .itemcardAttributesTable td,
    .itemcardAttributesTable th {
        padding: 10px
    }
}

.itemcardAttributesTable th {
    font-weight: var(--main-font-weight-bold)
}

.itemcardFaq {
    display: grid;
    gap: 20px;
    grid-template-columns: 0.6fr 1fr
}

@media (max-width:767px) {
    .itemcardFaq {
        grid-template-columns: 1fr;
        gap: 0
    }
}

@media (min-width:768px) {
    .itemcardBuybox .orderButtonWrapper {
        margin-top: 60px
    }
}

@media (max-width:767px) {
    .itemcardBuybox .orderButtonWrapper {
        display: none
    }
}

@media (max-width:767px) {

    .itemcardBuybox .prices .basePrice,
    .itemcardBuybox .prices .priceNotice span {
        display: none
    }
}

.itemcardBuyboxMobile {
    display: none
}

@media (max-width:767px) {
    .itemcardBuyboxMobile {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--main-color-white);
        padding: 20px;
        z-index: 99;
        border-radius: 20px 20px 0 0;
        box-shadow: 4px 0 14px 0 rgba(0, 0, 0, .1);
        display: block
    }

    .itemcardBuyboxMobile .alert {
        transition: all .3s ease-in-out;
        position: absolute;
        bottom: 10px;
        left: 20px;
        right: 20px
    }

    .itemcardBuyboxMobile .inventoryStorageWrapper {
        display: none
    }
}

.itemcardBuyboxMobile #shippingModalLink,
.itemcardBuyboxMobile .inventoryWrapper {
    display: none
}

.itemcardBuyboxMobile .orderButtonWrapper {
    margin-top: 16px
}

.itemcardBuyboxMobile .quantity {
    border-radius: 8px;
    border-right: 1px solid var(--main-color-gray-base);
    height: 46px
}

.itemcardBuyboxMobile .orderButton {
    justify-content: center;
    font-weight: var(--main-font-weight-bold);
    align-items: center;
    padding-right: 16px
}

.itemcardBuyboxMobile .orderButton .icon {
    position: relative;
    font-size: 22px;
    right: unset;
    height: unset;
    width: unset;
    top: unset;
    transform: unset
}

.itemcardMedia {
    grid-area: cardMedia;
    overflow: hidden
}

@media (min-width:1024px) {
    .itemcardMedia {
        position: sticky;
        top: 100px
    }
}

.itemcardSide {
    grid-area: cardSide
}

.itemcardComments {
    grid-area: cardComments
}

.itemcardAttributes {
    grid-area: cardAttributes
}

.itemcardDescriptions {
    grid-area: cardDescriptions;
    display: flex;
    flex-direction: column;
    grid-gap: 10px
}

.itemcardDescriptions table {
    min-width: 100%
}

.itemcardCrossseller h3 {
    text-align: center;
    margin-bottom: 40px
}

.itemcardCrossseller .itemboxList.swiper {
    max-width: 100%
}

@media (max-width:1023px) {
    .itemcardCrossseller h3 {
        text-align: left
    }

    .itemcardCrossseller .itemboxList.swiper {
        padding-bottom: 20px;
        max-width: calc(100% + 40px);
        margin-left: 0
    }

    .itemcardCrossseller .swiper-scrollbar {
        display: block
    }

    .itemcardCrossseller .swiper-pagination {
        display: none !important
    }
}

.itemcardMain {
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    grid-column-gap: 10px;
    grid-template-areas: "cardMedia" "cardSide" "cardDescriptions" "cardAttributes" "cardComments"
}

.itemcardMain>* {
    margin-bottom: 10px
}

@media (min-width:768px) {
    .itemcardMain {
        grid-template-columns: 1fr 50%;
        grid-template-areas: "cardMedia cardMedia" "cardSide cardSide" "cardSide cardSide" "cardComments cardComments"
    }
}

@media (min-width:1024px) {
    .itemcardMain {
        grid-template-columns: 1fr 50%;
        grid-template-areas: "cardMedia cardSide" "cardDescriptions cardSide" "cardAttributes cardSide" "cardComments cardSide"
    }

    .itemcardMain .itemcardSide {
        margin-bottom: 0
    }
}

@media (min-width:1250px) {
    .itemcardMain {
        grid-template-columns: 1fr 43%
    }

    .itemcardMain>* {
        margin-bottom: 10px
    }
}

@media (min-width:1540px) {
    .itemcardMain {
        grid-column-gap: 80px
    }
}

.packageLinkItem__title {
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 10px
}

.packageLinkItem__tiles {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.packageLinkItem__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    background: var(--main-color-white);
    color: var(--main-color-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s
}

@container (min-width:380px) {
    .packageLinkItem__tile {
        width: 40px;
        height: 40px
    }
}

.packageLinkItem__tile:hover {
    border-color: var(--main-color-secondary)
}

.packageLinkItem__tile.is-active {
    background: var(--main-color-secondary);
    border-color: var(--main-color-secondary);
    color: var(--main-color-white)
}

.packageLinkItem__summary {
    list-style: none;
    padding: 0;
    margin: 0
}

.packageLinkItem__summary li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0
}

.packageLinkItem__summaryImage {
    width: 50px;
    height: 50px !important;
    aspect-ratio: 1;
    object-fit: contain;
    flex-shrink: 0
}

@container (min-width:380px) {
    .packageLinkItem__summaryImage {
        width: 60px;
        height: 60px !important
    }
}

@media (max-width:767px) {
    .packageLinkItem .orderButtonWrapper {
        display: flex
    }
}

.itemcardGiftWrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    background: var(--main-color-primary-light);
    padding: 20px 30px;
    border-radius: 8px;
    margin-bottom: 60px;
    cursor: pointer
}

.itemcardGiftWrapper .icon {
    flex-shrink: 0;
    color: var(--main-color-primary);
    font-size: 20px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--main-color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease
}

.itemcardGiftWrapper:hover .icon {
    background-color: var(--main-color-primary);
    color: var(--main-color-white)
}

@media (max-width:1249px) {
    .itemcardGiftWrapper {
        padding: 20px;
        flex-direction: column;
        gap: 5px
    }
}

.giftModal__header {
    text-align: center;
    padding-bottom: 10px
}

.giftModal__subtitle {
    margin-top: -10px;
    margin-bottom: 20px;
    color: var(--main-color-black);
    font-size: 1.8rem
}

.giftModal__body {
    display: flex;
    gap: 40px;
    align-items: stretch
}

@media (max-width:1023px) {
    .giftModal__body {
        flex-direction: column
    }
}

.giftModal__preview {
    flex: 0 0 55%
}

.giftModal__preview img {
    width: 100%;
    display: block;
    aspect-ratio: 627/470
}

.giftModal__variants {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px
}

@media (max-width:1023px) {
    .giftModal__variants {
        flex: none;
        width: 100%
    }
}

.giftModal__variants-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 50px;
    max-height: 400px;
    mask-image: linear-gradient(to bottom, black calc(100% - 60px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 60px), transparent 100%)
}

.giftModal__variants-list::-webkit-scrollbar {
    width: 2px
}

.giftModal__variants-list::-webkit-scrollbar-track {
    background: 0 0
}

.giftModal__variants-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 1px
}

.giftModal__variants-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent
}

@media (max-width:767px) {
    .giftModal__variants-list {
        max-height: 270px
    }
}

.giftModal__variant {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 12px;
    transition: background-color .15s ease;
    margin-bottom: 0;
    font-size: 1.8rem
}

@media (max-width:767px) {
    .giftModal__variant {
        padding: 10px 0
    }
}

.giftModal__variant:focus,
.giftModal__variant:focus-visible,
.giftModal__variant:hover {
    background-color: var(--main-color-primary-light)
}

.giftModal__variant:has(input:checked) {
    border-color: var(--main-color-primary)
}

.giftModal__variant i {
    position: static;
    top: auto;
    transform: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px
}

.giftModal__variant i:after {
    position: relative;
    width: 14px;
    height: 14px
}

.giftModal__variant-thumb {
    width: 80px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 3px
}

.giftModal__footer {
    margin-top: 8px
}

@media (max-width:767px) {
    .giftModal__footer {
        position: sticky;
        bottom: 10px
    }
}

.giftModal__cta {
    width: 100%;
    justify-content: center
}

.giftModal__cta.is-disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none
}

.itemcardGift__description {
    display: flex;
    gap: 30px;
    align-self: center;
    align-items: center
}

.itemcardGift__description .headline {
    font-size: 2rem;
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 10px
}

.itemcardGift__description .subline {
    margin-bottom: 10px
}

.itemcardGift__description .price {
    font-weight: var(--main-font-weight-bold)
}

@media (max-width:1249px) {
    .itemcardGift__description {
        gap: 20px
    }
}

.itemcardGift__image {
    width: 220px;
    flex-shrink: 0;
    margin-left: 40px
}

.itemcardBanner {
    position: sticky;
    bottom: 150px;
    max-width: 1840px;
    width: 100%;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto
}

@media screen and (max-width:1024px) {
    .itemcardBanner {
        bottom: 40px
    }
}

.itemcardBanner .banner {
    height: 850px
}

@media screen and (max-width:1024px) {
    .itemcardBanner .banner {
        height: 520px
    }
}

.itemcardBanner .banner .button {
    border-color: var(--main-color-white);
    color: var(--main-color-white);
    background: 0 0;
    display: inline-flex
}

.itemcardBanner .banner .button:after {
    content: var(--base-icon-angle-right-bold);
    font-family: icons, Helvetica, Arial, sans-serif;
    color: var(--main-color-white);
    font-size: 12px;
    margin-left: 8px
}

@media screen and (min-width:1024px) {
    .itemcardBanner .banner .banner2 .contentText .textcontent {
        max-width: 50%
    }
}

@media screen and (width:1024px) {
    .itemcardBanner .banner .banner2 .contentText__headline {
        font-size: 3rem
    }

    .itemcardBanner .banner .banner2 .contentText__text {
        font-size: 1.8rem
    }
}

.itemcardBanner .banner .contentImage {
    border-radius: 20px
}

@media screen and (max-width:1024px) {
    .itemcardBanner .banner .contentImage {
        max-height: 520px
    }
}

.itemcardBannerPlaceholder {
    height: 850px;
    width: 100%;
    display: block
}

@media screen and (max-width:1024px) {
    .itemcardBannerPlaceholder {
        height: 380px
    }
}

.container:has(+ .itemcardBanner) {
    position: relative;
    z-index: 2;
    background: var(--main-color-white)
}

.accountBox__headline,
.gp.accountBox .h3,
.gp.accountBox .itemcardHeadline,
.gp.accountBox .orderboxSummary__headline,
.gp.accountBox h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    min-height: 30px;
    font-weight: var(--main-font-weight-bold);
    font-size: var(--main-font-size-base);
    margin: 0
}

.accountBox__headline .icon,
.gp.accountBox .h3 .icon,
.gp.accountBox .itemcardHeadline .icon,
.gp.accountBox .orderboxSummary__headline .icon,
.gp.accountBox h3 .icon {
    font-size: 1.4em;
    margin-right: 5px;
    font-weight: 400;
    width: 30px;
    text-align: center
}

.accountBox {
    border: 1px solid var(--main-color-middle-gray);
    padding: 10px 20px 20px 20px;
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column
}

@media (min-width:768px) {
    .accountBox {
        min-height: 120px
    }
}

.accountBox__actions {
    margin-left: 10px;
    margin-right: -5px
}

.accountBox__actions a,
.accountBox__actions button {
    padding: 0;
    margin: 0;
    border: 0;
    background: 0 0;
    color: var(--main-color-dark-gray);
    width: 30px;
    height: 30px;
    display: flex;
    align-content: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    flex-wrap: wrap;
    line-height: 1
}

.accountBox__actions a:hover,
.accountBox__actions button:hover {
    color: var(--main-color-black)
}

.accountBox__actions a:not(:last-child),
.accountBox__actions button:not(:last-child) {
    margin-bottom: 10px
}

.accountBox__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.accountBox__headerButton {
    font-size: var(--main-font-size-small)
}

.accountBox__content {
    flex-grow: 1
}

.accountBox__content small {
    color: var(--main-color-dark-gray)
}

.accountBox__content .marginBottom:last-child {
    margin-bottom: 0
}

.accountBox__footer {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: var(--main-color-dark-gray)
}

.accountBox__footer a,
.accountBox__footer button {
    padding: 0;
    border: 0;
    background: 0 0;
    font-size: var(--main-font-size-small);
    color: var(--main-color-dark-gray)
}

.accountBox__footer a:hover,
.accountBox__footer button:hover {
    color: var(--main-color-black)
}

.accountBox--new {
    text-align: center;
    height: 100%;
    color: var(--main-color-dark-gray);
    font-size: var(--main-font-size-base);
    cursor: pointer
}

.accountBox--new:hover {
    color: var(--main-color-black)
}

.accountBox--new .accountBox__content {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column
}

.accountBox--new .accountBox__content .icon {
    font-size: 40px
}

a.accountBox {
    color: var(--main-color-black);
    text-decoration: none
}

a.accountBox:hover {
    text-decoration: none;
    border-color: var(--main-color-primary)
}

.gp.accountBox:hover {
    border-color: var(--main-color-primary)
}

.gp.accountBox>.link {
    text-decoration: none;
    color: var(--main-color-black)
}

.gp.accountBox>.link:hover {
    text-decoration: none
}

.gp.accountBox .h3,
.gp.accountBox .itemcardHeadline,
.gp.accountBox .orderboxSummary__headline,
.gp.accountBox h3 {
    margin-bottom: 10px
}

.accountBoxForm {
    width: 100%;
    display: flex
}

@media (min-width:768px) {
    .shipmentAddressList .accountBox {
        min-height: 185px
    }
}

@media (min-width:768px) {
    .iconbarHover--basket {
        width: 380px;
        z-index: 103;
        right: calc(50% + 50px)
    }
}

.iconbarHover--basket:before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 35px;
    background: 0 0;
    border-color: transparent;
    pointer-events: auto;
    display: block
}

.iconbarHover--basket .iconbarHover__footer .amountLines {
    margin-bottom: 20px
}

.iconbarHover--basket .itemBasketBox {
    font-size: var(--main-font-size-small);
    grid-gap: 10px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "itemBasketBoxImg itemBasketBoxInfo itemBasketBoxPrice" "itemBasketBoxImg itemBasketBoxActions itemBasketBoxActions"
}

.iconbarHover--basket .itemBasketBox__img {
    width: 60px;
    border-radius: 4px
}

.iconbarHover--basket .itemBasketBox__img img {
    background: var(--main-color-gray-background)
}

.iconbarHover--basket .itemBasketBox__description {
    font-size: inherit
}

.iconbarHover--basket .itemBasketBox .linkWithIcon {
    font-size: var(--main-font-size-small);
    gap: 2px
}

.availability_message {
    margin-top: 32px
}

.availability_message .availability_message_button {
    display: inline-block;
    margin-bottom: 16px
}

.availability_message .availability_message_button .icon {
    padding-right: 16px
}

.availability_message .availability_message_box {
    background-color: var(--main-color-white);
    margin-bottom: 32px
}

.availability_message .availability_message_box .button {
    width: 100%;
    max-width: 200px
}

@media (max-width:767px) {
    .availability_message .availability_message_box {
        padding: 16px
    }

    .availability_message .availability_message_box .button {
        max-width: 100%
    }
}

#itemcard_availability_message .form-group {
    display: flex;
    gap: 20px
}

#itemcard_availability_message .form-group .infieldInputGroup {
    flex-grow: 1
}

@media (max-width:767px) {
    #itemcard_availability_message .form-group {
        flex-direction: column;
        gap: 10px
    }
}

.itemcardBuybox:has(#availability_registration_wrapper) .orderButtonWrapper.inactive {
    display: none
}

.itemcardBuybox:has(#availability_registration_wrapper) #availability_registration_wrapper {
    margin-top: 60px
}

.js-basketOrderBox.is-loading,
.js-itemBasketList.is-loading {
    cursor: wait;
    pointer-events: none
}

.js-basketOrderBox.is-loading .quantity,
.js-basketOrderBox.is-loading input,
.js-itemBasketList.is-loading .quantity,
.js-itemBasketList.is-loading input {
    opacity: .5
}

.archiveFilterbox {
    margin-bottom: 40px
}

.archiveFilterbox>.inner {
    container-type: inline-size
}

.archiveFilterbox .filterGrid {
    display: grid;
    gap: 32px
}

.archiveFilterbox .filterGrid__left {
    display: grid;
    gap: 16px
}

.archiveFilterbox .filterGrid__right {
    display: flex;
    gap: 16px
}

@container (inline-size > 540px) {
    .archiveFilterbox .filterGrid__left {
        grid-template-columns: 1fr 1fr
    }

    .archiveFilterbox .filterGrid.col4 .filterGrid__left {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@container (inline-size > 890px) {
    .archiveFilterbox .filterGrid {
        grid-template-columns: 1fr auto
    }

    .archiveFilterbox .filterGrid__left {
        grid-template-columns: 1fr 1fr
    }

    .archiveFilterbox .filterGrid__right {
        align-items: flex-end
    }
}

.archiveTable {
    margin-bottom: 48px
}

.archiveTable .button {
    min-width: 0
}

.archiveTable__label {
    color: var(--main-color-gray-base);
    display: block;
    margin-bottom: 5px
}

@media (min-width:768px) {
    .archiveTable {
        display: table;
        width: 100%;
        table-layout: auto
    }

    .archiveTable__row {
        display: table-row
    }

    .archiveTable__cell {
        display: table-cell;
        vertical-align: middle;
        padding: 16px;
        border-top: 1px solid var(--main-color-middle-gray);
        width: 120px
    }

    .archiveTable__cell--auto {
        width: auto
    }

    .archiveTable__cell:first-child {
        padding-left: 0
    }

    .archiveTable__cell:last-child {
        padding-right: 0;
        width: auto
    }

    .archiveTable__infoLine {
        padding-top: 8px;
        padding-bottom: 8px
    }

    .archiveTable__label {
        display: none
    }

    .archiveTable__header .archiveTable__cell {
        border-top: 0
    }
}

@media (min-width:1250px) {
    .archiveTable__cell {
        width: 180px
    }
}

@media (max-width:767px) {
    .archiveTable__header {
        display: none
    }

    .archiveTable__cell {
        text-align: left;
        margin-bottom: 16px
    }

    .archiveTable__cell:last-child {
        margin-bottom: 0
    }

    .archiveTable__row {
        padding-top: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--main-color-middle-gray)
    }

    .archiveTable__label {
        color: var(--main-color-black)
    }

    .archiveTable__statusLine {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        padding-left: 15px;
        font-weight: var(--main-font-weight-bold);
        margin-bottom: 0
    }

    .archiveTable__statusLine span {
        margin: 0
    }

    .archiveTable__statusLine:before {
        content: var(--base-icon-angle-right);
        font-family: icons;
        position: absolute;
        top: 50%;
        left: -2px;
        transform: translateY(-50%) rotate(0);
        font-size: 1.1rem;
        margin-top: .5px;
        transition: all .2s ease-in-out
    }

    .archiveTable__statusLine.is-active:before {
        transform: translateY(-50%) rotate(90deg)
    }

    .archiveTable__infoLine {
        display: none;
        padding-left: 15px;
        margin-top: 10px
    }

    .archiveTable__actionLine {
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 5px
    }
}

@media (min-width:768px) {
    .archiveTableInTable {
        display: table;
        width: 100%;
        table-layout: auto
    }

    .archiveTableInTable__row {
        display: table-row
    }

    .archiveTableInTable__cell {
        display: table-cell;
        vertical-align: middle;
        padding: 8px 16px;
        width: 120px
    }

    .archiveTableInTable__cell--auto {
        width: auto
    }

    .archiveTableInTable__cell:first-child {
        padding-left: 0
    }

    .archiveTableInTable__cell:last-child {
        padding-right: 0;
        width: auto
    }
}

@media (min-width:1250px) {
    .archiveTableInTable__cell {
        width: 180px
    }
}

@media (max-width:767px) {
    .archiveTableInTable__cell {
        text-align: left;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: flex-start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        justify-content: space-between
    }

    .archiveTableInTable__cell:last-child {
        margin-bottom: 0
    }
}

@media (max-width:767px) {
    .toggleTableRow {
        padding-left: 32px
    }
}

.itemSharing__item {
    margin-top: 10px
}

.itemSharing__btn {
    position: relative;
    padding-left: 24px;
    display: inline-block;
    cursor: pointer;
    color: var(--main-color-black)
}

.itemSharing__btn .icon {
    text-align: center;
    font-size: 1.2em;
    color: var(--main-color-primary);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.itemSharing__btn:hover {
    color: var(--main-link-color-hover)
}

.itemtable_list {
    display: table;
    width: 100%;
    table-layout: auto
}

.itemtable_row {
    display: table-row
}

@media (min-width:768px) {
    .itemtable_row:last-child .itemtable_cell {
        border-bottom: 1px solid var(--main-color-middle-gray)
    }
}

.itemtable_cell {
    display: table-cell;
    vertical-align: top;
    padding: 32px;
    border-top: 1px solid var(--main-color-middle-gray)
}

.itemtable_cell .description {
    font-weight: var(--main-font-weight-bold)
}

.itemtable_cell .description>a {
    color: var(--main-color-black);
    font-weight: var(--main-font-weight-bold)
}

.itemtable_cell .description>a:hover {
    color: var(--main-color-primary)
}

.itemtable_cell .basket_delete {
    margin-top: 32px;
    display: inline-block
}

.itemtable_cell .order_price {
    font-weight: var(--main-font-weight-bold)
}

.itemtable_label {
    display: none;
    color: var(--main-color-gray-base);
    font-weight: var(--main-font-weight);
    font-size: var(--main-font-size-base);
    margin-bottom: 5px
}

.itemtable_header .itemtable_cell {
    padding-top: 16px;
    padding-bottom: 16px;
    border-top: 0
}

@media (min-width:768px) {
    .itemtable_cell.image_line {
        width: 140px
    }

    .itemtable_cell.quantity_line {
        width: 150px
    }

    .itemtable_cell.line_amount_line,
    .itemtable_cell.price_line {
        width: 150px
    }
}

@media (max-width:767px) {
    .itemtable_list {
        display: block
    }

    .itemtable_row {
        border-top: 1px solid var(--main-color-middle-gray);
        padding-top: 5px;
        padding-bottom: 5px;
        display: block
    }

    .itemtable_row:after {
        content: "";
        display: block;
        clear: both
    }

    .itemtable_row:last-child {
        border-bottom: 1px solid var(--main-color-middle-gray)
    }

    .itemtable_header {
        display: none
    }

    .itemtable_cell {
        padding: 5px 10px;
        border: 0;
        text-align: left;
        width: 100%;
        width: calc(100% - 80px);
        width: -moz-calc(100% - 80px);
        width: -webkit-calc(100% - 80px);
        width: -o-calc(100% - 80px);
        float: right
    }

    .itemtable_cell.image_line {
        width: 80px;
        float: left
    }

    .itemtable_label {
        display: block
    }
}

.orderOptionList__image {
    width: 80px;
    padding-right: 32px
}

.orderOptionList__headline {
    font-weight: var(--main-font-weight-bold);
    font-size: 16px;
    margin-bottom: 16px
}

.orderOptionList__item {
    font-size: var(--main-font-size-base);
    font-weight: var(--main-font-weight);
    color: var(--main-color-black);
    padding: 32px;
    border: 2px solid var(--main-color-light-gray);
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    position: relative;
    cursor: pointer;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    margin-bottom: 10px
}

.orderOptionList__item input {
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    opacity: 0;
    position: absolute
}

.orderOptionList__item:hover {
    border-color: var(--main-color-primary)
}

.orderOptionList__item.selected {
    border-color: var(--main-color-primary)
}

.orderOptionList>.row>div {
    display: flex
}

.order_price_total,
.order_price_total_label {
    font-size: 16px;
    font-weight: var(--main-font-weight-bold)
}

.orderSummaryHead {
    margin-bottom: 16px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between
}

.orderSummaryHead__text {
    font-size: 1.6rem;
    font-weight: var(--main-font-weight-bold);
    color: var(--main-color-black)
}

@media (max-width:767px) {
    .order_prices_box {
        display: block
    }

    .order_prices_box .order_prices_box_left {
        width: 100%;
        border-bottom: 0
    }

    .order_prices_box .order_prices_box_right {
        width: 100%
    }
}

.checkoutButton {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--main-color-black);
    cursor: pointer;
    background: var(--main-color-light-gray);
    text-decoration: none;
    font-size: 1.2rem;
    padding: 5px 10px;
    font-weight: var(--main-font-weight-bold);
    min-height: 40px
}

@media (min-width:768px) {
    .checkoutButton {
        min-height: 50px;
        padding: 10px
    }
}

.checkoutButton:hover {
    background: var(--main-color-gray-base);
    color: var(--main-color-black) !important;
    text-decoration: none
}

.checkoutButton:active {
    background: var(--main-color-gray-base);
    color: var(--main-color-black) !important;
    text-decoration: none
}

.checkoutButton__logo {
    aspect-ratio: 1;
    width: 24px;
    height: 24px !important;
    object-fit: contain
}

.checkoutButton--amazon .amazonpay-button-inner-image {
    display: none
}

.checkoutButton--amazon .checkoutButton__text span {
    color: #f90
}

.checkoutButton--paypal .checkoutButton__text span {
    color: #179bd7
}

.shipmentAddressList {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr))
}

.spotPrices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-bottom: 70px;
    border-bottom: 1px solid var(--main-color-gray-base)
}

@media (max-width:1023px) {
    .spotPrices {
        gap: 10px;
        padding-bottom: 35px
    }
}

@media (max-width:767px) {
    .spotPrices {
        white-space: nowrap;
        overflow-x: auto;
        margin-right: -20px;
        border-bottom: none;
        padding-bottom: 20px
    }
}

.spotPriceItem {
    text-align: left;
    font-size: 1.8rem;
    min-width: 150px
}

.spotPriceItem--headline {
    line-height: 1.2;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

@media (max-width:767px) {
    .spotPriceItem--headline {
        font-size: 3.8rem;
        margin-bottom: 15px
    }
}

.spotPriceItem p {
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 5px
}

.spotPriceItem .gold {
    background: linear-gradient(90deg, #a18646 0, #be9f56 50%, #cbb278 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.spotPriceItem .silver {
    background: linear-gradient(90deg, #8b8b8b 0, #b9b9b9 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.spotPriceItem .platinum {
    background: linear-gradient(90deg, #b8b8b8 0, #d4d4d4 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.spotPriceItem .palladium {
    background: linear-gradient(90deg, #a7a7a7 0, #d0d0d0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.spotPriceItem .arrow.up {
    color: var(--main-color-success)
}

.spotPriceItem .arrow.up+span {
    color: var(--main-color-success)
}

.spotPriceItem .arrow.down {
    color: var(--main-color-danger)
}

.spotPriceItem .arrow.down+span {
    color: var(--main-color-danger)
}

.spotPriceItem .change {
    font-weight: var(--main-font-weight-bold)
}

.js-countdownButton {
    cursor: help;
    z-index: 999;
    outline: 0
}

.js-countdownButton:focus .countdownSpanWrapper .iconbarIcon__icon,
.js-countdownButton:hover .countdownSpanWrapper .iconbarIcon__icon {
    color: var(--main-color-white)
}

.js-countdownButton:focus:focus-within,
.js-countdownButton:hover:focus-within {
    outline: 1px dotted
}

@media (max-width:767px) {
    .js-countdownButton {
        position: absolute;
        right: 0;
        top: 35px
    }
}

.countdownSpanWrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--main-color-primary);
    color: var(--main-color-white);
    border-radius: 6px;
    padding: 0 10px;
    gap: 5px;
    margin-left: 10px
}

.countdownSpanWrapper .iconbarIcon__icon {
    width: 24px
}

.countdownSpanWrapper .countdownSpan {
    width: 50px;
    font-size: 1.6rem
}

@media (max-width:767px) {
    .countdownSpanWrapper {
        border-radius: 4px;
        margin-left: 0;
        margin-right: -20px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        height: 22px;
        padding-left: 6px;
        padding-right: 12px
    }

    .countdownSpanWrapper .iconbarIcon__icon {
        font-size: 14px;
        width: 14px
    }

    .countdownSpanWrapper .countdownSpan {
        width: 30px;
        font-size: 10px
    }
}

.countdownHover {
    position: absolute;
    top: 100%;
    right: -10px;
    width: 500px;
    padding: 24px;
    background: var(--main-color-white);
    border-radius: 8px;
    color: var(--main-color-black);
    text-align: left;
    font-size: 1.6rem;
    margin-top: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(25px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 1000;
    cursor: default;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1)
}

.countdownHover .h4,
.countdownHover h4 {
    font-size: 2rem;
    font-weight: var(--main-font-weight-bold)
}

.countdownHover .iconbarHover__close {
    display: flex;
    font-size: 14px;
    transition: background .2s ease;
    border-radius: 50%;
    cursor: pointer
}

.countdownHover .iconbarHover__close:hover {
    background: rgba(0, 0, 0, .05)
}

.countdownHover.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

@media (max-width:767px) {
    .countdownHover {
        margin-top: 0;
        border-radius: 0;
        width: 100%;
        position: fixed;
        right: 0;
        left: 0;
        height: auto;
        transform: translateY(0)
    }
}

.purchaseHistoryListExtendItem {
    padding-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--main-color-light-gray)
}

.purchaseHistoryListExtendItem__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.purchaseHistoryListExtendItem__headerText {
    font-weight: var(--main-font-weight-bold)
}

@media (min-width:768px) {
    .purchaseHistoryListExtendItem__headerText {
        font-size: var(--main-font-size-big)
    }
}

@media (max-width:481px) {
    .purchaseHistoryListExtendItem__headerTextDescription {
        display: flex;
        flex-direction: column
    }
}

.purchaseHistoryDetailsItem {
    border-bottom: 1px solid var(--main-color-middle-gray)
}

.purchaseHistoryDetailsItem__body,
.purchaseHistoryDetailsItem__header {
    display: grid;
    grid-template-columns: 140px 1fr 120px 100px 150px;
    gap: 20px
}

.purchaseHistoryDetailsItem__body .lineItem,
.purchaseHistoryDetailsItem__header .lineItem {
    padding: 10px 5px
}

.purchaseHistoryDetailsItem__body .lineItem.purchaseTotal,
.purchaseHistoryDetailsItem__header .lineItem.purchaseTotal {
    font-weight: var(--main-font-weight-bold)
}

.purchaseHistoryDetailsItem__header {
    font-weight: var(--main-font-weight-bold);
    font-size: 1.4rem
}

.purchaseHistoryDetailsItem__body:nth-child(odd) {
    background: var(--main-color-light-gray)
}

.purchaseHistoryDetailsItem__body .lineItem {
    display: flex;
    align-items: flex-start
}

.purchaseHistoryDetailsItem__body .lineItem.text-center {
    justify-content: center
}

.purchaseHistoryDetailsItem__body .lineItem.text-end {
    justify-content: flex-end
}

.purchaseHistoryDetailsItem__body .lineItem .lineItemLabel {
    font-weight: var(--main-font-weight-bold);
    color: var(--main-color-dark-gray);
    display: none
}

.purchaseHistoryDetailsItem__body .lineItem.purchaseQuantity {
    white-space: nowrap
}

@media (max-width:767px) {
    .purchaseHistoryDetailsItem__header {
        display: none
    }

    .purchaseHistoryDetailsItem__body {
        grid-template-columns: 1fr;
        gap: 0
    }

    .purchaseHistoryDetailsItem__body .lineItem {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        gap: 0 10px;
        text-align: right
    }

    .purchaseHistoryDetailsItem__body .lineItem .lineItemLabel {
        display: block
    }

    .purchaseHistoryDetailsItem__body .lineItem.text-center,
    .purchaseHistoryDetailsItem__body .lineItem.text-end {
        justify-content: space-between
    }

    .purchaseHistoryDetailsItem__body .lineItem>div {
        text-align: right
    }

    .purchaseHistoryDetailsItem__body .lineItem>div:empty {
        display: none
    }

    .purchaseHistoryDetailsItem__body .lineItem:empty {
        display: none
    }
}

.purchaseHistory.orderboxSummary {
    background: var(--main-color-gray-background);
    padding: 20px
}

.purchaseHistory .order_sum {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.purchaseHistory .order_row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2px 0
}

.purchaseHistory .order_sum_1 {
    flex: 1
}

.purchaseHistory .order_sum_2 {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap
}

.purchaseHistory .order_total {
    border-bottom: 4px double var(--main-color-dark-gray);
    padding-bottom: 10px
}

.disclaimer {
    font-size: 1.4rem;
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--main-color-dark-gray)
}

@media (max-width:767px) {
    .purchaseHistorySummary>.row .purchaseHistoryOrderboxSummary {
        order: -1
    }
}

.goldsavingSuccessMessage {
    background-color: var(--main-color-light-gray);
    border-radius: 24px;
    padding: 24px
}

@media (min-width:1024px) {
    .goldsavingSuccessMessage {
        padding: 48px
    }
}

.campaignBanner {
    padding: 20px 40px;
    background: var(--main-color-light-gray)
}

.campaignBannerImg {
    margin-bottom: 20px
}

.campaignBadge--icon {
    width: 50px
}

.campaignBadge--icon img {
    display: block;
    object-fit: contain;
    object-position: center
}

.campaignBadges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px
}

.promotion--campaign {
    background: var(--main-color-danger);
    color: var(--main-color-danger-contrast)
}

.promotion--campaign.promotion--clickable:hover {
    background: var(--main-color-danger-dark);
    color: var(--main-color-danger-dark-contrast)
}

.itemcard .promotionText {
    margin-bottom: 80px
}

.dcOrderSelectedBackground img {
    aspect-ratio: 100/56;
    object-fit: cover;
    width: 100%
}

.dcOrderBackgroundSelect {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
    width: 20%;
    cursor: pointer;
    position: relative;
    opacity: .7
}

.dcOrderBackgroundSelect:after,
.dcOrderBackgroundSelect:before {
    content: "";
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--main-color-white);
    position: absolute;
    right: 10px;
    top: 5px;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: 0 0 40px rgba(0, 0, 0, .08)
}

@media (max-width:767px) {

    .dcOrderBackgroundSelect:after,
    .dcOrderBackgroundSelect:before {
        right: 15px;
        width: 20px;
        height: 20px;
        font-size: 16px
    }
}

.dcOrderBackgroundSelect:after {
    content: var(--base-icon-check);
    font-family: icons, Helvetica, Arial, sans-serif;
    opacity: 0
}

.dcOrderBackgroundSelect img {
    aspect-ratio: 100/56;
    object-fit: cover;
    width: 100%
}

.dcOrderBackgroundSelect:hover {
    opacity: 1
}

.dcOrderBackgroundSelect:hover:after {
    opacity: .5
}

.dcOrderBackgroundSelect.is-active {
    opacity: 1
}

.dcOrderBackgroundSelect.is-active:after {
    opacity: 1
}

.dcOrderBackgroundSelects {
    display: flex;
    margin-left: -5px;
    margin-right: -5px
}

@media (max-width:767px) {
    .dcOrderBackgroundSelects {
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 16px;
        padding-right: 16px
    }

    .dcOrderBackgroundSelects>* {
        scroll-snap-align: center;
        flex-shrink: 0;
        width: calc(50% - 16px);
        width: -moz-calc(50% - 16px);
        width: -webkit-calc(50% - 16px);
        width: -o-calc(50% - 16px);
        padding-left: 8px;
        padding-right: 8px
    }
}

.dcOrderTags {
    justify-content: space-between
}

@media (max-width:767px) {
    .dcOrderTags {
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        flex-wrap: nowrap;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px
    }

    .dcOrderTags>* {
        scroll-snap-align: center;
        flex-shrink: 0;
        padding-left: 8px;
        padding-right: 8px
    }

    .dcOrderTags .tag {
        padding: 15px 10px
    }
}

.giftPackageElement {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: var(--main-color-black)
}

.giftPackageElement:active,
.giftPackageElement:focus,
.giftPackageElement:hover {
    color: var(--main-color-black);
    text-decoration: none
}

.giftPackageElement:active .button,
.giftPackageElement:focus .button,
.giftPackageElement:hover .button {
    background: var(--main-color-secondary-dark);
    border-color: var(--main-color-secondary-dark);
    color: var(--main-color-white)
}

.giftPackageElement:active img,
.giftPackageElement:focus img,
.giftPackageElement:hover img {
    transform: scale(1.05)
}

.giftPackageElement__image {
    background-color: var(--main-color-gray-background)
}

.giftPackageElement__image img {
    aspect-ratio: 63/59;
    object-fit: contain;
    object-position: center center;
    transition: transform .3s ease-in-out
}

.giftPackageElement__description {
    font-weight: var(--main-font-weight-bold)
}

.giftPackageElement__summary {
    margin-top: 10px
}

.giftPackageElement__content {
    flex-grow: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center
}

.giftPackageElement__addon {
    text-align: center
}

.giftPackageList {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 40px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr))
}

@media (min-width:768px) {
    .giftPackageList {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }
}

@media (min-width:1024px) {
    .giftPackageList {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }
}

@media (min-width:1250px) {
    .giftPackageList {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
    }
}

@media (min-width:1540px) {
    .giftPackageList {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
    }
}

.packageModal__image img {
    aspect-ratio: 4/3
}

.packageItemCardSummary {
    display: flex;
    align-items: center;
    gap: 16px
}

.packageItemCardSummary__description {
    font-weight: var(--main-font-weight-bold)
}

.headerLogo {
    max-width: 60px;
    flex-shrink: 0
}

@media (min-width:374px) {
    .headerLogo {
        max-width: 61px
    }
}

@media (min-width:768px) {
    .headerLogo {
        max-width: 90px
    }
}

@media (min-width:1024px) {
    .headerLogo {
        max-width: 210px
    }
}

@media (min-width:1250px) {
    .headerLogo {
        max-width: 350px
    }
}

.headerLogo a,
.headerLogo img {
    display: block;
    aspect-ratio: 350/60;
    object-fit: contain;
    object-position: left center
}

@media (max-width:1023px) {

    .headerLogo a,
    .headerLogo img {
        aspect-ratio: 61/38
    }
}

.headerTrust {
    background: var(--main-color-white);
    color: var(--main-color-primary-contrast);
    font-size: var(--main-font-size-small);
    border-bottom: 1px solid var(--main-color-gray-base)
}

.headerTrust a {
    color: var(--main-color-primary-contrast);
    text-decoration: underline
}

.headerTrust a:hover {
    color: var(--main-color-primary-dark-contrast)
}

.headerTopRight {
    display: flex;
    justify-content: flex-end;
    gap: 60px
}

.headerTop {
    background: var(--main-color-white);
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: var(--main-font-size-small);
    line-height: 20px;
    position: relative;
    z-index: 1
}

@media (min-width:1250px) {
    .headerTop {
        padding-top: 40px;
        padding-bottom: 22px
    }
}

.headerTop .container {
    max-width: 1840px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.headerTop .headerNavToggler {
    display: none;
    margin-right: 10px
}

@media (max-width:1249px) {
    .headerTop .headerNavToggler {
        display: block
    }
}

@media (min-width:768px) {
    .headerTop .headerNavToggler {
        position: absolute;
        z-index: 2
    }
}

@media (max-width:767px) {
    .headerTop .container {
        flex-wrap: wrap;
        gap: 10px
    }

    .headerTop .headerTopLeft {
        order: 99;
        flex-grow: 1;
        width: 100%
    }
}

.headerTopMiddle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 40px
}

@media (max-width:1249px) {
    .headerTopMiddle {
        top: 20px
    }
}

@media (max-width:1023px) {
    .headerTopMiddle {
        top: 5px
    }
}

@media (max-width:767px) {
    .headerTopMiddle {
        top: 10px
    }
}

.headerMain {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--main-color-white);
    position: relative;
    transition: transform .3s ease, opacity .3s ease
}

@media (min-width:768px) {
    .headerMain {
        padding-top: 0;
        padding-bottom: 15px
    }
}

@media (max-width:1249px) {
    .headerMain {
        padding: 5px
    }
}

@media (max-width:1023px) {
    .headerMain {
        padding: 0
    }
}

.headerMain>.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1840px;
    justify-content: center
}

@media (max-width:1249px) {
    .headerMain>.container {
        justify-content: flex-end
    }
}

@media (min-width:768px) {
    .headerMain>.container {
        flex-wrap: nowrap
    }
}

.headerMain .headerLogo {
    margin-right: 10px
}

@media (min-width:1024px) {
    .headerMain .headerLogo {
        margin-right: 20px
    }
}

@media (min-width:1250px) {
    .headerMain .headerLogo {
        margin-right: 40px
    }
}

@media (max-width:1249px) {
    .headerMain .headerMainNavigation {
        display: none
    }
}

.headerMain .headerCMSNavigation {
    padding-left: 30px
}

@media (max-width:1249px) {
    .headerMain .headerCMSNavigation {
        display: none
    }
}

@media (min-width:1540px) {
    .headerMain .searchBar {
        width: 380px
    }
}

.headerMain .headerSearch {
    margin-left: 10px
}

@media (min-width:1024px) {
    .headerMain .headerSearch {
        margin-left: 20px
    }
}

@media (min-width:1250px) {
    .headerMain .headerSearch {
        margin-left: 40px
    }
}

@media (max-width:1249px) {
    .headerMain .headerSearch {
        flex-grow: 1
    }
}

@media (max-width:767px) {
    .headerMain .headerSearch {
        width: 100%;
        margin-left: 0;
        order: 4;
        margin-top: 10px
    }
}

.headerMain .headerAccount {
    justify-content: flex-end;
    margin-left: 20px
}

@media (min-width:1540px) {
    .headerMain .headerAccount {
        margin-left: 40px
    }
}

@media (max-width:767px) {
    .headerMain .headerAccount {
        flex-grow: 1
    }
}

#header {
    position: relative;
    opacity: 1;
    z-index: 100;
    transition: transform .3s ease-in-out, opacity .3s ease, color .3s ease;
    will-change: transform, opacity;
    top: 0;
    width: 100%
}

#header.sticky-hidden,
#header.sticky-visible {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: var(--main-color-white) !important
}

#header.sticky-hidden>:not(.headerTrust),
#header.sticky-visible>:not(.headerTrust) {
    color: var(--main-color-black) !important;
    box-shadow: none;
    background: var(--main-color-white) !important
}

#header.sticky-hidden .mainnav li.is-active-tree>a,
#header.sticky-visible .mainnav li.is-active-tree>a {
    color: var(--main-color-black) !important
}

#header.sticky-hidden .navToggler__bar,
#header.sticky-visible .navToggler__bar {
    background-color: var(--main-color-black)
}

#header.sticky-hidden .searchBar .inputGroup__addon,
#header.sticky-hidden .searchBar input,
#header.sticky-visible .searchBar .inputGroup__addon,
#header.sticky-visible .searchBar input {
    background: 0 0;
    border-color: var(--main-color-black);
    color: var(--main-color-black)
}

#header.sticky-hidden .dynamicPlaceholders__container>.inner,
#header.sticky-visible .dynamicPlaceholders__container>.inner {
    color: var(--main-color-black)
}

#header.sticky-visible {
    transform: translateY(0);
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1)
}

#header.sticky-hidden {
    transform: translateY(-100%);
    opacity: 0
}

.footerTrust {
    background: var(--main-color-black);
    color: var(--main-color-white)
}

.footerTop {
    background: var(--main-color-light-gray);
    padding-top: 30px;
    padding-bottom: 30px
}

.footerMain .borderTop {
    border-top: 1px solid var(--main-color-black);
    padding-bottom: 130px
}

.footerMain .footerMainWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 60px
}

@media (max-width:767px) {
    .footerMain .footerMainWrapper {
        padding-bottom: 0
    }
}

.footerMain .footerMainLeft {
    max-width: 630px
}

.footerMain .footerMainRight {
    max-width: 660px;
    flex-grow: 1;
    display: flex;
    gap: 40px
}

.footerMain .footerMainRight .textcontent {
    flex-grow: 1
}

.footerBottom {
    font-size: var(--main-font-size-small);
    padding-top: 40px;
    padding-bottom: 40px;
    background: var(--main-color-secondary);
    color: var(--main-color-white)
}

.footerBottom .container {
    max-width: 1840px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column
}

.footerBottom .footerBottomTop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap
}

.footerBottom .footerBottomBottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 32px
}

.footerBottom .footerLogoWrapper {
    display: flex;
    column-gap: 140px;
    align-items: flex-end;
    flex-wrap: wrap;
    row-gap: 40px
}

.footerBottom .footerBottomLeft {
    margin-right: 10px
}

.footerBottom .footerBottomRight {
    flex-shrink: 0
}

.footerBottom .footerBottomLeft,
.footerBottom .footerBottomRight {
    margin-bottom: 40px
}

.footerBottom .nav a,
.footerBottom .nav button {
    color: var(--main-color-white)
}

.footerBottom .nav button {
    padding: 0;
    font-size: var(--main-font-size-small);
    text-decoration: none;
    font-weight: var(--main-font-weight)
}

.footerBottom .nav button:active,
.footerBottom .nav button:focus,
.footerBottom .nav button:hover {
    color: var(--main-color-primary)
}

.footerContact .textcontent>a {
    display: block;
    text-decoration: none;
    color: var(--main-color-dark-gray);
    font-weight: var(--main-font-weight-bold);
    margin-bottom: 10px
}

.footerContact .textcontent>a:active,
.footerContact .textcontent>a:focus,
.footerContact .textcontent>a:hover {
    color: var(--main-color-primary)
}

.footerContact .textcontent .contact-col-2 {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

.footerContact .textcontent .marginBottom {
    width: 50%
}

.footerContact strong {
    color: var(--main-color-dark-gray);
    font-size: 1.6rem;
    display: block;
    margin-bottom: 5px
}

@media (max-width:767px) {
    .footerBottom {
        padding-top: 32px;
        padding-bottom: 32px
    }

    .footerBottom .footerBottomLeft,
    .footerBottom .footerBottomRight {
        margin-bottom: 30px
    }
}

@media (max-width:1539px) {
    .footerMain .footerMainLeft {
        max-width: 500px
    }
}

@media (max-width:1249px) {
    .footerMain .footerMainLeft {
        max-width: 400px
    }

    .footerMain .borderTop {
        padding-bottom: 50px
    }
}

@media (max-width:1023px) {

    .footerMain .footerMainLeft,
    .footerMain .footerMainRight {
        max-width: 100%
    }
}

@media (max-width:767px) {
    .footerMain .footerMainRight {
        flex-direction: column
    }
}

.mobileMenu {
    position: fixed;
    top: 0;
    width: 0;
    max-width: 481px;
    height: 100%;
    z-index: 105;
    background: linear-gradient(0deg, #fff 86.54%, rgba(255, 255, 255, 0) 97.69%);
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    display: none;
    flex-direction: column;
    left: -500px;
    opacity: 0;
    transition: .2s ease-in-out;
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px)
}

.mobileMenu__close {
    width: 30px;
    height: 30px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    right: 0;
    top: 0
}

.mobileMenu__header {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px 40px
}

.mobileMenu__subHeader {
    margin-bottom: 10px;
    font-weight: var(--main-font-weight-bold);
    font-size: 22px !important;
    padding-top: 5px !important
}

.mobileMenu__subHeader .navigation__viewAll {
    font-size: 14px;
    font-weight: var(--main-font-weight-medium)
}

.mobileMenu__subHeader .navigation__viewAll .icon {
    font-size: 10px
}

.mobileMenu__backLink {
    all: unset;
    justify-content: flex-start !important;
    font-size: 14px !important;
    font-weight: var(--main-font-weight-bold);
    display: inline-flex !important;
    position: relative;
    padding: 15px 0
}

.mobileMenu__backLink:active,
.mobileMenu__backLink:focus,
.mobileMenu__backLink:hover {
    all: unset;
    padding: 15px 0
}

.mobileMenu__backLink:before {
    font-family: icons, Helvetica, Arial, sans-serif;
    content: var(--base-icon-angle-left-light);
    font-size: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.mobileMenu__backLink:after {
    content: "";
    display: block;
    height: 1px;
    background: var(--main-color-dark-gray);
    position: absolute;
    right: 0;
    left: 20px;
    bottom: 15px
}

.mobileMenu__seperator {
    height: 1px;
    width: 100%;
    background: var(--main-color-gray-base);
    display: block
}

.mobileMenu__navigation a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--main-color-black);
    padding: 15px 0;
    font-weight: var(--main-font-weight-bold);
    font-size: 18px
}

.mobileMenu__navigation a:active,
.mobileMenu__navigation a:focus,
.mobileMenu__navigation a:hover {
    color: var(--main-color-primary);
    text-decoration: none
}

.mobileMenu__navigation li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    border-bottom: 1px solid var(--main-color-gray-base)
}

.mobileMenu__navigation li.is-active>a,
.mobileMenu__navigation li.is-active_tree>a {
    color: var(--main-color-primary);
    font-weight: var(--main-font-weight-bold)
}

.mobileMenu__navigation li:has(> .mobileMenu__backLink) {
    border-bottom: 0
}

.mobileMenu__navigation li:has(> .mobileMenu__subHeader) {
    border-bottom: 0
}

.mobileMenu__navigation li.mobileMenu__additionalLinkItem {
    border-bottom: 0
}

.mobileMenu__navigation a.navigation__additionalLink {
    justify-content: flex-end;
    padding: 0 0 15px;
    font-size: 14px;
    font-weight: var(--main-font-weight-medium);
    color: var(--main-color-dark-gray);
    gap: 10px;
    margin-top: -15px
}

.mobileMenu__navigation a.navigation__additionalLink .icon {
    font-size: 10px
}

.mobileMenu__navigation a.navigation__additionalLink:active,
.mobileMenu__navigation a.navigation__additionalLink:focus,
.mobileMenu__navigation a.navigation__additionalLink:hover {
    color: var(--main-color-primary)
}

.mobileMenu__navigation ul {
    margin: 0;
    padding: 0 20px;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: var(--main-color-white);
    transition: .2s ease-in-out;
    opacity: 0;
    pointer-events: none
}

.mobileMenu__navigation>ul {
    left: 0;
    opacity: 1;
    pointer-events: auto;
    position: static;
    height: auto
}

.mobileMenu__navigation>ul>li>a>.navigationImage {
    display: none
}

.mobileMenu__navigation li.hasChildren>a:after {
    font-family: icons, Helvetica, Arial, sans-serif;
    content: var(--base-icon-angle-right-light);
    font-size: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.mobileMenu__navigation li.hasChildren.is-open {
    overflow: hidden
}

.mobileMenu__navigation li.hasChildren.is-open>ul {
    pointer-events: auto;
    opacity: 1;
    left: 0;
    z-index: 1;
    overflow-y: auto
}

.mobileMenu__navigation li.hasChildren.is-open>ul .groupNavigationWrapper {
    margin-bottom: 30px
}

.mobileMenu__navigation li.hasChildren.is-open>ul .groupNavigationWrapper>.groupNavigation {
    border-bottom: 0
}

.mobileMenu__navigation li.hasChildren.is-open>ul .groupNavigationWrapper>.groupNavigation>ul {
    pointer-events: auto;
    opacity: 1;
    left: 0;
    z-index: 1;
    position: relative;
    height: auto;
    padding: 0
}

.mobileMenu__navigation li.hasChildren.is-open>ul .groupNavigationWrapper>.groupNavigation>ul>li {
    border-bottom: 0
}

.mobileMenu__navigation li.hasChildren.is-open>ul .groupNavigationWrapper>.groupNavigation>ul>li a {
    padding: 8px 0;
    font-weight: var(--main-font-weight)
}

.mobileMenu__navigation li.hasChildren.is-open>ul .groupNavigationWrapper .groupNavigationTitle {
    margin-bottom: 10px;
    font-weight: 600
}

.mobileMenu__navigation--cms .textcontent>ul {
    left: 0;
    opacity: 1;
    pointer-events: auto;
    position: static;
    height: auto
}

.mobileMenu__navigation--cms li.level_3>a {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start
}

.mobileMenu__navigation--cms li.level_3>a .navigationName {
    min-height: auto
}

.mobileMenu__navigation--cms li.level_3>a .navigationImage {
    display: none
}

.mobileMenu__section {
    border-top: 1px solid var(--main-color-gray-base);
    padding: 30px 20px 30px 30px
}

.mobileMenu__content>a {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start
}

.mobileMenu__content>a .categoryIcon {
    width: 240px;
    aspect-ratio: 1;
    border-radius: 8px
}

.mobileMenu__body {
    position: relative;
    overflow: hidden;
    max-height: calc(100vh - 85px);
    max-height: calc(100dvh - 85px);
    max-height: calc(100svh - 85px);
    overflow-y: auto;
    padding: 0;
    width: 100%;
    flex-grow: 1
}

.mobileMenu__body:has(li.hasChildren.is-open) {
    max-height: none;
    overflow-y: hidden
}

.mobileMenu.is-open {
    left: 0;
    opacity: 1;
    pointer-events: auto;
    display: flex;
    width: 100%
}

.mobileMenu .searchBar--small {
    max-width: none
}

body.is-mobilemenuopen {
    overflow: hidden
}

body:has(.headerTrust) .mobileMenu__header {
    padding: 52px 20px 40px
}

@media print {
    a[href]:after {
        content: none !important
    }
}
/* Copy Merchants — win-rate badge tiers (green = high, yellow = good; no bad tier) */
.promotion.promotion--winHigh {
    border-color: var(--main-color-success);
    color: var(--main-color-success);
    background: var(--main-color-primary-light)
}

.promotion.promotion--winGood {
    border-color: var(--main-color-warning-dark);
    color: var(--main-color-warning-dark);
    background: var(--main-color-primary-light)
}

/* Copy Merchants — supporting figures */
.merchantWins {
    display: inline-block;
    margin-left: 10px;
    color: var(--main-color-success);
    font-weight: var(--main-font-weight-medium);
    white-space: nowrap
}

.merchantRegion {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    opacity: .7
}