:root{
    --text-xs: 10px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 28px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 48px;
    --text-6xl: 52px;
    --text-7xl: 58px;
    --text-gl: 75px;
    --text-2gl: 90px;

    --text-display: 'Overpass', sans-serif!important;
    --text-serif: 'Lato', sans-serif!important;
    --text-fa-free: 'Font Awesome 5 Free','FontAwesome'!important;
    --text-fa-brands: "Font Awesome 5 Brands"!important
}

*{
    font-family: var(--text-serif);
    font-size: var(--text-md);
}

h1, h2, h1 *, h2 *, .h1, .h2, .h1 *, .h2 * {
    font-family: var(--text-display);
}

h1, .h1, h1 *, .h1 *{
    font-size: var(--text-4xl)
}
h2, .h2, h2 *, .h2 *{
    font-size: var(--text-2xl)
}
h3, .h3, h3 *, .h3 *{
    font-size: var(--text-lg)
}
h4, .h4, h4 *, .h4 *{
    font-size: var(--text-md)
}
h5, .h5, h5 *, .h5 *{
    font-size: var(--text-sm)
}
h6, .h6, h6 *, .h6 *{
    font-size: var(--text-xs)
}

.btn{
    font-size: var(--text-md);
}

.cta{
    font-size: var(--text-lg);
}

b, b *, .b, .cta{
	font-weight: 900;
}

.fa, .far, .fas{
	font-family: var(--text-fa-free)
}
.fab{
	font-family: var(--text-fa-brands)
}

p, .p, p *, .p *{
    font-size: var(--text-md)
}

.text-xs{
    font-size: var(--text-xs)
}
.text-sm{
    font-size: var(--text-sm)
}