:root{

    /* container width */
    --normal-container-width: 1320px;
    --normal-container-width-max: 1320px;

    --wide-container-width: 1728px;
    --wide-container-width-max: 1728px;

    --full-container-width: 100%;
    --full-container-max-width: 100%;

    --narrow-container-width: 872px;
    --narrow-container-max-width: 872px;

    /* colors */
    --color-black: #000000;
    --color-gray: #B1B1B1;
    --color-lightgray: #E3E4E7;
    --color-silver: #F0F0F2;
    --color-yellow: #F6FD27;
    --color-green: #40D17D;
    --color-red: #DE2121;

    /* spacing */
    --spacing-xxl: 96px;
    --spacing-xl: 72px;
    --spacing-l: 48px;
    --spacing-ml: 36px;
    --spacing-m: 24px;
    --spacing-s: 12px;
    --spacing-xs: 6px;


    /* font family */
    --unineue-regular: 'uni_neueregular';
    --unineue-book: 'uni_neuebook';
    --unineue-bold: 'uni_neuebold';


    /* font-sizes */
    --copy-large-font-size: 22px;
    --copy-large-font-line-height: 35px;

    --copy-small-font-size: 18px;
    --copy-small-font-line-height: 34px;

    --headline-h1-font-size: 64px;
    --headline-h1-line-height: 72px;

    --headline-h2-font-size: 48px;
    --headline-h2-line-height: 54px;

    --headline-h3-font-size: 30px;
    --headline-h3-line-height: 40px;

    --headline-h4-font-size: 30px;
    --headline-h4-line-height: 40px;

    --headline-h5-font-size: 18px;
    --headline-h5-line-height: 25px;

    --navigation-header-font-size : 18px;
    --navigation-header-line-height : 24px;

    --navigation-footer-font-size : 18px;
    --navigation-footer-line-height : 24px;

    --button-font-size: 23px;
    --button-line-height: 31px;

    --price-font-size: 26px;
    --price-line-height: 35px;

    --quote-font-size: 40px;
    --quote-line-height: 68px;

    --checkout-label-font-size: 18px;
    --checkout-label-line-height: 24px;
    --checkout-label-padding: 24px;



    /* LOGO spacing */
    --logo-right-spacing: 48px;
    --header-navigation-horizontal-spacing: 50px;
    --header-navigation-item-spacing: 42px;

    /* swiper */
    --swiper-navigation-next-offset: 60px;
    --swiper-navigation-prev-offset: 30px;
    --swiper-navigation-dimensions: 110px;
    --swiper-navigation-icon-height: 52px;
    --swiper-navigation-icon-width: 34px;

    --form-element-padding: 12px 24px;

}

*{
    letter-spacing: 0.63px;
}

/*--color-black: #000000;*/
/*--color-gray: #B1B1B1;*/
/*--color-lightgray: #E3E4E7;*/
/*--color-silver: #F0F0F2;*/
/*--color-yellow: #F6FD27;*/

/* Background Colors */
.background-color-000000{
    background-color: var(--color-black);
    color: #ffffff;
}

.background-color-B1B1B1{
    background-color: var(--color-gray);
    color: #000000;
}

.background-color-E3E4E7{
    background-color: var(--color-lightgray);
    color: #000000;
}

.background-color-F0F0F2{
    background-color: var(--color-silver);
    color: #000000;
}

.background-color-F6FD27{
    background-color: var(--color-yellow);
    color: #000000;
}


/* Spacing */
.margin-top-xxl{
    margin-top: var(--spacing-xxl) !important;
}
.margin-top-xl{
    margin-top: var(--spacing-xl) !important;
}
.margin-top-l{
    margin-top: var(--spacing-l) !important;
}
.margin-top-ml{
    margin-top: var(--spacing-ml) !important;
}
.margin-top-m{
    margin-top: var(--spacing-m) !important;
}
.margin-top-s{
    margin-top: var(--spacing-s) !important;
}
.margin-top-xs{
    margin-top: var(--spacing-xs) !important;
}

/* spacing-bottom */
.margin-bottom-xxl{
    margin-bottom: var(--spacing-xxl) !important;
}
.margin-bottom-xl{
    margin-bottom: var(--spacing-xl) !important;
}
.margin-bottom-l{
    margin-bottom: var(--spacing-l) !important;
}
.margin-bottom-ml{
    margin-bottom: var(--spacing-ml) !important;
}
.margin-bottom-m{
    margin-bottom: var(--spacing-m) !important;
}
.margin-bottom-s{
    margin-bottom: var(--spacing-s) !important;
}
.margin-bottom-xs{
    margin-bottom: var(--spacing-xs) !important;
}

/* Padding */
/* Spacing */
.padding-top-xxl{
    padding-top: var(--spacing-xxl) !important;
}
.padding-top-xl{
    padding-top: var(--spacing-xl) !important;
}
.padding-top-l{
    padding-top: var(--spacing-l) !important;
}
.padding-top-ml{
    padding-top: var(--spacing-ml) !important;
}
.padding-top-m{
    padding-top: var(--spacing-m) !important;
}
.padding-top-s{
    padding-top: var(--spacing-s) !important;
}
.padding-top-xs{
    padding-top: var(--spacing-xs) !important;
}

/* spacing-bottom */
.padding-bottom-xxl{
    padding-bottom: var(--spacing-xxl) !important;
}
.padding-bottom-xl{
    padding-bottom: var(--spacing-xl) !important;
}
.padding-bottom-l{
    padding-bottom: var(--spacing-l) !important;
}
.padding-bottom-ml{
    padding-bottom: var(--spacing-ml) !important;
}
.padding-bottom-m{
    padding-bottom: var(--spacing-m) !important;
}
.padding-bottom-s{
    padding-bottom: var(--spacing-s) !important;
}
.padding-bottom-xs{
    padding-bottom: var(--spacing-xs) !important;
}

.font-bold{
    margin-bottom: var(--spacing-xs);
    font-family: var(--klavika-bold);
    font-size: 25px;
    line-height: 34px;
}
.inline-font-bold{
    font-family: var(--klavika-bold);
}

.p-bold-heading{
    font-family: var(--klavika-medium);
    font-size: 20px;
    line-height: 35px;
    display: block;
}
.background-color-21313C p{
    color: #FFFFFF;
}
.font-color-white{
    color: #FFFFFF;
}
.align-right{
    justify-content: flex-end !important;
}
.align-left{
    justify-content: flex-start !important;
}