﻿:root {
    /*    --color-gradient-begin: #E33B17;
    --color-gradient-end: #BE3215;
    --color-header-scroll: white;
    --color-primary-100: #E33B17;
    --color-primary-80: #FF4D00;
    --color-primary-dark: #BE3215;
    --color-primary-light: #FFCBB5;
    --color-primary-rgb-light: 255, 203, 181;
    --color-second-100: #3F4ED1;
    --color-second-80: #1A2370;
    --color-second-light: #D5DAFF;
    --color-second-dark: #3C4065;
    --color-tertiary-80: #466CC9;
    --color-tertiary-light: #9DB8F9;
    --color-tertiary-dark: #365AB3;
    --color-black: #000000;*/
    --color-gray-80: #3F4042;
    --color-gray-60: #636363;
    --color-gray-40: #B4B4B4;
    --color-gray-30: #E1E4E9;
    --color-gray-20: #F0F4F9;
    --color-gray-10: #F5F7F9;
    /*    --color-gray-rgb-10: 245, 247, 249;
    --color-white: #FFFFFF;
    --color-green-feedback: #00825B;
    --color-yellow-feedback: #F2D811;
    --color-red-feedback: #CD2F29;
    --font-primary-regular: "Poppins-Regular";
    --font-primary-medium: "Poppins-Medium";
    --font-primary-semibold: "Poppins-SemiBold";
    --font-primary-bold: "Poppins-Bold";*/
}


@font-face {
    font-family: Lato-Regular;
    src: url("/Content/fonts/Lato-Regular.ttf");
}

@font-face {
    font-family: Lato-Medium;
    src: url("/Content/fonts/Lato-Medium.ttf");
}

@font-face {
    font-family: Lato-SemiBold;
    src: url("/Content/fonts/Lato-Semibold.ttf");
}

@font-face {
    font-family: Lato-Bold;
    src: url("/Content/fonts/Lato-Bold.ttf");
}

.primary-fontfamily-regular {
    font-family: Lato-Regular;
}

.primary-fontfamily-medium {
    font-family: Lato-Medium;
}

.primary-fontfamily-semibold {
    font-family: Lato-SemiBold;
}

.primary-fontfamily-bold {
    font-family: Lato-Bold;
}

.size-9 {
    font-size: 9px;
}

.size-11 {
    font-size: 11px;
}

.size-12 {
    font-size: 12px;
}

.size-12-i {
    font-size: 12px !important;
}

.size-14 {
    font-size: 14px;
}

.size-14-i {
    font-size: 14px !important;
}

.size-15 {
    font-size: 15px;
}

.size-16 {
    font-size: 16px;
}

.size-18 {
    font-size: 18px;
}

.size-20 {
    font-size: 20px;
}

.size-22 {
    font-size: 22px;
}

.size-24 {
    font-size: 24px;
}

.size-28 {
    font-size: 28px;
}

.size-32 {
    font-size: 32px;
}

.size-35 {
    font-size: 35px;
}

.size-44 {
    font-size: 44px;
}

.size-48 {
    font-size: 48px;
}

@media (min-width: 768px) {
    .size-sm-9 {
        font-size: 9px;
    }

    .size-sm-11 {
        font-size: 11px;
    }

    .size-sm-12 {
        font-size: 12px;
    }

    .size-sm-12-i {
        font-size: 12px !important;
    }

    .size-sm-14 {
        font-size: 14px;
    }

    .size-sm-15 {
        font-size: 15px;
    }

    .size-sm-16 {
        font-size: 16px;
    }

    .size-sm-18 {
        font-size: 18px;
    }

    .size-sm-20 {
        font-size: 20px;
    }

    .size-sm-24 {
        font-size: 24px;
    }

    .size-sm-28 {
        font-size: 28px;
    }

    .size-sm-32 {
        font-size: 32px;
    }

    .size-sm-35 {
        font-size: 35px;
    }

    .size-sm-44 {
        font-size: 44px;
    }

    .size-sm-48 {
        font-size: 48px;
    }
}

.gray-color-80 {
    color: var(--color-gray-80);
}

.gray-color-60 {
    color: var(--color-gray-60);
}

.gray-color-40 {
    color: var(--color-gray-40);
}

.gray-color-30 {
    color: var(--color-gray-30);
}

.gray-color-20 {
    color: var(--color-gray-20);
}

.gray-color-10 {
    color: var(--color-gray-10);
}

.gray-color-bg-80 {
    background-color: var(--color-gray-80);
}

.gray-color-bg-60 {
    background-color: var(--color-gray-60);
}

.gray-color-bg-40 {
    background-color: var(--color-gray-40);
}

.gray-color-bg-30 {
    background-color: var(--color-gray-30);
}

.gray-color-bg-20 {
    background-color: var(--color-gray-20);
}

.gray-color-bg-10, .gray-color-bg-10-20, .gray-color-bg-10-30 {
    background-color: var(--color-gray-10);
}

    .gray-color-bg-10-20:hover {
        background-color: var(--color-gray-20);
    }

    .gray-color-bg-10-30:hover {
        background-color: var(--color-gray-30);
    }

.gray-color-80-i {
    color: var(--color-gray-80) !important;
}

.gray-color-60-i {
    color: var(--color-gray-60) !important;
}

.gray-color-40-i {
    color: var(--color-gray-40) !important;
}

.gray-color-20-i {
    color: var(--color-gray-20) !important;
}

.gray-color-10-i {
    color: var(--color-gray-10) !important;
}

.gray-color-bg-80-i {
    background-color: var(--color-gray-80) !important;
}

.gray-color-bg-60-i {
    background-color: var(--color-gray-60) !important;
}

.gray-color-bg-40-i {
    background-color: var(--color-gray-40) !important;
}

.gray-color-bg-30-i {
    background-color: var(--color-gray-30) !important;
}

.gray-color-bg-20-i {
    background-color: var(--color-gray-20) !important;
}

.gray-color-bg-10-i {
    background-color: var(--color-gray-10) !important;
}

/*HOVER*/
.houver-gray-color-bg-30-i:hover {
    background-color: var(--color-gray-30) !important;
}
.houver-gray-color-bg-40-i:hover {
    background-color: var(--color-gray-40) !important;
}