:root {
    --primary300: #003365; /* same as primary 500 */
    --primary400: #4A64AF;
    --primary500: #003365;
    --primary600: #000A24;
    --secondary400: #EE3311;
    --secondary500: #CC2100;
    --secondary600: #AD2002;
    --light400: #F4F4F4;
    --light500: #EAEAEA;
    --light600: #D9D9D9;
    --light700: #CCCCCC;
    --light800: #B2B2B2;
    --light900: #9D9D9D;
    --dark50: #939393;
    --dark100: #777579;
    --dark400: #666666;
    --dark500: #1D1D1D;
    --success400: #76B957;
    --success500: #67B144;
    --success600: #62A543;
    --danger400: #F52800;
    --danger500: #CB2602;
    --danger600: #AD2002;
    --warning400: #FDBF5D;
    --warning500: #FDAF35;
    --warning600: #E49D30;
    --white: #FFFFFF;
    --black: #000000;
    --font-family-1: merriweather, georgia, serif;
    --font-family-2: Source Sans Pro, sans-serif;
    --font-family-3: Montserrat, Helvetica, Arial, sans-serif;
}

.text-heading-1 {
    font-weight: 700;
    font-size: 60px;
    line-height: 72px;
    font-family: var(--font-family-1)
}

.text-heading-2 {
    font-weight: 700;
    font-size: 48px;
    line-height: 64px;
    font-family: var(--font-family-1)
}

.text-heading-3 {
    font-weight: 700;
    font-size: 32px;
    line-height: 40.22px;
    font-family: var(--font-family-1)
}

.text-heading-4 {
    font-weight: 700;
    font-size: 22px;
    line-height: 26.82px;
    font-family: var(--font-family-1)
}

.text-heading-5 {
    font-weight: 700;
    font-size: 20px;
    line-height: 25.14px;
    font-family: var(--font-family-1)
}

.text-heading-6 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22.63px;
    font-family: var(--font-family-1)
}

.text-title-1 {
    font-weight: 700;
    font-size: 20px;
    line-height: 24.38px;
    font-family: var(--font-family-3)
}

.text-title-2 {
    font-weight: 700;
    font-size: 14px;
    line-height: 17.07px;
    font-family: var(--font-family-3)
}

.text-title-3 {
    font-weight: 700;
    font-size: 16px;
    line-height: 20.11px;
    font-family: var(--font-family-3)
}

.text-title-4 {
    font-weight: 700;
    font-size: 14px;
    line-height: 17.6px;
    font-family: var(--font-family-3)
}

.text-title-5 {
    font-weight: 700;
    font-size: 12px;
    line-height: 15.08px;
    font-family: var(--font-family-3)
}

.text-title-6 {
    font-weight: 700;
    font-size: 10px;
    line-height: 12.57px;
    font-family: var(--font-family-3)
}

.text-body-1 {
    font-weight: 400;
    font-size: 20px;
    line-height: 25.14px;
    font-family: var(--font-family-2)
}

.text-body-2 {
    font-weight: 400;
    font-size: 18px;
    line-height: 22.63px;
    font-family: var(--font-family-2)
}

.text-body-3 {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    font-family: var(--font-family-2)
}

.text-body-4 {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-family-2)
}

.text-body-5 {
    font-weight: 400;
    font-size: 12px;
    line-height: 15.08px;
    font-family: var(--font-family-2)
}

.text-body-6 {
    font-weight: 400;
    font-size: 10px;
    line-height: 12.57px;
    font-family: var(--font-family-2)
}

@media (min-width:576px) {
    .sm\:text-heading-1 {
        font-weight: 700;
        font-size: 60px;
        line-height: 72px;
        font-family: var(--font-family-1)
    }

    .sm\:text-heading-2 {
        font-weight: 700;
        font-size: 48px;
        line-height: 64px;
        font-family: var(--font-family-1)
    }

    .sm\:text-heading-3 {
        font-weight: 700;
        font-size: 32px;
        line-height: 40.22px;
        font-family: var(--font-family-1)
    }

    .sm\:text-heading-4 {
        font-weight: 700;
        font-size: 22px;
        line-height: 26.82px;
        font-family: var(--font-family-1)
    }

    .sm\:text-heading-5 {
        font-weight: 700;
        font-size: 20px;
        line-height: 25.14px;
        font-family: var(--font-family-1)
    }

    .sm\:text-heading-6 {
        font-weight: 700;
        font-size: 18px;
        line-height: 22.63px;
        font-family: var(--font-family-1)
    }

    .sm\:text-title-1 {
        font-weight: 700 !important;
        font-size: 20px !important;
        line-height: 24.38px !important;
        font-family: var(--font-family-3) !important
    }

    .sm\:text-title-2 {
        font-weight: 700 !important;
        font-size: 14px !important;
        line-height: 17.07px !important;
        font-family: var(--font-family-3) !important
    }

    .sm\:text-title-3 {
        font-weight: 700 !important;
        font-size: 16px !important;
        line-height: 20.11px !important;
        font-family: var(--font-family-3) !important
    }

    .sm\:text-title-4 {
        font-weight: 700 !important;
        font-size: 14px !important;
        line-height: 17.6px !important;
        font-family: var(--font-family-3) !important
    }

    .sm\:text-title-5 {
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 15.08px !important;
        font-family: var(--font-family-3) !important
    }

    .sm\:text-title-6 {
        font-weight: 700 !important;
        font-size: 10px !important;
        line-height: 12.57px !important;
        font-family: var(--font-family-3) !important
    }

    .sm\:text-body-1 {
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 25.14px !important;
        font-family: var(--font-family-2) !important
    }

    .sm\:text-body-2 {
        font-weight: 400 !important;
        font-size: 18px !important;
        line-height: 22.63px !important;
        font-family: var(--font-family-2) !important
    }

    .sm\:text-body-3 {
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 20px !important;
        font-family: var(--font-family-2) !important
    }

    .sm\:text-body-4 {
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        font-family: var(--font-family-2) !important
    }

    .sm\:text-body-5 {
        font-weight: 400 !important;
        font-size: 12px !important;
        line-height: 15.08px !important;
        font-family: var(--font-family-2) !important
    }

    .sm\:text-body-6 {
        font-weight: 400 !important;
        font-size: 10px !important;
        line-height: 12.57px !important;
        font-family: var(--font-family-2) !important
    }
}

@media (min-width:768px) {
    .md\:text-heading-1 {
        font-weight: 700;
        font-size: 60px;
        line-height: 72px;
        font-family: var(--font-family-1)
    }

    .md\:text-heading-2 {
        font-weight: 700;
        font-size: 48px;
        line-height: 64px;
        font-family: var(--font-family-1)
    }

    .md\:text-heading-3 {
        font-weight: 700;
        font-size: 32px;
        line-height: 40.22px;
        font-family: var(--font-family-1)
    }

    .md\:text-heading-4 {
        font-weight: 700;
        font-size: 22px;
        line-height: 26.82px;
        font-family: var(--font-family-1)
    }

    .md\:text-heading-5 {
        font-weight: 700;
        font-size: 20px;
        line-height: 25.14px;
        font-family: var(--font-family-1)
    }

    .md\:text-heading-6 {
        font-weight: 700;
        font-size: 18px;
        line-height: 22.63px;
        font-family: var(--font-family-1)
    }

    .md\:text-title-1 {
        font-weight: 700;
        font-size: 20px;
        line-height: 24.38px;
        font-family: var(--font-family-3)
    }

    .md\:text-title-2 {
        font-weight: 700;
        font-size: 14px;
        line-height: 17.07px;
        font-family: var(--font-family-3)
    }

    .md\:text-title-3 {
        font-weight: 700;
        font-size: 16px;
        line-height: 20.11px;
        font-family: var(--font-family-3)
    }

    .md\:text-title-4 {
        font-weight: 700;
        font-size: 14px;
        line-height: 17.6px;
        font-family: var(--font-family-3)
    }

    .md\:text-title-5 {
        font-weight: 700;
        font-size: 12px;
        line-height: 15.08px;
        font-family: var(--font-family-3)
    }

    .md\:text-title-6 {
        font-weight: 700;
        font-size: 10px;
        line-height: 12.57px;
        font-family: var(--font-family-3)
    }

    .md\:text-body-1 {
        font-weight: 400;
        font-size: 20px;
        line-height: 25.14px;
        font-family: var(--font-family-2)
    }

    .md\:text-body-2 {
        font-weight: 400;
        font-size: 18px;
        line-height: 22.63px;
        font-family: var(--font-family-2)
    }

    .md\:text-body-3 {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        font-family: var(--font-family-2)
    }

    .md\:text-body-4 {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        font-family: var(--font-family-2)
    }

    .md\:text-body-5 {
        font-weight: 400;
        font-size: 12px;
        line-height: 15.08px;
        font-family: var(--font-family-2)
    }

    .md\:text-body-6 {
        font-weight: 400;
        font-size: 10px;
        line-height: 12.57px;
        font-family: var(--font-family-2)
    }
}

@media (min-width:992px) {
    .lg\:text-heading-1 {
        font-weight: 700;
        font-size: 60px;
        line-height: 72px;
        font-family: var(--font-family-1)
    }

    .lg\:text-heading-2 {
        font-weight: 700;
        font-size: 48px;
        line-height: 64px;
        font-family: var(--font-family-1)
    }

    .lg\:text-heading-3 {
        font-weight: 700;
        font-size: 32px;
        line-height: 40.22px;
        font-family: var(--font-family-1)
    }

    .lg\:text-heading-4 {
        font-weight: 700;
        font-size: 22px;
        line-height: 26.82px;
        font-family: var(--font-family-1)
    }

    .lg\:text-heading-5 {
        font-weight: 700;
        font-size: 20px;
        line-height: 25.14px;
        font-family: var(--font-family-1)
    }

    .lg\:text-heading-6 {
        font-weight: 700;
        font-size: 18px;
        line-height: 22.63px;
        font-family: var(--font-family-1)
    }

    .lg\:text-title-1 {
        font-weight: 700;
        font-size: 20px;
        line-height: 24.38px;
        font-family: var(--font-family-3)
    }

    .lg\:text-title-2 {
        font-weight: 700;
        font-size: 14px;
        line-height: 17.07px;
        font-family: var(--font-family-3)
    }

    .lg\:text-title-3 {
        font-weight: 700;
        font-size: 16px;
        line-height: 20.11px;
        font-family: var(--font-family-3)
    }

    .lg\:text-title-4 {
        font-weight: 700;
        font-size: 14px;
        line-height: 17.6px;
        font-family: var(--font-family-3)
    }

    .lg\:text-title-5 {
        font-weight: 700;
        font-size: 12px;
        line-height: 15.08px;
        font-family: var(--font-family-3)
    }

    .lg\:text-title-6 {
        font-weight: 700;
        font-size: 10px;
        line-height: 12.57px;
        font-family: var(--font-family-3)
    }

    .lg\:text-body-1 {
        font-weight: 400;
        font-size: 20px;
        line-height: 25.14px;
        font-family: var(--font-family-2)
    }

    .lg\:text-body-2 {
        font-weight: 400;
        font-size: 18px;
        line-height: 22.63px;
        font-family: var(--font-family-2)
    }

    .lg\:text-body-3 {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        font-family: var(--font-family-2)
    }

    .lg\:text-body-4 {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        font-family: var(--font-family-2)
    }

    .lg\:text-body-5 {
        font-weight: 400;
        font-size: 12px;
        line-height: 15.08px;
        font-family: var(--font-family-2)
    }

    .lg\:text-body-6 {
        font-weight: 400;
        font-size: 10px;
        line-height: 12.57px;
        font-family: var(--font-family-2)
    }
}