:root {
	--primary: #FFDB44;
	--yellow: #FFDB44;
	--secondary: #036E6D;
	--green: #036E6D;
	--blue: #225399;
	--light-blue: #2CA6D1;
	--black: #000000;
	--near-black: #292D33;
	--darker-gray: #494949;
	--gray: #4B505B;
	--light-gray: #D4D4D9;
	--lighter-gray: #E8E8EB;
	--lightest-gray: #F8F8FB;
	--off-white: #F7F7F7;
	--white: #FFFFFF;
	--gradient-01: linear-gradient(36deg, #4b6cb7 0%, #182848 100%);
	--gradient-02: linear-gradient(36deg, #e3ffe7 0%, #d9e7ff 100%);
	--global-transition: 0.2s ease-in-out;
	--heading-family: 'Inter', Helvetica, arial, sans-serif;
	--heading-weight: 600;
	--text-family: 'Figtree', Helvetica, arial, sans-serif;
	--text-weight: 400;
	--icon-family: 'CD-Project-Icons';
	--row-max-width: 1280px;
	--regular: 400;
	--medium: 500;
	--semibold: 600;
	--bold: 700;
	--notch-xsmall: 8px;
	--notch-small: 15px;
	--notch-medium: 25px;
	--notch-large: 50px;
	--notch-left-xsmall: polygon( 0% var(--notch-xsmall), var(--notch-xsmall) 0%, calc(100% - 0px) 0%, 100% var(--notch-xsmall), 100% calc(100% - 0px), calc(100% - var(--notch-xsmall)) 100%, var(--notch-xsmall) 100%, 0% calc(100% - 0px) );
	--notch-left-small: polygon( 0% var(--notch-small), var(--notch-small) 0%, calc(100% - 0px) 0%, 100% var(--notch-small), 100% calc(100% - 0px), calc(100% - var(--notch-small)) 100%, var(--notch-small) 100%, 0% calc(100% - 0px) );
	--notch-left-medium: polygon( 0% var(--notch-medium), var(--notch-medium) 0%, calc(100% - 0px) 0%, 100% var(--notch-medium), 100% calc(100% - 0px), calc(100% - var(--notch-medium)) 100%, var(--notch-medium) 100%, 0% calc(100% - 0px) );
	--notch-left-large: polygon( 0% var(--notch-large), var(--notch-large) 0%, calc(100% - 0px) 0%, 100% var(--notch-large), 100% calc(100% - 0px), calc(100% - var(--notch-large)) 100%, var(--notch-large) 100%, 0% calc(100% - 0px) );
	--notch-right-xsmall: polygon( 0% 0px, var(--notch-xsmall) 0%, calc(100% - var(--notch-xsmall)) 0%, 100% var(--notch-xsmall), 100% calc(100% - 0px), calc(100% - var(--notch-xsmall)) 100%, 0px 100%, 0% calc(100% - var(--notch-xsmall)) );
	--notch-right-small: polygon( 0% 0px, var(--notch-small) 0%, calc(100% - var(--notch-small)) 0%, 100% var(--notch-small), 100% calc(100% - 0px), calc(100% - var(--notch-small)) 100%, 0px 100%, 0% calc(100% - var(--notch-small)) );
	--notch-right-medium: polygon( 0% 0px, var(--notch-medium) 0%, calc(100% - var(--notch-medium)) 0%, 100% var(--notch-medium), 100% calc(100% - 0px), calc(100% - var(--notch-medium)) 100%, 0px 100%, 0% calc(100% - var(--notch-medium)) );
	--notch-right-large: polygon( 0% 0px, var(--notch-large) 0%, calc(100% - var(--notch-large)) 0%, 100% var(--notch-large), 100% calc(100% - 0px), calc(100% - var(--notch-large)) 100%, 0px 100%, 0% calc(100% - var(--notch-large)) );
	--option-1-color: var(--white);
	--option-2-color: var(--primary);
	--option-3-color: var(--secondary);
	--option-4-color: var(--lightest-gray);
	/* Set variables for custom font families here */
}

/*-----------Branding Colors-----------*/
.primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.yellow { color: var(--yellow); }
.bg-yellow { background-color: var(--yellow); }
.secondary { color: var(--secondary); }
.bg-secondary { background-color: var(--secondary); }
.green { color: var(--green); }
.bg-green { background-color: var(--green); }
.blue { color: var(--blue); }
.bg-blue { background-color: var(--blue); }
.light-blue { color: var(--light-blue); }
.bg-light-blue { background-color: var(--light-blue); }
.tertiary { color: var(--tertiary); }
.bg-tertiary { background-color: var(--tertiary); }
.red {color:#ee0000}
.bg-red {background-color: #ee0000}
.black {color: var(--black);}
.bg-black { background-color: var(--black);}
.near-black {color: var(--near-black);}
.bg-near-black {background-color: var(--near-black);}
.darker-gray {color: var(--darker-gray);}
.bg-darker-gray {background-color: var(--darker-gray);}
.gray {color: var(--gray);}
.bg-gray {background-color: var(--gray);}
.light-gray {color: var(--light-gray);}
.bg-light-gray {background-color: var(--light-gray);}
.lighter-gray {color: var(--lighter-gray);}
.bg-lighter-gray {background-color: var(--lighter-gray);}
.lightest-gray {color: var(--lightest-gray);}
.bg-lightest-gray {background-color: var(--lightest-gray);}
.off-white {color: var(--off-white);}
.bg-off-white {background-color: var(--off-white);}
.white {color:#ffffff}
.bg-white {background-color: #ffffff;}

/*-----------Gradients-----------*/
.bg-gradient-01 { background: var(--gradient-01); }
.bg-gradient-02 { background: var(--gradient-02); }