:root {
    --primary-color: #122851;
    --secondary-color: #F09336;
    --top-banner-bg-color: #990000; /*NEW*/
    --accent-color: #E4f6ff; /*NEW*/
    --topic-menu-bg-color-hover: #F0F0F0; /*NEW*/
    /* LINK COLORS */
    --primary-links-color-hover: #990000;
    --secondary-links-color-hover: #00857c;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #669DE5;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #122851; /*NEW*/
    --primary-button-color-hover: #002E47;
    --primary-button-text-color: #FEFEFE; /*NEW*/
    --primary-button-text-color-hover: #FEFEFE; /*NEW*/
    --primary-button-border-color: #122851; /*NEW*/
    --primary-button-border-color-hover: #002E47; /*NEW*/
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #122851; /*NEW*/
    --secondary-button-text-color-hover: #FEFEFE; /*NEW*/
    --secondary-button-border-color: #122851; /*NEW*/
    --secondary-button-border-color-hover: #122851; /*NEW*/
    /* NAVIGATION COLORS */
    --nav-bg-color: #122851; /*NEW*/
    --nav-tab-color: #FEFEFE; /*NEW*/
    --nav-tab-color-hover: #669DE5; /*NEW*/
    --nav-link-color: #122851;
    --nav-link-color-hover: #990000;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #990000;
    --bg-color-2: #122851;
    --bg-color-3: #00857c;
    /* 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;
}


/* the rule below is removing the darkening effect over the image. if you want to start using the caption overlay again, you'll want to bring this back by commenting back in the background rule that's currently commented out, and then commenting out the rule that's setting background to none. */
.home-block a:after {
    /*background: rgb(0 0 0 / .1);*/
    background: none;
}

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

.accordion-title {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.accordion-content {
    background-color: #f1f1f1;
    position: relative;
    padding-bottom: 50px;
}

.accordion-content .spider-logo {
    position: absolute;
    right: 1rem;     /* Sticks to right edge */
    bottom: 1rem;    /* Sticks to bottom edge */
}

.accordion-title:focus, 
.accordion-title:hover {
    background-color: #e6e6e6;
}


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