:root {
    --primary: #078CFF;
    --primary-medium: #003CAA;
    --primary-medium-light: #003FD7;
    --primary-dark: #062565;
    --primary-xdark: #0A3E70;
    --primary-light: #D1EDFF;
    --primary-xlight: #AEE1FF;
    --primary-xxlight: #35B4FF;
    --primary-gradient: #0066FF;
    --primary-shade: #006CCB;
    --grey: #CCD2D5;
    --grey-light: #F4F5F7;
    --grey-dark: #40464A;
    --grey-gradient: #A8B3B8;
    --white: #FFFFFF;
    --black: #0B0C0D;  
    --success: #68BE3D;
    --danger: #C53141;
    --background: #EBF7FF;
}

/*===== 1: Typography ================*/

@font-face {
    font-family: "Montserrat Light";
    src: url("../libs/fonts/monserrat/Montserrat-Light.ttf");
}

@font-face {
    font-family: "Montserrat Regular";
    src: url("../libs/fonts/monserrat/Montserrat-Regular.ttf");
}

@font-face {
    font-family: "Montserrat Medium";
    src: url("../libs/fonts/monserrat/Montserrat-Medium.ttf");
}

@font-face {
    font-family: "Montserrat Bold";
    src: url("../libs/fonts/monserrat/Montserrat-Bold.ttf");
}

h1 {
    font-family: "Montserrat Bold";
    font-size: 69px;
}

h2 {
    font-family: "Montserrat Bold";
    font-size: 55px;
}

h3 {
    font-family: "Montserrat Medium";
    font-size: 44px;
}

h4 {
    font-family: "Montserrat Medium";
    font-size: 35px;
}

h5 {
    font-family: "Montserrat Regular";
    font-size: 28px;
}

h6 {
    font-family: "Montserrat Light";
    font-size: 23px;
}

b, th {
    font-family: "Montserrat Bold" !important;
}

body, html, td {
    font-family: "Montserrat Regular";
    font-size: 18px;
}

td, li, button, label {
    font-family: "Montserrat Regular" !important;
}

.cursor {
    cursor: pointer;
}

main {
    min-height: 80vh;
}

p {
    font-family: "Montserrat Light";
    font-size: 18px;
}

small, span, a, div {
    font-family: "Montserrat Light";
}

.background {
    background-color: var(--background) !important;
}

.text-white {
    color: var(--white);
}

.text-primary-shade {
    color: var(--primary-shade) !important;
}

.btn-white {
    background-color: var(--white) !important;
}

.btn-white:hover {
    background-color: var(--primary) !important;
    color: var(--white) !important;
}

.btn-primary {
    color: var(--white);
    background-color: var(--primary) !important;
    border: 1px solid var(--primary-light) !important;
}

.btn-primary:hover {
    background-color: var(--white) !important;
    color: var(--primary-dark) !important;
    border: 1px solid var(--primary-medium) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
    color: var(--white);
}

.btn-primary-medium {
    color: var(--white);
    background-color: var(--primary-medium) !important;
    border: 3px solid var(--primary-light) !important;
}

.bg-primary-medium {
    background-color: var(--primary-medium) !important;
    color: var(--white);
}

.primary-dark-gradient {
    background-color: #003CAA66 !important;
}

.text-primary-medium {
    color: var(--primary-medium) !important;
}

.text-primary-xxlight {
    color: var(--primary-xxlight) !important;
}


.btn-primary-medium-light {
    color: var(--white);
    background-color: var(--primary-medium-light) !important;
    border: 3px solid var(--primary-light) !important;
}

.bg-primary-medium-light {
    background-color: var(--primary-medium-light) !important;
    color: var(--white);
}

.text-primary-medium-light {
    color: var(--primary-medium-light) !important;
}

.bg-primary-dark {
    background-color: var(--primary-dark) !important;
    color: var(--white);
}

.bg-primary-xdark {
    background-color: var(--primary-xdark) !important;
    color: var(--white);
}

.bg-primary-light {
    background-color: var(--primary-light) !important;
}

.bg-primary-dark {
    background-color: var(--primary-dark) !important;
}

.bg-primary-xlight {
    background-color: var(--primary-xlight) !important;
}

.text-primary-gardient {
    color: var(--primary-gradient) !important;
}

.text-primary-light {
    color: var(--primary-light) !important;
}

.text-primary-dark {
    color: var(--primary-dark) !important;
}

.text-grey-dark {
    color: var(--grey-dark) !important;
}

.text-grey-light {
    color: var(--grey-light) !important;
}

.bg-primary-gradient {
    background-color: var(--primary-gradient) !important;
}

.bg-grey {
    background-color: var(--grey) !important;
}

.bg-grey-light {
    background-color: var(--grey-light) !important;
}

.text-grey-dark {
    color: var(--grey-dark) !important;
}

button {
    border-radius: 3px;
    border: 1px solid var(--primary-light) !important;
    cursor: pointer !important;
}

.bd-btm-grey-gradient {
    border-bottom: 1px solid var(--grey-gradient) !important;
}

@keyframes shake {
  5% { transform: translateX(0); }
  20% { transform: translateX(0); }
}


.underline {
    text-decoration: underline !important;
}

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



/*============================== 
    MOBILE SCREENS
================================*/

@media only screen and (max-width: 600px) and (min-width: 200px) {
    h1 {
        font-family: "Montserrat Bold";
        font-size: 48px;
    }

    h2 {
        font-family: "Montserrat Bold";
        font-size: 40px;
    }

    h3 {
        font-family: "Montserrat Medium";
        font-size: 33px;
    }

    h4 {
        font-family: "Montserrat Medium";
        font-size: 28px;
    }

    h5 {
        font-family: "Montserrat Regular";
        font-size: 23px;
    }

    h6 {
        font-family: "Montserrat Light";
        font-size: 19px;
    }
}