:root {
    --dark-blue: #084DBD;
    --blue: #126BFB;
    --light-blue: #1C9FFF;
    --baby-blue: #EBF5FF;
    --magenta: #F62069;
    
    --black: #000;
    --black-blue: #1F232E;
    --gray: #6F7580;
    --light-gray: #F7F7F7;
    --white: #ffffff;
    
    --teal: #01899B;
    --light-teal: #75D6E3;
    --green: #00C489;
    --light-green: #66E9C2;
    --purple: #6D33EC;
    --light-purple: #A055FF;
    --dark-magenta: #8D0C59;
    --light-magenta: #F98FC2;
    --yellow: #F2D25F;
    --light-yellow: #FEF9EA;
    
    --borders: #F1EFED;
    --hover: #F62069;
    
    --border-radius: 32px;
    --border-radius-small: 16px;
    --border-radius-tiny: 8px;
    --container-padding: 3.55em 4em;
    --container-padding-small: 2.55em 3em;
} 

/*Text Colors*/
.dark-blue{
	color: var(--dark-blue);
}

.blue{
	color: var(--blue);
}

.light-blue{
	color: var(--light-blue);
}

.very-light-blue{
	color: var(--very-light-blue);
}

.baby-blue{
	color: var(--baby-blue);
}

.magenta{
	color: var(--magenta);
}

.black{
	color: var(--black);
}

.black-blue{
	color: var(--black-blue);
}

.gray,
.gray p{
	color: var(--gray) !important;
}

.light-gray{
	color: var(--light-gray);
}

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

/*Background Colors*/
.bg-dark-blue{
    background-color: var(--dark-blue);
}

.bg-blue{
    background-color: var(--blue);
}

.bg-light-blue{
    background-color: var(--light-blue);
}

.bg-very-light-blue{
    background-color: var(--very-light-blue);
}

.bg-baby-blue{
    background-color: var(--baby-blue);
}

.bg-magenta{
    background-color: var(--magenta);
}

.bg-black{
	background-color: var(--black);
}

.bg-black-blue{
    background-color: var(--black-blue);
}

.bg-gray{
    background-color: var(--gray);
}

.bg-borders{
    background-color: var(--borders);
}

.bg-light-gray{
    background-color: var(--light-gray);
}

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

.bg-teal{
	background-color: var(--teal);
}

.bg-light-teal{
	background-color: var(--light-teal);
}

.bg-green{
	background-color: var(--green);
}

.bg-light-green{
	background-color: var(--light-green);
}

.bg-purple{
	background-color: var(--purple);
}

.bg-light-purple{
	background-color: var(--light-purple);
}

.bg-dark-magenta{
	background-color: var(--dark-magenta);
}

.bg-light-magenta{
	background-color: var(--light-magenta);
}

.bg-yellow{
	background-color: var(--yellow);
}

.bg-light-yellow{
	background-color: var(--light-yellow);
}


.gradient-blue-magenta{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#126bfb+0,1c9fff+50,f62069+99 */
    background: -webkit-linear-gradient(left, #126bfb 0%, #1c9fff 50%, #f62069 100%);
    background: -o-linear-gradient(left, #126bfb 0%, #1c9fff 50%, #f62069 100%);
    background: linear-gradient(to right, #126bfb 0%, #1c9fff 50%, #f62069 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.gradient-magenta-blue{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f62069+0,1c9fff+50,126bfb+100 */
    background: -webkit-linear-gradient(left, #f62069 0%, #1c9fff 50%, #126bfb 100%);
    background: -o-linear-gradient(left, #f62069 0%, #1c9fff 50%, #126bfb 100%);
    background: linear-gradient(to right, #f62069 0%, #1c9fff 50%, #126bfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bg-magenta-gradient{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f62069+60,f98fc2+100 */
    background: -webkit-linear-gradient(top left, #f62069 60%, #f98fc2 100%);
    background: -o-linear-gradient(top left, #f62069 60%, #f98fc2 100%);
    background: linear-gradient(to bottom right, #f62069 60%, #f98fc2 100%); 
}

.bg-blue-gradient{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#126bfb+60,1c9fff+100 */
    background: -webkit-linear-gradient(top left, #126bfb 60%, #1c9fff 100%);
    background: -o-linear-gradient(top left, #126bfb 60%, #1c9fff 100%);
    background: linear-gradient(to bottom right, #126bfb 60%, #1c9fff 100%);
}

.bg-dark-blue-gradient{
     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#084dbd+0,126bfb+100 */
    background: -webkit-linear-gradient(top left, #084dbd 0%, #126bfb 100%);
    background: -o-linear-gradient(top left, #084dbd 0%, #126bfb 100%);
    background: linear-gradient(to bottom right, #084dbd 0%, #126bfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.bg-gray-gradient{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+60,ffffff+100 */
    background: -webkit-linear-gradient(top left, #f7f7f7 60%, #ffffff 100%);
    background: -o-linear-gradient(top left, #f7f7f7 60%, #ffffff 100%);
    background: linear-gradient(to bottom right, #f7f7f7 60%, #ffffff 100%);

}


@media only screen and (max-width: 720px) {
    :root {
        --container-padding: 2.55em 2.55em;
    }
}