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

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

.landing .page-heading,
.sec-top-stories > h2,
.sec-social-stream > h2,
.sec-banner > h2,
.sec-countdown > h2,
.sec-scoreboard > h2,
.sec-videos > h2,
.sec-standings > h2 { color: var(--bs-white) }

.sec-top-stories a[rel="wiki-link"], .sec-banner a[rel="wiki-link"], .sec-scoreboard a[rel="wiki-link"], .sec-videos a[rel="wiki-link"], .sec-standings a[rel="wiki-link"] {color: white !important;}
.sec-more-news {display: none;}

    .sec-aotw, .sec-parallax, .sec-more, .sec-photo-gallery { display:none }
    
    main#site-main { background:url(/images/setup/Texture_Background.png) no-repeat 50% 0; background-size:100% auto; background-color:var(--bs-primary)  }
    main#site-main:before { display:none  }


    .top-nav { background:var(--bs-primary) }
    .top-nav .title { color:#fff; font-weight:700; letter-spacing:0.2rem }

    .sec-aotw .component-aotw.layout-bio .slick-slider .btn.slick-pp, .component-banner.layout-slider .slick-arrow-controls .slick-arrow.pp, .sec-banner .component-banner .pause {color: var(--bs-white); background-color:var(--bs-primary);   border: 1px solid var(--bs-white);}
    .sec-banner .component-banner .pause:hover {color: var(--bs-primary); background-color:var(--bs-white);   }
    
    .sec-standings .component-headings .component-title,
    .sec-scoreboard .layout-wrapper ul.nav a.nav-link.active { background-color:#fff; color:var(--bs-primary)}


    .videos .page-details,
    .sec-standings .page-details,
    .sec-scoreboard .layout-wrapper ul.nav { background:var(--bs-secondary); background-image:url(/assets/Texture_Components.png); background-position:right; background-repeat:no-repeat }


    .footer-logos { background:#fff!important }
    .footer-logos li.item:after { background:var(--bs-tertiary) }
    .footer-logos .component-banner.layout-flex .item img { max-height: min(10vw, 5rem); filter:unset }  
    
    .site-footer { background:#fff!important; color:var(--bs-secondary); border-top:1px solid var(--bs-tertiary) }
    #site-footer .footer-details .text .title { color:var(--bs-secondary) }
    .site-footer .component-banner.layout-flex .item img { max-height:100px }


    .social-stream .component-social .social-widgets .item .social-widgets-wrap { background:none!important }
    .social-stream .component-social .social-widgets .item .social-widgets-wrap .social-embed-icon span { background:var(--bs-secondary)}
    .social-stream .social-embed-content { background:#fff }

    .sec-scoreboard .component-scoreboard.layout-standard .card .card-header span.status { top:7.5rem }


    .sec-standings .component-standings.has-col-groups thead th { background:var(--bs-secondary)!important }


    .sec-scoreboard .macro-archive-link a.btn.btn-link { border-color:#fff; color:#fff; background-color: var(--bs-primary); }
    .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:#fff; border-color:#fff }
    .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:#fff; border-color:#fff }

    .sec-scoreboard .layout-wrapper ul.nav { margin-bottom:0.5rem!important; border:none  }



    .section.sec-countdown .container .ps-component.component-countdown > div { background-image: url(/assets/Texture_Next_Event.png) }
    .section.sec-countdown .component-countdown .contents { background:#fff }
    
    .section.sec-countdown .component-countdown ul.countdown .countdown-label,
    .section.sec-countdown .component-countdown ul.countdown .countdown-digit span { color:var(--bs-primary)}
    
    .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-secondary) }
    

    .sec-standings .form-floating,
    .section.sec-videos .form-floating { display:none }


    .sec-top-stories .component-headlines .carousel-control-pp { background:var(--bs-secondary) }


    .sec-standings .macro-archive-link a.btn.btn-link,
    .sec-videos .archive-link a.btn.btn-link { color:#fff; border-color:#fff; background-color:var(--bs-primary) }
    .sec-standings .macro-archive-link a.btn.btn-link:hover,
    .sec-videos .archive-link a.btn.btn-link:hover { background:#fff; color:var(--bs-primary)}

    .sec-top-stories .macro-archive-link.archive-link.align-center a { color:#fff; border-color:#fff; background-color:var(--bs-primary) }


    .section.sec-countdown .component-countdown .details .details-2 .title { font-size:2rem!important; font-weight:700!important }

    .component-scoreboard.layout-standard .card { border-color:var(--bs-secondary)}
    
    .sec-banner .component-banner button:is(.carousel-control-prev, .carousel-control-next) {   color: var(--bs-white); background:var(--bs-primary); border-color:#fff;}
    .sec-banner .component-banner button:is(.carousel-control-prev, .carousel-control-next):hover {    background: #fff;   color: var(--bs-primary);}
    .sec-scoreboard .component-scoreboard .slick-arrow-controls button.next, .sec-scoreboard .component-scoreboard .slick-arrow-controls button.prev {    background: var(--bs-primary);    color: #fff;   border-color: #fff;}
    .sec-scoreboard .component-scoreboard .slick-arrow-controls button.next:hover, .sec-scoreboard .component-scoreboard .slick-arrow-controls button.prev:hover {    background: var(--bs-primary);    color: #fff;   border-color: #fff;}

@media(min-width: 992px) {

    .top-nav .title { padding:2rem 0.5rem }


    .site-header .menu { padding-right:1rem }
    .macro-primary-navigation a.site-logo { min-width:9.5rem }

    .site-header .primary-nav-wrapper { background:#fff!important }
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link > .d-flex > a.nav-link,
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link { font-size:1rem!important; color:var(--bs-primary)!important; font-weight:700; }
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link { padding:2rem 0.7rem!important }

    .site-header .social-links:before { background-image:url(/assets/Texture_Header.png); background-color:#1a1a1a; background-size:200px auto; background-repeat:no-repeat }

    .component-navbar-primary.layout-standard .navbar .dropdown-toggle::after,
    .component-search button.btn.btn-link { color:var(--bs-primary)!important }
    .component-search button.btn.btn-link { padding-right:0 }


    .sec-top-stories .right-col .carousel-indicators .card-body .card-title a { color:#fff }
    .component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item { border-color:#fff!important }
    .sec-top-stories .right-col .carousel-indicators .card-body .card-text,
    .sec-top-stories .right-col .carousel-indicators .card-body .d-flex.flex-column .date { color:#fff }

    .component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active { background:#fff}
    .component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active { border-color:var(--bs-tertiary)!important }
    .component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active .card-body a { color:var(--bs-primary) }
    .sec-top-stories .right-col .carousel-indicators .item.active .card-body .d-flex.flex-column .date, 
    .sec-top-stories .right-col .carousel-indicators .item.active .card-body .card-text,
    .sec-top-stories .right-col .carousel-indicators .item.active .card-body .d-flex.flex-column .category { color:var(--bs-secondary)!important}
    

    section.section.sec-sponsors { margin-bottom:3rem }
    
    .section.sec-countdown .component-countdown .details .details-2 .title { max-width:120px  }
    .sec-standings .table-responsive {   max-height: inherit;}
    
}


@media(min-width: 1200px) and (max-width:1399.99px) {


    .site-header .primary-nav-wrapper > .container { max-width:100% }
    .site-header .social-links .component-nav .nav a.nav-link { padding-left:.125rem; padding-right:.125rem }
    
    .component-search button.btn.btn-link, .site-header .social-links .component-nav .nav a.nav-link,
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link > .d-flex > a.nav-link,
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link { font-size:0.875rem!important }
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link { padding:2rem 0.5rem!important }

}

@media(min-width: 1400px) {

    .site-header .social-links .component-nav .nav a.nav-link { padding-left:.25rem; padding-right:.25rem }
    
    .component-search button.btn.btn-link, .site-header .social-links .component-nav .nav a.nav-link,
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link > .d-flex > a.nav-link,
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link { font-size:1rem!important }
    .site-header .menu .ps-component > .layout-wrapper > .navbar > .container-fluid > .collapse > .navbar-dark > .nav-item > .nav-link { padding:2rem 0.5rem!important }
  

}
@media(min-width: 1600px) {
      .site-header .social-links:before{        background-size: auto; background-position: left;}
}

    .sec-scoreboard .component-scoreboard .slick-arrow:hover,
    .sec-scoreboard .macro-archive-link a.btn.btn-link:hover,
    .sec-top-stories .macro-archive-link.archive-link.align-center a:hover { background:#fff!important; color:var(--bs-primary)!important; filter:unset}


    .sec-standings .component-headings .component-title { border-color:var(--bs-primary)!important; border-width:3px }
    .sec-standings .table-responsive { background:rgba(0,0,0,0.5)}

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

    .top-nav .title { letter-spacing:0.1rem }
    .top-nav > .container > div > div { display:block!important; flex:unset!important }
    
    .navbar-dark .navbar-toggler .icon-bar { background-color:var(--bs-primary) }
    .component-search button.btn.btn-link,
    .header-buttons a.d-block.d-lg-none.btn.btn-link { color:var(--bs-primary) }
    .site-header .primary-nav-wrapper { background:#fff!important }

    .sec-top-stories .left-col .carousel-caption { background:var(--bs-primary); color:#fff  }
    .component-headlines.layout-stacked-carousel .carousel-caption > .d-flex p.carousel-caption-text,
    .component-headlines.layout-stacked-carousel .category, .component-headlines.layout-stacked-carousel .date,
    .component-headlines.layout-stacked-carousel .carousel-caption > .d-flex .carousel-caption-title .item-link { color:#fff!important }


    .social-stream .component-social .social-widgets .item { margin-top:1.5rem }
    .site-header .component-navbar-primary .navbar-collapse:after { background: url(/images/setup/Secondary_Logo_-_.3x.png) no-repeat 50% 50%; background-size: contain }

    main#site-main  { background:var(--bs-primary)}

}


@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 }
    
    .sec-standings .component-headings .component-title {    height: 100%;    display: flex;   align-items: center;}


}