:root {
	--primary-color: #003A70;
    --secondary-color: #FFB81C;
	--top-banner-bg-color: #AD00FE;
	--accent-color: #E4f6ff;
	--topic-menu-bg-color-hover: #F0F0F0;
	/* LINK COLORS */
	--primary-links-color-hover: #FFB81C;
	--secondary-links-color-hover: #FFB81C;
	--footer-link-color: #c4c4c4;
    --footer-link-color-hover: #FFB81C;
	/* BUTTON COLORS - PRIMARY */
	--primary-button-color: #003A70;
	--primary-button-color-hover: #002e47;
	--primary-button-text-color: #FEFEFE;
	--primary-button-text-color-hover: #FEFEFE;
	--primary-button-border-color: #003A70;
	--primary-button-border-color-hover: #003A70;
	/* BUTTON COLORS - SECONDARY */
	--secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
	--secondary-button-text-color: #005E91;
	--secondary-button-text-color-hover: #FEFEFE;
	--secondary-button-border-color: #005E91;
	--secondary-button-border-color-hover: #005E91;
	/* NAVIGATION COLORS */
	--nav-bg-color: #003A70;
	--nav-tab-color: #FEFEFE;
	--nav-tab-color-hover: #FFB81C;
	--nav-link-color: #003A70;
    --nav-link-color-hover: #FFB81C;
	/* HEADING/BANNER BACKGROUND COLORS */
	--bg-color-1: #0693B2;
	--bg-color-2: #D48000;
	--bg-color-3: #91C500;
	/* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
	--rgba-color-1: rgb(6 147 178 / .5);
	--rgba-color-2: rgb(212 128 0 / .5);
	--rgba-color-3: rgb(145 197 0 / .5);
	/* FONT FAMILY */
	--font-family-heading: "Oswald", sans-serif;
	--font-family-body: "Noto Sans", sans-serif;
}

.home-announcements h3 {
    background: #FFB81C;
}

.block-featureditems h3 {
    background: #003A70;
    color: #fff;
}

.block-popularitems h3 {
    background: #7f9abb;
    color: #003A70;
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
    .caption-container.caption-right {
        background-image: linear-gradient(to left, rgb(0 0 0 / .5), rgb(0 0 0 / .5),transparent);
    }
	.caption-container.caption-left {
		background-image: linear-gradient(to right, rgb(0 0 0 / .5), rgb(0 0 0 / .5),transparent);
	}
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 64em) {
    .caption-container.caption-left > .caption {
        max-width: 67ch;
        padding: 2rem 4rem 2rem 1rem;
    }
    .caption-container.caption-right > .caption {
        max-width: 67ch;
        padding: 2rem 1rem 2rem 4rem;
    }
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR X-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 75em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR XX-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 90em) {
}