:root{
    --font-regular: 'PTSans';
    --font-special: 'PTSansCaption';

    --font-size: 15px;
    --font-size-backend: 17px;
    --font-size-navigation: 16px;
    --h6-size: 16px;
    --h5-size: 17px;
    --h4-size: 18px;
    --h3-size: 20px;
    --h2-size: 23px;
    --h1-size: 35px;

    --text-color-white: white;
    --text-color-black: #000000;
    --text-color-default: #000000;

    --bg-color-default-trans: #95c11fE6;
    --bg-color-default: transparent;

    --color-1: #FFFFFF;
    --color-2: #FBFCFD;
    --color-3: #F4F7FA;
    --color-4: #DFE9F0;
    --color-5: #C9DAE6;
    --color-6: #C58F2D;
    --color-7: #5B7992;
    --color-8: #2B6B9C;
    --color-9: #1B4262;
    --color-10: #2b6b9cA6;
    --color-11: #102C43;
    --color-12: #102C43;

    --bg-color-1: #FFFFFF;
    --bg-color-2: #FBFCFD;
    --bg-color-3: #F4F7FA;
    --bg-color-4: #DFE9F0;
    --bg-color-5: #C9DAE6;
    --bg-color-6: #C58F2D;
    --bg-color-7: #5B7992;
    --bg-color-8: #2B6B9C;
    --bg-color-9: #1B4262;
    --bg-color-10: #2b6b9cA6;
    --bg-color-11: #102C43;
    --bg-color-12: #102C43;


    --color-1-trans: #F7F7F7E6;
    --color-2-trans: rgba(111, 101, 111, .20);
    --color-3-trans: #332433E6;
    --color-4-trans: #4D0F00E6;
    --color-5-trans: #D1E17BE6;
    --color-6-trans: #A5C400E6;
    --color-7-trans: #768B03E6;
    --color-8-trans: #2b6b9cA6;
    --color-9-trans: #FFB319E6;
    --color-10-trans: #FF8019E6;
    --color-11-trans: #FF4D19E6;
    --color-12-trans: #FF4D19E6;


    --text-color-1: #FFFFFF;
    --text-color-2: #FBFCFD;
    --text-color-3: #F4F7FA;
    --text-color-4: #DFE9F0;
    --text-color-5: #C9DAE6;
    --text-color-6: #C58F2D;
    --text-color-7: #5B7992;
    --text-color-8: #2B6B9C;
    --text-color-9: #1B4262;
    --text-color-10: #2b6b9cA6;
    --text-color-11: #102C43;
    --text-color-12: #102C43;

    --btn-text-color-white: #ffffff;
    --btn-text-color-default: #ffffff;
    --btn-text-color-1: #102C43;
    --btn-text-color-2: #102C43;
    --btn-text-color-3: #102C43;
    --btn-text-color-4: #102C43;
    --btn-text-color-5: #102C43;
    --btn-text-color-6: #FBFCFD;
    --btn-text-color-7: #102C43;
    --btn-text-color-8: #C9DAE6;
    --btn-text-color-9: #C9DAE6;
    --btn-text-color-10: #C9DAE6;
    --btn-text-color-11: #C9DAE6;
    --btn-text-color-12: #C9DAE6;

    --gallerie-space-extra-small: 2px;
    --gallerie-space-small: 5px;
    --gallerie-space-medium: 7px;
    --gallerie-space-large: 10px;
    --gallerie-space-extra-large: 15px;

    --gradient-1: transparent linear-gradient(180deg, #2B6B9C00 0%, #102C43CC 100%) 0% 0% no-repeat padding-box;
    --gradient-2: transparent linear-gradient(0deg, #2B6B9C00 0%, #102C43CC 100%) 0% 0% no-repeat padding-box;
    --gradient-3: transparent linear-gradient(270deg, #C58F2D 0%, #2B6B9C 48%, #102C43 100%) 0% 0% no-repeat padding-box;
}

@media(min-width: 768px) {
    :root{
        --font-size: 16px;
        --h6-size: 20px;
        --h5-size: 23px;
        --h4-size: 28px;
        --h3-size: 32px;
        --h2-size: 40px;
        --h1-size: 60px;
    }
}
@media(min-width: 1200px) {
    :root{
        --font-size: 16px;
        --h6-size: 18px;
        --h5-size: 20px;
        --h4-size: 23px;
        --h3-size: 28px;
        --h2-size: 30px;
        --h1-size: 60px;
    }
}
@media(min-width: 1440px) {
    :root{
        --font-size: 16px;
        --h6-size: 20px;
        --h5-size: 23px;
        --h4-size: 28px;
        --h3-size: 35px;
        --h2-size: 40px;
        --h1-size: 50px;
    }
}

@media(min-width: 1900px) {
    :root{
        --font-size-navigation: 18px;
    }
}