:root {
    --primary-color: #00205B;
    --secondary-color: #F09336;
    --top-banner-bg-color: #AD00FE; /*NEW*/
    --accent-color: #E4f6ff; /*NEW*/
    --topic-menu-bg-color-hover: #F0F0F0; /*NEW*/
    /* LINK COLORS */
    --primary-links-color-hover: #F09336;
    --secondary-links-color-hover: #F09336;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #F09336;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #00205B; /*NEW*/
    --primary-button-color-hover: #005EB8;
    --primary-button-text-color: #FEFEFE; /*NEW*/
    --primary-button-text-color-hover: #FEFEFE; /*NEW*/
    --primary-button-border-color: #00205B; /*NEW*/
    --primary-button-border-color-hover: #002E47; /*NEW*/
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #00205B; /*NEW*/
    --secondary-button-text-color-hover: #FEFEFE; /*NEW*/
    --secondary-button-border-color: #00205B; /*NEW*/
    --secondary-button-border-color-hover: #00205B; /*NEW*/
    /* NAVIGATION COLORS */
    --nav-bg-color: #00205B; /*NEW*/
    --nav-tab-color: #FEFEFE; /*NEW*/
    --nav-tab-color-hover: #c6deee; /*NEW*/
    --nav-link-color: #00205B;
    --nav-link-color-hover: #005EB8;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #003b70;
    --bg-color-2: #0074c8;
    --bg-color-3: #75bee9;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(0 59 112 / .5);
    --rgba-color-2: rgb(0 116 200 / .5);
    --rgba-color-3: rgb(117 190 233 / .5);
    /* FONT FAMILY */
    --font-family-heading: "Oswald", sans-serif;
    --font-family-body: "Noto Sans", sans-serif;
}

.home-announcements h3 span,
.product-feature h3 span,
.recommended-products h2 span {
    color: #fff;
}

span#popular-heading {
    color: inherit;
}

.page-banner {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 1em;
    margin-top: -2em;
    width: 100vw;
}

.page-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.agreement-readability {
    max-width: 85ch;
    margin: 0 auto;
}

.accordion-title {
    color: var(--primary-color);
}

.accordion-title:focus, .accordion-title:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.accordion-title:hover::before,
.accordion-title:focus::before {
  color: #fff;
}

.callout.donation-box {
    background-color: #ddeefe;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-1);
    border: 0;
}

body.custom-shop-page div#content {
    max-width: none;
    width: 100%;
}

.shop-main-home .catalog-name {
    text-align: center;
}

/* quick fix for hiding "none" option on packages */
li.none-option {
    display: none;
}

/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
}


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

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

}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     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) {
}