﻿
:root {
    --primary-color: #e61c3e;
    --secondary-color: #000;
    --top-banner-bg-color: #000; /*NEW*/
    --accent-color: #E4f6ff; /*NEW*/
    --topic-menu-bg-color-hover: #F0F0F0; /*NEW*/
    /* LINK COLORS */
    --primary-links-color-hover: #850404;
    --secondary-links-color-hover: #850404;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #ffaeae;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #e61c3e; /*NEW*/
    --primary-button-color-hover: #000;
    --primary-button-text-color: #FEFEFE; /*NEW*/
    --primary-button-text-color-hover: #FEFEFE; /*NEW*/
    --primary-button-border-color: #e61c3e; /*NEW*/
    --primary-button-border-color-hover: #000; /*NEW*/
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #ffcfcf;
    --secondary-button-color-hover: #000;
    --secondary-button-text-color: #B81430; /*NEW*/
    --secondary-button-text-color-hover: #FEFEFE; /*NEW*/
    --secondary-button-border-color: #e61c3e; /*NEW*/
    --secondary-button-border-color-hover: #e61c3e; /*NEW*/
    /* NAVIGATION COLORS */
    --nav-bg-color: #e61c3e; /*NEW*/
    --nav-tab-color: #FEFEFE; /*NEW*/
    --nav-tab-color-hover: #000; /*NEW*/
    --nav-link-color: #e61c3e;
    --nav-link-color-hover: #000;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #6a737b;
    --bg-color-2: #fff;
    --bg-color-3: #e61c3e;
    /* 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;
}

#top-banner a {
    color: #fff;
}

#top-banner a:hover {
    color: #f6b3b3;
}

a.contact-phone {
    margin-right: 2em;
}

.book-option.option-stdnts-have-txt {
    border-bottom: 2px solid #ba00a4;
    background: #efbfe9;
}

.option-stdnts-have-txt .book-option-label {
    background: #ba00a4;
}

.buy-course-options .option-stdnts-have-txt {
    background: #ba00a4;
    color: #FFF;
}

.book-option.option-select-one {
    border-bottom: 2px solid #04867f;
    background: #ccf6f3;
}

.option-select-one .book-option-label {
    background: #04867f;
}

.buy-course-options .option-select-one {
    background: #04867f;
    color: #FFF;
}

.home-announcements h3 span,
.product-feature h3 span {
    color: #fff;
}

table.refunds thead {
  background-color: #ffd561;
}

.about-image-row img {
  height: 273px;       /* lock the height */
  width: 100%;         /* make sure it fills the column */
  object-fit: cover;   /* crop instead of squish */
  display: block;      /* removes gaps under images */
}

.cart-item-heading.secondary {
    background: #cfcfcf;
}

.home-block img {
    aspect-ratio: inherit;
}

.callout {
    border-radius: var(--border-radius-sm);
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     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) {
}
