:root{
    /* colors */
    --color-black: #232323;
    --color-gray: #f2f2f2;
    --color-golden: #B97D50;
    --color-brown: #50282D;
    --color-beige: #CDC8B9;
    --color-red: #FF4646;
    --color-lightgray: #848884;

    /* font family */
    --font-primary-regular: 'godfrey-regular';
    --font-primary-medium: 'godfrey-medium';
    --font-primary-bold: 'godfrey-bold';

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


    /* spacing */
    --spacing-xxxl: 300px;
    --spacing-xxl: 120px;
    --spacing-xl: 96px;
    --spacing-l: 60px;
    --spacing-ml: 48px;
    --spacing-m: 36px;
    --spacing-s: 24px;
    --spacing-xs: 12px;

    /* font-sizes */

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

    --header-height: 68px;

    --headline-h1-font-size: 55px;
    --headline-h1-line-height: 60px;

    --headline-h2-font-size: 50px;
    --headline-h2-line-height: 60px;

    --headline-h3-font-size: 35px;
    --headline-h3-line-height: 47px;

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

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

    --text-font-size: 18px;
    --text-font-line-height: 35px;
    --text-letter-spacing: 2px;


    --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: 72px;

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

    /* footer */
    --footer-padding: 60px;

    /* Bike models */
    --bike-model-category-font-size: 30px;
    --bike-model-category-line-height: 40px;

    --bike-model-name-font-size: 95px;
    --bike-model-name-line-height: 80px;

    --bike-product-name-font-size: 49px;
    --bike-product-name-line-height: 54px;



    /* cta  */
    --cta-font-size: 20px;
    --cta-font-line-height: 35px;
    --cta-spacing: 20px;


}

*{
    letter-spacing: 2px;
}

/* Spacing */
.margin-top-xxxl{
    margin-top: var(--spacing-xxxl) !important;
}
.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 */
.padding-top-xxxl{
    padding-top: var(--spacing-xxxl) !important;
}
.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-xxxl{
    padding-bottom: var(--spacing-xxxl) !important;
}
.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(--font-primary-bold);
    font-size: 25px;
    line-height: 34px;
}
.inline-font-bold{
    font-family: var(--font-primary-bold);
}

.align-right{
    justify-content: flex-end !important;
}
.align-left{
    justify-content: flex-start !important;
}

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

/* background colors */
.background-color-232323 {
    background-color: #232323;
    color: #ffffff;
}

.background-color-f2f2f2 {
    background-color: #f2f2f2;
    color: #232323;
}

.background-color-b97d50 {
    background-color: #B97D50;
    color: #232323;
}

.background-color-50282d {
    background-color: #50282D;
    color: #ffffff;
}

.background-color-cdc8b9 {
    background-color: #CDC8B9;
    color: #ffffff;
}

.background-color-ff4646 {
    background-color: #FF4646;
    color: #232323;
}
@media (max-width: 1320px) {
    :root {

        /* container width */
        --normal-container-width: calc(100vw - 48px);
        --normal-container-width-max: calc(100vw - 48px);

    }
}