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

body {font-family: 'Roboto', sans-serif;}
h1, .h1, h2, .h2, .ff-heading {font-family: 'Roboto Condensed' !important;}
h1, .h1 {text-shadow: 20px -5px 0 rgba(33,37,41,.1);}

h2 {font-size: 1.5rem; font-weight: bold; color: var(--bs-primary);}
h3 {font-size: 1.25rem; text-transform: uppercase; font-weight: bold}
h4 {font-size: 1.25rem; font-weight: bold;}
h5 {font-size: 1rem; text-transform: uppercase;}
h6 {font-size: 1rem; font-weight: bold;}

.container-comfort {max-width: 1500px;}
.container-big {max-width: 2500px;}

.btn {font-weight: normal;}
.nav-tabs {margin-bottom: 1rem;}

.social-links a {font-size: 1.25rem; height: 1.25rem; line-height: 0;}
.social-links span span {display: none;}
.social-links img {height: 1.25rem;}


/* Header */

.header-wrapper.sticky .alert-topbar {display: none;}

.nav-top .btn {font-size: .9rem; text-transform: none;}

.header-mainbar {background-color: rgba(46, 71, 86, .9);}
.header-navbar {background-color: rgba(3, 14, 34, .9);}

.site-header a {text-decoration: underline;}
.header-src input {width: 14rem !important;}

.site-logo img {max-height: 3rem; transition: all .3s;}

.dropdown-item {text-decoration: underline;}
.nav-primary a.current::before {bottom: -1px;}
.nav-primary .dropdown-hover .btn.dropdown-toggle {top: .45rem;}
.nav-primary .dropdown-hover .dropdown-menu .btn.dropdown-toggle {top: 0;}
.nav-secondary > ul > li > a {color: #FFF;}
.nav-secondary .dropdown-toggle > span::after {line-height: 0;}

@media (min-width: 768px) {
    .site-logo img {max-height: 4.5rem;}
    .dropdown-item {font-size: 1.25rem;}
}

@media (min-width: 992px) {
    .header-wrapper.sticky {margin-top: 0;}
    .header-wrapper .header-mainbar > .container-xl {transition: all .3s;}
    .header-wrapper.sticky .header-mainbar > .container-xl {padding-top: .5rem !important; padding-bottom: .5rem !important;}
    .header-wrapper .nav-primary > ul > li:hover > a {color: var(--bs-body-color) !important; background-color: var(--bs-light); opacity: 1 !important;}
    .header-wrapper .nav-primary > ul > li:hover > a:active {color: #FFF !important;}
    .header-wrapper.sticky .site-logo img {max-height: 2.5rem;}
    .nav-top .btn {padding-left: .5rem !important; padding-right: .5rem !important;}
}

@media (min-width: 1200px) {
    .header-wrapper .nav-primary > ul > li > a {font-size: 1.25rem;}
}


/* Home */

.site-hero {height: 70vh;}
.site-hero video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.hero-card-wrapper {position: absolute; bottom: 1rem; left: 0; width: 100%;}
.hero-card-wrapper .slide-card {width: 100%;}
.hero-card-wrapper .swiper-btn {position: static;}
.hero-card-wrapper .card-centered {text-align: center;}
.hero-card-wrapper .card-centered .card-imgtxt-row {display: block;}
.hero-card-wrapper .card-centered .card-image {margin: 0 auto 1rem;}
.hero-card-wrapper .card-centered .card-image img {height: 10rem;}

.container-news-carousel {padding-top: 3rem; padding-bottom: 3rem;}
.news-carousel .ratio {aspect-ratio: 2 / 1;}
.news-carousel-wrapper .swiper-btn {position: relative; top: .75rem; left: auto !important; right: auto !important;}
.news-carousel-wrapper .swiper-btn::after {opacity: .7; font-size: 1.5rem;}

.wiz-event-list * {border: 0 !important; background: none !important; color: #FFF !important;}
.wiz-event-list table {display: block}
.wiz-event-list td {padding: 0 !important}
.wiz-event-list tr {border-bottom: .5em solid transparent !important}
.uce_event_title {text-decoration: underline !important}
.uce_event_title:hover {text-decoration: none !important}

.home-spotlight-shadow {
    width: 70%; height: 1.5rem; border-radius: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 0; opacity: .25;
    -webkit-box-shadow: 0 5px 5px 0 #000; -moz-box-shadow: 0 5px 5px 0 #000; box-shadow: 0 5px 5px 0 #000;
}

@media (min-width: 576px) {
    .site-hero {height: 80vh; max-height: 45rem;}
    .today-title {background: url('/assets/bg-today-title.svg') top center no-repeat; background-size: auto; background-size: auto 70%;}
}

@media (max-width: 767.98px) {
    .section-news-carousel {padding: 0;}
}

@media (min-width: 768px) {
    .hero-card-wrapper .slide-card {width: 70%;}
    .container-news-carousel {padding-top: 0; padding-bottom: 0;}
}

@media (min-width: 992px) {
    .hero-card-wrapper .slide-card {width: 50%;}
    .container-news-carousel {border: 0 !important;}
    .news-carousel-wrapper .swiper-btn {position: absolute; top: 50%; transform: translateY(-50%);}
    .news-carousel-wrapper .swiper-button-prev {left: -3rem !important;}
    .news-carousel-wrapper .swiper-button-next {right: -3rem !important;}
}


/* Interior pages */

.page-heading-image {height: 40vh; background-position: center; background-size: cover;}
.page-heading-title {border-bottom: 1rem solid #FFF; background: rgba(255, 255, 255, .9);}

.accordion-button.collapsed {background-color: var(--bs-light);}
.accordion-button:not(.collapsed) {box-shadow: none;}

.novi-tabs .accordion-button {text-indent: -9999px; height: 4rem; overflow: hidden; background-position: 10% center; background-repeat: no-repeat; background-size: auto 3.5rem;}
.novi-tabs .accordion-header:first-child button {background-image: url('/assets/letter-n.jpg');}
.novi-tabs .accordion-header:first-child + div + .accordion-header button {background-image: url('/assets/letter-o.jpg');}
.novi-tabs .accordion-header:first-child + div + .accordion-header + div + .accordion-header button {background-image: url('/assets/letter-v.jpg');}
.novi-tabs .accordion-header:first-child + div + .accordion-header + div + .accordion-header + div + .accordion-header button {background-image: url('/assets/letter-i.jpg');}

.sitemap > ul > li {margin-bottom: 1rem;}
.sitemap > ul > li > a {display: block; padding: .75rem 1.5rem; border-bottom: 1px solid #DEE2E6; text-transform: uppercase; font-weight: bold;}
.sitemap > ul ul {padding: .5rem 1.5rem;}
.sitemap > ul > li > ul > li > a {text-transform: uppercase; padding: .5rem 0;}
.sitemap > ul ul a {font-weight: normal;}

.row-logos {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;}

@media (min-width: 768px) {

    .accordion-to-tabs {display: flex; flex-wrap: wrap;}
    .accordion-to-tabs .accordion-header {order: -1; position: relative; top: 1px;}
    .accordion-to-tabs .accordion-button {display: block; border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}
    .accordion-to-tabs .accordion-button.collapsed {background-color: #FFF;}
    .accordion-to-tabs .accordion-button:not(.collapsed) {
        background-color: #FFF;
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); border-bottom: 0;
        border-top-left-radius: .375rem; border-top-right-radius: .375rem;
        pointer-events: none;
    }

    .novi-tabs .accordion-button::after {content: none;}
    .novi-tabs .accordion-button {width: 4rem; background-position: center;}
    
    .row-logos {grid-template-columns: repeat(5, 1fr);}
}

/* Learning Section */

.alphabet a:hover {color: #FFF !important; background: var(--bs-dark);}

.learn-block {width: 100%; padding-top: 100%;}
.learn-block-inner {position: absolute; inset: 0;}
.learn-block-inner:hover {opacity: .8;}
.learn-icon {display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: .5rem; font-size: 1.5rem; border-radius: 100%; background: #FFF;}
.learn-label {font-size: .85rem;}

@media (min-width: 375px) {
    .learn-icon {margin-bottom: 1rem;}
    /* .learn-label {font-size: 1rem;} */
}

@media (min-width: 576px) {
    /* .learn-icon {width: 5rem; height: 5rem; font-size: 2.5rem;} */
    .learn-label {font-size: 1.1rem;}
}

@media (min-width: 576px) {
    /* .learn-label {font-size: 22px;} */
}

@media (min-width: 1200px) {
    .alphabet a {flex: 1;}
}

@media (min-width: 1400px) {
    .learn-block {padding-top: 80%;}
}


/* Commission Application Form */

#form-4c4e6003-ede6-4950-a62f-ab0f7ea3e154 fieldset {padding-top: 1.25rem; border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}
#form-4c4e6003-ede6-4950-a62f-ab0f7ea3e154 fieldset:first-child {padding-top: 0; border-top: 0;}
/* #form-4c4e6003-ede6-4950-a62f-ab0f7ea3e154 .richtext + .shortanswer + .multiplechoice {display: none;} */


/* Novi Parks Soccer Club */

ul.npsc-nav {background: #B88B00; padding: 5px 4px; margin: 0; list-style: none;}
ul.npsc-nav li {flex-grow: 1; border-left: 1px solid #B88B00; border-right: 1px solid #B88B00; text-align: center;}
ul.npsc-nav a {color: #FFD761; background: #0039A6; text-transform: uppercase; padding: 5px 0; font-weight: bold; text-decoration: none; display: block;}
ul.npsc-nav a:hover, ul.npsc-nav .active a {color: #FFF;}

.npsc-table {border: 2px solid #B88B00; width: 100%;}
.npsc-table th {color: #FFF !important; background: #0039A6 !important; border: 1px solid #B88B00 !important; font-weight: bold;}
.npsc-table td {border: 1px solid #B88B00;}
.npsc-table th, .npsc-table td {padding: 5px 10px;}
.npsc-table.table-striped > tbody > tr:nth-child(odd) > td {background: #DDD !important;}
.npsc-table.table-striped > tbody > tr:nth-child(odd) > th {background: #0039A6 !important;}


/* Sidebar */

.nav-sidebar .btn-drop-lv2 {top: 0;}
.nav-sidebar .btn-drop-lv3 {top: -.125rem;}
.widget-nl:hover {opacity: 1 !important; background-color: var(--bs-primary) !important;}


/* Footer */

.quicklinks-bar {background-color: rgba(194, 221, 235, .95);}
.col-footer:not(:first-child), .col-footer:not(:first-child)::before {border-color: rgba(0, 0, 0, .125);}
.nav-footer ul {list-style: none; padding: 0; margin: 0;}
.nav-footer ul li {line-height: 1.25; margin: .5rem 0;}
.site-footer .social-links a {color: var(--bs-body-color)}
#upIcon {display: none; text-decoration: none; position: fixed; z-index: 1100; bottom: 40px; right: 10px;}
#upIcon > span {width: 3rem; height: 3rem; font-size: 2rem;}

@media (min-width: 992px) {
    #upIcon {bottom: 130px;}
}


/* Plugins */

.swiper-button-disabled {visibility: hidden;}
.rounded-icon.swiper-btn::after {font-size: 1rem; font-weight: bold;}
#reciteme-button {left: -1rem !important; transform: scale(.5); z-index: 1 !important;}

@media (min-width: 992px) {
    #reciteme-button {top: 50%; bottom: auto !important; transform: scale(.5) translateY(-50%);}
}


/* Extra */
/* put here any additional css rules */al