html, body {
    scroll-behavior: smooth;
}

body {
    font-family: "Iqos-Regular", sans-serif;
    color: var(--color-text);
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden;
}

:root {
    --color-text: #34303D;
    --color-text-white: #FFFDFB;
    --color-white: #FFFDFB;
    --color-grey-light: #F3F3F3;

    /* Core colors */
    --slate: #34303D;
    --turquoise: #00D1D2;
    --turquoise-light: #00D5D4;
    --turquoise-dark: #18b2a5;
    --soft-white: #FFFDFB;
    --deep-red: #A22F26;
    --amber: #E27D34;
    --blue: #2980B5;
    --red: #DB3826;
    --yellow: #FFD040;
    --slate-t-5: #F7F7F7;
    --slate-t-15: #E1E0E2;
    --slate-t-30: #B8B7BB;
    --slate-t-50: #99979E;
    --slate-t-65: #7B7881;
    --slate-t-85: #524F5A;
    --dark-slate: #232029;
    --hard-white: #F6F4F0;
    --alert-red: #C73636;
    --alert-green: #57760C;
    --alert-amber: #E5B052;
    --lil-blue: #1253A1;

    /* ILUMA core colors */
    --iluma-lightest-teal: #1BDAC1;
    --iluma-bright-teal: #19CCBA;
    --iluma-darkest-teal: #18BFAE;
    --iluma-lightest-red: #FF0012;
    --iluma-bright-red: #F90112;
    --iluma-darkest-red: #DA000F;
    --iluma-lightest-yellow: #FEC127;
    --iluma-bright-yellow: #FAB414;
    --iluma-darkest-yellow: #F9B301;
    --iluma-lightest-blue: #28BFF4;
    --iluma-bright-blue: #00B4F3;
    --iluma-darkest-blue: #00ADEA;
    --iluma-hard-white: #fffdbf;
    --iluma-soft-white: #FFFDFB;
    --iluma-white: #FFFFFF;
    --iluma-slate: #34303D;

    /* VEEV core colors */
    --veev-turquoise: #00D1D2;
    --veev-amber: #E3813B;
    --veev-slate: #34303d;
    --veev-cobalt: #00a8e7;
    --veev-coral: #e54360;

    /* BONDS core colors */
    --bonds-lightest-red: #ef4e20;
    --bonds-light-red: #fb2227;
    --bonds-red: #d51113;
    --bonds-dark-red: #c31819;
    --bonds-darkest-red: #b71718;
    --bonds-blue: #4382FD;
    --bonds-yellow: #FDBC49;

    /* VEEBA core colors */
    --veeba-blue: #005D7E;
    --veeba-white: #FFFFFF;
    --veeba-turquoise: #00d1d2;
    --veeba-summer-yellow: #FBDF4B;
    --veeba-violet: #7964B9;

    /* IQOS Z WE Edition core colors */
    --we-embrace: #9A7FFF;
    --we-celebrate: #E56444;
    --we-belong: #EBBE37;
    --we-unite: #00a8e7;

    /* TEREA crafted core colors */
    --terea-crafted-botanicals: #9A7FFF;
    --terea-crafted-star-anise: #E56444;
    --terea-crafted-natural-rosemary: #EBBE37;
    --terea-crafted-natural-clove: #00a8e7;
    --terea-crafted-blue-crafted: #EBBE37;

    /* NBW Originals core colors */
    --originals-blue: #86CADD;
    --originals-grey: #767F90;
    --originals-red: #DB5C60;
    --originals-white: #E8EEEB;

    /* HEETS Capsules core colors */
    --heets-blue: #34303D;
    --heets-orange: #E84929;
    --heets-green: #32AC5C;

    /* TEREA Capsules core colors */
    --terea-orange: #D7440C;
    --terea-green: #009633;

    /* VEEBA Flavour core colors */
    --flavour-classic: #C09E8C;
    --flavour-turquoise: #A0D2D6;
    --flavour-mauve: #D987C4;
    --flavour-yellow: #FBDF4B;
    --flavour-na: #FFB2CA;
    --flavour-red: #E55555;
    --flavour-gold: #FCC9A4;
    --flavour-yellow-green: #7DCE73;
    --flavour-indiblue: #B896DF;

    /* sizes */
    --header-height: 70px;

    /* spacing */
    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-15: 60px;
    --spacing-20: 80px;
    --spacing-25: 100px;
    --spacing-50: 200px;
}

body {
    color: var(--slate);
    background-color: var(--soft-white);
}

*, *:before, *:after {
    box-sizing: border-box;
}

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr,
acronym, address, big, cite,
code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u,
i, center, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas,
details, embed, figure, figcaption,
footer, header, hgroup, menu, nav,
output, ruby, section, summary, time,
mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

textarea, input {
    font-family: "Iqos-Regular", sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

ol, ul {
    list-style-type: none;
}

.container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 15px;
}

.container-md {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 15px;
}

#bx-panel {
    box-shadow: none !important;
}

h1, .title {
    font-weight: 700;
    font-size: 64px;
    line-height: 72px;
    font-family: Iqos-Bold, sans-serif;
}

h2, .title-2 {
    font-weight: 700;
    font-size: 56px;
    line-height: 64px;
    font-family: Iqos-Bold, sans-serif;
}

h3, .title-3 {
    font-weight: 700;
    font-size: 42px;
    line-height: 56px;
    font-family: Iqos-Bold, sans-serif;
}

h4, .title-4 {
    font-weight: 700;
    font-size: 32px;
    line-height: 42px;
    font-family: Iqos-Bold, sans-serif;
}

h5, .title-5 {
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    font-family: Iqos-Bold, sans-serif;
}

h6, .title-6 {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    font-family: Iqos-Bold, sans-serif;
}

/* no use */
.pg-nano {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    font-family: Iqos-Regular, sans-serif;
}

.pg-min {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    font-family: Iqos-Regular, sans-serif;
}
/* no use */

/* Call Out Headline */
.headline {
    font-weight: 700;
    font-size: 96px;
    line-height: 104px;
    font-family: Iqos-Bold, sans-serif;
}

/* Quote */
.quote {
    font-weight: 400;
    font-size: 48px;
    line-height: 64px;
    font-family: Iqos-Regular, sans-serif;
}

/* Super-Paragraph Large */
.pg-large {
    font-weight: 400;
    font-size: 28px;
    line-height: 40px;
    font-family: Iqos-Regular, sans-serif;
}

/* Super-Paragraph Small */
.pg-small {
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    font-family: Iqos-Regular, sans-serif;
}

/* Caption Medium */
.cap-md {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    font-family: Iqos-Bold, sans-serif;
}

/* Caption Small */
.cap-sm {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    font-family: Iqos-Bold, sans-serif;
}

/* Hint Text Medium */
.hint-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    font-family: Iqos-Regular, sans-serif;
}

/* Regulatory Text Medium */
.rg-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    font-family: Iqos-Regular, sans-serif;
}

/* Regulatory Text Small */
.rg-text-sm {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    font-family: Iqos-Regular, sans-serif;
}

/* Body Large */
.bd-lg {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    font-family: Iqos-Regular, sans-serif;
}

/* Body Medium */
.bd-md {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-family: Iqos-Regular, sans-serif;
}

/* Body Small */
.bd-sm {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    font-family: Iqos-Regular, sans-serif;
}

/* Body X Small */
.bd-x-sm {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    font-family: Iqos-Regular, sans-serif;
}

/* link Medium */
.link-md {
    font-size: 14px;
    line-height: 24px;
    font-family: Iqos-Regular, sans-serif;
    font-weight: 400;
}

/* link Small */
.link-sm {
    font-size: 10px;
    line-height: 12px;
    font-family: Iqos-Regular, sans-serif;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* form label */
.form-lb {
    font-size: 14px;
    line-height: 16px;
    font-family: Iqos-Regular, sans-serif;
    font-weight: 400;
    letter-spacing: 0.4px;
}

/* form helper text */
.form-ht {
    font-size: 12px;
    line-height: 20px;
    font-family: Iqos-Regular, sans-serif;
    font-weight: 400;
    letter-spacing: 0.4px;
}

/* form placeholder */
.form-ph {
    font-size: 16px;
    line-height: 24px;
    font-family: Iqos-Regular, sans-serif;
    font-weight: 400;
}

/* Button label M */
.btn-lb-m {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    font-family: Iqos-Regular, sans-serif;
    font-weight: 400;
}

/* link Large */
.link-lg {
    font-size: 16px;
    line-height: 24px;
    font-family: Iqos-Regular, sans-serif;
    font-weight: 400;
}

.bullet {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    font-family: Iqos-Regular, sans-serif;
}

.text-bold {
    font-weight: 700;
    font-family: Iqos-Bold, sans-serif;
}

.text-reg {
    font-weight: 400;
    font-family: Iqos-Regular, sans-serif;
}

.text-thin {
    font-weight: 300;
    font-family: Iqos-Thin, sans-serif;
}

/* text-decoration */
.strike {text-decoration: dashed}
.text-dec-line {text-decoration-line: line-through}
.text-dec-under {text-decoration: underline}

/* text-align */
.text-align-center {text-align: center}
.text-center {text-align: center}
.text-right {text-align: right}
.text-left {text-align: left}
.text-justify {text-align: justify}

/* text-transform */
.text-lowercase {text-transform: lowercase}
.text-uppercase {text-transform: uppercase}
.text-capitalize {text-transform: capitalize}

/* letter-spacing */
.let-init {letter-spacing: initial}

/* text colors */
.text-bg {color: var(--color-text-white)}
.text-grey {color: #808080}
.text-slate {color: var(--slate)}
.text-turquoise {color: var(--turquoise)}
.text-white {color: var(--soft-white)}
.text-deep-red {color: var(--deep-red)}
.text-amber {color: var(--amber)}
.text-blue {color: var(--blue)}
.text-red {color: var(--red)}
.text-yellow {color: var(--yellow)}
.text-slate-t-5 {color: var(--slate-t-5)}
.text-slate-t-15 {color: var(--slate-t-15)}
.text-slate-t-30 {color: var(--slate-t-30)}
.text-slate-t-50 {color: var(--slate-t-50)}
.text-slate-t-65 {color: var(--slate-t-65)}
.text-slate-t-85 {color: var(--slate-t-85)}
.text-dark-slate {color: var(--dark-slate)}
.text-hard-white {color: var(--hard-white)}
.text-alert-red {color: var(--alert-red)}
.text-alert-green {color: var(--alert-green)}
.text-alert-amber {color: var(--alert-amber)}
.text-iluma-bright-teal {color: var(--iluma-bright-teal)}
.text-lil-blue {color: var(--lil-blue)}

/* background color */
.bg-slate {background-color: var(--slate)}
.bg-turquoise {background-color: var(--turquoise)}
.bg-turquoise-bright-teal {background-color: var(--iluma-bright-teal)}
.bg-turquoise-light {background-color: var(--turquoise-light)}
.bg-turquoise-dark {background-color: var(--turquoise-dark)}
.bg-white {background-color: var(--soft-white)}
.bg-grey-light {background-color: var(--color-grey-light)}
.bg-deep-red {background-color: var(--deep-red)}
.bg-amber {background-color: var(--amber)}
.bg-blue {background-color: var(--blue)}
.bg-red {background-color: var(--red)}
.bg-yellow {background-color: var(--yellow)}
.bg-slate-t-5 {background-color: var(--slate-t-5)}
.bg-slate-t-15 {background-color: var(--slate-t-15)}
.bg-slate-t-30 {background-color: var(--slate-t-30)}
.bg-slate-t-50 {background-color: var(--slate-t-50)}
.bg-slate-t-65 {background-color: var(--slate-t-65)}
.bg-slate-t-85 {background-color: var(--slate-t-85)}
.bg-dark-slate {background-color: var(--dark-slate)}
.bg-hard-white {background-color: var(--hard-white)}
.bg-alert-red {background-color: var(--alert-red)}
.bg-alert-green {background-color: var(--alert-green)}
.bg-alert-amber {background-color: var(--alert-amber)}
.bg-iluma-bright-teal {background-color: var(--iluma-bright-teal)}
.bg-lil-blue {background-color: var(--lil-blue)}


/* position */
.pos-rel {position: relative}
.pos-abs {position: absolute}

/* display */
.dp-block {display:block}
.dp-inline {display:inline}
.dp-flex {display:flex}
.dp-none {display:none}
.d-none {display: none !important}

@media (min-width:769px)/* desktop */
{
    .d-dp-none {display: none}
}
@media (max-width:768px)/* mobile */
{
    .m-dp-none {display: none}
}

/* flex-direction */
.flex-col {flex-direction: column}
.flex-col-rev {flex-direction: column-reverse}
.flex-row-rev {flex-direction: row-reverse}

.justify-between{justify-content: space-between}
.align-center{align-items: center}

/* width */
.w-auto {width: auto}
.w-fit {width: fit-content}
.w-100 {width: 100%}

/* height */
.h-auto {height: auto}
.h-100 {height: 100%}

/* margin */
/* auto */
.mn-a {margin: auto}
.mn-x-a {margin-left: auto; margin-right: auto}
.mn-t-a {margin-top: auto}
.mn-r-a {margin-right: auto}
.mn-b-a {margin-bottom: auto}
.mn-l-a {margin-left: auto}
/* 0 */
.mn-x-0 {margin: var(--spacing-0) var(--spacing-0)}
.mn-y-0 {margin: var(--spacing-0) var(--spacing-0)}
.mn-0 {margin: var(--spacing-0)}
.mn-t-0 {margin-top: var(--spacing-0)}
.mn-r-0 {margin-right: var(--spacing-0)}
.mn-b-0 {margin-bottom: var(--spacing-0)}
.mn-l-0 {margin-left: var(--spacing-0)}
/* 4px */
.mn-x-1 {margin: var(--spacing-0) var(--spacing-1)}
.mn-y-1 {margin: var(--spacing-1) var(--spacing-0)}
.mn-1 {margin: var(--spacing-1)}
.mn-t-1 {margin-top: var(--spacing-1)}
.mn-r-1 {margin-right: var(--spacing-1)}
.mn-b-1 {margin-bottom: var(--spacing-1)}
.mn-l-1 {margin-left: var(--spacing-1)}
/* 8px */
.mn-x-2 {margin: var(--spacing-0) var(--spacing-2)}
.mn-y-2 {margin: var(--spacing-2) var(--spacing-0)}
.mn-2 {margin: var(--spacing-2)}
.mn-t-2 {margin-top: var(--spacing-2)}
.mn-r-2 {margin-right: var(--spacing-2)}
.mn-b-2 {margin-bottom: var(--spacing-2)}
.mn-l-2 {margin-left: var(--spacing-2)}
/* 12px */
.mn-x-3 {margin: var(--spacing-0) var(--spacing-3)}
.mn-y-3 {margin: var(--spacing-3) var(--spacing-0)}
.mn-3 {margin: var(--spacing-3)}
.mn-t-3 {margin-top: var(--spacing-3)}
.mn-r-3 {margin-right: var(--spacing-3)}
.mn-b-3 {margin-bottom: var(--spacing-3)}
.mn-l-3 {margin-left: var(--spacing-3)}
/* 16px */
.mn-x-4 {margin: var(--spacing-0) var(--spacing-4)}
.mn-y-4 {margin: var(--spacing-4) var(--spacing-0)}
.mn-4 {margin: var(--spacing-4)}
.mn-t-4 {margin-top: var(--spacing-4)}
.mn-r-4 {margin-right: var(--spacing-4)}
.mn-b-4 {margin-bottom: var(--spacing-4)}
.mn-l-4 {margin-left: var(--spacing-4)}
/* 20px */
.mn-x-5 {margin: var(--spacing-0) var(--spacing-5)}
.mn-y-5 {margin: var(--spacing-5) var(--spacing-0)}
.mn-5 {margin: var(--spacing-5)}
.mn-t-5 {margin-top: var(--spacing-5)}
.mn-r-5 {margin-right: var(--spacing-5)}
.mn-b-5 {margin-bottom: var(--spacing-5)}
.mn-l-5 {margin-left: var(--spacing-5)}
/* 24px */
.mn-x-6 {margin: var(--spacing-0) var(--spacing-6)}
.mn-y-6 {margin: var(--spacing-6) var(--spacing-0)}
.mn-6 {margin: var(--spacing-6)}
.mn-t-6 {margin-top: var(--spacing-6)}
.mn-r-6 {margin-right: var(--spacing-6)}
.mn-b-6 {margin-bottom: var(--spacing-6)}
.mn-l-6 {margin-left: var(--spacing-6)}
/* 28px */
.mn-x-7 {margin: var(--spacing-0) var(--spacing-7)}
.mn-y-7 {margin: var(--spacing-7) var(--spacing-0)}
.mn-7 {margin: var(--spacing-7)}
.mn-t-7 {margin-top: var(--spacing-7)}
.mn-r-7 {margin-right: var(--spacing-7)}
.mn-b-7 {margin-bottom: var(--spacing-7)}
.mn-l-7 {margin-left: var(--spacing-7)}
/* 32px */
.mn-x-8 {margin: var(--spacing-0) var(--spacing-8)}
.mn-y-8 {margin: var(--spacing-8) var(--spacing-0)}
.mn-8 {margin: var(--spacing-8)}
.mn-t-8 {margin-top: var(--spacing-8)}
.mn-r-8 {margin-right: var(--spacing-8)}
.mn-b-8 {margin-bottom: var(--spacing-8)}
.mn-l-8 {margin-left: var(--spacing-8)}
/* 36px */
.mn-x-9 {margin: var(--spacing-0) var(--spacing-9)}
.mn-y-9 {margin: var(--spacing-9) var(--spacing-0)}
.mn-9 {margin: var(--spacing-9)}
.mn-t-9 {margin-top: var(--spacing-9)}
.mn-r-9 {margin-right: var(--spacing-9)}
.mn-b-9 {margin-bottom: var(--spacing-9)}
.mn-l-9 {margin-left: var(--spacing-9)}
/* 40px */
.mn-x-10 {margin: var(--spacing-0) var(--spacing-10)}
.mn-y-10 {margin: var(--spacing-10) var(--spacing-0)}
.mn-10 {margin: var(--spacing-10)}
.mn-t-10 {margin-top: var(--spacing-10)}
.mn-r-10 {margin-right: var(--spacing-10)}
.mn-b-10 {margin-bottom: var(--spacing-10)}
.mn-l-10 {margin-left: var(--spacing-10)}
/* 60px */
.mn-x-15 {margin: var(--spacing-0) var(--spacing-15)}
.mn-y-15 {margin: var(--spacing-15) var(--spacing-0)}
.mn-15 {margin: var(--spacing-15)}
.mn-t-15 {margin-top: var(--spacing-15)}
.mn-r-15 {margin-right: var(--spacing-15)}
.mn-b-15 {margin-bottom: var(--spacing-15)}
.mn-l-15 {margin-left: var(--spacing-15)}
/* 80px */
.mn-x-20 {margin: var(--spacing-0) var(--spacing-20)}
.mn-y-20 {margin: var(--spacing-20) var(--spacing-0)}
.mn-20 {margin: var(--spacing-20)}
.mn-t-20 {margin-top: var(--spacing-20)}
.mn-r-20 {margin-right: var(--spacing-20)}
.mn-b-20 {margin-bottom: var(--spacing-20)}
.mn-l-20 {margin-left: var(--spacing-20)}
/* 100px */
.mn-x-25 {margin: var(--spacing-0) var(--spacing-25)}
.mn-y-25 {margin: var(--spacing-25) var(--spacing-0)}
.mn-25 {margin: var(--spacing-25)}
.mn-t-25 {margin-top: var(--spacing-25)}
.mn-r-25 {margin-right: var(--spacing-25)}
.mn-b-25 {margin-bottom: var(--spacing-25)}
.mn-l-25 {margin-left: var(--spacing-25)}
/* 200px */
.mn-x-50 {margin: var(--spacing-0) var(--spacing-50)}
.mn-y-50 {margin: var(--spacing-50) var(--spacing-0)}
.mn-50 {margin: var(--spacing-50)}
.mn-t-50 {margin-top: var(--spacing-50)}
.mn-r-50 {margin-right: var(--spacing-50)}
.mn-b-50 {margin-bottom: var(--spacing-50)}
.mn-l-50 {margin-left: var(--spacing-50)}

/* padding */
/* 0 */
.pg-x-0 {padding-left: var(--spacing-0); padding-right: var(--spacing-0)}
.pg-y-0 {padding: var(--spacing-0) var(--spacing-0)}
.pg-0 {padding: var(--spacing-0)}
.pg-t-0 {padding-top: var(--spacing-0)}
.pg-r-0 {padding-right: var(--spacing-0)}
.pg-b-0 {padding-bottom: var(--spacing-0)}
.pg-l-0 {padding-left: var(--spacing-0)}
/* 4px */
.pg-x-1 {padding: var(--spacing-0) var(--spacing-1)}
.pg-y-1 {padding: var(--spacing-1) var(--spacing-0)}
.pg-1 {padding: var(--spacing-1)}
.pg-t-1 {padding-top: var(--spacing-1)}
.pg-r-1 {padding-right: var(--spacing-1)}
.pg-b-1 {padding-bottom: var(--spacing-1)}
.pg-l-1 {padding-left: var(--spacing-1)}
/* 8px */
.pg-x-2 {padding: var(--spacing-0) var(--spacing-2)}
.pg-y-2 {padding: var(--spacing-2) var(--spacing-0)}
.pg-2 {padding: var(--spacing-2)}
.pg-t-2 {padding-top: var(--spacing-2)}
.pg-r-2 {padding-right: var(--spacing-2)}
.pg-b-2 {padding-bottom: var(--spacing-2)}
.pg-l-2 {padding-left: var(--spacing-2)}
/* 12px */
.pg-x-3 {padding: var(--spacing-0) var(--spacing-3);}
.pg-y-3 {padding: var(--spacing-3) var(--spacing-0)}
.pg-3 {padding: var(--spacing-3)}
.pg-t-3 {padding-top: var(--spacing-3)}
.pg-r-3 {padding-right: var(--spacing-3)}
.pg-b-3 {padding-bottom: var(--spacing-3)}
.pg-l-3 {padding-left: var(--spacing-3)}
/* 16px */
.pg-x-4 {padding: var(--spacing-0) var(--spacing-4)}
.pg-y-4 {padding: var(--spacing-4) var(--spacing-0)}
.pg-4 {padding: var(--spacing-4)}
.pg-t-4 {padding-top: var(--spacing-4)}
.pg-r-4 {padding-right: var(--spacing-4)}
.pg-b-4 {padding-bottom: var(--spacing-4)}
.pg-l-4 {padding-left: var(--spacing-4)}
/* 20px */
.pg-x-5 {padding: var(--spacing-0) var(--spacing-5)}
.pg-y-5 {padding: var(--spacing-5) var(--spacing-0)}
.pg-5 {padding: var(--spacing-5)}
.pg-t-5 {padding-top: var(--spacing-5)}
.pg-r-5 {padding-right: var(--spacing-5)}
.pg-b-5 {padding-bottom: var(--spacing-5)}
.pg-l-5 {padding-left: var(--spacing-5)}
/* 24px */
.pg-x-6 {padding: var(--spacing-0) var(--spacing-6)}
.pg-y-6 {padding: var(--spacing-6) var(--spacing-0)}
.pg-6 {padding: var(--spacing-6)}
.pg-t-6 {padding-top: var(--spacing-6)}
.pg-r-6 {padding-right: var(--spacing-6)}
.pg-b-6 {padding-bottom: var(--spacing-6)}
.pg-l-6 {padding-left: var(--spacing-6)}
/* 28px */
.pg-x-7 {padding: var(--spacing-0) var(--spacing-7)}
.pg-y-7 {padding: var(--spacing-7) var(--spacing-0)}
.pg-7 {padding: var(--spacing-7)}
.pg-t-7 {padding-top: var(--spacing-7)}
.pg-r-7 {padding-right: var(--spacing-7)}
.pg-b-7 {padding-bottom: var(--spacing-7)}
.pg-l-7 {padding-left: var(--spacing-7)}
/* 32px */
.pg-x-8 {padding: var(--spacing-0) var(--spacing-8)}
.pg-y-8 {padding: var(--spacing-8) var(--spacing-0)}
.pg-8 {padding: var(--spacing-8)}
.pg-t-8 {padding-top: var(--spacing-8)}
.pg-r-8 {padding-right: var(--spacing-8)}
.pg-b-8 {padding-bottom: var(--spacing-8)}
.pg-l-8 {padding-left: var(--spacing-8)}
/* 36px */
.pg-x-9 {padding: var(--spacing-0) var(--spacing-9)}
.pg-y-9 {padding: var(--spacing-9) var(--spacing-0)}
.pg-9 {padding: var(--spacing-9)}
.pg-t-9 {padding-top: var(--spacing-9)}
.pg-r-9 {padding-right: var(--spacing-9)}
.pg-b-9 {padding-bottom: var(--spacing-9)}
.pg-l-9 {padding-left: var(--spacing-9)}
/* 40px */
.pg-x-10 {padding: var(--spacing-0) var(--spacing-10)}
.pg-y-10 {padding: var(--spacing-10) var(--spacing-0)}
.pg-10 {padding: var(--spacing-10)}
.pg-t-10 {padding-top: var(--spacing-10)}
.pg-r-10 {padding-right: var(--spacing-10)}
.pg-b-10 {padding-bottom: var(--spacing-10)}
.pg-l-10 {padding-left: var(--spacing-10)}
/* 60px */
.pg-x-15 {padding: var(--spacing-0) var(--spacing-15)}
.pg-y-15 {padding: var(--spacing-15) var(--spacing-0)}
.pg-15 {padding: var(--spacing-15)}
.pg-t-15 {padding-top: var(--spacing-15)}
.pg-r-15 {padding-right: var(--spacing-15)}
.pg-b-15 {padding-bottom: var(--spacing-15)}
.pg-l-15 {padding-left: var(--spacing-15)}
/* 80px */
.pg-x-20 {padding: var(--spacing-0) var(--spacing-20)}
.pg-y-20 {padding: var(--spacing-20) var(--spacing-0)}
.pg-20 {padding: var(--spacing-20)}
.pg-t-20 {padding-top: var(--spacing-20)}
.pg-r-20 {padding-right: var(--spacing-20)}
.pg-b-20 {padding-bottom: var(--spacing-20)}
.pg-l-20 {padding-left: var(--spacing-20)}
/* 100px */
.pg-x-25 {padding: var(--spacing-0) var(--spacing-25)}
.pg-y-25 {padding: var(--spacing-25) var(--spacing-0)}
.pg-25 {padding: var(--spacing-25)}
.pg-t-25 {padding-top: var(--spacing-25)}
.pg-r-25 {padding-right: var(--spacing-25)}
.pg-b-25 {padding-bottom: var(--spacing-25)}
.pg-l-25 {padding-left: var(--spacing-25)}
/* 200px */
.pg-x-50 {padding: var(--spacing-0) var(--spacing-50)}
.pg-y-50 {padding: var(--spacing-50) var(--spacing-0)}
.pg-50 {padding: var(--spacing-50)}
.pg-t-50 {padding-top: var(--spacing-50)}
.pg-r-50 {padding-right: var(--spacing-50)}
.pg-b-50 {padding-bottom: var(--spacing-50)}
.pg-l-50 {padding-left: var(--spacing-50)}

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

/* Tablet */
@media (max-width:1023px) {
    h1, .title {
        font-weight: 700;
        font-size: 56px;
        line-height: 64px;
    }

    h2, .title-2 {
        font-weight: 700;
        font-size: 44px;
        line-height: 56px;
    }

    h3, .title-3 {
        font-weight: 700;
        font-size: 36px;
        line-height: 48px;
    }

    h4, .title-4 {
        font-weight: 700;
        font-size: 28px;
        line-height: 36px;
    }

    h5, .title-5 {
        font-weight: 700;
        font-size: 24px;
        line-height: 32px;
    }

    h6, .title-6 {
        font-weight: 700;
        font-size: 20px;
        line-height: 32px;
    }

    .pg-nano {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
    }

    .pg-min {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }

    .pg-small {
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
    }

    .pg-large {
        font-weight: 400;
        font-size: 24px;
        line-height: 36px;
    }

    .quote {
        font-weight: 400;
        font-size: 36px;
        line-height: 48px;
    }

    .headline {
        font-weight: 700;
        font-size: 64px;
        line-height: 72px;
    }

    .text-bold {
        font-weight: 700;
        font-family: Iqos-Bold, sans-serif;
    }

    .text-reg {
        font-weight: 400;
        font-family: Iqos-Regular, sans-serif;
    }

    .text-thin {
        font-weight: 300;
        font-family: Iqos-Thin, sans-serif;
    }
}


/* Mobile */
@media (max-width:767px) {
    h1, .title {
        font-weight: 700;
        font-size: 36px;
        line-height: 44px;
    }

    h2, .title-2 {
        font-weight: 700;
        font-size: 32px;
        line-height: 40px;
    }

    h3, .title-3 {
        font-weight: 700;
        font-size: 28px;
        line-height: 40px;
    }

    h4, .title-4 {
        font-weight: 700;
        font-size: 24px;
        line-height: 32px;
    }

    h5, .title-5 {
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
    }

    h6, .title-6 {
        font-weight: 700;
        font-size: 18px;
        line-height: 28px;
    }

    .pg-nano {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
    }

    .pg-min {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }

    .pg-small {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }

    .pg-large {
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
    }

    .quote {
        font-weight: 400;
        font-size: 28px;
        line-height: 38px;
    }

    .headline {
        font-weight: 700;
        font-size: 40px;
        line-height: 48px;
    }

    .text-bold {
        font-weight: 700;
        font-family: Iqos-Bold, sans-serif;
    }

    .text-reg {
        font-weight: 400;
        font-family: Iqos-Regular, sans-serif;
    }

    .text-thin {
        font-weight: 300;
        font-family: Iqos-Thin, sans-serif;
    }
}