﻿
:root {
    --primary-color: #C81F45;
    --secondary-color: #f09336;
	--top-banner-bg-color: #AD00FE;
	--accent-color: #E4f6ff;
	--topic-menu-bg-color-hover: #F0F0F0;
	/* LINK COLORS */
	--primary-links-color: #027A88;
    --primary-links-color-hover: #03565E;
	--secondary-links-color-hover: #002e47;
	--footer-link-color: #869197;
    --footer-link-color-hover: #BDC5CA;
	/* BUTTON COLORS - PRIMARY */
	--primary-button-color: #C81F45;
	--primary-button-color-hover: #002e47;
	--primary-button-text-color: #FEFEFE;
	--primary-button-text-color-hover: #FEFEFE;
	--primary-button-border-color: #C81F45;
	--primary-button-border-color-hover: #C81F45;
	/* 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: #C81F45;
	--nav-tab-color: #FEFEFE;
	--nav-tab-color-hover: #FDE2E2;
	--nav-link-color: #3E4347;
    --nav-link-color-hover: #C81F45;
	/* HEADING/BANNER BACKGROUND COLORS */
	--bg-color-1: #F7F7F7;
    --bg-color-2: #1D1D1D;
    --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:"Arial", sans-serif;
    --font-family-body:"Arial", sans-serif;
    --box-shadow-1:none;
    --box-shadow-2:none;
    --box-shadow-3:none;
    --box-shadow-4:none;
    --box-shadow-5:none;
	--border-radius-sm: 0;
    --border-radius-md: 0;
    --border-radius-lg: 0;
}

body {
    color: #3E4347;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #1D1D1D;
    font-weight: bold;
}

h1 + hr {
    display: none;
}

a, .drilldown .is-drilldown-submenu-parent > a::after, .drilldown .js-drilldown-back > a::before, a, .breadcrumbs a {
    color: var(--primary-links-color);
}

a:visited {
    color: inherit;
}

#header-user-nav a:hover,
#header-user-nav a:active {
    color: var(--nav-link-color-hover)
}

#top-banner {
    background-color: #3E4347;
    color: white;
    font-size: var(--small-font-size);
    padding: .5rem;
}

#site-search .button:focus, #site-search .button:hover {
    background-color: inherit;
    color: inherit;
}

.mega-menu > li {
    font-weight: bold;
}

.dropdown.menu > li.is-active > a,
.mega-menu > li > a:hover {
    color: #FDE2E2;
}

.menu .nav-view-all a {
    color: var(--primary-links-color);
}

.menu .nav-view-all a:hover {
    color: var(--primary-links-color-hover);
}

.mega-menu .drilldown .is-drilldown-submenu-parent > a::after, .mega-menu .drilldown .js-drilldown-back > a::before, .mega-menu a {
    color: var(--nav-link-color);
}

footer {
    background: #1D1D1D;
}

footer .open-text {
    color: #91BC3F;
}

#footer-copyright {
    background: #1D1D1D;
}

#footer-store-info::before,
#footer-store-info::after {
    box-shadow: none;
}

.social-links .button {
    background: #C81F45;
    border: 1px solid transparent;
}

.social-links .button:hover {
    background: #9B1835;
    color: #fff;
}

.hero {
    border-radius: 0;
}

.button {
    border-radius: 0;
}

.button:focus, .button:hover {
    background-color: #970526;
    color: #fff;
}

.button[disabled], .button[disabled]:focus, .button[disabled]:hover {
    background-color: #a1a1a1;
    color: #202020;
}

.notification.yellow {
    background: #FFF4D6;
    color: #3E4347;
    padding: 1rem;
}

.notification.yellow .fa-circle-exclamation:before {
    color: #F8962F;
}

.block-featureditems h3 {
    background: var(--bg-color-1);
}

.home-block span span {
    color: #fff;
    text-shadow: none;
    font-family: var(--font-family-heading);
}

.compare-block {
    border-radius: 0;
    overflow: clip;
    position: relative;
    padding: 1.4em;
    border: 1px solid #eee;
    /*box-shadow: 0 13px 13px -12px rgb(0 0 0 / .5);*/
}

.topic-menu-item a {
    display: block;
    width: 100%;
}

.topic-menu-item:hover, .topic-menu-item:focus {
    background-color: #F7F7F7;
}

.button.hollow {
    border: 1px solid #BDC5CA;
    color: #027A88;
}

.button.hollow:hover {
    color: #03565E;
    border-color: #BDC5CA;
}

.caption-buttons .button.hollow {
    color: #C81F45;
    border-color: #fff;
    background-color: #fff;
    font-weight: bold;
}

.caption-buttons .button {
    font-weight: bold;
}

.caption-buttons {
    text-shadow: none;
}

.caption h3 {
    color: #fff;
    font-size: 1.75em;
}

.topic-menu-item {
    padding: 0;
}

.topic-menu-item a {
    padding: 1rem;
}

.topic-menu-item a:visited {
    color: var(--primary-links-color)
}

.home-block a > span.caption-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		top: auto;
		translate: none;
		bottom: 0;
	}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 64em) {

    .mega-menu .submenu {
        border: 0;
        background-color: #F7F7F7;
    }
    .recommended-products, .product-feature, .home-announcements {
        box-shadow: none;
    }
    .caption h3 {
        font-size: 2.25em
    }
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     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) {
}
