/*
    Cook Green (Pantone 341C): 007A53
    Cook Blue (Pantone 302C): 003B5C
    Cook Yellow: #f7c332
    Cook Orange: #de7000
    Cook Dark Orange: #7e5900
*/
:root {
    --primary-color: #007A53; /* Cook Green */
    --primary-color-over: #005e41; /* Cook Green (darker) */
    --secondary-color: #003B5C; /* Cook Blue */
    --secondary-color-over: #00284c; /* Cook Blue (darker) */
    --tertiary-color: #f7c332; /* Cook Yellow */
    --tertiary-color-over: #7e5900; /* Cook Dark Orange */
}

/* Header Tags */
h1, h2, h3 {
    color: var(--secondary-color);
}

/* Text color classes */
.text-primary {
    color: var(--primary-color);
}
.text-secondary {
    color: var(--secondary-color); 
}

/* Background color classes */
.background-primary {
    background-color: var(--primary-color);
    color: #fff;
}
.background-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}
.background-tertiary {
    background-color: #efefef; /* lightgrey */
    color: #1e1e1e;
}
.background-quaternary {
    background-color: #f5f5f5; /* whitesmoke */
    color: #000;
}

/* Buttons */
.btn-primary {
    color: #fff; /* Text color */
    background-color: var(--primary-color);
}
.btn-primary:hover,
.btn-primary:focus {
    color: #fff; /* Text color on hover */
    background-color: var(--primary-color-over); /* Background color on hover */
}
.btn-secondary,
.btn-secondary[href^="tel:"] {
    color: #fff;
    background-color: var(--primary-color);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary[href^="tel:"]:hover {
    background-color: var(--primary-color-over);
}
.btn-cancel {
    color: #fff;
    background-color: var(--tertiary-color);
}
.btn-cancel:hover, 
.btn-cancel:focus {
    background-color: var(--tertiary-color-over);
}
/* Header */
header {
    width: 100%;
    background-color: #faf7ee;
    margin: 0px;
    text-align: left;
    border-bottom: 4px #f7c332 solid;
}
/* Top Bar */
.topnav-bar,
#topnav-bar a.topbar-btn,
#topnav-bar a.topbar-btn:visited {
    background-color: var(--primary-color);
    color: #fff; 
}
/* Top Bar Links */
#topnav-bar a.topbar-btn:hover,
#topnav-bar a.topbar-btn:focus,
#topnav-bar a.topbar-btn.active,
.mobilenav-icon:hover {
    background-color: var(--primary-color-over); /* Background color on hover */
}
/* Active marker under main nav links */
ul.sf-menu li:hover, ul.sf-menu li.active {
    border-color: var(--tertiary-color-over); /* Color of bottom border */
}
/* Mobile Nav Menu */
.sidenav .mobilelink a.dropdown-btn:hover, a.dropdown-btn:focus,
.sidenav .mobilelink button.dropdown-btn:hover, button.dropdown-btn:focus {
    background-color: var(--primary-color); /* Background color on hover/active */
}
/* Subnav bar */
.subnav-bar a:hover, .subnav-bar a:focus, .subnav-bar a.active {
    border-color: var(--tertiary-color);
}
/* Icon bar */
#iconbar {
    background-color: var(--secondary-color); /* Background color of icon bar */
}
/* Icon bar links */
a.feature_link, a.feature_link:visited {
    color: #fff; /* Color of text under icon */
}
a.feature_link:hover, a.feature_link:focus, a.feature_link:active {
    background-color: var(--secondary-color-over);
}

/* Hero */
.hero__text-heading {
    color: #1e1e1e; /* Main text color */
}
.hero__text-heading .highlight {
    color: var(--secondary-color);
}

/* Grid Cards */
.background-primary .grid-card h2 {
    color: #fff;
}
.background-secondary .grid-card h2 {
    color: #fff;
}
.background-secondary .grid-card button {
    background-color: var(--primary-color);
}
.background-secondary .grid-card button:hover {
    background-color: var(--primary-color-over);
}
.background-tertiary .grid-card h2 {
    color: #1e1e1e;
}
.background-tertiary .grid-card h3 {
    color: #1e1e1e;
}
.background-quaternary .grid-card h2 {
}

.bordered-box {
    border-color: var(--secondary-color);
}

/* Contact Content Subheaders, NVA Difference Subheader */
#contact-content h2,
#nva-difference-content h2 {
    color: var(--secondary-color);
}

/* Find a Provider */
/*--results */
.provider-results__header {
    border-color: var(--primary-color);
}
.providers-list {
    border-color: var(--primary-color);
}
/* Links within results */
.provider-results__view-link,
.provider-results__frames-link,
.provider-details__email-link,
.provider-details__frames-link,
.providers-list__row a {
    color: var(--secondary-color);
}

/* Bell icon */
.notification-bell-svg .a {
    fill: var(--tertiary-color);
}

/* Scroll to top */
.scrolltotop {
    background-color: var(--secondary-color-over);
}
.scrolltotop:hover {
    background-color: var(--primary-color);
}
div.logo-nav {
    width: 384px;
}
#CookLogo {
    display: inline-block;
    width: 100%;
    height: auto;
}

/* Welcome Page */
.homehero .hero-img {
    height: 500px;
    background-position: center;
    background-image: url(../images2019/home/cook_welcome_header.jpg);
}
#welcome.grid-elements-2col-nm {
    background-image: url(../images2019/home/nva-difference.jpg);
}
/* CHIP */
.chip-vision-benefits .hero-img {
    background-image: url(../images2019/cook/images/chip/Little-girl-getting-eye-measured.jpg);
    background-position: center;
}
.chip-find-provider .hero-img {
    background-image: url(../images2019/cook/images/chip/Little-girl-reading-a-book-with-glasses-and-holding-a-teddy-bear.jpg);
    background-position: center center;
}
/* STAR */
.star-vision-benefits .hero-img {
    background-image: url(../images2019/cook/images/star/conflict-free-banner.jpg);
    background-position: top center;
}
.star-find-provider .hero-img {
    background-image: url(../images2019/cook/images/star/child-hugging-mom-with-eyeglasses.jpg);
    background-position: center;
}

/* MOBILE PLUS AND TABLETS */
@media only screen and (max-width: 970px) {
    #welcomecopy {
        padding: 25px 10px !important;
    }
    #makethemost.grid-elements-2col-nm {
        display: none;
    }
}
@media only screen and (max-width: 767px) {

}
