/* input(31176,25): run-time error CSS1036: Expected expression, found '$' */ @charset "UTF-8"; @font-face { font-family: "IQOS"; src: url("/styles/fonts/IQOS-Light.eot?v=qppCnYqtHOdXUbagLVDSTrgzvpM"); src: url("/styles/fonts/IQOS-Light.eot?v=qppCnYqtHOdXUbagLVDSTrgzvpM&#iefix") format("embedded-opentype"), url("/styles/fonts/IQOS-Light.woff2?v=rjU_G3HOBn3lgT5TgE6qrmKaHYs") format("woff2"), url("/styles/fonts/IQOS-Light.woff?v=UvzbfOXRHlAqizGGOGZ7zddn6FM") format("woff"), url("/styles/fonts/IQOS-Light.ttf?v=JL-FCfLCuSpyWHOE8lPyz5uFE9s") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS"; src: url("/styles/fonts/IQOS-Bold.eot?v=qnMccEYAtpOCqncU5LiITPe4syM"); src: url("/styles/fonts/IQOS-Bold.eot?v=qnMccEYAtpOCqncU5LiITPe4syM&#iefix") format("embedded-opentype"), url("/styles/fonts/IQOS-Bold.woff2?v=K7j1AnErqH2kE98k46RwI_0jkd4") format("woff2"), url("/styles/fonts/IQOS-Bold.woff?v=NGV2HLfGC32Ghjj0PTwuZx7qFsM") format("woff"), url("/styles/fonts/IQOS-Bold.ttf?v=jHMjk9mjo9q7NVkxO8Zhkh2zs2o") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS"; src: url("/styles/fonts/IQOS-Regular.eot?v=TttrPZWcoVNBEWdup-gcTGwvgR8"); src: url("/styles/fonts/IQOS-Regular.eot?v=TttrPZWcoVNBEWdup-gcTGwvgR8&#iefix") format("embedded-opentype"), url("/styles/fonts/IQOS-Regular.woff2?v=a4Xh9zoCJdeF34wzlSdsEBeg_l4") format("woff2"), url("/styles/fonts/IQOS-Regular.woff?v=BQEsx5co-GeI8-KqmrJIafmwuSw") format("woff"), url("/styles/fonts/IQOS-Regular.ttf?v=QPVp-AwRCAS5Xts-lLvH0S29HjY") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS AR"; src: url("/styles/fonts/ar/IQOSSansArabic-Light.eot?v=Sbe0niXxDLV67r6VA2OwG0o-wls"); src: url("/styles/fonts/ar/IQOSSansArabic-Light.eot?v=Sbe0niXxDLV67r6VA2OwG0o-wls&#iefix") format("embedded-opentype"), url("/styles/fonts/ar/IQOSSansArabic-Light.woff2?v=jnzoVAzCXsvBmJ_zKh8yIUZeUZ4") format("woff2"), url("/styles/fonts/ar/IQOSSansArabic-Light.woff?v=_281RlRucHUBbJqvaKnepXISMIQ") format("woff"), url("/styles/fonts/ar/IQOSSansArabic-Light.ttf?v=dkRrIZOluMaEZCcQKlOSU8AVqmE") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS AR"; src: url("/styles/fonts/ar/IQOSSansArabic-Bold.eot?v=uWyanSLZPP0LnI3MiKjACT3tN9I"); src: url("/styles/fonts/ar/IQOSSansArabic-Bold.eot?v=uWyanSLZPP0LnI3MiKjACT3tN9I&#iefix") format("embedded-opentype"), url("/styles/fonts/ar/IQOSSansArabic-Bold.woff2?v=Y0_nlfnFc89Ehfvv3BJ4EYZSni8") format("woff2"), url("/styles/fonts/ar/IQOSSansArabic-Bold.woff?v=qptu7NupusLeV0k9BbtHuF4rWN8") format("woff"), url("/styles/fonts/ar/IQOSSansArabic-Bold.ttf?v=_Eu4o6SWi4GSRvgt8w_vflthROQ") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS AR"; src: url("/styles/fonts/ar/IQOSSansArabic-Regular.eot?v=3osA6w6_r3BWc6q6sFsaxWOt0Jc"); src: url("/styles/fonts/ar/IQOSSansArabic-Regular.eot?v=3osA6w6_r3BWc6q6sFsaxWOt0Jc&#iefix") format("embedded-opentype"), url("/styles/fonts/ar/IQOSSansArabic-Regular.woff2?v=WOX7J2meVv70fPqvalOiQdnKgk8") format("woff2"), url("/styles/fonts/ar/IQOSSansArabic-Regular.woff?v=CW1JRIWxhvzz1kwNQ6zYG5eTnHc") format("woff"), url("/styles/fonts/ar/IQOSSansArabic-Regular.ttf?v=3osA6w6_r3BWc6q6sFsaxWOt0Jc") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } :root { --default-text-color: var(--current-text-color, #34303d); --default-text-color-inverse: var(--current-text-color-inverse, white); --default-current-color: var(--current-color, #00d1d2); } :root { --container-gutter-x: 20px; --container-width: calc(100vw - var(--container-gutter-x)); } @media (min-width: 400px) { :root { --container-gutter-x: 20px; } } @media (min-width: 768px) { :root { --container-width: calc(720px - var(--container-gutter-x)); --container-gutter-x: 16px; } } @media (min-width: 992px) { :root { --container-width: calc(960px - var(--container-gutter-x)); } } @media (min-width: 1200px) { :root { --container-width: calc(1140px - var(--container-gutter-x)); } } @media (min-width: 1400px) { :root { --container-width: calc( calc(1324px + var(--container-gutter-x)) - var(--container-gutter-x) ); } } :root { --container-flex-direction: row; --container-flex-direction-inverse: row-reverse; --arrow-direction: 0deg; --flip-value: 1; } /* General Mixins & Functions */ sup { top: 0.5em; } ol, ul { padding-left: 0px; } li { list-style: none; } a { text-decoration: none; } a[href=""] { pointer-events: none; } .mainBodyWrapper { padding-top: 55px; } .container { width: 100%; padding-inline: var(--container-gutter-x); margin-inline: auto; } @media (min-width: 576px) { .container { max-width: unset; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: calc(1324px + var(--container-gutter-x)); } } @media (min-width: 1400px) { .container-fluid:not(.container) { padding-inline: calc(var(--container-gutter-x) * 2); } } .container-fluid.no-container { padding-inline: 0; max-width: unset; } .force-container-fluid { max-width: unset; padding-inline: calc(var(--container-gutter-x) * 2); } .no-container > :is(.container, .container-fluid) { padding-inline: 0; max-width: unset; } .force-no-container :is(.container, .container-fluid) { padding-inline: 0 !important; max-width: unset !important; } .section-container { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container { --section-pt: calc(50px / 2); --section-pb: calc(50px / 2); } } .section-container.pb-0 { --section-pb: 0px !important; } .section-container.pt-0 { --section-pt: 0px !important; } .section-container.py-0 { --section-pt: 0px !important; --section-pb: 0px !important; } .section-container:has(.disable-section-container) { --section-pt: 0px !important; --section-pb: 0px !important; } .section-container-top { position: relative; z-index: 2; --section-pt: calc(100px / 2); padding-top: var(--section-pt); } @media (max-width: 768px) { .section-container-top { --section-pt: calc(50px / 2); } } .section-container-bottom { position: relative; z-index: 2; --section-pb: calc(100px / 2); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom { --section-pb: calc(50px / 2); } } .section-container-xl { position: relative; z-index: 2; --section-pt: 100px; --section-pb: 100px; padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-xl { --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); } } .section-container-lg { position: relative; z-index: 2; --section-pt: calc(100px - 20px); --section-pb: calc(100px - 20px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-lg { --section-pt: calc(100px / 2); --section-pb: calc(100px / 2); } } .section-container-md { position: relative; z-index: 2; --section-pt: calc(100px / 2); --section-pb: calc(100px / 2); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-md { --section-pt: calc(100px / 2); --section-pb: calc(100px / 2); } } .section-container-sm { position: relative; z-index: 2; --section-pt: calc(100px / 2); --section-pb: calc(100px / 2); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-sm { --section-pt: calc(100px / 3); --section-pb: calc(100px / 3); } } .section-container-top-xl { position: relative; z-index: 2; --section-pt: calc(100px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-top-xl { position: relative; z-index: 2; --section-pt: calc(calc(100px * 0.5)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-bottom-xl { position: relative; z-index: 2; --section-pb: calc(100px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom-xl { position: relative; z-index: 2; --section-pb: calc(calc(100px * 0.5)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-top-lg { position: relative; z-index: 2; --section-pt: calc(calc(100px - 20px)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-top-lg { position: relative; z-index: 2; --section-pt: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-bottom-lg { position: relative; z-index: 2; --section-pb: calc(calc(100px - 20px)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom-lg { position: relative; z-index: 2; --section-pb: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-top-md { position: relative; z-index: 2; --section-pt: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-top-md { position: relative; z-index: 2; --section-pt: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-bottom-md { position: relative; z-index: 2; --section-pb: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom-md { position: relative; z-index: 2; --section-pb: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-top-sm { position: relative; z-index: 2; --section-pt: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-top-sm { position: relative; z-index: 2; --section-pt: calc(calc(100px / 3)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-bottom-sm { position: relative; z-index: 2; --section-pb: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom-sm { position: relative; z-index: 2; --section-pb: calc(calc(100px / 3)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .max-w-200 { max-width: 200px !important; } .max-w-300 { max-width: 300px !important; } .max-w-400 { max-width: 400px !important; } .max-w-500 { max-width: 500px !important; } .max-w-600 { max-width: 600px !important; } .max-w-700 { max-width: 700px !important; } .max-w-800 { max-width: 800px !important; } .max-w-900 { max-width: 900px !important; } .max-w-1000 { max-width: 1000px !important; } .max-w-1100 { max-width: 1100px !important; } .max-w-1200 { max-width: 1200px !important; } [class^=max-w].center { margin-inline: auto; } .reverse { --container-flex-direction: row-reverse; --container-flex-direction-inverse: row; } @media (max-width: 992px) { .reverse-mobile { --container-flex-direction: column-reverse; } } .split-page { position: relative; flex-direction: var(--container-flex-direction); --page-gap: 40px; --gap: var(--page-gap); --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .split-page:where(ul, ol) { margin-bottom: 0; } .split-page > .col, .split-page > .col:is(:first-child, :last-child), .split-page > .listingItemDIV { flex: unset; width: var(--col-width); } @media (min-width: 992px) { .split-page.split-3-9 { display: flex; flex-wrap: wrap; --gap: var(--page-gap); gap: var(--gap); } .split-page.split-3-9:where(ul, ol) { margin-bottom: 0; } .split-page.split-3-9 > .col, .split-page.split-3-9 > .listingItemDIV { flex: unset; } .split-page.split-3-9 > .col:where(:nth-child(odd)), .split-page.split-3-9 > .listingItemDIV:where(:nth-child(odd)) { width: calc(35% - var(--gap) / 2); } .split-page.split-3-9 > .col:where(:nth-child(even)), .split-page.split-3-9 > .listingItemDIV:where(:nth-child(even)) { width: calc(65% - var(--gap) / 2); } } @media (min-width: 1200px) { .split-page.split-3-9 { display: flex; flex-wrap: wrap; --gap: var(--page-gap); gap: var(--gap); } .split-page.split-3-9:where(ul, ol) { margin-bottom: 0; } .split-page.split-3-9 > .col, .split-page.split-3-9 > .listingItemDIV { flex: unset; } .split-page.split-3-9 > .col:where(:nth-child(odd)), .split-page.split-3-9 > .listingItemDIV:where(:nth-child(odd)) { width: calc(25% - var(--gap) / 2); } .split-page.split-3-9 > .col:where(:nth-child(even)), .split-page.split-3-9 > .listingItemDIV:where(:nth-child(even)) { width: calc(75% - var(--gap) / 2); } } @media (min-width: 992px) { .split-page.split-4-8 { display: flex; flex-wrap: wrap; --gap: var(--page-gap); gap: var(--gap); } .split-page.split-4-8:where(ul, ol) { margin-bottom: 0; } .split-page.split-4-8 > .col, .split-page.split-4-8 > .listingItemDIV { flex: unset; } .split-page.split-4-8 > .col:where(:nth-child(odd)), .split-page.split-4-8 > .listingItemDIV:where(:nth-child(odd)) { width: calc(40% - var(--gap) / 2); } .split-page.split-4-8 > .col:where(:nth-child(even)), .split-page.split-4-8 > .listingItemDIV:where(:nth-child(even)) { width: calc(60% - var(--gap) / 2); } } @media (min-width: 1200px) { .split-page.split-4-8 { display: flex; flex-wrap: wrap; --gap: var(--page-gap); gap: var(--gap); } .split-page.split-4-8:where(ul, ol) { margin-bottom: 0; } .split-page.split-4-8 > .col, .split-page.split-4-8 > .listingItemDIV { flex: unset; } .split-page.split-4-8 > .col:where(:nth-child(odd)), .split-page.split-4-8 > .listingItemDIV:where(:nth-child(odd)) { width: calc(30% - var(--gap) / 2); } .split-page.split-4-8 > .col:where(:nth-child(even)), .split-page.split-4-8 > .listingItemDIV:where(:nth-child(even)) { width: calc(70% - var(--gap) / 2); } } .primary { --current-color: #00d1d2; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.primary .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.primary .button-primary:empty { display: none; } .background-colored.primary .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .gray-dark { --current-color: #34303d; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.gray-dark .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.gray-dark .button-primary:empty { display: none; } .background-colored.gray-dark .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .gray-light { --current-color: #f6f4f0; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .classic-red { --current-color: #A7312F; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.classic-red .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.classic-red .button-primary:empty { display: none; } .background-colored.classic-red .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .amber { --current-color: #E88147; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.amber .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.amber .button-primary:empty { display: none; } .background-colored.amber .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .nice-blue { --current-color: #207CA9; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.nice-blue .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.nice-blue .button-primary:empty { display: none; } .background-colored.nice-blue .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .white { --current-color: white; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .terea-sienna { --current-color: #D4302F; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-sienna .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-sienna .button-primary:empty { display: none; } .background-colored.terea-sienna .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-amber { --current-color: #C24213; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-amber .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-amber .button-primary:empty { display: none; } .background-colored.terea-amber .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-silver { --current-color: #808183; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-silver .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-silver .button-primary:empty { display: none; } .background-colored.terea-silver .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-turquoise { --current-color: #119FAD; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-turquoise .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-turquoise .button-primary:empty { display: none; } .background-colored.terea-turquoise .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-purple { --current-color: #8255B2; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-purple .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-purple .button-primary:empty { display: none; } .background-colored.terea-purple .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-yellow { --current-color: #EAB108; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.terea-yellow .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-yellow .button-primary:empty { display: none; } .background-colored.terea-yellow .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-arbor { --current-color: #049218; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-arbor .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-arbor .button-primary:empty { display: none; } .background-colored.terea-arbor .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-beige { --current-color: #bf9f85; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.terea-beige .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-beige .button-primary:empty { display: none; } .background-colored.terea-beige .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-oasis { --current-color: #b1269e; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-oasis .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-oasis .button-primary:empty { display: none; } .background-colored.terea-oasis .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-summer { --current-color: #ec7253; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-summer .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-summer .button-primary:empty { display: none; } .background-colored.terea-summer .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-sun { --current-color: #ac3223; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-sun .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-sun .button-primary:empty { display: none; } .background-colored.terea-sun .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .sky-blue { --current-color: #00C1FF; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.sky-blue .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.sky-blue .button-primary:empty { display: none; } .background-colored.sky-blue .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .cyan { --current-color: #1BD9C5; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.cyan .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.cyan .button-primary:empty { display: none; } .background-colored.cyan .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .purple { --current-color: #2d008b; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.purple .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.purple .button-primary:empty { display: none; } .background-colored.purple .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .delia-gold { --current-color: #C2A37C; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.delia-gold .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.delia-gold .button-primary:empty { display: none; } .background-colored.delia-gold .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .delia-silver { --current-color: #A0A1AA; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.delia-silver .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.delia-silver .button-primary:empty { display: none; } .background-colored.delia-silver .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .delia-red { --current-color: #A6312F; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.delia-red .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.delia-red .button-primary:empty { display: none; } .background-colored.delia-red .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .delia-green { --current-color: #4DA793; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.delia-green .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.delia-green .button-primary:empty { display: none; } .background-colored.delia-green .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .zyn-navy { --current-color: #00166f; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.zyn-navy .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.zyn-navy .button-primary:empty { display: none; } .background-colored.zyn-navy .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .background-light { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #f6f4f0; margin-top: -1px; position: relative; } .background-light::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .background-light.half-bg::before { height: 50%; } .background-light > * { isolation: isolate; } .background-primary { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #00d1d2; position: relative; } .background-primary::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .background-primary.half-bg::before { height: 50%; } .background-primary > * { isolation: isolate; } .background-colored { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: var(--current-color, transparent); --default-text-color: var(--text-color, inherit); --default-text-color-inverse: var(--current-text-color-inverse, inherit); color: var(--text-color, inherit); position: relative; } .background-colored::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .background-colored.half-bg::before { height: 50%; } .background-colored > * { isolation: isolate; } .background-colored.variable-color { --color-section-background: var(--variable-color); } .background-colored.white { --section-pt: 0; --section-pb: 0; } .background-white { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: var(--current-color, transparent); --default-text-color: var(--text-color, inherit); --default-text-color-inverse: var(--current-text-color-inverse, inherit); color: var(--text-color, inherit); position: relative; } .background-white::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .background-white.half-bg::before { height: 50%; } .background-white > * { isolation: isolate; } .background-white { --current-color: white; --text-color: #34303d; --color-section-background: var(--current-color, transparent); --default-text-color: var(--text-color, inherit); --default-text-color-inverse: var(--current-text-color-inverse, inherit); color: var(--text-color, inherit); } .theme-dark { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #27242d; --default-text-color: white; --default-text-color-inverse: #34303d; color: var(--default-text-color); margin-top: -1px; position: relative; } .theme-dark::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .theme-dark.half-bg::before { height: 50%; } .theme-dark > * { isolation: isolate; } .theme-black { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: black; --default-text-color: white; --default-text-color-inverse: #34303d; color: var(--default-text-color); margin-top: -1px; position: relative; } .theme-black::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .theme-black.half-bg::before { height: 50%; } .theme-black > * { isolation: isolate; } .theme-light { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: white; position: relative; } .theme-light::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .theme-light.half-bg::before { height: 50%; } .theme-light > * { isolation: isolate; } .mt-0 { margin-top: 0px !important; } .mb-0 { margin-bottom: 0px !important; } .pt-0 { padding-top: 0px !important; } .pb-0 { padding-bottom: 0px !important; } @media (min-width: 768px) { .mt-md-0 { margin-top: 0px !important; } .mb-md-0 { margin-bottom: 0px !important; } .pt-md-0 { padding-top: 0px !important; } .pb-md-0 { padding-bottom: 0px !important; } } @media (min-width: 992px) { .mt-lg-0 { margin-top: 0px !important; } .mb-lg-0 { margin-bottom: 0px !important; } .pt-lg-0 { padding-top: 0px !important; } .pb-lg-0 { padding-bottom: 0px !important; } } .mt-10 { margin-top: 10px !important; } .mb-10 { margin-bottom: 10px !important; } .pt-10 { padding-top: 10px !important; } .pb-10 { padding-bottom: 10px !important; } @media (min-width: 768px) { .mt-md-10 { margin-top: 10px !important; } .mb-md-10 { margin-bottom: 10px !important; } .pt-md-10 { padding-top: 10px !important; } .pb-md-10 { padding-bottom: 10px !important; } } @media (min-width: 992px) { .mt-lg-10 { margin-top: 10px !important; } .mb-lg-10 { margin-bottom: 10px !important; } .pt-lg-10 { padding-top: 10px !important; } .pb-lg-10 { padding-bottom: 10px !important; } } .mt-20 { margin-top: 20px !important; } .mb-20 { margin-bottom: 20px !important; } .pt-20 { padding-top: 20px !important; } .pb-20 { padding-bottom: 20px !important; } @media (min-width: 768px) { .mt-md-20 { margin-top: 20px !important; } .mb-md-20 { margin-bottom: 20px !important; } .pt-md-20 { padding-top: 20px !important; } .pb-md-20 { padding-bottom: 20px !important; } } @media (min-width: 992px) { .mt-lg-20 { margin-top: 20px !important; } .mb-lg-20 { margin-bottom: 20px !important; } .pt-lg-20 { padding-top: 20px !important; } .pb-lg-20 { padding-bottom: 20px !important; } } .mt-30 { margin-top: 30px !important; } .mb-30 { margin-bottom: 30px !important; } .pt-30 { padding-top: 30px !important; } .pb-30 { padding-bottom: 30px !important; } @media (min-width: 768px) { .mt-md-30 { margin-top: 30px !important; } .mb-md-30 { margin-bottom: 30px !important; } .pt-md-30 { padding-top: 30px !important; } .pb-md-30 { padding-bottom: 30px !important; } } @media (min-width: 992px) { .mt-lg-30 { margin-top: 30px !important; } .mb-lg-30 { margin-bottom: 30px !important; } .pt-lg-30 { padding-top: 30px !important; } .pb-lg-30 { padding-bottom: 30px !important; } } .mt-40 { margin-top: 40px !important; } .mb-40 { margin-bottom: 40px !important; } .pt-40 { padding-top: 40px !important; } .pb-40 { padding-bottom: 40px !important; } @media (min-width: 768px) { .mt-md-40 { margin-top: 40px !important; } .mb-md-40 { margin-bottom: 40px !important; } .pt-md-40 { padding-top: 40px !important; } .pb-md-40 { padding-bottom: 40px !important; } } @media (min-width: 992px) { .mt-lg-40 { margin-top: 40px !important; } .mb-lg-40 { margin-bottom: 40px !important; } .pt-lg-40 { padding-top: 40px !important; } .pb-lg-40 { padding-bottom: 40px !important; } } .mt-50 { margin-top: 50px !important; } .mb-50 { margin-bottom: 50px !important; } .pt-50 { padding-top: 50px !important; } .pb-50 { padding-bottom: 50px !important; } @media (min-width: 768px) { .mt-md-50 { margin-top: 50px !important; } .mb-md-50 { margin-bottom: 50px !important; } .pt-md-50 { padding-top: 50px !important; } .pb-md-50 { padding-bottom: 50px !important; } } @media (min-width: 992px) { .mt-lg-50 { margin-top: 50px !important; } .mb-lg-50 { margin-bottom: 50px !important; } .pt-lg-50 { padding-top: 50px !important; } .pb-lg-50 { padding-bottom: 50px !important; } } .mt-60 { margin-top: 60px !important; } .mb-60 { margin-bottom: 60px !important; } .pt-60 { padding-top: 60px !important; } .pb-60 { padding-bottom: 60px !important; } @media (min-width: 768px) { .mt-md-60 { margin-top: 60px !important; } .mb-md-60 { margin-bottom: 60px !important; } .pt-md-60 { padding-top: 60px !important; } .pb-md-60 { padding-bottom: 60px !important; } } @media (min-width: 992px) { .mt-lg-60 { margin-top: 60px !important; } .mb-lg-60 { margin-bottom: 60px !important; } .pt-lg-60 { padding-top: 60px !important; } .pb-lg-60 { padding-bottom: 60px !important; } } .mt-70 { margin-top: 70px !important; } .mb-70 { margin-bottom: 70px !important; } .pt-70 { padding-top: 70px !important; } .pb-70 { padding-bottom: 70px !important; } @media (min-width: 768px) { .mt-md-70 { margin-top: 70px !important; } .mb-md-70 { margin-bottom: 70px !important; } .pt-md-70 { padding-top: 70px !important; } .pb-md-70 { padding-bottom: 70px !important; } } @media (min-width: 992px) { .mt-lg-70 { margin-top: 70px !important; } .mb-lg-70 { margin-bottom: 70px !important; } .pt-lg-70 { padding-top: 70px !important; } .pb-lg-70 { padding-bottom: 70px !important; } } .mt-80 { margin-top: 80px !important; } .mb-80 { margin-bottom: 80px !important; } .pt-80 { padding-top: 80px !important; } .pb-80 { padding-bottom: 80px !important; } @media (min-width: 768px) { .mt-md-80 { margin-top: 80px !important; } .mb-md-80 { margin-bottom: 80px !important; } .pt-md-80 { padding-top: 80px !important; } .pb-md-80 { padding-bottom: 80px !important; } } @media (min-width: 992px) { .mt-lg-80 { margin-top: 80px !important; } .mb-lg-80 { margin-bottom: 80px !important; } .pt-lg-80 { padding-top: 80px !important; } .pb-lg-80 { padding-bottom: 80px !important; } } .mt-90 { margin-top: 90px !important; } .mb-90 { margin-bottom: 90px !important; } .pt-90 { padding-top: 90px !important; } .pb-90 { padding-bottom: 90px !important; } @media (min-width: 768px) { .mt-md-90 { margin-top: 90px !important; } .mb-md-90 { margin-bottom: 90px !important; } .pt-md-90 { padding-top: 90px !important; } .pb-md-90 { padding-bottom: 90px !important; } } @media (min-width: 992px) { .mt-lg-90 { margin-top: 90px !important; } .mb-lg-90 { margin-bottom: 90px !important; } .pt-lg-90 { padding-top: 90px !important; } .pb-lg-90 { padding-bottom: 90px !important; } } .mt-100 { margin-top: 100px !important; } .mb-100 { margin-bottom: 100px !important; } .pt-100 { padding-top: 100px !important; } .pb-100 { padding-bottom: 100px !important; } @media (min-width: 768px) { .mt-md-100 { margin-top: 100px !important; } .mb-md-100 { margin-bottom: 100px !important; } .pt-md-100 { padding-top: 100px !important; } .pb-md-100 { padding-bottom: 100px !important; } } @media (min-width: 992px) { .mt-lg-100 { margin-top: 100px !important; } .mb-lg-100 { margin-bottom: 100px !important; } .pt-lg-100 { padding-top: 100px !important; } .pb-lg-100 { padding-bottom: 100px !important; } } [class^=button].center { margin-inline: auto; width: fit-content; } .button-primary, .viewAll { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-primary:empty, .viewAll:empty { display: none; } .button-primary:hover, .viewAll:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-primary.white, .viewAll.white { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-primary.white:empty, .viewAll.white:empty { display: none; } .button-primary.white:hover, .viewAll.white:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-primary.white, .viewAll.white { --color: white; --background-color: transparent; --border-color: white; --hover-color: #34303d; --hover-background-color: white; --hover-border-color: white; } .button-primary.hover-primary, .viewAll.hover-primary { --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } .button-primary-filled { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-primary-filled:empty { display: none; } .button-primary-filled:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-primary-filled { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .button-primary-filled.white { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-primary-filled.white:empty { display: none; } .button-primary-filled.white:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-primary-filled.white { --color: #34303d; --background-color: white; --border-color: white; --hover-color: white; --hover-background-color: #34303d; --hover-border-color: #34303d; } .button-primary-filled.hover-primary { --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } .button-zyn { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-zyn:empty { display: none; } .button-zyn:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-zyn { --color: white; --background-color: #00166f; --border-color: #00166f; --hover-color: #00166f; --hover-background-color: white; --hover-border-color: white; border-radius: 100px; } .button-arrow { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .button-arrow:empty { display: none; } .button-arrow::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .button-arrow:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .viewAll-arrow .viewAll { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .viewAll-arrow .viewAll:empty { display: none; } .viewAll-arrow .viewAll::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .viewAll-arrow .viewAll:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .button-back { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; width: fit-content; border: none; background-color: transparent; } .button-back::before { content: ""; display: block; width: 15px; height: 15px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scaleX(var(--flip-value)); transition: all 0.6s ease; } .button-back:hover::before { translate: calc(-8px * var(--flip-value)) 0; background-color: #00d1d2; } .button-back { padding: 0 !important; } .badge { display: inline-flex; background-color: #00d1d2; color: #34303d; font-weight: 400; font-size: 16px; } .button-underlined { color: var(--default-text-color); font-size: 16px; text-decoration: underline; cursor: pointer; transition: all 0.6s ease; border: none; background-color: transparent; } .button-underlined:hover { color: #00d1d2; } .addButton { color: #34303d; font-size: 16px; display: flex; align-items: center; gap: 3px; } .addButton::before { content: ""; background-image: url(/images/add-button.svg?v=rxOazbALAu1Iv9EGSW5jdpLdX78); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 15px; height: 15px; display: block; transition: all 0.6s ease; } .addButton:hover::before { filter: brightness(0) saturate(100%) invert(57%) sepia(59%) saturate(1421%) hue-rotate(136deg) brightness(98%) contrast(104%); } .backLink, .backButton { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; width: fit-content; border: none; background-color: transparent; } .backLink::before, .backButton::before { content: ""; display: block; width: 15px; height: 15px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scaleX(var(--flip-value)); transition: all 0.6s ease; } .backLink:hover::before, .backButton:hover::before { translate: calc(-8px * var(--flip-value)) 0; background-color: #00d1d2; } .backLink, .backButton { padding: 0 !important; } .arrowLink, .linkArrow { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .arrowLink:empty, .linkArrow:empty { display: none; } .arrowLink::after, .linkArrow::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .arrowLink:hover::after, .linkArrow:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .arrowLink.white, .linkArrow.white { color: #ffffff; } .arrowLink.white::after, .linkArrow.white::after { filter: brightness(0) invert(1); } .arrowLink.white:hover::after, .linkArrow.white:hover::after { filter: brightness(0) saturate(100%) invert(57%) sepia(59%) saturate(1421%) hue-rotate(136deg) brightness(98%) contrast(104%); } .button-anchor { display: inline-flex; font-size: 16px; text-decoration: underline; transition: all 0.6s ease; } .button-anchor:hover { color: #00d1d2; } .force-filled-btn :is([class^=button-], .viewAll):not(.button-arrow) { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .force-filled-btn :is([class^=button-], .viewAll):not(.button-arrow):empty { display: none; } .force-filled-btn :is([class^=button-], .viewAll):not(.button-arrow):hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .force-filled-btn :is([class^=button-], .viewAll):not(.button-arrow) { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .force-outline-btn :is([class^=button-], .viewAll):not(.button-arrow) { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .force-outline-btn :is([class^=button-], .viewAll):not(.button-arrow):empty { display: none; } .force-outline-btn :is([class^=button-], .viewAll):not(.button-arrow):hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .force-arrow-btn :is([class^=button-], .viewAll) { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .force-arrow-btn :is([class^=button-], .viewAll):empty { display: none; } .force-arrow-btn :is([class^=button-], .viewAll)::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .force-arrow-btn :is([class^=button-], .viewAll):hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .button-bottom-container { display: flex; justify-content: center; margin-top: 40px; gap: 20px; } .button-bottom-container.filled [class^=button-], .button-bottom-container.filled a { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-bottom-container.filled [class^=button-]:empty, .button-bottom-container.filled a:empty { display: none; } .button-bottom-container.filled [class^=button-]:hover, .button-bottom-container.filled a:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-bottom-container.filled [class^=button-], .button-bottom-container.filled a { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .button-bottom-container.column { flex-direction: column; align-items: center; } .button-bottom-container.start { justify-content: start; } .buttons-container { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .buttons-container:not(:has(a:not(:empty))), .buttons-container:empty { display: none; } .buttons-container.center { justify-content: center; } .buttons-container.end { justify-content: end; } .buttons-column .buttons-container, .buttons-column.buttons-container { flex-direction: column; align-items: start; width: 100%; } .support-button { position: relative; background-color: transparent; border: none; padding: 16px; padding-bottom: 42px; display: block; } .support-button::before { content: ""; position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 16px; aspect-ratio: 1; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-text-color); } .support-button h3 { margin-bottom: 16px; font-weight: 600; } .badge { opacity: 0; } .badge.New { opacity: 1; } .badge-d-none { opacity: 0; display: none; } .badge-d-none.New { opacity: 1; display: inline; } a:is([href*=cmsitemLink]) { cursor: auto; pointer-events: none; } h1, h2, h3, h4, h5, h6 { color: var(--default-text-color); } .titleH1 { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .titleH1.regular { font-weight: 400; } .title-h1 { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .title-h1.regular { font-weight: 400; } .titles-container h1.title { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .titles-container h1.title.regular { font-weight: 400; } .force-h1-title.force-h1-title.force-h1-title [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .force-h1-title.force-h1-title.force-h1-title [class^=title]:not(.titles-container).regular { font-weight: 400; } .make-title-h1 [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .make-title-h1 [class^=title]:not(.titles-container).regular { font-weight: 400; } .force-small-title [class^=title] { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); } .titleH2 { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .titleH2.regular { font-weight: 400; } .title-h2 { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .title-h2.regular { font-weight: 400; } .titles-container h2.title { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .titles-container h2.title.regular { font-weight: 400; } .force-h2-title.force-h2-title.force-h2-title [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .force-h2-title.force-h2-title.force-h2-title [class^=title]:not(.titles-container).regular { font-weight: 400; } .make-title-h2 [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .make-title-h2 [class^=title]:not(.titles-container).regular { font-weight: 400; } .force-small-title [class^=title] { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); } .titleH3 { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .titleH3.regular { font-weight: 400; } .title-h3 { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .title-h3.regular { font-weight: 400; } .titles-container h3.title { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .titles-container h3.title.regular { font-weight: 400; } .force-h3-title.force-h3-title.force-h3-title [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .force-h3-title.force-h3-title.force-h3-title [class^=title]:not(.titles-container).regular { font-weight: 400; } .make-title-h3 [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .make-title-h3 [class^=title]:not(.titles-container).regular { font-weight: 400; } .force-small-title [class^=title] { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); } .titleH4 { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .titleH4.regular { font-weight: 400; } .title-h4 { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .title-h4.regular { font-weight: 400; } .titles-container h4.title { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .titles-container h4.title.regular { font-weight: 400; } .force-h4-title.force-h4-title.force-h4-title [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .force-h4-title.force-h4-title.force-h4-title [class^=title]:not(.titles-container).regular { font-weight: 400; } .make-title-h4 [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .make-title-h4 [class^=title]:not(.titles-container).regular { font-weight: 400; } .force-small-title [class^=title] { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); } .title-h3-5 { text-wrap: pretty; font-size: clamp(26px, 20.8394495413px + 1.1467889908vw, 36px); line-height: 1.3; font-weight: 600; } .title-h3-5.regular { font-weight: 400; } .titles-container { --spacing: 20px; margin-bottom: 40px; max-width: 900px; } .titles-container:not(:has(*:not(:empty))) { display: none; } .titles-container > * { margin-bottom: var(--spacing, 30px); } .titles-container > *:last-child { margin-bottom: 0; } .titles-container.center { text-align: center; margin-inline: auto; } .titles-container.center > * { margin-inline: auto; } .titles-container.line-under { --line-spacing: 40px; position: relative; padding-bottom: var(--line-spacing); } .titles-container.line-under::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; max-width: 50px; height: 5px; background-color: #00d1d2; } .titles-container.line-under.center::after { inset-inline-start: 50%; translate: calc(-50% * var(--flip-value)) 0; } .titles-container.full-width { max-width: unset; } .titles-container.max-width-md { max-width: 700px; } .titles-container [class^=title].regular { font-weight: 400; } .center .titles-container { margin-inline: auto; } .header-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .force-title-start .titles-container { text-align: start !important; margin-inline: unset !important; } .force-title-start .titles-container > * { margin-inline: unset !important; } .force-title-center .titles-container { text-align: center !important; margin-inline: auto !important; } .force-title-center .titles-container > * { margin-inline: auto !important; } .title-colored [class^=title-h] { color: var(--current-color, #00d1d2); } .description { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description:empty { display: none; } .description p { margin-bottom: 16px; } .description p:last-child { margin-bottom: 0; } .description ul, .description ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description li { list-style: disc; } .description-sm { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-sm:empty { display: none; } .description-sm p { margin-bottom: 16px; } .description-sm p:last-child { margin-bottom: 0; } .description-sm ul, .description-sm ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-sm li { list-style: disc; } .description-sm { font-size: clamp(13px, 12.4839449541px + 0.1146788991vw, 14px); line-height: 1.5; } .description-md { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-md:empty { display: none; } .description-md p { margin-bottom: 16px; } .description-md p:last-child { margin-bottom: 0; } .description-md ul, .description-md ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-md li { list-style: disc; } .description-md { font-size: clamp(17px, 16.4839449541px + 0.1146788991vw, 18px); line-height: 1.5; } .description-lg { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-lg:empty { display: none; } .description-lg p { margin-bottom: 16px; } .description-lg p:last-child { margin-bottom: 0; } .description-lg ul, .description-lg ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-lg li { list-style: disc; } .description-lg { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); line-height: 1.5; } .description-xl { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-xl:empty { display: none; } .description-xl p { margin-bottom: 16px; } .description-xl p:last-child { margin-bottom: 0; } .description-xl ul, .description-xl ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-xl li { list-style: disc; } .description-xl { font-size: clamp(20px, 17.9357798165px + 0.4587155963vw, 24px); line-height: 1.3; } .description-xxl { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-xxl:empty { display: none; } .description-xxl p { margin-bottom: 16px; } .description-xxl p:last-child { margin-bottom: 0; } .description-xxl ul, .description-xxl ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-xxl li { list-style: disc; } .description-xxl { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; } .text-balance, .text-balance :is(h1, h2, h3, h4, h5, h6, p) { text-wrap: balance !important; } .bg-img-container { position: relative; } .bg-img { position: absolute; inset: 0; overflow: hidden; } .bg-img img { width: 100%; height: 100%; object-fit: cover; } .bg-img.overlay-dark::before { content: ""; position: absolute; inset: 0; background-color: black; opacity: 0.5; pointer-events: none; z-index: 2; } .bg-img.min-h-400 { min-height: 400px; } .img-container, .video-container, .img-container-contained { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; } .img-container img, .img-container video, .video-container img, .video-container video, .img-container-contained img, .img-container-contained video { width: 100%; height: 100%; object-fit: cover; } .img-container.square, .video-container.square, .img-container-contained.square { aspect-ratio: 1; height: unset; } .img-container.h-auto, .video-container.h-auto, .img-container-contained.h-auto { height: auto !important; aspect-ratio: unset !important; } .img-container.h-auto img, .video-container.h-auto img, .img-container-contained.h-auto img { height: auto; } .img-container-contained { height: auto; } .img-container-contained img { object-fit: contain; } .hover-zoom { overflow: hidden; } .hover-zoom img { transition: var(--transition, all 1s ease); } .hover-zoom:hover img { scale: 1.05; } .ratio { position: relative; width: 100%; } .ratio:before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; } .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mobileImage, .mobile { display: none; } @media (max-width: 992px) { .mobileImage, .mobile { display: block; } } .desktopImage, .desktop { display: block; } @media (max-width: 992px) { .desktopImage, .desktop { display: none; } } .video { position: relative; --icon-width: 50px; --icon-color: #34303d; --icon-bg-color: white; cursor: pointer; } .video::before, .video::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: var(--icon-width); aspect-ratio: 1; border-radius: 50%; z-index: 5; background-color: var(--icon-bg-color); pointer-events: none; } .video::after { z-index: 10; mask-image: url(/images/icons/play.svg?v=n97GSqsm6CTd58gkvn_Puv9S3BE); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/play.svg?v=n97GSqsm6CTd58gkvn_Puv9S3BE); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--icon-color); width: calc(var(--icon-width) * 0.6); } .video.bottom-right { --shift: 64px; } .video.bottom-right::before, .video.bottom-right::after { top: auto; left: auto; right: var(--shift); bottom: var(--shift); translate: 50% 50%; } .video.no-play-icon::before, .video.no-play-icon::after { display: none; } img[src=""] { display: none; } .swiper { position: relative; } .swiper.overflow-visible { overflow: visible; } .swiper.overflow-visible .swiper-wrapper { overflow: visible; } @media (max-width: 992px) { .swiper.overflow-visible-mobile { overflow: visible; } .swiper.overflow-visible-mobile .swiper-wrapper { overflow: visible; } } .swiper .swiper-slide { height: auto; } .swiper-nav { --arrow-size: 40px; --arrow-inner-inset: 21%; --arrow-bg-color: transparent; --arrow-border-color: transparent; --arrow-color: #34303d; --arrow-bg-color-hover: rgba(0, 0, 0, 0.1); --arrow-border-color-hover: transparent; --arrow-color-hover: #34303d; position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: 50px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 28px; pointer-events: none; z-index: 5; } .swiper-nav .swiper-next, .swiper-nav .swiper-prev { --translate: 3px; position: relative; pointer-events: all; min-width: var(--arrow-size); max-width: var(--arrow-size); min-height: var(--arrow-size); max-height: var(--arrow-size); border-radius: 50%; background-color: var(--arrow-bg-color); border: solid 1px var(--arrow-border-color); transition: all 0.6s ease; } .swiper-nav .swiper-next::before, .swiper-nav .swiper-prev::before { content: ""; position: absolute; inset: var(--arrow-inner-inset); mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--arrow-color); transition: all 0.6s ease; } .swiper-nav .swiper-next:hover, .swiper-nav .swiper-prev:hover { background-color: var(--arrow-bg-color-hover); border: solid 1px var(--arrow-border-color-hover); } .swiper-nav .swiper-next:hover::before, .swiper-nav .swiper-prev:hover::before { background-color: var(--arrow-color-hover); } .swiper-nav .swiper-next.swiper-button-disabled, .swiper-nav .swiper-prev.swiper-button-disabled { opacity: 0.6; cursor: auto; pointer-events: none; } .swiper-nav .swiper-next::before { translate: calc(var(--translate) * 1) 0; } .swiper-nav .swiper-prev::before { translate: calc(var(--translate) * -1) 0; rotate: 180deg; } .swiper-pagination { position: static; margin-top: 20px; } .swiper-pagination .swiper-pagination-bullet { width: 28px; height: 3px; border-radius: 0; background-color: var(--default-text-color); margin: 0 5px; opacity: 0.3; transition: all 0.6s ease; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .note-container { border: solid 3px #34303d; padding: 20px 60px; width: fit-content; margin-inline: auto; } @media (max-width: 992px) { .note-container { padding: 20px 40px; } } .note-container.no-border { border: none; padding: 0; margin-top: 40px; } .note-container.center { text-align: center; max-width: 900px; } .note-container.small, .note-container.small p { font-size: 13px; } .disclaimer { display: block; color: var(--default-text-color); padding: 16px; font-weight: 600; background-color: rgba(0, 0, 0, 0.1); margin-top: 20px; } .disclaimer a { color: var(--default-text-color); font-size: 16px; text-decoration: underline; cursor: pointer; transition: all 0.6s ease; border: none; background-color: transparent; } .disclaimer a:hover { color: #00d1d2; } .disclaimer:empty, .disclaimer:has(:first-child:last-child:empty) { display: none; } .disclaimer > *:last-child { margin-bottom: 0; } .disclaimer.with-border { background-color: transparent; border: 1px solid var(--default-text-color); } .disclaimer.no-box { padding: 0; background-color: transparent; border: none; } .disclaimer.center { display: flex; justify-content: center; text-align: center; } .disclaimer.no-bold { font-weight: 400; } .disclaimer.no-bold * { font-weight: 400; } .disclaimer.center { display: flex; justify-content: center; text-align: center; } .bgDisclaimer { display: block; color: var(--default-text-color); padding: 16px; font-weight: 600; background-color: rgba(0, 0, 0, 0.1); margin-top: 20px; } .bgDisclaimer:empty, .bgDisclaimer:has(:first-child:last-child:empty) { display: none; } .bgDisclaimer > *:last-child { margin-bottom: 0; } .bgDisclaimer.with-border { background-color: transparent; border: 1px solid var(--default-text-color); } .bgDisclaimer.no-box { padding: 0; background-color: transparent; border: none; } .bgDisclaimer.center { display: flex; justify-content: center; text-align: center; } .bgDisclaimer.no-bold { font-weight: 400; } .bgDisclaimer.no-bold * { font-weight: 400; } .bgDisclaimer.center { display: flex; justify-content: center; text-align: center; } #ajaxLoader { position: fixed; top: 0; inset-inline-start: 0; display: block; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); z-index: 50000; } #ajaxLoader .loader { position: absolute; height: 60px; width: 60px; display: block; top: calc(50% - 30px); left: calc(50% - 30px); -webkit-animation: rotation 1s infinite linear; -moz-animation: rotation 1s infinite linear; -o-animation: rotation 1s infinite linear; animation: rotation 1s infinite linear; border: 6px solid rgba(0, 0, 0, 0.2); border-radius: 100%; } #ajaxLoader .loader::before { content: ""; display: block; position: absolute; left: -6px; top: -6px; height: 60px; width: 60px; border-top: 6px solid rgba(0, 0, 0, 0.8); border-left: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid transparent; border-radius: 100%; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-moz-keyframes rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @-o-keyframes rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .swiper-button-next, .swiper-button-prev { display: none; } .messageContainer { position: fixed; top: 0px; inset-inline-start: 0; inset-inline-end: 0; width: 100%; z-index: 1000; background-color: green; padding: 10px 50px; min-height: 62px; } .messageContainer.red { background-color: #d40720; } .messageContainer .close { position: absolute; top: 10px; inset-inline-end: 25px; color: transparent; background-image: url(../../images/close-icon-black.svg?v=oX6kAjjA9etGoHLWmJbOrrk_CfM); width: 25px; height: 25px; background-position: center center; background-repeat: no-repeat; background-size: contain; filter: brightness(0) invert(1); } .messageContainer h3 { color: #ffffff; font-size: 20px; font-weight: bold; } .messageContainer .messageBody { margin-top: 10px; color: #ffffff; font-size: 16px; display: flex; gap: 24px; } .fixed-on-scroll { position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); background-color: #fffdfb; padding: 15px 0; display: flex; z-index: 10; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; padding-inline: 30px; opacity: 0; pointer-events: none; transition: all 0.6s ease; } .fixed-on-scroll.show { opacity: 1; pointer-events: all; } .fixed-on-scroll .label-total { font-size: clamp(16px, 11.871559633px + 0.9174311927vw, 24px); font-weight: bold; } sup { vertical-align: top; font-size: 10px; } .noScroll { overflow-y: hidden; } h3 { margin: 0; } .backLink.clubBack { margin-inline-start: 50px; } .backLink.clubBack a { text-decoration: underline; color: #34303d; padding: 20px 0 !important; } .backLink a { width: auto; margin-top: 0; } .button.white { border: 1px solid white; max-width: fit-content; background-color: #fff; border: 0px; color: #34303d !important; } .button.white:hover { background-color: #34303d; border: 0px; color: #fff !important; } .oldPriceStrikethrough { text-decoration: line-through; color: #a0a0a0; } .form-control:focus { outline: none; box-shadow: unset; } .no-description-display .second-level-description { display: none; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0) rotate(-45deg); opacity: 0.7; } 50% { transform: translateY(8px) rotate(-45deg); opacity: 1; } } :where(*) { margin: 0; padding: 0; box-sizing: border-box; } body { --header-margin-top-current: var(--header-margin-top, 0px); font-family: "IQOS", "IQOS AR", sans-serif; max-width: 2500px; margin-inline: auto; } .mainBodyWrapper { --header-margin-top-current: var(--header-margin-top, 0px); padding-top: var(--header-margin-top, 0px); transition: all 0.6s ease; } .mainBodyWrapper:has(.zyn-lead-form-section) { padding-top: 20px; } a { transition: all 0.2s ease; color: var(--default-text-color); } a.col { display: block; text-decoration: none; color: var(--default-text-color); } @media (min-width: 992px) { .flex-nowrap-lg *:has(> .col) { flex-wrap: nowrap !important; } } @media (min-width: 1200px) { .flex-nowrap-xl *:has(> .col) { flex-wrap: nowrap !important; } } .numbers-list { --list-color: var(--current-color, #ffc600); --list-text-color: var(--current-text-color, white); } .numbers-list ul, .numbers-list ol, .numbers-list:is(ul, ol) { max-width: 500px; counter-reset: list-counter; } .numbers-list ul > li, .numbers-list ol > li, .numbers-list:is(ul, ol) > li { --bullet-size: 36px; position: relative; counter-increment: list-counter; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .numbers-list ul > li:empty, .numbers-list ol > li:empty, .numbers-list:is(ul, ol) > li:empty { display: none; } .numbers-list ul > li p, .numbers-list ol > li p, .numbers-list:is(ul, ol) > li p { margin-bottom: 16px; } .numbers-list ul > li p:last-child, .numbers-list ol > li p:last-child, .numbers-list:is(ul, ol) > li p:last-child { margin-bottom: 0; } .numbers-list ul > li ul, .numbers-list ul > li ol, .numbers-list ol > li ul, .numbers-list ol > li ol, .numbers-list:is(ul, ol) > li ul, .numbers-list:is(ul, ol) > li ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .numbers-list ul > li li, .numbers-list ol > li li, .numbers-list:is(ul, ol) > li li { list-style: disc; } .numbers-list ul > li, .numbers-list ol > li, .numbers-list:is(ul, ol) > li { margin-bottom: 20px; padding-inline-start: calc(var(--bullet-size) + 16px); } .numbers-list ul > li::marker, .numbers-list ol > li::marker, .numbers-list:is(ul, ol) > li::marker { display: none; } .numbers-list ul > li:last-child, .numbers-list ol > li:last-child, .numbers-list:is(ul, ol) > li:last-child { margin-bottom: 0; } .numbers-list ul > li::before, .numbers-list ol > li::before, .numbers-list:is(ul, ol) > li::before { content: counter(list-counter); position: absolute; top: 0; inset-inline-start: 0; display: flex; align-items: center; justify-content: center; min-width: var(--bullet-size); max-width: var(--bullet-size); aspect-ratio: 1; background-color: var(--list-color); line-height: 1; color: var(--list-text-color, white); border-radius: 50%; } .numbers-list ul > li h3, .numbers-list ol > li h3, .numbers-list:is(ul, ol) > li h3 { font-size: clamp(23px, 20.9357798165px + 0.4587155963vw, 27px); font-weight: 600; margin-bottom: 5px; } .numbers-list ul > li :is(ul, ol), .numbers-list ol > li :is(ul, ol), .numbers-list:is(ul, ol) > li :is(ul, ol) { margin-top: 16px; } .numbers-list ul > li :is(ul, ol) li, .numbers-list ol > li :is(ul, ol) li, .numbers-list:is(ul, ol) > li :is(ul, ol) li { padding-inline-start: 0; } .numbers-list ul > li :is(ul, ol) li::before, .numbers-list ol > li :is(ul, ol) li::before, .numbers-list:is(ul, ol) > li :is(ul, ol) li::before { display: none; } .no-numbers-list ul li, .no-numbers-list ol li { padding-inline-start: 0 !important; margin-inline-start: 16px !important; margin-bottom: 10px !important; } .no-numbers-list ul li::before, .no-numbers-list ol li::before { display: none !important; } .no-numbers-list ul li { list-style: disc !important; } .no-numbers-list ol li { list-style: armenian !important; } .fancybox__container { width: 100%; padding-inline: var(--container-gutter-x); margin-inline: auto; } @media (min-width: 576px) { .fancybox__container { max-width: unset; } } @media (min-width: 768px) { .fancybox__container { max-width: 720px; } } @media (min-width: 992px) { .fancybox__container { max-width: 960px; } } @media (min-width: 1200px) { .fancybox__container { max-width: 1140px; } } @media (min-width: 1400px) { .fancybox__container { max-width: calc(1324px + var(--container-gutter-x)); } } .fancybox__container { display: flex; flex-direction: column; justify-content: center; } .fancybox__container .f-html { background-color: transparent; padding-block: 0; } .fancybox__container .fancybox__carousel { max-height: min(800px, 80vh); } .select-language * { font-size: 14px; } .select-language.dropdown { position: relative; } .select-language.dropdown .dropdown-toggle { background-color: transparent; border: none; border-radius: 0; padding: 0 20px 0 0; color: #34303d; font-weight: normal; } .select-language.dropdown .dropdown-toggle::after { content: ""; border: none; position: absolute; top: 58%; right: 0; translate: 0 -50%; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 12px; aspect-ratio: 1; } .select-language.dropdown .dropdown-menu { padding: 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; min-width: 90px; border-radius: 5px; overflow: hidden; } .select-language.dropdown .dropdown-menu .dropdown-item { font-size: 14px; color: #34303d; padding: 10px 16px; overflow: hidden; } .select-language.dropdown .dropdown-menu .dropdown-item.active, .select-language.dropdown .dropdown-menu .dropdown-item:hover { background-color: white; color: #00d1d2; } .select-language.dropdown .dropdown-menu li:not(:last-child) .dropdown-item { border-bottom: solid 1px #dcdcdc; } body:has(.age-gate-popup:not(.hidden)) { overflow: hidden; } .popup { position: fixed; inset: 0; z-index: 10000; background-color: white; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(19.5px); -webkit-backdrop-filter: blur(19.5px); } .popup.dark { background-color: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5); } .popup .container { height: 100%; } .popup .container .popup-container { height: 100%; display: flex; flex-direction: column; } .popup .close-popup { width: 26px; height: 26px; mask-image: url(../../images/icons/close.svg?v=7qNrL1deWjPyVwEffevSakOzV6Q); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../../images/icons/close.svg?v=7qNrL1deWjPyVwEffevSakOzV6Q); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; display: block; margin-inline-start: auto; padding-bottom: 40px; transition: all 0.6s ease; cursor: pointer; } .popup .close-popup:hover { scale: 1.05; background-color: #00d1d2; } .popup.medium-width { background-color: rgba(52, 48, 61, 0.5); backdrop-filter: none; display: flex; } .popup.medium-width > .container { max-width: 50vw; height: auto; margin: auto; padding: 30px; background-color: #ffffff; align-items: center; border-radius: 8px; } .popup.medium-width > .container h2 { margin-bottom: 20px; } .popup.medium-width > .container p.subtitle { font-size: clamp(14px, 12.9678899083px + 0.2293577982vw, 16px); margin-bottom: 40px; } .popup.medium-width > .container .controls { display: flex; justify-content: center; gap: 20px; } .popup.medium-width > .container .controls .secondary-btn { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .popup.medium-width > .container .controls .secondary-btn:empty { display: none; } .popup.medium-width > .container .controls .secondary-btn:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .age-gate-popup { background-color: #f6f4f0; background: rgba(246, 244, 240, 0.95); backdrop-filter: blur(19.5px); -webkit-backdrop-filter: blur(19.5px); padding-block: 60px; } .age-gate-popup .errorAge { display: none; } .age-gate-popup.age-error-underage .errorAge { display: block; } .age-gate-popup.age-error-underage .age-input-block { display: none; } .age-gate-popup .language-selector-main { position: absolute; top: 60px; right: 60px; } @media (max-width: 992px) { .age-gate-popup .language-selector-main { right: var(--container-gutter-x); } } .age-gate-popup .language-selector-main .select-language .dropdown-toggle { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; } .age-gate-popup .language-selector-main .select-language .dropdown-toggle::before { content: ""; display: block; mask-image: url(/images/icons/globe.svg?v=7RRFCTs5GGKDd9G7XaFcYlZUguM); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/globe.svg?v=7RRFCTs5GGKDd9G7XaFcYlZUguM); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 20px; aspect-ratio: 1; } .age-gate-popup .popup-container { justify-content: center; } .age-gate-popup .popup-container { max-width: 1000px; height: 100%; margin-inline: auto; text-align: center; } .age-gate-popup .logo-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; margin-bottom: 32px; } .age-gate-popup .logo-container .logo { max-width: 100px; } .age-gate-popup .logo-container .favicon { max-width: 50px; } .age-gate-popup .age-input-block { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .age-gate-popup .age-input-block:empty { display: none; } .age-gate-popup .age-input-block p { margin-bottom: 16px; } .age-gate-popup .age-input-block p:last-child { margin-bottom: 0; } .age-gate-popup .age-input-block ul, .age-gate-popup .age-input-block ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .age-gate-popup .age-input-block li { list-style: disc; } .age-gate-popup .age-input-block { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); line-height: 1.5; max-width: 500px; margin-inline: auto; width: 100%; } .age-gate-popup .age-input-block .input-fields { display: flex; gap: 16px; margin-block: 60px 30px; } .age-gate-popup .age-input-block .input-fields .field-group { flex: 1 1 0; } .age-gate-popup .age-input-block .input-fields .field-group .field-label { text-align: start; } .age-gate-popup .age-input-block .input-fields .field-group .field-label label { font-size: 13px; } .age-gate-popup .age-input-block .input-fields .field-group .field-label span { display: none; } .age-gate-popup .age-input-block .input-fields .field-group .select-container { width: 100%; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container { width: 100% !important; text-align: start; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single { position: relative; padding: 24px 15px; border: 1px solid #b0b0b0; background-color: #fff; display: flex; align-items: center; padding-inline: 16px 40px; outline: none; box-shadow: none; transition: all 0.6s ease; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single .select2-selection__arrow { display: none; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single::before { content: ""; display: block; opacity: 0; pointer-events: none; position: absolute; top: 50%; inset-inline-end: 36px; translate: calc(-50% * var(--flip-value)) -50%; background-image: url(/images/icons/red-x-circle.svg?v=n97GSqsm6CTd58gkvn_Puv9S3BE); background-size: 100%; width: 25px; aspect-ratio: 1; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single::after { content: ""; position: absolute; top: 50%; inset-inline-end: 20px; translate: 0 -50%; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 12px; aspect-ratio: 1; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single .select2-selection__rendered { padding-inline: 0; color: #34303d; font-size: 16px; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-results__options { margin: 0; padding: 0; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-results__options .select2-results__option { list-style: none; font-size: 14px; padding: 6px 10px; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-results__options .select2-results__option.select2-results__option--highlighted, .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-results__options .select2-results__option:hover { background-color: #00d1d2; color: #34303d; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container input { font-size: 14px; padding: 6px 10px; outline: #00d1d2; } .age-gate-popup .age-input-block .input-fields .field-group .select-container > input { display: none; } .age-gate-popup .age-input-block .input-fields .field-group.has-error .select2-selection--single { border-color: #dd3333 !important; } .age-gate-popup .age-input-block .input-fields .field-group.has-error .select2-selection--single::before { opacity: 1 !important; } .age-gate-popup .age-input-block .input-fields .field-group.has-success .select2-selection--single { border-color: #57760c !important; } .age-gate-popup .age-input-block .input-fields .field-group.has-success .select2-selection--single::before { opacity: 1 !important; background-image: url(/images/icons/green-check-circle.svg?v=7RRFCTs5GGKDd9G7XaFcYlZUguM) !important; } .age-gate-popup .age-question-block { max-width: 500px; margin-inline: auto; width: 100%; } .age-gate-popup .age-question-block .intro { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .age-gate-popup .age-question-block .intro:empty { display: none; } .age-gate-popup .age-question-block .intro p { margin-bottom: 16px; } .age-gate-popup .age-question-block .intro p:last-child { margin-bottom: 0; } .age-gate-popup .age-question-block .intro ul, .age-gate-popup .age-question-block .intro ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .age-gate-popup .age-question-block .intro li { list-style: disc; } .age-gate-popup .age-question-block .intro { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); line-height: 1.5; margin-bottom: 40px; } .age-gate-popup .age-question-block .buttons-container { display: flex; flex-direction: column; gap: 16px; } .age-gate-popup .age-question-block .buttons-container .button-primary { width: 100%; text-align: center; padding-block: 14px; } .age-gate-popup .age-question-block .buttons-container .overAge { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .age-gate-popup .age-question-block .buttons-container .overAge:empty { display: none; } .age-gate-popup .age-question-block .buttons-container .overAge:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .age-gate-popup .age-question-block .buttons-container .overAge { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .age-gate-popup .age-question-block .buttons-container .UnderAge { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .age-gate-popup .age-question-block .buttons-container .UnderAge:empty { display: none; } .age-gate-popup .age-question-block .buttons-container .UnderAge:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .age-gate-popup .disclaimer-block { margin-top: 80px; } .age-gate-popup .disclaimer-block .disclaimer-text { font-size: 13px; line-height: 1.5; } .age-gate-popup .disclaimer-block .disclaimer-title { font-size: clamp(18px, 14.9036697248px + 0.6880733945vw, 24px); } #onetrust-consent-sdk #onetrust-banner-sdk { background-color: #34303d !important; } #onetrust-consent-sdk #onetrust-button-group #onetrust-pc-btn-handler { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } #onetrust-consent-sdk #onetrust-button-group #onetrust-pc-btn-handler:empty { display: none; } #onetrust-consent-sdk #onetrust-button-group #onetrust-pc-btn-handler:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } #onetrust-consent-sdk #onetrust-button-group #onetrust-pc-btn-handler { --color: white; --background-color: transparent; --border-color: white; --hover-color: #34303d; --hover-background-color: white; --hover-border-color: white; --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } #onetrust-consent-sdk #onetrust-button-group #onetrust-accept-btn-handler { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } #onetrust-consent-sdk #onetrust-button-group #onetrust-accept-btn-handler:empty { display: none; } #onetrust-consent-sdk #onetrust-button-group #onetrust-accept-btn-handler:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } #onetrust-consent-sdk #onetrust-button-group #onetrust-accept-btn-handler { --color: #34303d; --background-color: white; --border-color: white; --hover-color: white; --hover-background-color: #34303d; --hover-border-color: #34303d; --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } #onetrust-consent-sdk #onetrust-button-group button { font-size: 13px !important; line-height: 1 !important; padding-block: 14px !important; } @media (max-width: 992px) { #onetrust-consent-sdk #onetrust-button-group { margin-top: 20px !important; } } #onetrust-consent-sdk #onetrust-close-btn-container .onetrust-close-btn-handler { filter: brightness(0) invert(1); } body:has(.header-main.hidden) .mainBodyWrapper { --header-margin-top-current: 0px; } body.no-header .mainBodyWrapper { --header-margin-top-current: 0px; padding-top: 0; } body:has(.first-level.hasSubmenu.active) { overflow-y: hidden; } body:has(.header-sidebar.visible) { overflow: hidden; } body:has(.header-sidebar.visible) .header-main { --box-shadow: unset; } .first-level.menu-accent-primary, .first-level:has(> .menu-accent-primary) { --menu-accent: #00d1d2; } .first-level.menu-accent-gray-dark, .first-level:has(> .menu-accent-gray-dark) { --menu-accent: #34303d; } .first-level.menu-accent-gray-light, .first-level:has(> .menu-accent-gray-light) { --menu-accent: #f6f4f0; } .first-level.menu-accent-classic-red, .first-level:has(> .menu-accent-classic-red) { --menu-accent: #A7312F; } .first-level.menu-accent-amber, .first-level:has(> .menu-accent-amber) { --menu-accent: #E88147; } .first-level.menu-accent-nice-blue, .first-level:has(> .menu-accent-nice-blue) { --menu-accent: #207CA9; } .first-level.menu-accent-white, .first-level:has(> .menu-accent-white) { --menu-accent: white; } .first-level.menu-accent-terea-sienna, .first-level:has(> .menu-accent-terea-sienna) { --menu-accent: #D4302F; } .first-level.menu-accent-terea-amber, .first-level:has(> .menu-accent-terea-amber) { --menu-accent: #C24213; } .first-level.menu-accent-terea-silver, .first-level:has(> .menu-accent-terea-silver) { --menu-accent: #808183; } .first-level.menu-accent-terea-turquoise, .first-level:has(> .menu-accent-terea-turquoise) { --menu-accent: #119FAD; } .first-level.menu-accent-terea-purple, .first-level:has(> .menu-accent-terea-purple) { --menu-accent: #8255B2; } .first-level.menu-accent-terea-yellow, .first-level:has(> .menu-accent-terea-yellow) { --menu-accent: #EAB108; } .first-level.menu-accent-terea-arbor, .first-level:has(> .menu-accent-terea-arbor) { --menu-accent: #049218; } .first-level.menu-accent-terea-beige, .first-level:has(> .menu-accent-terea-beige) { --menu-accent: #bf9f85; } .first-level.menu-accent-terea-oasis, .first-level:has(> .menu-accent-terea-oasis) { --menu-accent: #b1269e; } .first-level.menu-accent-terea-summer, .first-level:has(> .menu-accent-terea-summer) { --menu-accent: #ec7253; } .first-level.menu-accent-terea-sun, .first-level:has(> .menu-accent-terea-sun) { --menu-accent: #ac3223; } .first-level.menu-accent-sky-blue, .first-level:has(> .menu-accent-sky-blue) { --menu-accent: #00C1FF; } .first-level.menu-accent-cyan, .first-level:has(> .menu-accent-cyan) { --menu-accent: #1BD9C5; } .first-level.menu-accent-purple, .first-level:has(> .menu-accent-purple) { --menu-accent: #2d008b; } .first-level.menu-accent-delia-gold, .first-level:has(> .menu-accent-delia-gold) { --menu-accent: #C2A37C; } .first-level.menu-accent-delia-silver, .first-level:has(> .menu-accent-delia-silver) { --menu-accent: #A0A1AA; } .first-level.menu-accent-delia-red, .first-level:has(> .menu-accent-delia-red) { --menu-accent: #A6312F; } .first-level.menu-accent-delia-green, .first-level:has(> .menu-accent-delia-green) { --menu-accent: #4DA793; } .first-level.menu-accent-zyn-navy, .first-level:has(> .menu-accent-zyn-navy) { --menu-accent: #00166f; } .header-main { --logo-width: 80px; --main-color: #34303d; --front-z-index: 800; --back-z-index: 700; --box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; --overlay-opacity: 0; position: fixed; width: 100%; top: 0; left: 0; transition: all 0.6s ease; z-index: var(--back-z-index); } .header-main::before { content: ""; position: absolute; inset: 0; width: 100vw; height: 100vh; background-color: black; z-index: calc(var(--back-z-index) - 1); transition: all 0.6s ease; pointer-events: none; opacity: var(--overlay-opacity); } .header-main.hidden { translate: 0 -100%; } .header-main .header-click-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background-color: transparent; z-index: 750; display: none; } .header-main .header-click-overlay.active { display: block; } @media (max-width: 992px) { .header-main .header-click-overlay { display: none; pointer-events: none; } } @media (min-width: 992px) { .header-main:has(.first-level.hasSubmenu.active) { --overlay-opacity: 0.5; } } @media (max-width: 768px) { .header-main { --logo-width: 65px; } } .header-main ::-webkit-scrollbar { width: 6px; } .header-main ::-webkit-scrollbar-track { background: transparent; } .header-main ::-webkit-scrollbar-thumb { background-color: rgb(187, 187, 187); border-radius: 999px; } .header-main .lang-banner { position: relative; display: grid; grid-template-rows: 1fr; background-color: #00d1d2; color: var(--main-color); padding-block: 18px; padding-inline: var(--container-gutter-x); width: 100%; transition: grid-template-rows 0.6s ease, padding-block 0.6s ease; z-index: var(--front-z-index); overflow: hidden; } @media (max-width: 768px) { .header-main .lang-banner { padding-block: 10px; padding-inline: calc(var(--container-gutter-x) * 2); } } .header-main .lang-banner.hidden { grid-template-rows: 0fr; padding-block: 0 !important; } .header-main .lang-banner.hidden .banner-text { opacity: 0; } .header-main .lang-banner.hidden .langBanner-close { opacity: 0; } .header-main .lang-banner .banner-text { min-height: 0; margin-inline: auto; text-align: center; transition: opacity 0.4s ease; /* Fade out faster than collapse */ } .header-main .lang-banner .banner-text a { display: block; font-size: clamp(12px, 8.9036697248px + 0.6880733945vw, 18px); line-height: 1.3; font-weight: 600; text-decoration: none; } .header-main .lang-banner .banner-text a:hover { text-decoration-color: var(--main-color); } .header-main .lang-banner .langBanner-close { position: absolute; right: var(--container-gutter-x); top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 600; color: var(--main-color); cursor: pointer; line-height: 1; transition: opacity 0.4s ease; } .header-main .lang-banner .langBanner-close:hover { scale: 1.05; } @media (max-width: 768px) { .header-main .lang-banner .langBanner-close { font-size: 22px; right: 8px; } } .header-main .menuHolder { position: relative; width: 100%; background-color: white; box-shadow: var(--box-shadow); transition: all 0.6s ease; z-index: var(--front-z-index); } .header-main .menuHolder .logo-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: var(--logo-width); height: 40px; } .header-main .menuHolder .logo-container img { height: 100%; width: 100%; object-fit: contain; opacity: 0; max-height: 0; transition: all 0.6s ease; } .header-main .menuHolder .logo-container img.visible { opacity: 1; max-height: 100%; } .header-main .menuHolder .menu { padding: 24px 0; display: flex; align-items: center; gap: 20px; justify-content: flex-end; } .header-main .menuHolder .menu .menuItems { --menu-wrapper-gap: 12px; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--menu-wrapper-gap); z-index: var(--front-z-index); pointer-events: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper { display: flex; align-items: center; gap: 20px; flex: 0 0 calc(50% - var(--logo-width) / 2 - var(--menu-wrapper-gap) / 2); pointer-events: all; } .header-main .menuHolder .menu .menuItems .menu-wrapper.rightMenuWrapper { justify-content: flex-end; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper { display: flex; align-items: center; gap: 20px; } @media (max-width: 992px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper { display: none; } } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level { --arrow-rotation: 0; display: inline-flex; gap: 12px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.menu-titles-lg .thirdLvlItem .menuAnchor, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level:has(> .menu-titles-lg) .thirdLvlItem .menuAnchor { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px) !important; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.menu-titles-lg .thirdLvlItem.withImage .menuAnchor, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level:has(> .menu-titles-lg) .thirdLvlItem.withImage .menuAnchor { font-size: clamp(18px, 12.8394495413px + 1.1467889908vw, 28px) !important; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .first-level-title { position: relative; color: var(--main-color); font-size: 14px; letter-spacing: 0.4px; display: flex; align-items: center; gap: 6px; width: fit-content; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.hasSubmenu .first-level-title::after { content: ""; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); width: 12px; aspect-ratio: 1; transition: all 0.6s ease; rotate: var(--arrow-rotation); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.hasSubmenu.active { --arrow-rotation: 180deg; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.hasSubmenu.active .secondLvl { max-height: var(--level-height); padding-block: 55px; opacity: 1; pointer-events: all; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl { --level-height: 65vh; --second-level-gap: 60px; --highlighted-images-width: 380px; position: absolute; bottom: 0; left: 0; translate: 0 calc(100% - 2px) !important; background-color: white; opacity: 0; pointer-events: none; z-index: var(--back-z-index); width: 100%; max-height: 0; padding-inline: 0; padding-block: 0; height: var(--level-height); transition: all 0.6s ease; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl:has(.thirdLvl.active) > .itemsBlock > .highlitedSection { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .menuBack { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .itemsBlock { position: relative; display: flex; justify-content: space-between; gap: var(--second-level-gap); width: 100%; height: 100%; overflow-y: auto; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .itemsBlock .highlitedSection { position: absolute; top: 0; inset-inline-end: var(--container-gutter-x); max-width: var(--highlighted-images-width); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .itemsBlock .highlitedSection .highlitedInfo h3 a.title { font-size: 18px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .itemsBlock .highlitedSection .highlitedInfo a.description { font-size: 14px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .secondLevelWrapper { --second-menu-width: 40%; position: relative; flex-shrink: 0; width: 100%; max-width: calc(100% - var(--highlighted-images-width) - var(--second-level-gap)); max-height: 100%; overflow-x: visible; padding: 0; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection { width: var(--second-menu-width); margin-bottom: 20px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection:last-child { margin-bottom: 0; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection.hasSubmenu > a { position: relative; display: flex; align-items: center; width: fit-content; gap: 15px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection.hasSubmenu > a span.ribbon { position: absolute; top: 50%; transform: translateY(-50%) translateX(100%); background-color: rgb(0, 209, 210); border-radius: 0.15rem; color: rgb(52, 48, 61); display: inline-block; font-size: 0.75rem; font-weight: 400; line-height: 1; padding: 0.5em 0.75em; text-align: center; vertical-align: baseline; white-space: nowrap; right: 0%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection.hasSubmenu > a::after { content: ""; display: block; mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 15px; aspect-ratio: 1; rotate: calc(var(--arrow-direction) * 1); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { color: #34303d; font-size: clamp(20px, 18.4518348624px + 0.3440366972vw, 23px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { line-height: 26px; } @media screen and (min-width: 420px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { line-height: calc(26px + 3 * (100vw - 420px) / 1180); } } @media screen and (min-width: 1600px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { line-height: 29px; } } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { font-weight: bold; padding-bottom: 5px; display: inline-block; position: relative; z-index: 2; padding-inline-end: 25px; width: fit-content; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a span.ribbon { position: absolute; top: 0%; transform: translateY(20%) translateX(100%); background-color: rgb(0, 209, 210); border-radius: 0.15rem; color: rgb(52, 48, 61); display: inline-block; font-size: 0.75rem; font-weight: 400; line-height: 1; padding: 0.5em 0.75em; text-align: center; vertical-align: baseline; white-space: nowrap; right: 0%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a::before { content: ""; height: 4px; width: 0; position: absolute; bottom: 0; inset-inline-start: 0; background-color: var(--menu-accent, #00d1d2); transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a:hover::before, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a.active::before { width: calc(100% - 30px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { font-size: clamp(14px, 12.9678899083px + 0.2293577982vw, 16px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { line-height: 20px; } @media screen and (min-width: 420px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { line-height: calc(20px + 2 * (100vw - 420px) / 1180); } } @media screen and (min-width: 1600px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { line-height: 22px; } } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { color: #34303d; font-weight: 400; margin: 0 0 8px; max-width: 100%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc:empty { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl { --third-level-width: 30%; display: none; position: absolute; top: 0px; inset-inline-start: calc(var(--second-menu-width) + var(--second-level-gap)); width: calc(100% - var(--second-menu-width) + var(--highlighted-images-width)); max-height: 100%; overflow: hidden; height: 100%; background-color: white; z-index: 10; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl.active { display: block; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .highlitedSection { position: absolute; top: 0; inset-inline-end: 0; max-width: var(--highlighted-images-width); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper { width: 100%; max-width: calc(100% - var(--highlighted-images-width) - var(--second-level-gap) * 2); max-height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding-inline-end: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper::-webkit-scrollbar { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlImagesWrapper { margin-bottom: 30px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem { margin-bottom: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem:last-child:not(.withImage) { margin-bottom: 0; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem:last-child:not(.withImage) .menuAnchor { padding-bottom: 0; line-height: 20px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo { display: flex; justify-content: space-between; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .titleWrapper { width: 100%; padding-inline-end: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .menuAnchor { color: #34303d; font-size: clamp(16px, 11.3555045872px + 1.0321100917vw, 25px); font-weight: bold; padding-bottom: 5px; display: inline-block; position: relative; z-index: 2; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .menuAnchor::before { content: ""; position: absolute; height: 4px; width: 0; bottom: 0; inset-inline-start: 0; background-color: var(--menu-accent, #00d1d2); transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .menuAnchor:hover::before, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .menuAnchor.active::before { width: calc(100% - 30px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo p { font-size: 16px; color: #34303d; margin-bottom: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .imageWrapper { flex: 0 0 24%; max-width: 24%; padding-inline-end: 6px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .imageWrapper a::before { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .imageWrapper img { max-width: 100%; object-fit: contain; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.isHighlighted { font-weight: bold; font-size: clamp(22px, 19.9357798165px + 0.4587155963vw, 26px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor { color: #34303d; font-size: clamp(16px, 16px + 0vw, 16px); padding-bottom: 5px; display: inline-block; position: relative; z-index: 2; height: fit-content; width: fit-content; transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited { font-weight: bold; font-size: clamp(16px, 14.9678899083px + 0.2293577982vw, 18px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited::before { content: ""; height: 4px; width: 0; position: absolute; bottom: 0; inset-inline-start: 0; background-color: var(--menu-accent, #00d1d2); transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited:hover, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited.active { color: var(--menu-accent, #00d1d2); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited:hover::before, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited.active::before { width: calc(100% - 5px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor:hover, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.active { color: var(--menu-accent, #00d1d2); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection { flex: 0 0 27%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .imageWrapper { margin-bottom: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .imageWrapper a { display: block; --bs-aspect-ratio: 60%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .imageWrapper a::before { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .imageWrapper a img { max-width: 100%; object-fit: cover; position: static; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .title { color: #34303d; font-size: clamp(20px, 18.4518348624px + 0.3440366972vw, 23px); font-weight: bold; padding-bottom: 5px; display: inline-block; position: relative; z-index: 2; padding-inline-end: 25px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .description { font-size: 16px; line-height: 20px; font-weight: normal; margin-bottom: 10px; color: #34303d; display: block; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .link { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .link:empty { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .link::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .link:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .menuOverlay { background-color: rgba(52, 48, 61, 0.4); bottom: 0; height: calc(100vh - 77px); inset-inline-start: 0; position: absolute; inset-inline-end: 0; top: 77px; display: none; z-index: -1; } .header-main .menuHolder .menu .mobileOverlay { display: none; } .header-main .menuHolder .menu .menu-icon { display: none; } .header-main .menuHolder .menu .header-icons-menu { display: flex; align-items: center; gap: 20px; } @media (max-width: 768px) { .header-main .menuHolder .menu .header-icons-menu { gap: 7px; } } .header-main .menuHolder .menu .header-icons-menu .select-language * { text-transform: uppercase; } .header-main .menuHolder .menu .header-icons-menu .select-language.dropdown .dropdown-item { text-transform: uppercase; } .header-main .menuHolder .menu .account-actions-container.dropdown { position: relative; } .header-main .menuHolder .menu .account-actions-container.dropdown .user-icon { position: relative; background-color: transparent; border: none; width: 28px; aspect-ratio: 1; } .header-main .menuHolder .menu .account-actions-container.dropdown .user-icon::before { content: ""; position: absolute; inset: 0; width: 60%; margin: auto; mask-image: url(/images/icons/user.svg?v=ddXv4OVKODVgYMCSOdMmdLKEXSc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/user.svg?v=ddXv4OVKODVgYMCSOdMmdLKEXSc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); } .header-main .menuHolder .menu .account-actions-container.dropdown .user-icon::after { display: none; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; min-width: 200px; border: none; padding: 0; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item { display: flex; align-items: center; gap: 6px; font-size: 16px; color: #34303d; padding: 12px 16px; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item.active, .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item:hover { background-color: white; color: #00d1d2; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item img { max-width: 40px; aspect-ratio: 1; object-fit: contain; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item:hover { background-color: transparent; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item:hover span { text-decoration: underline; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown li:not(:last-child) .dropdown-item { border-bottom: solid 1px #dcdcdc; } .header-main .menuHolder .menu .shopping-cart-icon .cart-header-icon { position: relative; background-image: url(../../images/cart-icon.svg?v=k-8K6jIUSzdX4GUhNI7R9Ksd9LY); background-position: center center; background-size: contain; background-repeat: no-repeat; width: 35px; height: auto; min-height: 21px; display: block; } .header-main .menuHolder .menu .shopping-cart-icon .cart-header-icon span { position: absolute; height: 12px; width: 12px; background: #00d1d2; border-radius: 50%; bottom: 0; inset-inline-end: 3px; font-size: 9px; line-height: 12px; text-align: center; font-weight: bold; display: flex; justify-content: center; color: #34303d; } .header-main .menuHolder .menu-toggle { position: relative; width: 100%; height: 100%; background-color: transparent; border-radius: 50%; border: none; transition: all 0.6s ease; } .header-main .menuHolder .menu-toggle > div { position: relative; width: 36px; height: 12px; } @media (max-width: 768px) { .header-main .menuHolder .menu-toggle > div { width: 28px; height: 12px; } } .header-main .menuHolder .menu-toggle > div span { position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--main-color); transition: all 0.6s ease; transform-origin: center; } .header-main .menuHolder .menu-toggle > div span:nth-child(1) { top: 0; } .header-main .menuHolder .menu-toggle > div span:nth-child(2) { top: 100%; } .header-main .menuHolder .menu-toggle > div span:nth-child(3) { display: none; top: 100%; } .header-main .menuHolder .menu-toggle:hover > div span:nth-child(3) { width: 100%; } .header-main .menuHolder .menu-toggle[aria-expanded=true] > div span { top: 50%; } .header-main .menuHolder .menu-toggle[aria-expanded=true] > div span:nth-child(1) { transform: translate(0, -50%) rotate(45deg); } .header-main .menuHolder .menu-toggle[aria-expanded=true] > div span:nth-child(2) { transform: translate(0, -50%) rotate(-45deg); } .header-main .menuHolder .menu-toggle[aria-expanded=true] > div span:nth-child(3) { max-width: 0; left: 50%; transform: translate(0, -50%); } .header-sidebar { --sidebar-padding: var(--container-gutter-x); --menu-item-spacing: 8px; --back-btn-size: 24px; position: fixed; bottom: 0; left: 0; width: 100vw; height: calc(100dvh - var(--header-margin-top) + 2px); background-color: white; z-index: 500; transition: all 0.6s ease; translate: -100% 0; overflow: hidden; } .header-sidebar.visible { translate: 0 0; } .header-sidebar .container { height: 100%; padding-inline: var(--sidebar-padding); } .header-sidebar .header-container { height: 100%; overflow-y: auto; overflow-x: hidden; padding-block: var(--sidebar-padding); scrollbar-width: thin; scrollbar-color: #34303d transparent; display: unset; justify-content: unset; align-items: unset; flex-wrap: unset; } .header-sidebar .header-icons-menu { display: none; } .header-sidebar .menu-wrapper { display: block; flex: unset; margin-bottom: 0; } .header-sidebar .menu-wrapper.leftMenuWrapper { margin-bottom: 16px; } .header-sidebar .menuWrapper.toolkitMainMenu { display: flex; flex-direction: column; gap: var(--menu-item-spacing); } .header-sidebar .first-level { display: flex; flex-direction: column; } .header-sidebar .first-level .first-level-title { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; font-size: clamp(20px, 18.9678899083px + 0.2293577982vw, 22px); font-weight: 600; color: #34303d; text-decoration: none; border: none; background: none; } .header-sidebar .first-level .first-level-title::after { display: none; } .header-sidebar .first-level .first-level-desc { display: block !important; font-size: 14px; color: #666; margin-top: -8px; padding-bottom: 8px; margin: 0; line-height: 1.4; } .header-sidebar .first-level .first-level-desc:empty { display: none !important; } .header-sidebar .first-level.hasSubmenu .first-level-title::after { content: ""; display: block; mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 14px; aspect-ratio: 1; transform: scale(var(--flip-value)); flex-shrink: 0; rotate: unset; } .header-sidebar .secondLvl { position: fixed; left: 0; bottom: 0; width: 100vw; height: calc(100dvh - var(--header-margin-top)); max-height: unset; background-color: white; z-index: 400; padding: 0; translate: 100% 0 !important; opacity: 1; pointer-events: none; box-shadow: none; overflow: hidden; transition: translate 0.3s ease; } .header-sidebar .secondLvl.mobile-active { translate: 0 0 !important; pointer-events: all; } .header-sidebar .secondLvl .menuOverlay { display: none; } .header-sidebar .secondLvl .itemsBlock { flex-direction: column; gap: 0; padding: var(--sidebar-padding); padding-top: 0; height: 100%; overflow-y: auto; } .header-sidebar .secondLvl .menuBack { display: flex; align-items: center; gap: 16px; padding: 16px 0px; margin-bottom: 16px; border-bottom: 1px solid #eee; background-color: white; position: sticky; top: 0; z-index: 10; } .header-sidebar .secondLvl .menuBack .backBtn { width: var(--back-btn-size); height: var(--back-btn-size); transform: scale(var(--flip-value)); cursor: pointer; display: flex; align-items: center; justify-content: center; } .header-sidebar .secondLvl .menuBack .backBtn img { width: 100%; height: 100%; object-fit: contain; } .header-sidebar .secondLvl .menuBack .title { font-size: 16px; font-weight: 600; color: #34303d; } .header-sidebar .secondLvl .secondLevelWrapper { width: 100%; max-width: 100%; max-height: unset; overflow: visible; display: flex; flex-direction: column; gap: var(--menu-item-spacing); } .header-sidebar .secondLvl .scdSection { width: 100%; margin-bottom: 0; } .header-sidebar .secondLvl .scdSection > a { display: flex; align-items: center; gap: 10px; padding-block: 6px; font-size: clamp(20px, 18.9678899083px + 0.2293577982vw, 22px); font-weight: 600; color: #34303d; text-decoration: none; line-height: 1.3; } .header-sidebar .secondLvl .scdSection > a::before { display: none; } .header-sidebar .secondLvl .scdSection > a::after { display: none; } .header-sidebar .secondLvl .scdSection > a .ribbon { position: static; transform: none; margin-inline-start: 8px; } .header-sidebar .secondLvl .scdSection.hasSubmenu > a::after { content: ""; display: block; mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 16px; height: 16px; flex-shrink: 0; transform: scale(var(--flip-value)); } .header-sidebar .secondLvl .scdSection .scd-level-desc { font-size: clamp(13px, 11.9678899083px + 0.2293577982vw, 15px); } .header-sidebar .secondLvl .scdSection .scd-level-desc { line-height: 18px; } @media screen and (min-width: 420px) { .header-sidebar .secondLvl .scdSection .scd-level-desc { line-height: calc(18px + 2 * (100vw - 420px) / 1180); } } @media screen and (min-width: 1600px) { .header-sidebar .secondLvl .scdSection .scd-level-desc { line-height: 20px; } } .header-sidebar .secondLvl .scdSection .scd-level-desc { color: #34303d; font-weight: 400; margin: 0 0 6px; } .header-sidebar .secondLvl .scdSection .scd-level-desc:empty { display: none; } .header-sidebar .secondLvl .highlitedSection { position: static; max-width: 100%; flex: unset; margin-top: 24px; } .header-sidebar .secondLvl .highlitedSection .imageWrapper { margin-bottom: 16px; } .header-sidebar .secondLvl .highlitedSection .imageWrapper a { position: unset; inset: unset; display: block; width: 100%; overflow: hidden; } .header-sidebar .secondLvl .highlitedSection .imageWrapper a::before { display: none; } .header-sidebar .secondLvl .highlitedSection .imageWrapper a img { position: unset; inset: unset; width: 100%; height: auto; object-fit: cover; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .title { font-size: 16px; font-weight: 600; color: #34303d; margin-bottom: 8px; padding: 0; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .description { font-size: clamp(18px, 17.4839449541px + 0.1146788991vw, 19px); } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link:empty { display: none; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link { margin-top: 10px; } .header-sidebar .thirdLvl { position: fixed; left: 0; bottom: 0; width: 100vw; height: calc(100dvh - var(--header-margin-top)); max-height: unset; background-color: white; z-index: 500; padding: 0 var(--container-gutter-x); translate: 100% 0; opacity: 1; pointer-events: none; overflow: hidden; transition: translate 0.3s ease; } .header-sidebar .thirdLvl.mobile-active { display: block; translate: 0 0; pointer-events: all; } .header-sidebar .thirdLvl .menuBack { display: flex; align-items: center; gap: 16px; padding: 16px 0px; border-bottom: 1px solid #eee; background-color: white; position: sticky; top: 0; z-index: 10; } .header-sidebar .thirdLvl .menuBack .backBtn { width: var(--back-btn-size); height: var(--back-btn-size); transform: scale(var(--flip-value)); cursor: pointer; display: flex; align-items: center; justify-content: center; } .header-sidebar .thirdLvl .menuBack .backBtn img { width: 100%; height: 100%; object-fit: contain; } .header-sidebar .thirdLvl .menuBack .title { font-size: 16px; font-weight: 600; color: #34303d; } .header-sidebar .thirdLvl .thirdLevelItemWrapper { width: 100%; max-width: 100%; max-height: unset; overflow-y: auto; padding: var(--sidebar-padding); height: calc(100% - 60px); scrollbar-gutter: unset; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper { display: flex; flex-direction: column; margin-bottom: 8px; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage { border-bottom: 1px solid #eee; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage:last-child { border-bottom: none; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .imageWrapper { order: 2; flex: 0 0 40px; width: 40px; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .imageWrapper a { display: block; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .imageWrapper a img { width: 100%; aspect-ratio: 1; object-fit: contain; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .titleWrapper { order: 1; flex: 1 1 auto; padding-inline-end: 0; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .titleWrapper a.menuAnchor { font-size: 16px; font-weight: 600; color: #34303d; text-decoration: none; display: block; margin-bottom: 2px; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .titleWrapper p { font-size: 13px; color: #666; line-height: 1.3; margin: 0; } .header-sidebar .thirdLvl .thirdLvlItem:not(.withImage) { padding: 6px 0; } .header-sidebar .thirdLvl .thirdLvlItem:not(.withImage) a.menuAnchor { font-size: 16px; color: #34303d; text-decoration: none; display: block; } .header-sidebar .thirdLvl .highlitedSection.inner { position: static; max-width: 100%; margin-top: 24px; padding-top: 24px; border-top: 1px solid #eee; } .header-sidebar .thirdLvl .highlitedSection.inner .imageWrapper { margin-bottom: 16px; border-radius: 8px; overflow: hidden; } .header-sidebar .thirdLvl .highlitedSection.inner .imageWrapper a { display: block; } .header-sidebar .thirdLvl .highlitedSection.inner .imageWrapper a img { width: 100%; height: auto; object-fit: cover; } .header-sidebar .thirdLvl .highlitedSection.inner .highlitedInfo .title { font-size: 16px; font-weight: 600; color: #34303d; margin-bottom: 8px; } .header-sidebar .thirdLvl .highlitedSection.inner .highlitedInfo .description { font-size: 14px; color: #666; line-height: 1.4; margin-bottom: 12px; } .header-sidebar .thirdLvl .highlitedSection.inner .highlitedInfo .link { font-size: 14px; font-weight: 600; color: #34303d; } .banner-container { /* ======================================== GENERATED CLASSES REFERENCE ======================================== HORIZONTAL TEXT ALIGNMENT (All sizes — no media query): - .left-content-text-start - .left-content-text-center - .left-content-text-end - .right-content-text-start - .right-content-text-center - .right-content-text-end HORIZONTAL TEXT ALIGNMENT (Responsive prefixes — override base on smaller screens): - sm-{class} (max-width: 568px) - md-{class} (max-width: 768px) - lg-{class} (max-width: 992px) e.g. .lg-left-content-text-start, .md-right-content-text-end, etc. HORIZONTAL TEXT ALIGNMENT (Mobile — max-width: 992px): - .left-content-text-start-mobile - .left-content-text-end-mobile - .right-content-text-start-mobile - .right-content-text-end-mobile BLOCK MAX-WIDTH (Both sides): - .blocks-max-width-200 through .blocks-max-width-650 (200, 250, 300, 350, 400, 450, 500, 550, 600, 650) - sm-/md-/lg- prefixed variants available BLOCK MAX-WIDTH (Left side only): - .blocks-max-width-left-200 through .blocks-max-width-left-650 - sm-/md-/lg- prefixed variants available BLOCK MAX-WIDTH (Right side only): - .blocks-max-width-right-200 through .blocks-max-width-right-650 - sm-/md-/lg- prefixed variants available VERTICAL ALIGNMENT (Both sides): - .content-align-top - .content-align-center - .content-align-bottom - sm-/md-/lg- prefixed variants available VERTICAL ALIGNMENT (Left side only): - .content-left-align-top - .content-left-align-center - .content-left-align-bottom - sm-/md-/lg- prefixed variants available VERTICAL ALIGNMENT (Right side only): - .content-right-align-top - .content-right-align-center - .content-right-align-bottom - sm-/md-/lg- prefixed variants available CONTENT SIZE VARIANTS: - .content-small - .content-large OTHER MODIFIERS: - .show-banner-link - .content-dark - .order-left-image-first - .order-right-image-first - .swap-sides (swaps left/right block positions) - sm-/md-/lg- prefixed variants available for .swap-sides ======================================== */ --banner-aspect-ratio: 1340 / 670; --banner-aspect-ratio-mobile: 437 / 651; --content-text-color: var(--default-text-color); --content-left-text-alignment: center; --content-right-text-alignment: center; --content-left-buttons-alignment: center; --content-right-buttons-alignment: center; --banner-link-display: none; --block-left-max-width: 500px; --block-right-max-width: 500px; --content-left-vertical-align: center; --content-right-vertical-align: center; position: relative; --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #27242d; --default-text-color: white; --default-text-color-inverse: #34303d; color: var(--default-text-color); margin-top: -1px; position: relative; } .banner-container::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .banner-container.half-bg::before { height: 50%; } .banner-container > * { isolation: isolate; } .banner-container { width: 100%; aspect-ratio: var(--banner-aspect-ratio); } .banner-container.left-content-text-start { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.left-content-text-center { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.left-content-text-end { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.right-content-text-start { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.right-content-text-center { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.right-content-text-end { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container.blocks-max-width-200 { --block-left-max-width: 200px; --block-right-max-width: 200px; text-wrap: balance; } .banner-container.blocks-max-width-left-200 { --block-left-max-width: 200px; text-wrap: balance; } .banner-container.blocks-max-width-right-200 { --block-right-max-width: 200px; text-wrap: balance; } .banner-container.blocks-max-width-250 { --block-left-max-width: 250px; --block-right-max-width: 250px; text-wrap: balance; } .banner-container.blocks-max-width-left-250 { --block-left-max-width: 250px; text-wrap: balance; } .banner-container.blocks-max-width-right-250 { --block-right-max-width: 250px; text-wrap: balance; } .banner-container.blocks-max-width-300 { --block-left-max-width: 300px; --block-right-max-width: 300px; text-wrap: balance; } .banner-container.blocks-max-width-left-300 { --block-left-max-width: 300px; text-wrap: balance; } .banner-container.blocks-max-width-right-300 { --block-right-max-width: 300px; text-wrap: balance; } .banner-container.blocks-max-width-350 { --block-left-max-width: 350px; --block-right-max-width: 350px; text-wrap: balance; } .banner-container.blocks-max-width-left-350 { --block-left-max-width: 350px; text-wrap: balance; } .banner-container.blocks-max-width-right-350 { --block-right-max-width: 350px; text-wrap: balance; } .banner-container.blocks-max-width-400 { --block-left-max-width: 400px; --block-right-max-width: 400px; text-wrap: balance; } .banner-container.blocks-max-width-left-400 { --block-left-max-width: 400px; text-wrap: balance; } .banner-container.blocks-max-width-right-400 { --block-right-max-width: 400px; text-wrap: balance; } .banner-container.blocks-max-width-450 { --block-left-max-width: 450px; --block-right-max-width: 450px; text-wrap: balance; } .banner-container.blocks-max-width-left-450 { --block-left-max-width: 450px; text-wrap: balance; } .banner-container.blocks-max-width-right-450 { --block-right-max-width: 450px; text-wrap: balance; } .banner-container.blocks-max-width-500 { --block-left-max-width: 500px; --block-right-max-width: 500px; text-wrap: balance; } .banner-container.blocks-max-width-left-500 { --block-left-max-width: 500px; text-wrap: balance; } .banner-container.blocks-max-width-right-500 { --block-right-max-width: 500px; text-wrap: balance; } .banner-container.blocks-max-width-550 { --block-left-max-width: 550px; --block-right-max-width: 550px; text-wrap: balance; } .banner-container.blocks-max-width-left-550 { --block-left-max-width: 550px; text-wrap: balance; } .banner-container.blocks-max-width-right-550 { --block-right-max-width: 550px; text-wrap: balance; } .banner-container.blocks-max-width-600 { --block-left-max-width: 600px; --block-right-max-width: 600px; text-wrap: balance; } .banner-container.blocks-max-width-left-600 { --block-left-max-width: 600px; text-wrap: balance; } .banner-container.blocks-max-width-right-600 { --block-right-max-width: 600px; text-wrap: balance; } .banner-container.blocks-max-width-650 { --block-left-max-width: 650px; --block-right-max-width: 650px; text-wrap: balance; } .banner-container.blocks-max-width-left-650 { --block-left-max-width: 650px; text-wrap: balance; } .banner-container.blocks-max-width-right-650 { --block-right-max-width: 650px; text-wrap: balance; } .banner-container.content-align-top { --content-left-vertical-align: flex-start; --content-right-vertical-align: flex-start; } .banner-container.content-align-center { --content-left-vertical-align: center; --content-right-vertical-align: center; } .banner-container.content-align-bottom { --content-left-vertical-align: flex-end; --content-right-vertical-align: flex-end; } .banner-container.content-left-align-top { --content-left-vertical-align: flex-start; } .banner-container.content-left-align-center { --content-left-vertical-align: center; } .banner-container.content-left-align-bottom { --content-left-vertical-align: flex-end; } .banner-container.content-right-align-top { --content-right-vertical-align: flex-start; } .banner-container.content-right-align-center { --content-right-vertical-align: center; } .banner-container.content-right-align-bottom { --content-right-vertical-align: flex-end; } @media (max-width: 568px) { .banner-container.sm-left-content-text-start { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.sm-left-content-text-center { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.sm-left-content-text-end { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.sm-right-content-text-start { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.sm-right-content-text-center { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.sm-right-content-text-end { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container.sm-blocks-max-width-200 { --block-left-max-width: 200px; --block-right-max-width: 200px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-200 { --block-left-max-width: 200px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-200 { --block-right-max-width: 200px; text-wrap: balance; } .banner-container.sm-blocks-max-width-250 { --block-left-max-width: 250px; --block-right-max-width: 250px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-250 { --block-left-max-width: 250px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-250 { --block-right-max-width: 250px; text-wrap: balance; } .banner-container.sm-blocks-max-width-300 { --block-left-max-width: 300px; --block-right-max-width: 300px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-300 { --block-left-max-width: 300px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-300 { --block-right-max-width: 300px; text-wrap: balance; } .banner-container.sm-blocks-max-width-350 { --block-left-max-width: 350px; --block-right-max-width: 350px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-350 { --block-left-max-width: 350px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-350 { --block-right-max-width: 350px; text-wrap: balance; } .banner-container.sm-blocks-max-width-400 { --block-left-max-width: 400px; --block-right-max-width: 400px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-400 { --block-left-max-width: 400px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-400 { --block-right-max-width: 400px; text-wrap: balance; } .banner-container.sm-blocks-max-width-450 { --block-left-max-width: 450px; --block-right-max-width: 450px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-450 { --block-left-max-width: 450px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-450 { --block-right-max-width: 450px; text-wrap: balance; } .banner-container.sm-blocks-max-width-500 { --block-left-max-width: 500px; --block-right-max-width: 500px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-500 { --block-left-max-width: 500px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-500 { --block-right-max-width: 500px; text-wrap: balance; } .banner-container.sm-blocks-max-width-550 { --block-left-max-width: 550px; --block-right-max-width: 550px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-550 { --block-left-max-width: 550px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-550 { --block-right-max-width: 550px; text-wrap: balance; } .banner-container.sm-blocks-max-width-600 { --block-left-max-width: 600px; --block-right-max-width: 600px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-600 { --block-left-max-width: 600px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-600 { --block-right-max-width: 600px; text-wrap: balance; } .banner-container.sm-blocks-max-width-650 { --block-left-max-width: 650px; --block-right-max-width: 650px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-650 { --block-left-max-width: 650px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-650 { --block-right-max-width: 650px; text-wrap: balance; } .banner-container.sm-content-align-top { --content-left-vertical-align: flex-start; --content-right-vertical-align: flex-start; } .banner-container.sm-content-align-center { --content-left-vertical-align: center; --content-right-vertical-align: center; } .banner-container.sm-content-align-bottom { --content-left-vertical-align: flex-end; --content-right-vertical-align: flex-end; } .banner-container.sm-content-left-align-top { --content-left-vertical-align: flex-start; } .banner-container.sm-content-left-align-center { --content-left-vertical-align: center; } .banner-container.sm-content-left-align-bottom { --content-left-vertical-align: flex-end; } .banner-container.sm-content-right-align-top { --content-right-vertical-align: flex-start; } .banner-container.sm-content-right-align-center { --content-right-vertical-align: center; } .banner-container.sm-content-right-align-bottom { --content-right-vertical-align: flex-end; } } @media (max-width: 768px) { .banner-container.md-left-content-text-start { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.md-left-content-text-center { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.md-left-content-text-end { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.md-right-content-text-start { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.md-right-content-text-center { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.md-right-content-text-end { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container.md-blocks-max-width-200 { --block-left-max-width: 200px; --block-right-max-width: 200px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-200 { --block-left-max-width: 200px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-200 { --block-right-max-width: 200px; text-wrap: balance; } .banner-container.md-blocks-max-width-250 { --block-left-max-width: 250px; --block-right-max-width: 250px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-250 { --block-left-max-width: 250px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-250 { --block-right-max-width: 250px; text-wrap: balance; } .banner-container.md-blocks-max-width-300 { --block-left-max-width: 300px; --block-right-max-width: 300px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-300 { --block-left-max-width: 300px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-300 { --block-right-max-width: 300px; text-wrap: balance; } .banner-container.md-blocks-max-width-350 { --block-left-max-width: 350px; --block-right-max-width: 350px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-350 { --block-left-max-width: 350px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-350 { --block-right-max-width: 350px; text-wrap: balance; } .banner-container.md-blocks-max-width-400 { --block-left-max-width: 400px; --block-right-max-width: 400px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-400 { --block-left-max-width: 400px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-400 { --block-right-max-width: 400px; text-wrap: balance; } .banner-container.md-blocks-max-width-450 { --block-left-max-width: 450px; --block-right-max-width: 450px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-450 { --block-left-max-width: 450px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-450 { --block-right-max-width: 450px; text-wrap: balance; } .banner-container.md-blocks-max-width-500 { --block-left-max-width: 500px; --block-right-max-width: 500px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-500 { --block-left-max-width: 500px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-500 { --block-right-max-width: 500px; text-wrap: balance; } .banner-container.md-blocks-max-width-550 { --block-left-max-width: 550px; --block-right-max-width: 550px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-550 { --block-left-max-width: 550px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-550 { --block-right-max-width: 550px; text-wrap: balance; } .banner-container.md-blocks-max-width-600 { --block-left-max-width: 600px; --block-right-max-width: 600px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-600 { --block-left-max-width: 600px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-600 { --block-right-max-width: 600px; text-wrap: balance; } .banner-container.md-blocks-max-width-650 { --block-left-max-width: 650px; --block-right-max-width: 650px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-650 { --block-left-max-width: 650px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-650 { --block-right-max-width: 650px; text-wrap: balance; } .banner-container.md-content-align-top { --content-left-vertical-align: flex-start; --content-right-vertical-align: flex-start; } .banner-container.md-content-align-center { --content-left-vertical-align: center; --content-right-vertical-align: center; } .banner-container.md-content-align-bottom { --content-left-vertical-align: flex-end; --content-right-vertical-align: flex-end; } .banner-container.md-content-left-align-top { --content-left-vertical-align: flex-start; } .banner-container.md-content-left-align-center { --content-left-vertical-align: center; } .banner-container.md-content-left-align-bottom { --content-left-vertical-align: flex-end; } .banner-container.md-content-right-align-top { --content-right-vertical-align: flex-start; } .banner-container.md-content-right-align-center { --content-right-vertical-align: center; } .banner-container.md-content-right-align-bottom { --content-right-vertical-align: flex-end; } } @media (max-width: 992px) { .banner-container.lg-left-content-text-start { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.lg-left-content-text-center { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.lg-left-content-text-end { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.lg-right-content-text-start { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.lg-right-content-text-center { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.lg-right-content-text-end { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container.lg-blocks-max-width-200 { --block-left-max-width: 200px; --block-right-max-width: 200px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-200 { --block-left-max-width: 200px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-200 { --block-right-max-width: 200px; text-wrap: balance; } .banner-container.lg-blocks-max-width-250 { --block-left-max-width: 250px; --block-right-max-width: 250px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-250 { --block-left-max-width: 250px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-250 { --block-right-max-width: 250px; text-wrap: balance; } .banner-container.lg-blocks-max-width-300 { --block-left-max-width: 300px; --block-right-max-width: 300px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-300 { --block-left-max-width: 300px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-300 { --block-right-max-width: 300px; text-wrap: balance; } .banner-container.lg-blocks-max-width-350 { --block-left-max-width: 350px; --block-right-max-width: 350px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-350 { --block-left-max-width: 350px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-350 { --block-right-max-width: 350px; text-wrap: balance; } .banner-container.lg-blocks-max-width-400 { --block-left-max-width: 400px; --block-right-max-width: 400px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-400 { --block-left-max-width: 400px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-400 { --block-right-max-width: 400px; text-wrap: balance; } .banner-container.lg-blocks-max-width-450 { --block-left-max-width: 450px; --block-right-max-width: 450px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-450 { --block-left-max-width: 450px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-450 { --block-right-max-width: 450px; text-wrap: balance; } .banner-container.lg-blocks-max-width-500 { --block-left-max-width: 500px; --block-right-max-width: 500px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-500 { --block-left-max-width: 500px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-500 { --block-right-max-width: 500px; text-wrap: balance; } .banner-container.lg-blocks-max-width-550 { --block-left-max-width: 550px; --block-right-max-width: 550px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-550 { --block-left-max-width: 550px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-550 { --block-right-max-width: 550px; text-wrap: balance; } .banner-container.lg-blocks-max-width-600 { --block-left-max-width: 600px; --block-right-max-width: 600px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-600 { --block-left-max-width: 600px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-600 { --block-right-max-width: 600px; text-wrap: balance; } .banner-container.lg-blocks-max-width-650 { --block-left-max-width: 650px; --block-right-max-width: 650px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-650 { --block-left-max-width: 650px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-650 { --block-right-max-width: 650px; text-wrap: balance; } .banner-container.lg-content-align-top { --content-left-vertical-align: flex-start; --content-right-vertical-align: flex-start; } .banner-container.lg-content-align-center { --content-left-vertical-align: center; --content-right-vertical-align: center; } .banner-container.lg-content-align-bottom { --content-left-vertical-align: flex-end; --content-right-vertical-align: flex-end; } .banner-container.lg-content-left-align-top { --content-left-vertical-align: flex-start; } .banner-container.lg-content-left-align-center { --content-left-vertical-align: center; } .banner-container.lg-content-left-align-bottom { --content-left-vertical-align: flex-end; } .banner-container.lg-content-right-align-top { --content-right-vertical-align: flex-start; } .banner-container.lg-content-right-align-center { --content-right-vertical-align: center; } .banner-container.lg-content-right-align-bottom { --content-right-vertical-align: flex-end; } } @media (max-width: 992px) { .banner-container.left-content-text-start-mobile { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.left-content-text-center-mobile { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.left-content-text-end-mobile { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.right-content-text-start-mobile { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.right-content-text-center-mobile { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.right-content-text-end-mobile { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container { aspect-ratio: var(--banner-aspect-ratio-mobile); } } .banner-container.content-small .banner-content .content-info-container .content-info .banner-title { font-size: clamp(24px, 20.9036697248px + 0.6880733945vw, 30px); line-height: 1.3; margin-bottom: 10px; } .banner-container.content-small .banner-content .content-info-container .content-info .banner-title:empty { display: none; } .banner-container.content-small .banner-content .content-info-container .content-info .banner-subtitle { font-size: clamp(13px, 11.9678899083px + 0.2293577982vw, 15px); line-height: 1.4; } .banner-container.content-small .banner-content .content-info-container .content-info .banner-subtitle:empty { display: none; } .banner-container.content-small .banner-content .content-info-container .content-info .buttons-container { margin-top: 20px !important; } .banner-container.content-small .banner-content .content-info-container .content-info .banner-button { font-size: 12px !important; } .banner-container.content-large .banner-content .content-info-container .content-info .banner-title { font-size: clamp(30px, 19.6788990826px + 2.2935779817vw, 50px); line-height: 1.3; margin-bottom: 10px; font-weight: 400; } .banner-container.content-large .banner-content .content-info-container .content-info .banner-subtitle { font-size: clamp(15px, 13.4518348624px + 0.3440366972vw, 18px); line-height: 1.4; } .banner-container.content-large .banner-content .content-info-container .content-info .banner-description { font-size: clamp(17px, 15.4518348624px + 0.3440366972vw, 20px); line-height: 1.4; margin-bottom: 20px; } .banner-container.content-large .banner-content .content-info-container .content-info .content-logo-image { margin-bottom: 40px; } .banner-container.content-large .banner-content .content-info-container .content-info .buttons-container { margin-top: 20px !important; } .banner-container.show-banner-link { --banner-link-display: block; } .banner-container.content-dark { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #f6f4f0; margin-top: -1px; position: relative; } .banner-container.content-dark::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .banner-container.content-dark.half-bg::before { height: 50%; } .banner-container.content-dark > * { isolation: isolate; } .banner-container.electric-purple-banner .content-right { display: none; } .banner-container.electric-purple-banner .banner-content { justify-content: center !important; } .banner-container.electric-purple-banner .banner-content h3 { font-weight: 700; padding-block: 15px; } .banner-container.electric-purple-banner .banner-content img { max-width: 350px !important; } .banner-container.electric-purple-banner .banner-content .game-cta { display: inline-flex; overflow: hidden; border-radius: 20px; } .banner-container.electric-purple-banner .banner-content .game-cta a { background: white; padding: 10px 20px; color: rebeccapurple !important; transition: 0.2s ease-out; } .banner-container.electric-purple-banner .banner-content .game-cta a:first-child { border-inline-end: rgba(0, 0, 0, 0.1215686275) 1px solid; } .banner-container.electric-purple-banner .banner-content .content-bottom-wrapper { color: rgba(255, 255, 255, 0.6509803922) !important; } .banner-container.electric-purple-banner .banner-content .content-bottom-wrapper a { color: rgba(255, 255, 255, 0.6509803922) !important; } .banner-container.electric-purple-banner .banner-content .content-bottom-wrapper p { padding-top: 20px; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 0px; bottom: 3%; left: 50%; } .banner-container.electric-purple-banner .banner-content .content-bottom-wrapper p::after { content: ""; display: block; width: 20px; height: 20px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); opacity: 0.7; animation: scrollBounce 2s ease-in-out infinite; } @media (max-width: 768px) { .banner-container.electric-purple-banner .banner-content .banner-description img { max-width: 200px !important; } .banner-container.electric-purple-banner .banner-content .content-body h3 { font-size: 28px !important; } .banner-container.electric-purple-banner .banner-content .content-body p { padding-top: 10px; font-size: 14px !important; margin-inline: 15% !important; } } .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description img { max-width: 350px !important; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description img { max-width: 450px !important; } .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description p { display: block; font-size: clamp(16px, 2.5vw, 20px); padding-block: 10px; } .banner-container.electric-purple-homebanner .banner-content-container .banner-content .content-bottom-wrapper { left: 0; translate: 0 0; text-align: start; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description p { display: none; } .banner-container.electric-purple-homebanner .content-right .content-info .buttons-container { display: none; } @media (max-width: 992px) { .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description { text-align: center !important; } .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description img { max-width: 250px !important; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description img { max-width: 350px !important; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description p { display: block; } .banner-container.electric-purple-homebanner .content-right .content-info .buttons-container { display: block; } .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description p { display: none; } .banner-container.electric-purple-homebanner .content-left .content-info .buttons-container { display: none; } .banner-container.electric-purple-homebanner .banner-content-container .banner-content .content-bottom-wrapper { text-align: center; } } @media (max-width: 1100px) { .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description img { max-width: 270px !important; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description img { max-width: 90% !important; } } .banner-container.delia-boost-promo-banner .content-right { display: none; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content { position: unset; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left { width: 100%; max-width: unset; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles { display: flex; width: 100%; gap: 48px; padding-inline: 60px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title { max-height: 100%; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img { max-width: 500px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img:last-child { display: none; } @media (max-width: 1400px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img { max-height: 80%; } } @media (max-width: 1200px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles { padding-inline: 0; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img { max-width: 350px; max-height: unset; } } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle { display: flex; flex-direction: column; width: 100%; align-items: start; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle img { position: absolute; right: 0; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle .img-desktop { display: block; } @media (max-width: 992px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle .img-desktop { max-width: 35%; } } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle .img-mobile { display: none; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle h3 { font-size: clamp(24px, 10.5825688073px + 2.9816513761vw, 50px); font-weight: 600; margin-bottom: 10px; max-width: 350px; margin-top: 33%; text-align: start; } @media (max-width: 1100px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle h3 { margin-top: 20%; } } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle p { font-size: clamp(16px, 10.8394495413px + 1.1467889908vw, 26px); text-align: start; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle a { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle a:empty { display: none; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle a:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle a { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); margin-top: 20px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-bottom-wrapper { bottom: 23px; max-width: 1100px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-bottom-wrapper div { font-size: 11px; max-width: 100%; text-align: start; } @media (max-width: 1100px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-bottom-wrapper { padding-inline: 15px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-bottom-wrapper div { font-size: 7px; } } @media (max-width: 992px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles { flex-direction: column-reverse; gap: 10px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title { max-height: fit-content; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img { max-width: 300px; width: 90%; margin: auto; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img:last-child { display: block; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img:first-child { display: none; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle { max-width: 247px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle h3 { margin-top: 0; } } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-logo-image img { max-width: fit-content !important; } @media (max-width: 1400px) { .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-logo-image img { max-height: 300px !important; } } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-body .banner-description img:first-child { display: none; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right h3 { font-weight: 600; font-size: clamp(36px, 3vw, 42px); } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right p { font-size: clamp(22px, 2.5vw, 26px); padding-top: 10px; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-bottom-wrapper { font-size: 11px; max-width: 1300px !important; } @media (max-width: 992px) { .banner-container.delia-boost-home-banner .banner-content-container .banner-content { flex-direction: column-reverse; position: unset; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right { max-width: unset; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-body .banner-description img { position: absolute; right: 0; top: 25%; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-body .banner-description img:first-child { display: block; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-body .banner-description img:last-child { display: none; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content h3 { font-size: clamp(14px, 5vw, 36px); } .banner-container.delia-boost-home-banner .banner-content-container .banner-content p { font-size: clamp(12px, 3vw, 22px); padding-top: 10px; } .banner-container.delia-boost-home-banner .content-info-container.content-left { max-width: unset !important; text-align: center !important; } .banner-container.delia-boost-home-banner .content-info-container.content-left .content-info .content-images .content-logo-image { padding-bottom: 3% !important; } .banner-container.delia-boost-home-banner .content-info-container.content-left .content-info .content-images .content-logo-image img { max-width: unset !important; max-height: unset !important; } } .banner-container.forever-curious-26 .content-right { display: none; } .banner-container.forever-curious-26 .content-left { max-width: fit-content !important; } .banner-container.forever-curious-26 .banner-content { justify-content: center !important; } .banner-container.forever-curious-26 .banner-content .banner-title { display: inline-flex !important; align-items: center; } .banner-container.forever-curious-26 .banner-content img { max-width: 280px !important; margin-inline: 10px; } @media (max-width: 992px) { .banner-container.forever-curious-26 .banner-content .content-info-container.content-left { display: flex; flex-direction: column; flex: 1 1 auto; } .banner-container.forever-curious-26 .banner-content .content-info { flex: 1 1 auto; } .banner-container.forever-curious-26 .banner-content .buttons-container { margin-top: auto !important; } } @media (max-width: 768px) { .banner-container.forever-curious-26 .banner-content .banner-title { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; width: 100%; } .banner-container.forever-curious-26 .banner-content .banner-title span { font-size: 29px !important; } .banner-container.forever-curious-26 .banner-content .banner-title span:first-child { padding-inline-end: 20% !important; } .banner-container.forever-curious-26 .banner-content .banner-title span:last-child { padding-inline-start: 20% !important; } .banner-container.forever-curious-26 .banner-content img { max-width: 170px !important; } } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle p { font-size: clamp(21px, 2.5vw, 33px); } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle img { display: none; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle span { display: block; margin-top: 15px; width: 100%; font-weight: bold; font-size: 47px; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-right .content-titles .banner-subtitle p { font-size: clamp(16px, 2.5vw, 21px); } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-right .content-titles .banner-subtitle img { max-width: 300px !important; } @media (max-width: 992px) { .banner-container.firmware-promo-banner .banner-content-container .banner-content { justify-content: flex-start !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-info { align-items: center !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle { text-align: center !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { display: block; max-width: 250px !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-right .content-titles .banner-subtitle { padding-top: 10px; text-align: center !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-right .content-titles .banner-subtitle img { display: none; } } .banner-container.delia-green-banner .banner-content { justify-content: center !important; gap: 20px; } .banner-container.delia-green-banner .banner-content .content-left img { max-width: 500px !important; } @media (max-width: 1500px) { .banner-container.delia-green-banner .banner-content .content-left img { max-width: 400px !important; } } @media (max-width: 1200px) { .banner-container.delia-green-banner .banner-content .content-left img { max-width: 300px !important; } } .banner-container.delia-green-banner .banner-content .content-right img:first-child { display: none; } .banner-container.delia-green-banner .banner-content .content-right img { max-width: 140px !important; padding-bottom: 10px !important; } @media (max-width: 1500px) { .banner-container.delia-green-banner .banner-content .content-right img { max-width: 120px !important; } } .banner-container.delia-green-banner .banner-content .content-right h2 { font-size: clamp(28px, 3vw, 46px); font-weight: 600; } .banner-container.delia-green-banner .banner-content .content-right p { font-size: clamp(16px, 2.5vw, 21px); } .banner-container.delia-green-banner .content-bottom-wrapper { font-size: 10px !important; } @media (max-width: 1600px) { .banner-container.delia-green-banner .content-bottom-wrapper { font-size: 9px !important; } } @media (max-width: 700px) { .banner-container.delia-green-banner .content-bottom-wrapper { font-size: 8px !important; } } @media (max-width: 992px) { .banner-container.delia-green-banner .banner-content { flex-direction: column-reverse !important; justify-content: space-between !important; padding-block: 20px 46px !important; } .banner-container.delia-green-banner .banner-content .content-left img { max-width: 400px !important; width: 100% !important; } .banner-container.delia-green-banner .banner-content .content-right img:first-child { display: block; position: absolute; top: 23%; right: calc(-1 * var(--container-gutter-x)); } .banner-container.delia-green-banner .banner-content .content-right img:nth-child(2) { display: none; } .banner-container.delia-green-banner .banner-content .content-right img { max-width: 150px !important; } .banner-container.delia-green-banner .banner-content .content-right h2 { font-size: clamp(28px, 3vw, 48px); } .banner-container.delia-green-banner .banner-content .content-right p { font-size: clamp(16px, 2.5vw, 21px); } } .banner-container.summer-campaign-home-banner .banner-content { position: unset !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right { position: unset !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-images img { max-width: 150px !important; position: absolute; right: 0; bottom: 0; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img { position: absolute; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:last-child { max-width: 600px !important; top: 50%; transform: translate(-50%, -50%); left: 50%; } @media (max-width: 1400px) { .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:last-child { max-width: 450px !important; } } @media (max-width: 1260px) { .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:last-child { max-width: 300px !important; } } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1), .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(2) { top: 26%; left: 57%; transform: translate(-50%, -50%); z-index: 1; } @media (max-width: 1400px) { .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1), .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(2) { max-width: 150px !important; } } @media (max-width: 1260px) { .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1), .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(2) { max-width: 100px !important; } } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1) { display: none; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description { display: flex; flex-direction: column; align-items: center; font-size: clamp(16px, 1.5vw, 21px); } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description p { max-width: fit-content; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description p:last-child { display: none; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .banner-title { font-size: clamp(28px, 2.5vw, 46px); } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .banner-subtitle { font-size: clamp(16px, 1.5vw, 21px); } .banner-container.summer-campaign-home-banner .banner-content .content-bottom-wrapper { max-width: calc(1324px + var(--container-gutter-x)) !important; text-align: start !important; padding-inline: var(--container-gutter-x) !important; } @media (max-width: 1400px) { .banner-container.summer-campaign-home-banner .banner-content .content-bottom-wrapper { max-width: 1140px !important; } } @media (max-width: 1200px) { .banner-container.summer-campaign-home-banner .banner-content .content-bottom-wrapper { max-width: 960px !important; } } @media (max-width: 992px) { .banner-container.summer-campaign-home-banner .banner-content { flex-direction: column !important; justify-content: space-between !important; align-items: center !important; padding-block: 20px 46px !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left { text-align: center !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .buttons-container { justify-content: center !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .content-titles .banner-title { font-size: clamp(28px, 3vw, 46px); } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle { font-size: clamp(16px, 2.5vw, 21px); } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right { position: unset !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-images img { position: absolute; right: 0; bottom: 0; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img { position: absolute; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:last-child { max-width: 80% !important; top: 50%; transform: translate(-50%, -50%); left: 50%; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1), .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(2) { max-width: 20% !important; top: 35%; left: 65%; transform: translate(-50%, -50%); z-index: 1; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1) { display: none; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description { align-items: start !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description p { display: block !important; } .banner-container.summer-campaign-home-banner .banner-content .content-bottom-wrapper { display: none !important; } } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner .banner-content { justify-content: center !important; } } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-right { display: none; } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left { margin-inline: auto; } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-title { font-size: clamp(28px, 2.5vw, 46px); } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle { font-size: clamp(16px, 1.5vw, 21px); } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img { position: absolute; } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:first-child { max-width: 600px !important; top: 50%; transform: translate(-50%, -50%); left: 50%; z-index: -1; } @media (max-width: 1400px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:first-child { max-width: 450px !important; } } @media (max-width: 1260px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:first-child { max-width: 300px !important; } } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:first-child { max-width: 90% !important; } } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:last-child { right: 0; bottom: 0; max-width: 150px !important; } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:last-child { max-width: 100px !important; } } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle p { font-weight: 400; font-size: clamp(16px, 1.5vw, 18px); } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle p:first-of-type { font-weight: 600; font-size: clamp(20px, 2vw, 24px); } .banner-container.summer-campaign-club-promo-banner .banner-content .content-bottom-wrapper { max-width: calc(1324px + var(--container-gutter-x)) !important; text-align: start !important; padding-inline: var(--container-gutter-x) !important; padding-block: 0 20px !important; } @media (max-width: 1400px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-bottom-wrapper { max-width: 1140px !important; } } @media (max-width: 1200px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-bottom-wrapper { max-width: 960px !important; } } .banner-container.summer-campaign-club-promo-banner.non-responsive-version .content-left { margin: unset; margin-top: 26%; } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner.non-responsive-version .content-left { margin-top: 57%; } } .banner-container.summer-campaign-club-promo-banner.non-responsive-version .banner-subtitle2 { margin-top: 10px !important; } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner.non-responsive-version .banner-subtitle2 { margin-top: 5px !important; } .banner-container.summer-campaign-club-promo-banner.non-responsive-version .banner-subtitle2 a { font-size: 9px; } } @media (max-width: 992px) { .banner-container.remix-home-banner .banner-content-container { height: 100%; } .banner-container.remix-home-banner .banner-content-container .content-info .content-logo-image { margin-bottom: 10% !important; } .banner-container.remix-home-banner .banner-content-container .content-info .banner-description { margin-bottom: 10px !important; text-align: center; } .banner-container.remix-home-banner .banner-content-container .content-info .banner-description p { font-size: 23px; } .banner-container.remix-home-banner .banner-content-container .content-info .banner-description p br { display: none; } .banner-container.remix-home-banner .banner-content-container .content-info .buttons-container { margin-top: 0 !important; } .banner-container.remix-home-banner .banner-content-container .content-info .buttons-container a { font-size: 13px; } } .banner-container.remix-home-banner .content-info-container.content-left .content-info .content-body .banner-description p { font-size: clamp(16px, 1.5vw, 19px) !important; } .banner-container.remix-home-banner .content-info-container.content-left .content-info .content-images .content-logo-image.left img { max-width: 300px !important; } @media (max-width: 992px) { .banner-container.remix-home-banner .content-info-container.content-left .content-info { align-items: center !important; } } .banner-container.remix-promo-banner .content-info-container.content-left .content-info .banner-subtitle p { font-size: clamp(16px, 1.5vw, 21px) !important; margin-top: 20px !important; } .banner-container.remix-promo-banner .content-info-container.content-left .content-info .banner-subtitle img { max-width: 250px !important; } @media (max-width: 992px) { .banner-container.remix-promo-banner .content-info-container.content-left .content-info { align-items: center !important; } } .banner-container.remix-home-banner-second { overflow: hidden; } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content { flex-direction: column-reverse !important; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left :has(.banner-subtitle) { position: relative; } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { max-width: 540px; position: absolute; bottom: -40%; left: 0; } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { max-width: 400px; bottom: -30%; left: 50%; translate: -50% 0; z-index: 1; } } @media (min-width: 850px) and (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { max-width: 350px; bottom: -30%; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { position: absolute; max-width: 550px; left: 50%; translate: -50% 0; top: -220px; } @media (max-width: 1200px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { max-width: 400px; top: -100px; } } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { max-width: 100%; translate: -50% -40%; } } @media (max-width: 500px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { translate: -50% -30%; } } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right { text-align: center !important; z-index: 2; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) img { max-width: 300px; } @media (max-width: 768px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) img { max-width: 250px; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) h2 { padding-top: 30px; font-size: clamp(28px, 2.5vw, 46px); font-weight: 600; } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) h2 { font-size: clamp(24px, 3vw, 36px); padding-top: 20px; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) h3 { padding-bottom: 10px; } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) a.button-primary-filled { margin-bottom: 30px; } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) p { font-size: clamp(21px, 1.5vw, 28px); font-weight: 400; margin-bottom: unset; } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) p a { font-weight: 300; font-size: clamp(16px, 1.5vw, 21px); } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) p { position: absolute; bottom: 25px; width: 100%; left: 50%; translate: -50% 0; } } .banner-container.bonds-home-banner { --banner-aspect-ratio: 1920 / 810; --banner-aspect-ratio-mobile: 420 / 680; aspect-ratio: 1920/810; --bonds-inline-inset: 4.25%; --block-right-max-width: 39.8vw; overflow: hidden; } .banner-container.bonds-home-banner::after { content: ""; position: absolute; top: 0; right: 0; width: 10.31%; aspect-ratio: 198/196; background-image: url("/images/bonds/iqos-logo.svg?v=lVgqVnYzHftOWURDJln7WsU36GY"), url("/images/bonds/logo-pebble.png?v=JKZU_kqkBROcxtLtKHYAu2NKAug"); background-repeat: no-repeat, no-repeat; background-size: 51.52% auto, 100% 100%; background-position: 51.04% 45.27%, 0 0; z-index: 30; pointer-events: none; } @media (max-width: 992px) { .banner-container.bonds-home-banner::after { width: 29.76%; aspect-ratio: 1; background-size: 53.6% auto, 100% 100%; background-position: 55.17% 43.83%, 0 0; } } .banner-container.bonds-home-banner .banner-content-container .container { max-width: none; padding-inline: 0; } .banner-container.bonds-home-banner .banner-content-container .banner-content { position: static; --inline-padding: var(--bonds-inline-inset); } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left { margin-bottom: 0; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { position: absolute; inset-block: 0; left: 0; width: 86.98%; height: 100%; max-width: none; object-fit: cover; object-position: left center; z-index: -1; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description h2 { font-size: 3.4vw; font-weight: 600; line-height: 1.12; margin-bottom: 0.3em; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description h2 span { display: block; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description h2 span:last-child:not(:first-child) { text-align: end; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description p { font-size: 1.6vw; font-weight: 400; line-height: 1.4; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-images .content-logo-image.right { position: absolute; right: var(--bonds-inline-inset); bottom: 8.27%; margin-bottom: 0; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-images .content-logo-image.right img { width: 12.35vw; max-width: none; } @media (max-width: 992px) { .banner-container.bonds-home-banner { --block-right-max-width: 100%; aspect-ratio: 420/680; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { width: 100%; height: 93.24%; inset-block: 0 auto; object-position: center top; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right { padding-block-end: 15.7vw; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description h2 { font-size: min(7.86vw, 58px); } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description p { font-size: min(3.81vw, 28px); } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-images .content-logo-image.right { bottom: 3.97%; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-images .content-logo-image.right img { width: 34.3vw; } } .banner-container:is(.order-left-image-first .content-info-container.content-left, .order-right-image-first .content-info-container.content-right) .content-info-container.content-left .content-titles { order: 2; } .banner-container:is(.order-left-image-first .content-info-container.content-left, .order-right-image-first .content-info-container.content-right) .content-info-container.content-left .content-logo-image { order: 1; } .banner-container:is(.order-left-image-first .content-info-container.content-left, .order-right-image-first .content-info-container.content-right) .content-info-container.content-left .buttons-container { order: 3; } .banner-container.swap-sides .banner-content { flex-direction: row-reverse !important; } @media (max-width: 992px) { .banner-container.swap-sides-mobile .banner-content { flex-direction: column-reverse !important; } } .banner-container p:last-child { margin: 0; } .banner-container .banner-link { position: absolute; inset: 0; z-index: 1000; cursor: pointer; display: var(--banner-link-display); } .banner-container .banner-media-container { position: relative; height: 100%; width: 100%; z-index: 10; } .banner-container .banner-content-container { position: absolute; inset: 0; z-index: 20; } .banner-container .banner-content-container .container { height: 100%; width: 100%; } .banner-container .banner-content-container .banner-content { position: relative; position: relative; z-index: 2; --section-pt: calc(100px - 20px); --section-pb: calc(100px - 20px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; color: var(--content-color); padding-inline: var(--inline-padding); } @media (max-width: 992px) { .banner-container .banner-content-container .banner-content { flex-direction: column; padding-block: 20px 46px; } } .banner-container .banner-content-container .banner-content:not(:has(.content-left)) { justify-content: end; } .banner-container .banner-content-container .banner-content .content-info-container { color: var(--content-text-color); max-width: 500px; width: 100%; align-self: center; } .banner-container .banner-content-container .banner-content .content-info-container img { max-width: 200px; } .banner-container .banner-content-container .banner-content .content-info-container .content-info { display: flex; flex-direction: column; } .banner-container .banner-content-container .banner-content .content-info-container.content-left { text-align: var(--content-left-text-alignment); max-width: var(--block-left-max-width); align-self: var(--content-left-vertical-align); } .banner-container .banner-content-container .banner-content .content-info-container.content-left .buttons-container { justify-content: var(--content-left-buttons-alignment); } .banner-container .banner-content-container .banner-content .content-info-container.content-right { text-align: var(--content-right-text-alignment); max-width: var(--block-right-max-width); align-self: var(--content-right-vertical-align); } .banner-container .banner-content-container .banner-content .content-info-container.content-right .buttons-container { justify-content: var(--content-right-buttons-alignment); } .banner-container .banner-content-container .banner-content .content-info-container .banner-title { font-weight: 600; font-size: clamp(24px, 18.3233944954px + 1.2614678899vw, 35px); line-height: 1.3; margin-bottom: 16px; } .banner-container .banner-content-container .banner-content .content-info-container .banner-title:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle { font-size: clamp(15px, 13.4518348624px + 0.3440366972vw, 18px); line-height: 1.4; } .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle2 { font-size: clamp(13px, 11.4518348624px + 0.3440366972vw, 16px); line-height: 1.4; margin-top: 20px; } @media (max-width: 768px) { .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle2 { margin-top: 10px; } } .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle2:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .buttons-container { margin-top: 20px; } @media (max-width: 768px) { .banner-container .banner-content-container .banner-content .content-info-container .buttons-container { margin-top: 10px; } } .banner-container .banner-content-container .banner-content .content-info-container .content-logo-image { margin-bottom: 20px; } .banner-container .banner-content-container .banner-content .content-info-container .content-logo-image img { max-width: min(240px, 40vw); } .banner-container .banner-content-container .banner-content .content-info-container .content-logo-image img[src=""] { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .content-logo-image:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.one { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.one:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.one:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.one { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.two { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.two:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.two:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.two { --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } @media (max-width: 768px) { .banner-container .banner-content-container .banner-content .content-info-container .banner-button { font-size: 14px !important; } } .banner-container .banner-content-container .banner-content .content-bottom-wrapper { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; width: 100%; max-width: 900px; text-align: center; font-size: clamp(12px, 10.9678899083px + 0.2293577982vw, 14px); } .banner-container .banner-content-container .banner-content .content-bottom-wrapper:has(div:empty) { display: none; } .swiper-homepage-banner-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== HEIGHT MODIFIERS: - .h-100vh (min(100vh, 700px)) - .h-300 (300px) - .h-400 (400px) - .h-500 (500px) - .h-600 (600px) - .h-700 (700px) LAYOUT MODIFIERS: - .page-banner ======================================== */ position: relative; --outer-banner-height: 100vh; } .swiper-homepage-banner-section .banner-container { --banner-aspect-ratio: 1470 / 430; --banner-aspect-ratio-mobile: 437 / 651; --banner-height: 600px; } .swiper-homepage-banner-section.page-banner { --banner-height: var(--outer-banner-height); --banner-aspect-ratio: unset; --banner-aspect-ratio-mobile: unset; } .swiper-homepage-banner-section.page-banner .banner-container { height: var(--outer-banner-height); } .swiper-homepage-banner-section.h-100vh { --outer-banner-height: min(100vh, 700px); } .swiper-homepage-banner-section.h-300 { --outer-banner-height: 300px; } .swiper-homepage-banner-section.h-400 { --outer-banner-height: 400px; } .swiper-homepage-banner-section.h-500 { --outer-banner-height: 500px; } .swiper-homepage-banner-section.h-600 { --outer-banner-height: 600px; } .swiper-homepage-banner-section.h-700 { --outer-banner-height: 700px; } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container { --banner-height: auto; height: var(--banner-height); aspect-ratio: unset !important; } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container { position: static; height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .video-container, .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .img-container { height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .video-container img, .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .video-container video, .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .img-container img, .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .img-container video { height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-content-container { top: 50%; translate: 0 -50%; left: 0; } @media (max-width: 992px) { .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container { --banner-height: auto; height: var(--banner-height); aspect-ratio: unset !important; } .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container { position: static; height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .video-container, .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .img-container { height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .video-container img, .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .video-container video, .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .img-container img, .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .img-container video { height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-content-container { top: 5%; left: 0; } } .tabs-banner-section { position: relative; overflow: hidden; } @media (max-width: 992px) { .tabs-banner-section .container { padding: 0; } } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-wrapper { display: flex; align-items: center; justify-content: center; } @media (max-width: 992px) { .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-wrapper { justify-content: start !important; } } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide { width: auto; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab:empty { display: none; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab p { margin-bottom: 16px; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab p:last-child { margin-bottom: 0; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab ul, .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab li { list-style: disc; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab { font-weight: 600; padding: 10px 16px; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.6s ease; } @media (max-width: 992px) { .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab { text-align: center; } } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide.swiper-slide-thumb-active .slider-tab { border-color: var(--default-text-color); } .tabs-banner-section .tabs-banner-container .tabs-banner-swiper { --inline-padding: 50px; } @media (max-width: 992px) { .tabs-banner-section .tabs-banner-container .tabs-banner-swiper { --inline-padding: var(--container-gutter-x); } } .tabs-banner-section .tabs-banner-container .tabs-banner-swiper .banner-container { --banner-aspect-ratio: 1340 / 670; --banner-aspect-ratio-mobile: 437 / 651; } .tabs-banner-section .tabs-banner-container .tabs-banner-swiper .swiper-pagination { position: absolute; inset-inline: var(--inline-padding); bottom: var(--inline-padding); margin: 0; text-align: left; width: unset; } @media (max-width: 992px) { .tabs-banner-section .tabs-banner-container .tabs-banner-swiper .swiper-pagination { bottom: 24px; text-align: center; } } .text-default-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== ALIGNMENT MODIFIERS: - .center (centers text and buttons, auto margin) WIDTH MODIFIERS: - .no-max-width (removes max-width constraint) ======================================== */ --container-max-width: 900px; --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .text-default-section.center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .text-default-section.no-max-width { --container-max-width: unset; } .text-default-section .text-default-container { max-width: var(--container-max-width); text-align: var(--text-align); margin-inline: var(--container-inline-margin); } .text-default-section .text-default-container .titles-container { max-width: var(--container-max-width); } .text-default-section .text-default-container.center { max-width: 1000px; margin-inline: auto; text-align: center; } .text-default-section .text-default-container .buttons-container { justify-content: var(--buttons-align); } .fullbleed-banner-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== ALIGNMENT MODIFIERS: - .center (centers text and buttons, auto margin) - .align-start (resets to start-aligned) - sm-/md-/lg- prefixed variants available WIDTH MODIFIERS: - .no-max-width (removes max-width constraint) - sm-/md-/lg- prefixed variants available VERTICAL ALIGNMENT (applies when section is a flex container, e.g. .page-banner): - .content-top - .content-center - .content-bottom - sm-/md-/lg- prefixed variants available LAYOUT MODIFIERS: - .img-ratio (static image, absolute content) - .page-banner (full viewport height with max-height) - .shift-content-down (adds top margin to content on desktop) - .custom-bonds-title (custom title font size) HEIGHT MODIFIERS: - .h-xs (200px) - .h-sm (300px) - .h-md (530px) - .h-lg (600px) - sm-/md-/lg- prefixed variants available ======================================== */ position: relative; --text-align: start; --buttons-align: start; --container-inline-margin: 0; --container-max-width: max(700px, 50%); --content-position: static; --img-position: absolute; --content-vertical-align: center; } .fullbleed-banner-section.center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .fullbleed-banner-section.align-start { --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .fullbleed-banner-section.align-end { --text-align: start; --buttons-align: start; --container-inline-margin: auto 0; } .fullbleed-banner-section.no-max-width { --container-max-width: unset; } .fullbleed-banner-section.max-w-xs { --container-max-width: 200px; } .fullbleed-banner-section.max-w-sm { --container-max-width: 350px; } .fullbleed-banner-section.max-w-md { --container-max-width: 500px; } .fullbleed-banner-section.max-w-lg { --container-max-width: 650px; } .fullbleed-banner-section.h-xs { --banner-height: 200px; } .fullbleed-banner-section.h-sm { --banner-height: 300px; } .fullbleed-banner-section.h-md { --banner-height: 530px; } .fullbleed-banner-section.h-lg { --banner-height: 600px; } .fullbleed-banner-section.content-top { --content-vertical-align: flex-start; } .fullbleed-banner-section.content-center { --content-vertical-align: center; } .fullbleed-banner-section.content-bottom { --content-vertical-align: flex-end; } @media (max-width: 568px) { .fullbleed-banner-section.sm-center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .fullbleed-banner-section.sm-align-start { --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .fullbleed-banner-section.sm-align-end { --text-align: start; --buttons-align: start; --container-inline-margin: auto 0; } .fullbleed-banner-section.sm-no-max-width { --container-max-width: unset; } .fullbleed-banner-section.sm-max-w-xs { --container-max-width: 200px; } .fullbleed-banner-section.sm-max-w-sm { --container-max-width: 350px; } .fullbleed-banner-section.sm-max-w-md { --container-max-width: 500px; } .fullbleed-banner-section.sm-max-w-lg { --container-max-width: 650px; } .fullbleed-banner-section.sm-h-xs { --banner-height: 200px; } .fullbleed-banner-section.sm-h-sm { --banner-height: 300px; } .fullbleed-banner-section.sm-h-md { --banner-height: 530px; } .fullbleed-banner-section.sm-h-lg { --banner-height: 600px; } .fullbleed-banner-section.sm-content-top { --content-vertical-align: flex-start; } .fullbleed-banner-section.sm-content-center { --content-vertical-align: center; } .fullbleed-banner-section.sm-content-bottom { --content-vertical-align: flex-end; } } @media (max-width: 768px) { .fullbleed-banner-section.md-center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .fullbleed-banner-section.md-align-start { --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .fullbleed-banner-section.md-align-end { --text-align: start; --buttons-align: start; --container-inline-margin: auto 0; } .fullbleed-banner-section.md-no-max-width { --container-max-width: unset; } .fullbleed-banner-section.md-max-w-xs { --container-max-width: 200px; } .fullbleed-banner-section.md-max-w-sm { --container-max-width: 350px; } .fullbleed-banner-section.md-max-w-md { --container-max-width: 500px; } .fullbleed-banner-section.md-max-w-lg { --container-max-width: 650px; } .fullbleed-banner-section.md-h-xs { --banner-height: 200px; } .fullbleed-banner-section.md-h-sm { --banner-height: 300px; } .fullbleed-banner-section.md-h-md { --banner-height: 530px; } .fullbleed-banner-section.md-h-lg { --banner-height: 600px; } .fullbleed-banner-section.md-content-top { --content-vertical-align: flex-start; } .fullbleed-banner-section.md-content-center { --content-vertical-align: center; } .fullbleed-banner-section.md-content-bottom { --content-vertical-align: flex-end; } } @media (max-width: 992px) { .fullbleed-banner-section.lg-center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .fullbleed-banner-section.lg-align-start { --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .fullbleed-banner-section.lg-align-end { --text-align: start; --buttons-align: start; --container-inline-margin: auto 0; } .fullbleed-banner-section.lg-no-max-width { --container-max-width: unset; } .fullbleed-banner-section.lg-max-w-xs { --container-max-width: 200px; } .fullbleed-banner-section.lg-max-w-sm { --container-max-width: 350px; } .fullbleed-banner-section.lg-max-w-md { --container-max-width: 500px; } .fullbleed-banner-section.lg-max-w-lg { --container-max-width: 650px; } .fullbleed-banner-section.lg-h-xs { --banner-height: 200px; } .fullbleed-banner-section.lg-h-sm { --banner-height: 300px; } .fullbleed-banner-section.lg-h-md { --banner-height: 530px; } .fullbleed-banner-section.lg-h-lg { --banner-height: 600px; } .fullbleed-banner-section.lg-content-top { --content-vertical-align: flex-start; } .fullbleed-banner-section.lg-content-center { --content-vertical-align: center; } .fullbleed-banner-section.lg-content-bottom { --content-vertical-align: flex-end; } } .fullbleed-banner-section.img-ratio { --img-position: static; --content-position: absolute; } .fullbleed-banner-section.img-ratio .content-container { inset: 0; height: 100%; display: flex; align-items: var(--content-vertical-align); } .fullbleed-banner-section.page-banner { --banner-height: 530px; --container-max-width: 500px; height: 100vh; max-height: var(--banner-height); display: flex; align-items: var(--content-vertical-align); } @media (max-width: 992px) { .fullbleed-banner-section.page-banner { --text-align: center; --buttons-align: center; } } .fullbleed-banner-section.page-banner.h-xs { --banner-height: 200px; } .fullbleed-banner-section.page-banner.h-sm { --banner-height: 300px; } .fullbleed-banner-section.page-banner.h-md { --banner-height: 530px; } .fullbleed-banner-section.page-banner.h-lg { --banner-height: 600px; } .fullbleed-banner-section.page-banner.h-xl { --banner-height: 800px; } .fullbleed-banner-section.remove-title .title { display: none !important; } .fullbleed-banner-section .bg-img { position: var(--img-position); } @media (min-width: 992px) { .fullbleed-banner-section.shift-content-down .banner-content { margin-top: 10vw; } } .fullbleed-banner-section.custom-bonds-title .title { font-size: 28px !important; } .fullbleed-banner-section .content-container { position: var(--content-position); width: 100%; } .fullbleed-banner-section .content-container .container, .fullbleed-banner-section .content-container .container-fluid { position: relative; width: 100%; } @media (max-width: 992px) { .fullbleed-banner-section.divide-on-mobile { display: flex; flex-direction: column; } .fullbleed-banner-section.divide-on-mobile.reverse-division { flex-direction: column-reverse; } .fullbleed-banner-section.divide-on-mobile .content-container { position: relative; } .fullbleed-banner-section.divide-on-mobile .content-container .titles-container { font-size: 16px !important; } .fullbleed-banner-section.divide-on-mobile .content-container .titles-container h2 { font-size: 30px !important; } .fullbleed-banner-section.divide-on-mobile.electric-purple .content-container { background-color: #0E0546; } } .fullbleed-banner-section.force-arabic-content-left .content-container .banner-content { margin-right: auto !important; } .fullbleed-banner-section.force-arabic-content-left.align-end .content-container .banner-content { margin-left: auto !important; margin-right: 0 !important; } .fullbleed-banner-section.news-electric-purple .description-lg p { font-size: 30px; max-width: 370px; font-weight: 500; padding-block: 15px; } @media (max-width: 992px) { .fullbleed-banner-section.news-electric-purple .description-lg { display: flex; flex-direction: column; align-items: center; } .fullbleed-banner-section.news-electric-purple .description-lg p { font-size: 20px; max-width: 250px; padding-top: 15px; padding-bottom: 10px; } .fullbleed-banner-section.news-electric-purple .description-lg img { max-width: 250px; margin-inline: auto; } } .fullbleed-banner-section .banner-content { max-width: var(--container-max-width); text-align: var(--text-align); margin-inline: var(--container-inline-margin); } .fullbleed-banner-section .banner-content .titles-container { max-width: var(--container-max-width); } .fullbleed-banner-section .banner-content p { max-width: 500px; } .fullbleed-banner-section .banner-content .buttons-container { justify-content: var(--buttons-align); } .centered-block-with-note-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== STRUCTURE: - .centered-block-with-note-section - .centered-container (max-width: 900px, centered) - .titles-container (spacing: 30px) ======================================== */ } .centered-block-with-note-section .centered-container { max-width: 900px; margin-inline: auto; } .centered-block-with-note-section .centered-container .titles-container { --spacing: 30px; } .two-blocks-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== ALIGNMENT MODIFIERS: - .center (vertically centers blocks) - .center-inside (centers content inside non-image columns) IMAGE MODIFIERS: - .no-img-aspect-ratio (removes aspect ratio, auto height) - .fixed-img-height (sets aspect ratio to 567/340) ======================================== */ --blocks-vertical-align: unset; --image-aspect-ratio: 1; } .two-blocks-section.center, .two-blocks-section .center { --blocks-vertical-align: center; } .two-blocks-section.center-inside .col:not(:has(.img-container)), .two-blocks-section .center-inside .col:not(:has(.img-container)) { display: flex; align-items: center; } .two-blocks-section.no-img-aspect-ratio, .two-blocks-section .no-img-aspect-ratio { --image-aspect-ratio: unset; } .two-blocks-section.no-img-aspect-ratio .img-container, .two-blocks-section.no-img-aspect-ratio .video-container, .two-blocks-section .no-img-aspect-ratio .img-container, .two-blocks-section .no-img-aspect-ratio .video-container { min-height: auto !important; height: auto !important; } .two-blocks-section.no-img-aspect-ratio .img-container img, .two-blocks-section.no-img-aspect-ratio .img-container video, .two-blocks-section.no-img-aspect-ratio .video-container img, .two-blocks-section.no-img-aspect-ratio .video-container video, .two-blocks-section .no-img-aspect-ratio .img-container img, .two-blocks-section .no-img-aspect-ratio .img-container video, .two-blocks-section .no-img-aspect-ratio .video-container img, .two-blocks-section .no-img-aspect-ratio .video-container video { height: auto; } .two-blocks-section.fixed-img-height, .two-blocks-section .fixed-img-height { --image-aspect-ratio: 567 / 340; } .two-blocks-section.fixed-img-height .img-container, .two-blocks-section.fixed-img-height .video-container, .two-blocks-section .fixed-img-height .img-container, .two-blocks-section .fixed-img-height .video-container { min-height: unset !important; aspect-ratio: var(--image-aspect-ratio) !important; } .two-blocks-section.electric-purple-swiper .swiper-two-blocks { border-radius: 20px !important; } .two-blocks-section.cigarrets-vs-iqos-home-component .block-container .img-container img { object-fit: contain; } .two-blocks-section.checklist-body .vertical-video { aspect-ratio: 9/16 !important; } .two-blocks-section.checklist-body .body-container ul { list-style: none; padding-left: 0; } .two-blocks-section.checklist-body .body-container ul li { position: relative; padding-left: 28px; } .two-blocks-section.checklist-body .body-container ul li:not(:last-child) { margin-bottom: 12px; } .two-blocks-section.checklist-body .body-container ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #00d1d2; font-weight: bold; } @media (max-width: 992px) { .two-blocks-section .container { padding-inline: 0; } .two-blocks-section .container > .titles-container { padding-inline: var(--container-gutter-x); } .two-blocks-section .swiper-nav { padding-inline: var(--container-gutter-x); } .two-blocks-section .swiper-nav button { background-color: white; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; } .two-blocks-section .swiper-nav button:hover { background-color: #00d1d2; } } .two-blocks-section .block-container { --temp-direction: var(--container-flex-direction); --gap: 0px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .two-blocks-section .block-container:where(ul, ol) { margin-bottom: 0; } .two-blocks-section .block-container > .col, .two-blocks-section .block-container > .col:is(:first-child, :last-child), .two-blocks-section .block-container > .listingItemDIV { flex: unset; width: var(--col-width); } .two-blocks-section .block-container { flex-direction: var(--temp-direction); align-items: var(--blocks-vertical-align); position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); --section-pt: 0; } .two-blocks-section .block-container.margin-bottom { padding-bottom: 0; margin-bottom: var(--section-pb); } .two-blocks-section .block-container.span-bold .block-info .body-container span { display: block; font-weight: bold; } .two-blocks-section .block-container.margin-top { padding-top: 0; margin-top: var(--section-pt); } @media (min-width: 992px) { .two-blocks-section .block-container:nth-child(odd) { --temp-direction: var(--container-flex-direction); } .two-blocks-section .block-container:nth-child(even) { --temp-direction: var(--container-flex-direction-inverse); } } .two-blocks-section .block-container:last-child { --section-pb: 0; } @media (max-width: 992px) { .two-blocks-section .block-container { --gap: 0px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .two-blocks-section .block-container:where(ul, ol) { margin-bottom: 0; } .two-blocks-section .block-container > .col, .two-blocks-section .block-container > .col:is(:first-child, :last-child), .two-blocks-section .block-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .two-blocks-section .block-container .img-container, .two-blocks-section .block-container .video-container { display: block; text-decoration: none; width: 100%; aspect-ratio: var(--image-aspect-ratio); min-height: 100%; } .two-blocks-section .block-container .img-container img, .two-blocks-section .block-container .video-container img { width: 100%; height: 100%; object-fit: cover; } .two-blocks-section .block-container .double-img-container { position: relative; } @media (max-width: 992px) { .two-blocks-section .block-container .double-img-container { padding-inline: var(--container-gutter-x); } } .two-blocks-section .block-container .double-img-container .img-container { min-height: unset; } .two-blocks-section .block-container .double-img-container .img-container:first-child { width: 90%; aspect-ratio: 1; } .two-blocks-section .block-container .double-img-container .img-container:last-child { position: absolute; top: 0; inset-inline-end: 0; width: 70%; aspect-ratio: 1.5; height: unset; translate: 0 -30%; } @media (max-width: 992px) { .two-blocks-section .block-container .double-img-container .img-container:last-child { inset-inline-end: var(--container-gutter-x); } } .two-blocks-section .block-container .block-info { padding: 40px; } @media (max-width: 992px) { .two-blocks-section .block-container .block-info { padding-inline: var(--container-gutter-x); } .two-blocks-section .block-container .block-info .titles-container { padding-inline: 0; } } .two-blocks-section .block-container .block-info .body-container { --spacing: 20px; } .two-blocks-section .block-container .block-info .body-container > *:not(:last-child) { margin-bottom: var(--spacing); } .two-blocks-section .block-container .block-text-container { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 90px; } .two-blocks-section .block-container .block-text-container h3 { font-size: clamp(30px, 22.2591743119px + 1.7201834862vw, 45px); font-weight: 600; } .two-blocks-section .block-container .block-text-container h3 span { display: block; font-size: clamp(75px, 54.3577981651px + 4.5871559633vw, 115px); } .two-blocks-section .block-container .col:has(> .block-text-container) { min-height: 100%; } .two-blocks-section .block-container .arrow-links-list li { margin-bottom: 32px; } .two-blocks-section .block-container .arrow-links-list li .button-arrow { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .two-blocks-section .block-container .arrow-links-list li .button-arrow:empty { display: none; } .two-blocks-section .block-container .arrow-links-list li .button-arrow p { margin-bottom: 16px; } .two-blocks-section .block-container .arrow-links-list li .button-arrow p:last-child { margin-bottom: 0; } .two-blocks-section .block-container .arrow-links-list li .button-arrow ul, .two-blocks-section .block-container .arrow-links-list li .button-arrow ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .two-blocks-section .block-container .arrow-links-list li .button-arrow li { list-style: disc; } .two-blocks-section .block-container .arrow-links-list li .button-arrow { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); line-height: 1.5; font-weight: 600; text-decoration: underline; margin-bottom: 8px; } .generic-info-split-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== IMAGE OVERFLOW MODIFIERS: - .image-overflow-down (translates image down by 2x section padding) - .image-overflow-up (translates image up by 2x section padding) ALIGNMENT MODIFIERS: - .align-start (aligns content to start) IMAGE LAYOUT MODIFIERS: - .image-fluid (removes padding, extends image to container edge) - .image-full-height (removes max-height on fluid images) - .no-img-aspect-ratio (removes aspect ratio, auto height) SPACING MODIFIERS: - .small-gap (reduces gap to 40px from default 80px) MOBILE MODIFIERS: - .container-mobile (keeps container padding on mobile) ======================================== */ --image-y-translation: 0; --image-aspect-ratio: 1; --image-container-height: 100%; --alignment: center; --generic-section-gap: 80px; } .generic-info-split-section .generic-block { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); padding-block: 0; margin-bottom: var(--section-pb); } .generic-info-split-section .generic-block:nth-child(even) .generic-info-split-container { flex-direction: var(--container-flex-direction-inverse); } .generic-info-split-section .generic-block:last-child { margin-bottom: 0; } .generic-info-split-section .small-gap { --generic-section-gap: 40px; } .generic-info-split-section.image-overflow-down { --image-y-translation: calc(var(--section-pb, 100px) * 2); } .generic-info-split-section.image-overflow-up { --image-y-translation: calc(var(--section-pb, 100px) * -2); } @media (max-width: 992px) { .generic-info-split-section.image-overflow-down, .generic-info-split-section.image-overflow-up { padding-block: 0; } .generic-info-split-section.image-overflow-down .background-colored, .generic-info-split-section.image-overflow-up .background-colored { padding-block: 0; } } .generic-info-split-section.align-start { --alignment: start; } @media (min-width: 992px) { .generic-info-split-section.image-fluid { --image-shift: calc(calc((100vw - var(--container-width)) / 2) * -1); } .generic-info-split-section.image-fluid [class^=section-container] { --section-pt: 0; --section-pb: 0; } .generic-info-split-section.image-fluid .info-wrapper { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } .generic-info-split-section.image-fluid .col:has(> .img-container) { margin-inline-start: var(--image-shift); } .generic-info-split-section.image-fluid .col:has(> .img-container) .img-container { max-height: 600px; min-width: calc(100% + calc((100vw - var(--container-width)) / 2)); } } @media (min-width: 992px) and (max-width: 992px) { .generic-info-split-section.image-fluid .col:has(> .img-container) .img-container { min-width: unset; } } @media (min-width: 992px) { .generic-info-split-section.image-fluid .col:has(> .img-container) .img-container img { scale: unset !important; } .generic-info-split-section.image-fluid.image-full-height .col .img-container { max-height: unset; } } .generic-info-split-section.no-img-aspect-ratio { --image-aspect-ratio: unset; --image-container-height: auto; } @media (max-width: 992px) { .generic-info-split-section:not(.container-mobile) > .container { padding-inline: 0; } .generic-info-split-section .container { padding-inline: 0; } .generic-info-split-section .section-container:not(.info-wrapper) { padding-block: 0; } } .generic-info-split-section .generic-info-split-container { --gap: var(--generic-section-gap); --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .generic-info-split-section .generic-info-split-container:where(ul, ol) { margin-bottom: 0; } .generic-info-split-section .generic-info-split-container > .col, .generic-info-split-section .generic-info-split-container > .col:is(:first-child, :last-child), .generic-info-split-section .generic-info-split-container > .listingItemDIV { flex: unset; width: var(--col-width); } .generic-info-split-section .generic-info-split-container { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); flex-direction: var(--container-flex-direction); justify-content: space-between; --section-pt: 0; } .generic-info-split-section .generic-info-split-container:last-child { --section-pb: 0; } @media (max-width: 992px) { .generic-info-split-section .generic-info-split-container { --gap: 0px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .generic-info-split-section .generic-info-split-container:where(ul, ol) { margin-bottom: 0; } .generic-info-split-section .generic-info-split-container > .col, .generic-info-split-section .generic-info-split-container > .col:is(:first-child, :last-child), .generic-info-split-section .generic-info-split-container > .listingItemDIV { flex: unset; width: var(--col-width); } .generic-info-split-section .generic-info-split-container .info-wrapper { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); padding-inline: var(--container-gutter-x); } } .generic-info-split-section .generic-info-split-container .col { height: auto; display: flex; align-items: var(--alignment); } .generic-info-split-section .generic-info-split-container .img-container { aspect-ratio: var(--image-aspect-ratio); height: var(--image-container-height); } .generic-info-split-section .generic-info-split-container :where(.col:has(> .img-container)) { --max-height: calc(100% + abs(var(--image-y-translation) / 2)); max-height: var(--max-height); height: var(--image-container-height); } @media (min-width: 992px) { .generic-info-split-section .generic-info-split-container :where(.col:has(> .img-container)) { margin-bottom: calc(-1 * var(--image-y-translation)); } } .generic-info-split-section .generic-info-split-container .info-wrapper img { margin-top: 20px; } .generic-info-split-section .generic-info-split-container .info-wrapper h3, .generic-info-split-section .generic-info-split-container .info-wrapper h4 { margin-bottom: 20px; } .two-images-fullbleed-section .two-images-fullbleed-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .two-images-fullbleed-section .two-images-fullbleed-container:where(ul, ol) { margin-bottom: 0; } .two-images-fullbleed-section .two-images-fullbleed-container > .col, .two-images-fullbleed-section .two-images-fullbleed-container > .col:is(:first-child, :last-child), .two-images-fullbleed-section .two-images-fullbleed-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .two-images-fullbleed-section .two-images-fullbleed-container { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .two-images-fullbleed-section .two-images-fullbleed-container:where(ul, ol) { margin-bottom: 0; } .two-images-fullbleed-section .two-images-fullbleed-container > .col, .two-images-fullbleed-section .two-images-fullbleed-container > .col:is(:first-child, :last-child), .two-images-fullbleed-section .two-images-fullbleed-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .image-only-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== HEIGHT MODIFIERS: - .h-xs (200px) - .h-sm (300px) - .h-md (530px) - .h-lg (600px) Default: auto height (400px on mobile) ======================================== */ --banner-height: auto; } .image-only-section.h-xs { --banner-height: 200px; } .image-only-section.h-sm { --banner-height: 300px; } .image-only-section.h-md { --banner-height: 530px; } .image-only-section.h-lg { --banner-height: 600px; } .image-only-section .img-container { height: var(--banner-height); } @media (max-width: 992px) { .image-only-section:not([class^=h-]) .img-container { height: 400px; } } .video-banner-section .video-container { position: relative; aspect-ratio: 1920/1000; } .video-banner-section.video-with-listing .video-container { padding-bottom: 50px; } .video-banner-section.video-with-listing .item-wrapper { position: relative; display: inline-block; } .video-banner-section.video-with-listing .item-wrapper .description { font-size: clamp(14px, 12.9678899083px + 0.2293577982vw, 16px); } .video-banner-section.video-with-listing .item-wrapper .img-container { max-width: 80px; height: auto; } .video-banner-section.video-with-listing .item-wrapper .img-container img { height: auto; width: 100%; object-fit: contain; } @media (max-width: 992px) { .compare-section > .container { padding-inline: 0; } } .compare-section .compare-titles-container { position: relative; padding-top: 40px; } .compare-section .compare-titles-container::before { content: ""; background-color: #f6f4f0; position: absolute; inset: 0; z-index: -1; } .compare-section .compare-devices-container .swiper-nav { top: 23%; } .compare-section .compare-devices-container .card-item { height: 100%; } .compare-section .compare-devices-container .card-item .img-container { position: relative; } .compare-section .compare-devices-container .card-item .img-container::before { content: ""; background-color: #f6f4f0; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 32px); z-index: -1; } .compare-section .compare-devices-container .card-item .card-info { padding-inline: 50px; } .compare-section .compare-devices-container .card-item .card-title { font-size: clamp(22px, 20.9678899083px + 0.2293577982vw, 24px); margin-block: 10px 20px; font-weight: 600; } .compare-section .compare-devices-container .card-item .price { font-size: clamp(23px, 21.9678899083px + 0.2293577982vw, 25px); margin-bottom: 30px; font-weight: 600; } .compare-section .compare-devices-container .card-item .features li { --icon-size: 18px; position: relative; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .compare-section .compare-devices-container .card-item .features li:empty { display: none; } .compare-section .compare-devices-container .card-item .features li p { margin-bottom: 16px; } .compare-section .compare-devices-container .card-item .features li p:last-child { margin-bottom: 0; } .compare-section .compare-devices-container .card-item .features li ul, .compare-section .compare-devices-container .card-item .features li ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .compare-section .compare-devices-container .card-item .features li li { list-style: disc; } .compare-section .compare-devices-container .card-item .features li { font-size: clamp(17px, 16.4839449541px + 0.1146788991vw, 18px); line-height: 1.5; display: flex; gap: 16px; margin-bottom: 10px; } .compare-section .compare-devices-container .card-item .features li::before { content: ""; mask-image: url(/images/icons/round-checkmark.svg?v=dPulEv50-0ADlyQ7GNQ_HG64pJo); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/round-checkmark.svg?v=dPulEv50-0ADlyQ7GNQ_HG64pJo); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-current-color); width: var(--icon-size); aspect-ratio: 1; z-index: 2; } .compare-section .compare-devices-container .card-item .features li::after { content: ""; position: absolute; top: 5px; inset-inline-start: 2px; width: calc(var(--icon-size) - 3px); aspect-ratio: 1; border-radius: 50%; background-color: #34303d; z-index: 1; } .compare-section .compare-devices-container .card-item .features li.negative-bullet::before { mask-image: url(/images/icons/round-negative.svg?v=utauZnCGnyGnXmOggf4qeAzTs5Q); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/round-negative.svg?v=utauZnCGnyGnXmOggf4qeAzTs5Q); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #f6f4f0; } .compare-section .compare-devices-container .card-item .features li:last-child { margin-bottom: 0; } .compare-section .compare-devices-container .card-item [class^=button] { margin-top: 16px; } .footer-support-section.margin-under-icons .icon-img { margin-bottom: 16px; } .footer-support-section.justify-start .box { text-wrap: pretty; text-align: start !important; } .footer-support-section.justify-start .box .icon-img { margin-inline: unset !important; } .footer-support-section.line-wrap-no-wrap .box { max-width: unset !important; } .footer-support-section.justify-all-center .footer-support-container { justify-content: center; } .footer-support-section.four-elements .footer-support-container { --gap: 32px; --col-width: calc( (100% / 4) - (var(--gap) * (4 - 1) / 4) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section.four-elements .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section.four-elements .footer-support-container > .col, .footer-support-section.four-elements .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section.four-elements .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 768px) { .footer-support-section.four-elements .footer-support-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section.four-elements .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section.four-elements .footer-support-container > .col, .footer-support-section.four-elements .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section.four-elements .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .footer-support-section.four-elements .footer-support-container { --gap: 50px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section.four-elements .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section.four-elements .footer-support-container > .col, .footer-support-section.four-elements .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section.four-elements .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .footer-support-section .footer-support-container { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section .footer-support-container > .col, .footer-support-section .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 768px) { .footer-support-section .footer-support-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section .footer-support-container > .col, .footer-support-section .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .footer-support-section .footer-support-container { --gap: 50px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section .footer-support-container > .col, .footer-support-section .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .footer-support-section .footer-support-container .box { max-width: 300px; margin-inline: auto; text-wrap: balance; text-align: center; } .footer-support-section .footer-support-container .box > *:last-child { margin-bottom: 0; } .footer-support-section .footer-support-container .box ul, .footer-support-section .footer-support-container .box ol, .footer-support-section .footer-support-container .box p:last-child { margin-bottom: 0; } .footer-support-section .footer-support-container .box li { list-style: none; } .footer-support-section .footer-support-container .box .icon-img { display: flex; width: 64px; aspect-ratio: 1; margin-inline: auto; } .footer-support-section .footer-support-container .box .icon-img img { height: 100%; object-fit: contain; width: 100%; } .footer-support-section .footer-support-container .box .number-container { width: 80px; aspect-ratio: 1; border: solid 2px var(--default-text-color); border-radius: 50%; margin-bottom: 20px; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1; display: flex; align-items: center; justify-content: center; margin-inline: auto; } .footer-support-section .footer-support-container .box .title p { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); font-weight: 600; margin-bottom: 20px; } .discover-flavours-section .discover-grid { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .discover-flavours-section .discover-grid:where(ul, ol) { margin-bottom: 0; } .discover-flavours-section .discover-grid > .col, .discover-flavours-section .discover-grid > .col:is(:first-child, :last-child), .discover-flavours-section .discover-grid > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 1200px) { .discover-flavours-section .discover-grid { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .discover-flavours-section .discover-grid:where(ul, ol) { margin-bottom: 0; } .discover-flavours-section .discover-grid > .col, .discover-flavours-section .discover-grid > .col:is(:first-child, :last-child), .discover-flavours-section .discover-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 768px) { .discover-flavours-section .discover-grid { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .discover-flavours-section .discover-grid:where(ul, ol) { margin-bottom: 0; } .discover-flavours-section .discover-grid > .col, .discover-flavours-section .discover-grid > .col:is(:first-child, :last-child), .discover-flavours-section .discover-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } .discover-flavours-section.discoverFlaveorsHDelia .col:first-child .card * { color: white; } .discover-flavours-section .card-item { --current-text-color: white; --current-text-color-inverse: #34303d; position: relative; width: 100%; height: 550px; background-size: cover; background-position: center; overflow: hidden; display: flex; align-items: flex-end; } .discover-flavours-section .card-item .content-container { position: relative; z-index: 2; padding: 30px; color: var(--current-text-color); } .discover-flavours-section .card-item .content-container .content-wrapper { margin-bottom: 16px; color: var(--current-text-color); } .discover-flavours-section .card-item .content-container .content-wrapper h3 { font-size: clamp(22px, 19.9357798165px + 0.4587155963vw, 26px); font-weight: 600; line-height: 1.2; margin-bottom: 15px; text-align: start; color: var(--current-text-color); } .discover-flavours-section .card-item .button-primary-filled { --color: var(--current-text-color-inverse); --background-color: var(--current-text-color); --border-color: var(--current-text-color); --hover-color: var(--current-text-color); --hover-background-color: var(--current-text-color-inverse); --hover-border-color: var(--current-text-color-inverse); } .discover-flavours-section .card-item.zyn-colors { --current-text-color: #00166f; --current-text-color-inverse: white; } .news-grid-section .news-grid-container { display: flex; flex-wrap: wrap; --gap: 32px; gap: var(--gap); } .news-grid-section .news-grid-container:where(ul, ol) { margin-bottom: 0; } .news-grid-section .news-grid-container > .col, .news-grid-section .news-grid-container > .listingItemDIV { flex: unset; } .news-grid-section .news-grid-container > .col:where(:nth-child(odd)), .news-grid-section .news-grid-container > .listingItemDIV:where(:nth-child(odd)) { width: calc(33% - var(--gap) / 2); } .news-grid-section .news-grid-container > .col:where(:nth-child(even)), .news-grid-section .news-grid-container > .listingItemDIV:where(:nth-child(even)) { width: calc(66% - var(--gap) / 2); } @media (max-width: 992px) { .news-grid-section .news-grid-container { --gap: 32px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-grid-section .news-grid-container:where(ul, ol) { margin-bottom: 0; } .news-grid-section .news-grid-container > .col, .news-grid-section .news-grid-container > .col:is(:first-child, :last-child), .news-grid-section .news-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .news-grid-section .news-grid { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-grid-section .news-grid:where(ul, ol) { margin-bottom: 0; } .news-grid-section .news-grid > .col, .news-grid-section .news-grid > .col:is(:first-child, :last-child), .news-grid-section .news-grid > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 576px) { .news-grid-section .news-grid { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-grid-section .news-grid:where(ul, ol) { margin-bottom: 0; } .news-grid-section .news-grid > .col, .news-grid-section .news-grid > .col:is(:first-child, :last-child), .news-grid-section .news-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } .news-grid-section .news-card { --spacing: 20px; display: block; height: 100%; background-color: white; padding: 24px; color: var(--default-text-color); transition: all 0.6s ease; } .news-grid-section .news-card:hover { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .news-grid-section .news-card .news-title { font-size: clamp(21px, 19.4518348624px + 0.3440366972vw, 24px); font-weight: 600; line-height: 1.3; margin-bottom: var(--spacing); } .numbered-image-section { --section-list-color: #ffc600; } .numbered-image-section .numbered-image-container { --gap: 100px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .numbered-image-section .numbered-image-container:where(ul, ol) { margin-bottom: 0; } .numbered-image-section .numbered-image-container > .col, .numbered-image-section .numbered-image-container > .col:is(:first-child, :last-child), .numbered-image-section .numbered-image-container > .listingItemDIV { flex: unset; width: var(--col-width); } .numbered-image-section .numbered-image-container { align-items: center; } @media (max-width: 992px) { .numbered-image-section .numbered-image-container { --gap: 40px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .numbered-image-section .numbered-image-container:where(ul, ol) { margin-bottom: 0; } .numbered-image-section .numbered-image-container > .col, .numbered-image-section .numbered-image-container > .col:is(:first-child, :last-child), .numbered-image-section .numbered-image-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .numbered-image-section .numbered-image-container .numbers-list { --list-color: var(--section-list-color, #ffc600); max-width: 500px; counter-reset: list-counter; } .numbered-image-section .numbered-image-container .numbers-list li { --bullet-size: 36px; position: relative; counter-increment: list-counter; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .numbered-image-section .numbered-image-container .numbers-list li:empty { display: none; } .numbered-image-section .numbered-image-container .numbers-list li p { margin-bottom: 16px; } .numbered-image-section .numbered-image-container .numbers-list li p:last-child { margin-bottom: 0; } .numbered-image-section .numbered-image-container .numbers-list li ul, .numbered-image-section .numbered-image-container .numbers-list li ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .numbered-image-section .numbered-image-container .numbers-list li li { list-style: disc; } .numbered-image-section .numbered-image-container .numbers-list li { margin-bottom: 40px; padding-inline-start: calc(var(--bullet-size) + 16px); } .numbered-image-section .numbered-image-container .numbers-list li:last-child { margin-bottom: 0; } .numbered-image-section .numbered-image-container .numbers-list li::before { content: counter(list-counter); position: absolute; top: 0; inset-inline-start: 0; display: flex; align-items: center; justify-content: center; min-width: var(--bullet-size); max-width: var(--bullet-size); aspect-ratio: 1; background-color: var(--list-color); line-height: 1; color: var(--default-text-color); border-radius: 50%; } .numbered-image-section .numbered-image-container .numbers-list li h3 { font-size: clamp(23px, 20.9357798165px + 0.4587155963vw, 27px); font-weight: 600; margin-bottom: 5px; } footer { background-color: #34303d; padding-top: 60px; } footer .topFooter { padding-bottom: 35px; } footer .topFooter .container { display: flex; flex-wrap: wrap; } footer .topFooter .row { margin: 0; padding: 0; gap: 20px; } footer .topFooter .row .col-md-3 { padding: 0; } footer .topFooter .simpleList .simpleList { padding-bottom: 25px; } footer .topFooter .simpleList .simpleListTitle { font-size: 14px; color: rgba(255, 253, 251, 0.5); font-weight: normal; letter-spacing: 0.4px; margin-bottom: 25px; } footer .topFooter .simpleList .simpleListTitle a { font-size: 14px; color: rgba(255, 253, 251, 0.5); font-weight: normal; letter-spacing: 0.4px; margin-bottom: 25px; } footer .topFooter .simpleList li { margin-bottom: 25px; } footer .topFooter .simpleList li:last-child { margin-bottom: 0; } footer .topFooter .simpleList li a { color: #fffdfb; font-size: 16px; font-weight: normal; transition: all 0.6s ease; } footer .topFooter .simpleList li a:hover { color: #1cd9c5; } footer .topFooter .topFooterScdWrapper { display: flex; flex-direction: column; align-items: flex-end; } footer .topFooter .topFooterScdWrapper .endSection { min-width: 115px; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper { padding-bottom: 15px; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper h3 { font-size: 14px; color: rgba(255, 253, 251, 0.5); font-weight: normal; letter-spacing: 0.4px; margin-bottom: 25px; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li { margin-bottom: 23px; position: relative; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li:last-child { margin-bottom: 0; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a::before { width: 25px; height: 25px; background-position: center center; background-repeat: no-repeat; background-size: contain; filter: brightness(0) invert(1); content: ""; display: none; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a { display: flex; align-items: center; gap: 8px; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a span { color: #fffdfb; font-size: 16px; font-weight: normal; transition: all 0.6s ease; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a:hover span { color: #1cd9c5; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a .footerSocialIcon { width: 25px; aspect-ratio: 1; filter: brightness(0) invert(1); } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a .footerSocialIcon img { width: 100%; height: 100%; object-fit: contain; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector { position: relative; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector h3 { font-size: 14px; color: rgba(255, 253, 251, 0.5); font-weight: normal; letter-spacing: 0.4px; margin-bottom: 25px; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .selected-language { color: #fffdfb; font-size: 16px; font-weight: normal; transition: all 0.6s ease; position: relative; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .selected-language::after { content: ""; background-image: url(../../images/arrow-down.svg); width: 13px; height: 8px; background-position: center center; background-repeat: no-repeat; background-size: contain; display: block; filter: brightness(0) invert(1); transform-origin: center center; transition: all 0.6s ease; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .selected-language.open::after { transform: rotate(180deg); } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .language-options { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; background-color: white; width: 100%; border-radius: 4px; display: none; z-index: 100; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .language-options a { display: block; padding: 12px; border-bottom: 1px solid #dcdcdc; font-size: 14px; color: #34303d; transition: all 0.6s ease; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .language-options a:hover { color: #00d1d2; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .language-options a:last-child { border-bottom: none; } footer .middle-footer { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; gap: 15px; } @media (max-width: 992px) { footer .middle-footer { flex-direction: column; } } @media (max-width: 992px) { footer .middle-footer { align-items: start; } } footer .middle-footer .footer-logo { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; } footer .middle-footer .footer-logo p { color: rgba(255, 253, 251, 0.5); font-size: 12px; } @media (max-width: 992px) { footer .middle-footer .footer-logo p { color: white; font-size: 14px; } } footer .middle-footer .legal-menu { flex: 0 0 auto; max-width: 60%; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 0; } @media (max-width: 992px) { footer .middle-footer .legal-menu { max-width: unset; } } footer .middle-footer .legal-menu li a { color: rgba(255, 253, 251, 0.5); font-size: 12px; transition: all 0.6s ease; display: block; } footer .middle-footer .legal-menu li a:hover { color: white; } footer .bottomFooter { background-color: #27242d; padding: 20px 0; } footer .bottomFooter p { color: rgba(255, 253, 251, 0.5); font-size: 16px; text-align: center; margin-bottom: 0; } footer .bottomFooter p.arabicDir { font-family: tahoma; direction: rtl; } footer .bottomFooter p.englishDir { direction: ltr; } .activities-container { margin-bottom: 70px; } .activities-container h3 { font-size: 30px; font-weight: 800; margin-bottom: 35px; } .activities-container .row { align-items: center; } .activities-container .activity-row { margin-bottom: 20px; } .activities-container .activity-row:last-child { margin-bottom: 0; } .activities-container .month-wrapper { margin-bottom: 30px; } .activities-container .icon { display: block; } .activities-container .activities-wrapper { margin: 20px 50px; } .activities-container .activities-wrapper .activity-info { margin-inline-start: 20px; } .activities-container .activities-wrapper .activity-name { display: flex; justify-content: start; align-items: center; } .activities-container .activities-wrapper .activity-name .icon { border: 1px solid #c6c6c6; width: 30px; height: 30px; border-radius: 15px; padding: 4px; } .activities-container .activities-wrapper .activity-name .name { margin-inline-start: 15px; font-weight: 600; } .activities-container .activities-wrapper .activity-date .date { color: rgb(151, 151, 151); } .activities-container .activities-wrapper .activity-points .point { text-align: center; } @media (max-width: 992px) { .activities-container { margin-bottom: 50px; } .activities-container h3 { font-size: 27px; font-weight: normal; margin-bottom: 15px; } .activities-container .activities-wrapper { margin: 0; margin-top: 20px; } .activities-container .activities-wrapper .activity-name { margin-bottom: 8px; } .activities-container .activities-wrapper .activity-date { margin-bottom: 8px; } .activities-container .activities-wrapper .activity-points .point { text-align: start; } } .forever-curious-video-section .vs-page { display: flex; align-items: center; justify-content: center; padding-block: 6vh; } .forever-curious-video-section .vs-slider { position: relative; width: 100%; max-width: 960px; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7); aspect-ratio: 16/9; } .forever-curious-video-section .vs-track { display: flex; height: 100%; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .forever-curious-video-section .vs-slide { flex: 0 0 100%; position: relative; background: #000; height: 100%; } .forever-curious-video-section .vs-slide video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; cursor: pointer; } .forever-curious-video-section .vs-poster { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; transition: opacity 0.3s; } .forever-curious-video-section .vs-poster.hidden { opacity: 0; pointer-events: none; } .forever-curious-video-section .vs-poster.thumb-ready { background: none !important; } .forever-curious-video-section .vs-poster::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 0; pointer-events: none; } .forever-curious-video-section .vs-poster:hover .vs-poster-play { background: rgba(255, 255, 255, 0.28); border-color: #fff; transform: scale(1.1); } .forever-curious-video-section .vs-track .vs-slide:nth-child(1) .vs-poster { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); } .forever-curious-video-section .vs-track .vs-slide:nth-child(2) .vs-poster { background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #4a2080 100%); } .forever-curious-video-section .vs-track .vs-slide:nth-child(3) .vs-poster { background: linear-gradient(135deg, #0a1a1a 0%, #0d2e2e 50%, #0f4a4a 100%); } .forever-curious-video-section .vs-track .vs-slide:nth-child(4) .vs-poster { background: linear-gradient(135deg, #1a0f0a 0%, #2e1a0d 50%, #4a2e14 100%); } .forever-curious-video-section .vs-poster-play { position: relative; z-index: 1; width: 72px; height: 72px; background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s, border-color 0.2s; backdrop-filter: blur(4px); } .forever-curious-video-section .vs-poster-play svg { width: 30px; height: 30px; fill: #fff; } .forever-curious-video-section .vs-disclaimer { position: absolute; bottom: 44px; left: 0; right: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; z-index: 9; pointer-events: none; line-height: 1.4; } .forever-curious-video-section .vs-disclaimer:empty { display: none; } .forever-curious-video-section .vs-controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); opacity: 0; transition: opacity 0.3s; z-index: 10; } .forever-curious-video-section .vs-slide:hover .vs-controls, .forever-curious-video-section .vs-slide:focus-within .vs-controls, .forever-curious-video-section .vs-slide.paused .vs-controls { opacity: 1; } .forever-curious-video-section .vs-btn { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; } .forever-curious-video-section .vs-btn:hover { background: rgba(255, 255, 255, 0.15); } .forever-curious-video-section .vs-btn svg { width: 22px; height: 22px; fill: #fff; } .forever-curious-video-section .vs-progress { flex: 1; padding: 8px 0; margin: -8px 0; background: transparent; cursor: pointer; position: relative; touch-action: none; } .forever-curious-video-section .vs-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; transition: height 0.15s; } .forever-curious-video-section .vs-progress:hover::before { height: 6px; } .forever-curious-video-section .vs-progress:hover .vs-progress-fill { height: 6px; } .forever-curious-video-section .vs-progress-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #fff; border-radius: 2px; width: 0%; pointer-events: none; transition: height 0.15s; } .forever-curious-video-section .vs-time { color: #fff; font-size: 12px; white-space: nowrap; user-select: none; } .forever-curious-video-section .vs-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .forever-curious-video-section .vs-arrow:hover { background: rgba(0, 0, 0, 0.7); border-color: #fff; transform: translateY(-50%) scale(1.08); } .forever-curious-video-section .vs-arrow svg { width: 20px; height: 20px; fill: #fff; } .forever-curious-video-section .vs-arrow.vs-arrow-prev { left: 12px; } .forever-curious-video-section .vs-arrow.vs-arrow-next { right: 12px; } .forever-curious-video-section .vs-dots { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .forever-curious-video-section .vs-dot { display: block; padding: 0; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background 0.2s, transform 0.2s; border: none; } .forever-curious-video-section .vs-dot.active { background: #fff; transform: scale(1.3); } .forever-curious-video-section .vs-counter { position: absolute; top: 14px; right: 16px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 13px; padding: 3px 10px; border-radius: 20px; z-index: 10; user-select: none; } .forever-curious-video-section .vs-click-feedback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6); width: 72px; height: 72px; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; z-index: 20; } .forever-curious-video-section .vs-click-feedback svg { width: 34px; height: 34px; fill: #fff; } .forever-curious-video-section .vs-click-feedback .icon-play { transform: translateX(2px); } .forever-curious-video-section .vs-click-feedback.active { animation: vs-feedback-pop 0.5s ease-out forwards; } @keyframes vs-feedback-pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.7); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } } .forever-curious-video-section .vs-slider:fullscreen, .forever-curious-video-section .vs-slider:-webkit-full-screen, .forever-curious-video-section .vs-slider:-moz-full-screen { max-width: none; width: 100%; height: 100%; border-radius: 0; aspect-ratio: unset; } .forever-curious-video-section .vs-slider:fullscreen .vs-fullscreen-btn .icon-fs-enter, .forever-curious-video-section .vs-slider:-webkit-full-screen .vs-fullscreen-btn .icon-fs-enter, .forever-curious-video-section .vs-slider:-moz-full-screen .vs-fullscreen-btn .icon-fs-enter { display: none; } .forever-curious-video-section .vs-slider:fullscreen .vs-fullscreen-btn .icon-fs-exit, .forever-curious-video-section .vs-slider:-webkit-full-screen .vs-fullscreen-btn .icon-fs-exit, .forever-curious-video-section .vs-slider:-moz-full-screen .vs-fullscreen-btn .icon-fs-exit { display: block; } @media (max-width: 640px) { .forever-curious-video-section .vs-poster-play { width: 56px; height: 56px; } .forever-curious-video-section .vs-poster-play svg { width: 22px; height: 22px; } .forever-curious-video-section .vs-arrow { width: 36px; height: 36px; } .forever-curious-video-section .vs-arrow svg { width: 16px; height: 16px; } .forever-curious-video-section .vs-arrow.vs-arrow-prev { left: 6px; } .forever-curious-video-section .vs-arrow.vs-arrow-next { right: 6px; } .forever-curious-video-section .vs-controls { padding: 8px 10px; gap: 6px; } .forever-curious-video-section .vs-btn svg { width: 18px; height: 18px; } .forever-curious-video-section .vs-time { font-size: 11px; } .forever-curious-video-section .vs-dots { bottom: 46px; } .forever-curious-video-section .vs-counter { font-size: 11px; padding: 2px 8px; top: 8px; right: 8px; } .forever-curious-video-section .vs-disclaimer { font-size: 11px; padding: 6px 10px; } } @media (max-width: 400px) { .forever-curious-video-section .vs-arrow { width: 28px; height: 28px; border-width: 1px; } .forever-curious-video-section .vs-time { display: none; } .forever-curious-video-section .vs-dots { gap: 5px; } .forever-curious-video-section .vs-dot { width: 6px; height: 6px; } } .zyn-lead-form-section { position: relative; z-index: 2; padding: 0; background-color: #ffffff; } .zyn-lead-form-section .zyn-lead-form-wrapper { max-width: 620px; margin-inline: auto; } .zyn-lead-form-section .zyn-lead-form-title { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .zyn-lead-form-section .zyn-lead-form-title.regular { font-weight: 400; } .zyn-lead-form-section .zyn-lead-form-title { margin-bottom: 12px; color: #00A9E0; } .zyn-lead-form-section .zyn-lead-form-subtitle { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .zyn-lead-form-section .zyn-lead-form-subtitle:empty { display: none; } .zyn-lead-form-section .zyn-lead-form-subtitle p { margin-bottom: 16px; } .zyn-lead-form-section .zyn-lead-form-subtitle p:last-child { margin-bottom: 0; } .zyn-lead-form-section .zyn-lead-form-subtitle ul, .zyn-lead-form-section .zyn-lead-form-subtitle ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .zyn-lead-form-section .zyn-lead-form-subtitle li { list-style: disc; } .zyn-lead-form-section .zyn-lead-form-subtitle { color: #34303d; margin-bottom: 32px; color: #00A9E0; } .zyn-lead-form-section .zyn-lead-form-message { padding: 12px 16px; border-radius: 4px; margin-bottom: 24px; font-size: 14px; } .zyn-lead-form-section .zyn-lead-form-message--success { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .zyn-lead-form-section .zyn-lead-form-message--error { background-color: #fde8e8; color: #dd3333; border: 1px solid #f5a0a0; } .zyn-lead-form-section .form__row { position: relative; margin-bottom: 24px; } .zyn-lead-form-section .form__row label { position: absolute; top: 0; inset-inline-start: 10px; background-color: #ffffff; transform: translateY(-50%); z-index: 2; font-size: 12px !important; padding: 0 6px; text-transform: capitalize; font-weight: bold; } .zyn-lead-form-section .form__row .errorMessage { position: absolute; top: 100%; inset-inline-end: 0; font-size: 12px; color: #dd3333; display: block; margin: 0; } .zyn-lead-form-section .form__row input, .zyn-lead-form-section .form__row select, .zyn-lead-form-section .form__row textarea { height: 48px; padding-inline: 15px; color: #34303d; letter-spacing: 0; font-size: 16px; border: 1px solid #b8b7bb; width: 100%; border-radius: 3px; font-family: "IQOS", "IQOS AR", sans-serif; background-color: transparent; outline: none; } .zyn-lead-form-section .form__row input:focus, .zyn-lead-form-section .form__row select:focus, .zyn-lead-form-section .form__row textarea:focus { border-color: #34303d; } .zyn-lead-form-section .form__row--checkbox { margin-bottom: 16px; } .zyn-lead-form-section .form__row--checkbox input[type=checkbox] ~ label::before { content: ""; display: inline-block; width: 20px; height: 20px; border: 1px solid #b5b5b5; position: absolute; top: 3px; inset-inline-start: 0; } .zyn-lead-form-section .form__row--checkbox input[type=checkbox]:checked ~ label::after { background-color: #34303d; content: "✓"; color: #ffffff; width: 20px; height: 20px; position: absolute; top: 3px; inset-inline-start: 0; text-align: center; display: flex; justify-content: center; align-items: center; padding-bottom: 1px; } .zyn-lead-form-section .form__row--checkbox input[type=checkbox] { display: none; } .zyn-lead-form-section .form__row--checkbox label { cursor: pointer; margin-bottom: 0; padding: 0 15px; padding-inline-start: 30px; width: 100%; font-size: 16px !important; display: block; position: static; font-weight: normal !important; transform: translateY(0); } .zyn-lead-form-section .form__row--checkbox label a { color: #34303d; text-decoration: underline; transition: all 0.6s ease; } .zyn-lead-form-section .form__row--checkbox label a:hover { color: #00d1d2; } .zyn-lead-form-section .formAction { display: flex; gap: 20px; align-items: center; margin-top: 8px; margin-bottom: 30px; } .zyn-lead-form-section #zynSubmitBtn:disabled { opacity: 0.5; cursor: not-allowed; } #zynLoader { position: fixed; top: 0; inset-inline-start: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); z-index: 50000; } #zynLoader .loader { position: absolute; height: 60px; width: 60px; top: calc(50% - 30px); left: calc(50% - 30px); animation: rotation 1s infinite linear; border: 6px solid rgba(0, 0, 0, 0.2); border-radius: 100%; } #zynLoader .loader::before { content: ""; display: block; position: absolute; left: -6px; top: -6px; height: 60px; width: 60px; border-top: 6px solid rgba(0, 0, 0, 0.8); border-left: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid transparent; border-radius: 100%; } @media (max-width: 992px) { .summer-campaign-promo-banner { aspect-ratio: 2/4; } } .summer-campaign-promo-banner .banner-content { position: relative; direction: ltr !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .banner-content { padding-block: 24% !important; } } .summer-campaign-promo-banner .content-left { z-index: 3; } .summer-campaign-promo-banner .content-left .content-info { align-items: flex-start; text-align: start; } .summer-campaign-promo-banner .content-left .content-info > * { text-align: start !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-left .content-info { align-items: center; text-align: center; } .summer-campaign-promo-banner .content-left .content-info > * { text-align: center !important; } } .summer-campaign-promo-banner .content-left .banner-title { font-size: clamp(42px, 3vw, 54px) !important; text-align: start !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-left .banner-title { text-align: center !important; } } .summer-campaign-promo-banner .content-left .banner-subtitle { font-size: clamp(18px, 3vw, 22px) !important; text-align: start !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-left .banner-subtitle { text-align: center !important; } } .summer-campaign-promo-banner .content-left .banner-subtitle2 { position: absolute; bottom: 4%; left: 5%; } .summer-campaign-promo-banner .content-right { padding-inline-start: 15%; display: flex; align-items: flex-end; justify-content: flex-end; max-width: 43% !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-right { max-width: 100% !important; padding: 0; align-items: flex-start; justify-content: flex-start; align-self: flex-start !important; } } .summer-campaign-promo-banner .content-right .banner-title { position: absolute; inset: unset; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; max-width: 50%; height: 100%; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-right .banner-title { height: 60%; width: 100% !important; max-width: unset; } } .summer-campaign-promo-banner .content-right .banner-title img { width: 100%; object-fit: contain; position: absolute; inset: unset; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 100% !important; } .summer-campaign-promo-banner .content-right .banner-title img:first-of-type { width: 100% !important; z-index: 2; transform: unset; inset: unset; top: 13%; right: 20%; max-width: 110px !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-right .banner-title img:first-of-type { max-width: 80px !important; top: 22%; right: 15%; } } .summer-campaign-promo-banner .content-right .banner-title img:last-of-type { max-width: 120% !important; width: 120%; inset-block: unset; top: 60%; z-index: 1; margin-left: 15px; } .summer-campaign-promo-banner .content-right .banner-subtitle { position: relative; z-index: 4; font-size: clamp(14px, 3vw, 22px) !important; text-align: start; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-right .banner-subtitle { max-width: 70%; padding-bottom: 15px; } .summer-campaign-promo-banner .content-right .banner-subtitle br { display: none !important; } } .summer-campaign-promo-banner .content-right .banner-subtitle2 { position: absolute; bottom: 0; right: 0; width: 100px; } .summer-campaign-promo-banner .content-right .banner-subtitle2 img { object-fit: contain; width: 100%; } .iframe-container .lf-campaign { height: 100vh !important; } body.no-header .iframe-container iframe { height: 100vh !important; } .what-is-zyn-banner .banner-content-container .container .banner-content { padding: 0 20% !important; justify-content: center; } @media (max-width: 992px) { .what-is-zyn-banner .banner-content-container .container .banner-content { padding: 0 5% !important; } } .what-is-zyn-banner .banner-content-container .container .banner-content .content-info-container.content-left { width: 0; } .what-is-zyn-banner .banner-content-container .container .banner-content .content-info-container.content-right { max-width: 100% !important; color: black !important; } .what-is-zyn-banner .banner-content-container .container .banner-content .content-info-container.content-right .content-info .content-titles .banner-title { color: black; font-size: clamp(34px, 3vw, 52px); } .discover-zyn-banner.zyn-banner-margin { margin-top: 12vh; } @media (max-width: 992px) { .discover-zyn-banner.zyn-banner-margin { margin-top: 100px !important; } } .discover-zyn-banner.zyn-banner-margin .content-titles { text-align: start; } .discover-zyn-banner .banner-content-container { height: 100%; } .discover-zyn-banner .banner-content-container .container { margin: 0 !important; max-width: 100% !important; padding-inline: 4%; } .discover-zyn-banner .banner-content { height: 100%; width: 100% !important; max-width: none; padding-bottom: 2% !important; } .discover-zyn-banner .banner-content .content-left { align-self: flex-end !important; padding-bottom: 2%; max-width: 27% !important; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-title { font-size: clamp(21px, 3vw, 42px); line-height: 1.1; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-subtitle { font-size: clamp(14px, 1.2vw, 28px); line-height: 1.1; } @media (max-width: 1400px) { .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-title { margin-bottom: 8px; font-size: 28px !important; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-subtitle { font-size: 16px !important; } .discover-zyn-banner .banner-content .content-left .content-info .buttons-container { margin-top: 10px; } .discover-zyn-banner .banner-content .content-left .content-info .buttons-container a { font-size: 12px !important; padding-inline: 24px !important; } } @media (max-width: 1100px) { .discover-zyn-banner .banner-content .content-left .content-info .buttons-container a { padding-inline: 19px !important; } } @media (max-width: 992px) { .discover-zyn-banner .banner-content .content-left { width: 100%; max-width: 100% !important; height: 100%; } .discover-zyn-banner .banner-content .content-left .content-info { height: 100%; justify-content: flex-end; align-items: start; max-width: 63%; padding-bottom: 2%; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles { text-align: start !important; padding-bottom: 4%; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-title { font-size: clamp(24px, 1.2vw, 28px) !important; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-subtitle { font-size: clamp(14px, 1.2vw, 18px) !important; } .discover-zyn-banner .banner-content .content-left .content-info .buttons-container { justify-content: start !important; } .discover-zyn-banner .banner-content .content-right .banner-description { top: 5% !important; max-width: 20% !important; } .discover-zyn-banner .banner-content .content-right .banner-description span:nth-child(1) { font-size: 2.9744vw !important; } .discover-zyn-banner .banner-content .content-right .banner-description span:nth-child(2) { font-size: 6.084vw !important; } .discover-zyn-banner .banner-content .content-right .banner-description span:nth-child(3) { font-size: 1.014vw !important; } } @media (max-width: 500px) { .discover-zyn-banner .content-left .content-info { max-width: unset !important; padding-bottom: unset !important; } .discover-zyn-banner .content-left .content-info .content-titles { max-width: 70% !important; } .discover-zyn-banner .content-left .content-info .buttons-container { gap: 7px; } .discover-zyn-banner .content-left .content-info .buttons-container a { font-size: 12px !important; padding-inline: 22px; } } .discover-zyn-banner .banner-content { position: relative; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description { position: absolute !important; top: 10%; inset-inline-end: -1%; max-width: 10%; width: fit-content; color: #03a8e0; line-height: 1; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span { width: 100%; display: block; text-transform: uppercase; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(1) { font-weight: bold; margin-bottom: -0.12em; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(2) { font-weight: bold; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description { max-width: 10%; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(1) { font-size: 1.76vw; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(2) { font-size: 3.6vw; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(3) { font-size: 0.6vw; } .pouch-sizes-section .titles-container .title-h3 { color: #00166f; font-size: clamp(28px, 2.4vw, 43px); line-height: 1.3; white-space: nowrap; } @media (max-width: 767px) { .pouch-sizes-section .titles-container .title-h3 { white-space: normal; } } .pouch-sizes-section .pouch-sizes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 767px) { .pouch-sizes-section .pouch-sizes-grid { grid-template-columns: 1fr; } } .pouch-sizes-section .pouch-size-card { display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 24px; padding: 40px 24px 32px; max-width: 100%; box-sizing: border-box; overflow: hidden; color: white; background: linear-gradient(135deg, color-mix(in srgb, #00166f 45%, #00d1d2 55%) 0%, #00166f 100%); } .pouch-sizes-section .pouch-size-card.light { background: linear-gradient(135deg, color-mix(in srgb, #00a9e0 15%, #00166f 85%) 0%, #00a9e0 100%); } .pouch-sizes-section .pouch-size-card.light .button-pill-arrow { --color: white; --background-color: #00166f; --border-color: #00166f; --hover-color: #00166f; --hover-background-color: white; --hover-border-color: white; } .pouch-sizes-section .pouch-size-card.light .card-features .feature img { filter: brightness(0) saturate(100%) invert(7%) sepia(92%) saturate(4599%) hue-rotate(230deg) brightness(88%) contrast(108%); } .pouch-sizes-section .pouch-size-card.light .card-features .feature span { color: #00166f; } .pouch-sizes-section .pouch-size-card.dark { background: linear-gradient(135deg, color-mix(in srgb, #00166f 35%, #00a9e0 65%) 0%, #00166f 100%); } .pouch-sizes-section .pouch-size-card.dark .card-features .feature img { filter: brightness(0) invert(1); } .pouch-sizes-section .pouch-size-card.dark .card-features .feature span { color: white; } .pouch-sizes-section .pouch-size-card .card-header { max-width: 100%; } .pouch-sizes-section .pouch-size-card .card-header .card-title { font-size: clamp(28px, 6vw, 42px); font-weight: bold; margin-bottom: 4px; } .pouch-sizes-section .pouch-size-card .card-header .card-subtitle { font-size: clamp(14px, 3vw, 18px); opacity: 0.8; margin-bottom: 0; } .pouch-sizes-section .pouch-size-card .card-img { width: 100%; max-width: 500px; margin-block: 24px; } .pouch-sizes-section .pouch-size-card .card-img img { width: 100%; height: auto; display: block; } .pouch-sizes-section .pouch-size-card .card-features { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; max-width: 100%; margin-bottom: 28px; } .pouch-sizes-section .pouch-size-card .card-features .feature { display: flex; flex-direction: row; align-items: center; text-align: start; gap: 10px; flex: 1; min-width: 0; } .pouch-sizes-section .pouch-size-card .card-features .feature img { width: 60px; max-width: 100%; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); } .pouch-sizes-section .pouch-size-card .card-features .feature span { font-size: 16px; line-height: 1.3; min-width: 0; overflow-wrap: break-word; } @media (max-width: 480px) { .pouch-sizes-section .pouch-size-card .card-features { gap: 8px; } .pouch-sizes-section .pouch-size-card .card-features .feature { flex-direction: column; text-align: center; gap: 6px; } .pouch-sizes-section .pouch-size-card .card-features .feature img { width: 36px; } .pouch-sizes-section .pouch-size-card .card-features .feature span { font-size: 12px; } } .button-pill-arrow { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-pill-arrow:empty { display: none; } .button-pill-arrow:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-pill-arrow { --color: #34303d; --background-color: white; --border-color: white; --hover-color: white; --hover-background-color: #34303d; --hover-border-color: #34303d; --color: #00166f; --hover-color: white; --hover-background-color: #00166f; --hover-border-color: #00166f; display: inline-flex; align-items: center; gap: 8px; } .button-pill-arrow::after { content: "→"; } .button-pill { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-pill:empty { display: none; } .button-pill:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-pill { --color: white; --background-color: #00166f; --border-color: #00166f; --hover-color: #00166f; --hover-background-color: white; --hover-border-color: #00166f; } .cta-strip-section { background-color: #d6eef8; padding-block: 16px; } .cta-strip-section .container { display: flex; justify-content: center; } .zyn-title-video-section { background-color: #d1dfe5; } .zyn-title-video-section .content-wrapper { display: flex; flex-direction: column; gap: 24px; } .zyn-title-video-section .titles-container { margin-bottom: 0; max-width: unset; text-align: start; } .zyn-title-video-section .titles-container .title-h3 { color: #00166f; } .zyn-title-video-section .titles-container .title-h3 .title-light { display: block; font-weight: 400; } .zyn-title-video-section .titles-container .title-h3 .title-bold { display: block; } .zyn-title-video-section .video-item { width: 100%; max-width: 700px; } .zyn-title-video-section .video-container { height: 700px; border-radius: 24px; } @media (max-width: 767px) { .zyn-title-video-section .video-container { height: 400px; } } .zyn-title-video-section .video-container.vertical-video { height: auto; aspect-ratio: 9/16; } .leftFiltersCol .blockHead { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px; } .nicotineFilters .TypeTitle { direction: ltr; unicode-bidi: isolate; } @media (max-width: 768px) { .brand-theme .filter-result-title .resultsText { max-width: 243px; } } .zyn-pdp .colQuantity .qty-btn.minus, .zyn-pdp .colQuantity .qty-btn.plus, .zyn-pdp .colQuantity a.minus, .zyn-pdp .colQuantity a.plus { background-image: none !important; background-color: #00166f !important; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .zyn-pdp .colQuantity .qty-btn.minus:hover, .zyn-pdp .colQuantity .qty-btn.plus:hover, .zyn-pdp .colQuantity a.minus:hover, .zyn-pdp .colQuantity a.plus:hover { filter: none !important; opacity: 0.7; } .zyn-pdp .colQuantity .qty-btn.minus, .zyn-pdp .colQuantity a.minus { mask-image: url("/images/minus-button.svg?v=bkeF6zwgMB4Fuej_9WonN4MoRm8"); -webkit-mask-image: url("/images/minus-button.svg?v=bkeF6zwgMB4Fuej_9WonN4MoRm8"); } .zyn-pdp .colQuantity .qty-btn.plus, .zyn-pdp .colQuantity a.plus { mask-image: url("/images/add-button.svg?v=rxOazbALAu1Iv9EGSW5jdpLdX78"); -webkit-mask-image: url("/images/add-button.svg?v=rxOazbALAu1Iv9EGSW5jdpLdX78"); } .zyn-pdp .product-details__image .product__slider .swiper-slide { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-inline: 56px; padding-bottom: 30px; } .zyn-pdp .product-details__image .product__slider img { max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; object-fit: contain; margin: 0 auto; } .zyn-pdp .nicotine-strengths__anchor { min-width: 104px !important; padding: 10px 30px !important; align-items: center; } .zyn-pdp .nicotine-strengths__value { font-size: 16px !important; } .zyn-pdp .product-details__wrapper { --color-section-background: #f3f5f7 !important; } .zyn-pdp #descContent h3 { font-size: 18px; font-weight: 700; color: #00166f; margin-top: 20px; margin-bottom: 15px; } .zyn-pdp #descContent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .zyn-pdp #descContent ul li { position: relative; padding-inline-start: 38px; min-height: 24px; } .zyn-pdp #descContent ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 100%; background-color: #03a8e0; } .zyn-pdp #descContent ul li::after { content: ""; position: absolute; inset-inline-start: 6.5px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; background-color: #00166f; mask-image: url(../../images/icons/tick.svg?v=ddXv4OVKODVgYMCSOdMmdLKEXSc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../../images/icons/tick.svg?v=ddXv4OVKODVgYMCSOdMmdLKEXSc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .pdp-theme-scope { display: contents; } .brand-theme { color: var(--current-text-color); } .brand-theme h1, .brand-theme h2, .brand-theme h3, .brand-theme h4, .brand-theme h5, .brand-theme h6, .brand-theme p, .brand-theme li, .brand-theme dt, .brand-theme dd, .brand-theme td, .brand-theme th, .brand-theme label, .brand-theme blockquote, .brand-theme figcaption, .brand-theme strong, .brand-theme em, .brand-theme small, .brand-theme a:not([class*=button]):not(.btn), .brand-theme .banner-title, .brand-theme .banner-description, .brand-theme .title-h4, .brand-theme .footer-support-container, .brand-theme .note-container, .brand-theme .text-default-container, .brand-theme .filters-main a, .brand-theme .resultsText, .brand-theme .listingDisclaimer, .brand-theme .product-name, .brand-theme .tile__name, .brand-theme .tile__description, .brand-theme .name-link, .brand-theme .TypeTitle, .brand-theme .removeFilters, .brand-theme .linkWrapper .link, .brand-theme .productTitle, .brand-theme .product-color, .brand-theme .product-details__title, .brand-theme .sales-price, .brand-theme .currentPrice, .brand-theme .oldPrice, .brand-theme .disclaimer, .brand-theme .ecommerceNotice, .brand-theme .accordion-button, .brand-theme .accordion-body { color: var(--current-text-color) !important; } .brand-theme h1 *, .brand-theme h2 *, .brand-theme h3 *, .brand-theme h4 *, .brand-theme h5 *, .brand-theme h6 *, .brand-theme p *, .brand-theme li *, .brand-theme dt *, .brand-theme dd *, .brand-theme td *, .brand-theme th *, .brand-theme label *, .brand-theme blockquote *, .brand-theme figcaption *, .brand-theme strong *, .brand-theme em *, .brand-theme small *, .brand-theme a:not([class*=button]):not(.btn) *, .brand-theme .banner-title *, .brand-theme .banner-description *, .brand-theme .title-h4 *, .brand-theme .footer-support-container *, .brand-theme .note-container *, .brand-theme .text-default-container *, .brand-theme .filters-main a *, .brand-theme .resultsText *, .brand-theme .listingDisclaimer *, .brand-theme .product-name *, .brand-theme .tile__name *, .brand-theme .tile__description *, .brand-theme .name-link *, .brand-theme .TypeTitle *, .brand-theme .removeFilters *, .brand-theme .linkWrapper .link *, .brand-theme .productTitle *, .brand-theme .product-color *, .brand-theme .product-details__title *, .brand-theme .sales-price *, .brand-theme .currentPrice *, .brand-theme .oldPrice *, .brand-theme .disclaimer *, .brand-theme .ecommerceNotice *, .brand-theme .accordion-button *, .brand-theme .accordion-body * { color: var(--current-text-color) !important; } .brand-theme .note-container { border-color: var(--current-text-color); } .brand-theme .filters-main .filter-item a.active { border-bottom-color: var(--current-text-color) !important; } .brand-theme .button { --color: var(--current-text-color) !important; --border-color: var(--current-text-color) !important; --hover-color: var(--default-text-color-inverse) !important; --hover-background-color: var(--current-text-color) !important; --hover-border-color: var(--current-text-color) !important; } .brand-theme .button-primary-filled { --color: var(--default-text-color-inverse) !important; --background-color: var(--current-text-color) !important; --border-color: var(--current-text-color) !important; --hover-color: var(--current-text-color) !important; --hover-background-color: transparent !important; --hover-border-color: var(--current-text-color) !important; } .brand-theme .productSticky .actionWrapper .addToCart { background-color: var(--current-text-color) !important; border-color: var(--current-text-color) !important; color: var(--default-text-color-inverse) !important; } .brand-theme .productSticky .actionWrapper .addToCart:hover { background-color: transparent !important; border-color: var(--current-text-color) !important; color: var(--current-text-color) !important; } .brand-theme .button-back, .brand-theme .backButton, .brand-theme .backLink { --main-color: var(--current-text-color) !important; } .brand-theme .swiper-prev, .brand-theme .swiper-next { --arrow-color: var(--current-text-color) !important; --arrow-border-color: var(--current-text-color) !important; --arrow-color-hover: var(--current-text-color) !important; } .brand-theme .filterItem.active { border-color: var(--current-text-color) !important; } .brand-theme .variation-container-item.selected { border-color: var(--current-text-color) !important; } .brand-theme .variation-container-item.selected .swatch-list__anchor { border-color: var(--current-text-color) !important; } .brand-theme .nicotine-strengths__item.selected { border-color: var(--current-text-color) !important; background-color: var(--current-text-color) !important; } .brand-theme .nicotine-strengths__item.selected .nicotine-strengths__anchor, .brand-theme .nicotine-strengths__item.selected .nicotine-strengths__value { color: #fff !important; } .brand-theme .js-swatch-list-item.selected .swatch-list__anchor { border-color: var(--current-text-color) !important; } .brand-theme .searchResu input { border-color: var(--current-text-color) !important; color: var(--current-text-color) !important; } .brand-theme .searchResu input::placeholder { color: var(--current-text-color) !important; } .brand-theme .searchResu input:focus { border-color: var(--current-text-color) !important; } .zyn-pdp .nicotine-strengths__item.selected { background-color: #00166f !important; border-width: 2px !important; flex-grow: 0.4; } .zyn-pdp .nicotine-strengths__item.selected .nicotine-strengths__anchor, .zyn-pdp .nicotine-strengths__item.selected .nicotine-strengths__value { color: #fff !important; } .zyn-pdp .nicotine-strengths__item.selected .nicotine-strengths__anchor.nicotine-strengths__anchor, .zyn-pdp .nicotine-strengths__item.selected .nicotine-strengths__value.nicotine-strengths__anchor { width: 100% !important; } .zyn-flavors-section { overflow-x: hidden; } .zyn-flavors-section .titles-container .title { color: #00166f; } .zyn-flavors-section .zyn-flavors-swiper { overflow: visible; margin-bottom: 40px; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev, .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next { display: flex; width: 44px; height: 44px; border-radius: 50%; background-color: #00166f; background-repeat: no-repeat; background-position: center; background-size: 12px 12px; margin-top: 0; transform: translateY(-50%); transition: opacity 0.3s ease; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev::after, .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next::after { content: none; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev .swiper-navigation-icon, .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next .swiper-navigation-icon { display: none; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev.swiper-button-disabled, .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next.swiper-button-disabled { opacity: 0.4; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); } .zyn-flavors-section .zyn-flavors-swiper .swiper-slide { width: 60vw; height: auto; box-sizing: border-box; opacity: 0.55; transition: opacity 0.4s ease; } .zyn-flavors-section .zyn-flavors-swiper .swiper-slide.swiper-slide-active { opacity: 1; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card { position: relative; height: 100%; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .card-title { color: white !important; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .card-title * { color: white !important; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .description { color: white !important; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .description * { color: white !important; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .zyn-flavor-button { background-color: #fff; color: #00166f; border: 1px solid #fff; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .zyn-flavor-button:hover, .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .zyn-flavor-button:focus-visible { background-color: #00166f; color: #fff; border-color: #fff; } .zyn-flavors-section .zyn-flavors-swiper .card-img { position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; } .zyn-flavors-section .zyn-flavors-swiper .card-img .bg-img, .zyn-flavors-section .zyn-flavors-swiper .card-img .img-container-contained { position: absolute; inset: 0; } .zyn-flavors-section .zyn-flavors-swiper .card-img .bg-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .zyn-flavors-section .zyn-flavors-swiper .card-img .img-container-contained { display: flex; align-items: center; justify-content: center; padding: 24px; } .zyn-flavors-section .zyn-flavors-swiper .card-img .img-container-contained img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .zyn-flavors-section .zyn-flavors-swiper .card-info { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 70%; padding: 24px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; color: #00166f; text-align: start; } @media (max-width: 992px) { .zyn-flavors-section .zyn-flavors-swiper .card-info { left: unset; inset-inline-start: 0; max-width: 100%; } } .zyn-flavors-section .zyn-flavors-swiper .card-info .card-title { margin-bottom: 8px; color: #00166f; font-weight: 700; } .zyn-flavors-section .zyn-flavors-swiper .card-info .description { margin-bottom: 4px; color: #00166f; font-weight: 600; } @media (max-width: 992px) { .zyn-flavors-section .zyn-flavors-swiper .card-info .description br { display: none !important; } } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 999px; background-color: #00166f; color: #fff; border: 1px solid #00166f; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-button:hover, .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-button:focus-visible { background-color: #fff; color: #00166f; border-color: #00166f; } .zyn-flavors-section .viewAll-arrow .viewAll { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 999px; background-color: #fff; color: #00166f; border: 1px solid #00166f; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .zyn-flavors-section .viewAll-arrow .viewAll:hover, .zyn-flavors-section .viewAll-arrow .viewAll:focus-visible { background-color: #00166f; color: #fff; } @media (max-width: 992px) { .zyn-flavors-section .zyn-flavors-swiper .swiper-slide { width: 85vw; } .zyn-flavors-section .zyn-flavors-swiper .card-img { aspect-ratio: 280/480; } } .zyn-colors .title-h3, .zyn-colors .body-container { color: #00166f; } .zyn-colors .footer-support-container { justify-content: center; } @media (max-width: 576px) { .zyn-colors .footer-support-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .zyn-colors .footer-support-container:where(ul, ol) { margin-bottom: 0; } .zyn-colors .footer-support-container > .col, .zyn-colors .footer-support-container > .col:is(:first-child, :last-child), .zyn-colors .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .promo-cards-section { /* ======================================== #CardClass# VOCABULARY (per card) ======================================== Every part is an independent slot that collapses when its CMS field is blank, so the same template serves two ways of building a card: TEXT-ONLY OVERLAY — the client ships finished artwork (background, logo, product, price lock-up baked in). Fill BackgroundImage plus the copy and buttons; leave LogoImage and ForegroundImage blank. Place the copy against the baked-in art with content-offset-top-* / content-offset-bottom-*. FULL BUILD — we compose the card from parts. Fill LogoImage and ForegroundImage too, and order them with logo-* / product-*. Background can be an image, a BackgroundColor, or both. Cards in the same rail may use either mode; nothing is portlet-wide. CONTENT POSITION: content-align-top | content-align-center | content-align-bottom TEXT ALIGNMENT: content-text-start | content-text-center | content-text-end EDGE INSET: content-inset-sm (16px) | -md (24px) | -lg (32px) | -xl (48px) CLEAR THE ARTWORK: content-offset-top-5 | -10 | -15 … -50 (steps of 5) content-offset-bottom-5 | … | -50 HEADLINE LINES: a direct in the Headline field is one line and takes a size — line-sm | line-md | line-lg | line-xl | line-2xl (card-relative cqw) — plus optional weight (regular | bold) and alignment (text-start | text-center | text-end, or nudge-start-5|10|15|20 / nudge-end-… for a partial shift). Nest a inside a line to restyle only part of it: little wins (% of card WIDTH, added on top of the inset — use these to drop the copy below a baked-in logo, or lift it above a baked-in product shot) LOGO (full build): logo-top | logo-bottom + logo-sm | logo-lg PRODUCT (full b.): product-top | product-middle | product-bottom + product-sm | product-lg STACK ORDER: logo 1/9 · titles 3 · highlight 4 · description 5 product 2/6/8 · buttons 7 · disclaimer 10 CONTENT WIDTH: content-max-width-180 … -300 (steps of 20) RESPONSIVE: sm- (=568px) / md- (=768px) / lg- (=992px) prefixes override the base on smaller screens, e.g. md-content-offset-top-20 ARABIC-ONLY: ar- prefix on any modifier above applies in RTL only, so a single CardClass can differ per language — CardClass is not translatable. e.g. "content-text-start ar-content-text-center" BADGE CORNER: badge-top-start | badge-top-end | badge-bottom-start | badge-bottom-end LEGIBILITY SCRIM: scrim-top | scrim-bottom | scrim-full TEXT COLOUR: content-dark | content-light SUBTITLE IMAGE: subtitle-img-sm | subtitle-img-lg (default 56px tall) #ButtonStyle# / #ButtonStyleSecond# (per card): button-zyn white pill, navy label — for ZYN artwork button-primary outline, inherits the card's text colour button-primary-filled solid, inverts the card's text colour button-arrow label + arrow, no chrome button-underlined text link WHOLE CARD LINK: clickable ARABIC: no-mirror — keep the English geometry in RTL, text still reads RTL ltr-content — force the whole card LTR (Latin-only cards) #ContainerClass# / #SubContainerClass# (per portlet): cards-per-view-2 | -3 | -4 | -5 (mobile always peeks the next card) ======================================== */ --promo-cards-per-view: 4; --promo-card-gap: 20px; overflow-x: clip; } .promo-cards-section .swiper-promo-cards { overflow: visible; } .promo-cards-section .swiper-promo-cards .swiper-wrapper { overflow: visible; } .promo-cards-section .swiper-promo-cards:where(.cards-per-view-2) { --promo-cards-per-view: 2; } .promo-cards-section .swiper-promo-cards:where(.cards-per-view-3) { --promo-cards-per-view: 3; } .promo-cards-section .swiper-promo-cards:where(.cards-per-view-4) { --promo-cards-per-view: 4; } .promo-cards-section .swiper-promo-cards:where(.cards-per-view-5) { --promo-cards-per-view: 5; } @media (max-width: 1200px) { .promo-cards-section .swiper-promo-cards { --promo-cards-per-view: 3; } } @media (max-width: 992px) { .promo-cards-section .swiper-promo-cards { --promo-cards-per-view: 2.2; } } @media (max-width: 576px) { .promo-cards-section .swiper-promo-cards { --promo-cards-per-view: 1.15; } } .promo-cards-section .swiper-slide { width: calc((100% - var(--promo-cards-per-view) * var(--promo-card-gap)) / var(--promo-cards-per-view)); height: auto; } .promo-card { --promo-card-aspect: 400 / 650; --promo-card-padding: 24px; --promo-card-radius: 8px; --promo-card-content-gap: clamp(8px, 4cqw, 20px); --promo-card-content-justify: flex-start; --promo-card-content-max-width: none; --promo-card-text-align: start; --promo-card-items-align: flex-start; --promo-card-offset-top: 0px; --promo-card-offset-bottom: 0px; --promo-card-logo-order: 9; --promo-card-product-order: 8; --promo-card-logo-height: clamp(20px, 11cqw, 48px); --promo-card-product-height: clamp(80px, 45cqw, 280px); --promo-card-badge-block: 0 auto; --promo-card-badge-inline: auto 0; --promo-card-scrim: none; --promo-card-link-display: none; --promo-card-subtitle-img-height: clamp(24px, 12cqw, 60px); position: relative; display: grid; height: 100%; overflow: hidden; container-type: inline-size; border-radius: var(--promo-card-radius); color: var(--default-text-color); text-align: var(--promo-card-text-align); } .promo-card::after { content: ""; grid-area: 1/1; width: 100%; aspect-ratio: var(--promo-card-aspect); pointer-events: none; } .promo-card.content-align-top { --promo-card-content-justify: flex-start; } .promo-card.content-align-center { --promo-card-content-justify: center; } .promo-card.content-align-bottom { --promo-card-content-justify: flex-end; } .promo-card.content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } .promo-card.content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } .promo-card.content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } .promo-card.logo-top { --promo-card-logo-order: 1; } .promo-card.logo-bottom { --promo-card-logo-order: 9; } .promo-card.product-top { --promo-card-product-order: 2; } .promo-card.product-middle { --promo-card-product-order: 6; } .promo-card.product-bottom { --promo-card-product-order: 8; } .promo-card.content-inset-sm { --promo-card-padding: 16px; } .promo-card.content-inset-md { --promo-card-padding: 24px; } .promo-card.content-inset-lg { --promo-card-padding: 32px; } .promo-card.content-inset-xl { --promo-card-padding: 48px; } .promo-card.content-offset-top-5 { --promo-card-offset-top: 5%; } .promo-card.content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } .promo-card.content-offset-top-10 { --promo-card-offset-top: 10%; } .promo-card.content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } .promo-card.content-offset-top-15 { --promo-card-offset-top: 15%; } .promo-card.content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } .promo-card.content-offset-top-20 { --promo-card-offset-top: 20%; } .promo-card.content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } .promo-card.content-offset-top-25 { --promo-card-offset-top: 25%; } .promo-card.content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } .promo-card.content-offset-top-30 { --promo-card-offset-top: 30%; } .promo-card.content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } .promo-card.content-offset-top-35 { --promo-card-offset-top: 35%; } .promo-card.content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } .promo-card.content-offset-top-40 { --promo-card-offset-top: 40%; } .promo-card.content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } .promo-card.content-offset-top-45 { --promo-card-offset-top: 45%; } .promo-card.content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } .promo-card.content-offset-top-50 { --promo-card-offset-top: 50%; } .promo-card.content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } .promo-card.content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } .promo-card.content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } .promo-card.content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } .promo-card.content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } .promo-card.content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } .promo-card.content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } .promo-card.content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } @media (max-width: 568px) { .promo-card.sm-content-align-top { --promo-card-content-justify: flex-start; } .promo-card.sm-content-align-center { --promo-card-content-justify: center; } .promo-card.sm-content-align-bottom { --promo-card-content-justify: flex-end; } .promo-card.sm-content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } .promo-card.sm-content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } .promo-card.sm-content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } .promo-card.sm-logo-top { --promo-card-logo-order: 1; } .promo-card.sm-logo-bottom { --promo-card-logo-order: 9; } .promo-card.sm-product-top { --promo-card-product-order: 2; } .promo-card.sm-product-middle { --promo-card-product-order: 6; } .promo-card.sm-product-bottom { --promo-card-product-order: 8; } .promo-card.sm-content-inset-sm { --promo-card-padding: 16px; } .promo-card.sm-content-inset-md { --promo-card-padding: 24px; } .promo-card.sm-content-inset-lg { --promo-card-padding: 32px; } .promo-card.sm-content-inset-xl { --promo-card-padding: 48px; } .promo-card.sm-content-offset-top-5 { --promo-card-offset-top: 5%; } .promo-card.sm-content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } .promo-card.sm-content-offset-top-10 { --promo-card-offset-top: 10%; } .promo-card.sm-content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } .promo-card.sm-content-offset-top-15 { --promo-card-offset-top: 15%; } .promo-card.sm-content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } .promo-card.sm-content-offset-top-20 { --promo-card-offset-top: 20%; } .promo-card.sm-content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } .promo-card.sm-content-offset-top-25 { --promo-card-offset-top: 25%; } .promo-card.sm-content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } .promo-card.sm-content-offset-top-30 { --promo-card-offset-top: 30%; } .promo-card.sm-content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } .promo-card.sm-content-offset-top-35 { --promo-card-offset-top: 35%; } .promo-card.sm-content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } .promo-card.sm-content-offset-top-40 { --promo-card-offset-top: 40%; } .promo-card.sm-content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } .promo-card.sm-content-offset-top-45 { --promo-card-offset-top: 45%; } .promo-card.sm-content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } .promo-card.sm-content-offset-top-50 { --promo-card-offset-top: 50%; } .promo-card.sm-content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } .promo-card.sm-content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } .promo-card.sm-content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } .promo-card.sm-content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } .promo-card.sm-content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } .promo-card.sm-content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } .promo-card.sm-content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } .promo-card.sm-content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } } @media (max-width: 768px) { .promo-card.md-content-align-top { --promo-card-content-justify: flex-start; } .promo-card.md-content-align-center { --promo-card-content-justify: center; } .promo-card.md-content-align-bottom { --promo-card-content-justify: flex-end; } .promo-card.md-content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } .promo-card.md-content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } .promo-card.md-content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } .promo-card.md-logo-top { --promo-card-logo-order: 1; } .promo-card.md-logo-bottom { --promo-card-logo-order: 9; } .promo-card.md-product-top { --promo-card-product-order: 2; } .promo-card.md-product-middle { --promo-card-product-order: 6; } .promo-card.md-product-bottom { --promo-card-product-order: 8; } .promo-card.md-content-inset-sm { --promo-card-padding: 16px; } .promo-card.md-content-inset-md { --promo-card-padding: 24px; } .promo-card.md-content-inset-lg { --promo-card-padding: 32px; } .promo-card.md-content-inset-xl { --promo-card-padding: 48px; } .promo-card.md-content-offset-top-5 { --promo-card-offset-top: 5%; } .promo-card.md-content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } .promo-card.md-content-offset-top-10 { --promo-card-offset-top: 10%; } .promo-card.md-content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } .promo-card.md-content-offset-top-15 { --promo-card-offset-top: 15%; } .promo-card.md-content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } .promo-card.md-content-offset-top-20 { --promo-card-offset-top: 20%; } .promo-card.md-content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } .promo-card.md-content-offset-top-25 { --promo-card-offset-top: 25%; } .promo-card.md-content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } .promo-card.md-content-offset-top-30 { --promo-card-offset-top: 30%; } .promo-card.md-content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } .promo-card.md-content-offset-top-35 { --promo-card-offset-top: 35%; } .promo-card.md-content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } .promo-card.md-content-offset-top-40 { --promo-card-offset-top: 40%; } .promo-card.md-content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } .promo-card.md-content-offset-top-45 { --promo-card-offset-top: 45%; } .promo-card.md-content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } .promo-card.md-content-offset-top-50 { --promo-card-offset-top: 50%; } .promo-card.md-content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } .promo-card.md-content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } .promo-card.md-content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } .promo-card.md-content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } .promo-card.md-content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } .promo-card.md-content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } .promo-card.md-content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } .promo-card.md-content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } } @media (max-width: 992px) { .promo-card.lg-content-align-top { --promo-card-content-justify: flex-start; } .promo-card.lg-content-align-center { --promo-card-content-justify: center; } .promo-card.lg-content-align-bottom { --promo-card-content-justify: flex-end; } .promo-card.lg-content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } .promo-card.lg-content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } .promo-card.lg-content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } .promo-card.lg-logo-top { --promo-card-logo-order: 1; } .promo-card.lg-logo-bottom { --promo-card-logo-order: 9; } .promo-card.lg-product-top { --promo-card-product-order: 2; } .promo-card.lg-product-middle { --promo-card-product-order: 6; } .promo-card.lg-product-bottom { --promo-card-product-order: 8; } .promo-card.lg-content-inset-sm { --promo-card-padding: 16px; } .promo-card.lg-content-inset-md { --promo-card-padding: 24px; } .promo-card.lg-content-inset-lg { --promo-card-padding: 32px; } .promo-card.lg-content-inset-xl { --promo-card-padding: 48px; } .promo-card.lg-content-offset-top-5 { --promo-card-offset-top: 5%; } .promo-card.lg-content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } .promo-card.lg-content-offset-top-10 { --promo-card-offset-top: 10%; } .promo-card.lg-content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } .promo-card.lg-content-offset-top-15 { --promo-card-offset-top: 15%; } .promo-card.lg-content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } .promo-card.lg-content-offset-top-20 { --promo-card-offset-top: 20%; } .promo-card.lg-content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } .promo-card.lg-content-offset-top-25 { --promo-card-offset-top: 25%; } .promo-card.lg-content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } .promo-card.lg-content-offset-top-30 { --promo-card-offset-top: 30%; } .promo-card.lg-content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } .promo-card.lg-content-offset-top-35 { --promo-card-offset-top: 35%; } .promo-card.lg-content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } .promo-card.lg-content-offset-top-40 { --promo-card-offset-top: 40%; } .promo-card.lg-content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } .promo-card.lg-content-offset-top-45 { --promo-card-offset-top: 45%; } .promo-card.lg-content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } .promo-card.lg-content-offset-top-50 { --promo-card-offset-top: 50%; } .promo-card.lg-content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } .promo-card.lg-content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } .promo-card.lg-content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } .promo-card.lg-content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } .promo-card.lg-content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } .promo-card.lg-content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } .promo-card.lg-content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } .promo-card.lg-content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } } [dir=rtl] .promo-card.ar-content-align-top { --promo-card-content-justify: flex-start; } [dir=rtl] .promo-card.ar-content-align-center { --promo-card-content-justify: center; } [dir=rtl] .promo-card.ar-content-align-bottom { --promo-card-content-justify: flex-end; } [dir=rtl] .promo-card.ar-content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } [dir=rtl] .promo-card.ar-content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } [dir=rtl] .promo-card.ar-content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } [dir=rtl] .promo-card.ar-logo-top { --promo-card-logo-order: 1; } [dir=rtl] .promo-card.ar-logo-bottom { --promo-card-logo-order: 9; } [dir=rtl] .promo-card.ar-product-top { --promo-card-product-order: 2; } [dir=rtl] .promo-card.ar-product-middle { --promo-card-product-order: 6; } [dir=rtl] .promo-card.ar-product-bottom { --promo-card-product-order: 8; } [dir=rtl] .promo-card.ar-content-inset-sm { --promo-card-padding: 16px; } [dir=rtl] .promo-card.ar-content-inset-md { --promo-card-padding: 24px; } [dir=rtl] .promo-card.ar-content-inset-lg { --promo-card-padding: 32px; } [dir=rtl] .promo-card.ar-content-inset-xl { --promo-card-padding: 48px; } [dir=rtl] .promo-card.ar-content-offset-top-5 { --promo-card-offset-top: 5%; } [dir=rtl] .promo-card.ar-content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } [dir=rtl] .promo-card.ar-content-offset-top-10 { --promo-card-offset-top: 10%; } [dir=rtl] .promo-card.ar-content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } [dir=rtl] .promo-card.ar-content-offset-top-15 { --promo-card-offset-top: 15%; } [dir=rtl] .promo-card.ar-content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } [dir=rtl] .promo-card.ar-content-offset-top-20 { --promo-card-offset-top: 20%; } [dir=rtl] .promo-card.ar-content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } [dir=rtl] .promo-card.ar-content-offset-top-25 { --promo-card-offset-top: 25%; } [dir=rtl] .promo-card.ar-content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } [dir=rtl] .promo-card.ar-content-offset-top-30 { --promo-card-offset-top: 30%; } [dir=rtl] .promo-card.ar-content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } [dir=rtl] .promo-card.ar-content-offset-top-35 { --promo-card-offset-top: 35%; } [dir=rtl] .promo-card.ar-content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } [dir=rtl] .promo-card.ar-content-offset-top-40 { --promo-card-offset-top: 40%; } [dir=rtl] .promo-card.ar-content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } [dir=rtl] .promo-card.ar-content-offset-top-45 { --promo-card-offset-top: 45%; } [dir=rtl] .promo-card.ar-content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } [dir=rtl] .promo-card.ar-content-offset-top-50 { --promo-card-offset-top: 50%; } [dir=rtl] .promo-card.ar-content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } [dir=rtl] .promo-card.ar-content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } .promo-card .promo-card__media { position: absolute; inset: 0; z-index: 0; } .promo-card .promo-card__media img { width: 100%; height: 100%; object-fit: cover; } .promo-card .promo-card__media::after { content: ""; position: absolute; inset: 0; background: var(--promo-card-scrim); pointer-events: none; } .promo-card.scrim-top { --promo-card-scrim: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 60%); } .promo-card.scrim-bottom { --promo-card-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 60%); } .promo-card.scrim-full { --promo-card-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2)); } .promo-card .promo-card__link { display: var(--promo-card-link-display); position: absolute; inset: 0; z-index: 2; } .promo-card.clickable { --promo-card-link-display: block; } .promo-card .promo-card__badge { position: absolute; z-index: 4; inset-block: var(--promo-card-badge-block); inset-inline: var(--promo-card-badge-inline); margin: var(--promo-card-padding); padding: 6px 12px; border-radius: 100px; background-color: var(--default-text-color-inverse); color: var(--default-text-color); font-weight: 600; unicode-bidi: isolate; font-size: clamp(11px, 9.9678899083px + 0.2293577982vw, 13px); } .promo-card .promo-card__badge:empty { display: none; } .promo-card.badge-top-start { --promo-card-badge-block: 0 auto; --promo-card-badge-inline: 0 auto; } .promo-card.badge-top-end { --promo-card-badge-block: 0 auto; --promo-card-badge-inline: auto 0; } .promo-card.badge-bottom-start { --promo-card-badge-block: auto 0; --promo-card-badge-inline: 0 auto; } .promo-card.badge-bottom-end { --promo-card-badge-block: auto 0; --promo-card-badge-inline: auto 0; } .promo-card .promo-card__content { grid-area: 1/1; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: var(--promo-card-content-justify); align-items: var(--promo-card-items-align); gap: var(--promo-card-content-gap); width: 100%; padding: var(--promo-card-padding); padding-block-start: calc(var(--promo-card-padding) + var(--promo-card-offset-top)); padding-block-end: calc(var(--promo-card-padding) + var(--promo-card-offset-bottom)); } .promo-card .promo-card__content > * { max-width: var(--promo-card-content-max-width); } .promo-card .promo-card__logo { order: var(--promo-card-logo-order); } .promo-card .promo-card__logo img { max-height: var(--promo-card-logo-height); max-width: 100%; width: auto; object-fit: contain; } .promo-card .promo-card__logo:not(:has(img:not([src=""]))) { display: none; } .promo-card.logo-sm { --promo-card-logo-height: clamp(14px, 8cqw, 34px); } .promo-card.logo-lg { --promo-card-logo-height: clamp(28px, 15cqw, 66px); } .promo-card .promo-card__product { order: var(--promo-card-product-order); } .promo-card .promo-card__product img { max-height: var(--promo-card-product-height); max-width: 100%; width: auto; object-fit: contain; } .promo-card .promo-card__product:not(:has(img:not([src=""]))) { display: none; } .promo-card.product-sm { --promo-card-product-height: clamp(60px, 30cqw, 190px); } .promo-card.product-lg { --promo-card-product-height: clamp(110px, 60cqw, 380px); } .promo-card .titles-container { order: 3; --spacing: 8px; margin-bottom: 0; max-width: var(--promo-card-content-max-width); } .promo-card .promo-card__title { font-weight: 600; line-height: 1.15; text-wrap: balance; font-size: clamp(18px, 7cqw, 34px); } .promo-card .promo-card__title > span { display: block; } .promo-card .promo-card__title .line-sm { font-size: clamp(13px, 5cqw, 24px); } .promo-card .promo-card__title .line-md { font-size: clamp(16px, 6.5cqw, 30px); } .promo-card .promo-card__title .line-lg { font-size: clamp(20px, 8cqw, 38px); } .promo-card .promo-card__title .line-xl { font-size: clamp(24px, 9.5cqw, 46px); } .promo-card .promo-card__title .line-2xl { font-size: clamp(28px, 11.5cqw, 56px); } .promo-card .promo-card__title .regular { font-weight: 400; } .promo-card .promo-card__title .bold { font-weight: 600; } .promo-card .promo-card__title > .text-start { text-align: start; } .promo-card .promo-card__title > .text-center { text-align: center; } .promo-card .promo-card__title > .text-end { text-align: end; } .promo-card .promo-card__title > .nudge-start-5 { padding-inline-end: 10%; } .promo-card .promo-card__title > .nudge-end-5 { padding-inline-start: 10%; } .promo-card .promo-card__title > .nudge-start-10 { padding-inline-end: 20%; } .promo-card .promo-card__title > .nudge-end-10 { padding-inline-start: 20%; } .promo-card .promo-card__title > .nudge-start-15 { padding-inline-end: 30%; } .promo-card .promo-card__title > .nudge-end-15 { padding-inline-start: 30%; } .promo-card .promo-card__title > .nudge-start-20 { padding-inline-end: 40%; } .promo-card .promo-card__title > .nudge-end-20 { padding-inline-start: 40%; } .promo-card .promo-card__title:empty, .promo-card .promo-card__title:not(:has(img, svg, video, iframe)):has(> :first-child:last-child:empty), .promo-card .promo-card__title:not(:has(img, svg, video, iframe)):has(> :first-child:last-child > br:only-child) { display: none; } .promo-card .promo-card__subtitle { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .promo-card .promo-card__subtitle:empty { display: none; } .promo-card .promo-card__subtitle p { margin-bottom: 16px; } .promo-card .promo-card__subtitle p:last-child { margin-bottom: 0; } .promo-card .promo-card__subtitle ul, .promo-card .promo-card__subtitle ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .promo-card .promo-card__subtitle li { list-style: disc; } .promo-card .promo-card__subtitle { font-size: clamp(17px, 16.4839449541px + 0.1146788991vw, 18px); line-height: 1.5; font-size: clamp(12px, 4.4cqw, 18px); } .promo-card .promo-card__subtitle img { max-width: 100%; max-height: var(--promo-card-subtitle-img-height); width: auto; height: auto; } .promo-card .promo-card__subtitle:empty, .promo-card .promo-card__subtitle:not(:has(img, svg, video, iframe)):has(> :first-child:last-child:empty), .promo-card .promo-card__subtitle:not(:has(img, svg, video, iframe)):has(> :first-child:last-child > br:only-child) { display: none; } .promo-card.subtitle-img-sm { --promo-card-subtitle-img-height: clamp(16px, 8cqw, 40px); } .promo-card.subtitle-img-lg { --promo-card-subtitle-img-height: clamp(30px, 16cqw, 80px); } .promo-card .promo-card__highlight { order: 4; font-weight: 600; unicode-bidi: isolate; font-size: clamp(24px, 18.8394495413px + 1.1467889908vw, 34px); } .promo-card .promo-card__highlight:empty { display: none; } .promo-card .promo-card__description { order: 5; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .promo-card .promo-card__description:empty { display: none; } .promo-card .promo-card__description p { margin-bottom: 16px; } .promo-card .promo-card__description p:last-child { margin-bottom: 0; } .promo-card .promo-card__description ul, .promo-card .promo-card__description ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .promo-card .promo-card__description li { list-style: disc; } .promo-card .promo-card__description { font-size: clamp(13px, 12.4839449541px + 0.1146788991vw, 14px); line-height: 1.5; font-size: clamp(11px, 4cqw, 16px); } .promo-card .promo-card__description img { max-width: 100%; height: auto; } .promo-card .promo-card__description:empty, .promo-card .promo-card__description:not(:has(img, svg, video, iframe)):has(> :first-child:last-child:empty), .promo-card .promo-card__description:not(:has(img, svg, video, iframe)):has(> :first-child:last-child > br:only-child) { display: none; } .promo-card .buttons-container { order: 7; z-index: 3; gap: clamp(6px, 3cqw, 16px); justify-content: var(--promo-card-items-align); } .promo-card .promo-card__cta:not([class*=button-]) { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .promo-card .promo-card__cta:not([class*=button-]):empty { display: none; } .promo-card .promo-card__cta:not([class*=button-]):hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .promo-card .promo-card__cta { font-size: clamp(11px, 3.9cqw, 16px); padding-block: clamp(4px, 1.4cqw, 7px) clamp(6px, 2.2cqw, 10px); padding-inline: clamp(12px, 4.2cqw, 32px); border-width: clamp(1px, 0.5cqw, 2px); } .promo-card .promo-card__disclaimer { order: 10; opacity: 0.7; font-size: clamp(10px, 8.9678899083px + 0.2293577982vw, 12px); } .promo-card .promo-card__disclaimer > :last-child { margin-bottom: 0; } .promo-card .promo-card__disclaimer:empty, .promo-card .promo-card__disclaimer:not(:has(img, svg, video, iframe)):has(> :first-child:last-child:empty), .promo-card .promo-card__disclaimer:not(:has(img, svg, video, iframe)):has(> :first-child:last-child > br:only-child) { display: none; } .promo-card.content-dark { --default-text-color: #34303d; --default-text-color-inverse: white; } .promo-card.content-light { --default-text-color: white; --default-text-color-inverse: #34303d; } [dir=rtl] .promo-card.no-mirror { direction: ltr; } [dir=rtl] .promo-card.no-mirror .promo-card__content { direction: rtl; } .promo-card.ltr-content { direction: ltr; } .iluma-i-accessories-promo .content-left { height: 100%; max-width: 38% !important; } .iluma-i-accessories-promo .content-left .content-info { height: 100%; display: flex; flex-direction: column; /* justify-content: space-between; */ } .iluma-i-accessories-promo .content-left .content-info .buttons-container { margin-top: 0px !important; justify-content: flex-start !important; } .iluma-i-accessories-promo .content-left .content-info .buttons-container a { border-color: black !important; border-width: 1px !important; } .iluma-i-accessories-promo .content-left .banner-title { padding-top: 10%; color: black; display: flex; flex-direction: column; text-align: start; font-size: clamp(28px, 2vw, 55px) !important; font-weight: 400 !important; } .iluma-i-accessories-promo .content-left .banner-title img:first-of-type { display: none; } .iluma-i-accessories-promo .content-left .banner-title span { margin-top: 15px; color: turquoise; font-weight: bold !important; font-size: clamp(34px, 2vw, 55px) !important; width: 100%; } .iluma-i-accessories-promo .content-left .banner-title img { margin-top: 5px; object-fit: contain; width: 100%; max-width: 95% !important; } .iluma-i-accessories-promo .content-left .banner-subtitle2 { color: black; text-align: start; font-size: clamp(15px, 1.5vw, 25px) !important; margin-top: auto !important; } @media (max-width: 992px) { .iluma-i-accessories-promo .content-left { width: 100% !important; max-width: 100% !important; } .iluma-i-accessories-promo .content-left .content-info { justify-content: flex-start; max-height: 50%; } .iluma-i-accessories-promo .content-left .content-info .buttons-container { justify-content: center !important; } .iluma-i-accessories-promo .content-left .banner-title { padding-top: 0; text-align: center; margin-bottom: 0 !important; } .iluma-i-accessories-promo .content-left .banner-title span { margin-top: 0; margin-bottom: 10px; } .iluma-i-accessories-promo .content-left .banner-title img:first-of-type { display: block; max-width: 76% !important; margin-inline: auto; margin-bottom: 2%; margin-top: 1%; } .iluma-i-accessories-promo .content-left .banner-title img:not(:first-of-type) { display: none; } .iluma-i-accessories-promo .content-left .banner-subtitle2 { text-align: center; } } @charset "UTF-8"; @font-face { font-family: "IQOS"; src: url("/styles/fonts/IQOS-Light.eot?v=qppCnYqtHOdXUbagLVDSTrgzvpM"); src: url("/styles/fonts/IQOS-Light.eot?v=qppCnYqtHOdXUbagLVDSTrgzvpM&#iefix") format("embedded-opentype"), url("/styles/fonts/IQOS-Light.woff2?v=rjU_G3HOBn3lgT5TgE6qrmKaHYs") format("woff2"), url("/styles/fonts/IQOS-Light.woff?v=UvzbfOXRHlAqizGGOGZ7zddn6FM") format("woff"), url("/styles/fonts/IQOS-Light.ttf?v=JL-FCfLCuSpyWHOE8lPyz5uFE9s") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS"; src: url("/styles/fonts/IQOS-Bold.eot?v=qnMccEYAtpOCqncU5LiITPe4syM"); src: url("/styles/fonts/IQOS-Bold.eot?v=qnMccEYAtpOCqncU5LiITPe4syM&#iefix") format("embedded-opentype"), url("/styles/fonts/IQOS-Bold.woff2?v=K7j1AnErqH2kE98k46RwI_0jkd4") format("woff2"), url("/styles/fonts/IQOS-Bold.woff?v=NGV2HLfGC32Ghjj0PTwuZx7qFsM") format("woff"), url("/styles/fonts/IQOS-Bold.ttf?v=jHMjk9mjo9q7NVkxO8Zhkh2zs2o") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS"; src: url("/styles/fonts/IQOS-Regular.eot?v=TttrPZWcoVNBEWdup-gcTGwvgR8"); src: url("/styles/fonts/IQOS-Regular.eot?v=TttrPZWcoVNBEWdup-gcTGwvgR8&#iefix") format("embedded-opentype"), url("/styles/fonts/IQOS-Regular.woff2?v=a4Xh9zoCJdeF34wzlSdsEBeg_l4") format("woff2"), url("/styles/fonts/IQOS-Regular.woff?v=BQEsx5co-GeI8-KqmrJIafmwuSw") format("woff"), url("/styles/fonts/IQOS-Regular.ttf?v=QPVp-AwRCAS5Xts-lLvH0S29HjY") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS AR"; src: url("/styles/fonts/ar/IQOSSansArabic-Light.eot?v=Sbe0niXxDLV67r6VA2OwG0o-wls"); src: url("/styles/fonts/ar/IQOSSansArabic-Light.eot?v=Sbe0niXxDLV67r6VA2OwG0o-wls&#iefix") format("embedded-opentype"), url("/styles/fonts/ar/IQOSSansArabic-Light.woff2?v=jnzoVAzCXsvBmJ_zKh8yIUZeUZ4") format("woff2"), url("/styles/fonts/ar/IQOSSansArabic-Light.woff?v=_281RlRucHUBbJqvaKnepXISMIQ") format("woff"), url("/styles/fonts/ar/IQOSSansArabic-Light.ttf?v=dkRrIZOluMaEZCcQKlOSU8AVqmE") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS AR"; src: url("/styles/fonts/ar/IQOSSansArabic-Bold.eot?v=uWyanSLZPP0LnI3MiKjACT3tN9I"); src: url("/styles/fonts/ar/IQOSSansArabic-Bold.eot?v=uWyanSLZPP0LnI3MiKjACT3tN9I&#iefix") format("embedded-opentype"), url("/styles/fonts/ar/IQOSSansArabic-Bold.woff2?v=Y0_nlfnFc89Ehfvv3BJ4EYZSni8") format("woff2"), url("/styles/fonts/ar/IQOSSansArabic-Bold.woff?v=qptu7NupusLeV0k9BbtHuF4rWN8") format("woff"), url("/styles/fonts/ar/IQOSSansArabic-Bold.ttf?v=_Eu4o6SWi4GSRvgt8w_vflthROQ") format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "IQOS AR"; src: url("/styles/fonts/ar/IQOSSansArabic-Regular.eot?v=3osA6w6_r3BWc6q6sFsaxWOt0Jc"); src: url("/styles/fonts/ar/IQOSSansArabic-Regular.eot?v=3osA6w6_r3BWc6q6sFsaxWOt0Jc&#iefix") format("embedded-opentype"), url("/styles/fonts/ar/IQOSSansArabic-Regular.woff2?v=WOX7J2meVv70fPqvalOiQdnKgk8") format("woff2"), url("/styles/fonts/ar/IQOSSansArabic-Regular.woff?v=CW1JRIWxhvzz1kwNQ6zYG5eTnHc") format("woff"), url("/styles/fonts/ar/IQOSSansArabic-Regular.ttf?v=3osA6w6_r3BWc6q6sFsaxWOt0Jc") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } :root { --default-text-color: var(--current-text-color, #34303d); --default-text-color-inverse: var(--current-text-color-inverse, white); --default-current-color: var(--current-color, #00d1d2); } :root { --container-gutter-x: 20px; --container-width: calc(100vw - var(--container-gutter-x)); } @media (min-width: 400px) { :root { --container-gutter-x: 20px; } } @media (min-width: 768px) { :root { --container-width: calc(720px - var(--container-gutter-x)); --container-gutter-x: 16px; } } @media (min-width: 992px) { :root { --container-width: calc(960px - var(--container-gutter-x)); } } @media (min-width: 1200px) { :root { --container-width: calc(1140px - var(--container-gutter-x)); } } @media (min-width: 1400px) { :root { --container-width: calc( calc(1324px + var(--container-gutter-x)) - var(--container-gutter-x) ); } } :root { --container-flex-direction: row; --container-flex-direction-inverse: row-reverse; --arrow-direction: 0deg; --flip-value: 1; } /* General Mixins & Functions */ sup { top: 0.5em; } ol, ul { padding-left: 0px; } li { list-style: none; } a { text-decoration: none; } a[href=""] { pointer-events: none; } .mainBodyWrapper { padding-top: 55px; } .container { width: 100%; padding-inline: var(--container-gutter-x); margin-inline: auto; } @media (min-width: 576px) { .container { max-width: unset; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: calc(1324px + var(--container-gutter-x)); } } @media (min-width: 1400px) { .container-fluid:not(.container) { padding-inline: calc(var(--container-gutter-x) * 2); } } .container-fluid.no-container { padding-inline: 0; max-width: unset; } .force-container-fluid { max-width: unset; padding-inline: calc(var(--container-gutter-x) * 2); } .no-container > :is(.container, .container-fluid) { padding-inline: 0; max-width: unset; } .force-no-container :is(.container, .container-fluid) { padding-inline: 0 !important; max-width: unset !important; } .section-container { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container { --section-pt: calc(50px / 2); --section-pb: calc(50px / 2); } } .section-container.pb-0 { --section-pb: 0px !important; } .section-container.pt-0 { --section-pt: 0px !important; } .section-container.py-0 { --section-pt: 0px !important; --section-pb: 0px !important; } .section-container:has(.disable-section-container) { --section-pt: 0px !important; --section-pb: 0px !important; } .section-container-top { position: relative; z-index: 2; --section-pt: calc(100px / 2); padding-top: var(--section-pt); } @media (max-width: 768px) { .section-container-top { --section-pt: calc(50px / 2); } } .section-container-bottom { position: relative; z-index: 2; --section-pb: calc(100px / 2); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom { --section-pb: calc(50px / 2); } } .section-container-xl { position: relative; z-index: 2; --section-pt: 100px; --section-pb: 100px; padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-xl { --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); } } .section-container-lg { position: relative; z-index: 2; --section-pt: calc(100px - 20px); --section-pb: calc(100px - 20px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-lg { --section-pt: calc(100px / 2); --section-pb: calc(100px / 2); } } .section-container-md { position: relative; z-index: 2; --section-pt: calc(100px / 2); --section-pb: calc(100px / 2); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-md { --section-pt: calc(100px / 2); --section-pb: calc(100px / 2); } } .section-container-sm { position: relative; z-index: 2; --section-pt: calc(100px / 2); --section-pb: calc(100px / 2); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-sm { --section-pt: calc(100px / 3); --section-pb: calc(100px / 3); } } .section-container-top-xl { position: relative; z-index: 2; --section-pt: calc(100px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-top-xl { position: relative; z-index: 2; --section-pt: calc(calc(100px * 0.5)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-bottom-xl { position: relative; z-index: 2; --section-pb: calc(100px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom-xl { position: relative; z-index: 2; --section-pb: calc(calc(100px * 0.5)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-top-lg { position: relative; z-index: 2; --section-pt: calc(calc(100px - 20px)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-top-lg { position: relative; z-index: 2; --section-pt: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-bottom-lg { position: relative; z-index: 2; --section-pb: calc(calc(100px - 20px)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom-lg { position: relative; z-index: 2; --section-pb: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-top-md { position: relative; z-index: 2; --section-pt: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-top-md { position: relative; z-index: 2; --section-pt: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-bottom-md { position: relative; z-index: 2; --section-pb: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom-md { position: relative; z-index: 2; --section-pb: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-top-sm { position: relative; z-index: 2; --section-pt: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-top-sm { position: relative; z-index: 2; --section-pt: calc(calc(100px / 3)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .section-container-bottom-sm { position: relative; z-index: 2; --section-pb: calc(calc(100px / 2)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } @media (max-width: 768px) { .section-container-bottom-sm { position: relative; z-index: 2; --section-pb: calc(calc(100px / 3)); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .max-w-200 { max-width: 200px !important; } .max-w-300 { max-width: 300px !important; } .max-w-400 { max-width: 400px !important; } .max-w-500 { max-width: 500px !important; } .max-w-600 { max-width: 600px !important; } .max-w-700 { max-width: 700px !important; } .max-w-800 { max-width: 800px !important; } .max-w-900 { max-width: 900px !important; } .max-w-1000 { max-width: 1000px !important; } .max-w-1100 { max-width: 1100px !important; } .max-w-1200 { max-width: 1200px !important; } [class^=max-w].center { margin-inline: auto; } .reverse { --container-flex-direction: row-reverse; --container-flex-direction-inverse: row; } @media (max-width: 992px) { .reverse-mobile { --container-flex-direction: column-reverse; } } .split-page { position: relative; flex-direction: var(--container-flex-direction); --page-gap: 40px; --gap: var(--page-gap); --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .split-page:where(ul, ol) { margin-bottom: 0; } .split-page > .col, .split-page > .col:is(:first-child, :last-child), .split-page > .listingItemDIV { flex: unset; width: var(--col-width); } @media (min-width: 992px) { .split-page.split-3-9 { display: flex; flex-wrap: wrap; --gap: var(--page-gap); gap: var(--gap); } .split-page.split-3-9:where(ul, ol) { margin-bottom: 0; } .split-page.split-3-9 > .col, .split-page.split-3-9 > .listingItemDIV { flex: unset; } .split-page.split-3-9 > .col:where(:nth-child(odd)), .split-page.split-3-9 > .listingItemDIV:where(:nth-child(odd)) { width: calc(35% - var(--gap) / 2); } .split-page.split-3-9 > .col:where(:nth-child(even)), .split-page.split-3-9 > .listingItemDIV:where(:nth-child(even)) { width: calc(65% - var(--gap) / 2); } } @media (min-width: 1200px) { .split-page.split-3-9 { display: flex; flex-wrap: wrap; --gap: var(--page-gap); gap: var(--gap); } .split-page.split-3-9:where(ul, ol) { margin-bottom: 0; } .split-page.split-3-9 > .col, .split-page.split-3-9 > .listingItemDIV { flex: unset; } .split-page.split-3-9 > .col:where(:nth-child(odd)), .split-page.split-3-9 > .listingItemDIV:where(:nth-child(odd)) { width: calc(25% - var(--gap) / 2); } .split-page.split-3-9 > .col:where(:nth-child(even)), .split-page.split-3-9 > .listingItemDIV:where(:nth-child(even)) { width: calc(75% - var(--gap) / 2); } } @media (min-width: 992px) { .split-page.split-4-8 { display: flex; flex-wrap: wrap; --gap: var(--page-gap); gap: var(--gap); } .split-page.split-4-8:where(ul, ol) { margin-bottom: 0; } .split-page.split-4-8 > .col, .split-page.split-4-8 > .listingItemDIV { flex: unset; } .split-page.split-4-8 > .col:where(:nth-child(odd)), .split-page.split-4-8 > .listingItemDIV:where(:nth-child(odd)) { width: calc(40% - var(--gap) / 2); } .split-page.split-4-8 > .col:where(:nth-child(even)), .split-page.split-4-8 > .listingItemDIV:where(:nth-child(even)) { width: calc(60% - var(--gap) / 2); } } @media (min-width: 1200px) { .split-page.split-4-8 { display: flex; flex-wrap: wrap; --gap: var(--page-gap); gap: var(--gap); } .split-page.split-4-8:where(ul, ol) { margin-bottom: 0; } .split-page.split-4-8 > .col, .split-page.split-4-8 > .listingItemDIV { flex: unset; } .split-page.split-4-8 > .col:where(:nth-child(odd)), .split-page.split-4-8 > .listingItemDIV:where(:nth-child(odd)) { width: calc(30% - var(--gap) / 2); } .split-page.split-4-8 > .col:where(:nth-child(even)), .split-page.split-4-8 > .listingItemDIV:where(:nth-child(even)) { width: calc(70% - var(--gap) / 2); } } .primary { --current-color: #00d1d2; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.primary .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.primary .button-primary:empty { display: none; } .background-colored.primary .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .gray-dark { --current-color: #34303d; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.gray-dark .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.gray-dark .button-primary:empty { display: none; } .background-colored.gray-dark .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .gray-light { --current-color: #f6f4f0; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .classic-red { --current-color: #A7312F; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.classic-red .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.classic-red .button-primary:empty { display: none; } .background-colored.classic-red .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .amber { --current-color: #E88147; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.amber .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.amber .button-primary:empty { display: none; } .background-colored.amber .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .nice-blue { --current-color: #207CA9; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.nice-blue .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.nice-blue .button-primary:empty { display: none; } .background-colored.nice-blue .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .white { --current-color: white; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .terea-sienna { --current-color: #D4302F; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-sienna .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-sienna .button-primary:empty { display: none; } .background-colored.terea-sienna .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-amber { --current-color: #C24213; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-amber .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-amber .button-primary:empty { display: none; } .background-colored.terea-amber .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-silver { --current-color: #808183; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-silver .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-silver .button-primary:empty { display: none; } .background-colored.terea-silver .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-turquoise { --current-color: #119FAD; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-turquoise .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-turquoise .button-primary:empty { display: none; } .background-colored.terea-turquoise .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-purple { --current-color: #8255B2; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-purple .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-purple .button-primary:empty { display: none; } .background-colored.terea-purple .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-yellow { --current-color: #EAB108; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.terea-yellow .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-yellow .button-primary:empty { display: none; } .background-colored.terea-yellow .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-arbor { --current-color: #049218; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-arbor .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-arbor .button-primary:empty { display: none; } .background-colored.terea-arbor .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-beige { --current-color: #bf9f85; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.terea-beige .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-beige .button-primary:empty { display: none; } .background-colored.terea-beige .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-oasis { --current-color: #b1269e; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-oasis .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-oasis .button-primary:empty { display: none; } .background-colored.terea-oasis .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-summer { --current-color: #ec7253; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-summer .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-summer .button-primary:empty { display: none; } .background-colored.terea-summer .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .terea-sun { --current-color: #ac3223; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.terea-sun .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.terea-sun .button-primary:empty { display: none; } .background-colored.terea-sun .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .sky-blue { --current-color: #00C1FF; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.sky-blue .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.sky-blue .button-primary:empty { display: none; } .background-colored.sky-blue .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .cyan { --current-color: #1BD9C5; --text-color: #34303d; --current-text-color: #34303d; --current-text-color-inverse: white; } .background-colored.cyan .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.cyan .button-primary:empty { display: none; } .background-colored.cyan .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .purple { --current-color: #2d008b; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.purple .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.purple .button-primary:empty { display: none; } .background-colored.purple .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .delia-gold { --current-color: #C2A37C; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.delia-gold .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.delia-gold .button-primary:empty { display: none; } .background-colored.delia-gold .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .delia-silver { --current-color: #A0A1AA; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.delia-silver .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.delia-silver .button-primary:empty { display: none; } .background-colored.delia-silver .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .delia-red { --current-color: #A6312F; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.delia-red .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.delia-red .button-primary:empty { display: none; } .background-colored.delia-red .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .delia-green { --current-color: #4DA793; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.delia-green .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.delia-green .button-primary:empty { display: none; } .background-colored.delia-green .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .zyn-navy { --current-color: #00166f; --text-color: white; --current-text-color: white; --current-text-color-inverse: #34303d; } .background-colored.zyn-navy .button-primary { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .background-colored.zyn-navy .button-primary:empty { display: none; } .background-colored.zyn-navy .button-primary:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .background-light { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #f6f4f0; margin-top: -1px; position: relative; } .background-light::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .background-light.half-bg::before { height: 50%; } .background-light > * { isolation: isolate; } .background-primary { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #00d1d2; position: relative; } .background-primary::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .background-primary.half-bg::before { height: 50%; } .background-primary > * { isolation: isolate; } .background-colored { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: var(--current-color, transparent); --default-text-color: var(--text-color, inherit); --default-text-color-inverse: var(--current-text-color-inverse, inherit); color: var(--text-color, inherit); position: relative; } .background-colored::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .background-colored.half-bg::before { height: 50%; } .background-colored > * { isolation: isolate; } .background-colored.variable-color { --color-section-background: var(--variable-color); } .background-colored.white { --section-pt: 0; --section-pb: 0; } .background-white { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: var(--current-color, transparent); --default-text-color: var(--text-color, inherit); --default-text-color-inverse: var(--current-text-color-inverse, inherit); color: var(--text-color, inherit); position: relative; } .background-white::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .background-white.half-bg::before { height: 50%; } .background-white > * { isolation: isolate; } .background-white { --current-color: white; --text-color: #34303d; --color-section-background: var(--current-color, transparent); --default-text-color: var(--text-color, inherit); --default-text-color-inverse: var(--current-text-color-inverse, inherit); color: var(--text-color, inherit); } .theme-dark { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #27242d; --default-text-color: white; --default-text-color-inverse: #34303d; color: var(--default-text-color); margin-top: -1px; position: relative; } .theme-dark::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .theme-dark.half-bg::before { height: 50%; } .theme-dark > * { isolation: isolate; } .theme-black { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: black; --default-text-color: white; --default-text-color-inverse: #34303d; color: var(--default-text-color); margin-top: -1px; position: relative; } .theme-black::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .theme-black.half-bg::before { height: 50%; } .theme-black > * { isolation: isolate; } .theme-light { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: white; position: relative; } .theme-light::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .theme-light.half-bg::before { height: 50%; } .theme-light > * { isolation: isolate; } .mt-0 { margin-top: 0px !important; } .mb-0 { margin-bottom: 0px !important; } .pt-0 { padding-top: 0px !important; } .pb-0 { padding-bottom: 0px !important; } @media (min-width: 768px) { .mt-md-0 { margin-top: 0px !important; } .mb-md-0 { margin-bottom: 0px !important; } .pt-md-0 { padding-top: 0px !important; } .pb-md-0 { padding-bottom: 0px !important; } } @media (min-width: 992px) { .mt-lg-0 { margin-top: 0px !important; } .mb-lg-0 { margin-bottom: 0px !important; } .pt-lg-0 { padding-top: 0px !important; } .pb-lg-0 { padding-bottom: 0px !important; } } .mt-10 { margin-top: 10px !important; } .mb-10 { margin-bottom: 10px !important; } .pt-10 { padding-top: 10px !important; } .pb-10 { padding-bottom: 10px !important; } @media (min-width: 768px) { .mt-md-10 { margin-top: 10px !important; } .mb-md-10 { margin-bottom: 10px !important; } .pt-md-10 { padding-top: 10px !important; } .pb-md-10 { padding-bottom: 10px !important; } } @media (min-width: 992px) { .mt-lg-10 { margin-top: 10px !important; } .mb-lg-10 { margin-bottom: 10px !important; } .pt-lg-10 { padding-top: 10px !important; } .pb-lg-10 { padding-bottom: 10px !important; } } .mt-20 { margin-top: 20px !important; } .mb-20 { margin-bottom: 20px !important; } .pt-20 { padding-top: 20px !important; } .pb-20 { padding-bottom: 20px !important; } @media (min-width: 768px) { .mt-md-20 { margin-top: 20px !important; } .mb-md-20 { margin-bottom: 20px !important; } .pt-md-20 { padding-top: 20px !important; } .pb-md-20 { padding-bottom: 20px !important; } } @media (min-width: 992px) { .mt-lg-20 { margin-top: 20px !important; } .mb-lg-20 { margin-bottom: 20px !important; } .pt-lg-20 { padding-top: 20px !important; } .pb-lg-20 { padding-bottom: 20px !important; } } .mt-30 { margin-top: 30px !important; } .mb-30 { margin-bottom: 30px !important; } .pt-30 { padding-top: 30px !important; } .pb-30 { padding-bottom: 30px !important; } @media (min-width: 768px) { .mt-md-30 { margin-top: 30px !important; } .mb-md-30 { margin-bottom: 30px !important; } .pt-md-30 { padding-top: 30px !important; } .pb-md-30 { padding-bottom: 30px !important; } } @media (min-width: 992px) { .mt-lg-30 { margin-top: 30px !important; } .mb-lg-30 { margin-bottom: 30px !important; } .pt-lg-30 { padding-top: 30px !important; } .pb-lg-30 { padding-bottom: 30px !important; } } .mt-40 { margin-top: 40px !important; } .mb-40 { margin-bottom: 40px !important; } .pt-40 { padding-top: 40px !important; } .pb-40 { padding-bottom: 40px !important; } @media (min-width: 768px) { .mt-md-40 { margin-top: 40px !important; } .mb-md-40 { margin-bottom: 40px !important; } .pt-md-40 { padding-top: 40px !important; } .pb-md-40 { padding-bottom: 40px !important; } } @media (min-width: 992px) { .mt-lg-40 { margin-top: 40px !important; } .mb-lg-40 { margin-bottom: 40px !important; } .pt-lg-40 { padding-top: 40px !important; } .pb-lg-40 { padding-bottom: 40px !important; } } .mt-50 { margin-top: 50px !important; } .mb-50 { margin-bottom: 50px !important; } .pt-50 { padding-top: 50px !important; } .pb-50 { padding-bottom: 50px !important; } @media (min-width: 768px) { .mt-md-50 { margin-top: 50px !important; } .mb-md-50 { margin-bottom: 50px !important; } .pt-md-50 { padding-top: 50px !important; } .pb-md-50 { padding-bottom: 50px !important; } } @media (min-width: 992px) { .mt-lg-50 { margin-top: 50px !important; } .mb-lg-50 { margin-bottom: 50px !important; } .pt-lg-50 { padding-top: 50px !important; } .pb-lg-50 { padding-bottom: 50px !important; } } .mt-60 { margin-top: 60px !important; } .mb-60 { margin-bottom: 60px !important; } .pt-60 { padding-top: 60px !important; } .pb-60 { padding-bottom: 60px !important; } @media (min-width: 768px) { .mt-md-60 { margin-top: 60px !important; } .mb-md-60 { margin-bottom: 60px !important; } .pt-md-60 { padding-top: 60px !important; } .pb-md-60 { padding-bottom: 60px !important; } } @media (min-width: 992px) { .mt-lg-60 { margin-top: 60px !important; } .mb-lg-60 { margin-bottom: 60px !important; } .pt-lg-60 { padding-top: 60px !important; } .pb-lg-60 { padding-bottom: 60px !important; } } .mt-70 { margin-top: 70px !important; } .mb-70 { margin-bottom: 70px !important; } .pt-70 { padding-top: 70px !important; } .pb-70 { padding-bottom: 70px !important; } @media (min-width: 768px) { .mt-md-70 { margin-top: 70px !important; } .mb-md-70 { margin-bottom: 70px !important; } .pt-md-70 { padding-top: 70px !important; } .pb-md-70 { padding-bottom: 70px !important; } } @media (min-width: 992px) { .mt-lg-70 { margin-top: 70px !important; } .mb-lg-70 { margin-bottom: 70px !important; } .pt-lg-70 { padding-top: 70px !important; } .pb-lg-70 { padding-bottom: 70px !important; } } .mt-80 { margin-top: 80px !important; } .mb-80 { margin-bottom: 80px !important; } .pt-80 { padding-top: 80px !important; } .pb-80 { padding-bottom: 80px !important; } @media (min-width: 768px) { .mt-md-80 { margin-top: 80px !important; } .mb-md-80 { margin-bottom: 80px !important; } .pt-md-80 { padding-top: 80px !important; } .pb-md-80 { padding-bottom: 80px !important; } } @media (min-width: 992px) { .mt-lg-80 { margin-top: 80px !important; } .mb-lg-80 { margin-bottom: 80px !important; } .pt-lg-80 { padding-top: 80px !important; } .pb-lg-80 { padding-bottom: 80px !important; } } .mt-90 { margin-top: 90px !important; } .mb-90 { margin-bottom: 90px !important; } .pt-90 { padding-top: 90px !important; } .pb-90 { padding-bottom: 90px !important; } @media (min-width: 768px) { .mt-md-90 { margin-top: 90px !important; } .mb-md-90 { margin-bottom: 90px !important; } .pt-md-90 { padding-top: 90px !important; } .pb-md-90 { padding-bottom: 90px !important; } } @media (min-width: 992px) { .mt-lg-90 { margin-top: 90px !important; } .mb-lg-90 { margin-bottom: 90px !important; } .pt-lg-90 { padding-top: 90px !important; } .pb-lg-90 { padding-bottom: 90px !important; } } .mt-100 { margin-top: 100px !important; } .mb-100 { margin-bottom: 100px !important; } .pt-100 { padding-top: 100px !important; } .pb-100 { padding-bottom: 100px !important; } @media (min-width: 768px) { .mt-md-100 { margin-top: 100px !important; } .mb-md-100 { margin-bottom: 100px !important; } .pt-md-100 { padding-top: 100px !important; } .pb-md-100 { padding-bottom: 100px !important; } } @media (min-width: 992px) { .mt-lg-100 { margin-top: 100px !important; } .mb-lg-100 { margin-bottom: 100px !important; } .pt-lg-100 { padding-top: 100px !important; } .pb-lg-100 { padding-bottom: 100px !important; } } [class^=button].center { margin-inline: auto; width: fit-content; } .button-primary, .viewAll { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-primary:empty, .viewAll:empty { display: none; } .button-primary:hover, .viewAll:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-primary.white, .viewAll.white { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-primary.white:empty, .viewAll.white:empty { display: none; } .button-primary.white:hover, .viewAll.white:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-primary.white, .viewAll.white { --color: white; --background-color: transparent; --border-color: white; --hover-color: #34303d; --hover-background-color: white; --hover-border-color: white; } .button-primary.hover-primary, .viewAll.hover-primary { --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } .button-primary-filled { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-primary-filled:empty { display: none; } .button-primary-filled:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-primary-filled { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .button-primary-filled.white { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-primary-filled.white:empty { display: none; } .button-primary-filled.white:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-primary-filled.white { --color: #34303d; --background-color: white; --border-color: white; --hover-color: white; --hover-background-color: #34303d; --hover-border-color: #34303d; } .button-primary-filled.hover-primary { --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } .button-zyn { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-zyn:empty { display: none; } .button-zyn:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-zyn { --color: white; --background-color: #00166f; --border-color: #00166f; --hover-color: #00166f; --hover-background-color: white; --hover-border-color: white; border-radius: 100px; } .button-arrow { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .button-arrow:empty { display: none; } .button-arrow::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .button-arrow:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .viewAll-arrow .viewAll { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .viewAll-arrow .viewAll:empty { display: none; } .viewAll-arrow .viewAll::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .viewAll-arrow .viewAll:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .button-back { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; width: fit-content; border: none; background-color: transparent; } .button-back::before { content: ""; display: block; width: 15px; height: 15px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scaleX(var(--flip-value)); transition: all 0.6s ease; } .button-back:hover::before { translate: calc(-8px * var(--flip-value)) 0; background-color: #00d1d2; } .button-back { padding: 0 !important; } .badge { display: inline-flex; background-color: #00d1d2; color: #34303d; font-weight: 400; font-size: 16px; } .button-underlined { color: var(--default-text-color); font-size: 16px; text-decoration: underline; cursor: pointer; transition: all 0.6s ease; border: none; background-color: transparent; } .button-underlined:hover { color: #00d1d2; } .addButton { color: #34303d; font-size: 16px; display: flex; align-items: center; gap: 3px; } .addButton::before { content: ""; background-image: url(/images/add-button.svg?v=rxOazbALAu1Iv9EGSW5jdpLdX78); background-position: center center; background-repeat: no-repeat; background-size: contain; width: 15px; height: 15px; display: block; transition: all 0.6s ease; } .addButton:hover::before { filter: brightness(0) saturate(100%) invert(57%) sepia(59%) saturate(1421%) hue-rotate(136deg) brightness(98%) contrast(104%); } .backLink, .backButton { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; width: fit-content; border: none; background-color: transparent; } .backLink::before, .backButton::before { content: ""; display: block; width: 15px; height: 15px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scaleX(var(--flip-value)); transition: all 0.6s ease; } .backLink:hover::before, .backButton:hover::before { translate: calc(-8px * var(--flip-value)) 0; background-color: #00d1d2; } .backLink, .backButton { padding: 0 !important; } .arrowLink, .linkArrow { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .arrowLink:empty, .linkArrow:empty { display: none; } .arrowLink::after, .linkArrow::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .arrowLink:hover::after, .linkArrow:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .arrowLink.white, .linkArrow.white { color: #ffffff; } .arrowLink.white::after, .linkArrow.white::after { filter: brightness(0) invert(1); } .arrowLink.white:hover::after, .linkArrow.white:hover::after { filter: brightness(0) saturate(100%) invert(57%) sepia(59%) saturate(1421%) hue-rotate(136deg) brightness(98%) contrast(104%); } .button-anchor { display: inline-flex; font-size: 16px; text-decoration: underline; transition: all 0.6s ease; } .button-anchor:hover { color: #00d1d2; } .force-filled-btn :is([class^=button-], .viewAll):not(.button-arrow) { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .force-filled-btn :is([class^=button-], .viewAll):not(.button-arrow):empty { display: none; } .force-filled-btn :is([class^=button-], .viewAll):not(.button-arrow):hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .force-filled-btn :is([class^=button-], .viewAll):not(.button-arrow) { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .force-outline-btn :is([class^=button-], .viewAll):not(.button-arrow) { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .force-outline-btn :is([class^=button-], .viewAll):not(.button-arrow):empty { display: none; } .force-outline-btn :is([class^=button-], .viewAll):not(.button-arrow):hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .force-arrow-btn :is([class^=button-], .viewAll) { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .force-arrow-btn :is([class^=button-], .viewAll):empty { display: none; } .force-arrow-btn :is([class^=button-], .viewAll)::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .force-arrow-btn :is([class^=button-], .viewAll):hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .button-bottom-container { display: flex; justify-content: center; margin-top: 40px; gap: 20px; } .button-bottom-container.filled [class^=button-], .button-bottom-container.filled a { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-bottom-container.filled [class^=button-]:empty, .button-bottom-container.filled a:empty { display: none; } .button-bottom-container.filled [class^=button-]:hover, .button-bottom-container.filled a:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-bottom-container.filled [class^=button-], .button-bottom-container.filled a { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .button-bottom-container.column { flex-direction: column; align-items: center; } .button-bottom-container.start { justify-content: start; } .buttons-container { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .buttons-container:not(:has(a:not(:empty))), .buttons-container:empty { display: none; } .buttons-container.center { justify-content: center; } .buttons-container.end { justify-content: end; } .buttons-column .buttons-container, .buttons-column.buttons-container { flex-direction: column; align-items: start; width: 100%; } .support-button { position: relative; background-color: transparent; border: none; padding: 16px; padding-bottom: 42px; display: block; } .support-button::before { content: ""; position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 16px; aspect-ratio: 1; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-text-color); } .support-button h3 { margin-bottom: 16px; font-weight: 600; } .badge { opacity: 0; } .badge.New { opacity: 1; } .badge-d-none { opacity: 0; display: none; } .badge-d-none.New { opacity: 1; display: inline; } a:is([href*=cmsitemLink]) { cursor: auto; pointer-events: none; } h1, h2, h3, h4, h5, h6 { color: var(--default-text-color); } .titleH1 { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .titleH1.regular { font-weight: 400; } .title-h1 { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .title-h1.regular { font-weight: 400; } .titles-container h1.title { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .titles-container h1.title.regular { font-weight: 400; } .force-h1-title.force-h1-title.force-h1-title [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .force-h1-title.force-h1-title.force-h1-title [class^=title]:not(.titles-container).regular { font-weight: 400; } .make-title-h1 [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(40px, 24.5183486239px + 3.4403669725vw, 70px); line-height: 1.1; font-weight: 600; letter-spacing: -1.38px; } .make-title-h1 [class^=title]:not(.titles-container).regular { font-weight: 400; } .force-small-title [class^=title] { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); } .titleH2 { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .titleH2.regular { font-weight: 400; } .title-h2 { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .title-h2.regular { font-weight: 400; } .titles-container h2.title { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .titles-container h2.title.regular { font-weight: 400; } .force-h2-title.force-h2-title.force-h2-title [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .force-h2-title.force-h2-title.force-h2-title [class^=title]:not(.titles-container).regular { font-weight: 400; } .make-title-h2 [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .make-title-h2 [class^=title]:not(.titles-container).regular { font-weight: 400; } .force-small-title [class^=title] { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); } .titleH3 { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .titleH3.regular { font-weight: 400; } .title-h3 { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .title-h3.regular { font-weight: 400; } .titles-container h3.title { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .titles-container h3.title.regular { font-weight: 400; } .force-h3-title.force-h3-title.force-h3-title [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .force-h3-title.force-h3-title.force-h3-title [class^=title]:not(.titles-container).regular { font-weight: 400; } .make-title-h3 [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(32px, 25.2912844037px + 1.4908256881vw, 45px); line-height: 1.3; font-weight: 600; } .make-title-h3 [class^=title]:not(.titles-container).regular { font-weight: 400; } .force-small-title [class^=title] { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); } .titleH4 { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .titleH4.regular { font-weight: 400; } .title-h4 { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .title-h4.regular { font-weight: 400; } .titles-container h4.title { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .titles-container h4.title.regular { font-weight: 400; } .force-h4-title.force-h4-title.force-h4-title [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .force-h4-title.force-h4-title.force-h4-title [class^=title]:not(.titles-container).regular { font-weight: 400; } .make-title-h4 [class^=title]:not(.titles-container) { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .make-title-h4 [class^=title]:not(.titles-container).regular { font-weight: 400; } .force-small-title [class^=title] { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); } .title-h3-5 { text-wrap: pretty; font-size: clamp(26px, 20.8394495413px + 1.1467889908vw, 36px); line-height: 1.3; font-weight: 600; } .title-h3-5.regular { font-weight: 400; } .titles-container { --spacing: 20px; margin-bottom: 40px; max-width: 900px; } .titles-container:not(:has(*:not(:empty))) { display: none; } .titles-container > * { margin-bottom: var(--spacing, 30px); } .titles-container > *:last-child { margin-bottom: 0; } .titles-container.center { text-align: center; margin-inline: auto; } .titles-container.center > * { margin-inline: auto; } .titles-container.line-under { --line-spacing: 40px; position: relative; padding-bottom: var(--line-spacing); } .titles-container.line-under::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; max-width: 50px; height: 5px; background-color: #00d1d2; } .titles-container.line-under.center::after { inset-inline-start: 50%; translate: calc(-50% * var(--flip-value)) 0; } .titles-container.full-width { max-width: unset; } .titles-container.max-width-md { max-width: 700px; } .titles-container [class^=title].regular { font-weight: 400; } .center .titles-container { margin-inline: auto; } .header-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .force-title-start .titles-container { text-align: start !important; margin-inline: unset !important; } .force-title-start .titles-container > * { margin-inline: unset !important; } .force-title-center .titles-container { text-align: center !important; margin-inline: auto !important; } .force-title-center .titles-container > * { margin-inline: auto !important; } .title-colored [class^=title-h] { color: var(--current-color, #00d1d2); } .description { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description:empty { display: none; } .description p { margin-bottom: 16px; } .description p:last-child { margin-bottom: 0; } .description ul, .description ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description li { list-style: disc; } .description-sm { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-sm:empty { display: none; } .description-sm p { margin-bottom: 16px; } .description-sm p:last-child { margin-bottom: 0; } .description-sm ul, .description-sm ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-sm li { list-style: disc; } .description-sm { font-size: clamp(13px, 12.4839449541px + 0.1146788991vw, 14px); line-height: 1.5; } .description-md { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-md:empty { display: none; } .description-md p { margin-bottom: 16px; } .description-md p:last-child { margin-bottom: 0; } .description-md ul, .description-md ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-md li { list-style: disc; } .description-md { font-size: clamp(17px, 16.4839449541px + 0.1146788991vw, 18px); line-height: 1.5; } .description-lg { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-lg:empty { display: none; } .description-lg p { margin-bottom: 16px; } .description-lg p:last-child { margin-bottom: 0; } .description-lg ul, .description-lg ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-lg li { list-style: disc; } .description-lg { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); line-height: 1.5; } .description-xl { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-xl:empty { display: none; } .description-xl p { margin-bottom: 16px; } .description-xl p:last-child { margin-bottom: 0; } .description-xl ul, .description-xl ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-xl li { list-style: disc; } .description-xl { font-size: clamp(20px, 17.9357798165px + 0.4587155963vw, 24px); line-height: 1.3; } .description-xxl { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .description-xxl:empty { display: none; } .description-xxl p { margin-bottom: 16px; } .description-xxl p:last-child { margin-bottom: 0; } .description-xxl ul, .description-xxl ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .description-xxl li { list-style: disc; } .description-xxl { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; } .text-balance, .text-balance :is(h1, h2, h3, h4, h5, h6, p) { text-wrap: balance !important; } .bg-img-container { position: relative; } .bg-img { position: absolute; inset: 0; overflow: hidden; } .bg-img img { width: 100%; height: 100%; object-fit: cover; } .bg-img.overlay-dark::before { content: ""; position: absolute; inset: 0; background-color: black; opacity: 0.5; pointer-events: none; z-index: 2; } .bg-img.min-h-400 { min-height: 400px; } .img-container, .video-container, .img-container-contained { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; } .img-container img, .img-container video, .video-container img, .video-container video, .img-container-contained img, .img-container-contained video { width: 100%; height: 100%; object-fit: cover; } .img-container.square, .video-container.square, .img-container-contained.square { aspect-ratio: 1; height: unset; } .img-container.h-auto, .video-container.h-auto, .img-container-contained.h-auto { height: auto !important; aspect-ratio: unset !important; } .img-container.h-auto img, .video-container.h-auto img, .img-container-contained.h-auto img { height: auto; } .img-container-contained { height: auto; } .img-container-contained img { object-fit: contain; } .hover-zoom { overflow: hidden; } .hover-zoom img { transition: var(--transition, all 1s ease); } .hover-zoom:hover img { scale: 1.05; } .ratio { position: relative; width: 100%; } .ratio:before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; } .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mobileImage, .mobile { display: none; } @media (max-width: 992px) { .mobileImage, .mobile { display: block; } } .desktopImage, .desktop { display: block; } @media (max-width: 992px) { .desktopImage, .desktop { display: none; } } .video { position: relative; --icon-width: 50px; --icon-color: #34303d; --icon-bg-color: white; cursor: pointer; } .video::before, .video::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: var(--icon-width); aspect-ratio: 1; border-radius: 50%; z-index: 5; background-color: var(--icon-bg-color); pointer-events: none; } .video::after { z-index: 10; mask-image: url(/images/icons/play.svg?v=n97GSqsm6CTd58gkvn_Puv9S3BE); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/play.svg?v=n97GSqsm6CTd58gkvn_Puv9S3BE); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--icon-color); width: calc(var(--icon-width) * 0.6); } .video.bottom-right { --shift: 64px; } .video.bottom-right::before, .video.bottom-right::after { top: auto; left: auto; right: var(--shift); bottom: var(--shift); translate: 50% 50%; } .video.no-play-icon::before, .video.no-play-icon::after { display: none; } img[src=""] { display: none; } .swiper { position: relative; } .swiper.overflow-visible { overflow: visible; } .swiper.overflow-visible .swiper-wrapper { overflow: visible; } @media (max-width: 992px) { .swiper.overflow-visible-mobile { overflow: visible; } .swiper.overflow-visible-mobile .swiper-wrapper { overflow: visible; } } .swiper .swiper-slide { height: auto; } .swiper-nav { --arrow-size: 40px; --arrow-inner-inset: 21%; --arrow-bg-color: transparent; --arrow-border-color: transparent; --arrow-color: #34303d; --arrow-bg-color-hover: rgba(0, 0, 0, 0.1); --arrow-border-color-hover: transparent; --arrow-color-hover: #34303d; position: absolute; top: 50%; left: 50%; translate: -50% -50%; height: 50px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 28px; pointer-events: none; z-index: 5; } .swiper-nav .swiper-next, .swiper-nav .swiper-prev { --translate: 3px; position: relative; pointer-events: all; min-width: var(--arrow-size); max-width: var(--arrow-size); min-height: var(--arrow-size); max-height: var(--arrow-size); border-radius: 50%; background-color: var(--arrow-bg-color); border: solid 1px var(--arrow-border-color); transition: all 0.6s ease; } .swiper-nav .swiper-next::before, .swiper-nav .swiper-prev::before { content: ""; position: absolute; inset: var(--arrow-inner-inset); mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--arrow-color); transition: all 0.6s ease; } .swiper-nav .swiper-next:hover, .swiper-nav .swiper-prev:hover { background-color: var(--arrow-bg-color-hover); border: solid 1px var(--arrow-border-color-hover); } .swiper-nav .swiper-next:hover::before, .swiper-nav .swiper-prev:hover::before { background-color: var(--arrow-color-hover); } .swiper-nav .swiper-next.swiper-button-disabled, .swiper-nav .swiper-prev.swiper-button-disabled { opacity: 0.6; cursor: auto; pointer-events: none; } .swiper-nav .swiper-next::before { translate: calc(var(--translate) * 1) 0; } .swiper-nav .swiper-prev::before { translate: calc(var(--translate) * -1) 0; rotate: 180deg; } .swiper-pagination { position: static; margin-top: 20px; } .swiper-pagination .swiper-pagination-bullet { width: 28px; height: 3px; border-radius: 0; background-color: var(--default-text-color); margin: 0 5px; opacity: 0.3; transition: all 0.6s ease; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .note-container { border: solid 3px #34303d; padding: 20px 60px; width: fit-content; margin-inline: auto; } @media (max-width: 992px) { .note-container { padding: 20px 40px; } } .note-container.no-border { border: none; padding: 0; margin-top: 40px; } .note-container.center { text-align: center; max-width: 900px; } .note-container.small, .note-container.small p { font-size: 13px; } .disclaimer { display: block; color: var(--default-text-color); padding: 16px; font-weight: 600; background-color: rgba(0, 0, 0, 0.1); margin-top: 20px; } .disclaimer a { color: var(--default-text-color); font-size: 16px; text-decoration: underline; cursor: pointer; transition: all 0.6s ease; border: none; background-color: transparent; } .disclaimer a:hover { color: #00d1d2; } .disclaimer:empty, .disclaimer:has(:first-child:last-child:empty) { display: none; } .disclaimer > *:last-child { margin-bottom: 0; } .disclaimer.with-border { background-color: transparent; border: 1px solid var(--default-text-color); } .disclaimer.no-box { padding: 0; background-color: transparent; border: none; } .disclaimer.center { display: flex; justify-content: center; text-align: center; } .disclaimer.no-bold { font-weight: 400; } .disclaimer.no-bold * { font-weight: 400; } .disclaimer.center { display: flex; justify-content: center; text-align: center; } .bgDisclaimer { display: block; color: var(--default-text-color); padding: 16px; font-weight: 600; background-color: rgba(0, 0, 0, 0.1); margin-top: 20px; } .bgDisclaimer:empty, .bgDisclaimer:has(:first-child:last-child:empty) { display: none; } .bgDisclaimer > *:last-child { margin-bottom: 0; } .bgDisclaimer.with-border { background-color: transparent; border: 1px solid var(--default-text-color); } .bgDisclaimer.no-box { padding: 0; background-color: transparent; border: none; } .bgDisclaimer.center { display: flex; justify-content: center; text-align: center; } .bgDisclaimer.no-bold { font-weight: 400; } .bgDisclaimer.no-bold * { font-weight: 400; } .bgDisclaimer.center { display: flex; justify-content: center; text-align: center; } #ajaxLoader { position: fixed; top: 0; inset-inline-start: 0; display: block; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); z-index: 50000; } #ajaxLoader .loader { position: absolute; height: 60px; width: 60px; display: block; top: calc(50% - 30px); left: calc(50% - 30px); -webkit-animation: rotation 1s infinite linear; -moz-animation: rotation 1s infinite linear; -o-animation: rotation 1s infinite linear; animation: rotation 1s infinite linear; border: 6px solid rgba(0, 0, 0, 0.2); border-radius: 100%; } #ajaxLoader .loader::before { content: ""; display: block; position: absolute; left: -6px; top: -6px; height: 60px; width: 60px; border-top: 6px solid rgba(0, 0, 0, 0.8); border-left: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid transparent; border-radius: 100%; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } @-moz-keyframes rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @-o-keyframes rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .swiper-button-next, .swiper-button-prev { display: none; } .messageContainer { position: fixed; top: 0px; inset-inline-start: 0; inset-inline-end: 0; width: 100%; z-index: 1000; background-color: green; padding: 10px 50px; min-height: 62px; } .messageContainer.red { background-color: #d40720; } .messageContainer .close { position: absolute; top: 10px; inset-inline-end: 25px; color: transparent; background-image: url(../../images/close-icon-black.svg?v=oX6kAjjA9etGoHLWmJbOrrk_CfM); width: 25px; height: 25px; background-position: center center; background-repeat: no-repeat; background-size: contain; filter: brightness(0) invert(1); } .messageContainer h3 { color: #ffffff; font-size: 20px; font-weight: bold; } .messageContainer .messageBody { margin-top: 10px; color: #ffffff; font-size: 16px; display: flex; gap: 24px; } .fixed-on-scroll { position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); background-color: #fffdfb; padding: 15px 0; display: flex; z-index: 10; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; padding-inline: 30px; opacity: 0; pointer-events: none; transition: all 0.6s ease; } .fixed-on-scroll.show { opacity: 1; pointer-events: all; } .fixed-on-scroll .label-total { font-size: clamp(16px, 11.871559633px + 0.9174311927vw, 24px); font-weight: bold; } sup { vertical-align: top; font-size: 10px; } .noScroll { overflow-y: hidden; } h3 { margin: 0; } .backLink.clubBack { margin-inline-start: 50px; } .backLink.clubBack a { text-decoration: underline; color: #34303d; padding: 20px 0 !important; } .backLink a { width: auto; margin-top: 0; } .button.white { border: 1px solid white; max-width: fit-content; background-color: #fff; border: 0px; color: #34303d !important; } .button.white:hover { background-color: #34303d; border: 0px; color: #fff !important; } .oldPriceStrikethrough { text-decoration: line-through; color: #a0a0a0; } .form-control:focus { outline: none; box-shadow: unset; } .no-description-display .second-level-description { display: none; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0) rotate(-45deg); opacity: 0.7; } 50% { transform: translateY(8px) rotate(-45deg); opacity: 1; } } :where(*) { margin: 0; padding: 0; box-sizing: border-box; } body { --header-margin-top-current: var(--header-margin-top, 0px); font-family: "IQOS", "IQOS AR", sans-serif; max-width: 2500px; margin-inline: auto; } .mainBodyWrapper { --header-margin-top-current: var(--header-margin-top, 0px); padding-top: var(--header-margin-top, 0px); transition: all 0.6s ease; } .mainBodyWrapper:has(.zyn-lead-form-section) { padding-top: 20px; } a { transition: all 0.2s ease; color: var(--default-text-color); } a.col { display: block; text-decoration: none; color: var(--default-text-color); } @media (min-width: 992px) { .flex-nowrap-lg *:has(> .col) { flex-wrap: nowrap !important; } } @media (min-width: 1200px) { .flex-nowrap-xl *:has(> .col) { flex-wrap: nowrap !important; } } .numbers-list { --list-color: var(--current-color, #ffc600); --list-text-color: var(--current-text-color, white); } .numbers-list ul, .numbers-list ol, .numbers-list:is(ul, ol) { max-width: 500px; counter-reset: list-counter; } .numbers-list ul > li, .numbers-list ol > li, .numbers-list:is(ul, ol) > li { --bullet-size: 36px; position: relative; counter-increment: list-counter; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .numbers-list ul > li:empty, .numbers-list ol > li:empty, .numbers-list:is(ul, ol) > li:empty { display: none; } .numbers-list ul > li p, .numbers-list ol > li p, .numbers-list:is(ul, ol) > li p { margin-bottom: 16px; } .numbers-list ul > li p:last-child, .numbers-list ol > li p:last-child, .numbers-list:is(ul, ol) > li p:last-child { margin-bottom: 0; } .numbers-list ul > li ul, .numbers-list ul > li ol, .numbers-list ol > li ul, .numbers-list ol > li ol, .numbers-list:is(ul, ol) > li ul, .numbers-list:is(ul, ol) > li ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .numbers-list ul > li li, .numbers-list ol > li li, .numbers-list:is(ul, ol) > li li { list-style: disc; } .numbers-list ul > li, .numbers-list ol > li, .numbers-list:is(ul, ol) > li { margin-bottom: 20px; padding-inline-start: calc(var(--bullet-size) + 16px); } .numbers-list ul > li::marker, .numbers-list ol > li::marker, .numbers-list:is(ul, ol) > li::marker { display: none; } .numbers-list ul > li:last-child, .numbers-list ol > li:last-child, .numbers-list:is(ul, ol) > li:last-child { margin-bottom: 0; } .numbers-list ul > li::before, .numbers-list ol > li::before, .numbers-list:is(ul, ol) > li::before { content: counter(list-counter); position: absolute; top: 0; inset-inline-start: 0; display: flex; align-items: center; justify-content: center; min-width: var(--bullet-size); max-width: var(--bullet-size); aspect-ratio: 1; background-color: var(--list-color); line-height: 1; color: var(--list-text-color, white); border-radius: 50%; } .numbers-list ul > li h3, .numbers-list ol > li h3, .numbers-list:is(ul, ol) > li h3 { font-size: clamp(23px, 20.9357798165px + 0.4587155963vw, 27px); font-weight: 600; margin-bottom: 5px; } .numbers-list ul > li :is(ul, ol), .numbers-list ol > li :is(ul, ol), .numbers-list:is(ul, ol) > li :is(ul, ol) { margin-top: 16px; } .numbers-list ul > li :is(ul, ol) li, .numbers-list ol > li :is(ul, ol) li, .numbers-list:is(ul, ol) > li :is(ul, ol) li { padding-inline-start: 0; } .numbers-list ul > li :is(ul, ol) li::before, .numbers-list ol > li :is(ul, ol) li::before, .numbers-list:is(ul, ol) > li :is(ul, ol) li::before { display: none; } .no-numbers-list ul li, .no-numbers-list ol li { padding-inline-start: 0 !important; margin-inline-start: 16px !important; margin-bottom: 10px !important; } .no-numbers-list ul li::before, .no-numbers-list ol li::before { display: none !important; } .no-numbers-list ul li { list-style: disc !important; } .no-numbers-list ol li { list-style: armenian !important; } .fancybox__container { width: 100%; padding-inline: var(--container-gutter-x); margin-inline: auto; } @media (min-width: 576px) { .fancybox__container { max-width: unset; } } @media (min-width: 768px) { .fancybox__container { max-width: 720px; } } @media (min-width: 992px) { .fancybox__container { max-width: 960px; } } @media (min-width: 1200px) { .fancybox__container { max-width: 1140px; } } @media (min-width: 1400px) { .fancybox__container { max-width: calc(1324px + var(--container-gutter-x)); } } .fancybox__container { display: flex; flex-direction: column; justify-content: center; } .fancybox__container .f-html { background-color: transparent; padding-block: 0; } .fancybox__container .fancybox__carousel { max-height: min(800px, 80vh); } .select-language * { font-size: 14px; } .select-language.dropdown { position: relative; } .select-language.dropdown .dropdown-toggle { background-color: transparent; border: none; border-radius: 0; padding: 0 20px 0 0; color: #34303d; font-weight: normal; } .select-language.dropdown .dropdown-toggle::after { content: ""; border: none; position: absolute; top: 58%; right: 0; translate: 0 -50%; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 12px; aspect-ratio: 1; } .select-language.dropdown .dropdown-menu { padding: 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; min-width: 90px; border-radius: 5px; overflow: hidden; } .select-language.dropdown .dropdown-menu .dropdown-item { font-size: 14px; color: #34303d; padding: 10px 16px; overflow: hidden; } .select-language.dropdown .dropdown-menu .dropdown-item.active, .select-language.dropdown .dropdown-menu .dropdown-item:hover { background-color: white; color: #00d1d2; } .select-language.dropdown .dropdown-menu li:not(:last-child) .dropdown-item { border-bottom: solid 1px #dcdcdc; } body:has(.age-gate-popup:not(.hidden)) { overflow: hidden; } .popup { position: fixed; inset: 0; z-index: 10000; background-color: white; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(19.5px); -webkit-backdrop-filter: blur(19.5px); } .popup.dark { background-color: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5); } .popup .container { height: 100%; } .popup .container .popup-container { height: 100%; display: flex; flex-direction: column; } .popup .close-popup { width: 26px; height: 26px; mask-image: url(../../images/icons/close.svg?v=7qNrL1deWjPyVwEffevSakOzV6Q); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../../images/icons/close.svg?v=7qNrL1deWjPyVwEffevSakOzV6Q); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; display: block; margin-inline-start: auto; padding-bottom: 40px; transition: all 0.6s ease; cursor: pointer; } .popup .close-popup:hover { scale: 1.05; background-color: #00d1d2; } .popup.medium-width { background-color: rgba(52, 48, 61, 0.5); backdrop-filter: none; display: flex; } .popup.medium-width > .container { max-width: 50vw; height: auto; margin: auto; padding: 30px; background-color: #ffffff; align-items: center; border-radius: 8px; } .popup.medium-width > .container h2 { margin-bottom: 20px; } .popup.medium-width > .container p.subtitle { font-size: clamp(14px, 12.9678899083px + 0.2293577982vw, 16px); margin-bottom: 40px; } .popup.medium-width > .container .controls { display: flex; justify-content: center; gap: 20px; } .popup.medium-width > .container .controls .secondary-btn { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .popup.medium-width > .container .controls .secondary-btn:empty { display: none; } .popup.medium-width > .container .controls .secondary-btn:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .age-gate-popup { background-color: #f6f4f0; background: rgba(246, 244, 240, 0.95); backdrop-filter: blur(19.5px); -webkit-backdrop-filter: blur(19.5px); padding-block: 60px; } .age-gate-popup .errorAge { display: none; } .age-gate-popup.age-error-underage .errorAge { display: block; } .age-gate-popup.age-error-underage .age-input-block { display: none; } .age-gate-popup .language-selector-main { position: absolute; top: 60px; right: 60px; } @media (max-width: 992px) { .age-gate-popup .language-selector-main { right: var(--container-gutter-x); } } .age-gate-popup .language-selector-main .select-language .dropdown-toggle { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; } .age-gate-popup .language-selector-main .select-language .dropdown-toggle::before { content: ""; display: block; mask-image: url(/images/icons/globe.svg?v=7RRFCTs5GGKDd9G7XaFcYlZUguM); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/globe.svg?v=7RRFCTs5GGKDd9G7XaFcYlZUguM); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 20px; aspect-ratio: 1; } .age-gate-popup .popup-container { justify-content: center; } .age-gate-popup .popup-container { max-width: 1000px; height: 100%; margin-inline: auto; text-align: center; } .age-gate-popup .logo-container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; margin-bottom: 32px; } .age-gate-popup .logo-container .logo { max-width: 100px; } .age-gate-popup .logo-container .favicon { max-width: 50px; } .age-gate-popup .age-input-block { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .age-gate-popup .age-input-block:empty { display: none; } .age-gate-popup .age-input-block p { margin-bottom: 16px; } .age-gate-popup .age-input-block p:last-child { margin-bottom: 0; } .age-gate-popup .age-input-block ul, .age-gate-popup .age-input-block ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .age-gate-popup .age-input-block li { list-style: disc; } .age-gate-popup .age-input-block { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); line-height: 1.5; max-width: 500px; margin-inline: auto; width: 100%; } .age-gate-popup .age-input-block .input-fields { display: flex; gap: 16px; margin-block: 60px 30px; } .age-gate-popup .age-input-block .input-fields .field-group { flex: 1 1 0; } .age-gate-popup .age-input-block .input-fields .field-group .field-label { text-align: start; } .age-gate-popup .age-input-block .input-fields .field-group .field-label label { font-size: 13px; } .age-gate-popup .age-input-block .input-fields .field-group .field-label span { display: none; } .age-gate-popup .age-input-block .input-fields .field-group .select-container { width: 100%; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container { width: 100% !important; text-align: start; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single { position: relative; padding: 24px 15px; border: 1px solid #b0b0b0; background-color: #fff; display: flex; align-items: center; padding-inline: 16px 40px; outline: none; box-shadow: none; transition: all 0.6s ease; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single .select2-selection__arrow { display: none; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single::before { content: ""; display: block; opacity: 0; pointer-events: none; position: absolute; top: 50%; inset-inline-end: 36px; translate: calc(-50% * var(--flip-value)) -50%; background-image: url(/images/icons/red-x-circle.svg?v=n97GSqsm6CTd58gkvn_Puv9S3BE); background-size: 100%; width: 25px; aspect-ratio: 1; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single::after { content: ""; position: absolute; top: 50%; inset-inline-end: 20px; translate: 0 -50%; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 12px; aspect-ratio: 1; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-selection--single .select2-selection__rendered { padding-inline: 0; color: #34303d; font-size: 16px; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-results__options { margin: 0; padding: 0; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-results__options .select2-results__option { list-style: none; font-size: 14px; padding: 6px 10px; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-results__options .select2-results__option.select2-results__option--highlighted, .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container .select2-results__options .select2-results__option:hover { background-color: #00d1d2; color: #34303d; } .age-gate-popup .age-input-block .input-fields .field-group .select-container .select2-container input { font-size: 14px; padding: 6px 10px; outline: #00d1d2; } .age-gate-popup .age-input-block .input-fields .field-group .select-container > input { display: none; } .age-gate-popup .age-input-block .input-fields .field-group.has-error .select2-selection--single { border-color: #dd3333 !important; } .age-gate-popup .age-input-block .input-fields .field-group.has-error .select2-selection--single::before { opacity: 1 !important; } .age-gate-popup .age-input-block .input-fields .field-group.has-success .select2-selection--single { border-color: #57760c !important; } .age-gate-popup .age-input-block .input-fields .field-group.has-success .select2-selection--single::before { opacity: 1 !important; background-image: url(/images/icons/green-check-circle.svg?v=7RRFCTs5GGKDd9G7XaFcYlZUguM) !important; } .age-gate-popup .age-question-block { max-width: 500px; margin-inline: auto; width: 100%; } .age-gate-popup .age-question-block .intro { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .age-gate-popup .age-question-block .intro:empty { display: none; } .age-gate-popup .age-question-block .intro p { margin-bottom: 16px; } .age-gate-popup .age-question-block .intro p:last-child { margin-bottom: 0; } .age-gate-popup .age-question-block .intro ul, .age-gate-popup .age-question-block .intro ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .age-gate-popup .age-question-block .intro li { list-style: disc; } .age-gate-popup .age-question-block .intro { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); line-height: 1.5; margin-bottom: 40px; } .age-gate-popup .age-question-block .buttons-container { display: flex; flex-direction: column; gap: 16px; } .age-gate-popup .age-question-block .buttons-container .button-primary { width: 100%; text-align: center; padding-block: 14px; } .age-gate-popup .age-question-block .buttons-container .overAge { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .age-gate-popup .age-question-block .buttons-container .overAge:empty { display: none; } .age-gate-popup .age-question-block .buttons-container .overAge:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .age-gate-popup .age-question-block .buttons-container .overAge { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .age-gate-popup .age-question-block .buttons-container .UnderAge { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .age-gate-popup .age-question-block .buttons-container .UnderAge:empty { display: none; } .age-gate-popup .age-question-block .buttons-container .UnderAge:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .age-gate-popup .disclaimer-block { margin-top: 80px; } .age-gate-popup .disclaimer-block .disclaimer-text { font-size: 13px; line-height: 1.5; } .age-gate-popup .disclaimer-block .disclaimer-title { font-size: clamp(18px, 14.9036697248px + 0.6880733945vw, 24px); } #onetrust-consent-sdk #onetrust-banner-sdk { background-color: #34303d !important; } #onetrust-consent-sdk #onetrust-button-group #onetrust-pc-btn-handler { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } #onetrust-consent-sdk #onetrust-button-group #onetrust-pc-btn-handler:empty { display: none; } #onetrust-consent-sdk #onetrust-button-group #onetrust-pc-btn-handler:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } #onetrust-consent-sdk #onetrust-button-group #onetrust-pc-btn-handler { --color: white; --background-color: transparent; --border-color: white; --hover-color: #34303d; --hover-background-color: white; --hover-border-color: white; --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } #onetrust-consent-sdk #onetrust-button-group #onetrust-accept-btn-handler { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } #onetrust-consent-sdk #onetrust-button-group #onetrust-accept-btn-handler:empty { display: none; } #onetrust-consent-sdk #onetrust-button-group #onetrust-accept-btn-handler:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } #onetrust-consent-sdk #onetrust-button-group #onetrust-accept-btn-handler { --color: #34303d; --background-color: white; --border-color: white; --hover-color: white; --hover-background-color: #34303d; --hover-border-color: #34303d; --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } #onetrust-consent-sdk #onetrust-button-group button { font-size: 13px !important; line-height: 1 !important; padding-block: 14px !important; } @media (max-width: 992px) { #onetrust-consent-sdk #onetrust-button-group { margin-top: 20px !important; } } #onetrust-consent-sdk #onetrust-close-btn-container .onetrust-close-btn-handler { filter: brightness(0) invert(1); } body:has(.header-main.hidden) .mainBodyWrapper { --header-margin-top-current: 0px; } body.no-header .mainBodyWrapper { --header-margin-top-current: 0px; padding-top: 0; } body:has(.first-level.hasSubmenu.active) { overflow-y: hidden; } body:has(.header-sidebar.visible) { overflow: hidden; } body:has(.header-sidebar.visible) .header-main { --box-shadow: unset; } .first-level.menu-accent-primary, .first-level:has(> .menu-accent-primary) { --menu-accent: #00d1d2; } .first-level.menu-accent-gray-dark, .first-level:has(> .menu-accent-gray-dark) { --menu-accent: #34303d; } .first-level.menu-accent-gray-light, .first-level:has(> .menu-accent-gray-light) { --menu-accent: #f6f4f0; } .first-level.menu-accent-classic-red, .first-level:has(> .menu-accent-classic-red) { --menu-accent: #A7312F; } .first-level.menu-accent-amber, .first-level:has(> .menu-accent-amber) { --menu-accent: #E88147; } .first-level.menu-accent-nice-blue, .first-level:has(> .menu-accent-nice-blue) { --menu-accent: #207CA9; } .first-level.menu-accent-white, .first-level:has(> .menu-accent-white) { --menu-accent: white; } .first-level.menu-accent-terea-sienna, .first-level:has(> .menu-accent-terea-sienna) { --menu-accent: #D4302F; } .first-level.menu-accent-terea-amber, .first-level:has(> .menu-accent-terea-amber) { --menu-accent: #C24213; } .first-level.menu-accent-terea-silver, .first-level:has(> .menu-accent-terea-silver) { --menu-accent: #808183; } .first-level.menu-accent-terea-turquoise, .first-level:has(> .menu-accent-terea-turquoise) { --menu-accent: #119FAD; } .first-level.menu-accent-terea-purple, .first-level:has(> .menu-accent-terea-purple) { --menu-accent: #8255B2; } .first-level.menu-accent-terea-yellow, .first-level:has(> .menu-accent-terea-yellow) { --menu-accent: #EAB108; } .first-level.menu-accent-terea-arbor, .first-level:has(> .menu-accent-terea-arbor) { --menu-accent: #049218; } .first-level.menu-accent-terea-beige, .first-level:has(> .menu-accent-terea-beige) { --menu-accent: #bf9f85; } .first-level.menu-accent-terea-oasis, .first-level:has(> .menu-accent-terea-oasis) { --menu-accent: #b1269e; } .first-level.menu-accent-terea-summer, .first-level:has(> .menu-accent-terea-summer) { --menu-accent: #ec7253; } .first-level.menu-accent-terea-sun, .first-level:has(> .menu-accent-terea-sun) { --menu-accent: #ac3223; } .first-level.menu-accent-sky-blue, .first-level:has(> .menu-accent-sky-blue) { --menu-accent: #00C1FF; } .first-level.menu-accent-cyan, .first-level:has(> .menu-accent-cyan) { --menu-accent: #1BD9C5; } .first-level.menu-accent-purple, .first-level:has(> .menu-accent-purple) { --menu-accent: #2d008b; } .first-level.menu-accent-delia-gold, .first-level:has(> .menu-accent-delia-gold) { --menu-accent: #C2A37C; } .first-level.menu-accent-delia-silver, .first-level:has(> .menu-accent-delia-silver) { --menu-accent: #A0A1AA; } .first-level.menu-accent-delia-red, .first-level:has(> .menu-accent-delia-red) { --menu-accent: #A6312F; } .first-level.menu-accent-delia-green, .first-level:has(> .menu-accent-delia-green) { --menu-accent: #4DA793; } .first-level.menu-accent-zyn-navy, .first-level:has(> .menu-accent-zyn-navy) { --menu-accent: #00166f; } .header-main { --logo-width: 80px; --main-color: #34303d; --front-z-index: 800; --back-z-index: 700; --box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; --overlay-opacity: 0; position: fixed; width: 100%; top: 0; left: 0; transition: all 0.6s ease; z-index: var(--back-z-index); } .header-main::before { content: ""; position: absolute; inset: 0; width: 100vw; height: 100vh; background-color: black; z-index: calc(var(--back-z-index) - 1); transition: all 0.6s ease; pointer-events: none; opacity: var(--overlay-opacity); } .header-main.hidden { translate: 0 -100%; } .header-main .header-click-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background-color: transparent; z-index: 750; display: none; } .header-main .header-click-overlay.active { display: block; } @media (max-width: 992px) { .header-main .header-click-overlay { display: none; pointer-events: none; } } @media (min-width: 992px) { .header-main:has(.first-level.hasSubmenu.active) { --overlay-opacity: 0.5; } } @media (max-width: 768px) { .header-main { --logo-width: 65px; } } .header-main ::-webkit-scrollbar { width: 6px; } .header-main ::-webkit-scrollbar-track { background: transparent; } .header-main ::-webkit-scrollbar-thumb { background-color: rgb(187, 187, 187); border-radius: 999px; } .header-main .lang-banner { position: relative; display: grid; grid-template-rows: 1fr; background-color: #00d1d2; color: var(--main-color); padding-block: 18px; padding-inline: var(--container-gutter-x); width: 100%; transition: grid-template-rows 0.6s ease, padding-block 0.6s ease; z-index: var(--front-z-index); overflow: hidden; } @media (max-width: 768px) { .header-main .lang-banner { padding-block: 10px; padding-inline: calc(var(--container-gutter-x) * 2); } } .header-main .lang-banner.hidden { grid-template-rows: 0fr; padding-block: 0 !important; } .header-main .lang-banner.hidden .banner-text { opacity: 0; } .header-main .lang-banner.hidden .langBanner-close { opacity: 0; } .header-main .lang-banner .banner-text { min-height: 0; margin-inline: auto; text-align: center; transition: opacity 0.4s ease; /* Fade out faster than collapse */ } .header-main .lang-banner .banner-text a { display: block; font-size: clamp(12px, 8.9036697248px + 0.6880733945vw, 18px); line-height: 1.3; font-weight: 600; text-decoration: none; } .header-main .lang-banner .banner-text a:hover { text-decoration-color: var(--main-color); } .header-main .lang-banner .langBanner-close { position: absolute; right: var(--container-gutter-x); top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 600; color: var(--main-color); cursor: pointer; line-height: 1; transition: opacity 0.4s ease; } .header-main .lang-banner .langBanner-close:hover { scale: 1.05; } @media (max-width: 768px) { .header-main .lang-banner .langBanner-close { font-size: 22px; right: 8px; } } .header-main .menuHolder { position: relative; width: 100%; background-color: white; box-shadow: var(--box-shadow); transition: all 0.6s ease; z-index: var(--front-z-index); } .header-main .menuHolder .logo-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: var(--logo-width); height: 40px; } .header-main .menuHolder .logo-container img { height: 100%; width: 100%; object-fit: contain; opacity: 0; max-height: 0; transition: all 0.6s ease; } .header-main .menuHolder .logo-container img.visible { opacity: 1; max-height: 100%; } .header-main .menuHolder .menu { padding: 24px 0; display: flex; align-items: center; gap: 20px; justify-content: flex-end; } .header-main .menuHolder .menu .menuItems { --menu-wrapper-gap: 12px; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--menu-wrapper-gap); z-index: var(--front-z-index); pointer-events: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper { display: flex; align-items: center; gap: 20px; flex: 0 0 calc(50% - var(--logo-width) / 2 - var(--menu-wrapper-gap) / 2); pointer-events: all; } .header-main .menuHolder .menu .menuItems .menu-wrapper.rightMenuWrapper { justify-content: flex-end; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper { display: flex; align-items: center; gap: 20px; } @media (max-width: 992px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper { display: none; } } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level { --arrow-rotation: 0; display: inline-flex; gap: 12px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.menu-titles-lg .thirdLvlItem .menuAnchor, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level:has(> .menu-titles-lg) .thirdLvlItem .menuAnchor { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px) !important; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.menu-titles-lg .thirdLvlItem.withImage .menuAnchor, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level:has(> .menu-titles-lg) .thirdLvlItem.withImage .menuAnchor { font-size: clamp(18px, 12.8394495413px + 1.1467889908vw, 28px) !important; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .first-level-title { position: relative; color: var(--main-color); font-size: 14px; letter-spacing: 0.4px; display: flex; align-items: center; gap: 6px; width: fit-content; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.hasSubmenu .first-level-title::after { content: ""; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); width: 12px; aspect-ratio: 1; transition: all 0.6s ease; rotate: var(--arrow-rotation); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.hasSubmenu.active { --arrow-rotation: 180deg; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level.hasSubmenu.active .secondLvl { max-height: var(--level-height); padding-block: 55px; opacity: 1; pointer-events: all; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl { --level-height: 65vh; --second-level-gap: 60px; --highlighted-images-width: 380px; position: absolute; bottom: 0; left: 0; translate: 0 calc(100% - 2px) !important; background-color: white; opacity: 0; pointer-events: none; z-index: var(--back-z-index); width: 100%; max-height: 0; padding-inline: 0; padding-block: 0; height: var(--level-height); transition: all 0.6s ease; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl:has(.thirdLvl.active) > .itemsBlock > .highlitedSection { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .menuBack { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .itemsBlock { position: relative; display: flex; justify-content: space-between; gap: var(--second-level-gap); width: 100%; height: 100%; overflow-y: auto; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .itemsBlock .highlitedSection { position: absolute; top: 0; inset-inline-end: var(--container-gutter-x); max-width: var(--highlighted-images-width); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .itemsBlock .highlitedSection .highlitedInfo h3 a.title { font-size: 18px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .itemsBlock .highlitedSection .highlitedInfo a.description { font-size: 14px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .secondLevelWrapper { --second-menu-width: 40%; position: relative; flex-shrink: 0; width: 100%; max-width: calc(100% - var(--highlighted-images-width) - var(--second-level-gap)); max-height: 100%; overflow-x: visible; padding: 0; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection { width: var(--second-menu-width); margin-bottom: 20px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection:last-child { margin-bottom: 0; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection.hasSubmenu > a { position: relative; display: flex; align-items: center; width: fit-content; gap: 15px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection.hasSubmenu > a span.ribbon { position: absolute; top: 50%; transform: translateY(-50%) translateX(100%); background-color: rgb(0, 209, 210); border-radius: 0.15rem; color: rgb(52, 48, 61); display: inline-block; font-size: 0.75rem; font-weight: 400; line-height: 1; padding: 0.5em 0.75em; text-align: center; vertical-align: baseline; white-space: nowrap; right: 0%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection.hasSubmenu > a::after { content: ""; display: block; mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 15px; aspect-ratio: 1; rotate: calc(var(--arrow-direction) * 1); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { color: #34303d; font-size: clamp(20px, 18.4518348624px + 0.3440366972vw, 23px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { line-height: 26px; } @media screen and (min-width: 420px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { line-height: calc(26px + 3 * (100vw - 420px) / 1180); } } @media screen and (min-width: 1600px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { line-height: 29px; } } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a { font-weight: bold; padding-bottom: 5px; display: inline-block; position: relative; z-index: 2; padding-inline-end: 25px; width: fit-content; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a span.ribbon { position: absolute; top: 0%; transform: translateY(20%) translateX(100%); background-color: rgb(0, 209, 210); border-radius: 0.15rem; color: rgb(52, 48, 61); display: inline-block; font-size: 0.75rem; font-weight: 400; line-height: 1; padding: 0.5em 0.75em; text-align: center; vertical-align: baseline; white-space: nowrap; right: 0%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a::before { content: ""; height: 4px; width: 0; position: absolute; bottom: 0; inset-inline-start: 0; background-color: var(--menu-accent, #00d1d2); transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a:hover::before, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection > a.active::before { width: calc(100% - 30px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { font-size: clamp(14px, 12.9678899083px + 0.2293577982vw, 16px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { line-height: 20px; } @media screen and (min-width: 420px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { line-height: calc(20px + 2 * (100vw - 420px) / 1180); } } @media screen and (min-width: 1600px) { .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { line-height: 22px; } } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc { color: #34303d; font-weight: 400; margin: 0 0 8px; max-width: 100%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .scd-level-desc:empty { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl { --third-level-width: 30%; display: none; position: absolute; top: 0px; inset-inline-start: calc(var(--second-menu-width) + var(--second-level-gap)); width: calc(100% - var(--second-menu-width) + var(--highlighted-images-width)); max-height: 100%; overflow: hidden; height: 100%; background-color: white; z-index: 10; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl.active { display: block; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .highlitedSection { position: absolute; top: 0; inset-inline-end: 0; max-width: var(--highlighted-images-width); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper { width: 100%; max-width: calc(100% - var(--highlighted-images-width) - var(--second-level-gap) * 2); max-height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; padding-inline-end: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper::-webkit-scrollbar { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlImagesWrapper { margin-bottom: 30px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem { margin-bottom: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem:last-child:not(.withImage) { margin-bottom: 0; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem:last-child:not(.withImage) .menuAnchor { padding-bottom: 0; line-height: 20px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo { display: flex; justify-content: space-between; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .titleWrapper { width: 100%; padding-inline-end: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .menuAnchor { color: #34303d; font-size: clamp(16px, 11.3555045872px + 1.0321100917vw, 25px); font-weight: bold; padding-bottom: 5px; display: inline-block; position: relative; z-index: 2; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .menuAnchor::before { content: ""; position: absolute; height: 4px; width: 0; bottom: 0; inset-inline-start: 0; background-color: var(--menu-accent, #00d1d2); transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .menuAnchor:hover::before, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo .menuAnchor.active::before { width: calc(100% - 30px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .listingInfo p { font-size: 16px; color: #34303d; margin-bottom: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .imageWrapper { flex: 0 0 24%; max-width: 24%; padding-inline-end: 6px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .imageWrapper a::before { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.withImage .imageWrapper img { max-width: 100%; object-fit: contain; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem.isHighlighted { font-weight: bold; font-size: clamp(22px, 19.9357798165px + 0.4587155963vw, 26px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor { color: #34303d; font-size: clamp(16px, 16px + 0vw, 16px); padding-bottom: 5px; display: inline-block; position: relative; z-index: 2; height: fit-content; width: fit-content; transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited { font-weight: bold; font-size: clamp(16px, 14.9678899083px + 0.2293577982vw, 18px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited::before { content: ""; height: 4px; width: 0; position: absolute; bottom: 0; inset-inline-start: 0; background-color: var(--menu-accent, #00d1d2); transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited:hover, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited.active { color: var(--menu-accent, #00d1d2); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited:hover::before, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.isHighlited.active::before { width: calc(100% - 5px); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor:hover, .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .scdSection .thirdLvl .thirdLevelItemWrapper .thirdLvlItem .menuAnchor.active { color: var(--menu-accent, #00d1d2); } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection { flex: 0 0 27%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .imageWrapper { margin-bottom: 10px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .imageWrapper a { display: block; --bs-aspect-ratio: 60%; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .imageWrapper a::before { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .imageWrapper a img { max-width: 100%; object-fit: cover; position: static; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .title { color: #34303d; font-size: clamp(20px, 18.4518348624px + 0.3440366972vw, 23px); font-weight: bold; padding-bottom: 5px; display: inline-block; position: relative; z-index: 2; padding-inline-end: 25px; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .description { font-size: 16px; line-height: 20px; font-weight: normal; margin-bottom: 10px; color: #34303d; display: block; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .link { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .link:empty { display: none; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .link::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .secondLvl .highlitedSection .highlitedInfo .link:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .header-main .menuHolder .menu .menuItems .menu-wrapper .menuWrapper .first-level .menuOverlay { background-color: rgba(52, 48, 61, 0.4); bottom: 0; height: calc(100vh - 77px); inset-inline-start: 0; position: absolute; inset-inline-end: 0; top: 77px; display: none; z-index: -1; } .header-main .menuHolder .menu .mobileOverlay { display: none; } .header-main .menuHolder .menu .menu-icon { display: none; } .header-main .menuHolder .menu .header-icons-menu { display: flex; align-items: center; gap: 20px; } @media (max-width: 768px) { .header-main .menuHolder .menu .header-icons-menu { gap: 7px; } } .header-main .menuHolder .menu .header-icons-menu .select-language * { text-transform: uppercase; } .header-main .menuHolder .menu .header-icons-menu .select-language.dropdown .dropdown-item { text-transform: uppercase; } .header-main .menuHolder .menu .account-actions-container.dropdown { position: relative; } .header-main .menuHolder .menu .account-actions-container.dropdown .user-icon { position: relative; background-color: transparent; border: none; width: 28px; aspect-ratio: 1; } .header-main .menuHolder .menu .account-actions-container.dropdown .user-icon::before { content: ""; position: absolute; inset: 0; width: 60%; margin: auto; mask-image: url(/images/icons/user.svg?v=ddXv4OVKODVgYMCSOdMmdLKEXSc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/user.svg?v=ddXv4OVKODVgYMCSOdMmdLKEXSc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); } .header-main .menuHolder .menu .account-actions-container.dropdown .user-icon::after { display: none; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; min-width: 200px; border: none; padding: 0; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item { display: flex; align-items: center; gap: 6px; font-size: 16px; color: #34303d; padding: 12px 16px; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item.active, .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item:hover { background-color: white; color: #00d1d2; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item img { max-width: 40px; aspect-ratio: 1; object-fit: contain; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item:hover { background-color: transparent; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown .dropdown-item:hover span { text-decoration: underline; } .header-main .menuHolder .menu .account-actions-container.dropdown .account-dropdown li:not(:last-child) .dropdown-item { border-bottom: solid 1px #dcdcdc; } .header-main .menuHolder .menu .shopping-cart-icon .cart-header-icon { position: relative; background-image: url(../../images/cart-icon.svg?v=k-8K6jIUSzdX4GUhNI7R9Ksd9LY); background-position: center center; background-size: contain; background-repeat: no-repeat; width: 35px; height: auto; min-height: 21px; display: block; } .header-main .menuHolder .menu .shopping-cart-icon .cart-header-icon span { position: absolute; height: 12px; width: 12px; background: #00d1d2; border-radius: 50%; bottom: 0; inset-inline-end: 3px; font-size: 9px; line-height: 12px; text-align: center; font-weight: bold; display: flex; justify-content: center; color: #34303d; } .header-main .menuHolder .menu-toggle { position: relative; width: 100%; height: 100%; background-color: transparent; border-radius: 50%; border: none; transition: all 0.6s ease; } .header-main .menuHolder .menu-toggle > div { position: relative; width: 36px; height: 12px; } @media (max-width: 768px) { .header-main .menuHolder .menu-toggle > div { width: 28px; height: 12px; } } .header-main .menuHolder .menu-toggle > div span { position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--main-color); transition: all 0.6s ease; transform-origin: center; } .header-main .menuHolder .menu-toggle > div span:nth-child(1) { top: 0; } .header-main .menuHolder .menu-toggle > div span:nth-child(2) { top: 100%; } .header-main .menuHolder .menu-toggle > div span:nth-child(3) { display: none; top: 100%; } .header-main .menuHolder .menu-toggle:hover > div span:nth-child(3) { width: 100%; } .header-main .menuHolder .menu-toggle[aria-expanded=true] > div span { top: 50%; } .header-main .menuHolder .menu-toggle[aria-expanded=true] > div span:nth-child(1) { transform: translate(0, -50%) rotate(45deg); } .header-main .menuHolder .menu-toggle[aria-expanded=true] > div span:nth-child(2) { transform: translate(0, -50%) rotate(-45deg); } .header-main .menuHolder .menu-toggle[aria-expanded=true] > div span:nth-child(3) { max-width: 0; left: 50%; transform: translate(0, -50%); } .header-sidebar { --sidebar-padding: var(--container-gutter-x); --menu-item-spacing: 8px; --back-btn-size: 24px; position: fixed; bottom: 0; left: 0; width: 100vw; height: calc(100dvh - var(--header-margin-top) + 2px); background-color: white; z-index: 500; transition: all 0.6s ease; translate: -100% 0; overflow: hidden; } .header-sidebar.visible { translate: 0 0; } .header-sidebar .container { height: 100%; padding-inline: var(--sidebar-padding); } .header-sidebar .header-container { height: 100%; overflow-y: auto; overflow-x: hidden; padding-block: var(--sidebar-padding); scrollbar-width: thin; scrollbar-color: #34303d transparent; display: unset; justify-content: unset; align-items: unset; flex-wrap: unset; } .header-sidebar .header-icons-menu { display: none; } .header-sidebar .menu-wrapper { display: block; flex: unset; margin-bottom: 0; } .header-sidebar .menu-wrapper.leftMenuWrapper { margin-bottom: 16px; } .header-sidebar .menuWrapper.toolkitMainMenu { display: flex; flex-direction: column; gap: var(--menu-item-spacing); } .header-sidebar .first-level { display: flex; flex-direction: column; } .header-sidebar .first-level .first-level-title { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; font-size: clamp(20px, 18.9678899083px + 0.2293577982vw, 22px); font-weight: 600; color: #34303d; text-decoration: none; border: none; background: none; } .header-sidebar .first-level .first-level-title::after { display: none; } .header-sidebar .first-level .first-level-desc { display: block !important; font-size: 14px; color: #666; margin-top: -8px; padding-bottom: 8px; margin: 0; line-height: 1.4; } .header-sidebar .first-level .first-level-desc:empty { display: none !important; } .header-sidebar .first-level.hasSubmenu .first-level-title::after { content: ""; display: block; mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 14px; aspect-ratio: 1; transform: scale(var(--flip-value)); flex-shrink: 0; rotate: unset; } .header-sidebar .secondLvl { position: fixed; left: 0; bottom: 0; width: 100vw; height: calc(100dvh - var(--header-margin-top)); max-height: unset; background-color: white; z-index: 400; padding: 0; translate: 100% 0 !important; opacity: 1; pointer-events: none; box-shadow: none; overflow: hidden; transition: translate 0.3s ease; } .header-sidebar .secondLvl.mobile-active { translate: 0 0 !important; pointer-events: all; } .header-sidebar .secondLvl .menuOverlay { display: none; } .header-sidebar .secondLvl .itemsBlock { flex-direction: column; gap: 0; padding: var(--sidebar-padding); padding-top: 0; height: 100%; overflow-y: auto; } .header-sidebar .secondLvl .menuBack { display: flex; align-items: center; gap: 16px; padding: 16px 0px; margin-bottom: 16px; border-bottom: 1px solid #eee; background-color: white; position: sticky; top: 0; z-index: 10; } .header-sidebar .secondLvl .menuBack .backBtn { width: var(--back-btn-size); height: var(--back-btn-size); transform: scale(var(--flip-value)); cursor: pointer; display: flex; align-items: center; justify-content: center; } .header-sidebar .secondLvl .menuBack .backBtn img { width: 100%; height: 100%; object-fit: contain; } .header-sidebar .secondLvl .menuBack .title { font-size: 16px; font-weight: 600; color: #34303d; } .header-sidebar .secondLvl .secondLevelWrapper { width: 100%; max-width: 100%; max-height: unset; overflow: visible; display: flex; flex-direction: column; gap: var(--menu-item-spacing); } .header-sidebar .secondLvl .scdSection { width: 100%; margin-bottom: 0; } .header-sidebar .secondLvl .scdSection > a { display: flex; align-items: center; gap: 10px; padding-block: 6px; font-size: clamp(20px, 18.9678899083px + 0.2293577982vw, 22px); font-weight: 600; color: #34303d; text-decoration: none; line-height: 1.3; } .header-sidebar .secondLvl .scdSection > a::before { display: none; } .header-sidebar .secondLvl .scdSection > a::after { display: none; } .header-sidebar .secondLvl .scdSection > a .ribbon { position: static; transform: none; margin-inline-start: 8px; } .header-sidebar .secondLvl .scdSection.hasSubmenu > a::after { content: ""; display: block; mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-right.svg?v=w3PcSfoQJf6JepCQf8BUBwZndWQ); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 16px; height: 16px; flex-shrink: 0; transform: scale(var(--flip-value)); } .header-sidebar .secondLvl .scdSection .scd-level-desc { font-size: clamp(13px, 11.9678899083px + 0.2293577982vw, 15px); } .header-sidebar .secondLvl .scdSection .scd-level-desc { line-height: 18px; } @media screen and (min-width: 420px) { .header-sidebar .secondLvl .scdSection .scd-level-desc { line-height: calc(18px + 2 * (100vw - 420px) / 1180); } } @media screen and (min-width: 1600px) { .header-sidebar .secondLvl .scdSection .scd-level-desc { line-height: 20px; } } .header-sidebar .secondLvl .scdSection .scd-level-desc { color: #34303d; font-weight: 400; margin: 0 0 6px; } .header-sidebar .secondLvl .scdSection .scd-level-desc:empty { display: none; } .header-sidebar .secondLvl .highlitedSection { position: static; max-width: 100%; flex: unset; margin-top: 24px; } .header-sidebar .secondLvl .highlitedSection .imageWrapper { margin-bottom: 16px; } .header-sidebar .secondLvl .highlitedSection .imageWrapper a { position: unset; inset: unset; display: block; width: 100%; overflow: hidden; } .header-sidebar .secondLvl .highlitedSection .imageWrapper a::before { display: none; } .header-sidebar .secondLvl .highlitedSection .imageWrapper a img { position: unset; inset: unset; width: 100%; height: auto; object-fit: cover; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .title { font-size: 16px; font-weight: 600; color: #34303d; margin-bottom: 8px; padding: 0; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .description { font-size: clamp(18px, 17.4839449541px + 0.1146788991vw, 19px); } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link:empty { display: none; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .header-sidebar .secondLvl .highlitedSection .highlitedInfo .link { margin-top: 10px; } .header-sidebar .thirdLvl { position: fixed; left: 0; bottom: 0; width: 100vw; height: calc(100dvh - var(--header-margin-top)); max-height: unset; background-color: white; z-index: 500; padding: 0 var(--container-gutter-x); translate: 100% 0; opacity: 1; pointer-events: none; overflow: hidden; transition: translate 0.3s ease; } .header-sidebar .thirdLvl.mobile-active { display: block; translate: 0 0; pointer-events: all; } .header-sidebar .thirdLvl .menuBack { display: flex; align-items: center; gap: 16px; padding: 16px 0px; border-bottom: 1px solid #eee; background-color: white; position: sticky; top: 0; z-index: 10; } .header-sidebar .thirdLvl .menuBack .backBtn { width: var(--back-btn-size); height: var(--back-btn-size); transform: scale(var(--flip-value)); cursor: pointer; display: flex; align-items: center; justify-content: center; } .header-sidebar .thirdLvl .menuBack .backBtn img { width: 100%; height: 100%; object-fit: contain; } .header-sidebar .thirdLvl .menuBack .title { font-size: 16px; font-weight: 600; color: #34303d; } .header-sidebar .thirdLvl .thirdLevelItemWrapper { width: 100%; max-width: 100%; max-height: unset; overflow-y: auto; padding: var(--sidebar-padding); height: calc(100% - 60px); scrollbar-gutter: unset; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper { display: flex; flex-direction: column; margin-bottom: 8px; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage { border-bottom: 1px solid #eee; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage:last-child { border-bottom: none; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .imageWrapper { order: 2; flex: 0 0 40px; width: 40px; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .imageWrapper a { display: block; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .imageWrapper a img { width: 100%; aspect-ratio: 1; object-fit: contain; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .titleWrapper { order: 1; flex: 1 1 auto; padding-inline-end: 0; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .titleWrapper a.menuAnchor { font-size: 16px; font-weight: 600; color: #34303d; text-decoration: none; display: block; margin-bottom: 2px; } .header-sidebar .thirdLvl .thirdLvlImagesWrapper .thirdLvlItem.withImage .listingInfo .titleWrapper p { font-size: 13px; color: #666; line-height: 1.3; margin: 0; } .header-sidebar .thirdLvl .thirdLvlItem:not(.withImage) { padding: 6px 0; } .header-sidebar .thirdLvl .thirdLvlItem:not(.withImage) a.menuAnchor { font-size: 16px; color: #34303d; text-decoration: none; display: block; } .header-sidebar .thirdLvl .highlitedSection.inner { position: static; max-width: 100%; margin-top: 24px; padding-top: 24px; border-top: 1px solid #eee; } .header-sidebar .thirdLvl .highlitedSection.inner .imageWrapper { margin-bottom: 16px; border-radius: 8px; overflow: hidden; } .header-sidebar .thirdLvl .highlitedSection.inner .imageWrapper a { display: block; } .header-sidebar .thirdLvl .highlitedSection.inner .imageWrapper a img { width: 100%; height: auto; object-fit: cover; } .header-sidebar .thirdLvl .highlitedSection.inner .highlitedInfo .title { font-size: 16px; font-weight: 600; color: #34303d; margin-bottom: 8px; } .header-sidebar .thirdLvl .highlitedSection.inner .highlitedInfo .description { font-size: 14px; color: #666; line-height: 1.4; margin-bottom: 12px; } .header-sidebar .thirdLvl .highlitedSection.inner .highlitedInfo .link { font-size: 14px; font-weight: 600; color: #34303d; } .banner-container { /* ======================================== GENERATED CLASSES REFERENCE ======================================== HORIZONTAL TEXT ALIGNMENT (All sizes — no media query): - .left-content-text-start - .left-content-text-center - .left-content-text-end - .right-content-text-start - .right-content-text-center - .right-content-text-end HORIZONTAL TEXT ALIGNMENT (Responsive prefixes — override base on smaller screens): - sm-{class} (max-width: 568px) - md-{class} (max-width: 768px) - lg-{class} (max-width: 992px) e.g. .lg-left-content-text-start, .md-right-content-text-end, etc. HORIZONTAL TEXT ALIGNMENT (Mobile — max-width: 992px): - .left-content-text-start-mobile - .left-content-text-end-mobile - .right-content-text-start-mobile - .right-content-text-end-mobile BLOCK MAX-WIDTH (Both sides): - .blocks-max-width-200 through .blocks-max-width-650 (200, 250, 300, 350, 400, 450, 500, 550, 600, 650) - sm-/md-/lg- prefixed variants available BLOCK MAX-WIDTH (Left side only): - .blocks-max-width-left-200 through .blocks-max-width-left-650 - sm-/md-/lg- prefixed variants available BLOCK MAX-WIDTH (Right side only): - .blocks-max-width-right-200 through .blocks-max-width-right-650 - sm-/md-/lg- prefixed variants available VERTICAL ALIGNMENT (Both sides): - .content-align-top - .content-align-center - .content-align-bottom - sm-/md-/lg- prefixed variants available VERTICAL ALIGNMENT (Left side only): - .content-left-align-top - .content-left-align-center - .content-left-align-bottom - sm-/md-/lg- prefixed variants available VERTICAL ALIGNMENT (Right side only): - .content-right-align-top - .content-right-align-center - .content-right-align-bottom - sm-/md-/lg- prefixed variants available CONTENT SIZE VARIANTS: - .content-small - .content-large OTHER MODIFIERS: - .show-banner-link - .content-dark - .order-left-image-first - .order-right-image-first - .swap-sides (swaps left/right block positions) - sm-/md-/lg- prefixed variants available for .swap-sides ======================================== */ --banner-aspect-ratio: 1340 / 670; --banner-aspect-ratio-mobile: 437 / 651; --content-text-color: var(--default-text-color); --content-left-text-alignment: center; --content-right-text-alignment: center; --content-left-buttons-alignment: center; --content-right-buttons-alignment: center; --banner-link-display: none; --block-left-max-width: 500px; --block-right-max-width: 500px; --content-left-vertical-align: center; --content-right-vertical-align: center; position: relative; --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #27242d; --default-text-color: white; --default-text-color-inverse: #34303d; color: var(--default-text-color); margin-top: -1px; position: relative; } .banner-container::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .banner-container.half-bg::before { height: 50%; } .banner-container > * { isolation: isolate; } .banner-container { width: 100%; aspect-ratio: var(--banner-aspect-ratio); } .banner-container.left-content-text-start { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.left-content-text-center { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.left-content-text-end { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.right-content-text-start { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.right-content-text-center { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.right-content-text-end { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container.blocks-max-width-200 { --block-left-max-width: 200px; --block-right-max-width: 200px; text-wrap: balance; } .banner-container.blocks-max-width-left-200 { --block-left-max-width: 200px; text-wrap: balance; } .banner-container.blocks-max-width-right-200 { --block-right-max-width: 200px; text-wrap: balance; } .banner-container.blocks-max-width-250 { --block-left-max-width: 250px; --block-right-max-width: 250px; text-wrap: balance; } .banner-container.blocks-max-width-left-250 { --block-left-max-width: 250px; text-wrap: balance; } .banner-container.blocks-max-width-right-250 { --block-right-max-width: 250px; text-wrap: balance; } .banner-container.blocks-max-width-300 { --block-left-max-width: 300px; --block-right-max-width: 300px; text-wrap: balance; } .banner-container.blocks-max-width-left-300 { --block-left-max-width: 300px; text-wrap: balance; } .banner-container.blocks-max-width-right-300 { --block-right-max-width: 300px; text-wrap: balance; } .banner-container.blocks-max-width-350 { --block-left-max-width: 350px; --block-right-max-width: 350px; text-wrap: balance; } .banner-container.blocks-max-width-left-350 { --block-left-max-width: 350px; text-wrap: balance; } .banner-container.blocks-max-width-right-350 { --block-right-max-width: 350px; text-wrap: balance; } .banner-container.blocks-max-width-400 { --block-left-max-width: 400px; --block-right-max-width: 400px; text-wrap: balance; } .banner-container.blocks-max-width-left-400 { --block-left-max-width: 400px; text-wrap: balance; } .banner-container.blocks-max-width-right-400 { --block-right-max-width: 400px; text-wrap: balance; } .banner-container.blocks-max-width-450 { --block-left-max-width: 450px; --block-right-max-width: 450px; text-wrap: balance; } .banner-container.blocks-max-width-left-450 { --block-left-max-width: 450px; text-wrap: balance; } .banner-container.blocks-max-width-right-450 { --block-right-max-width: 450px; text-wrap: balance; } .banner-container.blocks-max-width-500 { --block-left-max-width: 500px; --block-right-max-width: 500px; text-wrap: balance; } .banner-container.blocks-max-width-left-500 { --block-left-max-width: 500px; text-wrap: balance; } .banner-container.blocks-max-width-right-500 { --block-right-max-width: 500px; text-wrap: balance; } .banner-container.blocks-max-width-550 { --block-left-max-width: 550px; --block-right-max-width: 550px; text-wrap: balance; } .banner-container.blocks-max-width-left-550 { --block-left-max-width: 550px; text-wrap: balance; } .banner-container.blocks-max-width-right-550 { --block-right-max-width: 550px; text-wrap: balance; } .banner-container.blocks-max-width-600 { --block-left-max-width: 600px; --block-right-max-width: 600px; text-wrap: balance; } .banner-container.blocks-max-width-left-600 { --block-left-max-width: 600px; text-wrap: balance; } .banner-container.blocks-max-width-right-600 { --block-right-max-width: 600px; text-wrap: balance; } .banner-container.blocks-max-width-650 { --block-left-max-width: 650px; --block-right-max-width: 650px; text-wrap: balance; } .banner-container.blocks-max-width-left-650 { --block-left-max-width: 650px; text-wrap: balance; } .banner-container.blocks-max-width-right-650 { --block-right-max-width: 650px; text-wrap: balance; } .banner-container.content-align-top { --content-left-vertical-align: flex-start; --content-right-vertical-align: flex-start; } .banner-container.content-align-center { --content-left-vertical-align: center; --content-right-vertical-align: center; } .banner-container.content-align-bottom { --content-left-vertical-align: flex-end; --content-right-vertical-align: flex-end; } .banner-container.content-left-align-top { --content-left-vertical-align: flex-start; } .banner-container.content-left-align-center { --content-left-vertical-align: center; } .banner-container.content-left-align-bottom { --content-left-vertical-align: flex-end; } .banner-container.content-right-align-top { --content-right-vertical-align: flex-start; } .banner-container.content-right-align-center { --content-right-vertical-align: center; } .banner-container.content-right-align-bottom { --content-right-vertical-align: flex-end; } @media (max-width: 568px) { .banner-container.sm-left-content-text-start { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.sm-left-content-text-center { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.sm-left-content-text-end { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.sm-right-content-text-start { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.sm-right-content-text-center { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.sm-right-content-text-end { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container.sm-blocks-max-width-200 { --block-left-max-width: 200px; --block-right-max-width: 200px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-200 { --block-left-max-width: 200px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-200 { --block-right-max-width: 200px; text-wrap: balance; } .banner-container.sm-blocks-max-width-250 { --block-left-max-width: 250px; --block-right-max-width: 250px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-250 { --block-left-max-width: 250px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-250 { --block-right-max-width: 250px; text-wrap: balance; } .banner-container.sm-blocks-max-width-300 { --block-left-max-width: 300px; --block-right-max-width: 300px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-300 { --block-left-max-width: 300px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-300 { --block-right-max-width: 300px; text-wrap: balance; } .banner-container.sm-blocks-max-width-350 { --block-left-max-width: 350px; --block-right-max-width: 350px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-350 { --block-left-max-width: 350px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-350 { --block-right-max-width: 350px; text-wrap: balance; } .banner-container.sm-blocks-max-width-400 { --block-left-max-width: 400px; --block-right-max-width: 400px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-400 { --block-left-max-width: 400px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-400 { --block-right-max-width: 400px; text-wrap: balance; } .banner-container.sm-blocks-max-width-450 { --block-left-max-width: 450px; --block-right-max-width: 450px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-450 { --block-left-max-width: 450px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-450 { --block-right-max-width: 450px; text-wrap: balance; } .banner-container.sm-blocks-max-width-500 { --block-left-max-width: 500px; --block-right-max-width: 500px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-500 { --block-left-max-width: 500px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-500 { --block-right-max-width: 500px; text-wrap: balance; } .banner-container.sm-blocks-max-width-550 { --block-left-max-width: 550px; --block-right-max-width: 550px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-550 { --block-left-max-width: 550px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-550 { --block-right-max-width: 550px; text-wrap: balance; } .banner-container.sm-blocks-max-width-600 { --block-left-max-width: 600px; --block-right-max-width: 600px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-600 { --block-left-max-width: 600px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-600 { --block-right-max-width: 600px; text-wrap: balance; } .banner-container.sm-blocks-max-width-650 { --block-left-max-width: 650px; --block-right-max-width: 650px; text-wrap: balance; } .banner-container.sm-blocks-max-width-left-650 { --block-left-max-width: 650px; text-wrap: balance; } .banner-container.sm-blocks-max-width-right-650 { --block-right-max-width: 650px; text-wrap: balance; } .banner-container.sm-content-align-top { --content-left-vertical-align: flex-start; --content-right-vertical-align: flex-start; } .banner-container.sm-content-align-center { --content-left-vertical-align: center; --content-right-vertical-align: center; } .banner-container.sm-content-align-bottom { --content-left-vertical-align: flex-end; --content-right-vertical-align: flex-end; } .banner-container.sm-content-left-align-top { --content-left-vertical-align: flex-start; } .banner-container.sm-content-left-align-center { --content-left-vertical-align: center; } .banner-container.sm-content-left-align-bottom { --content-left-vertical-align: flex-end; } .banner-container.sm-content-right-align-top { --content-right-vertical-align: flex-start; } .banner-container.sm-content-right-align-center { --content-right-vertical-align: center; } .banner-container.sm-content-right-align-bottom { --content-right-vertical-align: flex-end; } } @media (max-width: 768px) { .banner-container.md-left-content-text-start { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.md-left-content-text-center { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.md-left-content-text-end { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.md-right-content-text-start { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.md-right-content-text-center { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.md-right-content-text-end { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container.md-blocks-max-width-200 { --block-left-max-width: 200px; --block-right-max-width: 200px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-200 { --block-left-max-width: 200px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-200 { --block-right-max-width: 200px; text-wrap: balance; } .banner-container.md-blocks-max-width-250 { --block-left-max-width: 250px; --block-right-max-width: 250px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-250 { --block-left-max-width: 250px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-250 { --block-right-max-width: 250px; text-wrap: balance; } .banner-container.md-blocks-max-width-300 { --block-left-max-width: 300px; --block-right-max-width: 300px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-300 { --block-left-max-width: 300px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-300 { --block-right-max-width: 300px; text-wrap: balance; } .banner-container.md-blocks-max-width-350 { --block-left-max-width: 350px; --block-right-max-width: 350px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-350 { --block-left-max-width: 350px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-350 { --block-right-max-width: 350px; text-wrap: balance; } .banner-container.md-blocks-max-width-400 { --block-left-max-width: 400px; --block-right-max-width: 400px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-400 { --block-left-max-width: 400px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-400 { --block-right-max-width: 400px; text-wrap: balance; } .banner-container.md-blocks-max-width-450 { --block-left-max-width: 450px; --block-right-max-width: 450px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-450 { --block-left-max-width: 450px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-450 { --block-right-max-width: 450px; text-wrap: balance; } .banner-container.md-blocks-max-width-500 { --block-left-max-width: 500px; --block-right-max-width: 500px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-500 { --block-left-max-width: 500px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-500 { --block-right-max-width: 500px; text-wrap: balance; } .banner-container.md-blocks-max-width-550 { --block-left-max-width: 550px; --block-right-max-width: 550px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-550 { --block-left-max-width: 550px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-550 { --block-right-max-width: 550px; text-wrap: balance; } .banner-container.md-blocks-max-width-600 { --block-left-max-width: 600px; --block-right-max-width: 600px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-600 { --block-left-max-width: 600px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-600 { --block-right-max-width: 600px; text-wrap: balance; } .banner-container.md-blocks-max-width-650 { --block-left-max-width: 650px; --block-right-max-width: 650px; text-wrap: balance; } .banner-container.md-blocks-max-width-left-650 { --block-left-max-width: 650px; text-wrap: balance; } .banner-container.md-blocks-max-width-right-650 { --block-right-max-width: 650px; text-wrap: balance; } .banner-container.md-content-align-top { --content-left-vertical-align: flex-start; --content-right-vertical-align: flex-start; } .banner-container.md-content-align-center { --content-left-vertical-align: center; --content-right-vertical-align: center; } .banner-container.md-content-align-bottom { --content-left-vertical-align: flex-end; --content-right-vertical-align: flex-end; } .banner-container.md-content-left-align-top { --content-left-vertical-align: flex-start; } .banner-container.md-content-left-align-center { --content-left-vertical-align: center; } .banner-container.md-content-left-align-bottom { --content-left-vertical-align: flex-end; } .banner-container.md-content-right-align-top { --content-right-vertical-align: flex-start; } .banner-container.md-content-right-align-center { --content-right-vertical-align: center; } .banner-container.md-content-right-align-bottom { --content-right-vertical-align: flex-end; } } @media (max-width: 992px) { .banner-container.lg-left-content-text-start { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.lg-left-content-text-center { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.lg-left-content-text-end { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.lg-right-content-text-start { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.lg-right-content-text-center { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.lg-right-content-text-end { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container.lg-blocks-max-width-200 { --block-left-max-width: 200px; --block-right-max-width: 200px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-200 { --block-left-max-width: 200px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-200 { --block-right-max-width: 200px; text-wrap: balance; } .banner-container.lg-blocks-max-width-250 { --block-left-max-width: 250px; --block-right-max-width: 250px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-250 { --block-left-max-width: 250px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-250 { --block-right-max-width: 250px; text-wrap: balance; } .banner-container.lg-blocks-max-width-300 { --block-left-max-width: 300px; --block-right-max-width: 300px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-300 { --block-left-max-width: 300px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-300 { --block-right-max-width: 300px; text-wrap: balance; } .banner-container.lg-blocks-max-width-350 { --block-left-max-width: 350px; --block-right-max-width: 350px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-350 { --block-left-max-width: 350px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-350 { --block-right-max-width: 350px; text-wrap: balance; } .banner-container.lg-blocks-max-width-400 { --block-left-max-width: 400px; --block-right-max-width: 400px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-400 { --block-left-max-width: 400px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-400 { --block-right-max-width: 400px; text-wrap: balance; } .banner-container.lg-blocks-max-width-450 { --block-left-max-width: 450px; --block-right-max-width: 450px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-450 { --block-left-max-width: 450px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-450 { --block-right-max-width: 450px; text-wrap: balance; } .banner-container.lg-blocks-max-width-500 { --block-left-max-width: 500px; --block-right-max-width: 500px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-500 { --block-left-max-width: 500px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-500 { --block-right-max-width: 500px; text-wrap: balance; } .banner-container.lg-blocks-max-width-550 { --block-left-max-width: 550px; --block-right-max-width: 550px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-550 { --block-left-max-width: 550px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-550 { --block-right-max-width: 550px; text-wrap: balance; } .banner-container.lg-blocks-max-width-600 { --block-left-max-width: 600px; --block-right-max-width: 600px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-600 { --block-left-max-width: 600px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-600 { --block-right-max-width: 600px; text-wrap: balance; } .banner-container.lg-blocks-max-width-650 { --block-left-max-width: 650px; --block-right-max-width: 650px; text-wrap: balance; } .banner-container.lg-blocks-max-width-left-650 { --block-left-max-width: 650px; text-wrap: balance; } .banner-container.lg-blocks-max-width-right-650 { --block-right-max-width: 650px; text-wrap: balance; } .banner-container.lg-content-align-top { --content-left-vertical-align: flex-start; --content-right-vertical-align: flex-start; } .banner-container.lg-content-align-center { --content-left-vertical-align: center; --content-right-vertical-align: center; } .banner-container.lg-content-align-bottom { --content-left-vertical-align: flex-end; --content-right-vertical-align: flex-end; } .banner-container.lg-content-left-align-top { --content-left-vertical-align: flex-start; } .banner-container.lg-content-left-align-center { --content-left-vertical-align: center; } .banner-container.lg-content-left-align-bottom { --content-left-vertical-align: flex-end; } .banner-container.lg-content-right-align-top { --content-right-vertical-align: flex-start; } .banner-container.lg-content-right-align-center { --content-right-vertical-align: center; } .banner-container.lg-content-right-align-bottom { --content-right-vertical-align: flex-end; } } @media (max-width: 992px) { .banner-container.left-content-text-start-mobile { --content-left-text-alignment: start; --content-left-buttons-alignment: start; } .banner-container.left-content-text-center-mobile { --content-left-text-alignment: center; --content-left-buttons-alignment: center; } .banner-container.left-content-text-end-mobile { --content-left-text-alignment: end; --content-left-buttons-alignment: end; } .banner-container.right-content-text-start-mobile { --content-right-text-alignment: start; --content-right-buttons-alignment: start; } .banner-container.right-content-text-center-mobile { --content-right-text-alignment: center; --content-right-buttons-alignment: center; } .banner-container.right-content-text-end-mobile { --content-right-text-alignment: end; --content-right-buttons-alignment: end; } .banner-container { aspect-ratio: var(--banner-aspect-ratio-mobile); } } .banner-container.content-small .banner-content .content-info-container .content-info .banner-title { font-size: clamp(24px, 20.9036697248px + 0.6880733945vw, 30px); line-height: 1.3; margin-bottom: 10px; } .banner-container.content-small .banner-content .content-info-container .content-info .banner-title:empty { display: none; } .banner-container.content-small .banner-content .content-info-container .content-info .banner-subtitle { font-size: clamp(13px, 11.9678899083px + 0.2293577982vw, 15px); line-height: 1.4; } .banner-container.content-small .banner-content .content-info-container .content-info .banner-subtitle:empty { display: none; } .banner-container.content-small .banner-content .content-info-container .content-info .buttons-container { margin-top: 20px !important; } .banner-container.content-small .banner-content .content-info-container .content-info .banner-button { font-size: 12px !important; } .banner-container.content-large .banner-content .content-info-container .content-info .banner-title { font-size: clamp(30px, 19.6788990826px + 2.2935779817vw, 50px); line-height: 1.3; margin-bottom: 10px; font-weight: 400; } .banner-container.content-large .banner-content .content-info-container .content-info .banner-subtitle { font-size: clamp(15px, 13.4518348624px + 0.3440366972vw, 18px); line-height: 1.4; } .banner-container.content-large .banner-content .content-info-container .content-info .banner-description { font-size: clamp(17px, 15.4518348624px + 0.3440366972vw, 20px); line-height: 1.4; margin-bottom: 20px; } .banner-container.content-large .banner-content .content-info-container .content-info .content-logo-image { margin-bottom: 40px; } .banner-container.content-large .banner-content .content-info-container .content-info .buttons-container { margin-top: 20px !important; } .banner-container.show-banner-link { --banner-link-display: block; } .banner-container.content-dark { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #f6f4f0; margin-top: -1px; position: relative; } .banner-container.content-dark::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .banner-container.content-dark.half-bg::before { height: 50%; } .banner-container.content-dark > * { isolation: isolate; } .banner-container.electric-purple-banner .content-right { display: none; } .banner-container.electric-purple-banner .banner-content { justify-content: center !important; } .banner-container.electric-purple-banner .banner-content h3 { font-weight: 700; padding-block: 15px; } .banner-container.electric-purple-banner .banner-content img { max-width: 350px !important; } .banner-container.electric-purple-banner .banner-content .game-cta { display: inline-flex; overflow: hidden; border-radius: 20px; } .banner-container.electric-purple-banner .banner-content .game-cta a { background: white; padding: 10px 20px; color: rebeccapurple !important; transition: 0.2s ease-out; } .banner-container.electric-purple-banner .banner-content .game-cta a:first-child { border-inline-end: rgba(0, 0, 0, 0.1215686275) 1px solid; } .banner-container.electric-purple-banner .banner-content .content-bottom-wrapper { color: rgba(255, 255, 255, 0.6509803922) !important; } .banner-container.electric-purple-banner .banner-content .content-bottom-wrapper a { color: rgba(255, 255, 255, 0.6509803922) !important; } .banner-container.electric-purple-banner .banner-content .content-bottom-wrapper p { padding-top: 20px; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 0px; bottom: 3%; left: 50%; } .banner-container.electric-purple-banner .banner-content .content-bottom-wrapper p::after { content: ""; display: block; width: 20px; height: 20px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); opacity: 0.7; animation: scrollBounce 2s ease-in-out infinite; } @media (max-width: 768px) { .banner-container.electric-purple-banner .banner-content .banner-description img { max-width: 200px !important; } .banner-container.electric-purple-banner .banner-content .content-body h3 { font-size: 28px !important; } .banner-container.electric-purple-banner .banner-content .content-body p { padding-top: 10px; font-size: 14px !important; margin-inline: 15% !important; } } .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description img { max-width: 350px !important; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description img { max-width: 450px !important; } .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description p { display: block; font-size: clamp(16px, 2.5vw, 20px); padding-block: 10px; } .banner-container.electric-purple-homebanner .banner-content-container .banner-content .content-bottom-wrapper { left: 0; translate: 0 0; text-align: start; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description p { display: none; } .banner-container.electric-purple-homebanner .content-right .content-info .buttons-container { display: none; } @media (max-width: 992px) { .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description { text-align: center !important; } .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description img { max-width: 250px !important; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description img { max-width: 350px !important; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description p { display: block; } .banner-container.electric-purple-homebanner .content-right .content-info .buttons-container { display: block; } .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description p { display: none; } .banner-container.electric-purple-homebanner .content-left .content-info .buttons-container { display: none; } .banner-container.electric-purple-homebanner .banner-content-container .banner-content .content-bottom-wrapper { text-align: center; } } @media (max-width: 1100px) { .banner-container.electric-purple-homebanner .content-left .content-info .content-body .banner-description img { max-width: 270px !important; } .banner-container.electric-purple-homebanner .content-right .content-info .content-body .banner-description img { max-width: 90% !important; } } .banner-container.delia-boost-promo-banner .content-right { display: none; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content { position: unset; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left { width: 100%; max-width: unset; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles { display: flex; width: 100%; gap: 48px; padding-inline: 60px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title { max-height: 100%; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img { max-width: 500px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img:last-child { display: none; } @media (max-width: 1400px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img { max-height: 80%; } } @media (max-width: 1200px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles { padding-inline: 0; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img { max-width: 350px; max-height: unset; } } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle { display: flex; flex-direction: column; width: 100%; align-items: start; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle img { position: absolute; right: 0; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle .img-desktop { display: block; } @media (max-width: 992px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle .img-desktop { max-width: 35%; } } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle .img-mobile { display: none; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle h3 { font-size: clamp(24px, 10.5825688073px + 2.9816513761vw, 50px); font-weight: 600; margin-bottom: 10px; max-width: 350px; margin-top: 33%; text-align: start; } @media (max-width: 1100px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle h3 { margin-top: 20%; } } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle p { font-size: clamp(16px, 10.8394495413px + 1.1467889908vw, 26px); text-align: start; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle a { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle a:empty { display: none; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle a:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .banner-subtitle a { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); margin-top: 20px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-bottom-wrapper { bottom: 23px; max-width: 1100px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-bottom-wrapper div { font-size: 11px; max-width: 100%; text-align: start; } @media (max-width: 1100px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-bottom-wrapper { padding-inline: 15px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-bottom-wrapper div { font-size: 7px; } } @media (max-width: 992px) { .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles { flex-direction: column-reverse; gap: 10px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title { max-height: fit-content; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img { max-width: 300px; width: 90%; margin: auto; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img:last-child { display: block; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-title img:first-child { display: none; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle { max-width: 247px; } .banner-container.delia-boost-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle h3 { margin-top: 0; } } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-logo-image img { max-width: fit-content !important; } @media (max-width: 1400px) { .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-logo-image img { max-height: 300px !important; } } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-body .banner-description img:first-child { display: none; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right h3 { font-weight: 600; font-size: clamp(36px, 3vw, 42px); } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right p { font-size: clamp(22px, 2.5vw, 26px); padding-top: 10px; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-bottom-wrapper { font-size: 11px; max-width: 1300px !important; } @media (max-width: 992px) { .banner-container.delia-boost-home-banner .banner-content-container .banner-content { flex-direction: column-reverse; position: unset; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right { max-width: unset; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-body .banner-description img { position: absolute; right: 0; top: 25%; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-body .banner-description img:first-child { display: block; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-body .banner-description img:last-child { display: none; } .banner-container.delia-boost-home-banner .banner-content-container .banner-content h3 { font-size: clamp(14px, 5vw, 36px); } .banner-container.delia-boost-home-banner .banner-content-container .banner-content p { font-size: clamp(12px, 3vw, 22px); padding-top: 10px; } .banner-container.delia-boost-home-banner .content-info-container.content-left { max-width: unset !important; text-align: center !important; } .banner-container.delia-boost-home-banner .content-info-container.content-left .content-info .content-images .content-logo-image { padding-bottom: 3% !important; } .banner-container.delia-boost-home-banner .content-info-container.content-left .content-info .content-images .content-logo-image img { max-width: unset !important; max-height: unset !important; } } .banner-container.forever-curious-26 .content-right { display: none; } .banner-container.forever-curious-26 .content-left { max-width: fit-content !important; } .banner-container.forever-curious-26 .banner-content { justify-content: center !important; } .banner-container.forever-curious-26 .banner-content .banner-title { display: inline-flex !important; align-items: center; } .banner-container.forever-curious-26 .banner-content img { max-width: 280px !important; margin-inline: 10px; } @media (max-width: 992px) { .banner-container.forever-curious-26 .banner-content .content-info-container.content-left { display: flex; flex-direction: column; flex: 1 1 auto; } .banner-container.forever-curious-26 .banner-content .content-info { flex: 1 1 auto; } .banner-container.forever-curious-26 .banner-content .buttons-container { margin-top: auto !important; } } @media (max-width: 768px) { .banner-container.forever-curious-26 .banner-content .banner-title { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; width: 100%; } .banner-container.forever-curious-26 .banner-content .banner-title span { font-size: 29px !important; } .banner-container.forever-curious-26 .banner-content .banner-title span:first-child { padding-inline-end: 20% !important; } .banner-container.forever-curious-26 .banner-content .banner-title span:last-child { padding-inline-start: 20% !important; } .banner-container.forever-curious-26 .banner-content img { max-width: 170px !important; } } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle p { font-size: clamp(21px, 2.5vw, 33px); } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle img { display: none; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-titles .banner-subtitle span { display: block; margin-top: 15px; width: 100%; font-weight: bold; font-size: 47px; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-right .content-titles .banner-subtitle p { font-size: clamp(16px, 2.5vw, 21px); } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-right .content-titles .banner-subtitle img { max-width: 300px !important; } @media (max-width: 992px) { .banner-container.firmware-promo-banner .banner-content-container .banner-content { justify-content: flex-start !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-info { align-items: center !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle { text-align: center !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { display: block; max-width: 250px !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-right .content-titles .banner-subtitle { padding-top: 10px; text-align: center !important; } .banner-container.firmware-promo-banner .banner-content-container .banner-content .content-info-container.content-right .content-titles .banner-subtitle img { display: none; } } .banner-container.delia-green-banner .banner-content { justify-content: center !important; gap: 20px; } .banner-container.delia-green-banner .banner-content .content-left img { max-width: 500px !important; } @media (max-width: 1500px) { .banner-container.delia-green-banner .banner-content .content-left img { max-width: 400px !important; } } @media (max-width: 1200px) { .banner-container.delia-green-banner .banner-content .content-left img { max-width: 300px !important; } } .banner-container.delia-green-banner .banner-content .content-right img:first-child { display: none; } .banner-container.delia-green-banner .banner-content .content-right img { max-width: 140px !important; padding-bottom: 10px !important; } @media (max-width: 1500px) { .banner-container.delia-green-banner .banner-content .content-right img { max-width: 120px !important; } } .banner-container.delia-green-banner .banner-content .content-right h2 { font-size: clamp(28px, 3vw, 46px); font-weight: 600; } .banner-container.delia-green-banner .banner-content .content-right p { font-size: clamp(16px, 2.5vw, 21px); } .banner-container.delia-green-banner .content-bottom-wrapper { font-size: 10px !important; } @media (max-width: 1600px) { .banner-container.delia-green-banner .content-bottom-wrapper { font-size: 9px !important; } } @media (max-width: 700px) { .banner-container.delia-green-banner .content-bottom-wrapper { font-size: 8px !important; } } @media (max-width: 992px) { .banner-container.delia-green-banner .banner-content { flex-direction: column-reverse !important; justify-content: space-between !important; padding-block: 20px 46px !important; } .banner-container.delia-green-banner .banner-content .content-left img { max-width: 400px !important; width: 100% !important; } .banner-container.delia-green-banner .banner-content .content-right img:first-child { display: block; position: absolute; top: 23%; right: calc(-1 * var(--container-gutter-x)); } .banner-container.delia-green-banner .banner-content .content-right img:nth-child(2) { display: none; } .banner-container.delia-green-banner .banner-content .content-right img { max-width: 150px !important; } .banner-container.delia-green-banner .banner-content .content-right h2 { font-size: clamp(28px, 3vw, 48px); } .banner-container.delia-green-banner .banner-content .content-right p { font-size: clamp(16px, 2.5vw, 21px); } } .banner-container.summer-campaign-home-banner .banner-content { position: unset !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right { position: unset !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-images img { max-width: 150px !important; position: absolute; right: 0; bottom: 0; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img { position: absolute; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:last-child { max-width: 600px !important; top: 50%; transform: translate(-50%, -50%); left: 50%; } @media (max-width: 1400px) { .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:last-child { max-width: 450px !important; } } @media (max-width: 1260px) { .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:last-child { max-width: 300px !important; } } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1), .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(2) { top: 26%; left: 57%; transform: translate(-50%, -50%); z-index: 1; } @media (max-width: 1400px) { .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1), .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(2) { max-width: 150px !important; } } @media (max-width: 1260px) { .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1), .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(2) { max-width: 100px !important; } } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1) { display: none; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description { display: flex; flex-direction: column; align-items: center; font-size: clamp(16px, 1.5vw, 21px); } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description p { max-width: fit-content; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description p:last-child { display: none; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .banner-title { font-size: clamp(28px, 2.5vw, 46px); } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .banner-subtitle { font-size: clamp(16px, 1.5vw, 21px); } .banner-container.summer-campaign-home-banner .banner-content .content-bottom-wrapper { max-width: calc(1324px + var(--container-gutter-x)) !important; text-align: start !important; padding-inline: var(--container-gutter-x) !important; } @media (max-width: 1400px) { .banner-container.summer-campaign-home-banner .banner-content .content-bottom-wrapper { max-width: 1140px !important; } } @media (max-width: 1200px) { .banner-container.summer-campaign-home-banner .banner-content .content-bottom-wrapper { max-width: 960px !important; } } @media (max-width: 992px) { .banner-container.summer-campaign-home-banner .banner-content { flex-direction: column !important; justify-content: space-between !important; align-items: center !important; padding-block: 20px 46px !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left { text-align: center !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .buttons-container { justify-content: center !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .content-titles .banner-title { font-size: clamp(28px, 3vw, 46px); } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle { font-size: clamp(16px, 2.5vw, 21px); } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right { position: unset !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-images img { position: absolute; right: 0; bottom: 0; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img { position: absolute; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:last-child { max-width: 80% !important; top: 50%; transform: translate(-50%, -50%); left: 50%; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1), .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(2) { max-width: 20% !important; top: 35%; left: 65%; transform: translate(-50%, -50%); z-index: 1; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-titles .banner-subtitle img:nth-child(1) { display: none; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description { align-items: start !important; } .banner-container.summer-campaign-home-banner .banner-content .content-info-container.content-right .content-info .content-body .banner-description p { display: block !important; } .banner-container.summer-campaign-home-banner .banner-content .content-bottom-wrapper { display: none !important; } } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner .banner-content { justify-content: center !important; } } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-right { display: none; } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left { margin-inline: auto; } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-title { font-size: clamp(28px, 2.5vw, 46px); } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle { font-size: clamp(16px, 1.5vw, 21px); } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img { position: absolute; } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:first-child { max-width: 600px !important; top: 50%; transform: translate(-50%, -50%); left: 50%; z-index: -1; } @media (max-width: 1400px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:first-child { max-width: 450px !important; } } @media (max-width: 1260px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:first-child { max-width: 300px !important; } } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:first-child { max-width: 90% !important; } } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:last-child { right: 0; bottom: 0; max-width: 150px !important; } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle img:last-child { max-width: 100px !important; } } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle p { font-weight: 400; font-size: clamp(16px, 1.5vw, 18px); } .banner-container.summer-campaign-club-promo-banner .banner-content .content-info-container.content-left .content-titles .banner-subtitle p:first-of-type { font-weight: 600; font-size: clamp(20px, 2vw, 24px); } .banner-container.summer-campaign-club-promo-banner .banner-content .content-bottom-wrapper { max-width: calc(1324px + var(--container-gutter-x)) !important; text-align: start !important; padding-inline: var(--container-gutter-x) !important; padding-block: 0 20px !important; } @media (max-width: 1400px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-bottom-wrapper { max-width: 1140px !important; } } @media (max-width: 1200px) { .banner-container.summer-campaign-club-promo-banner .banner-content .content-bottom-wrapper { max-width: 960px !important; } } .banner-container.summer-campaign-club-promo-banner.non-responsive-version .content-left { margin: unset; margin-top: 26%; } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner.non-responsive-version .content-left { margin-top: 57%; } } .banner-container.summer-campaign-club-promo-banner.non-responsive-version .banner-subtitle2 { margin-top: 10px !important; } @media (max-width: 992px) { .banner-container.summer-campaign-club-promo-banner.non-responsive-version .banner-subtitle2 { margin-top: 5px !important; } .banner-container.summer-campaign-club-promo-banner.non-responsive-version .banner-subtitle2 a { font-size: 9px; } } @media (max-width: 992px) { .banner-container.remix-home-banner .banner-content-container { height: 100%; } .banner-container.remix-home-banner .banner-content-container .content-info .content-logo-image { margin-bottom: 10% !important; } .banner-container.remix-home-banner .banner-content-container .content-info .banner-description { margin-bottom: 10px !important; text-align: center; } .banner-container.remix-home-banner .banner-content-container .content-info .banner-description p { font-size: 23px; } .banner-container.remix-home-banner .banner-content-container .content-info .banner-description p br { display: none; } .banner-container.remix-home-banner .banner-content-container .content-info .buttons-container { margin-top: 0 !important; } .banner-container.remix-home-banner .banner-content-container .content-info .buttons-container a { font-size: 13px; } } .banner-container.remix-home-banner .content-info-container.content-left .content-info .content-body .banner-description p { font-size: clamp(16px, 1.5vw, 19px) !important; } .banner-container.remix-home-banner .content-info-container.content-left .content-info .content-images .content-logo-image.left img { max-width: 300px !important; } @media (max-width: 992px) { .banner-container.remix-home-banner .content-info-container.content-left .content-info { align-items: center !important; } } .banner-container.remix-promo-banner .content-info-container.content-left .content-info .banner-subtitle p { font-size: clamp(16px, 1.5vw, 21px) !important; margin-top: 20px !important; } .banner-container.remix-promo-banner .content-info-container.content-left .content-info .banner-subtitle img { max-width: 250px !important; } @media (max-width: 992px) { .banner-container.remix-promo-banner .content-info-container.content-left .content-info { align-items: center !important; } } .banner-container.remix-home-banner-second { overflow: hidden; } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content { flex-direction: column-reverse !important; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left :has(.banner-subtitle) { position: relative; } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { max-width: 540px; position: absolute; bottom: -40%; left: 0; } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { max-width: 400px; bottom: -30%; left: 50%; translate: -50% 0; z-index: 1; } } @media (min-width: 850px) and (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { max-width: 350px; bottom: -30%; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { position: absolute; max-width: 550px; left: 50%; translate: -50% 0; top: -220px; } @media (max-width: 1200px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { max-width: 400px; top: -100px; } } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { max-width: 100%; translate: -50% -40%; } } @media (max-width: 500px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-left .content-info .content-titles .banner-subtitle img { translate: -50% -30%; } } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right { text-align: center !important; z-index: 2; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) img { max-width: 300px; } @media (max-width: 768px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) img { max-width: 250px; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) h2 { padding-top: 30px; font-size: clamp(28px, 2.5vw, 46px); font-weight: 600; } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) h2 { font-size: clamp(24px, 3vw, 36px); padding-top: 20px; } } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) h3 { padding-bottom: 10px; } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) a.button-primary-filled { margin-bottom: 30px; } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) p { font-size: clamp(21px, 1.5vw, 28px); font-weight: 400; margin-bottom: unset; } .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) p a { font-weight: 300; font-size: clamp(16px, 1.5vw, 21px); } @media (max-width: 992px) { .banner-container.remix-home-banner-second .banner-content-container .banner-content .content-info-container.content-right .content-info :is(.content-body .banner-description, .content-titles .banner-subtitle) p { position: absolute; bottom: 25px; width: 100%; left: 50%; translate: -50% 0; } } .banner-container.bonds-home-banner { --banner-aspect-ratio: 1920 / 810; --banner-aspect-ratio-mobile: 420 / 680; aspect-ratio: 1920/810; --bonds-inline-inset: 4.25%; --block-right-max-width: 39.8vw; overflow: hidden; } .banner-container.bonds-home-banner::after { content: ""; position: absolute; top: 0; right: 0; width: 10.31%; aspect-ratio: 198/196; background-image: url("/images/bonds/iqos-logo.svg?v=lVgqVnYzHftOWURDJln7WsU36GY"), url("/images/bonds/logo-pebble.png?v=JKZU_kqkBROcxtLtKHYAu2NKAug"); background-repeat: no-repeat, no-repeat; background-size: 51.52% auto, 100% 100%; background-position: 51.04% 45.27%, 0 0; z-index: 30; pointer-events: none; } @media (max-width: 992px) { .banner-container.bonds-home-banner::after { width: 29.76%; aspect-ratio: 1; background-size: 53.6% auto, 100% 100%; background-position: 55.17% 43.83%, 0 0; } } .banner-container.bonds-home-banner .banner-content-container .container { max-width: none; padding-inline: 0; } .banner-container.bonds-home-banner .banner-content-container .banner-content { position: static; --inline-padding: var(--bonds-inline-inset); } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left { margin-bottom: 0; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { position: absolute; inset-block: 0; left: 0; width: 86.98%; height: 100%; max-width: none; object-fit: cover; object-position: left center; z-index: -1; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description h2 { font-size: 3.4vw; font-weight: 600; line-height: 1.12; margin-bottom: 0.3em; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description h2 span { display: block; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description h2 span:last-child:not(:first-child) { text-align: end; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description p { font-size: 1.6vw; font-weight: 400; line-height: 1.4; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-images .content-logo-image.right { position: absolute; right: var(--bonds-inline-inset); bottom: 8.27%; margin-bottom: 0; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-images .content-logo-image.right img { width: 12.35vw; max-width: none; } @media (max-width: 992px) { .banner-container.bonds-home-banner { --block-right-max-width: 100%; aspect-ratio: 420/680; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-left .content-info .content-images .content-logo-image.left img { width: 100%; height: 93.24%; inset-block: 0 auto; object-position: center top; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right { padding-block-end: 15.7vw; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description h2 { font-size: min(7.86vw, 58px); } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-body .banner-description p { font-size: min(3.81vw, 28px); } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-images .content-logo-image.right { bottom: 3.97%; } .banner-container.bonds-home-banner .banner-content-container .banner-content .content-info-container.content-right .content-info .content-images .content-logo-image.right img { width: 34.3vw; } } .banner-container:is(.order-left-image-first .content-info-container.content-left, .order-right-image-first .content-info-container.content-right) .content-info-container.content-left .content-titles { order: 2; } .banner-container:is(.order-left-image-first .content-info-container.content-left, .order-right-image-first .content-info-container.content-right) .content-info-container.content-left .content-logo-image { order: 1; } .banner-container:is(.order-left-image-first .content-info-container.content-left, .order-right-image-first .content-info-container.content-right) .content-info-container.content-left .buttons-container { order: 3; } .banner-container.swap-sides .banner-content { flex-direction: row-reverse !important; } @media (max-width: 992px) { .banner-container.swap-sides-mobile .banner-content { flex-direction: column-reverse !important; } } .banner-container p:last-child { margin: 0; } .banner-container .banner-link { position: absolute; inset: 0; z-index: 1000; cursor: pointer; display: var(--banner-link-display); } .banner-container .banner-media-container { position: relative; height: 100%; width: 100%; z-index: 10; } .banner-container .banner-content-container { position: absolute; inset: 0; z-index: 20; } .banner-container .banner-content-container .container { height: 100%; width: 100%; } .banner-container .banner-content-container .banner-content { position: relative; position: relative; z-index: 2; --section-pt: calc(100px - 20px); --section-pb: calc(100px - 20px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; color: var(--content-color); padding-inline: var(--inline-padding); } @media (max-width: 992px) { .banner-container .banner-content-container .banner-content { flex-direction: column; padding-block: 20px 46px; } } .banner-container .banner-content-container .banner-content:not(:has(.content-left)) { justify-content: end; } .banner-container .banner-content-container .banner-content .content-info-container { color: var(--content-text-color); max-width: 500px; width: 100%; align-self: center; } .banner-container .banner-content-container .banner-content .content-info-container img { max-width: 200px; } .banner-container .banner-content-container .banner-content .content-info-container .content-info { display: flex; flex-direction: column; } .banner-container .banner-content-container .banner-content .content-info-container.content-left { text-align: var(--content-left-text-alignment); max-width: var(--block-left-max-width); align-self: var(--content-left-vertical-align); } .banner-container .banner-content-container .banner-content .content-info-container.content-left .buttons-container { justify-content: var(--content-left-buttons-alignment); } .banner-container .banner-content-container .banner-content .content-info-container.content-right { text-align: var(--content-right-text-alignment); max-width: var(--block-right-max-width); align-self: var(--content-right-vertical-align); } .banner-container .banner-content-container .banner-content .content-info-container.content-right .buttons-container { justify-content: var(--content-right-buttons-alignment); } .banner-container .banner-content-container .banner-content .content-info-container .banner-title { font-weight: 600; font-size: clamp(24px, 18.3233944954px + 1.2614678899vw, 35px); line-height: 1.3; margin-bottom: 16px; } .banner-container .banner-content-container .banner-content .content-info-container .banner-title:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle { font-size: clamp(15px, 13.4518348624px + 0.3440366972vw, 18px); line-height: 1.4; } .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle2 { font-size: clamp(13px, 11.4518348624px + 0.3440366972vw, 16px); line-height: 1.4; margin-top: 20px; } @media (max-width: 768px) { .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle2 { margin-top: 10px; } } .banner-container .banner-content-container .banner-content .content-info-container .banner-subtitle2:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .buttons-container { margin-top: 20px; } @media (max-width: 768px) { .banner-container .banner-content-container .banner-content .content-info-container .buttons-container { margin-top: 10px; } } .banner-container .banner-content-container .banner-content .content-info-container .content-logo-image { margin-bottom: 20px; } .banner-container .banner-content-container .banner-content .content-info-container .content-logo-image img { max-width: min(240px, 40vw); } .banner-container .banner-content-container .banner-content .content-info-container .content-logo-image img[src=""] { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .content-logo-image:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.one { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.one:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.one:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.one { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.two { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.two:empty { display: none; } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.two:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .banner-container .banner-content-container .banner-content .content-info-container .banner-button.two { --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } @media (max-width: 768px) { .banner-container .banner-content-container .banner-content .content-info-container .banner-button { font-size: 14px !important; } } .banner-container .banner-content-container .banner-content .content-bottom-wrapper { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; width: 100%; max-width: 900px; text-align: center; font-size: clamp(12px, 10.9678899083px + 0.2293577982vw, 14px); } .banner-container .banner-content-container .banner-content .content-bottom-wrapper:has(div:empty) { display: none; } .swiper-homepage-banner-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== HEIGHT MODIFIERS: - .h-100vh (min(100vh, 700px)) - .h-300 (300px) - .h-400 (400px) - .h-500 (500px) - .h-600 (600px) - .h-700 (700px) LAYOUT MODIFIERS: - .page-banner ======================================== */ position: relative; --outer-banner-height: 100vh; } .swiper-homepage-banner-section .banner-container { --banner-aspect-ratio: 1470 / 430; --banner-aspect-ratio-mobile: 437 / 651; --banner-height: 600px; } .swiper-homepage-banner-section.page-banner { --banner-height: var(--outer-banner-height); --banner-aspect-ratio: unset; --banner-aspect-ratio-mobile: unset; } .swiper-homepage-banner-section.page-banner .banner-container { height: var(--outer-banner-height); } .swiper-homepage-banner-section.h-100vh { --outer-banner-height: min(100vh, 700px); } .swiper-homepage-banner-section.h-300 { --outer-banner-height: 300px; } .swiper-homepage-banner-section.h-400 { --outer-banner-height: 400px; } .swiper-homepage-banner-section.h-500 { --outer-banner-height: 500px; } .swiper-homepage-banner-section.h-600 { --outer-banner-height: 600px; } .swiper-homepage-banner-section.h-700 { --outer-banner-height: 700px; } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container { --banner-height: auto; height: var(--banner-height); aspect-ratio: unset !important; } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container { position: static; height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .video-container, .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .img-container { height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .video-container img, .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .video-container video, .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .img-container img, .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-media-container .img-container video { height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio .swiper-slide .banner-container .banner-content-container { top: 50%; translate: 0 -50%; left: 0; } @media (max-width: 992px) { .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container { --banner-height: auto; height: var(--banner-height); aspect-ratio: unset !important; } .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container { position: static; height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .video-container, .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .img-container { height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .video-container img, .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .video-container video, .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .img-container img, .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-media-container .img-container video { height: var(--banner-height); } .swiper-homepage-banner-section.img-ratio-mobile .swiper-slide .banner-container .banner-content-container { top: 5%; left: 0; } } .tabs-banner-section { position: relative; overflow: hidden; } @media (max-width: 992px) { .tabs-banner-section .container { padding: 0; } } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-wrapper { display: flex; align-items: center; justify-content: center; } @media (max-width: 992px) { .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-wrapper { justify-content: start !important; } } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide { width: auto; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab:empty { display: none; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab p { margin-bottom: 16px; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab p:last-child { margin-bottom: 0; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab ul, .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab li { list-style: disc; } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab { font-weight: 600; padding: 10px 16px; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.6s ease; } @media (max-width: 992px) { .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide .slider-tab { text-align: center; } } .tabs-banner-section .tabs-banner-container .tabs-banner-tabs-swiper .swiper-slide.swiper-slide-thumb-active .slider-tab { border-color: var(--default-text-color); } .tabs-banner-section .tabs-banner-container .tabs-banner-swiper { --inline-padding: 50px; } @media (max-width: 992px) { .tabs-banner-section .tabs-banner-container .tabs-banner-swiper { --inline-padding: var(--container-gutter-x); } } .tabs-banner-section .tabs-banner-container .tabs-banner-swiper .banner-container { --banner-aspect-ratio: 1340 / 670; --banner-aspect-ratio-mobile: 437 / 651; } .tabs-banner-section .tabs-banner-container .tabs-banner-swiper .swiper-pagination { position: absolute; inset-inline: var(--inline-padding); bottom: var(--inline-padding); margin: 0; text-align: left; width: unset; } @media (max-width: 992px) { .tabs-banner-section .tabs-banner-container .tabs-banner-swiper .swiper-pagination { bottom: 24px; text-align: center; } } .text-default-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== ALIGNMENT MODIFIERS: - .center (centers text and buttons, auto margin) WIDTH MODIFIERS: - .no-max-width (removes max-width constraint) ======================================== */ --container-max-width: 900px; --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .text-default-section.center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .text-default-section.no-max-width { --container-max-width: unset; } .text-default-section .text-default-container { max-width: var(--container-max-width); text-align: var(--text-align); margin-inline: var(--container-inline-margin); } .text-default-section .text-default-container .titles-container { max-width: var(--container-max-width); } .text-default-section .text-default-container.center { max-width: 1000px; margin-inline: auto; text-align: center; } .text-default-section .text-default-container .buttons-container { justify-content: var(--buttons-align); } .fullbleed-banner-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== ALIGNMENT MODIFIERS: - .center (centers text and buttons, auto margin) - .align-start (resets to start-aligned) - sm-/md-/lg- prefixed variants available WIDTH MODIFIERS: - .no-max-width (removes max-width constraint) - sm-/md-/lg- prefixed variants available VERTICAL ALIGNMENT (applies when section is a flex container, e.g. .page-banner): - .content-top - .content-center - .content-bottom - sm-/md-/lg- prefixed variants available LAYOUT MODIFIERS: - .img-ratio (static image, absolute content) - .page-banner (full viewport height with max-height) - .shift-content-down (adds top margin to content on desktop) - .custom-bonds-title (custom title font size) HEIGHT MODIFIERS: - .h-xs (200px) - .h-sm (300px) - .h-md (530px) - .h-lg (600px) - sm-/md-/lg- prefixed variants available ======================================== */ position: relative; --text-align: start; --buttons-align: start; --container-inline-margin: 0; --container-max-width: max(700px, 50%); --content-position: static; --img-position: absolute; --content-vertical-align: center; } .fullbleed-banner-section.center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .fullbleed-banner-section.align-start { --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .fullbleed-banner-section.align-end { --text-align: start; --buttons-align: start; --container-inline-margin: auto 0; } .fullbleed-banner-section.no-max-width { --container-max-width: unset; } .fullbleed-banner-section.max-w-xs { --container-max-width: 200px; } .fullbleed-banner-section.max-w-sm { --container-max-width: 350px; } .fullbleed-banner-section.max-w-md { --container-max-width: 500px; } .fullbleed-banner-section.max-w-lg { --container-max-width: 650px; } .fullbleed-banner-section.h-xs { --banner-height: 200px; } .fullbleed-banner-section.h-sm { --banner-height: 300px; } .fullbleed-banner-section.h-md { --banner-height: 530px; } .fullbleed-banner-section.h-lg { --banner-height: 600px; } .fullbleed-banner-section.content-top { --content-vertical-align: flex-start; } .fullbleed-banner-section.content-center { --content-vertical-align: center; } .fullbleed-banner-section.content-bottom { --content-vertical-align: flex-end; } @media (max-width: 568px) { .fullbleed-banner-section.sm-center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .fullbleed-banner-section.sm-align-start { --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .fullbleed-banner-section.sm-align-end { --text-align: start; --buttons-align: start; --container-inline-margin: auto 0; } .fullbleed-banner-section.sm-no-max-width { --container-max-width: unset; } .fullbleed-banner-section.sm-max-w-xs { --container-max-width: 200px; } .fullbleed-banner-section.sm-max-w-sm { --container-max-width: 350px; } .fullbleed-banner-section.sm-max-w-md { --container-max-width: 500px; } .fullbleed-banner-section.sm-max-w-lg { --container-max-width: 650px; } .fullbleed-banner-section.sm-h-xs { --banner-height: 200px; } .fullbleed-banner-section.sm-h-sm { --banner-height: 300px; } .fullbleed-banner-section.sm-h-md { --banner-height: 530px; } .fullbleed-banner-section.sm-h-lg { --banner-height: 600px; } .fullbleed-banner-section.sm-content-top { --content-vertical-align: flex-start; } .fullbleed-banner-section.sm-content-center { --content-vertical-align: center; } .fullbleed-banner-section.sm-content-bottom { --content-vertical-align: flex-end; } } @media (max-width: 768px) { .fullbleed-banner-section.md-center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .fullbleed-banner-section.md-align-start { --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .fullbleed-banner-section.md-align-end { --text-align: start; --buttons-align: start; --container-inline-margin: auto 0; } .fullbleed-banner-section.md-no-max-width { --container-max-width: unset; } .fullbleed-banner-section.md-max-w-xs { --container-max-width: 200px; } .fullbleed-banner-section.md-max-w-sm { --container-max-width: 350px; } .fullbleed-banner-section.md-max-w-md { --container-max-width: 500px; } .fullbleed-banner-section.md-max-w-lg { --container-max-width: 650px; } .fullbleed-banner-section.md-h-xs { --banner-height: 200px; } .fullbleed-banner-section.md-h-sm { --banner-height: 300px; } .fullbleed-banner-section.md-h-md { --banner-height: 530px; } .fullbleed-banner-section.md-h-lg { --banner-height: 600px; } .fullbleed-banner-section.md-content-top { --content-vertical-align: flex-start; } .fullbleed-banner-section.md-content-center { --content-vertical-align: center; } .fullbleed-banner-section.md-content-bottom { --content-vertical-align: flex-end; } } @media (max-width: 992px) { .fullbleed-banner-section.lg-center { --text-align: center; --buttons-align: center; --container-inline-margin: auto; } .fullbleed-banner-section.lg-align-start { --text-align: start; --buttons-align: start; --container-inline-margin: 0; } .fullbleed-banner-section.lg-align-end { --text-align: start; --buttons-align: start; --container-inline-margin: auto 0; } .fullbleed-banner-section.lg-no-max-width { --container-max-width: unset; } .fullbleed-banner-section.lg-max-w-xs { --container-max-width: 200px; } .fullbleed-banner-section.lg-max-w-sm { --container-max-width: 350px; } .fullbleed-banner-section.lg-max-w-md { --container-max-width: 500px; } .fullbleed-banner-section.lg-max-w-lg { --container-max-width: 650px; } .fullbleed-banner-section.lg-h-xs { --banner-height: 200px; } .fullbleed-banner-section.lg-h-sm { --banner-height: 300px; } .fullbleed-banner-section.lg-h-md { --banner-height: 530px; } .fullbleed-banner-section.lg-h-lg { --banner-height: 600px; } .fullbleed-banner-section.lg-content-top { --content-vertical-align: flex-start; } .fullbleed-banner-section.lg-content-center { --content-vertical-align: center; } .fullbleed-banner-section.lg-content-bottom { --content-vertical-align: flex-end; } } .fullbleed-banner-section.img-ratio { --img-position: static; --content-position: absolute; } .fullbleed-banner-section.img-ratio .content-container { inset: 0; height: 100%; display: flex; align-items: var(--content-vertical-align); } .fullbleed-banner-section.page-banner { --banner-height: 530px; --container-max-width: 500px; height: 100vh; max-height: var(--banner-height); display: flex; align-items: var(--content-vertical-align); } @media (max-width: 992px) { .fullbleed-banner-section.page-banner { --text-align: center; --buttons-align: center; } } .fullbleed-banner-section.page-banner.h-xs { --banner-height: 200px; } .fullbleed-banner-section.page-banner.h-sm { --banner-height: 300px; } .fullbleed-banner-section.page-banner.h-md { --banner-height: 530px; } .fullbleed-banner-section.page-banner.h-lg { --banner-height: 600px; } .fullbleed-banner-section.page-banner.h-xl { --banner-height: 800px; } .fullbleed-banner-section.remove-title .title { display: none !important; } .fullbleed-banner-section .bg-img { position: var(--img-position); } @media (min-width: 992px) { .fullbleed-banner-section.shift-content-down .banner-content { margin-top: 10vw; } } .fullbleed-banner-section.custom-bonds-title .title { font-size: 28px !important; } .fullbleed-banner-section .content-container { position: var(--content-position); width: 100%; } .fullbleed-banner-section .content-container .container, .fullbleed-banner-section .content-container .container-fluid { position: relative; width: 100%; } @media (max-width: 992px) { .fullbleed-banner-section.divide-on-mobile { display: flex; flex-direction: column; } .fullbleed-banner-section.divide-on-mobile.reverse-division { flex-direction: column-reverse; } .fullbleed-banner-section.divide-on-mobile .content-container { position: relative; } .fullbleed-banner-section.divide-on-mobile .content-container .titles-container { font-size: 16px !important; } .fullbleed-banner-section.divide-on-mobile .content-container .titles-container h2 { font-size: 30px !important; } .fullbleed-banner-section.divide-on-mobile.electric-purple .content-container { background-color: #0E0546; } } .fullbleed-banner-section.force-arabic-content-left .content-container .banner-content { margin-right: auto !important; } .fullbleed-banner-section.force-arabic-content-left.align-end .content-container .banner-content { margin-left: auto !important; margin-right: 0 !important; } .fullbleed-banner-section.news-electric-purple .description-lg p { font-size: 30px; max-width: 370px; font-weight: 500; padding-block: 15px; } @media (max-width: 992px) { .fullbleed-banner-section.news-electric-purple .description-lg { display: flex; flex-direction: column; align-items: center; } .fullbleed-banner-section.news-electric-purple .description-lg p { font-size: 20px; max-width: 250px; padding-top: 15px; padding-bottom: 10px; } .fullbleed-banner-section.news-electric-purple .description-lg img { max-width: 250px; margin-inline: auto; } } .fullbleed-banner-section .banner-content { max-width: var(--container-max-width); text-align: var(--text-align); margin-inline: var(--container-inline-margin); } .fullbleed-banner-section .banner-content .titles-container { max-width: var(--container-max-width); } .fullbleed-banner-section .banner-content p { max-width: 500px; } .fullbleed-banner-section .banner-content .buttons-container { justify-content: var(--buttons-align); } .centered-block-with-note-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== STRUCTURE: - .centered-block-with-note-section - .centered-container (max-width: 900px, centered) - .titles-container (spacing: 30px) ======================================== */ } .centered-block-with-note-section .centered-container { max-width: 900px; margin-inline: auto; } .centered-block-with-note-section .centered-container .titles-container { --spacing: 30px; } .two-blocks-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== ALIGNMENT MODIFIERS: - .center (vertically centers blocks) - .center-inside (centers content inside non-image columns) IMAGE MODIFIERS: - .no-img-aspect-ratio (removes aspect ratio, auto height) - .fixed-img-height (sets aspect ratio to 567/340) ======================================== */ --blocks-vertical-align: unset; --image-aspect-ratio: 1; } .two-blocks-section.center, .two-blocks-section .center { --blocks-vertical-align: center; } .two-blocks-section.center-inside .col:not(:has(.img-container)), .two-blocks-section .center-inside .col:not(:has(.img-container)) { display: flex; align-items: center; } .two-blocks-section.no-img-aspect-ratio, .two-blocks-section .no-img-aspect-ratio { --image-aspect-ratio: unset; } .two-blocks-section.no-img-aspect-ratio .img-container, .two-blocks-section.no-img-aspect-ratio .video-container, .two-blocks-section .no-img-aspect-ratio .img-container, .two-blocks-section .no-img-aspect-ratio .video-container { min-height: auto !important; height: auto !important; } .two-blocks-section.no-img-aspect-ratio .img-container img, .two-blocks-section.no-img-aspect-ratio .img-container video, .two-blocks-section.no-img-aspect-ratio .video-container img, .two-blocks-section.no-img-aspect-ratio .video-container video, .two-blocks-section .no-img-aspect-ratio .img-container img, .two-blocks-section .no-img-aspect-ratio .img-container video, .two-blocks-section .no-img-aspect-ratio .video-container img, .two-blocks-section .no-img-aspect-ratio .video-container video { height: auto; } .two-blocks-section.fixed-img-height, .two-blocks-section .fixed-img-height { --image-aspect-ratio: 567 / 340; } .two-blocks-section.fixed-img-height .img-container, .two-blocks-section.fixed-img-height .video-container, .two-blocks-section .fixed-img-height .img-container, .two-blocks-section .fixed-img-height .video-container { min-height: unset !important; aspect-ratio: var(--image-aspect-ratio) !important; } .two-blocks-section.electric-purple-swiper .swiper-two-blocks { border-radius: 20px !important; } .two-blocks-section.cigarrets-vs-iqos-home-component .block-container .img-container img { object-fit: contain; } .two-blocks-section.checklist-body .vertical-video { aspect-ratio: 9/16 !important; } .two-blocks-section.checklist-body .body-container ul { list-style: none; padding-left: 0; } .two-blocks-section.checklist-body .body-container ul li { position: relative; padding-left: 28px; } .two-blocks-section.checklist-body .body-container ul li:not(:last-child) { margin-bottom: 12px; } .two-blocks-section.checklist-body .body-container ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #00d1d2; font-weight: bold; } @media (max-width: 992px) { .two-blocks-section .container { padding-inline: 0; } .two-blocks-section .container > .titles-container { padding-inline: var(--container-gutter-x); } .two-blocks-section .swiper-nav { padding-inline: var(--container-gutter-x); } .two-blocks-section .swiper-nav button { background-color: white; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; } .two-blocks-section .swiper-nav button:hover { background-color: #00d1d2; } } .two-blocks-section .block-container { --temp-direction: var(--container-flex-direction); --gap: 0px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .two-blocks-section .block-container:where(ul, ol) { margin-bottom: 0; } .two-blocks-section .block-container > .col, .two-blocks-section .block-container > .col:is(:first-child, :last-child), .two-blocks-section .block-container > .listingItemDIV { flex: unset; width: var(--col-width); } .two-blocks-section .block-container { flex-direction: var(--temp-direction); align-items: var(--blocks-vertical-align); position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); --section-pt: 0; } .two-blocks-section .block-container.margin-bottom { padding-bottom: 0; margin-bottom: var(--section-pb); } .two-blocks-section .block-container.span-bold .block-info .body-container span { display: block; font-weight: bold; } .two-blocks-section .block-container.margin-top { padding-top: 0; margin-top: var(--section-pt); } @media (min-width: 992px) { .two-blocks-section .block-container:nth-child(odd) { --temp-direction: var(--container-flex-direction); } .two-blocks-section .block-container:nth-child(even) { --temp-direction: var(--container-flex-direction-inverse); } } .two-blocks-section .block-container:last-child { --section-pb: 0; } @media (max-width: 992px) { .two-blocks-section .block-container { --gap: 0px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .two-blocks-section .block-container:where(ul, ol) { margin-bottom: 0; } .two-blocks-section .block-container > .col, .two-blocks-section .block-container > .col:is(:first-child, :last-child), .two-blocks-section .block-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .two-blocks-section .block-container .img-container, .two-blocks-section .block-container .video-container { display: block; text-decoration: none; width: 100%; aspect-ratio: var(--image-aspect-ratio); min-height: 100%; } .two-blocks-section .block-container .img-container img, .two-blocks-section .block-container .video-container img { width: 100%; height: 100%; object-fit: cover; } .two-blocks-section .block-container .double-img-container { position: relative; } @media (max-width: 992px) { .two-blocks-section .block-container .double-img-container { padding-inline: var(--container-gutter-x); } } .two-blocks-section .block-container .double-img-container .img-container { min-height: unset; } .two-blocks-section .block-container .double-img-container .img-container:first-child { width: 90%; aspect-ratio: 1; } .two-blocks-section .block-container .double-img-container .img-container:last-child { position: absolute; top: 0; inset-inline-end: 0; width: 70%; aspect-ratio: 1.5; height: unset; translate: 0 -30%; } @media (max-width: 992px) { .two-blocks-section .block-container .double-img-container .img-container:last-child { inset-inline-end: var(--container-gutter-x); } } .two-blocks-section .block-container .block-info { padding: 40px; } @media (max-width: 992px) { .two-blocks-section .block-container .block-info { padding-inline: var(--container-gutter-x); } .two-blocks-section .block-container .block-info .titles-container { padding-inline: 0; } } .two-blocks-section .block-container .block-info .body-container { --spacing: 20px; } .two-blocks-section .block-container .block-info .body-container > *:not(:last-child) { margin-bottom: var(--spacing); } .two-blocks-section .block-container .block-text-container { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 90px; } .two-blocks-section .block-container .block-text-container h3 { font-size: clamp(30px, 22.2591743119px + 1.7201834862vw, 45px); font-weight: 600; } .two-blocks-section .block-container .block-text-container h3 span { display: block; font-size: clamp(75px, 54.3577981651px + 4.5871559633vw, 115px); } .two-blocks-section .block-container .col:has(> .block-text-container) { min-height: 100%; } .two-blocks-section .block-container .arrow-links-list li { margin-bottom: 32px; } .two-blocks-section .block-container .arrow-links-list li .button-arrow { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .two-blocks-section .block-container .arrow-links-list li .button-arrow:empty { display: none; } .two-blocks-section .block-container .arrow-links-list li .button-arrow p { margin-bottom: 16px; } .two-blocks-section .block-container .arrow-links-list li .button-arrow p:last-child { margin-bottom: 0; } .two-blocks-section .block-container .arrow-links-list li .button-arrow ul, .two-blocks-section .block-container .arrow-links-list li .button-arrow ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .two-blocks-section .block-container .arrow-links-list li .button-arrow li { list-style: disc; } .two-blocks-section .block-container .arrow-links-list li .button-arrow { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); line-height: 1.5; font-weight: 600; text-decoration: underline; margin-bottom: 8px; } .generic-info-split-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== IMAGE OVERFLOW MODIFIERS: - .image-overflow-down (translates image down by 2x section padding) - .image-overflow-up (translates image up by 2x section padding) ALIGNMENT MODIFIERS: - .align-start (aligns content to start) IMAGE LAYOUT MODIFIERS: - .image-fluid (removes padding, extends image to container edge) - .image-full-height (removes max-height on fluid images) - .no-img-aspect-ratio (removes aspect ratio, auto height) SPACING MODIFIERS: - .small-gap (reduces gap to 40px from default 80px) MOBILE MODIFIERS: - .container-mobile (keeps container padding on mobile) ======================================== */ --image-y-translation: 0; --image-aspect-ratio: 1; --image-container-height: 100%; --alignment: center; --generic-section-gap: 80px; } .generic-info-split-section .generic-block { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); padding-block: 0; margin-bottom: var(--section-pb); } .generic-info-split-section .generic-block:nth-child(even) .generic-info-split-container { flex-direction: var(--container-flex-direction-inverse); } .generic-info-split-section .generic-block:last-child { margin-bottom: 0; } .generic-info-split-section .small-gap { --generic-section-gap: 40px; } .generic-info-split-section.image-overflow-down { --image-y-translation: calc(var(--section-pb, 100px) * 2); } .generic-info-split-section.image-overflow-up { --image-y-translation: calc(var(--section-pb, 100px) * -2); } @media (max-width: 992px) { .generic-info-split-section.image-overflow-down, .generic-info-split-section.image-overflow-up { padding-block: 0; } .generic-info-split-section.image-overflow-down .background-colored, .generic-info-split-section.image-overflow-up .background-colored { padding-block: 0; } } .generic-info-split-section.align-start { --alignment: start; } @media (min-width: 992px) { .generic-info-split-section.image-fluid { --image-shift: calc(calc((100vw - var(--container-width)) / 2) * -1); } .generic-info-split-section.image-fluid [class^=section-container] { --section-pt: 0; --section-pb: 0; } .generic-info-split-section.image-fluid .info-wrapper { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } .generic-info-split-section.image-fluid .col:has(> .img-container) { margin-inline-start: var(--image-shift); } .generic-info-split-section.image-fluid .col:has(> .img-container) .img-container { max-height: 600px; min-width: calc(100% + calc((100vw - var(--container-width)) / 2)); } } @media (min-width: 992px) and (max-width: 992px) { .generic-info-split-section.image-fluid .col:has(> .img-container) .img-container { min-width: unset; } } @media (min-width: 992px) { .generic-info-split-section.image-fluid .col:has(> .img-container) .img-container img { scale: unset !important; } .generic-info-split-section.image-fluid.image-full-height .col .img-container { max-height: unset; } } .generic-info-split-section.no-img-aspect-ratio { --image-aspect-ratio: unset; --image-container-height: auto; } @media (max-width: 992px) { .generic-info-split-section:not(.container-mobile) > .container { padding-inline: 0; } .generic-info-split-section .container { padding-inline: 0; } .generic-info-split-section .section-container:not(.info-wrapper) { padding-block: 0; } } .generic-info-split-section .generic-info-split-container { --gap: var(--generic-section-gap); --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .generic-info-split-section .generic-info-split-container:where(ul, ol) { margin-bottom: 0; } .generic-info-split-section .generic-info-split-container > .col, .generic-info-split-section .generic-info-split-container > .col:is(:first-child, :last-child), .generic-info-split-section .generic-info-split-container > .listingItemDIV { flex: unset; width: var(--col-width); } .generic-info-split-section .generic-info-split-container { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); flex-direction: var(--container-flex-direction); justify-content: space-between; --section-pt: 0; } .generic-info-split-section .generic-info-split-container:last-child { --section-pb: 0; } @media (max-width: 992px) { .generic-info-split-section .generic-info-split-container { --gap: 0px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .generic-info-split-section .generic-info-split-container:where(ul, ol) { margin-bottom: 0; } .generic-info-split-section .generic-info-split-container > .col, .generic-info-split-section .generic-info-split-container > .col:is(:first-child, :last-child), .generic-info-split-section .generic-info-split-container > .listingItemDIV { flex: unset; width: var(--col-width); } .generic-info-split-section .generic-info-split-container .info-wrapper { position: relative; z-index: 2; --section-pt: calc(100px * 0.5); --section-pb: calc(100px * 0.5); padding-top: var(--section-pt); padding-bottom: var(--section-pb); padding-inline: var(--container-gutter-x); } } .generic-info-split-section .generic-info-split-container .col { height: auto; display: flex; align-items: var(--alignment); } .generic-info-split-section .generic-info-split-container .img-container { aspect-ratio: var(--image-aspect-ratio); height: var(--image-container-height); } .generic-info-split-section .generic-info-split-container :where(.col:has(> .img-container)) { --max-height: calc(100% + abs(var(--image-y-translation) / 2)); max-height: var(--max-height); height: var(--image-container-height); } @media (min-width: 992px) { .generic-info-split-section .generic-info-split-container :where(.col:has(> .img-container)) { margin-bottom: calc(-1 * var(--image-y-translation)); } } .generic-info-split-section .generic-info-split-container .info-wrapper img { margin-top: 20px; } .generic-info-split-section .generic-info-split-container .info-wrapper h3, .generic-info-split-section .generic-info-split-container .info-wrapper h4 { margin-bottom: 20px; } .two-images-fullbleed-section .two-images-fullbleed-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .two-images-fullbleed-section .two-images-fullbleed-container:where(ul, ol) { margin-bottom: 0; } .two-images-fullbleed-section .two-images-fullbleed-container > .col, .two-images-fullbleed-section .two-images-fullbleed-container > .col:is(:first-child, :last-child), .two-images-fullbleed-section .two-images-fullbleed-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .two-images-fullbleed-section .two-images-fullbleed-container { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .two-images-fullbleed-section .two-images-fullbleed-container:where(ul, ol) { margin-bottom: 0; } .two-images-fullbleed-section .two-images-fullbleed-container > .col, .two-images-fullbleed-section .two-images-fullbleed-container > .col:is(:first-child, :last-child), .two-images-fullbleed-section .two-images-fullbleed-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .image-only-section { /* ======================================== GENERATED CLASSES REFERENCE ======================================== HEIGHT MODIFIERS: - .h-xs (200px) - .h-sm (300px) - .h-md (530px) - .h-lg (600px) Default: auto height (400px on mobile) ======================================== */ --banner-height: auto; } .image-only-section.h-xs { --banner-height: 200px; } .image-only-section.h-sm { --banner-height: 300px; } .image-only-section.h-md { --banner-height: 530px; } .image-only-section.h-lg { --banner-height: 600px; } .image-only-section .img-container { height: var(--banner-height); } @media (max-width: 992px) { .image-only-section:not([class^=h-]) .img-container { height: 400px; } } .video-banner-section .video-container { position: relative; aspect-ratio: 1920/1000; } .video-banner-section.video-with-listing .video-container { padding-bottom: 50px; } .video-banner-section.video-with-listing .item-wrapper { position: relative; display: inline-block; } .video-banner-section.video-with-listing .item-wrapper .description { font-size: clamp(14px, 12.9678899083px + 0.2293577982vw, 16px); } .video-banner-section.video-with-listing .item-wrapper .img-container { max-width: 80px; height: auto; } .video-banner-section.video-with-listing .item-wrapper .img-container img { height: auto; width: 100%; object-fit: contain; } @media (max-width: 992px) { .compare-section > .container { padding-inline: 0; } } .compare-section .compare-titles-container { position: relative; padding-top: 40px; } .compare-section .compare-titles-container::before { content: ""; background-color: #f6f4f0; position: absolute; inset: 0; z-index: -1; } .compare-section .compare-devices-container .swiper-nav { top: 23%; } .compare-section .compare-devices-container .card-item { height: 100%; } .compare-section .compare-devices-container .card-item .img-container { position: relative; } .compare-section .compare-devices-container .card-item .img-container::before { content: ""; background-color: #f6f4f0; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 32px); z-index: -1; } .compare-section .compare-devices-container .card-item .card-info { padding-inline: 50px; } .compare-section .compare-devices-container .card-item .card-title { font-size: clamp(22px, 20.9678899083px + 0.2293577982vw, 24px); margin-block: 10px 20px; font-weight: 600; } .compare-section .compare-devices-container .card-item .price { font-size: clamp(23px, 21.9678899083px + 0.2293577982vw, 25px); margin-bottom: 30px; font-weight: 600; } .compare-section .compare-devices-container .card-item .features li { --icon-size: 18px; position: relative; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .compare-section .compare-devices-container .card-item .features li:empty { display: none; } .compare-section .compare-devices-container .card-item .features li p { margin-bottom: 16px; } .compare-section .compare-devices-container .card-item .features li p:last-child { margin-bottom: 0; } .compare-section .compare-devices-container .card-item .features li ul, .compare-section .compare-devices-container .card-item .features li ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .compare-section .compare-devices-container .card-item .features li li { list-style: disc; } .compare-section .compare-devices-container .card-item .features li { font-size: clamp(17px, 16.4839449541px + 0.1146788991vw, 18px); line-height: 1.5; display: flex; gap: 16px; margin-bottom: 10px; } .compare-section .compare-devices-container .card-item .features li::before { content: ""; mask-image: url(/images/icons/round-checkmark.svg?v=dPulEv50-0ADlyQ7GNQ_HG64pJo); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/round-checkmark.svg?v=dPulEv50-0ADlyQ7GNQ_HG64pJo); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-current-color); width: var(--icon-size); aspect-ratio: 1; z-index: 2; } .compare-section .compare-devices-container .card-item .features li::after { content: ""; position: absolute; top: 5px; inset-inline-start: 2px; width: calc(var(--icon-size) - 3px); aspect-ratio: 1; border-radius: 50%; background-color: #34303d; z-index: 1; } .compare-section .compare-devices-container .card-item .features li.negative-bullet::before { mask-image: url(/images/icons/round-negative.svg?v=utauZnCGnyGnXmOggf4qeAzTs5Q); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/round-negative.svg?v=utauZnCGnyGnXmOggf4qeAzTs5Q); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #f6f4f0; } .compare-section .compare-devices-container .card-item .features li:last-child { margin-bottom: 0; } .compare-section .compare-devices-container .card-item [class^=button] { margin-top: 16px; } .footer-support-section.margin-under-icons .icon-img { margin-bottom: 16px; } .footer-support-section.justify-start .box { text-wrap: pretty; text-align: start !important; } .footer-support-section.justify-start .box .icon-img { margin-inline: unset !important; } .footer-support-section.line-wrap-no-wrap .box { max-width: unset !important; } .footer-support-section.justify-all-center .footer-support-container { justify-content: center; } .footer-support-section.four-elements .footer-support-container { --gap: 32px; --col-width: calc( (100% / 4) - (var(--gap) * (4 - 1) / 4) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section.four-elements .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section.four-elements .footer-support-container > .col, .footer-support-section.four-elements .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section.four-elements .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 768px) { .footer-support-section.four-elements .footer-support-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section.four-elements .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section.four-elements .footer-support-container > .col, .footer-support-section.four-elements .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section.four-elements .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .footer-support-section.four-elements .footer-support-container { --gap: 50px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section.four-elements .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section.four-elements .footer-support-container > .col, .footer-support-section.four-elements .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section.four-elements .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .footer-support-section .footer-support-container { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section .footer-support-container > .col, .footer-support-section .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 768px) { .footer-support-section .footer-support-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section .footer-support-container > .col, .footer-support-section .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .footer-support-section .footer-support-container { --gap: 50px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .footer-support-section .footer-support-container:where(ul, ol) { margin-bottom: 0; } .footer-support-section .footer-support-container > .col, .footer-support-section .footer-support-container > .col:is(:first-child, :last-child), .footer-support-section .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .footer-support-section .footer-support-container .box { max-width: 300px; margin-inline: auto; text-wrap: balance; text-align: center; } .footer-support-section .footer-support-container .box > *:last-child { margin-bottom: 0; } .footer-support-section .footer-support-container .box ul, .footer-support-section .footer-support-container .box ol, .footer-support-section .footer-support-container .box p:last-child { margin-bottom: 0; } .footer-support-section .footer-support-container .box li { list-style: none; } .footer-support-section .footer-support-container .box .icon-img { display: flex; width: 64px; aspect-ratio: 1; margin-inline: auto; } .footer-support-section .footer-support-container .box .icon-img img { height: 100%; object-fit: contain; width: 100%; } .footer-support-section .footer-support-container .box .number-container { width: 80px; aspect-ratio: 1; border: solid 2px var(--default-text-color); border-radius: 50%; margin-bottom: 20px; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1; display: flex; align-items: center; justify-content: center; margin-inline: auto; } .footer-support-section .footer-support-container .box .title p { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); font-weight: 600; margin-bottom: 20px; } .discover-flavours-section .discover-grid { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .discover-flavours-section .discover-grid:where(ul, ol) { margin-bottom: 0; } .discover-flavours-section .discover-grid > .col, .discover-flavours-section .discover-grid > .col:is(:first-child, :last-child), .discover-flavours-section .discover-grid > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 1200px) { .discover-flavours-section .discover-grid { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .discover-flavours-section .discover-grid:where(ul, ol) { margin-bottom: 0; } .discover-flavours-section .discover-grid > .col, .discover-flavours-section .discover-grid > .col:is(:first-child, :last-child), .discover-flavours-section .discover-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 768px) { .discover-flavours-section .discover-grid { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .discover-flavours-section .discover-grid:where(ul, ol) { margin-bottom: 0; } .discover-flavours-section .discover-grid > .col, .discover-flavours-section .discover-grid > .col:is(:first-child, :last-child), .discover-flavours-section .discover-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } .discover-flavours-section.discoverFlaveorsHDelia .col:first-child .card * { color: white; } .discover-flavours-section .card-item { --current-text-color: white; --current-text-color-inverse: #34303d; position: relative; width: 100%; height: 550px; background-size: cover; background-position: center; overflow: hidden; display: flex; align-items: flex-end; } .discover-flavours-section .card-item .content-container { position: relative; z-index: 2; padding: 30px; color: var(--current-text-color); } .discover-flavours-section .card-item .content-container .content-wrapper { margin-bottom: 16px; color: var(--current-text-color); } .discover-flavours-section .card-item .content-container .content-wrapper h3 { font-size: clamp(22px, 19.9357798165px + 0.4587155963vw, 26px); font-weight: 600; line-height: 1.2; margin-bottom: 15px; text-align: start; color: var(--current-text-color); } .discover-flavours-section .card-item .button-primary-filled { --color: var(--current-text-color-inverse); --background-color: var(--current-text-color); --border-color: var(--current-text-color); --hover-color: var(--current-text-color); --hover-background-color: var(--current-text-color-inverse); --hover-border-color: var(--current-text-color-inverse); } .discover-flavours-section .card-item.zyn-colors { --current-text-color: #00166f; --current-text-color-inverse: white; } .news-grid-section .news-grid-container { display: flex; flex-wrap: wrap; --gap: 32px; gap: var(--gap); } .news-grid-section .news-grid-container:where(ul, ol) { margin-bottom: 0; } .news-grid-section .news-grid-container > .col, .news-grid-section .news-grid-container > .listingItemDIV { flex: unset; } .news-grid-section .news-grid-container > .col:where(:nth-child(odd)), .news-grid-section .news-grid-container > .listingItemDIV:where(:nth-child(odd)) { width: calc(33% - var(--gap) / 2); } .news-grid-section .news-grid-container > .col:where(:nth-child(even)), .news-grid-section .news-grid-container > .listingItemDIV:where(:nth-child(even)) { width: calc(66% - var(--gap) / 2); } @media (max-width: 992px) { .news-grid-section .news-grid-container { --gap: 32px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-grid-section .news-grid-container:where(ul, ol) { margin-bottom: 0; } .news-grid-section .news-grid-container > .col, .news-grid-section .news-grid-container > .col:is(:first-child, :last-child), .news-grid-section .news-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .news-grid-section .news-grid { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-grid-section .news-grid:where(ul, ol) { margin-bottom: 0; } .news-grid-section .news-grid > .col, .news-grid-section .news-grid > .col:is(:first-child, :last-child), .news-grid-section .news-grid > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 576px) { .news-grid-section .news-grid { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-grid-section .news-grid:where(ul, ol) { margin-bottom: 0; } .news-grid-section .news-grid > .col, .news-grid-section .news-grid > .col:is(:first-child, :last-child), .news-grid-section .news-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } .news-grid-section .news-card { --spacing: 20px; display: block; height: 100%; background-color: white; padding: 24px; color: var(--default-text-color); transition: all 0.6s ease; } .news-grid-section .news-card:hover { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .news-grid-section .news-card .news-title { font-size: clamp(21px, 19.4518348624px + 0.3440366972vw, 24px); font-weight: 600; line-height: 1.3; margin-bottom: var(--spacing); } .numbered-image-section { --section-list-color: #ffc600; } .numbered-image-section .numbered-image-container { --gap: 100px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .numbered-image-section .numbered-image-container:where(ul, ol) { margin-bottom: 0; } .numbered-image-section .numbered-image-container > .col, .numbered-image-section .numbered-image-container > .col:is(:first-child, :last-child), .numbered-image-section .numbered-image-container > .listingItemDIV { flex: unset; width: var(--col-width); } .numbered-image-section .numbered-image-container { align-items: center; } @media (max-width: 992px) { .numbered-image-section .numbered-image-container { --gap: 40px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .numbered-image-section .numbered-image-container:where(ul, ol) { margin-bottom: 0; } .numbered-image-section .numbered-image-container > .col, .numbered-image-section .numbered-image-container > .col:is(:first-child, :last-child), .numbered-image-section .numbered-image-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .numbered-image-section .numbered-image-container .numbers-list { --list-color: var(--section-list-color, #ffc600); max-width: 500px; counter-reset: list-counter; } .numbered-image-section .numbered-image-container .numbers-list li { --bullet-size: 36px; position: relative; counter-increment: list-counter; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .numbered-image-section .numbered-image-container .numbers-list li:empty { display: none; } .numbered-image-section .numbered-image-container .numbers-list li p { margin-bottom: 16px; } .numbered-image-section .numbered-image-container .numbers-list li p:last-child { margin-bottom: 0; } .numbered-image-section .numbered-image-container .numbers-list li ul, .numbered-image-section .numbered-image-container .numbers-list li ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .numbered-image-section .numbered-image-container .numbers-list li li { list-style: disc; } .numbered-image-section .numbered-image-container .numbers-list li { margin-bottom: 40px; padding-inline-start: calc(var(--bullet-size) + 16px); } .numbered-image-section .numbered-image-container .numbers-list li:last-child { margin-bottom: 0; } .numbered-image-section .numbered-image-container .numbers-list li::before { content: counter(list-counter); position: absolute; top: 0; inset-inline-start: 0; display: flex; align-items: center; justify-content: center; min-width: var(--bullet-size); max-width: var(--bullet-size); aspect-ratio: 1; background-color: var(--list-color); line-height: 1; color: var(--default-text-color); border-radius: 50%; } .numbered-image-section .numbered-image-container .numbers-list li h3 { font-size: clamp(23px, 20.9357798165px + 0.4587155963vw, 27px); font-weight: 600; margin-bottom: 5px; } footer { background-color: #34303d; padding-top: 60px; } footer .topFooter { padding-bottom: 35px; } footer .topFooter .container { display: flex; flex-wrap: wrap; } footer .topFooter .row { margin: 0; padding: 0; gap: 20px; } footer .topFooter .row .col-md-3 { padding: 0; } footer .topFooter .simpleList .simpleList { padding-bottom: 25px; } footer .topFooter .simpleList .simpleListTitle { font-size: 14px; color: rgba(255, 253, 251, 0.5); font-weight: normal; letter-spacing: 0.4px; margin-bottom: 25px; } footer .topFooter .simpleList .simpleListTitle a { font-size: 14px; color: rgba(255, 253, 251, 0.5); font-weight: normal; letter-spacing: 0.4px; margin-bottom: 25px; } footer .topFooter .simpleList li { margin-bottom: 25px; } footer .topFooter .simpleList li:last-child { margin-bottom: 0; } footer .topFooter .simpleList li a { color: #fffdfb; font-size: 16px; font-weight: normal; transition: all 0.6s ease; } footer .topFooter .simpleList li a:hover { color: #1cd9c5; } footer .topFooter .topFooterScdWrapper { display: flex; flex-direction: column; align-items: flex-end; } footer .topFooter .topFooterScdWrapper .endSection { min-width: 115px; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper { padding-bottom: 15px; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper h3 { font-size: 14px; color: rgba(255, 253, 251, 0.5); font-weight: normal; letter-spacing: 0.4px; margin-bottom: 25px; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li { margin-bottom: 23px; position: relative; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li:last-child { margin-bottom: 0; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a::before { width: 25px; height: 25px; background-position: center center; background-repeat: no-repeat; background-size: contain; filter: brightness(0) invert(1); content: ""; display: none; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a { display: flex; align-items: center; gap: 8px; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a span { color: #fffdfb; font-size: 16px; font-weight: normal; transition: all 0.6s ease; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a:hover span { color: #1cd9c5; } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a .footerSocialIcon { width: 25px; aspect-ratio: 1; filter: brightness(0) invert(1); } footer .topFooter .topFooterScdWrapper .endSection .followWrapper ul li a .footerSocialIcon img { width: 100%; height: 100%; object-fit: contain; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector { position: relative; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector h3 { font-size: 14px; color: rgba(255, 253, 251, 0.5); font-weight: normal; letter-spacing: 0.4px; margin-bottom: 25px; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .selected-language { color: #fffdfb; font-size: 16px; font-weight: normal; transition: all 0.6s ease; position: relative; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .selected-language::after { content: ""; background-image: url(../../images/arrow-down.svg); width: 13px; height: 8px; background-position: center center; background-repeat: no-repeat; background-size: contain; display: block; filter: brightness(0) invert(1); transform-origin: center center; transition: all 0.6s ease; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .selected-language.open::after { transform: rotate(180deg); } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .language-options { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; background-color: white; width: 100%; border-radius: 4px; display: none; z-index: 100; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .language-options a { display: block; padding: 12px; border-bottom: 1px solid #dcdcdc; font-size: 14px; color: #34303d; transition: all 0.6s ease; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .language-options a:hover { color: #00d1d2; } footer .topFooter .topFooterScdWrapper .endSection .languageSelector .language-options a:last-child { border-bottom: none; } footer .middle-footer { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; gap: 15px; } @media (max-width: 992px) { footer .middle-footer { flex-direction: column; } } @media (max-width: 992px) { footer .middle-footer { align-items: start; } } footer .middle-footer .footer-logo { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; } footer .middle-footer .footer-logo p { color: rgba(255, 253, 251, 0.5); font-size: 12px; } @media (max-width: 992px) { footer .middle-footer .footer-logo p { color: white; font-size: 14px; } } footer .middle-footer .legal-menu { flex: 0 0 auto; max-width: 60%; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 0; } @media (max-width: 992px) { footer .middle-footer .legal-menu { max-width: unset; } } footer .middle-footer .legal-menu li a { color: rgba(255, 253, 251, 0.5); font-size: 12px; transition: all 0.6s ease; display: block; } footer .middle-footer .legal-menu li a:hover { color: white; } footer .bottomFooter { background-color: #27242d; padding: 20px 0; } footer .bottomFooter p { color: rgba(255, 253, 251, 0.5); font-size: 16px; text-align: center; margin-bottom: 0; } footer .bottomFooter p.arabicDir { font-family: tahoma; direction: rtl; } footer .bottomFooter p.englishDir { direction: ltr; } .activities-container { margin-bottom: 70px; } .activities-container h3 { font-size: 30px; font-weight: 800; margin-bottom: 35px; } .activities-container .row { align-items: center; } .activities-container .activity-row { margin-bottom: 20px; } .activities-container .activity-row:last-child { margin-bottom: 0; } .activities-container .month-wrapper { margin-bottom: 30px; } .activities-container .icon { display: block; } .activities-container .activities-wrapper { margin: 20px 50px; } .activities-container .activities-wrapper .activity-info { margin-inline-start: 20px; } .activities-container .activities-wrapper .activity-name { display: flex; justify-content: start; align-items: center; } .activities-container .activities-wrapper .activity-name .icon { border: 1px solid #c6c6c6; width: 30px; height: 30px; border-radius: 15px; padding: 4px; } .activities-container .activities-wrapper .activity-name .name { margin-inline-start: 15px; font-weight: 600; } .activities-container .activities-wrapper .activity-date .date { color: rgb(151, 151, 151); } .activities-container .activities-wrapper .activity-points .point { text-align: center; } @media (max-width: 992px) { .activities-container { margin-bottom: 50px; } .activities-container h3 { font-size: 27px; font-weight: normal; margin-bottom: 15px; } .activities-container .activities-wrapper { margin: 0; margin-top: 20px; } .activities-container .activities-wrapper .activity-name { margin-bottom: 8px; } .activities-container .activities-wrapper .activity-date { margin-bottom: 8px; } .activities-container .activities-wrapper .activity-points .point { text-align: start; } } .forever-curious-video-section .vs-page { display: flex; align-items: center; justify-content: center; padding-block: 6vh; } .forever-curious-video-section .vs-slider { position: relative; width: 100%; max-width: 960px; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7); aspect-ratio: 16/9; } .forever-curious-video-section .vs-track { display: flex; height: 100%; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .forever-curious-video-section .vs-slide { flex: 0 0 100%; position: relative; background: #000; height: 100%; } .forever-curious-video-section .vs-slide video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; cursor: pointer; } .forever-curious-video-section .vs-poster { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; transition: opacity 0.3s; } .forever-curious-video-section .vs-poster.hidden { opacity: 0; pointer-events: none; } .forever-curious-video-section .vs-poster.thumb-ready { background: none !important; } .forever-curious-video-section .vs-poster::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 0; pointer-events: none; } .forever-curious-video-section .vs-poster:hover .vs-poster-play { background: rgba(255, 255, 255, 0.28); border-color: #fff; transform: scale(1.1); } .forever-curious-video-section .vs-track .vs-slide:nth-child(1) .vs-poster { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); } .forever-curious-video-section .vs-track .vs-slide:nth-child(2) .vs-poster { background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #4a2080 100%); } .forever-curious-video-section .vs-track .vs-slide:nth-child(3) .vs-poster { background: linear-gradient(135deg, #0a1a1a 0%, #0d2e2e 50%, #0f4a4a 100%); } .forever-curious-video-section .vs-track .vs-slide:nth-child(4) .vs-poster { background: linear-gradient(135deg, #1a0f0a 0%, #2e1a0d 50%, #4a2e14 100%); } .forever-curious-video-section .vs-poster-play { position: relative; z-index: 1; width: 72px; height: 72px; background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s, border-color 0.2s; backdrop-filter: blur(4px); } .forever-curious-video-section .vs-poster-play svg { width: 30px; height: 30px; fill: #fff; } .forever-curious-video-section .vs-disclaimer { position: absolute; bottom: 44px; left: 0; right: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; text-align: center; padding: 8px 16px; z-index: 9; pointer-events: none; line-height: 1.4; } .forever-curious-video-section .vs-disclaimer:empty { display: none; } .forever-curious-video-section .vs-controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); opacity: 0; transition: opacity 0.3s; z-index: 10; } .forever-curious-video-section .vs-slide:hover .vs-controls, .forever-curious-video-section .vs-slide:focus-within .vs-controls, .forever-curious-video-section .vs-slide.paused .vs-controls { opacity: 1; } .forever-curious-video-section .vs-btn { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; } .forever-curious-video-section .vs-btn:hover { background: rgba(255, 255, 255, 0.15); } .forever-curious-video-section .vs-btn svg { width: 22px; height: 22px; fill: #fff; } .forever-curious-video-section .vs-progress { flex: 1; padding: 8px 0; margin: -8px 0; background: transparent; cursor: pointer; position: relative; touch-action: none; } .forever-curious-video-section .vs-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; transition: height 0.15s; } .forever-curious-video-section .vs-progress:hover::before { height: 6px; } .forever-curious-video-section .vs-progress:hover .vs-progress-fill { height: 6px; } .forever-curious-video-section .vs-progress-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px; background: #fff; border-radius: 2px; width: 0%; pointer-events: none; transition: height 0.15s; } .forever-curious-video-section .vs-time { color: #fff; font-size: 12px; white-space: nowrap; user-select: none; } .forever-curious-video-section .vs-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .forever-curious-video-section .vs-arrow:hover { background: rgba(0, 0, 0, 0.7); border-color: #fff; transform: translateY(-50%) scale(1.08); } .forever-curious-video-section .vs-arrow svg { width: 20px; height: 20px; fill: #fff; } .forever-curious-video-section .vs-arrow.vs-arrow-prev { left: 12px; } .forever-curious-video-section .vs-arrow.vs-arrow-next { right: 12px; } .forever-curious-video-section .vs-dots { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .forever-curious-video-section .vs-dot { display: block; padding: 0; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: background 0.2s, transform 0.2s; border: none; } .forever-curious-video-section .vs-dot.active { background: #fff; transform: scale(1.3); } .forever-curious-video-section .vs-counter { position: absolute; top: 14px; right: 16px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 13px; padding: 3px 10px; border-radius: 20px; z-index: 10; user-select: none; } .forever-curious-video-section .vs-click-feedback { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6); width: 72px; height: 72px; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; z-index: 20; } .forever-curious-video-section .vs-click-feedback svg { width: 34px; height: 34px; fill: #fff; } .forever-curious-video-section .vs-click-feedback .icon-play { transform: translateX(2px); } .forever-curious-video-section .vs-click-feedback.active { animation: vs-feedback-pop 0.5s ease-out forwards; } @keyframes vs-feedback-pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.7); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } } .forever-curious-video-section .vs-slider:fullscreen, .forever-curious-video-section .vs-slider:-webkit-full-screen, .forever-curious-video-section .vs-slider:-moz-full-screen { max-width: none; width: 100%; height: 100%; border-radius: 0; aspect-ratio: unset; } .forever-curious-video-section .vs-slider:fullscreen .vs-fullscreen-btn .icon-fs-enter, .forever-curious-video-section .vs-slider:-webkit-full-screen .vs-fullscreen-btn .icon-fs-enter, .forever-curious-video-section .vs-slider:-moz-full-screen .vs-fullscreen-btn .icon-fs-enter { display: none; } .forever-curious-video-section .vs-slider:fullscreen .vs-fullscreen-btn .icon-fs-exit, .forever-curious-video-section .vs-slider:-webkit-full-screen .vs-fullscreen-btn .icon-fs-exit, .forever-curious-video-section .vs-slider:-moz-full-screen .vs-fullscreen-btn .icon-fs-exit { display: block; } @media (max-width: 640px) { .forever-curious-video-section .vs-poster-play { width: 56px; height: 56px; } .forever-curious-video-section .vs-poster-play svg { width: 22px; height: 22px; } .forever-curious-video-section .vs-arrow { width: 36px; height: 36px; } .forever-curious-video-section .vs-arrow svg { width: 16px; height: 16px; } .forever-curious-video-section .vs-arrow.vs-arrow-prev { left: 6px; } .forever-curious-video-section .vs-arrow.vs-arrow-next { right: 6px; } .forever-curious-video-section .vs-controls { padding: 8px 10px; gap: 6px; } .forever-curious-video-section .vs-btn svg { width: 18px; height: 18px; } .forever-curious-video-section .vs-time { font-size: 11px; } .forever-curious-video-section .vs-dots { bottom: 46px; } .forever-curious-video-section .vs-counter { font-size: 11px; padding: 2px 8px; top: 8px; right: 8px; } .forever-curious-video-section .vs-disclaimer { font-size: 11px; padding: 6px 10px; } } @media (max-width: 400px) { .forever-curious-video-section .vs-arrow { width: 28px; height: 28px; border-width: 1px; } .forever-curious-video-section .vs-time { display: none; } .forever-curious-video-section .vs-dots { gap: 5px; } .forever-curious-video-section .vs-dot { width: 6px; height: 6px; } } .zyn-lead-form-section { position: relative; z-index: 2; padding: 0; background-color: #ffffff; } .zyn-lead-form-section .zyn-lead-form-wrapper { max-width: 620px; margin-inline: auto; } .zyn-lead-form-section .zyn-lead-form-title { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .zyn-lead-form-section .zyn-lead-form-title.regular { font-weight: 400; } .zyn-lead-form-section .zyn-lead-form-title { margin-bottom: 12px; color: #00A9E0; } .zyn-lead-form-section .zyn-lead-form-subtitle { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .zyn-lead-form-section .zyn-lead-form-subtitle:empty { display: none; } .zyn-lead-form-section .zyn-lead-form-subtitle p { margin-bottom: 16px; } .zyn-lead-form-section .zyn-lead-form-subtitle p:last-child { margin-bottom: 0; } .zyn-lead-form-section .zyn-lead-form-subtitle ul, .zyn-lead-form-section .zyn-lead-form-subtitle ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .zyn-lead-form-section .zyn-lead-form-subtitle li { list-style: disc; } .zyn-lead-form-section .zyn-lead-form-subtitle { color: #34303d; margin-bottom: 32px; color: #00A9E0; } .zyn-lead-form-section .zyn-lead-form-message { padding: 12px 16px; border-radius: 4px; margin-bottom: 24px; font-size: 14px; } .zyn-lead-form-section .zyn-lead-form-message--success { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; } .zyn-lead-form-section .zyn-lead-form-message--error { background-color: #fde8e8; color: #dd3333; border: 1px solid #f5a0a0; } .zyn-lead-form-section .form__row { position: relative; margin-bottom: 24px; } .zyn-lead-form-section .form__row label { position: absolute; top: 0; inset-inline-start: 10px; background-color: #ffffff; transform: translateY(-50%); z-index: 2; font-size: 12px !important; padding: 0 6px; text-transform: capitalize; font-weight: bold; } .zyn-lead-form-section .form__row .errorMessage { position: absolute; top: 100%; inset-inline-end: 0; font-size: 12px; color: #dd3333; display: block; margin: 0; } .zyn-lead-form-section .form__row input, .zyn-lead-form-section .form__row select, .zyn-lead-form-section .form__row textarea { height: 48px; padding-inline: 15px; color: #34303d; letter-spacing: 0; font-size: 16px; border: 1px solid #b8b7bb; width: 100%; border-radius: 3px; font-family: "IQOS", "IQOS AR", sans-serif; background-color: transparent; outline: none; } .zyn-lead-form-section .form__row input:focus, .zyn-lead-form-section .form__row select:focus, .zyn-lead-form-section .form__row textarea:focus { border-color: #34303d; } .zyn-lead-form-section .form__row--checkbox { margin-bottom: 16px; } .zyn-lead-form-section .form__row--checkbox input[type=checkbox] ~ label::before { content: ""; display: inline-block; width: 20px; height: 20px; border: 1px solid #b5b5b5; position: absolute; top: 3px; inset-inline-start: 0; } .zyn-lead-form-section .form__row--checkbox input[type=checkbox]:checked ~ label::after { background-color: #34303d; content: "✓"; color: #ffffff; width: 20px; height: 20px; position: absolute; top: 3px; inset-inline-start: 0; text-align: center; display: flex; justify-content: center; align-items: center; padding-bottom: 1px; } .zyn-lead-form-section .form__row--checkbox input[type=checkbox] { display: none; } .zyn-lead-form-section .form__row--checkbox label { cursor: pointer; margin-bottom: 0; padding: 0 15px; padding-inline-start: 30px; width: 100%; font-size: 16px !important; display: block; position: static; font-weight: normal !important; transform: translateY(0); } .zyn-lead-form-section .form__row--checkbox label a { color: #34303d; text-decoration: underline; transition: all 0.6s ease; } .zyn-lead-form-section .form__row--checkbox label a:hover { color: #00d1d2; } .zyn-lead-form-section .formAction { display: flex; gap: 20px; align-items: center; margin-top: 8px; margin-bottom: 30px; } .zyn-lead-form-section #zynSubmitBtn:disabled { opacity: 0.5; cursor: not-allowed; } #zynLoader { position: fixed; top: 0; inset-inline-start: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.4); z-index: 50000; } #zynLoader .loader { position: absolute; height: 60px; width: 60px; top: calc(50% - 30px); left: calc(50% - 30px); animation: rotation 1s infinite linear; border: 6px solid rgba(0, 0, 0, 0.2); border-radius: 100%; } #zynLoader .loader::before { content: ""; display: block; position: absolute; left: -6px; top: -6px; height: 60px; width: 60px; border-top: 6px solid rgba(0, 0, 0, 0.8); border-left: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid transparent; border-radius: 100%; } @media (max-width: 992px) { .summer-campaign-promo-banner { aspect-ratio: 2/4; } } .summer-campaign-promo-banner .banner-content { position: relative; direction: ltr !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .banner-content { padding-block: 24% !important; } } .summer-campaign-promo-banner .content-left { z-index: 3; } .summer-campaign-promo-banner .content-left .content-info { align-items: flex-start; text-align: start; } .summer-campaign-promo-banner .content-left .content-info > * { text-align: start !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-left .content-info { align-items: center; text-align: center; } .summer-campaign-promo-banner .content-left .content-info > * { text-align: center !important; } } .summer-campaign-promo-banner .content-left .banner-title { font-size: clamp(42px, 3vw, 54px) !important; text-align: start !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-left .banner-title { text-align: center !important; } } .summer-campaign-promo-banner .content-left .banner-subtitle { font-size: clamp(18px, 3vw, 22px) !important; text-align: start !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-left .banner-subtitle { text-align: center !important; } } .summer-campaign-promo-banner .content-left .banner-subtitle2 { position: absolute; bottom: 4%; left: 5%; } .summer-campaign-promo-banner .content-right { padding-inline-start: 15%; display: flex; align-items: flex-end; justify-content: flex-end; max-width: 43% !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-right { max-width: 100% !important; padding: 0; align-items: flex-start; justify-content: flex-start; align-self: flex-start !important; } } .summer-campaign-promo-banner .content-right .banner-title { position: absolute; inset: unset; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; max-width: 50%; height: 100%; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-right .banner-title { height: 60%; width: 100% !important; max-width: unset; } } .summer-campaign-promo-banner .content-right .banner-title img { width: 100%; object-fit: contain; position: absolute; inset: unset; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 100% !important; } .summer-campaign-promo-banner .content-right .banner-title img:first-of-type { width: 100% !important; z-index: 2; transform: unset; inset: unset; top: 13%; right: 20%; max-width: 110px !important; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-right .banner-title img:first-of-type { max-width: 80px !important; top: 22%; right: 15%; } } .summer-campaign-promo-banner .content-right .banner-title img:last-of-type { max-width: 120% !important; width: 120%; inset-block: unset; top: 60%; z-index: 1; margin-left: 15px; } .summer-campaign-promo-banner .content-right .banner-subtitle { position: relative; z-index: 4; font-size: clamp(14px, 3vw, 22px) !important; text-align: start; } @media (max-width: 992px) { .summer-campaign-promo-banner .content-right .banner-subtitle { max-width: 70%; padding-bottom: 15px; } .summer-campaign-promo-banner .content-right .banner-subtitle br { display: none !important; } } .summer-campaign-promo-banner .content-right .banner-subtitle2 { position: absolute; bottom: 0; right: 0; width: 100px; } .summer-campaign-promo-banner .content-right .banner-subtitle2 img { object-fit: contain; width: 100%; } .iframe-container .lf-campaign { height: 100vh !important; } body.no-header .iframe-container iframe { height: 100vh !important; } .what-is-zyn-banner .banner-content-container .container .banner-content { padding: 0 20% !important; justify-content: center; } @media (max-width: 992px) { .what-is-zyn-banner .banner-content-container .container .banner-content { padding: 0 5% !important; } } .what-is-zyn-banner .banner-content-container .container .banner-content .content-info-container.content-left { width: 0; } .what-is-zyn-banner .banner-content-container .container .banner-content .content-info-container.content-right { max-width: 100% !important; color: black !important; } .what-is-zyn-banner .banner-content-container .container .banner-content .content-info-container.content-right .content-info .content-titles .banner-title { color: black; font-size: clamp(34px, 3vw, 52px); } .discover-zyn-banner.zyn-banner-margin { margin-top: 12vh; } @media (max-width: 992px) { .discover-zyn-banner.zyn-banner-margin { margin-top: 100px !important; } } .discover-zyn-banner.zyn-banner-margin .content-titles { text-align: start; } .discover-zyn-banner .banner-content-container { height: 100%; } .discover-zyn-banner .banner-content-container .container { margin: 0 !important; max-width: 100% !important; padding-inline: 4%; } .discover-zyn-banner .banner-content { height: 100%; width: 100% !important; max-width: none; padding-bottom: 2% !important; } .discover-zyn-banner .banner-content .content-left { align-self: flex-end !important; padding-bottom: 2%; max-width: 27% !important; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-title { font-size: clamp(21px, 3vw, 42px); line-height: 1.1; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-subtitle { font-size: clamp(14px, 1.2vw, 28px); line-height: 1.1; } @media (max-width: 1400px) { .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-title { margin-bottom: 8px; font-size: 28px !important; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-subtitle { font-size: 16px !important; } .discover-zyn-banner .banner-content .content-left .content-info .buttons-container { margin-top: 10px; } .discover-zyn-banner .banner-content .content-left .content-info .buttons-container a { font-size: 12px !important; padding-inline: 24px !important; } } @media (max-width: 1100px) { .discover-zyn-banner .banner-content .content-left .content-info .buttons-container a { padding-inline: 19px !important; } } @media (max-width: 992px) { .discover-zyn-banner .banner-content .content-left { width: 100%; max-width: 100% !important; height: 100%; } .discover-zyn-banner .banner-content .content-left .content-info { height: 100%; justify-content: flex-end; align-items: start; max-width: 63%; padding-bottom: 2%; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles { text-align: start !important; padding-bottom: 4%; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-title { font-size: clamp(24px, 1.2vw, 28px) !important; } .discover-zyn-banner .banner-content .content-left .content-info .content-titles .banner-subtitle { font-size: clamp(14px, 1.2vw, 18px) !important; } .discover-zyn-banner .banner-content .content-left .content-info .buttons-container { justify-content: start !important; } .discover-zyn-banner .banner-content .content-right .banner-description { top: 5% !important; max-width: 20% !important; } .discover-zyn-banner .banner-content .content-right .banner-description span:nth-child(1) { font-size: 2.9744vw !important; } .discover-zyn-banner .banner-content .content-right .banner-description span:nth-child(2) { font-size: 6.084vw !important; } .discover-zyn-banner .banner-content .content-right .banner-description span:nth-child(3) { font-size: 1.014vw !important; } } @media (max-width: 500px) { .discover-zyn-banner .content-left .content-info { max-width: unset !important; padding-bottom: unset !important; } .discover-zyn-banner .content-left .content-info .content-titles { max-width: 70% !important; } .discover-zyn-banner .content-left .content-info .buttons-container { gap: 7px; } .discover-zyn-banner .content-left .content-info .buttons-container a { font-size: 12px !important; padding-inline: 22px; } } .discover-zyn-banner .banner-content { position: relative; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description { position: absolute !important; top: 10%; inset-inline-end: -1%; max-width: 10%; width: fit-content; color: #03a8e0; line-height: 1; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span { width: 100%; display: block; text-transform: uppercase; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(1) { font-weight: bold; margin-bottom: -0.12em; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(2) { font-weight: bold; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description { max-width: 10%; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(1) { font-size: 1.76vw; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(2) { font-size: 3.6vw; } .discover-zyn-banner .banner-content .content-info-container .content-info .content-body .banner-description span:nth-child(3) { font-size: 0.6vw; } .pouch-sizes-section .titles-container .title-h3 { color: #00166f; font-size: clamp(28px, 2.4vw, 43px); line-height: 1.3; white-space: nowrap; } @media (max-width: 767px) { .pouch-sizes-section .titles-container .title-h3 { white-space: normal; } } .pouch-sizes-section .pouch-sizes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 767px) { .pouch-sizes-section .pouch-sizes-grid { grid-template-columns: 1fr; } } .pouch-sizes-section .pouch-size-card { display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 24px; padding: 40px 24px 32px; max-width: 100%; box-sizing: border-box; overflow: hidden; color: white; background: linear-gradient(135deg, color-mix(in srgb, #00166f 45%, #00d1d2 55%) 0%, #00166f 100%); } .pouch-sizes-section .pouch-size-card.light { background: linear-gradient(135deg, color-mix(in srgb, #00a9e0 15%, #00166f 85%) 0%, #00a9e0 100%); } .pouch-sizes-section .pouch-size-card.light .button-pill-arrow { --color: white; --background-color: #00166f; --border-color: #00166f; --hover-color: #00166f; --hover-background-color: white; --hover-border-color: white; } .pouch-sizes-section .pouch-size-card.light .card-features .feature img { filter: brightness(0) saturate(100%) invert(7%) sepia(92%) saturate(4599%) hue-rotate(230deg) brightness(88%) contrast(108%); } .pouch-sizes-section .pouch-size-card.light .card-features .feature span { color: #00166f; } .pouch-sizes-section .pouch-size-card.dark { background: linear-gradient(135deg, color-mix(in srgb, #00166f 35%, #00a9e0 65%) 0%, #00166f 100%); } .pouch-sizes-section .pouch-size-card.dark .card-features .feature img { filter: brightness(0) invert(1); } .pouch-sizes-section .pouch-size-card.dark .card-features .feature span { color: white; } .pouch-sizes-section .pouch-size-card .card-header { max-width: 100%; } .pouch-sizes-section .pouch-size-card .card-header .card-title { font-size: clamp(28px, 6vw, 42px); font-weight: bold; margin-bottom: 4px; } .pouch-sizes-section .pouch-size-card .card-header .card-subtitle { font-size: clamp(14px, 3vw, 18px); opacity: 0.8; margin-bottom: 0; } .pouch-sizes-section .pouch-size-card .card-img { width: 100%; max-width: 500px; margin-block: 24px; } .pouch-sizes-section .pouch-size-card .card-img img { width: 100%; height: auto; display: block; } .pouch-sizes-section .pouch-size-card .card-features { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; max-width: 100%; margin-bottom: 28px; } .pouch-sizes-section .pouch-size-card .card-features .feature { display: flex; flex-direction: row; align-items: center; text-align: start; gap: 10px; flex: 1; min-width: 0; } .pouch-sizes-section .pouch-size-card .card-features .feature img { width: 60px; max-width: 100%; object-fit: contain; flex-shrink: 0; filter: brightness(0) invert(1); } .pouch-sizes-section .pouch-size-card .card-features .feature span { font-size: 16px; line-height: 1.3; min-width: 0; overflow-wrap: break-word; } @media (max-width: 480px) { .pouch-sizes-section .pouch-size-card .card-features { gap: 8px; } .pouch-sizes-section .pouch-size-card .card-features .feature { flex-direction: column; text-align: center; gap: 6px; } .pouch-sizes-section .pouch-size-card .card-features .feature img { width: 36px; } .pouch-sizes-section .pouch-size-card .card-features .feature span { font-size: 12px; } } .button-pill-arrow { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-pill-arrow:empty { display: none; } .button-pill-arrow:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-pill-arrow { --color: #34303d; --background-color: white; --border-color: white; --hover-color: white; --hover-background-color: #34303d; --hover-border-color: #34303d; --color: #00166f; --hover-color: white; --hover-background-color: #00166f; --hover-border-color: #00166f; display: inline-flex; align-items: center; gap: 8px; } .button-pill-arrow::after { content: "→"; } .button-pill { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .button-pill:empty { display: none; } .button-pill:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .button-pill { --color: white; --background-color: #00166f; --border-color: #00166f; --hover-color: #00166f; --hover-background-color: white; --hover-border-color: #00166f; } .cta-strip-section { background-color: #d6eef8; padding-block: 16px; } .cta-strip-section .container { display: flex; justify-content: center; } .zyn-title-video-section { background-color: #d1dfe5; } .zyn-title-video-section .content-wrapper { display: flex; flex-direction: column; gap: 24px; } .zyn-title-video-section .titles-container { margin-bottom: 0; max-width: unset; text-align: start; } .zyn-title-video-section .titles-container .title-h3 { color: #00166f; } .zyn-title-video-section .titles-container .title-h3 .title-light { display: block; font-weight: 400; } .zyn-title-video-section .titles-container .title-h3 .title-bold { display: block; } .zyn-title-video-section .video-item { width: 100%; max-width: 700px; } .zyn-title-video-section .video-container { height: 700px; border-radius: 24px; } @media (max-width: 767px) { .zyn-title-video-section .video-container { height: 400px; } } .zyn-title-video-section .video-container.vertical-video { height: auto; aspect-ratio: 9/16; } .leftFiltersCol .blockHead { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px; } .nicotineFilters .TypeTitle { direction: ltr; unicode-bidi: isolate; } @media (max-width: 768px) { .brand-theme .filter-result-title .resultsText { max-width: 243px; } } .zyn-pdp .colQuantity .qty-btn.minus, .zyn-pdp .colQuantity .qty-btn.plus, .zyn-pdp .colQuantity a.minus, .zyn-pdp .colQuantity a.plus { background-image: none !important; background-color: #00166f !important; mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .zyn-pdp .colQuantity .qty-btn.minus:hover, .zyn-pdp .colQuantity .qty-btn.plus:hover, .zyn-pdp .colQuantity a.minus:hover, .zyn-pdp .colQuantity a.plus:hover { filter: none !important; opacity: 0.7; } .zyn-pdp .colQuantity .qty-btn.minus, .zyn-pdp .colQuantity a.minus { mask-image: url("/images/minus-button.svg?v=bkeF6zwgMB4Fuej_9WonN4MoRm8"); -webkit-mask-image: url("/images/minus-button.svg?v=bkeF6zwgMB4Fuej_9WonN4MoRm8"); } .zyn-pdp .colQuantity .qty-btn.plus, .zyn-pdp .colQuantity a.plus { mask-image: url("/images/add-button.svg?v=rxOazbALAu1Iv9EGSW5jdpLdX78"); -webkit-mask-image: url("/images/add-button.svg?v=rxOazbALAu1Iv9EGSW5jdpLdX78"); } .zyn-pdp .product-details__image .product__slider .swiper-slide { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding-inline: 56px; padding-bottom: 30px; } .zyn-pdp .product-details__image .product__slider img { max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; object-fit: contain; margin: 0 auto; } .zyn-pdp .nicotine-strengths__anchor { min-width: 104px !important; padding: 10px 30px !important; align-items: center; } .zyn-pdp .nicotine-strengths__value { font-size: 16px !important; } .zyn-pdp .product-details__wrapper { --color-section-background: #f3f5f7 !important; } .zyn-pdp #descContent h3 { font-size: 18px; font-weight: 700; color: #00166f; margin-top: 20px; margin-bottom: 15px; } .zyn-pdp #descContent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .zyn-pdp #descContent ul li { position: relative; padding-inline-start: 38px; min-height: 24px; } .zyn-pdp #descContent ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 100%; background-color: #03a8e0; } .zyn-pdp #descContent ul li::after { content: ""; position: absolute; inset-inline-start: 6.5px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; background-color: #00166f; mask-image: url(../../images/icons/tick.svg?v=ddXv4OVKODVgYMCSOdMmdLKEXSc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../../images/icons/tick.svg?v=ddXv4OVKODVgYMCSOdMmdLKEXSc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .pdp-theme-scope { display: contents; } .brand-theme { color: var(--current-text-color); } .brand-theme h1, .brand-theme h2, .brand-theme h3, .brand-theme h4, .brand-theme h5, .brand-theme h6, .brand-theme p, .brand-theme li, .brand-theme dt, .brand-theme dd, .brand-theme td, .brand-theme th, .brand-theme label, .brand-theme blockquote, .brand-theme figcaption, .brand-theme strong, .brand-theme em, .brand-theme small, .brand-theme a:not([class*=button]):not(.btn), .brand-theme .banner-title, .brand-theme .banner-description, .brand-theme .title-h4, .brand-theme .footer-support-container, .brand-theme .note-container, .brand-theme .text-default-container, .brand-theme .filters-main a, .brand-theme .resultsText, .brand-theme .listingDisclaimer, .brand-theme .product-name, .brand-theme .tile__name, .brand-theme .tile__description, .brand-theme .name-link, .brand-theme .TypeTitle, .brand-theme .removeFilters, .brand-theme .linkWrapper .link, .brand-theme .productTitle, .brand-theme .product-color, .brand-theme .product-details__title, .brand-theme .sales-price, .brand-theme .currentPrice, .brand-theme .oldPrice, .brand-theme .disclaimer, .brand-theme .ecommerceNotice, .brand-theme .accordion-button, .brand-theme .accordion-body { color: var(--current-text-color) !important; } .brand-theme h1 *, .brand-theme h2 *, .brand-theme h3 *, .brand-theme h4 *, .brand-theme h5 *, .brand-theme h6 *, .brand-theme p *, .brand-theme li *, .brand-theme dt *, .brand-theme dd *, .brand-theme td *, .brand-theme th *, .brand-theme label *, .brand-theme blockquote *, .brand-theme figcaption *, .brand-theme strong *, .brand-theme em *, .brand-theme small *, .brand-theme a:not([class*=button]):not(.btn) *, .brand-theme .banner-title *, .brand-theme .banner-description *, .brand-theme .title-h4 *, .brand-theme .footer-support-container *, .brand-theme .note-container *, .brand-theme .text-default-container *, .brand-theme .filters-main a *, .brand-theme .resultsText *, .brand-theme .listingDisclaimer *, .brand-theme .product-name *, .brand-theme .tile__name *, .brand-theme .tile__description *, .brand-theme .name-link *, .brand-theme .TypeTitle *, .brand-theme .removeFilters *, .brand-theme .linkWrapper .link *, .brand-theme .productTitle *, .brand-theme .product-color *, .brand-theme .product-details__title *, .brand-theme .sales-price *, .brand-theme .currentPrice *, .brand-theme .oldPrice *, .brand-theme .disclaimer *, .brand-theme .ecommerceNotice *, .brand-theme .accordion-button *, .brand-theme .accordion-body * { color: var(--current-text-color) !important; } .brand-theme .note-container { border-color: var(--current-text-color); } .brand-theme .filters-main .filter-item a.active { border-bottom-color: var(--current-text-color) !important; } .brand-theme .button { --color: var(--current-text-color) !important; --border-color: var(--current-text-color) !important; --hover-color: var(--default-text-color-inverse) !important; --hover-background-color: var(--current-text-color) !important; --hover-border-color: var(--current-text-color) !important; } .brand-theme .button-primary-filled { --color: var(--default-text-color-inverse) !important; --background-color: var(--current-text-color) !important; --border-color: var(--current-text-color) !important; --hover-color: var(--current-text-color) !important; --hover-background-color: transparent !important; --hover-border-color: var(--current-text-color) !important; } .brand-theme .productSticky .actionWrapper .addToCart { background-color: var(--current-text-color) !important; border-color: var(--current-text-color) !important; color: var(--default-text-color-inverse) !important; } .brand-theme .productSticky .actionWrapper .addToCart:hover { background-color: transparent !important; border-color: var(--current-text-color) !important; color: var(--current-text-color) !important; } .brand-theme .button-back, .brand-theme .backButton, .brand-theme .backLink { --main-color: var(--current-text-color) !important; } .brand-theme .swiper-prev, .brand-theme .swiper-next { --arrow-color: var(--current-text-color) !important; --arrow-border-color: var(--current-text-color) !important; --arrow-color-hover: var(--current-text-color) !important; } .brand-theme .filterItem.active { border-color: var(--current-text-color) !important; } .brand-theme .variation-container-item.selected { border-color: var(--current-text-color) !important; } .brand-theme .variation-container-item.selected .swatch-list__anchor { border-color: var(--current-text-color) !important; } .brand-theme .nicotine-strengths__item.selected { border-color: var(--current-text-color) !important; background-color: var(--current-text-color) !important; } .brand-theme .nicotine-strengths__item.selected .nicotine-strengths__anchor, .brand-theme .nicotine-strengths__item.selected .nicotine-strengths__value { color: #fff !important; } .brand-theme .js-swatch-list-item.selected .swatch-list__anchor { border-color: var(--current-text-color) !important; } .brand-theme .searchResu input { border-color: var(--current-text-color) !important; color: var(--current-text-color) !important; } .brand-theme .searchResu input::placeholder { color: var(--current-text-color) !important; } .brand-theme .searchResu input:focus { border-color: var(--current-text-color) !important; } .zyn-pdp .nicotine-strengths__item.selected { background-color: #00166f !important; border-width: 2px !important; flex-grow: 0.4; } .zyn-pdp .nicotine-strengths__item.selected .nicotine-strengths__anchor, .zyn-pdp .nicotine-strengths__item.selected .nicotine-strengths__value { color: #fff !important; } .zyn-pdp .nicotine-strengths__item.selected .nicotine-strengths__anchor.nicotine-strengths__anchor, .zyn-pdp .nicotine-strengths__item.selected .nicotine-strengths__value.nicotine-strengths__anchor { width: 100% !important; } .zyn-flavors-section { overflow-x: hidden; } .zyn-flavors-section .titles-container .title { color: #00166f; } .zyn-flavors-section .zyn-flavors-swiper { overflow: visible; margin-bottom: 40px; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev, .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next { display: flex; width: 44px; height: 44px; border-radius: 50%; background-color: #00166f; background-repeat: no-repeat; background-position: center; background-size: 12px 12px; margin-top: 0; transform: translateY(-50%); transition: opacity 0.3s ease; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev::after, .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next::after { content: none; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev .swiper-navigation-icon, .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next .swiper-navigation-icon { display: none; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev.swiper-button-disabled, .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next.swiper-button-disabled { opacity: 0.4; } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); } .zyn-flavors-section .zyn-flavors-swiper .swiper-button-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); } .zyn-flavors-section .zyn-flavors-swiper .swiper-slide { width: 60vw; height: auto; box-sizing: border-box; opacity: 0.55; transition: opacity 0.4s ease; } .zyn-flavors-section .zyn-flavors-swiper .swiper-slide.swiper-slide-active { opacity: 1; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card { position: relative; height: 100%; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .card-title { color: white !important; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .card-title * { color: white !important; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .description { color: white !important; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .description * { color: white !important; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .zyn-flavor-button { background-color: #fff; color: #00166f; border: 1px solid #fff; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .zyn-flavor-button:hover, .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-card.white-text .zyn-flavor-button:focus-visible { background-color: #00166f; color: #fff; border-color: #fff; } .zyn-flavors-section .zyn-flavors-swiper .card-img { position: relative; display: block; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 16px; } .zyn-flavors-section .zyn-flavors-swiper .card-img .bg-img, .zyn-flavors-section .zyn-flavors-swiper .card-img .img-container-contained { position: absolute; inset: 0; } .zyn-flavors-section .zyn-flavors-swiper .card-img .bg-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .zyn-flavors-section .zyn-flavors-swiper .card-img .img-container-contained { display: flex; align-items: center; justify-content: center; padding: 24px; } .zyn-flavors-section .zyn-flavors-swiper .card-img .img-container-contained img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .zyn-flavors-section .zyn-flavors-swiper .card-info { position: absolute; left: 0; bottom: 0; z-index: 2; max-width: 70%; padding: 24px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; color: #00166f; text-align: start; } @media (max-width: 992px) { .zyn-flavors-section .zyn-flavors-swiper .card-info { left: unset; inset-inline-start: 0; max-width: 100%; } } .zyn-flavors-section .zyn-flavors-swiper .card-info .card-title { margin-bottom: 8px; color: #00166f; font-weight: 700; } .zyn-flavors-section .zyn-flavors-swiper .card-info .description { margin-bottom: 4px; color: #00166f; font-weight: 600; } @media (max-width: 992px) { .zyn-flavors-section .zyn-flavors-swiper .card-info .description br { display: none !important; } } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 999px; background-color: #00166f; color: #fff; border: 1px solid #00166f; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-button:hover, .zyn-flavors-section .zyn-flavors-swiper .zyn-flavor-button:focus-visible { background-color: #fff; color: #00166f; border-color: #00166f; } .zyn-flavors-section .viewAll-arrow .viewAll { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 999px; background-color: #fff; color: #00166f; border: 1px solid #00166f; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .zyn-flavors-section .viewAll-arrow .viewAll:hover, .zyn-flavors-section .viewAll-arrow .viewAll:focus-visible { background-color: #00166f; color: #fff; } @media (max-width: 992px) { .zyn-flavors-section .zyn-flavors-swiper .swiper-slide { width: 85vw; } .zyn-flavors-section .zyn-flavors-swiper .card-img { aspect-ratio: 280/480; } } .zyn-colors .title-h3, .zyn-colors .body-container { color: #00166f; } .zyn-colors .footer-support-container { justify-content: center; } @media (max-width: 576px) { .zyn-colors .footer-support-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .zyn-colors .footer-support-container:where(ul, ol) { margin-bottom: 0; } .zyn-colors .footer-support-container > .col, .zyn-colors .footer-support-container > .col:is(:first-child, :last-child), .zyn-colors .footer-support-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .promo-cards-section { /* ======================================== #CardClass# VOCABULARY (per card) ======================================== Every part is an independent slot that collapses when its CMS field is blank, so the same template serves two ways of building a card: TEXT-ONLY OVERLAY — the client ships finished artwork (background, logo, product, price lock-up baked in). Fill BackgroundImage plus the copy and buttons; leave LogoImage and ForegroundImage blank. Place the copy against the baked-in art with content-offset-top-* / content-offset-bottom-*. FULL BUILD — we compose the card from parts. Fill LogoImage and ForegroundImage too, and order them with logo-* / product-*. Background can be an image, a BackgroundColor, or both. Cards in the same rail may use either mode; nothing is portlet-wide. CONTENT POSITION: content-align-top | content-align-center | content-align-bottom TEXT ALIGNMENT: content-text-start | content-text-center | content-text-end EDGE INSET: content-inset-sm (16px) | -md (24px) | -lg (32px) | -xl (48px) CLEAR THE ARTWORK: content-offset-top-5 | -10 | -15 … -50 (steps of 5) content-offset-bottom-5 | … | -50 HEADLINE LINES: a direct in the Headline field is one line and takes a size — line-sm | line-md | line-lg | line-xl | line-2xl (card-relative cqw) — plus optional weight (regular | bold) and alignment (text-start | text-center | text-end, or nudge-start-5|10|15|20 / nudge-end-… for a partial shift). Nest a inside a line to restyle only part of it: little wins (% of card WIDTH, added on top of the inset — use these to drop the copy below a baked-in logo, or lift it above a baked-in product shot) LOGO (full build): logo-top | logo-bottom + logo-sm | logo-lg PRODUCT (full b.): product-top | product-middle | product-bottom + product-sm | product-lg STACK ORDER: logo 1/9 · titles 3 · highlight 4 · description 5 product 2/6/8 · buttons 7 · disclaimer 10 CONTENT WIDTH: content-max-width-180 … -300 (steps of 20) RESPONSIVE: sm- (=568px) / md- (=768px) / lg- (=992px) prefixes override the base on smaller screens, e.g. md-content-offset-top-20 ARABIC-ONLY: ar- prefix on any modifier above applies in RTL only, so a single CardClass can differ per language — CardClass is not translatable. e.g. "content-text-start ar-content-text-center" BADGE CORNER: badge-top-start | badge-top-end | badge-bottom-start | badge-bottom-end LEGIBILITY SCRIM: scrim-top | scrim-bottom | scrim-full TEXT COLOUR: content-dark | content-light SUBTITLE IMAGE: subtitle-img-sm | subtitle-img-lg (default 56px tall) #ButtonStyle# / #ButtonStyleSecond# (per card): button-zyn white pill, navy label — for ZYN artwork button-primary outline, inherits the card's text colour button-primary-filled solid, inverts the card's text colour button-arrow label + arrow, no chrome button-underlined text link WHOLE CARD LINK: clickable ARABIC: no-mirror — keep the English geometry in RTL, text still reads RTL ltr-content — force the whole card LTR (Latin-only cards) #ContainerClass# / #SubContainerClass# (per portlet): cards-per-view-2 | -3 | -4 | -5 (mobile always peeks the next card) ======================================== */ --promo-cards-per-view: 4; --promo-card-gap: 20px; overflow-x: clip; } .promo-cards-section .swiper-promo-cards { overflow: visible; } .promo-cards-section .swiper-promo-cards .swiper-wrapper { overflow: visible; } .promo-cards-section .swiper-promo-cards:where(.cards-per-view-2) { --promo-cards-per-view: 2; } .promo-cards-section .swiper-promo-cards:where(.cards-per-view-3) { --promo-cards-per-view: 3; } .promo-cards-section .swiper-promo-cards:where(.cards-per-view-4) { --promo-cards-per-view: 4; } .promo-cards-section .swiper-promo-cards:where(.cards-per-view-5) { --promo-cards-per-view: 5; } @media (max-width: 1200px) { .promo-cards-section .swiper-promo-cards { --promo-cards-per-view: 3; } } @media (max-width: 992px) { .promo-cards-section .swiper-promo-cards { --promo-cards-per-view: 2.2; } } @media (max-width: 576px) { .promo-cards-section .swiper-promo-cards { --promo-cards-per-view: 1.15; } } .promo-cards-section .swiper-slide { width: calc((100% - var(--promo-cards-per-view) * var(--promo-card-gap)) / var(--promo-cards-per-view)); height: auto; } .promo-card { --promo-card-aspect: 400 / 650; --promo-card-padding: 24px; --promo-card-radius: 8px; --promo-card-content-gap: clamp(8px, 4cqw, 20px); --promo-card-content-justify: flex-start; --promo-card-content-max-width: none; --promo-card-text-align: start; --promo-card-items-align: flex-start; --promo-card-offset-top: 0px; --promo-card-offset-bottom: 0px; --promo-card-logo-order: 9; --promo-card-product-order: 8; --promo-card-logo-height: clamp(20px, 11cqw, 48px); --promo-card-product-height: clamp(80px, 45cqw, 280px); --promo-card-badge-block: 0 auto; --promo-card-badge-inline: auto 0; --promo-card-scrim: none; --promo-card-link-display: none; --promo-card-subtitle-img-height: clamp(24px, 12cqw, 60px); position: relative; display: grid; height: 100%; overflow: hidden; container-type: inline-size; border-radius: var(--promo-card-radius); color: var(--default-text-color); text-align: var(--promo-card-text-align); } .promo-card::after { content: ""; grid-area: 1/1; width: 100%; aspect-ratio: var(--promo-card-aspect); pointer-events: none; } .promo-card.content-align-top { --promo-card-content-justify: flex-start; } .promo-card.content-align-center { --promo-card-content-justify: center; } .promo-card.content-align-bottom { --promo-card-content-justify: flex-end; } .promo-card.content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } .promo-card.content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } .promo-card.content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } .promo-card.logo-top { --promo-card-logo-order: 1; } .promo-card.logo-bottom { --promo-card-logo-order: 9; } .promo-card.product-top { --promo-card-product-order: 2; } .promo-card.product-middle { --promo-card-product-order: 6; } .promo-card.product-bottom { --promo-card-product-order: 8; } .promo-card.content-inset-sm { --promo-card-padding: 16px; } .promo-card.content-inset-md { --promo-card-padding: 24px; } .promo-card.content-inset-lg { --promo-card-padding: 32px; } .promo-card.content-inset-xl { --promo-card-padding: 48px; } .promo-card.content-offset-top-5 { --promo-card-offset-top: 5%; } .promo-card.content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } .promo-card.content-offset-top-10 { --promo-card-offset-top: 10%; } .promo-card.content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } .promo-card.content-offset-top-15 { --promo-card-offset-top: 15%; } .promo-card.content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } .promo-card.content-offset-top-20 { --promo-card-offset-top: 20%; } .promo-card.content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } .promo-card.content-offset-top-25 { --promo-card-offset-top: 25%; } .promo-card.content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } .promo-card.content-offset-top-30 { --promo-card-offset-top: 30%; } .promo-card.content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } .promo-card.content-offset-top-35 { --promo-card-offset-top: 35%; } .promo-card.content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } .promo-card.content-offset-top-40 { --promo-card-offset-top: 40%; } .promo-card.content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } .promo-card.content-offset-top-45 { --promo-card-offset-top: 45%; } .promo-card.content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } .promo-card.content-offset-top-50 { --promo-card-offset-top: 50%; } .promo-card.content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } .promo-card.content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } .promo-card.content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } .promo-card.content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } .promo-card.content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } .promo-card.content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } .promo-card.content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } .promo-card.content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } @media (max-width: 568px) { .promo-card.sm-content-align-top { --promo-card-content-justify: flex-start; } .promo-card.sm-content-align-center { --promo-card-content-justify: center; } .promo-card.sm-content-align-bottom { --promo-card-content-justify: flex-end; } .promo-card.sm-content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } .promo-card.sm-content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } .promo-card.sm-content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } .promo-card.sm-logo-top { --promo-card-logo-order: 1; } .promo-card.sm-logo-bottom { --promo-card-logo-order: 9; } .promo-card.sm-product-top { --promo-card-product-order: 2; } .promo-card.sm-product-middle { --promo-card-product-order: 6; } .promo-card.sm-product-bottom { --promo-card-product-order: 8; } .promo-card.sm-content-inset-sm { --promo-card-padding: 16px; } .promo-card.sm-content-inset-md { --promo-card-padding: 24px; } .promo-card.sm-content-inset-lg { --promo-card-padding: 32px; } .promo-card.sm-content-inset-xl { --promo-card-padding: 48px; } .promo-card.sm-content-offset-top-5 { --promo-card-offset-top: 5%; } .promo-card.sm-content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } .promo-card.sm-content-offset-top-10 { --promo-card-offset-top: 10%; } .promo-card.sm-content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } .promo-card.sm-content-offset-top-15 { --promo-card-offset-top: 15%; } .promo-card.sm-content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } .promo-card.sm-content-offset-top-20 { --promo-card-offset-top: 20%; } .promo-card.sm-content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } .promo-card.sm-content-offset-top-25 { --promo-card-offset-top: 25%; } .promo-card.sm-content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } .promo-card.sm-content-offset-top-30 { --promo-card-offset-top: 30%; } .promo-card.sm-content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } .promo-card.sm-content-offset-top-35 { --promo-card-offset-top: 35%; } .promo-card.sm-content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } .promo-card.sm-content-offset-top-40 { --promo-card-offset-top: 40%; } .promo-card.sm-content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } .promo-card.sm-content-offset-top-45 { --promo-card-offset-top: 45%; } .promo-card.sm-content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } .promo-card.sm-content-offset-top-50 { --promo-card-offset-top: 50%; } .promo-card.sm-content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } .promo-card.sm-content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } .promo-card.sm-content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } .promo-card.sm-content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } .promo-card.sm-content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } .promo-card.sm-content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } .promo-card.sm-content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } .promo-card.sm-content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } } @media (max-width: 768px) { .promo-card.md-content-align-top { --promo-card-content-justify: flex-start; } .promo-card.md-content-align-center { --promo-card-content-justify: center; } .promo-card.md-content-align-bottom { --promo-card-content-justify: flex-end; } .promo-card.md-content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } .promo-card.md-content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } .promo-card.md-content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } .promo-card.md-logo-top { --promo-card-logo-order: 1; } .promo-card.md-logo-bottom { --promo-card-logo-order: 9; } .promo-card.md-product-top { --promo-card-product-order: 2; } .promo-card.md-product-middle { --promo-card-product-order: 6; } .promo-card.md-product-bottom { --promo-card-product-order: 8; } .promo-card.md-content-inset-sm { --promo-card-padding: 16px; } .promo-card.md-content-inset-md { --promo-card-padding: 24px; } .promo-card.md-content-inset-lg { --promo-card-padding: 32px; } .promo-card.md-content-inset-xl { --promo-card-padding: 48px; } .promo-card.md-content-offset-top-5 { --promo-card-offset-top: 5%; } .promo-card.md-content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } .promo-card.md-content-offset-top-10 { --promo-card-offset-top: 10%; } .promo-card.md-content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } .promo-card.md-content-offset-top-15 { --promo-card-offset-top: 15%; } .promo-card.md-content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } .promo-card.md-content-offset-top-20 { --promo-card-offset-top: 20%; } .promo-card.md-content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } .promo-card.md-content-offset-top-25 { --promo-card-offset-top: 25%; } .promo-card.md-content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } .promo-card.md-content-offset-top-30 { --promo-card-offset-top: 30%; } .promo-card.md-content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } .promo-card.md-content-offset-top-35 { --promo-card-offset-top: 35%; } .promo-card.md-content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } .promo-card.md-content-offset-top-40 { --promo-card-offset-top: 40%; } .promo-card.md-content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } .promo-card.md-content-offset-top-45 { --promo-card-offset-top: 45%; } .promo-card.md-content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } .promo-card.md-content-offset-top-50 { --promo-card-offset-top: 50%; } .promo-card.md-content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } .promo-card.md-content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } .promo-card.md-content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } .promo-card.md-content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } .promo-card.md-content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } .promo-card.md-content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } .promo-card.md-content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } .promo-card.md-content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } } @media (max-width: 992px) { .promo-card.lg-content-align-top { --promo-card-content-justify: flex-start; } .promo-card.lg-content-align-center { --promo-card-content-justify: center; } .promo-card.lg-content-align-bottom { --promo-card-content-justify: flex-end; } .promo-card.lg-content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } .promo-card.lg-content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } .promo-card.lg-content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } .promo-card.lg-logo-top { --promo-card-logo-order: 1; } .promo-card.lg-logo-bottom { --promo-card-logo-order: 9; } .promo-card.lg-product-top { --promo-card-product-order: 2; } .promo-card.lg-product-middle { --promo-card-product-order: 6; } .promo-card.lg-product-bottom { --promo-card-product-order: 8; } .promo-card.lg-content-inset-sm { --promo-card-padding: 16px; } .promo-card.lg-content-inset-md { --promo-card-padding: 24px; } .promo-card.lg-content-inset-lg { --promo-card-padding: 32px; } .promo-card.lg-content-inset-xl { --promo-card-padding: 48px; } .promo-card.lg-content-offset-top-5 { --promo-card-offset-top: 5%; } .promo-card.lg-content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } .promo-card.lg-content-offset-top-10 { --promo-card-offset-top: 10%; } .promo-card.lg-content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } .promo-card.lg-content-offset-top-15 { --promo-card-offset-top: 15%; } .promo-card.lg-content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } .promo-card.lg-content-offset-top-20 { --promo-card-offset-top: 20%; } .promo-card.lg-content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } .promo-card.lg-content-offset-top-25 { --promo-card-offset-top: 25%; } .promo-card.lg-content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } .promo-card.lg-content-offset-top-30 { --promo-card-offset-top: 30%; } .promo-card.lg-content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } .promo-card.lg-content-offset-top-35 { --promo-card-offset-top: 35%; } .promo-card.lg-content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } .promo-card.lg-content-offset-top-40 { --promo-card-offset-top: 40%; } .promo-card.lg-content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } .promo-card.lg-content-offset-top-45 { --promo-card-offset-top: 45%; } .promo-card.lg-content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } .promo-card.lg-content-offset-top-50 { --promo-card-offset-top: 50%; } .promo-card.lg-content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } .promo-card.lg-content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } .promo-card.lg-content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } .promo-card.lg-content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } .promo-card.lg-content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } .promo-card.lg-content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } .promo-card.lg-content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } .promo-card.lg-content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } } [dir=rtl] .promo-card.ar-content-align-top { --promo-card-content-justify: flex-start; } [dir=rtl] .promo-card.ar-content-align-center { --promo-card-content-justify: center; } [dir=rtl] .promo-card.ar-content-align-bottom { --promo-card-content-justify: flex-end; } [dir=rtl] .promo-card.ar-content-text-start { --promo-card-text-align: start; --promo-card-items-align: flex-start; } [dir=rtl] .promo-card.ar-content-text-center { --promo-card-text-align: center; --promo-card-items-align: center; } [dir=rtl] .promo-card.ar-content-text-end { --promo-card-text-align: end; --promo-card-items-align: flex-end; } [dir=rtl] .promo-card.ar-logo-top { --promo-card-logo-order: 1; } [dir=rtl] .promo-card.ar-logo-bottom { --promo-card-logo-order: 9; } [dir=rtl] .promo-card.ar-product-top { --promo-card-product-order: 2; } [dir=rtl] .promo-card.ar-product-middle { --promo-card-product-order: 6; } [dir=rtl] .promo-card.ar-product-bottom { --promo-card-product-order: 8; } [dir=rtl] .promo-card.ar-content-inset-sm { --promo-card-padding: 16px; } [dir=rtl] .promo-card.ar-content-inset-md { --promo-card-padding: 24px; } [dir=rtl] .promo-card.ar-content-inset-lg { --promo-card-padding: 32px; } [dir=rtl] .promo-card.ar-content-inset-xl { --promo-card-padding: 48px; } [dir=rtl] .promo-card.ar-content-offset-top-5 { --promo-card-offset-top: 5%; } [dir=rtl] .promo-card.ar-content-offset-bottom-5 { --promo-card-offset-bottom: 5%; } [dir=rtl] .promo-card.ar-content-offset-top-10 { --promo-card-offset-top: 10%; } [dir=rtl] .promo-card.ar-content-offset-bottom-10 { --promo-card-offset-bottom: 10%; } [dir=rtl] .promo-card.ar-content-offset-top-15 { --promo-card-offset-top: 15%; } [dir=rtl] .promo-card.ar-content-offset-bottom-15 { --promo-card-offset-bottom: 15%; } [dir=rtl] .promo-card.ar-content-offset-top-20 { --promo-card-offset-top: 20%; } [dir=rtl] .promo-card.ar-content-offset-bottom-20 { --promo-card-offset-bottom: 20%; } [dir=rtl] .promo-card.ar-content-offset-top-25 { --promo-card-offset-top: 25%; } [dir=rtl] .promo-card.ar-content-offset-bottom-25 { --promo-card-offset-bottom: 25%; } [dir=rtl] .promo-card.ar-content-offset-top-30 { --promo-card-offset-top: 30%; } [dir=rtl] .promo-card.ar-content-offset-bottom-30 { --promo-card-offset-bottom: 30%; } [dir=rtl] .promo-card.ar-content-offset-top-35 { --promo-card-offset-top: 35%; } [dir=rtl] .promo-card.ar-content-offset-bottom-35 { --promo-card-offset-bottom: 35%; } [dir=rtl] .promo-card.ar-content-offset-top-40 { --promo-card-offset-top: 40%; } [dir=rtl] .promo-card.ar-content-offset-bottom-40 { --promo-card-offset-bottom: 40%; } [dir=rtl] .promo-card.ar-content-offset-top-45 { --promo-card-offset-top: 45%; } [dir=rtl] .promo-card.ar-content-offset-bottom-45 { --promo-card-offset-bottom: 45%; } [dir=rtl] .promo-card.ar-content-offset-top-50 { --promo-card-offset-top: 50%; } [dir=rtl] .promo-card.ar-content-offset-bottom-50 { --promo-card-offset-bottom: 50%; } [dir=rtl] .promo-card.ar-content-max-width-180 { --promo-card-content-max-width: 180px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-200 { --promo-card-content-max-width: 200px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-220 { --promo-card-content-max-width: 220px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-240 { --promo-card-content-max-width: 240px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-260 { --promo-card-content-max-width: 260px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-280 { --promo-card-content-max-width: 280px; text-wrap: balance; } [dir=rtl] .promo-card.ar-content-max-width-300 { --promo-card-content-max-width: 300px; text-wrap: balance; } .promo-card .promo-card__media { position: absolute; inset: 0; z-index: 0; } .promo-card .promo-card__media img { width: 100%; height: 100%; object-fit: cover; } .promo-card .promo-card__media::after { content: ""; position: absolute; inset: 0; background: var(--promo-card-scrim); pointer-events: none; } .promo-card.scrim-top { --promo-card-scrim: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 60%); } .promo-card.scrim-bottom { --promo-card-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 60%); } .promo-card.scrim-full { --promo-card-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2)); } .promo-card .promo-card__link { display: var(--promo-card-link-display); position: absolute; inset: 0; z-index: 2; } .promo-card.clickable { --promo-card-link-display: block; } .promo-card .promo-card__badge { position: absolute; z-index: 4; inset-block: var(--promo-card-badge-block); inset-inline: var(--promo-card-badge-inline); margin: var(--promo-card-padding); padding: 6px 12px; border-radius: 100px; background-color: var(--default-text-color-inverse); color: var(--default-text-color); font-weight: 600; unicode-bidi: isolate; font-size: clamp(11px, 9.9678899083px + 0.2293577982vw, 13px); } .promo-card .promo-card__badge:empty { display: none; } .promo-card.badge-top-start { --promo-card-badge-block: 0 auto; --promo-card-badge-inline: 0 auto; } .promo-card.badge-top-end { --promo-card-badge-block: 0 auto; --promo-card-badge-inline: auto 0; } .promo-card.badge-bottom-start { --promo-card-badge-block: auto 0; --promo-card-badge-inline: 0 auto; } .promo-card.badge-bottom-end { --promo-card-badge-block: auto 0; --promo-card-badge-inline: auto 0; } .promo-card .promo-card__content { grid-area: 1/1; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: var(--promo-card-content-justify); align-items: var(--promo-card-items-align); gap: var(--promo-card-content-gap); width: 100%; padding: var(--promo-card-padding); padding-block-start: calc(var(--promo-card-padding) + var(--promo-card-offset-top)); padding-block-end: calc(var(--promo-card-padding) + var(--promo-card-offset-bottom)); } .promo-card .promo-card__content > * { max-width: var(--promo-card-content-max-width); } .promo-card .promo-card__logo { order: var(--promo-card-logo-order); } .promo-card .promo-card__logo img { max-height: var(--promo-card-logo-height); max-width: 100%; width: auto; object-fit: contain; } .promo-card .promo-card__logo:not(:has(img:not([src=""]))) { display: none; } .promo-card.logo-sm { --promo-card-logo-height: clamp(14px, 8cqw, 34px); } .promo-card.logo-lg { --promo-card-logo-height: clamp(28px, 15cqw, 66px); } .promo-card .promo-card__product { order: var(--promo-card-product-order); } .promo-card .promo-card__product img { max-height: var(--promo-card-product-height); max-width: 100%; width: auto; object-fit: contain; } .promo-card .promo-card__product:not(:has(img:not([src=""]))) { display: none; } .promo-card.product-sm { --promo-card-product-height: clamp(60px, 30cqw, 190px); } .promo-card.product-lg { --promo-card-product-height: clamp(110px, 60cqw, 380px); } .promo-card .titles-container { order: 3; --spacing: 8px; margin-bottom: 0; max-width: var(--promo-card-content-max-width); } .promo-card .promo-card__title { font-weight: 600; line-height: 1.15; text-wrap: balance; font-size: clamp(18px, 7cqw, 34px); } .promo-card .promo-card__title > span { display: block; } .promo-card .promo-card__title .line-sm { font-size: clamp(13px, 5cqw, 24px); } .promo-card .promo-card__title .line-md { font-size: clamp(16px, 6.5cqw, 30px); } .promo-card .promo-card__title .line-lg { font-size: clamp(20px, 8cqw, 38px); } .promo-card .promo-card__title .line-xl { font-size: clamp(24px, 9.5cqw, 46px); } .promo-card .promo-card__title .line-2xl { font-size: clamp(28px, 11.5cqw, 56px); } .promo-card .promo-card__title .regular { font-weight: 400; } .promo-card .promo-card__title .bold { font-weight: 600; } .promo-card .promo-card__title > .text-start { text-align: start; } .promo-card .promo-card__title > .text-center { text-align: center; } .promo-card .promo-card__title > .text-end { text-align: end; } .promo-card .promo-card__title > .nudge-start-5 { padding-inline-end: 10%; } .promo-card .promo-card__title > .nudge-end-5 { padding-inline-start: 10%; } .promo-card .promo-card__title > .nudge-start-10 { padding-inline-end: 20%; } .promo-card .promo-card__title > .nudge-end-10 { padding-inline-start: 20%; } .promo-card .promo-card__title > .nudge-start-15 { padding-inline-end: 30%; } .promo-card .promo-card__title > .nudge-end-15 { padding-inline-start: 30%; } .promo-card .promo-card__title > .nudge-start-20 { padding-inline-end: 40%; } .promo-card .promo-card__title > .nudge-end-20 { padding-inline-start: 40%; } .promo-card .promo-card__title:empty, .promo-card .promo-card__title:not(:has(img, svg, video, iframe)):has(> :first-child:last-child:empty), .promo-card .promo-card__title:not(:has(img, svg, video, iframe)):has(> :first-child:last-child > br:only-child) { display: none; } .promo-card .promo-card__subtitle { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .promo-card .promo-card__subtitle:empty { display: none; } .promo-card .promo-card__subtitle p { margin-bottom: 16px; } .promo-card .promo-card__subtitle p:last-child { margin-bottom: 0; } .promo-card .promo-card__subtitle ul, .promo-card .promo-card__subtitle ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .promo-card .promo-card__subtitle li { list-style: disc; } .promo-card .promo-card__subtitle { font-size: clamp(17px, 16.4839449541px + 0.1146788991vw, 18px); line-height: 1.5; font-size: clamp(12px, 4.4cqw, 18px); } .promo-card .promo-card__subtitle img { max-width: 100%; max-height: var(--promo-card-subtitle-img-height); width: auto; height: auto; } .promo-card .promo-card__subtitle:empty, .promo-card .promo-card__subtitle:not(:has(img, svg, video, iframe)):has(> :first-child:last-child:empty), .promo-card .promo-card__subtitle:not(:has(img, svg, video, iframe)):has(> :first-child:last-child > br:only-child) { display: none; } .promo-card.subtitle-img-sm { --promo-card-subtitle-img-height: clamp(16px, 8cqw, 40px); } .promo-card.subtitle-img-lg { --promo-card-subtitle-img-height: clamp(30px, 16cqw, 80px); } .promo-card .promo-card__highlight { order: 4; font-weight: 600; unicode-bidi: isolate; font-size: clamp(24px, 18.8394495413px + 1.1467889908vw, 34px); } .promo-card .promo-card__highlight:empty { display: none; } .promo-card .promo-card__description { order: 5; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .promo-card .promo-card__description:empty { display: none; } .promo-card .promo-card__description p { margin-bottom: 16px; } .promo-card .promo-card__description p:last-child { margin-bottom: 0; } .promo-card .promo-card__description ul, .promo-card .promo-card__description ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .promo-card .promo-card__description li { list-style: disc; } .promo-card .promo-card__description { font-size: clamp(13px, 12.4839449541px + 0.1146788991vw, 14px); line-height: 1.5; font-size: clamp(11px, 4cqw, 16px); } .promo-card .promo-card__description img { max-width: 100%; height: auto; } .promo-card .promo-card__description:empty, .promo-card .promo-card__description:not(:has(img, svg, video, iframe)):has(> :first-child:last-child:empty), .promo-card .promo-card__description:not(:has(img, svg, video, iframe)):has(> :first-child:last-child > br:only-child) { display: none; } .promo-card .buttons-container { order: 7; z-index: 3; gap: clamp(6px, 3cqw, 16px); justify-content: var(--promo-card-items-align); } .promo-card .promo-card__cta:not([class*=button-]) { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .promo-card .promo-card__cta:not([class*=button-]):empty { display: none; } .promo-card .promo-card__cta:not([class*=button-]):hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .promo-card .promo-card__cta { font-size: clamp(11px, 3.9cqw, 16px); padding-block: clamp(4px, 1.4cqw, 7px) clamp(6px, 2.2cqw, 10px); padding-inline: clamp(12px, 4.2cqw, 32px); border-width: clamp(1px, 0.5cqw, 2px); } .promo-card .promo-card__disclaimer { order: 10; opacity: 0.7; font-size: clamp(10px, 8.9678899083px + 0.2293577982vw, 12px); } .promo-card .promo-card__disclaimer > :last-child { margin-bottom: 0; } .promo-card .promo-card__disclaimer:empty, .promo-card .promo-card__disclaimer:not(:has(img, svg, video, iframe)):has(> :first-child:last-child:empty), .promo-card .promo-card__disclaimer:not(:has(img, svg, video, iframe)):has(> :first-child:last-child > br:only-child) { display: none; } .promo-card.content-dark { --default-text-color: #34303d; --default-text-color-inverse: white; } .promo-card.content-light { --default-text-color: white; --default-text-color-inverse: #34303d; } [dir=rtl] .promo-card.no-mirror { direction: ltr; } [dir=rtl] .promo-card.no-mirror .promo-card__content { direction: rtl; } .promo-card.ltr-content { direction: ltr; } .iluma-i-accessories-promo .content-left { height: 100%; max-width: 38% !important; } .iluma-i-accessories-promo .content-left .content-info { height: 100%; display: flex; flex-direction: column; /* justify-content: space-between; */ } .iluma-i-accessories-promo .content-left .content-info .buttons-container { margin-top: 0px !important; justify-content: flex-start !important; } .iluma-i-accessories-promo .content-left .content-info .buttons-container a { border-color: black !important; border-width: 1px !important; } .iluma-i-accessories-promo .content-left .banner-title { padding-top: 10%; color: black; display: flex; flex-direction: column; text-align: start; font-size: clamp(28px, 2vw, 55px) !important; font-weight: 400 !important; } .iluma-i-accessories-promo .content-left .banner-title img:first-of-type { display: none; } .iluma-i-accessories-promo .content-left .banner-title span { margin-top: 15px; color: turquoise; font-weight: bold !important; font-size: clamp(34px, 2vw, 55px) !important; width: 100%; } .iluma-i-accessories-promo .content-left .banner-title img { margin-top: 5px; object-fit: contain; width: 100%; max-width: 95% !important; } .iluma-i-accessories-promo .content-left .banner-subtitle2 { color: black; text-align: start; font-size: clamp(15px, 1.5vw, 25px) !important; margin-top: auto !important; } @media (max-width: 992px) { .iluma-i-accessories-promo .content-left { width: 100% !important; max-width: 100% !important; } .iluma-i-accessories-promo .content-left .content-info { justify-content: flex-start; max-height: 50%; } .iluma-i-accessories-promo .content-left .content-info .buttons-container { justify-content: center !important; } .iluma-i-accessories-promo .content-left .banner-title { padding-top: 0; text-align: center; margin-bottom: 0 !important; } .iluma-i-accessories-promo .content-left .banner-title span { margin-top: 0; margin-bottom: 10px; } .iluma-i-accessories-promo .content-left .banner-title img:first-of-type { display: block; max-width: 76% !important; margin-inline: auto; margin-bottom: 2%; margin-top: 1%; } .iluma-i-accessories-promo .content-left .banner-title img:not(:first-of-type) { display: none; } .iluma-i-accessories-promo .content-left .banner-subtitle2 { text-align: center; } } .errorPageWrapper { background: #f6f4f0; padding-inline: 20px; } .errorPageWrapper .errorPageContainer { align-items: center; display: flex; flex-flow: column; justify-content: center; text-align: center; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container { display: flex; text-align: start; flex-flow: row; justify-content: center; padding-bottom: 20vh; width: auto; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent { margin-inline-end: 20px; margin-bottom: 8px; position: relative; text-align: start; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent { margin-inline-end: 0; margin-bottom: 8px; position: relative; text-align: start; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item { text-decoration: underline; text-underline-offset: 0.1rem; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper { padding-bottom: 100%; padding-inline: 0; padding-top: 0; align-items: center; background: #34303d; border-radius: 3px; color: #fffdfb; display: flex; justify-content: space-between; min-height: 80px; min-width: 170px; position: relative; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper:hover { background: #f2ebb9; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper:hover span { color: #34303d; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper svg.gold-in { bottom: 18px; position: absolute; inset-inline-end: 18px; min-width: 20px; transform: scaleX(var(--flip-value)); } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper > div { align-items: flex-start; display: flex; justify-content: flex-start; color: #fffdfb; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper > div .imageContainer { bottom: -45%; height: 131px; min-width: 96px; position: absolute; width: 120px; border-radius: 3px; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper > div .imageContainer img { height: auto; max-width: 100%; border-style: none; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper > div span { height: 131px; min-width: 96px; position: absolute; width: 96px; border-radius: 3px; top: 5px; inset-inline-start: 10px; font-size: 20px; line-height: 1.5; } .errorPageWrapper .errorPageContainer article { display: block; width: auto; } .errorPageWrapper .errorPageContainer article header h1 { max-width: 40vw; color: #34303d; font-size: 40px; letter-spacing: -2px; line-height: 1.38; margin-bottom: 42px; } .errorPageWrapper .errorPageContainer article p.error-page__message { color: #34303d; font-weight: 500; line-height: 1.69; margin-top: 0; font-size: 20px; margin-bottom: 72px; } .errorPageWrapper .errorPageContainer:has(.zyn-coming-soon) > article { display: contents; } .errorPageWrapper .errorPageContainer:has(.zyn-coming-soon) > *, .errorPageWrapper .errorPageContainer:has(.zyn-coming-soon) > article > * { order: 3; } .errorPageWrapper .errorPageContainer:has(.zyn-coming-soon) > article > header { order: 1; } .errorPageWrapper .errorPageContainer:has(.zyn-coming-soon) > .zyn-coming-soon { order: 2; } .errorPageWrapper .errorPageContainer:has(.zyn-coming-soon) > article > p { order: 3; } .errorPageWrapper .errorPageContainer:has(.zyn-coming-soon) > nav.error-page__nav-container { order: 4; } .errorPageWrapper .errorPageContainer .zyn-coming-soon { width: 100%; max-width: 900px; margin-bottom: 48px; border-radius: 3px; overflow: hidden; } .errorPageWrapper .errorPageContainer .zyn-coming-soon picture, .errorPageWrapper .errorPageContainer .zyn-coming-soon img { display: block; width: 100%; } .errorPageWrapper .errorPageContainer .zyn-coming-soon img { height: auto; } @media screen and (max-width: 991px) { .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper { min-width: 130px; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper > div .imageContainer { bottom: -60%; width: 96px; } } @media screen and (max-width: 767px) { .errorPageWrapper .errorPageContainer nav.error-page__nav-container { flex-direction: column; min-width: 100%; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent { margin-inline-end: unset; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper { padding-bottom: unset; min-width: 170px; min-height: 150px; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper svg.gold-in { bottom: unset; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper > div { align-items: center; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper > div .imageContainer { position: unset; max-height: fit-content; } .errorPageWrapper .errorPageContainer nav.error-page__nav-container .notFoundComponent > .notFoundComponent a.error-page__nav-item .error-page__item-wrapper > div span { position: unset; max-height: fit-content; font-size: 16px; min-width: 100%; } .errorPageWrapper .errorPageContainer article header h1 { font-size: 30px; max-width: 100%; } .errorPageWrapper .errorPageContainer .zyn-coming-soon { max-width: 100%; margin-bottom: 32px; } } .error500-header { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; transition: all 0.6s ease; } .error500-header__holder { background-color: #ffffff; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05); transition: all 0.6s ease; position: relative; padding: 10px; } .error500-header__logo { display: flex; max-width: 80px; height: 60px; margin-inline: auto; padding: 20px; justify-content: center; } .error500-header__logo img { height: fit-content; object-fit: contain; height: 100%; } .thankYouWrapper.error500 { min-height: 68vh; background-color: #f6f4f0; display: flex; justify-content: center; align-items: center; } .thankYouWrapper.error500 h1 { font-size: clamp(44px, 36.7752293578px + 1.6055045872vw, 58px); margin-bottom: 30px; text-align: center; } .thankYouWrapper.error500 p { font-size: 16px; margin-bottom: 30px; text-align: center; } .error500-footer { background-color: #34303d; padding-top: 60px; } .error500-footer__middle { display: flex; align-items: center; justify-content: center; margin-bottom: 60px; gap: 15px; } .error500-footer__logo { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; } .error500-footer__logo p { color: rgba(255, 253, 251, 0.5); font-size: 12px; } .error500-footer__bottom { background-color: #27242d; padding: 20px 0; } .error500-footer__bottom p { color: rgba(255, 253, 251, 0.5); font-size: 16px; text-align: center; } .error500-footer__bottom p[lang=ar] { font-family: tahoma, sans-serif; } @media screen and (max-width: 768px) { .error500-header__logo { max-width: 65px; height: 30px; margin: 18px auto; } .error500-header__holder .container { min-height: 66px; } .thankYouWrapper.error500 { margin-top: 66px; } .error500-footer { padding-top: 30px; } .error500-footer__middle { flex-direction: column; align-items: center; justify-content: flex-start; margin-bottom: 15px; gap: 30px; } .error500-footer__logo { flex-direction: column; margin-bottom: 30px; } .error500-footer__logo p { color: #fffdfb; font-size: 14px; } .error500-footer__bottom { padding: 30px 0; } .error500-footer__bottom p { font-size: 14px; } } .zyn-table { --zyn-table-header-bg: #29b6e8; --zyn-table-stripe-bg: #e4f4fc; --zyn-table-gutter: 3px; width: 100%; margin-bottom: var(--news-body-spacing, 24px); border-collapse: collapse; text-align: start; } .zyn-table th, .zyn-table td { padding: 20px; border: var(--zyn-table-gutter) solid #ffffff; vertical-align: top; text-align: start; } .zyn-table thead th { font-size: clamp(15px, 14.4839449541px + 0.1146788991vw, 16px); background-color: var(--zyn-table-header-bg); color: #ffffff; font-weight: 600; line-height: 1.3; } .zyn-table tbody td { font-size: clamp(14px, 12.9678899083px + 0.2293577982vw, 16px); background-color: #ffffff; line-height: 1.5; } .zyn-table tbody tr:nth-child(odd) td { background-color: var(--zyn-table-stripe-bg); } @media (max-width: 768px) { .zyn-table { display: block; overflow-x: auto; } .zyn-table th, .zyn-table td { min-width: 150px; padding: 14px; } } .icons-data-list { max-width: 600px; } .icons-data-list .list-item .item-header { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .icons-data-list .list-item .item-header .icon-img img { margin-top: 0; } .icons-data-list .list-item .item-body { padding-bottom: 15px; } .faq-section .accordion { --bs-accordion-border-color: transparent; --bs-accordion-active-color: var(--default-text-color); --bs-accordion-active-bg: transparent; --button-width: 18px; --accordion-gap: 20px; --background-color: transparent; --border-bottom: solid 1px #ddd; } .faq-section .accordion .accordion-item { background-color: var(--background-color); border-bottom: var(--border-bottom); color: var(--default-text-color); } .faq-section .accordion .accordion-item .accordion-header, .faq-section .accordion .accordion-item button { color: var(--default-text-color); } .faq-section .accordion .accordion-item a:not([class]) { text-decoration: underline; } .faq-section .accordion .accordion-button { box-shadow: unset; font-size: 16px; line-height: 1.5; text-wrap: pretty; } .faq-section .accordion .accordion-button:empty { display: none; } .faq-section .accordion .accordion-button p { margin-bottom: 16px; } .faq-section .accordion .accordion-button p:last-child { margin-bottom: 0; } .faq-section .accordion .accordion-button ul, .faq-section .accordion .accordion-button ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .faq-section .accordion .accordion-button li { list-style: disc; } .faq-section .accordion .accordion-button { font-weight: 600; display: inline-flex; flex-direction: row-reverse; justify-content: space-between; gap: var(--accordion-gap); padding-inline: 0; background-color: transparent; padding-block: 12px; position: relative; } .faq-section .accordion .accordion-button::before { content: "-"; padding-bottom: 2px; min-width: var(--button-width); min-height: var(--button-width); color: var(--default-text-color); display: flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; font-size: 40px; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-text-color); rotate: 180deg; transition: all 0.6s ease; } .faq-section .accordion .accordion-button::after { display: none; } .faq-section .accordion .accordion-button.collapsed::before { padding-bottom: 0; rotate: 0deg; } .faq-section .accordion .accordion-collapse, .faq-section .accordion .accordion-content { transition: height 0.35s ease, opacity 0.2s ease; overflow: hidden; will-change: height; } .faq-section .accordion .accordion-collapse.collapsing, .faq-section .accordion .accordion-content.collapsing { transition: height 0.35s ease; } .faq-section .accordion .accordion-collapse.show, .faq-section .accordion .accordion-content.show { overflow: visible; } .faq-section .accordion .accordion-body { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .faq-section .accordion .accordion-body:empty { display: none; } .faq-section .accordion .accordion-body p { margin-bottom: 16px; } .faq-section .accordion .accordion-body p:last-child { margin-bottom: 0; } .faq-section .accordion .accordion-body ul, .faq-section .accordion .accordion-body ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .faq-section .accordion .accordion-body li { list-style: disc; } .faq-section .accordion .accordion-body { padding-inline-start: 0; padding-block: 12px; } .faq-section.product-details-toggle .accordion { --button-width: 32px; } .faq-section.product-details-toggle .accordion-header .accordion-button { font-size: clamp(22px, 19.9357798165px + 0.4587155963vw, 26px); font-weight: normal; } .faq-section.product-details-toggle .accordion-header .accordion-button::before { mask-image: url(/images/icons/chevron-with-circle-down.svg?v=RGBlmHu282DV9cjmS9mLx5IF2bI); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-with-circle-down.svg?v=RGBlmHu282DV9cjmS9mLx5IF2bI); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-text-color); font-size: 60px; } .faq-section.product-details-toggle .accordion-content { max-width: 80%; margin: auto; } .faq-section.product-details-toggle .accordion-content .accordion-body { padding-bottom: 40px; } .faq-section.product-details-toggle .accordion-content .accordion-body .images { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 30px; } .faq-section.product-details-toggle .accordion-content .accordion-body .images img { flex: 0 0 20%; max-width: 50%; max-height: 175px; object-fit: contain; } .faq-section.product-details-toggle .accordion-content .accordion-body a { text-decoration: underline; } .faq-section.zyn-faq-section { --zyn-card-bg: #f2f2f2; --zyn-body-color: #5a6180; --zyn-question-icon: 22px; --zyn-columns-gap: 32px; --default-text-color: #00166f; --default-text-color-inverse: #ffffff; color: #00166f; } .faq-section.zyn-faq-section .zyn-faq-container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--zyn-columns-gap); align-items: start; } @media (max-width: 992px) { .faq-section.zyn-faq-section .zyn-faq-container { grid-template-columns: minmax(0, 1fr); --zyn-columns-gap: 24px; } } .faq-section.zyn-faq-section .zyn-faq-intro { background-color: var(--zyn-card-bg); border-radius: 20px; padding: 40px; } @media (max-width: 992px) { .faq-section.zyn-faq-section .zyn-faq-intro { padding: 24px; } } .faq-section.zyn-faq-section .zyn-faq-intro .titles-container { --spacing: 16px; margin-bottom: 24px; } .faq-section.zyn-faq-section .accordion { --border-bottom: solid 1px #e3e5ed; } .faq-section.zyn-faq-section .accordion-button { flex-direction: row; align-items: center; gap: 12px; padding-block: 18px; } .faq-section.zyn-faq-section .accordion-button::before { content: ""; mask-image: url(/images/icons/question-circle.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/question-circle.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #00166f; width: var(--zyn-question-icon); height: var(--zyn-question-icon); min-width: var(--zyn-question-icon); min-height: var(--zyn-question-icon); flex-shrink: 0; padding-bottom: 0; font-size: 0; rotate: 0deg; } .faq-section.zyn-faq-section .accordion-button::after { content: ""; display: block; width: var(--button-width); height: var(--button-width); min-width: var(--button-width); flex-shrink: 0; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #00166f; background-image: none; transform: none; rotate: 180deg; transition: all 0.6s ease; } .faq-section.zyn-faq-section .accordion-button.collapsed::after { rotate: 0deg; } .faq-section.zyn-faq-section .accordion-button .question-text { flex: 1; text-align: start; } .faq-section.zyn-faq-section .accordion-body { padding-inline-start: calc(var(--zyn-question-icon) + 12px); padding-top: 0; padding-bottom: 24px; color: var(--zyn-body-color); } .news-listing-grid-section .news-listing-grid-container { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-listing-grid-section .news-listing-grid-container:where(ul, ol) { margin-bottom: 0; } .news-listing-grid-section .news-listing-grid-container > .col, .news-listing-grid-section .news-listing-grid-container > .col:is(:first-child, :last-child), .news-listing-grid-section .news-listing-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .news-listing-grid-section .news-listing-grid-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-listing-grid-section .news-listing-grid-container:where(ul, ol) { margin-bottom: 0; } .news-listing-grid-section .news-listing-grid-container > .col, .news-listing-grid-section .news-listing-grid-container > .col:is(:first-child, :last-child), .news-listing-grid-section .news-listing-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .news-listing-grid-section .news-listing-grid-container { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .news-listing-grid-section .news-listing-grid-container:where(ul, ol) { margin-bottom: 0; } .news-listing-grid-section .news-listing-grid-container > .col, .news-listing-grid-section .news-listing-grid-container > .col:is(:first-child, :last-child), .news-listing-grid-section .news-listing-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .news-listing-grid-section .news-card { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #f6f4f0; margin-top: -1px; position: relative; } .news-listing-grid-section .news-card::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .news-listing-grid-section .news-card.half-bg::before { height: 50%; } .news-listing-grid-section .news-card > * { isolation: isolate; } .news-listing-grid-section .news-card { display: block; height: 100%; transition: all 0.6s ease; } .news-listing-grid-section .news-card:hover { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); } .news-listing-grid-section .news-card .img-container { height: unset; aspect-ratio: 9/5; } .news-listing-grid-section .news-card .card-body { --spacing: 20px; padding: 32px; } @media (max-width: 992px) { .news-listing-grid-section .news-card .card-body { --spacing: 16px; padding: 20px; } } .news-listing-grid-section .news-card .card-body > *:not(:last-child) { margin-bottom: var(--spacing); display: block; } .news-listing-grid-section .news-card .card-body .card-title { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-weight: 600; } .news-listing-grid-section .news-card .card-body .news-date { font-weight: 600; } .explore-grid-section .explore-grid { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .explore-grid-section .explore-grid:where(ul, ol) { margin-bottom: 0; } .explore-grid-section .explore-grid > .col, .explore-grid-section .explore-grid > .col:is(:first-child, :last-child), .explore-grid-section .explore-grid > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .explore-grid-section .explore-grid { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .explore-grid-section .explore-grid:where(ul, ol) { margin-bottom: 0; } .explore-grid-section .explore-grid > .col, .explore-grid-section .explore-grid > .col:is(:first-child, :last-child), .explore-grid-section .explore-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .explore-grid-section .explore-grid { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .explore-grid-section .explore-grid:where(ul, ol) { margin-bottom: 0; } .explore-grid-section .explore-grid > .col, .explore-grid-section .explore-grid > .col:is(:first-child, :last-child), .explore-grid-section .explore-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } .explore-grid-section .explore-card { position: relative; --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #27242d; --default-text-color: white; --default-text-color-inverse: #34303d; color: var(--default-text-color); margin-top: -1px; position: relative; } .explore-grid-section .explore-card::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .explore-grid-section .explore-card.half-bg::before { height: 50%; } .explore-grid-section .explore-card > * { isolation: isolate; } .explore-grid-section .explore-card { display: block; height: 100%; } .explore-grid-section .explore-card .img-container { position: relative; height: unset; aspect-ratio: 400/300; } .explore-grid-section .explore-card .img-container::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%); opacity: 0.3; z-index: 3; transition: all 1s ease; } .explore-grid-section .explore-card .card-body { position: absolute; inset: 0; padding: 32px; --spacing: 20px; z-index: 5; display: flex; flex-direction: column; justify-content: end; } .explore-grid-section .explore-card .card-body > *:not(:last-child) { margin-bottom: var(--spacing); display: block; } .explore-grid-section .explore-card .card-body .card-title { font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-weight: 600; } .explore-grid-section .explore-card .card-body .news-date { font-weight: 600; } .explore-grid-section .explore-card:hover .img-container::before { opacity: 0.7; } @media (max-width: 992px) { .explore-grid-section .explore-card .img-container::before { opacity: 0.7; } } @media (max-width: 992px) { .stories-section { --section-pt: 0; } .stories-section > .container { padding-inline: 0; } } .stories-section .stories-container { display: flex; flex-wrap: wrap; --gap: 100px; gap: var(--gap); } .stories-section .stories-container:where(ul, ol) { margin-bottom: 0; } .stories-section .stories-container > .col, .stories-section .stories-container > .listingItemDIV { flex: unset; } .stories-section .stories-container > .col:where(:nth-child(odd)), .stories-section .stories-container > .listingItemDIV:where(:nth-child(odd)) { width: calc(46% - var(--gap) / 2); } .stories-section .stories-container > .col:where(:nth-child(even)), .stories-section .stories-container > .listingItemDIV:where(:nth-child(even)) { width: calc(54% - var(--gap) / 2); } @media (max-width: 992px) { .stories-section .stories-container { --gap: 0px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .stories-section .stories-container:where(ul, ol) { margin-bottom: 0; } .stories-section .stories-container > .col, .stories-section .stories-container > .col:is(:first-child, :last-child), .stories-section .stories-container > .listingItemDIV { flex: unset; width: var(--col-width); } .stories-section .stories-container { flex-direction: column-reverse; } } .stories-section .stories-container .col { display: flex; align-items: center; } .stories-section .stories-container .img-container { max-height: 500px; } @media (max-width: 992px) { .stories-section .stories-container .stories-body { position: relative; z-index: 2; --section-pt: calc(100px - 20px); --section-pb: calc(100px - 20px); padding-top: var(--section-pt); padding-bottom: var(--section-pb); } } .iqos-support-toolbar-section .device-card { position: relative; display: block; padding: 10px; height: 100%; --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #f6f4f0; margin-top: -1px; position: relative; } .iqos-support-toolbar-section .device-card::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .iqos-support-toolbar-section .device-card.half-bg::before { height: 50%; } .iqos-support-toolbar-section .device-card > * { isolation: isolate; } .iqos-support-toolbar-section .device-card::before { content: ""; position: absolute; top: unset; bottom: 0; left: 0; width: 100%; height: 100%; max-height: 0; transition: all 0.6s ease; } .iqos-support-toolbar-section .device-card:hover::before, .iqos-support-toolbar-section .device-card.active::before { max-height: 100%; } .iqos-support-toolbar-section .device-card .card-img { width: 100%; margin-bottom: 10px; } .iqos-support-toolbar-section .device-card .card-img img { width: 100%; object-fit: contain; } .iqos-support-toolbar-section .device-card .card-title { font-size: clamp(14px, 12.9678899083px + 0.2293577982vw, 16px); text-align: center; padding-inline: 10px; } .support-listing-section.version-small .support-card .card-title { font-size: clamp(21px, 18.4197247706px + 0.5733944954vw, 26px); } .support-listing-section .card-img { display: block; } .support-listing-section.title-arrow .support-card .card-title { position: relative; width: fit-content; display: inline-flex; align-items: start; gap: 16px; } .support-listing-section.title-arrow .support-card .card-title::after { content: ""; display: block; width: 26px; min-width: 26px; aspect-ratio: 1; margin-top: 6px; transition: all 0.6s ease; mask-image: url(/images/icons/arrow-right.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/arrow-right.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-text-color); } @media (max-width: 992px) { .support-listing-section.title-arrow .support-card .card-title::after { margin-top: 3px; } } .support-listing-section.title-arrow .support-card:hover .card-title::after { translate: 8px 0; } .support-listing-section .support-listing-grid { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .support-listing-section .support-listing-grid:where(ul, ol) { margin-bottom: 0; } .support-listing-section .support-listing-grid > .col, .support-listing-section .support-listing-grid > .col:is(:first-child, :last-child), .support-listing-section .support-listing-grid > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .support-listing-section .support-listing-grid { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .support-listing-section .support-listing-grid:where(ul, ol) { margin-bottom: 0; } .support-listing-section .support-listing-grid > .col, .support-listing-section .support-listing-grid > .col:is(:first-child, :last-child), .support-listing-section .support-listing-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .support-listing-section .support-listing-grid { --gap: 32px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .support-listing-section .support-listing-grid:where(ul, ol) { margin-bottom: 0; } .support-listing-section .support-listing-grid > .col, .support-listing-section .support-listing-grid > .col:is(:first-child, :last-child), .support-listing-section .support-listing-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } .support-listing-section .support-card { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: visible; } .support-listing-section .support-card .card-img { position: relative; width: 100%; aspect-ratio: 400/300; margin-bottom: 20px; background-color: #f6f4f0; overflow: hidden; } .support-listing-section .support-card .card-img img { width: 100%; height: 100%; object-fit: cover; } .support-listing-section .support-card .card-info { flex: 1 1 0; } .support-listing-section .support-card .card-title { font-size: clamp(24px, 19.871559633px + 0.9174311927vw, 32px); font-weight: 600; margin-bottom: 16px; } .support-listing-section .support-card .card-btn { margin-top: 16px; width: fit-content; } .blends-listing-section { --inner-image-width: 70%; --inner-image-width-active: 100%; --image-position: bottom; overflow-x: hidden; } .blends-listing-section.v2 { --inner-image-width: 65%; --inner-image-width-active: 80%; --image-position: center; --image-position-active: center; } .blends-listing-section.v2 .swiper-slide-active .blend-card .img-container-contained { translate: 0 -20%; } .blends-listing-section .blend-card { position: relative; transition: all 1s ease; padding-inline: 50px; margin-bottom: 20px; } @media (max-width: 1200px) { .blends-listing-section .blend-card { padding-inline: 30px; } } @media (max-width: 768px) { .blends-listing-section .blend-card { padding-inline: 20px; } } @media (max-width: 576px) { .blends-listing-section .blend-card { padding-inline: 10px; } } .blends-listing-section .blend-card .bg-img { overflow: hidden; border-radius: 50%; filter: brightness(0.8); transition: all 1s ease; } .blends-listing-section .blend-card .card-img { position: relative; padding: 16px; width: 100%; aspect-ratio: 1; display: flex; justify-content: center; transition: all 1s ease; scale: 0.9; } .blends-listing-section .blend-card .card-img .img-container-contained { transition: all 1s ease; max-width: var(--inner-image-width); height: 100%; } .blends-listing-section .blend-card .card-img .img-container-contained img { object-position: var(--image-position); transition: all 1s ease; } .blends-listing-section .blend-card .card-info { position: relative; text-align: center; transition: all 1s ease; opacity: 0; margin-top: 16px; } .blends-listing-section .blend-card .card-info .card-title { font-size: clamp(26px, 22.9036697248px + 0.6880733945vw, 32px); font-weight: 600; margin-bottom: 16px; } .blends-listing-section .swiper-slide-active .blend-card .bg-img { filter: brightness(1); } .blends-listing-section .swiper-slide-active .blend-card .card-img { scale: 1; align-items: center; } .blends-listing-section .swiper-slide-active .blend-card .card-img .img-container-contained { max-width: var(--inner-image-width-active); } .blends-listing-section .swiper-slide-active .blend-card .card-img .img-container-contained img { object-position: var(--image-position-active); } .blends-listing-section .swiper-slide-active .blend-card .card-info { opacity: 1; } .agents-grid-section .agents-grid-container { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .agents-grid-section .agents-grid-container:where(ul, ol) { margin-bottom: 0; } .agents-grid-section .agents-grid-container > .col, .agents-grid-section .agents-grid-container > .col:is(:first-child, :last-child), .agents-grid-section .agents-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .agents-grid-section .agents-grid-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .agents-grid-section .agents-grid-container:where(ul, ol) { margin-bottom: 0; } .agents-grid-section .agents-grid-container > .col, .agents-grid-section .agents-grid-container > .col:is(:first-child, :last-child), .agents-grid-section .agents-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 768px) { .agents-grid-section .agents-grid-container { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .agents-grid-section .agents-grid-container:where(ul, ol) { margin-bottom: 0; } .agents-grid-section .agents-grid-container > .col, .agents-grid-section .agents-grid-container > .col:is(:first-child, :last-child), .agents-grid-section .agents-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .agents-grid-section .card-item { --transition: all 1s ease; display: block; } .agents-grid-section .card-item .content-wrapper { --padding-top: 20px; --arrow-width: 28px; position: relative; display: block; padding-top: var(--padding-top); padding-inline-end: calc(var(--arrow-width) + 20px); } .agents-grid-section .card-item .content-wrapper::after { content: ""; position: absolute; mask-image: url(/images/icons/arrow-right.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/arrow-right.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-text-color); width: var(--arrow-width); aspect-ratio: 1; top: var(--padding-top); inset-inline-end: 0; transition: var(--transition); } .agents-grid-section .card-item .content-wrapper:hover::after { translate: -10px 0; } .agents-grid-section .card-item .card-title { font-size: clamp(22px, 20.9678899083px + 0.2293577982vw, 24px); font-weight: 600; margin-bottom: 12px; } .videos-grid-section { position: relative; } .videos-grid-section.v2 .videos-grid-container .video-card { aspect-ratio: 400/450; } .videos-grid-section.v2 .videos-grid-container .video-card .card-title { text-align: start; font-size: clamp(22px, 20.9678899083px + 0.2293577982vw, 24px); margin-bottom: 20px; } .videos-grid-section .videos-grid-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .videos-grid-section .videos-grid-container:where(ul, ol) { margin-bottom: 0; } .videos-grid-section .videos-grid-container > .col, .videos-grid-section .videos-grid-container > .col:is(:first-child, :last-child), .videos-grid-section .videos-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } .videos-grid-section .videos-grid-container.three-items { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .videos-grid-section .videos-grid-container.three-items:where(ul, ol) { margin-bottom: 0; } .videos-grid-section .videos-grid-container.three-items > .col, .videos-grid-section .videos-grid-container.three-items > .col:is(:first-child, :last-child), .videos-grid-section .videos-grid-container.three-items > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .videos-grid-section .videos-grid-container.three-items { --gap: 16px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .videos-grid-section .videos-grid-container.three-items:where(ul, ol) { margin-bottom: 0; } .videos-grid-section .videos-grid-container.three-items > .col, .videos-grid-section .videos-grid-container.three-items > .col:is(:first-child, :last-child), .videos-grid-section .videos-grid-container.three-items > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 768px) { .videos-grid-section .videos-grid-container.three-items { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .videos-grid-section .videos-grid-container.three-items:where(ul, ol) { margin-bottom: 0; } .videos-grid-section .videos-grid-container.three-items > .col, .videos-grid-section .videos-grid-container.three-items > .col:is(:first-child, :last-child), .videos-grid-section .videos-grid-container.three-items > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 992px) { .videos-grid-section .videos-grid-container { --gap: 16px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .videos-grid-section .videos-grid-container:where(ul, ol) { margin-bottom: 0; } .videos-grid-section .videos-grid-container > .col, .videos-grid-section .videos-grid-container > .col:is(:first-child, :last-child), .videos-grid-section .videos-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 768px) { .videos-grid-section .videos-grid-container { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .videos-grid-section .videos-grid-container:where(ul, ol) { margin-bottom: 0; } .videos-grid-section .videos-grid-container > .col, .videos-grid-section .videos-grid-container > .col:is(:first-child, :last-child), .videos-grid-section .videos-grid-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .videos-grid-section .videos-grid-container .video-card { position: relative; display: block; width: 100%; aspect-ratio: 614/450; padding: 32px; display: flex; flex-direction: column; justify-content: end; color: white; } @media (max-width: 768px) { .videos-grid-section .videos-grid-container .video-card { padding-inline: 16px; } } .videos-grid-section .videos-grid-container .video-card .video-text-overlay { position: relative; z-index: 10; } .videos-grid-section .videos-grid-container .video-card .card-title { text-wrap: pretty; font-size: clamp(26px, 20.8394495413px + 1.1467889908vw, 36px); line-height: 1.3; font-weight: 600; } .videos-grid-section .videos-grid-container .video-card .card-title.regular { font-weight: 400; } .videos-grid-section .videos-grid-container .video-card .card-title { text-align: center; } .iqos-products-listing-section .product-card { position: relative; border-radius: 15px; padding: 40px 32px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; height: 100%; } .iqos-products-listing-section .product-card .card-title { font-size: clamp(22px, 19.4197247706px + 0.5733944954vw, 27px); font-weight: 600; margin-bottom: 10px; } .big-cards-section { overflow-x: hidden; } .big-cards-section .big-cards-container .big-card .img-container { margin-bottom: 20px; } .big-cards-section .big-cards-container .big-card .card-title { font-size: clamp(22px, 20.9678899083px + 0.2293577982vw, 24px); line-height: 1.3; font-weight: 600; } .big-cards-section .big-cards-container .container-header { position: relative; } .big-cards-section .big-cards-container .container-header .swiper-nav { --arrow-size: 50px; position: absolute; top: 50%; left: 0; width: 100%; translate: 0 -50%; justify-content: end; } @media (max-width: 992px) { .big-cards-section .big-cards-container .container-header .swiper-nav { position: static; } } .big-cards-section .big-cards-container .container-header .swiper-nav > button { --arrow-bg-color: #34303d; --arrow-color: white; --arrow-border-color: #34303d; --arrow-bg-color-hover: white; --arrow-color-hover: #34303d; --arrow-border-color-hover: #34303d; --arrow-size: 40px; --arrow-inner-inset: 33%; } .big-cards-section.v2 .big-cards-container .container-header .swiper-nav > button { --arrow-size: 40px; --arrow-inner-inset: 28%; --arrow-bg-color: white; --arrow-border-color: transparent; --arrow-color: #34303d; --arrow-bg-color-hover: rgba(0, 0, 0, 0.1); --arrow-border-color-hover: transparent; --arrow-color-hover: #34303d; } @media (max-width: 992px) { .big-cards-section.v2 .big-cards-container .container-header .swiper-nav { display: none; } } .big-cards-section.v2 .big-cards-container .swiper-big-cards .swiper-wrapper .swiper-slide .big-card { position: relative; display: flex; align-items: flex-end; width: fit-content; aspect-ratio: 345/380; } .big-cards-section.v2 .big-cards-container .swiper-big-cards .swiper-wrapper .swiper-slide .big-card .img-container { position: relative; width: 100%; overflow: hidden; margin-bottom: 0; } .big-cards-section.v2 .big-cards-container .swiper-big-cards .swiper-wrapper .swiper-slide .big-card .img-container::before { content: ""; position: absolute; inset: 0; background: #000000; background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%); z-index: 5; opacity: 0.5; } .big-cards-section.v2 .big-cards-container .swiper-big-cards .swiper-wrapper .swiper-slide .big-card .card-info { position: absolute; padding: 24px; color: white; z-index: 10; } .big-cards-section.v2 .big-cards-container .swiper-big-cards .swiper-wrapper .swiper-slide .big-card .card-info .card-title { font-size: clamp(22px, 19.9357798165px + 0.4587155963vw, 26px); margin-bottom: 10px; font-weight: 400; } .big-cards-section.v2 .big-cards-container .swiper-big-cards .swiper-wrapper .swiper-slide .big-card .card-info .description { margin-bottom: 0; } .big-cards-section.v2 .big-cards-container .swiper-big-cards .swiper-wrapper .swiper-slide .big-card .card-info .description > span { color: #00d1d2; } .find-a-store-section .map-wrapper { position: relative; height: 100vh; } .find-a-store-section .map-wrapper .store-locator-panel { position: absolute; z-index: 10; padding: 15px 25px; top: 50%; translate: 0 -50%; height: 80%; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-search .store-locator-search-bar { margin-bottom: 30px; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-search .store-locator-search-bar .search-bar-fieldset { display: flex; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-search .store-locator-search-bar .search-bar-fieldset .store-locator-search-field { border: 0; padding: 10px 15px; width: 75%; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters { margin-bottom: 30px; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters .store-locator-filters-title { margin-bottom: 15px; font-size: 14px; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters .store-locator-filter-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters .store-locator-filter-list .storeTagFilterItem.active { --color: var(--default-text-color); --background-color: transparent; --border-color: var(--default-text-color); --hover-color: var(--default-text-color-inverse); --hover-background-color: var(--default-text-color); --hover-border-color: var(--default-text-color); display: inline-block; border: 2px solid var(--border-color); background-color: var(--background-color); color: var(--color); padding: 5px 32px 9px; border-radius: 24px; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; text-decoration: none; transition: all 0.6s ease; text-wrap: nowrap; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters .store-locator-filter-list .storeTagFilterItem.active:empty { display: none; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters .store-locator-filter-list .storeTagFilterItem.active:hover { background-color: var(--hover-background-color); color: var(--hover-color); border-color: var(--hover-border-color); } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters .store-locator-filter-list .storeTagFilterItem.active { --color: var(--default-text-color-inverse); --background-color: var(--default-text-color); --border-color: var(--default-text-color); --hover-color: var(--default-text-color); --hover-background-color: transparent; --hover-border-color: var(--default-text-color); } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters .store-locator-filter-list .storeTagFilterItem.active:hover { --hover-color: #34303d; --hover-background-color: #00d1d2; --hover-border-color: #00d1d2; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-filters .store-locator-filter-list .storeTagFilterItem .input-checkbox { appearance: none; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores { max-height: 400px; overflow: auto; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-panel-activator { font-size: 14px; font-weight: 400; padding-bottom: 15px; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sli { padding-bottom: 15px; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sli span.title-images-holder { margin: 0; padding: 0; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sli span.title-images-holder .sn { display: flex; gap: 15px; align-items: center; font-size: 16px; font-weight: 600; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sli span.title-images-holder .sn .sales { max-height: 15px; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sli .p1 { font-size: 12px; margin-bottom: 10px; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sli .lnk { display: block; font-size: 13px; font-weight: 600; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sli .lnk:hover { color: #00d1d2; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sn { display: flex; gap: 15px; align-items: center; font-size: 16px; font-weight: 600; } .find-a-store-section .map-wrapper .store-locator-panel .store-locator-panel-stores .store-locator-stores .store-locator-store-list .sn .sales { max-height: 15px; } .find-a-store-section .map-wrapper .store-locator-map { position: relative; height: 100%; width: 100%; overflow: hidden; z-index: 5; } .find-a-store-section .gm-style-iw-d .listing-title { font-size: 16px; margin-bottom: 6px; font-weight: normal; } .find-a-store-section .gm-style-iw-d .address { margin-bottom: 8px; display: block; font-size: 13px; } .find-a-store-section .gm-style-iw-d .lnk { display: block; font-size: 13px; font-weight: 600; } .find-a-store-section .gm-style-iw-d .lnk:hover { color: #00d1d2; } .store-details-section .store-details { padding-block: 60px; } .store-details-section .store-details .back-to-storelocator { margin-bottom: 30px; --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 5px; border: none; padding: 0; } .store-details-section .store-details .back-to-storelocator::before { content: ""; display: block; width: 15px; height: 15px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); background-position: center center; background-repeat: no-repeat; background-size: contain; transition: all 0.3s ease-in-out; } .store-details-section .store-details .back-to-storelocator:hover::before { background-color: #00d1d2; translate: -6px 0; } .store-details-section .store-details .store-details-content { display: flex; flex-wrap: wrap; } .store-details-section .store-details .store-details-content .store-details-figure { flex: 0 0 50%; height: auto; max-width: 50%; } .store-details-section .store-details .store-details-content .store-details-figure .store-details-map-container { width: 100%; height: 100%; } .store-details-section .store-details .store-details-content .store-details-figure .store-details-map-container .store-details-map-wrapper { position: relative; overflow: hidden; width: 100%; height: 100%; } .store-details-section .store-details .store-details-content .store-details-figure .store-details-map-container .store-details-map-wrapper .store-details-map { width: 100%; height: 100%; } .store-details-section .store-details .store-details-content .store-details-info { flex: 0 0 50%; max-width: 50%; padding: 30px; background-color: #00d1d2; } .store-details-section .store-details .store-details-content .store-details-info .links-holder a { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 20px; } .store-details-section .store-details .store-details-content .store-details-info .links-holder a:hover { text-decoration: underline; } .store-details-section .store-details .store-details-content .store-details-info .links-holder .services { margin-bottom: 20px; font-size: 16px; } .store-details-section .store-details .store-details-content .store-details-info .links-holder .services span { display: flex; margin-bottom: 10px; align-items: center; gap: 10px; font-size: 16px; } .store-details-section .store-details .store-details-content .store-details-info .hours { margin-bottom: 30px; } .store-details-section .store-details .store-details-content .store-details-info .hours .title-section { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .store-details-section .store-details .store-details-content .store-details-info .hours .title-section img { width: 24px; height: 24px; object-fit: contain; translate: 0 50%; } .store-details-section .store-details .store-details-content .store-details-info .hours .title-section .store-details-info-title { margin-bottom: 0; } .store-details-section .store-details .store-details-content .store-details-info .hours ul li { font-size: 16px; margin-bottom: 10px; display: flex; gap: 10px; } .store-details-section .store-details .store-details-content .store-details-info .hours ul li span:first-child { min-width: 120px; } .page-card-section { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #f6f4f0; margin-top: -1px; position: relative; } .page-card-section::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .page-card-section.half-bg::before { height: 50%; } .page-card-section > * { isolation: isolate; } .page-card-section .page-card-container { --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: white; position: relative; } .page-card-section .page-card-container::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .page-card-section .page-card-container.half-bg::before { height: 50%; } .page-card-section .page-card-container > * { isolation: isolate; } .page-card-section .page-card-container { padding-inline: 50px; } @media (max-width: 992px) { .page-card-section .page-card-container { padding-inline: var(--container-gutter-x); } } .page-card-section .page-card-container p, .page-card-section .page-card-container li { font-size: clamp(13px, 12.4839449541px + 0.1146788991vw, 14px); } .page-card-section .page-card-container ol, .page-card-section .page-card-container ul { padding-inline-start: 1.4rem; } .page-card-section .page-card-container ol li, .page-card-section .page-card-container ul li { padding-inline-start: 6px; list-style: disc; } .page-card-section .page-card-container ol { padding-inline-start: 1.2rem; } .page-card-section .page-card-container ol li { list-style: decimal; } .page-card-section .page-card-container h1, .page-card-section .page-card-container h2 { margin-bottom: 40px; } .page-card-section .page-card-container h1 { font-size: clamp(32px, 29.9357798165px + 0.4587155963vw, 36px); } .warranty-info-section .devices-grid { margin-bottom: 40px; --gap: 32px; --col-width: calc( (100% / 4) - (var(--gap) * (4 - 1) / 4) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .warranty-info-section .devices-grid:where(ul, ol) { margin-bottom: 0; } .warranty-info-section .devices-grid > .col, .warranty-info-section .devices-grid > .col:is(:first-child, :last-child), .warranty-info-section .devices-grid > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .warranty-info-section .devices-grid { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .warranty-info-section .devices-grid:where(ul, ol) { margin-bottom: 0; } .warranty-info-section .devices-grid > .col, .warranty-info-section .devices-grid > .col:is(:first-child, :last-child), .warranty-info-section .devices-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 768px) { .warranty-info-section .devices-grid { --gap: 16px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .warranty-info-section .devices-grid:where(ul, ol) { margin-bottom: 0; } .warranty-info-section .devices-grid > .col, .warranty-info-section .devices-grid > .col:is(:first-child, :last-child), .warranty-info-section .devices-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } .warranty-info-section .device-card { background-color: white; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 16px 20px; border: solid 2px transparent; height: 100%; } @media (max-width: 768px) { .warranty-info-section .device-card { padding-inline: 10px; } } .warranty-info-section .device-card.active { border-color: #34303d; } .warranty-info-section .device-card .card-img img { width: 100%; height: auto; object-fit: contain; } .warranty-info-section .device-card .card-title { font-size: 16px; font-weight: 600; } .warranty-info-section .device-warranty-info { display: none; } .warranty-info-section .device-warranty-info.active { display: block; } .warranty-info-section .device-warranty-info .info:not(:last-child) { padding-bottom: 20px; border-bottom: solid 1px #dcdcdc; margin-bottom: 20px; } .warranty-info-section .device-warranty-info h4 { font-size: 20px; font-weight: 600; } .warranty-info-section .device-warranty-info .info-container { --gap: 16px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .warranty-info-section .device-warranty-info .info-container:where(ul, ol) { margin-bottom: 0; } .warranty-info-section .device-warranty-info .info-container > .col, .warranty-info-section .device-warranty-info .info-container > .col:is(:first-child, :last-child), .warranty-info-section .device-warranty-info .info-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 768px) { .warranty-info-section .device-warranty-info .info-container { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .warranty-info-section .device-warranty-info .info-container:where(ul, ol) { margin-bottom: 0; } .warranty-info-section .device-warranty-info .info-container > .col, .warranty-info-section .device-warranty-info .info-container > .col:is(:first-child, :last-child), .warranty-info-section .device-warranty-info .info-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .warranty-info-section .device-warranty-info .info-container .col { display: flex; gap: 6px; align-items: center; } .warranty-info-section .device-warranty-info .info-container .icon { max-width: 80px; height: auto; } .warranty-split-icons-section .listTitle { font-size: clamp(20px, 17.9357798165px + 0.4587155963vw, 24px); margin-bottom: 16px; } .warranty-split-icons-section .box { display: flex; gap: 6px; align-items: center; margin-bottom: 20px; } .warranty-split-icons-section .imageWrapper img { max-width: 90px; height: auto; } .warranty-split-icons-section p { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .warranty-split-icons-section p:empty { display: none; } .warranty-split-icons-section p p { margin-bottom: 16px; } .warranty-split-icons-section p p:last-child { margin-bottom: 0; } .warranty-split-icons-section p ul, .warranty-split-icons-section p ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .warranty-split-icons-section p li { list-style: disc; } .warranty-split-icons-section p { font-size: clamp(17px, 16.4839449541px + 0.1146788991vw, 18px); line-height: 1.5; } .image-info-cards-section .image-info-cards-container { --gap: 32px; --col-width: calc( (100% / 4) - (var(--gap) * (4 - 1) / 4) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .image-info-cards-section .image-info-cards-container:where(ul, ol) { margin-bottom: 0; } .image-info-cards-section .image-info-cards-container > .col, .image-info-cards-section .image-info-cards-container > .col:is(:first-child, :last-child), .image-info-cards-section .image-info-cards-container > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 1200px) { .image-info-cards-section .image-info-cards-container { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .image-info-cards-section .image-info-cards-container:where(ul, ol) { margin-bottom: 0; } .image-info-cards-section .image-info-cards-container > .col, .image-info-cards-section .image-info-cards-container > .col:is(:first-child, :last-child), .image-info-cards-section .image-info-cards-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 992px) { .image-info-cards-section .image-info-cards-container { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .image-info-cards-section .image-info-cards-container:where(ul, ol) { margin-bottom: 0; } .image-info-cards-section .image-info-cards-container > .col, .image-info-cards-section .image-info-cards-container > .col:is(:first-child, :last-child), .image-info-cards-section .image-info-cards-container > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .image-info-cards-section .image-info-cards-container { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .image-info-cards-section .image-info-cards-container:where(ul, ol) { margin-bottom: 0; } .image-info-cards-section .image-info-cards-container > .col, .image-info-cards-section .image-info-cards-container > .col:is(:first-child, :last-child), .image-info-cards-section .image-info-cards-container > .listingItemDIV { flex: unset; width: var(--col-width); } } .image-info-cards-section .image-info-cards-container .info-card { position: relative; display: block; aspect-ratio: 300/400; width: 100%; padding: 14px; padding-bottom: 32px; --default-text-color: #34303d; --default-text-color-inverse: white; --color-section-background: #27242d; --default-text-color: white; --default-text-color-inverse: #34303d; color: var(--default-text-color); margin-top: -1px; position: relative; } .image-info-cards-section .image-info-cards-container .info-card::before { content: ""; position: absolute; background-color: var(--color-section-background); top: 0; left: 0; width: 100%; height: 100%; } .image-info-cards-section .image-info-cards-container .info-card.half-bg::before { height: 50%; } .image-info-cards-section .image-info-cards-container .info-card > * { isolation: isolate; } .image-info-cards-section .image-info-cards-container .info-card::after { content: ""; position: absolute; bottom: 32px; inset-inline-end: 14px; width: 30px; aspect-ratio: 1; mask-image: url(/images/icons/arrow-right.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/arrow-right.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: white; rotate: var(--arrow-direction); transition: all 1s ease; } .image-info-cards-section .image-info-cards-container .info-card:hover .img-container::after { opacity: 0.5; } .image-info-cards-section .image-info-cards-container .info-card:hover::after { translate: calc(10px * var(--flip-value)) 0; } .image-info-cards-section .image-info-cards-container .info-card .img-container { position: absolute; inset: 0; } .image-info-cards-section .image-info-cards-container .info-card .img-container::after { content: ""; position: absolute; inset: 0; background-color: black; opacity: 0.2; z-index: 3; transition: all 1s ease; } .image-info-cards-section .image-info-cards-container .info-card .card-body { position: relative; height: 100%; z-index: 5; display: flex; flex-direction: column; justify-content: end; } .image-info-cards-section .image-info-cards-container .info-card .card-body .card-title { font-size: clamp(22px, 20.9678899083px + 0.2293577982vw, 24px); font-weight: 600; margin-bottom: 20px; } .image-info-cards-section .image-info-cards-container .info-card .card-body .description { max-width: 88%; font-weight: 400 !important; line-height: 1.2; } .sidebar-links-section { position: relative; height: 100%; } .sidebar-links-section .sidebar-links { position: sticky; top: calc(32px + var(--header-margin-top-current)); left: 0; background-color: #f6f4f0; padding: 30px; margin-bottom: 0; transition: all 0.6s ease; } .sidebar-links-section .nav-item:not(:last-child) { margin-bottom: 24px; } .sidebar-links-section .nav-item.active .nav-link { color: #00d1d2; } .sidebar-links-section .nav-item .nav-link { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); font-weight: 600; cursor: pointer; } .sidebar-links-section .nav-item .nav-link:hover { color: #00d1d2; } .sidebar-links-section .nav-item .nav-link.active { color: #00d1d2; } .news-details-section .news-details-content { --news-body-spacing: 24px; } .news-details-section .news-details-content .news-body { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .news-details-section .news-details-content .news-body:empty { display: none; } .news-details-section .news-details-content .news-body p { margin-bottom: 16px; } .news-details-section .news-details-content .news-body p:last-child { margin-bottom: 0; } .news-details-section .news-details-content .news-body ul, .news-details-section .news-details-content .news-body ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .news-details-section .news-details-content .news-body li { list-style: disc; } .news-details-section .news-details-content .news-body { font-size: clamp(17px, 16.4839449541px + 0.1146788991vw, 18px); line-height: 1.5; } .news-details-section .news-details-content .news-body:not(:last-child) { margin-bottom: var(--news-body-spacing); } .news-details-section .news-details-content .news-body > *:last-child { margin-bottom: 0; } .news-details-section .news-details-content .news-body h1, .news-details-section .news-details-content .news-body h2, .news-details-section .news-details-content .news-body h3, .news-details-section .news-details-content .news-body h4 { margin-bottom: 20px; } .news-details-section .news-details-content .news-body h1:not(:first-child), .news-details-section .news-details-content .news-body h2:not(:first-child), .news-details-section .news-details-content .news-body h3:not(:first-child), .news-details-section .news-details-content .news-body h4:not(:first-child) { margin-top: 40px; } .news-details-section .news-details-content .news-body h1 { text-wrap: pretty; font-size: clamp(36px, 28.7752293578px + 1.6055045872vw, 50px); line-height: 1.3; font-weight: 600; letter-spacing: -1.38px; } .news-details-section .news-details-content .news-body h1.regular { font-weight: 400; } .news-details-section .news-details-content .news-body h2 { text-wrap: pretty; font-size: clamp(26px, 20.8394495413px + 1.1467889908vw, 36px); line-height: 1.3; font-weight: 600; } .news-details-section .news-details-content .news-body h2.regular { font-weight: 400; } .news-details-section .news-details-content .news-body h3 { text-wrap: pretty; font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); font-size: clamp(24px, 21.9357798165px + 0.4587155963vw, 28px); line-height: 1.3; font-weight: 600; } .news-details-section .news-details-content .news-body h3.regular { font-weight: 400; } .news-details-section .news-details-content .news-body h4 { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); font-weight: 600; } .news-details-section .news-details-content .news-body p { margin-bottom: var(--news-body-spacing); } .news-details-section .news-details-content .news-body ul, .news-details-section .news-details-content .news-body ol { margin-bottom: var(--news-body-spacing); padding-inline-start: 1.2rem; margin-inline-start: 0; } .news-details-section .news-details-content .news-body ul li, .news-details-section .news-details-content .news-body ol li { padding-inline-start: 6px; margin-bottom: 8px; } .news-details-section .news-details-content .news-body ul li:last-child, .news-details-section .news-details-content .news-body ol li:last-child { margin-bottom: 0; } .news-details-section .news-details-content .news-body ul li { list-style: disc; } .news-details-section .news-details-content .news-body ol li { list-style: decimal; } .news-details-section .news-details-content .news-body a { text-decoration: underline; transition: all 0.6s ease; } .news-details-section .news-details-content .news-body a:hover { opacity: 0.6; } .news-details-section .news-details-content .news-body strong, .news-details-section .news-details-content .news-body b { font-weight: 600; } .news-details-section .news-details-content .news-body img { display: block; max-width: 100%; height: auto; margin-block: var(--news-body-spacing); } .news-details-section .news-details-content .disclaimer { font-size: 16px; line-height: 1.5; text-wrap: pretty; } .news-details-section .news-details-content .disclaimer:empty { display: none; } .news-details-section .news-details-content .disclaimer p { margin-bottom: 16px; } .news-details-section .news-details-content .disclaimer p:last-child { margin-bottom: 0; } .news-details-section .news-details-content .disclaimer ul, .news-details-section .news-details-content .disclaimer ol { padding-inline-start: 1rem; margin-inline-start: 20px; } .news-details-section .news-details-content .disclaimer li { list-style: disc; } .news-details-section .news-details-content .disclaimer { font-size: clamp(13px, 12.4839449541px + 0.1146788991vw, 14px); line-height: 1.5; margin-top: 30px; color: #34303d; opacity: 0.7; } .news-details-section .news-details-content .button-primary-filled { margin-top: 30px; } .highlighted-news-section { --border: 1px solid #dcdcdc; --spacing: 30px; background-color: #f6f4f0; padding: 30px; } @media (max-width: 992px) { .highlighted-news-section { padding-inline: var(--container-gutter-x); } } .highlighted-news-section .main-title { font-size: clamp(15px, 14.4839449541px + 0.1146788991vw, 16px); font-weight: 600; padding-bottom: var(--spacing); margin-bottom: var(--spacing); border-bottom: var(--border); } .highlighted-news-section .news-listing { display: flex; flex-direction: column; gap: var(--spacing); } .highlighted-news-section .news-listing .news-item { padding-bottom: var(--spacing); border-bottom: var(--border); } .highlighted-news-section .news-listing .news-item .item-title { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); font-weight: 600; margin-bottom: 16px; } .highlighted-news-section .buttons-container { margin-top: var(--spacing); } .ranking-levels-section { --color-gold: #bb9a6f; --color-silver: #c0c0c0; --color-platinum: #5c6379; } .ranking-levels-section .levels-line { position: relative; display: flex; justify-content: space-between; --line-block-spacing: 16px; overflow-x: hidden; margin-bottom: 0; } .ranking-levels-section .levels-line::before { content: ""; position: absolute; top: 50%; left: 0; translate: 0 -50%; background-color: var(--color-silver); width: 100%; height: 5px; } .ranking-levels-section .levels-line .level-status { position: relative; display: flex; flex-direction: column; align-items: center; --level-color: var(--color-silver); --level-line-visibility: 1; } .ranking-levels-section .levels-line .level-status.Silver { --level-color: var(--color-silver); } .ranking-levels-section .levels-line .level-status.Gold { --level-color: var(--color-gold); } .ranking-levels-section .levels-line .level-status.Platinum { --level-color: var(--color-platinum); --level-line-visibility: 0; } .ranking-levels-section .levels-line .level-status::before { content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; width: 16px; aspect-ratio: 1; translate: -50% -50%; background-color: var(--level-color); border: solid 2px var(--color-section-background, white); z-index: 20; } .ranking-levels-section .levels-line .level-status::after { content: ""; position: absolute; top: 50%; left: 50%; translate: 0 -50%; width: 1000px; height: 5px; background-color: var(--level-color); opacity: var(--level-line-visibility); } @media (max-width: 992px) { .ranking-levels-section .levels-line .level-status:first-child::before { left: 0; translate: 0 -50%; } .ranking-levels-section .levels-line .level-status:last-child::before { left: unset; right: 0; translate: 0 -50%; } } .ranking-levels-section .levels-line .level-status .rank { font-weight: 600; font-size: 14px; margin-bottom: var(--line-block-spacing); } .ranking-levels-section .levels-line .level-status .points { font-size: 14px; color: rgba(0, 0, 0, 0.3803921569); margin-top: var(--line-block-spacing); } .products-listing-section { overflow-x: hidden; } .products-listing-section .products-grid { --gap: 32px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .products-listing-section .products-grid:where(ul, ol) { margin-bottom: 0; } .products-listing-section .products-grid > .col, .products-listing-section .products-grid > .col:is(:first-child, :last-child), .products-listing-section .products-grid > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .products-listing-section .products-grid { --gap: 32px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .products-listing-section .products-grid:where(ul, ol) { margin-bottom: 0; } .products-listing-section .products-grid > .col, .products-listing-section .products-grid > .col:is(:first-child, :last-child), .products-listing-section .products-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } @media (max-width: 576px) { .products-listing-section .products-grid { --gap: 16px; --col-width: calc( (100% / 1) - (var(--gap) * (1 - 1) / 1) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .products-listing-section .products-grid:where(ul, ol) { margin-bottom: 0; } .products-listing-section .products-grid > .col, .products-listing-section .products-grid > .col:is(:first-child, :last-child), .products-listing-section .products-grid > .listingItemDIV { flex: unset; width: var(--col-width); } } .products-listing-section .products-to-compare { margin-bottom: 60px; } .products-listing-section.title-arrow .product-card .product-title { position: relative; width: fit-content; display: inline-flex; align-items: start; gap: 16px; } .products-listing-section.title-arrow .product-card .product-title::after { content: ""; display: block; width: 26px; min-width: 26px; aspect-ratio: 1; transition: all 0.6s ease; mask-image: url(/images/icons/arrow-right.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/arrow-right.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--default-text-color); rotate: var(--arrow-direction); } @media (max-width: 992px) { .products-listing-section.title-arrow .product-card .product-title::after { margin-top: 3px; } } .products-listing-section.title-arrow .product-card .product-title:hover::after { translate: calc(8px * var(--flip-value)) 0; background-color: #00d1d2; } .products-listing-section .product-card .product-img { position: relative; } .products-listing-section .product-card .product-img.no-overlay::before { display: none; } .products-listing-section .product-card .product-img::before { content: ""; position: absolute; inset: 0; background-color: black; opacity: 0; transition: all 0.6s ease; z-index: 5; pointer-events: none; } .products-listing-section .product-card .product-img:hover::before { opacity: 0.3; } .products-listing-section .product-card .product-img .badge { position: absolute; left: 16px; top: 16px; } .products-listing-section .product-card .product-info { --spacing: 10px; margin-top: 16px; } .products-listing-section .product-card .product-info > *:not(:first-child) { margin-top: var(--spacing); } .products-listing-section .product-card .product-info .product-title, .products-listing-section .product-card .product-info .product-title a { font-size: clamp(21px, 19.4518348624px + 0.3440366972vw, 24px); font-weight: 600; text-decoration: none; } .products-listing-section .product-card .product-info .product-price { font-size: clamp(18px, 16.9678899083px + 0.2293577982vw, 20px); font-weight: 600; } .products-compare-page { --main-gap: 16px; } .products-compare-page .products-compare-section .container .disclaimer-footer { position: relative; background-color: #f6f4f0; text-align: center; margin-bottom: 60px; padding: 60px 0; background-color: transparent; } .products-compare-page .products-compare-section .container .disclaimer-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background-color: #f6f4f0; z-index: -1; } .products-compare-page .products-select-dropdowns { display: flex; gap: var(--main-gap); margin-bottom: 32px; } .products-compare-page .products-select-dropdowns .compare-dropdown-container { flex: 1 1 0; max-width: calc(50% - var(--main-gap) / 2); } @media (max-width: 992px) { .products-compare-page .products-select-dropdowns .compare-dropdown-container[data-product-index="2"] { display: none; } } .products-compare-page .products-select-dropdowns .select2-container { width: 100% !important; } .products-compare-page .products-select-dropdowns .select2-container .select2-selection--single { position: relative; padding: 30px 16px; border-radius: 3px; border: 1px solid #e0e0e0; background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding-inline: 24px 40px; outline: none; } .products-compare-page .products-select-dropdowns .select2-container .select2-selection--single .select2-selection__rendered { padding-inline: 0; color: var(--default-text-color); font-size: 16px; } .products-compare-page .products-select-dropdowns .select2-container .select2-selection--single .select2-selection__arrow { display: none; } .products-compare-page .products-select-dropdowns .select2-container .select2-selection--single::after { content: ""; position: absolute; top: 50%; inset-inline-end: 20px; translate: 0 -50%; mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/icons/chevron-down.svg?v=-1RNPD4M74kR1vXXn-5fOefEAVc); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: #34303d; width: 12px; aspect-ratio: 1; } .products-compare-page .products-select-dropdowns .select2-container .select2-dropdown { border: none; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); margin-top: 4px; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options { margin: 0; padding: 8px 0 12px !important; max-height: 442px; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option { list-style: none; margin: 0 16px 8px; padding: 0; padding-left: 24px; border-radius: 4px; border: 1px solid lightgray; background-color: #fff; box-shadow: 0 0 0 1px #e0e0e0; font-size: 16px; display: flex; align-items: center; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option:last-child { margin-bottom: 0; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option.select2-results__option--highlighted, .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option:hover { background-color: transparent; box-shadow: none; color: black; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option[aria-disabled=true] { color: #b0b0b0; background-color: #f6f6f6; cursor: default; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option .compare-option-item { display: flex; flex-direction: row-reverse; width: 100%; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option .compare-option-item .compare-option-image { flex: 0 0 65px; margin-inline-end: 16px; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option .compare-option-item .compare-option-image img { width: 65px; height: 65px; object-fit: contain; display: block; } .products-compare-page .products-select-dropdowns .select2-container .select2-results__options .select2-results__option .compare-option-item .compare-option-title { margin-block: auto; text-align: start; font-size: 18px; } .compare-partial-view .sections-wrapper .block-head .block-title { font-size: clamp(21px, 19.4518348624px + 0.3440366972vw, 24px); font-size: 24px; margin-bottom: 20px; } .compare-partial-view .sections-wrapper .listing-items-list { --gap: 16px; --col-width: calc( (100% / 3) - (var(--gap) * (3 - 1) / 3) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .compare-partial-view .sections-wrapper .listing-items-list:where(ul, ol) { margin-bottom: 0; } .compare-partial-view .sections-wrapper .listing-items-list > .col, .compare-partial-view .sections-wrapper .listing-items-list > .col:is(:first-child, :last-child), .compare-partial-view .sections-wrapper .listing-items-list > .listingItemDIV { flex: unset; width: var(--col-width); } @media (max-width: 992px) { .compare-partial-view .sections-wrapper .listing-items-list { --gap: 16px; --col-width: calc( (100% / 2) - (var(--gap) * (2 - 1) / 2) ); display: flex; flex-wrap: wrap; gap: var(--gap); } .compare-partial-view .sections-wrapper .listing-items-list:where(ul, ol) { margin-bottom: 0; } .compare-partial-view .sections-wrapper .listing-items-list > .col, .compare-partial-view .sections-wrapper .listing-items-list > .col:is(:first-child, :last-child), .compare-partial-view .sections-wrapper .listing-items-list > .listingItemDIV { flex: unset; width: var(--col-width); } } .compare-partial-view .sections-wrapper .listing-items-list .items-list { display: flex; gap: 15px; flex-wrap: unset; margin-bottom: 60px; flex-direction: column; border-top: 1px solid #c2bfc2; padding-top: 60px; align-items: center; } .compare-partial-view .sections-wrapper .listing-items-list .items-list .listing-item { max-width: 100%; border-top: unset; flex-wrap: wrap; } .compare-partial-view .sections-wrapper .listing-items-list .items-list .listing-item .listing-title { font-size: 14px; font-weight: 400; line-height: 1.71; text-align: center; } .compare-partial-view .sections-wrapper .listing-items-list .items-list .listing-item .listing-link { margin-bottom: 15px; } .compare-partial-view .sections-wrapper .listing-items-list .items-list .listing-item .listing-desc { font-size: 14px; font-weight: 400; line-height: 1.71; text-align: center; } .compare-partial-view .sections-wrapper .listing-items-list .items-list .listing-item.empty { font-size: 20px; font-weight: bold; text-align: center; } .compare-partial-view .sections-wrapper .listing-items-list .items-list .listing-item .image-wrapper { display: flex; justify-content: center; } .compare-partial-view .sections-wrapper .listing-items-list .items-list .listing-item .image-wrapper img { width: 110px; object-fit: contain; } .compare-partial-view .sections-wrapper .new-advanced-features { margin-bottom: 60px; } .compare-partial-view .sections-wrapper .new-advanced-features p:last-child { margin-bottom: 0; } .compare-partial-view .sections-wrapper .new-advanced-features .listing-items-list .items-list { margin-bottom: 60px; } .compare-partial-view .sections-wrapper .new-advanced-features .listing-items-list .items-list .listing-item { padding-top: 60px; } .compare-partial-view .sections-wrapper .new-advanced-features .listing-items-list .items-list .listing-item:first-child { padding-top: 0; } .compare-partial-view .sections-wrapper .technology .listing-link { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .compare-partial-view .sections-wrapper .technology .listing-link:empty { display: none; } .compare-partial-view .sections-wrapper .technology .listing-link::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .compare-partial-view .sections-wrapper .technology .listing-link:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .compare-partial-view .sections-wrapper .technology .listing-items-list .items-list { align-items: start; } .compare-partial-view .sections-wrapper .technology .listing-items-list .items-list .image-wrapper { justify-content: start; margin-bottom: 10px; } .compare-partial-view .sections-wrapper .technology .listing-items-list .items-list .listing-title { text-align: start; } .compare-partial-view .sections-wrapper .technology .listing-items-list .items-list .listing-desc { text-align: start; } .compare-partial-view .sections-wrapper .usage .listing-items-list .items-list .listing-item .listing-title { font-size: 64px; } .compare-partial-view .sections-wrapper .charging .listing-items-list .items-list .listing-item .listing-title { font-size: 50px; } .compare-partial-view .sections-wrapper .flavours .listing-items-list .items-list .listing-item { width: 100%; border-top: 1px solid #c2bfc2; padding-top: 60px; height: fit-content !important; } .compare-partial-view .sections-wrapper .flavours .listing-items-list .items-list .listing-item:first-child { border: 0; padding-top: 0; margin-bottom: 0; } .compare-partial-view .sections-wrapper .flavours .listing-items-list .items-list .listing-item .listing-title { text-align: start; } .compare-partial-view .sections-wrapper .flavours .listing-items-list .items-list .listing-item .listing-desc { text-align: start; } .compare-partial-view .sections-wrapper .flavours .listing-items-list .items-list .listing-item .listing-link { --main-color: var(--default-text-color, #34303d); color: var(--main-color); font-size: 16px; line-height: 20px; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; background-color: transparent; border: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .compare-partial-view .sections-wrapper .flavours .listing-items-list .items-list .listing-item .listing-link:empty { display: none; } .compare-partial-view .sections-wrapper .flavours .listing-items-list .items-list .listing-item .listing-link::after { content: ""; display: inline-block; width: 16px; height: 14px; margin-top: 4px; mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(/images/back-button.svg?v=c6y_8WC8twefArH-vlBE2gEe1-w); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; background-color: var(--main-color); transform: scale(-1); rotate: var(--arrow-direction); transition: all 0.6s ease; } .compare-partial-view .sections-wrapper .flavours .listing-items-list .items-list .listing-item .listing-link:hover::after { background-color: #00d1d2; translate: calc(6px * var(--flip-value)) 0; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list { --inner-gap: 0px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: start; gap: var(--inner-gap); row-gap: 20px; padding-inline: 20px; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item { padding: 0; display: flex; flex-direction: row; align-items: start; width: calc(50% - var(--inner-gap) / 2); height: fit-content !important; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info { width: 100%; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .listing-title { font-size: 16px; letter-spacing: -0.2px; line-height: 1.75; text-align: center; font-weight: 500; margin-bottom: 10px; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors { display: flex; justify-content: center; gap: 3px; margin-bottom: 10px; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors > div { width: 12px; aspect-ratio: 1; border-radius: 50%; border: 1px solid gray; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors .pink { background-color: #e6b7d2; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors .blue { background-color: #5bc6d0; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors .green { background-color: #4ba6a8; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors .brown { background-color: #695b53; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors .purple { background-color: #8593b3; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors .gray { background-color: #9b9b9b; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors .orange { background-color: #ae4734; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .listing-item .listing-info .colors .red { background-color: #a41e57; } .compare-partial-view .sections-wrapper .customization .listing-items-list .items-list .image-wrapper { width: 100%; } .compare-partial-view .sections-wrapper .size-and-weight .listing-items-list .items-list { --inner-gap: 0px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: start; gap: var(--inner-gap); row-gap: 20px; padding-inline: 20px; } .compare-partial-view .sections-wrapper .size-and-weight .listing-items-list .items-list .listing-item { padding: 0; display: flex; flex-direction: row; align-items: start; width: calc(50% - var(--inner-gap) / 2); height: fit-content !important; } .compare-partial-view .sections-wrapper .size-and-weight .listing-items-list .items-list .listing-item .listing-info { width: 100%; } .compare-partial-view .sections-wrapper .size-and-weight .listing-items-list .items-list .listing-item .listing-info .listing-title { font-size: 16px; letter-spacing: -0.2px; line-height: 1.75; text-align: center; font-weight: 500; margin-bottom: 25px; } .compare-partial-view .sections-wrapper .size-and-weight .listing-items-list .items-list .listing-item .image-wrapper { width: 100%; } .compare-partial-view .sections-wrapper .other-specifications .listing-items-list .items-list { gap: 0; } .compare-partial-view .sections-wrapper .other-specifications .listing-items-list .items-list .listing-item .image-wrapper { padding-block: 10px; } .compare-partial-view .sections-wrapper .other-specifications .listing-items-list .items-list .listing-item .image-wrapper img { width: 90px; } .compare-partial-view .sections-wrapper .other-specifications .listing-items-list .items-list .listing-item .listing-title { margin: 40px 0 10px 0; } .compare-partial-view .sections-wrapper .other-specifications .listing-items-list .items-list .listing-item:first-child .listing-title { margin: 0; } .compare-partial-view .sections-wrapper .other-specifications .listing-items-list .items-list .listing-item { height: fit-content !important; } .your-rewards-section.container .vouchers-container { margin-bottom: 20px; } .your-rewards-section.container .vouchers-container .intro h3 { font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.33; letter-spacing: normal; text-align: center; font-size: clamp(24px, 14.7110091743px + 2.0642201835vw, 42px); } .your-rewards-section.container .vouchers-container p.warning-message, .your-rewards-section.container .vouchers-container .intro p { text-align: center; margin-bottom: 30px; font-size: clamp(16px, 12.9036697248px + 0.6880733945vw, 22px); } .your-rewards-section.container .vouchers-container p.warning-message.warning-message, .your-rewards-section.container .vouchers-container .intro p.warning-message { margin-top: 20px; } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container { padding-top: 10px; padding-bottom: 10px; } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs { display: flex; justify-content: space-evenly; } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab { min-width: 50%; max-width: 50%; padding-bottom: 20px; padding-top: 20px; transition: background-color 0.3s ease, border-bottom-color 0.3s ease, color 0.3s ease; } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab:hover { cursor: pointer; } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab.gold { border-bottom: 2px solid rgb(217, 175, 122); } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab.gold p.tier { color: rgb(206, 172, 101); } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab.gold:hover, .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab.gold.active { background-color: rgba(255, 246, 226, 0.768627451); border-bottom-color: rgb(206, 172, 101); } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab.platinum { border-bottom: 2px solid rgb(186, 184, 185); } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab.platinum p.tier { color: rgb(186, 184, 185); } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab.platinum:hover, .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab.platinum.active { background-color: rgb(244, 244, 244); border-bottom-color: rgb(150, 150, 150); } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab p.tier { font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.33; letter-spacing: normal; text-align: center; font-size: clamp(20px, 12.2591743119px + 1.7201834862vw, 35px); text-transform: uppercase; } .your-rewards-section.container .vouchers-container .vouchers-tabs-container.container .vouchers-tabs .voucher-tab p.requirements { text-align: center; font-weight: bold; font-size: clamp(14px, 10.9036697248px + 0.6880733945vw, 20px); } .your-rewards-section.container .vouchers-container .tabs-content-container { padding-top: 20px; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item { flex: 1 1 calc(33% - 10px); min-width: 200px; flex-wrap: wrap; max-width: 33%; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item.voucher-history-item.expired { opacity: 0.5; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item.voucher-history-item.expired .ribbon { background-color: #d40720; color: white; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item.voucher-history-item .button { pointer-events: none; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item .image-wrapper { max-width: 100%; height: 350px; width: 350px; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item .image-wrapper img { object-fit: contain; height: 350px; width: 350px; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item .ribbon { border-radius: 0.15rem; color: #34303d; display: inline-block; font-size: 12px; font-weight: 400; line-height: 1; padding: 0.5em 0.75em; text-align: center; vertical-align: baseline; white-space: nowrap; width: fit-content; background-color: rgba(0, 209, 210, 0.8); cursor: default; margin: 5px 0px; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item p.title { font-size: 24px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: normal; color: #34303d; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item p.description { font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: 0px; color: #34303d; margin-bottom: 20px; width: 350px; min-height: 96px; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item .button { display: inline-block; background-color: #34303d; color: #ffffff; padding: 5px 32px 9px; border-radius: 24px; border: 2px solid #34303d; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; transition: all 0.6s ease; text-decoration: none; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item .button:hover { background-color: transparent; color: #34303d; border-color: #34303d; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item .button { padding: 9px 32px; } .your-rewards-section.container .vouchers-container .tabs-content-container .voucher-items .voucher-item .button.inactive { cursor: not-allowed; background-color: white; color: #34303d; display: none; } .ribbon { border-radius: 0.15rem; color: #34303d; display: inline-block; font-size: 12px; font-weight: 400; line-height: 1; padding: 0.5em 0.75em; text-align: center; vertical-align: baseline; white-space: nowrap; width: fit-content; background-color: rgba(0, 209, 210, 0.8); cursor: default; margin: 0 10px; } .top-banner { height: 350px; background-size: cover; padding-top: 90px; } .top-banner .top-banner-wrapper h3 { max-width: 65%; font-size: 56px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.14; letter-spacing: -0.75px; color: #fffdfb; } .top-banner.logged-in-club { position: relative; padding-top: 160px; } .top-banner.logged-in-club .top-banner-wrapper { position: relative; z-index: 3; } .top-banner.logged-in-club .top-banner-wrapper h3.banner-title { min-width: 100%; } .top-banner.logged-in-club .background-img { width: 100%; height: 100%; display: block; top: 0; z-index: 1; position: absolute; inset-inline-start: 0; } .top-banner.logged-in-club .background-img img { height: 100%; width: 100%; object-fit: cover; } .club-navigations { border-bottom: 2px solid #dee2e6 !important; } .club-navigations .breadcrumb-listing { display: flex; justify-content: space-around; overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .club-navigations .breadcrumb-listing::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .club-navigations .breadcrumb-listing .listing-item { padding: 18px 28px; position: relative; display: flex; align-items: center; gap: 8px; } .club-navigations .breadcrumb-listing .listing-item.active:before { width: 100%; height: 2px; background-color: #34303d; content: ""; bottom: 0; inset-inline-start: 0; position: absolute; } .club-navigations .breadcrumb-listing .listing-item.active a { font-weight: bold; } .club-navigations .breadcrumb-listing .listing-item a { font-size: 16px; font-weight: 400; line-height: 1.5; text-align: center; color: #34303d; min-width: max-content; text-wrap: nowrap; } .dashboard-club { background-color: #f6f4f0; padding-bottom: 40px; } .dashboard-club .flex-wrapper { display: flex; margin-top: -100px; position: relative; z-index: 3; } .dashboard-club .flex-wrapper .left-wrapper { border-inline-end: 1px solid #e8e8e8; padding: 0px !important; } .dashboard-club .flex-wrapper .left-wrapper .info-list.row { min-width: 100%; min-height: 100%; margin-right: 0px !important; margin-left: 0px !important; } .dashboard-club .flex-wrapper .left-wrapper .info-list.row .club-dashboard-column { padding: 50px; display: flex; flex-direction: column; justify-content: space-between; } .dashboard-club .flex-wrapper .left-wrapper .info-list.row .club-dashboard-column:first-child { border-right: 3px solid rgb(226, 225, 223); } .dashboard-club .flex-wrapper .left-wrapper .info-list.row .club-dashboard-column p { margin-bottom: 0; } .dashboard-club .flex-wrapper .left-wrapper .info-list.row .club-dashboard-column p.title { font-size: 22px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: normal; color: #34303d; } .dashboard-club .flex-wrapper .left-wrapper .info-list.row .club-dashboard-column p.title-value { font-size: 36px; text-transform: uppercase; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.31; letter-spacing: normal; color: #34303d; } .dashboard-club .flex-wrapper .left-wrapper .info-list.row .club-dashboard-column p.message { font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: 0px; color: #34303d; margin-top: 10px; } .dashboard-club .flex-wrapper .left-wrapper .info-list.row .club-dashboard-column a { font-weight: bold; text-decoration: underline; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: 0px; color: #34303d; margin-top: 10px; } .dashboard-club .flex-wrapper .left-wrapper .info-list.row .club-dashboard-column a:hover { color: #00d1d2; } .dashboard-club .flex-wrapper .point-status { position: relative; } .dashboard-club .flex-wrapper .point-status.silver span { background: linear-gradient(to left, rgb(194, 196, 194), rgb(220, 220, 220) 50%); } .dashboard-club .flex-wrapper .point-status.gold span { background: linear-gradient(to left, #c19766, #98744a 50%); } .dashboard-club .flex-wrapper .point-status.platinum span { background-color: rgb(92, 99, 121); } .dashboard-club .flex-wrapper .point-status span { color: white; position: absolute; inset-inline-end: 20px; top: 50%; transform: translateY(-50%); padding: 4px 19px; border-radius: 2px; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.33; letter-spacing: 0.2px; text-align: center; color: #fff; } .dashboard-club .flex-wrapper .box-wrapper { background-color: #fffdfb; padding: 40px; flex: 0 0 100%; display: flex; } .dashboard-club .flex-wrapper .box-wrapper .block-title { font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: 0.2px; color: #34303d; text-transform: capitalize; } .dashboard-club .flex-wrapper .box-wrapper .points { font-size: 56px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.14; letter-spacing: -0.75px; color: #34303d; margin-bottom: 12px; } .dashboard-club .flex-wrapper .box-wrapper .info-list { flex: 0 0 50%; } .dashboard-club .flex-wrapper .box-wrapper .sub-title { margin-bottom: 15px; } .dashboard-club .flex-wrapper .box-wrapper .link { font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: 0px; color: #34303d; text-decoration: underline; text-underline-offset: 6px; } .dashboard-club .flex-wrapper .right-wrapper .points { margin-bottom: 30px; } .dashboard-club .point-bar { height: 10px; width: 100px; margin-bottom: 20px; margin-bottom: 10px; width: 100%; height: 8px; border-radius: 2rem; position: relative; background: #e1e0e2; transition: all 0.5s; will-change: transform; position: relative; } .dashboard-club .point-bar:after { content: ""; width: 10px; height: 10px; border: 1px solid white; top: -1px; background-color: black; position: absolute; inset-inline-end: 0; border-radius: 50%; } .dashboard-club .point-bar.silver { box-shadow: 0 0 5px rgb(194, 196, 194); } .dashboard-club .point-bar.silver .progress-point-bar { background: linear-gradient(305deg, #c2c4c2, #dcdcdc 50%); } .dashboard-club .point-bar.gold { box-shadow: 0 0 5px rgb(187, 154, 111); } .dashboard-club .point-bar.gold .progress-point-bar { background: linear-gradient(305deg, #c19766, #98744a 50%); } .dashboard-club .point-bar.platinum { box-shadow: 0 0 5px rgb(92, 99, 121); } .dashboard-club .point-bar.platinum .progress-point-bar { background-color: rgb(92, 99, 121); } .dashboard-club .point-bar .progress-point-bar { position: absolute; height: 100%; content: ""; top: 0; bottom: 0; inset-inline-start: 0; border-radius: inherit; display: flex; justify-content: center; align-items: center; color: white; font-family: sans-serif; } .tabs-banner-section.club-home { --section-pt: 0; } .tabs-banner-section.club-home .tabs-banner-swiper { overflow: visible; } .tabs-banner-section.club-home .tabs-banner-swiper .swiper-wrapper .swiper-slide { border-radius: 10px; overflow: hidden; margin-inline: 0; } .tabs-banner-section.club-home .tabs-banner-swiper .swiper-pagination { display: none; } .tabs-banner-section.club-home .tabs-banner-swiper .swiper-nav { --arrow-translate: 52%; } .tabs-banner-section.club-home .tabs-banner-swiper .swiper-nav .swiper-button { --arrow-size: 44px; --arrow-inner-inset: 27%; --arrow-bg-color: #34303d; --arrow-border-color: #34303d; --arrow-color: white; --arrow-bg-color-hover: #00d1d2; --arrow-border-color-hover: #34303d; --arrow-color-hover: #34303d; } @media (min-width: 1200px) { .tabs-banner-section.club-home .tabs-banner-swiper .swiper-nav .swiper-button:first-child { translate: calc(-1 * var(--flip-value) * var(--arrow-translate)) 0; } .tabs-banner-section.club-home .tabs-banner-swiper .swiper-nav .swiper-button:last-child { translate: calc(1 * var(--flip-value) * var(--arrow-translate)) 0; } } @media (max-width: 1200px) { .tabs-banner-section.club-home .tabs-banner-swiper .swiper-nav { padding-inline: var(--container-gutter-x); } } .cards-listing-third .titles-container .description > a { color: #34303d; font-weight: bold; text-decoration: underline; } .cards-listing-third .agents-grid-container .card-item .img-container > img { height: 250px; } .cards-listing-third .agents-grid-container .card-item .card-content .content-wrapper:after { content: ""; display: none; } .table-with-icon-section .table-wrapper .data-table { width: 100%; height: 142px; } .table-with-icon-section .table-wrapper .data-table td { padding-top: 10px; } .table-with-icon-section .table-wrapper .data-table th:first-child, .table-with-icon-section .table-wrapper .data-table td:first-child { width: 65%; } .table-with-icon-section .table-wrapper .data-table tr:not(:first-child) { border-bottom: 1px solid #cdcdcd; } .table-with-icon-section .table-wrapper .data-table th:not(:first-child), .table-with-icon-section .table-wrapper .data-table td:not(:first-child) { width: 11.6666666667%; } .table-with-icon-section .table-wrapper .data-table td > span.access::before { content: ""; display: inline-block; width: 40px; height: 40px; background: url("/images/access.png?v=rVNy9dyzo65Cvk4b6l2QiDcHf-c") no-repeat center/contain; vertical-align: middle; } .table-with-icon-section .table-wrapper .data-table td > span.accident::before { content: ""; display: inline-block; width: 40px; height: 40px; background: url("/images/accident.png?v=5z5EoIXxiHx7dGAHiY2-pjxzNH4") no-repeat center/contain; vertical-align: middle; } .table-with-icon-section .table-wrapper .data-table td > span.anniversary::before { content: ""; display: inline-block; width: 40px; height: 40px; background: url("/images/anniversary.png?v=sB69WGfiKzHLRavZ1n1af7ek83U") no-repeat center/contain; vertical-align: middle; } .table-with-icon-section .table-wrapper .data-table td > span.extra::before { content: ""; display: inline-block; width: 40px; height: 40px; background: url("/images/extra.png?v=hBmT7Bd38QP3UuaT0qevTMnFy2U") no-repeat center/contain; vertical-align: middle; } .table-with-icon-section .table-wrapper .data-table td > span.rewards::before { content: ""; display: inline-block; width: 40px; height: 40px; background: url("/images/rewards.png?v=rggTonh4Hl1CtGVYZLi5rvKdEO8") no-repeat center/contain; vertical-align: middle; } .table-with-icon-section .table-wrapper .data-table td > span.warranty::before { content: ""; display: inline-block; width: 40px; height: 40px; background: url("/images/warranty.png?v=w22c6VowOtOlFk1lv6jmvgDcIa0") no-repeat center/contain; vertical-align: middle; } .table-with-icon-section .table-wrapper .data-table .description { font-weight: bold; } .table-with-icon-section .table-wrapper .data-table .description .New { margin-left: 10px; } .table-with-icon-section .table-wrapper .data-table .description a { text-decoration: underline; } .table-with-icon-section .bottom-disclaimer { padding-top: 25px; } .new-card { border-radius: 0.15rem; color: #34303d; font-size: 12px; font-weight: 400; line-height: 1; padding: 0.25em 0.75em; text-align: center; vertical-align: baseline; white-space: nowrap; width: fit-content; background-color: #00d1d2; cursor: default; } .zone-attack-container { position: relative; max-width: 640px; margin: 40px auto; padding: 24px 24px 32px; background: #ffffff; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } .zone-attack-container .zone-attack-back-btn { position: absolute; top: 16px; inset-inline-start: 16px; background: transparent; border: 1px solid #d0d5dd; color: #34303d; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; transform: rotate(180deg); font-size: 20px; border: none; } .zone-attack-container .zone-attack-back-btn:hover { background: rgba(0, 114, 206, 0.06); border-color: #0072ce; } .zone-attack-container .zone-attack-form .zone-attack-title { font-size: 28px; font-weight: 600; margin-bottom: 25px; text-align: center; } .zone-attack-container .zone-attack-form .zone-attack-intro { font-size: 14px; color: #555; margin-bottom: 20px; text-align: center; } .zone-attack-container .zone-attack-form .zone-attack-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; } .zone-attack-container .zone-attack-form .zone-attack-progress .zone-attack-dot { width: 10px; height: 10px; border-radius: 50%; background: #d0d5dd; transition: background 0.2s ease, transform 0.2s ease; } .zone-attack-container .zone-attack-form .zone-attack-progress .zone-attack-dot.is-active { background: #0072ce; transform: scale(1.2); } .zone-attack-container .zone-attack-form .zone-attack-questions { margin-bottom: 24px; } .zone-attack-container .zone-attack-form .zone-attack-question { animation: fadeIn 0.2s ease-out; } .zone-attack-container .zone-attack-form .zone-attack-question .zone-attack-question-text { font-size: 24px; font-weight: 500; margin-bottom: 16px; text-align: center; } .zone-attack-container .zone-attack-form .zone-attack-question .zone-attack-options { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .zone-attack-container .zone-attack-form .zone-attack-question .zone-attack-option { display: inline-block; background-color: #34303d; color: #ffffff; padding: 5px 32px 9px; border-radius: 24px; border: 2px solid #34303d; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; transition: all 0.6s ease; text-decoration: none; } .zone-attack-container .zone-attack-form .zone-attack-question .zone-attack-option:hover { background-color: transparent; color: #34303d; border-color: #34303d; } .zone-attack-container .zone-attack-form .zone-attack-question .zone-attack-option { display: flex; font-size: 18px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; justify-content: center; } .zone-attack-container .zone-attack-form .zone-attack-question .zone-attack-option .zone-attack-radio { width: 0px; margin: 0; } .zone-attack-container .zone-attack-form .zone-attack-empty { text-align: center; color: #888; } .zone-attack-container .zone-attack-form .zone-attack-navigation { display: flex; justify-content: center; margin-top: 8px; } .zone-attack-container .zone-attack-form .zone-attack-navigation .btnBlue { min-width: 120px; text-align: center; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .zone-attack-popup-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; } .zone-attack-popup-overlay .zone-attack-popup { position: relative; width: 90%; max-width: 420px; background: #ffffff; border-radius: 16px; padding: 30px 24px 20px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35); text-align: center; margin-bottom: 15%; } .zone-attack-popup-overlay .zone-attack-popup-close { position: absolute; top: 10px; right: 14px; border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: #6b7280; } .zone-attack-popup-overlay .zone-attack-popup-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; } .zone-attack-popup-overlay .zone-attack-popup-body { font-size: 18px; color: #34303d; margin-bottom: 20px; } .zone-attack-popup-overlay .zone-attack-popup-body p:last-child { margin-bottom: 0; } .zone-attack-popup-overlay .zone-attack-popup-btn { display: inline-block; background-color: #34303d; color: #ffffff; padding: 5px 32px 9px; border-radius: 24px; border: 2px solid #34303d; letter-spacing: 0.5px; font-size: 16px; cursor: pointer; transition: all 0.6s ease; text-decoration: none; } .zone-attack-popup-overlay .zone-attack-popup-btn:hover { background-color: transparent; color: #34303d; border-color: #34303d; } @media (max-width: 600px) { .zone-attack-container { margin: 120px 20px; padding: 32px 16px; } .zone-attack-question .zone-attack-options { flex-direction: column; } } .zyn-colors { --default-text-color: $zyn-navy; color: var(--default-text-color); } .zyn-colors .note-container { border-color: #00166f; } .zyn-colors .banner-title, .zyn-colors .banner-description, .zyn-colors .title-h4, .zyn-colors .footer-support-container, .zyn-colors .note-container, .zyn-colors .text-default-container { color: #00166f !important; } .zyn-colors .banner-title *, .zyn-colors .banner-description *, .zyn-colors .title-h4 *, .zyn-colors .footer-support-container *, .zyn-colors .note-container *, .zyn-colors .text-default-container * { color: #00166f !important; }