:root{

    /* colors */
    --color-red: #E3032D;
    --color-black: #21313C;
    --color-gray: #798891;
    --color-silver: #C3D0D9;
    --color-off-white: #ECF0F5;

    /* font family */
    --klavika-regular: 'klavika_basicregular';
    --klavika-light: 'klavika_basiclight';
    --klavika-medium: 'klavika_basicmedium';
    --klavika-bold: 'klavika_basicbold';


    /* font-sizes */
    --copy-font-size: 18px;
    --copy-font-line-height: 30px;
    --header-h1-font-size: 110px;
    --header-h1-line-height: 97px;

    --header-h2-font-size: 45px;
    --header-h2-line-height: 50px;
    --header-h2-under-bar-width: 79px;
    --header-h2-under-bar-height: 7px;



    --font-size-50: 50px;
    --font-size-50-line-height: 56px;

    --font-size-30: 30px;
    --font-size-30-line-height: 42px;



    --header-h3-font-size: 30px;
    --header-h3-line-height: 34px;

    --footer-address-font-size: 17px;
    --footer-address-line-height: 25px;

    /* call to action in header */
    --heading-cta-font-size: 30px;
    --heading-cta-font-line-height: 34px;
    --heading-cta-icon-dimensions: 110px;
    --heading-cta-icon-border-size: 2px;
    --heading-cta-icon-margin-left: 26px;


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

    --main-top-spacing: 185px;

    /* container width */
    --container-width: 1320px;
    --max-container-width: 1320px;
    --full-container-width: 100%;
    --full-container-max-width: 1920px;
    --medium-container-width: 1722px;
    --medium-container-max-width: 1722px;
    --max-width-ultrawide-view: 100%;

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

    /* 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;
}
/*

    --color-red: #E3032D;
    --color-black: #21313C;
    --color-gray: #798891;
    --color-silver: #C3D0D9;
    --color-off-white: #ECF0F5;

*/

.font-color-E3032D{
    color: var(--color-red);
}
.font-color-21313C{
    color: var(--color-black);
}
.font-color-798891{
    color: var(--color-gray);
}
.font-color-C3D0D9{
    color: var(--color-silver);
}
.font-color-ECF0F5{
    color: var(--color-off-white);
}

.background-color-E3032D{
    background-color: var(--color-red);
    color: #FFFFFF;
}
.background-color-E3032D p{
    color: #FFFFFF;
}

.background-color-E3032D h2:after{
    background: #FFFFFF;
}
.background-color-E3032D a.cta-url.with-arrow {
    color: #FFFFFF;
}

.background-color-21313C a.cta-url.with-arrow {
    color: #FFFFFF;
}
.background-color-21313C{
    background-color: var(--color-black);
    color: #ffffff;
}
.background-color-798891{
    background-color: var(--color-gray);
}
.background-color-C3D0D9{
    background-color: var(--color-silver);
}
.background-color-ECF0F5{
    background-color: var(--color-off-white);
}
.background-color-ffffff{
    background-color: #ffffff;
}

/* 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;
}