:root {
	--primary-color: #006A52;
    --secondary-color: #B4610E;
    --top-banner-bg-color: #2f2f2f;
    --accent-color: #E4f6ff;
    --topic-menu-bg-color-hover: #F0F0F0;
    /* LINK COLORS */
    --primary-links-color-hover: #B4610E;
    --secondary-links-color-hover: #B4610E;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #FFD100;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #006A52;
    --primary-button-color-hover: #00523f;
    --primary-button-text-color: #FEFEFE;
    --primary-button-text-color-hover: #FEFEFE;
    --primary-button-border-color: #006A52;
    --primary-button-border-color-hover: #00523f;
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #006A52;
    --secondary-button-text-color-hover: #FEFEFE;
    --secondary-button-border-color: #006A52;
    --secondary-button-border-color-hover: #006A52;
    /* NAVIGATION COLORS */
    --nav-bg-color: #006A52;
    --nav-tab-color: #FEFEFE;
    --nav-tab-color-hover: #FFD100;
    --nav-link-color: #006A52;
    --nav-link-color-hover: #B4610E;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #006A52;
    --bg-color-2: #FFC600;
    --bg-color-3: #DBE2E9;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(0 106 82 / .75);
    --rgba-color-2: rgb(255 209 0 / .75);
    --rgba-color-3: rgb(145 197 0 / .5);
    /* FONT FAMILY */
    --font-family-heading: "Oswald", sans-serif;
    --font-family-body: "Montserrat", sans-serif;
}

h1, .h1 {
    font-family: "Volkhov", serif;
    font-weight: 400;
}

h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 {
    text-transform: uppercase;
}

#announcements-heading,
#also-bought-heading {
    color: #fff;
}

/* This is removing a darkening effect on the image that is used for the captions, which the store is not using as they have text embedded in the images. If the store wants to use the captions in the future, they should delete or comment out the following rule. */
.home-block a:after {
    background: none;
}

.callout {
    border-radius: var(--border-radius-md);
}

.callout.primary {
    background-color: #d7fae3;
    color: #0a0a0a;
}

/* this is hiding the link to site_shipping_info.asp, that appears under the Shipping Method selector on checkout_shipping.asp */
.ship-method-section .help {
    display: none;
}

/*
.mega-menu > li > a {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
}*/


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