:root {
    --body-font-family: 'Arial Narrow', sans-serif;
    --bs-font-sans-serif: 'Arial Narrow', sans-serif;
    --bs-body-font-family: 'Arial Narrow', sans-serif;
    --heading-font-family: 'Arial Narrow', sans-serif; 
} 

    main#site-main:before { display:none }


    .site-footer .ps-component.component-nav .fa-spotify,
    .mmf-social-inner .component-nav a.nav-link .fa-spotify,
    .site-header .social-links .component-nav .fa-spotify { font-family:"Font Awesome 6 Brands"}

.site-footer .inc-hostedby svg { fill:#000 }

.site-footer .inc-hostedby .sr-only,
.component-banner.layout-carousel .carousel-control-prev .visually-hidden,
.component-banner.layout-carousel .carousel-control-next .visually-hidden { color:var(--bs-primary)!important }

#site-footer ul.nav a.nav-link { color:#fff }
.developer-logo .component-nav a.nav-link { color:var(--bs-primary)!important }
.privacy-links .nav li:after { background:#fff}
.developer-logo .component-nav a.nav-link:before { background:var(--bs-primary)}
#site-footer ul.nav a.nav-link:hover { color:var(--bs-tertiary) }

.section.sec-countdown .component-countdown ul.countdown { margin:0 1rem } 
.section.sec-countdown .component-countdown ul.countdown .countdown-label,
.component-countdown.layout-standard .countdown-digit span { background:var(--bs-primary); color:#fff }

.component-banner.layout-carousel .carousel .carousel-control-pp { color:var(--bs-secondary)}
.component-banner.layout-carousel .carousel .carousel-control-pp:focus,
.component-banner.layout-carousel .carousel .carousel-control-pp:hover { color:#fff }

.sec-banner .component-banner button.carousel-control-prev .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a21f4b' stroke='%23a21f4b'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); }
.sec-banner .component-banner button.carousel-control-next .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a21f4b' stroke='%23a21f4b'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") }

    .top-nav .title { font-size:1.5rem; padding:2rem 0; font-weight:700; color:var(--bs-primary)}
    .site-header .social-links:before { background-image:url(/assets/Texture_Header.png); background-color:var(--bs-tetiary)}
    .site-header .social-links .component-nav .nav a.nav-link { color:var(--bs-secondary) }

    .sec-top-stories .component-headlines .carousel-control-pp { background:var(--bs-secondary) }
    .sec-top-stories .macro-archive-link.archive-link.align-center a { color:var(--bs-secondary) }


    .sec-scoreboard .layout-wrapper ul.nav a.nav-link:hover,
    .sec-scoreboard .layout-wrapper ul.nav a.nav-link.active { background:var(--bs-primary); color:var(--bs-white)!important }
    .sec-scoreboard .layout-wrapper ul.nav a.nav-link:not(.active) { color:var(--bs-primary)}
    .sec-scoreboard .layout-wrapper ul.nav,
    .section.sec-countdown .container .ps-component.component-countdown > div { background-image:url(/assets/Texture_Next_Event.png); background-color:var(--bs-tertiary)}
    .section.sec-countdown .component-countdown .details .details-2 .sport.fs-5 { color:var(--bs-secondary) }
    .section.sec-countdown .component-countdown .details .details-2 .specs-2,
    .section.sec-countdown .component-countdown .details .details-2 .teams .team span.team-name, 
    .section.sec-countdown .component-countdown .details .details-2 .teams span.vs-at-indicator,
    .section.sec-countdown .component-countdown .details .details-2 .fs-2.fw-bold { font-weight:700!important }


    .sec-scoreboard .component-scoreboard.layout-standard .card .card-body .fs-5 .sport-name a { color:var(--bs-primary)}
    .sec-scoreboard .component-scoreboard.layout-standard .card .card-header span.status,
    .sec-scoreboard .component-scoreboard.layout-standard .card .card-header span.date { color:var(--bs-secondary)}
    .sec-scoreboard .component-scoreboard.layout-standard .event-team-name span.vs-at-indicator { background:#000}
    .component-scoreboard.layout-standard .slick-list,
    .sec-scoreboard .component-scoreboard.layout-standard .card .card-header,
    .component-scoreboard.layout-standard .card { border-color:var(--bs-primary); border-width:2px}
    .sec-scoreboard .layout-wrapper ul.nav { margin-bottom:1rem!important }

    .sec-scoreboard .layout-wrapper  button.prev  { left: calc(0rem - 20rem)!important; position: absolute; font-size: 1.25rem; bottom: 0; top: auto; transform: translateY(3rem); height: 2rem; line-height: 2rem; width: 3rem; border: 1px solid var(--bs-primary); border-radius: 0; right: 0; margin: auto; color:var(--bs-secondary) }
    .sec-scoreboard .layout-wrapper  button.next  { right: calc(0rem - 20rem)!important; position: absolute; font-size: 1.25rem; bottom: 0; top: auto; transform: translateY(3rem); height: 2rem; line-height: 2rem; width: 3rem; border: 1px solid var(--bs-primary); border-radius: 0; left: 0!important; margin: auto; color:var(--bs-secondary) }


    .section.sec-sponsors .component-banner.layout-slider .slick-arrow-controls .slick-arrow:hover,
    .section.sec-sponsors .component-banner.layout-slider .slick-arrow-controls .slick-arrow:focus,
    .sec-scoreboard .layout-wrapper  button:focus,
    .sec-scoreboard .layout-wrapper  button:hover { background:var(--bs-primary); color:var(--bs-white)}

    .section.sec-sponsors .component-banner.layout-slider .slick-arrow-controls .slick-arrow { color:var(--bs-secondary)}


    .section.sec-countdown .component-countdown ul.countdown li.flex-fill .countdown-digit:after,
    .section.sec-countdown .component-countdown ul.countdown li.flex-fill .countdown-digit:before { background:var(--bs-tertiary) }

    .footer-logos { display:none }
    .site-footer { background:var(--bs-primary)!important; color:#fff!important  }
    #site-footer .footer-details .text,
    #site-footer .footer-details .text .title { color:#fff }
    #site-footer .developer-logo { background:#fff!important; color:var(--bs-primary)!important; font-weight:700 }

    .sec-scoreboard .macro-archive-link a.btn.btn-link { font-weight:700; color:var(--bs-secondary)}
    .macro-secondary-navigation a.navbar-brand:hover { text-decoration:underline }
    
    .sec-banner button.carousel-control-prev, .sec-banner button.carousel-control-next, .component-banner.layout-carousel .carousel .carousel-control-pp{transform: translateY(3rem); }
    
.section.sec-countdown .container .ps-component.component-countdown > div {   color: var(--bs-black);}

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

    .component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item  { font-weight:700 }
    .component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active .date:after {  background:#fff}
    .sec-top-stories .right-col .carousel-indicators .card-body .card-title a { color:var(--bs-secondary) }
    .site-header .social-links .component-nav .nav a.nav-link:hover { color:var(--bs-primary) }
    
    .component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active { border-left-color:var(--bs-tertiary)!important }
    .component-navbar-primary.layout-standard .navbar .megamenu .megamenu-inner ul[data-column="true"] > li.nav-item.dropdown.level-3 a.nav-link:hover { opacity:0.7; color:var(--bs-tertiary) }

    .section.sec-countdown .component-countdown .details { width:25% }
}

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

    .primary-nav-wrapper > .container { max-width:100%}
    .site-header .menu { padding-right:1rem }

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

    .mobile-menu-footer .component-search button.btn.btn-link { color:var(--bs-primary)}
    .site-header .component-navbar-primary .navbar-collapse:after { margin:0 auto }

    
}


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


    .sec-scoreboard .layout-wrapper button.prev { left: calc(0rem - 3.5rem)!important }
    .sec-scoreboard .layout-wrapper  button.next { right: calc(0rem - 3.5rem)!important }


    .section.sec-countdown .component-countdown .details { width:100% }
    
}