@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --body-font-family: 'Roboto', sans-serif;
    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-body-font-family: 'Roboto', sans-serif;
    --heading-font-family: 'Roboto', sans-serif;

}


.section h2.visually-hidden,
.site-footer .inc-hostedby .sr-only,
.component-scoreboard.layout-standard .slick-arrow .sr-only,
a[href="#component-navbar-offcanvas"],
a[href="#site-main"],
a[href="#site-footer"] { color:var(--bs-white)!important }
.section.sec-sponsors h2.visually-hidden { color:var(--bs-dark)!important }



.section.sec-top-stories .component-hero.layout-grid .col-lg-6 .col-md-6 .item .image a:after {
    background-color: rgba(var(--bs-tertiary-rgb), .875)
}

    .section.sec-top-stories .component-hero.layout-grid .item { background:#000!important }

    
    /* THIS IS THE INCORRRECT METHOD TO CORRECT LINK COLORS WITHIN THE PAGE */
    /*
    .internal-page .site-main a { --bs-link-color:var(--bs-secondary)!important; --bs-link-hover-color:var(--bs-secondary); --bs-nav-link-color:var(--bs-secondary); --bs-nav-link-hover-color:var(--bs-tertiary)}
    */
    
    /* HERE IS THE CORRECT METHOD */
    
    html.primary-color-light,
    html.secondary-color-light {
    	--bs-link-color: var(--bs-tertiary);
    	--bs-link-hover-color: var(--bs-black);
    }
    
    /* END OF COLOR FIX ANCHOR COLORS */
    
    
    
    .table .thead-dark th,
    .internal-page .site-main .card-header.bg-primary { background:var(--bs-secondary)!important }

    .site-header .branding span:before, .site-header .branding span:after,
    .site-footer .branding span:before, .site-footer .branding span:after { background-color:var(--bs-tertiary)}
    .site-footer .footer-details .title { font-size:1.25rem!important }
    .site-footer .footer-details img { max-height:8rem }
    .site-footer .affiliate-logos .component-banner.layout-flex .item:last-of-type img { max-height:7rem }
    
    .site-footer .copyright { background:var(--bs-tertiary)!important }

    .site-header .branding { display:none }
    .site-header .component-nav.layout-standard .nav-link { color:var(--bs-secondary)}
    .site-header .component-search.layout-modal button { color:var(--bs-secondary); font-size:1.25rem }

    .section.sec-countdown > .container { border-color:var(--bs-tertiary)!important; background:var(--bs-primary) }
    .section.sec-countdown .component-countdown.layout-standard .details-2 *,
    .section.sec-countdown .component-countdown.layout-standard .details-2 > div:first-child { color:var(--bs-secondary)}
    .section.sec-countdown .component-countdown.layout-standard .countdown-digit { color:var(--bs-tertiary)!important }
    .section.sec-countdown .component-countdown.layout-standard .countdown-label { color:var(--bs-secondary)}
    .section.sec-countdown .component-countdown.layout-standard .countdown-keys ul li + li { border-color:var(--bs-secondary) }

    .site-header .navbar-offcanvas-template .btn-link[data-bs-toggle="offcanvas"] .fa-bars:before,
    .site-header .navbar-offcanvas-template .btn-link[data-bs-toggle="offcanvas"] > span:last-of-type { color:var(--bs-secondary)}

    .component-scoreboard.layout-standard .card .card-body,
    .section.sec-scoreboard .page-details > div  { background:var(--bs-black)}
    .component-scoreboard.layout-standard .card .card-header,
    .component-scoreboard.layout-standard .slick-active + .slick-active .card-body:after { background:var(--bs-tertiary)}

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

    .pre-header { padding:1.5rem }
    .pre-header .site-title { display:none!important }
    .site-header:not(.is-pinned) .site-logo { top:-1.85rem }
    .site-header:not(.is-pinned) .site-logo img { max-height:10rem }
    .site-header { border-top:2px solid var(--bs-tertiary); border-bottom:2px solid var(--bs-tertiary)}

    .section.sec-top-stories .component-hero.layout-grid .col-lg-6 .col-md-6 .item .details { text-shadow:none }
    .section.sec-top-stories .component-hero.layout-grid .col-lg-6 .col-md-6 .item .details .date,
    .section.sec-top-stories .component-hero.layout-grid .col-lg-6 .col-md-6 .item .title { color:var(--bs-white)!important }


    .section.sec-top-stories .component-hero.layout-grid .col-lg-6:first-child .item .details .date,
    .section.sec-top-stories .component-hero.layout-grid .col-lg-6:first-child .item .details .related-links a,
    .section.sec-top-stories .component-hero.layout-grid .col-lg-6:first-child .item .details .title,
    .section.sec-top-stories .component-hero.layout-grid .col-lg-6:first-child .item .details .breadcrumb-item+.breadcrumb-item { color:var(--bs-white)!important }

    .section.sec-scoreboard .archive-link a { font-size:1.5rem }

    .navbar-offcanvas-template.main-navigation h2.sr-only { color:var(--bs-secondary)!important }
    
    .site-header .navbar-offcanvas-template .btn-link[data-bs-toggle="offcanvas"] > span:last-of-type:after,
    .site-header .component-nav.layout-standard .nav-link:after { background-color:var(--bs-tertiary)}


    .section.sec-top-stories .component-hero.layout-grid .col-md-6 .item .details .date,
    .section.sec-top-stories .component-hero.layout-grid .col-md-6 .item .details .related-links a,
    .section.sec-top-stories .component-hero.layout-grid .col-md-6 .item .details .title,
    .section.sec-top-stories .component-hero.layout-grid .col-md-6 .item .details .breadcrumb-item+.breadcrumb-item { color:var(--bs-white)!important }
    
}


@media only screen and (max-width: 991px) {

    .navbar-offcanvas-template .navbar-dark, .navbar-offcanvas-template .navbar-dark .btn-close { filter:unset!important; opacity:1 }
    .site-header .navbar-offcanvas-template .navbar-dark .offcanvas-header h5 { color:#222!important }

    .sec-scoreboard > .container.bg-primary-light { background:none }

    .section.sec-top-stories .component-hero.layout-grid .item a,
    .section.sec-top-stories .component-hero.layout-grid .item .details .date-sport,
    .section.sec-top-stories .component-hero.layout-grid  .item .details .title { color:var(--bs-secondary)!important }

}