@media only screen {

    h1, h2, h3, h4, h5, h6 {
        color: var(--one);
    }

    a,
    a:link,
    a:visited {
        color: var(--two);
    }

    a:focus,
    a:hover,
    a:active {
        color: var(--two-darker);
    }

    .button,
    .button:link,
    .button:visited {
        border-color: var(--two);
        color: var(--two);
    }

    .button:hover,
    .button:active {
        border-color: var(--one);
        background-color: var(--two-darker);
        color: #ffffff;
    }

    .button.primary,
    .button.primary:link,
    .button.primary:visited {
        border-color: var(--one);
        background-color: var(--two);
    }

    .button.primary:hover,
    .button.primary:active {
        background-color: var(--two-darker);
    }

    .button:focus {
        -webkit-box-shadow: 0 0 5px var(--one-lighter) !important;
        -moz-box-shadow: 0 0 5px var(--one-lighter) !important;
        box-shadow: 0 0 5px var(--one-lighter) !important;
    }

    .sitemap-title,
    .content-title,
    .content-section.profile-form form > fieldset > legend,
    .content-section.rcc-form form > fieldset > legend,
    table.speed-dial-table th {
        background-color: var(--one);
    }

    .content-section.equipment-distribution-form form > fieldset > legend {
        background-color: var(--two);
    }

    #modal.video a#modal-close,
    #modal.video a#modal-close:link,
    #modal.video a#modal-close:visited {
        background-color: var(--two);
    }

    #modal.video a#modal-close:focus
    #modal.video a#modal-close:hover,
    #modal.video a#modal-close:active {
        background-color: var(--two-darker);
    }

    /* Social Media Icons */
    #social-media-sharing {
        background-color: var(--one);
    }

    /* news and events */
    ul#news-and-events li:nth-child(even) {
        background-color: var(--one-shade);
    }

    /* outreach coordinator */
    .outreach-coordinator {
        background-color: var(--one-shade);
        border-color: var(--one);
    }

    .state-contact .contact-name,
    .outreach-coordinator div.name {
        color: var(--one);
    }

    .state-contact .contact-title,
    .outreach-coordinator div.title {
        color: var(--one);
    }

    .outreach-coordinator div.photo .img-box {
        border-color: var(--one);
    }

    /* how it works */

    ol.how-it-works li:before {
        background-color: var(--one);
        color: #ffffff;
    }

    .content-section.shaded,
    dl .service-option.alt,
    #how-it-works-content #placing-vco-device,
    #how-it-works-content #receiving-2line {
        border-color: var(--one-lighter);
        background-color: var(--one-shade);
    }

    #how-it-works-content table#captel-line-comparison th {
        background-color: var(--one);
        color: #ffffff;
    }

    #how-it-works-content table#captel-line-comparison th a {
        color: #ffffff !important;
    }

    #how-it-works-content table#captel-line-comparison tr.alt {
        background-color: var(--one-shade);
    }

    table.speed-dial-table tr:nth-child(odd)
    {
        background-color: var(--one-shade);
    }

    /* news archive */

   .content-section.news-archive {
       border-color: var(--one);
   }


}

@media only screen and (min-width: 1000px) {

    #how-it-works-content .img-box.icon {
        background-color: var(--one-shade);
    }

}




/* ==========================================================================
   Header
   ========================================================================== */

@media only screen {

    #header-main {
        background-color: var(--one);
    }

    #header-stripe {
        background-color: var(--two);
    }

    .header-function a:hover,
    .header-function a:active {
        color: var(--two);
        border-color: var(--two);
    }

    html.text-size-default #resize.header-function .smaller a:hover,
    html.text-size-default #resize.header-function .smaller a:active,
    html.text-size-largest #resize.header-function .larger a:hover,
    html.text-size-largest #resize.header-function .larger a:active {
        background-color: var(--one);
    }

    #chat.header-function a,
    #chat.header-function a:link,
    #chat.header-function a:visited {
        background-color: var(--two);
    }

    #chat.header-function a:focus,
    #chat.header-function a:hover,
    #chat.header-function a:active {
        border-color: var(--two-darker);
        background-color: var(--two-darker);
    }

    #header-nav #header-nav-links {
        border-color: var(--two);
    }

    #header-nav #header-nav-menu a:link #nav-box .nav-box-bar,
    #header-nav #header-nav-menu a:visited #nav-box .nav-box-bar {
        background-color: var(--one);
    }

    #header-nav #header-nav-menu a:hover #nav-box .nav-box-bar,
    #header-nav #header-nav-menu a:active #nav-box .nav-box-bar {
        background-color: var(--one);
    }

    #page-box,
    #page-box #page-nav,
    #page-box #page-nav #state-nav-links {
        background-color: var(--one);
    }

    #page-box #page-nav #state-nav-links a,
    #page-box #page-nav #state-nav-links a:link,
    #page-box #page-nav #state-nav-links a:visited {
        border-color: var(--one-lighter);
    }

    #page-box #page-nav #state-nav-links a:focus,
    #page-box #page-nav #state-nav-links a:hover,
    #page-box #page-nav #state-nav-links a:active {
        background-color: var(--two);
    }

}





/* ==========================================================================
   Footer
   ========================================================================== */

@media only screen {

    #footer-nav-box {
        border-color: var(--two);
    }

}






/* ==========================================================================
   CUSTOM Forms
   ========================================================================== */

@media only screen {

    .ajax-form-content.response {
        border: 1px solid var(--one);
        background-color: var(--one-shade);
    }

    p.required-fields.error,
    .ajax-form-info .error,
    .ajax-form-info ul.error a {
        color: #cf1935;
    }

    input[type="text"].error,
    input[type="password"].error,
    input[type="date"].error,
    input[type="datetime"].error,
    input[type="datetime-local"].error,
    input[type="month"].error,
    input[type="week"].error,
    input[type="email"].error,
    input[type="number"].error,
    input[type="search"].error,
    input[type="tel"].error,
    input[type="time"].error,
    input[type="url"].error,
    input[type="file"].error,
    select.error,
    textarea.error {
        border-color: var(--two);
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="date"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="month"]:focus,
    input[type="week"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="time"]:focus,
    input[type="url"]:focus,
    input[type="file"]:focus,
    select:focus,
    textarea:focus {
        border-color: var(--one-lighter);
        background: var(--one-shade);
        -webkit-box-shadow: 0 0 5px var(--one-lighter);
        -moz-box-shadow: 0 0 5px var(--one-lighter);
        box-shadow: 0 0 5px var(--one-lighter);
    }

    .form-row-checkbox a.checkbox-link.box-is-focused,
    .form-row-checkbox a.checkbox-link:hover,
    .form-row-checkbox a.checkbox-link:active {
        border-color: var(--two);
        background-color: #ffffff;
        color: var(--two);
        -webkit-box-shadow: 0 0 5px var(--two-shade);
        -moz-box-shadow: 0 0 5px (--two-shade);
        box-shadow: 0 0 5px (--two-shade);
    }

    .form-row-checkbox a.checkbox-link.box-is-checked {
        border-color: var(--two-darker);
        background-color: var(--two);
        color: #ffffff;
    }

    .form-row-checkbox a.checkbox-link.box-is-checked span,
    .form-row-checkbox a.checkbox-link.box-is-checked.box-is-focused span,
    .form-row-checkbox a.checkbox-link.box-is-checked:hover span,
    .form-row-checkbox a.checkbox-link.box-is-checked:active span {
        color: #ffffff;
    }

    .form-row-checkbox a.checkbox-link.box-is-focused span,
    .form-row-checkbox a.checkbox-link:hover span,
    .form-row-checkbox a.checkbox-link:active span {
        color: var(--two);
    }

}









/* ==========================================================================
   Chat
   ========================================================================== */

@media only screen {

    #chat-modal {
        border-color: var(--two);
    }

}