:root{

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

    --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;

    --header-container-height: 62px;


    /* colors */
    --color-black: #000000;
    --color-darkslate: #023A43;
    --color-silver: #E7ECED;
    --color-green: #42B28D;
    --color-white: #FFFFFF;
    --headings-color: #21313C;
    --color-lightblack: #21313C;

    /* font family */
    /* TODO: fonts */
    --poppins-light: 'poppinslight';
    --poppins-regular: 'poppinsregular';
    --poppins-medium: 'poppinsmedium';
    --poppins-semibold: 'poppinssemibold';
    --poppins-bold: 'poppinsbold';

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

    /* font-sizes */
    --copy-large-font-size: 20px;
    --copy-large-font-line-height: 34px;

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

    --headline-h1-font-size: 74px;
    --headline-h1-line-height: 95px;

    --headline-h2-font-size: 45px;
    --headline-h2-line-height: 57px;

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

    --headline-h4-font-size: 25px;
    --headline-h4-line-height: 36px;

    --navigation-header-font-size : 16px;
    --navigation-header-line-height : 25px;

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

    --button-large-font-size: 25px;
    --button-large-line-height: 36px;

    --button-small-font-size: 17px;
    --button-small-line-height: 25px;

    --quote-font-size: 10px;
    --quote-line-height: 18px;

    --subline-font-size: 20px;
    --subline-line-height: 28px;

    /* 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: 18px 24px;

}

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

.background-color-023A43{
    background-color: var(--color-darkslate);
    color: #ffffff;
}

.background-color-E7ECED{
    background-color: var(--color-silver);
    color: var(--color-darkslate);
}

.background-color-42B28D{
    background-color: var(--color-green);
    color: var(--color-darkslate);
}

.background-color-FFFFFF{
    background-color: var(--color-white);
    color: var(--color-darkslate);
}
/* Font-colors Colors */
.font-color-black{
    color: var(--color-black);
}

.font-color-darkslate{
    color: var(--color-darkslate);
}

.font-color-silver{
    color: var(--color-silver);
}

.font-color-green{
    color: var(--color-green);
}

.font-color-white{
    color: var(--color-white);
}
/* 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;
}

.text-align-left{
    text-align: left !important;
}
.text-align-right{
    text-align: right !important;
}
.text-align-center{
    text-align: center !important;
}

.container.align-center {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.copy-small{

    font-size: var(--copy-small-font-size);
    line-height: var(--copy-small-font-line-height);

}