body {



  font-family: 'Roboto',  sans-serif;

  letter-spacing: 0px;

  display: flex;

  flex-direction: column;

  min-height: 100vh;



}



[data-bs-theme="light"] body {

    background-color: #e2e2e2;

}



/* Puste – domyślny kolor dark 



[data-bs-theme="dark"] body {

}



*/



.uh-1 {height: 42px ;}

.uh-2 {height: 78px ;}

.uh-3 {height: 54px ;}



.uh-21 {height: 40px ;}

.uh-22 {height: 84px ;}

.uh-23 {height: 54px ;}

.uh-24 {height: 20px ;}



.img-special {max-width: 100px !important; max-height: 40px !important;}





@media (max-width: 991.99px) {

.uh-1 {height: 42px ;}

.uh-2 {height: 48px ;}

.uh-3 {height: 54px ;}



.uh-21 {height: 42px ;}

.uh-22 {height: 66px ;}

.uh-23 {height: 54px ;}

.uh-24 {height: 0px ;}



.img-special {max-width: 100px !important; max-height: 30px !important;}

}



.cw {color: #fff;}

.cb {color: #000;}

.fb {font-weight: bold;}





.bg-blueviolet {background: blueviolet;}

.bg-orange  {background: orange;}

.bg-brown {background: brown;}

.bg-yellow {background: yellow;}

.bg-blue {background: blue;}

.bg-darkblue {background: darkblue;}



.cien {text-shadow: 1px 3px 6px rgba(0, 0, 0, 0.5);}



/* == xxl == */

.xxl {width: 90%;}

.menu-xxl {width: 90%; padding-left: 120px;}





@media (max-width: 1800px) {

   .xxl  {

    width: 95%;

    margin: 0px;

    padding: 0px;



  }

  .menu-xxl {width: 95%;}

}

@media (max-width: 1440px) {

   .xxl  {

    width: 98%;

    margin: 0px;

    padding: 0px;



  }

  .menu-xxl {width: 98%;}

}

@media (max-width: 768px) {

   .xxl  {

    width: 100%;

    margin: 0px;

    padding: 0px;



  }

  .menu-xxl {width: 100%;}

}



/* ========= */ 

#btnScrollTop {

  position: fixed;

  right: 20px;

  bottom: calc(20px + env(safe-area-inset-bottom));

  display: none;

  z-index: 9999;

  border: none;

  font-size: 24px;

  cursor: pointer;

  transition: opacity 0.3s ease;

}



#btnScrollTop.show {

  display: block;

  opacity: 1;

}





.w-40 {max-width: 40%; width: 40%; margin: 0px;}

.w-20 {max-width: 20%; width: 40%;}



.h60 {height: 60%;}

.h40 {height: 40%;}





[data-bs-theme="light"] .bg-licz {

    background-color: #ffffff !important; 

}



[data-bs-theme="dark"] .bg-licz {

    /* Puste – domyślny kolor dark */

    background-color: #000 !important; 

}





.bgbody {background-color: rgb(231,231,231);}





.herb {width: 50px; height: 50px;}

.herb25 {width: 25px; height: 25px;}









.bg-dark-opacity {

  background-color: rgba(7, 70, 133, 0.4) !important; /* 0.8 = 80% widoczności, 20% przezroczystości */

}



.top {

  background: linear-gradient(to bottom, #0196a1, #00122c);



}

.text-tight {

  letter-spacing: -0.5px; /* małe odstępy literami */

}



.col-6.text-end.pe-4 {

  position: relative;

}



.col-6.text-end.pe-4::after {

  content: ":";

  position: absolute;

  right: -5px;

  top: 60%;

  transform: translateY(-50%);

  font-size: 2rem;

  font-weight: bold;

}



.wynik {

  position: relative;

}



/* dwukropek po środku */

.wynik:first-of-type::after {

  content: ":";

  position: absolute;

  right: -2px;

  top: 12px;

  transform: translateY(-50%);



  line-height: 1;

}







/* licznik */

.countdown {

  min-width: 250px;

  display: flex;

  gap: 1rem;

 /* justify-content: end;*/

  align-items: end;

  margin-top: 40px;

  flex-wrap: wrap;

}

@media (max-width: 992px) {

  .countdown {

  justify-content: center !important;

  align-items: center !important;

}

}

.box {

  background: #fff;

  border-radius: 0.5rem;

  width: 60px;

  height: 70px;

  text-align: center;

  box-shadow: 0 3px 8px rgba(0,0,0,0.1);

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.box .value {

  font-size: 2rem;

  font-weight: bold;

  line-height: 1;

 

}

.box .label {

  font-size: 0.6rem;

  margin-top: 0.5rem;

  color: --bs-primary; 

  font-weight: bold;

  text-transform: uppercase;

  letter-spacing: 1px;

}



/* header */



.header-top {

      color: #fff;

      padding: 0.75rem 0;

      position: relative;

      /* height: ; */

    

  }



.header-bottom {

    background: #02205f;

    color: #fff;

    padding: 0.5rem 0;

    box-shadow: 0 4px 8px -6px rgba(0, 0, 0, 0.15);

    position: relative;

      

}



.header-logo {

    position: absolute;

    left: 5rem;

    top: 0.5rem;

    z-index: 2;

    /* Dla dużych ekranów logo wpasowane w oba poziomy */

    width: 120px;

    object-fit: contain;

}



@media (max-width: 1800px) {



    .header-logo {

        width: 100px;

        left: 1rem;

    }



    .header-top .menu-xxl,

    .header-bottom .menu-xxl {

        padding-left: 120px !important;

    }



  }



@media (max-width: 576px) {



    .header-logo {

        width: 60px;

        left: 0.5rem;

    }



    .header-top .menu-xxl,

    .header-bottom .menu-xxl {

        padding-left: 64px !important;

    }

}



.header-title {

    font-family: 'Montserrat', Arial, sans-serif;

    font-size: 2.3rem;

    font-weight: 800;

    letter-spacing: 1px;

    margin-left: 10px;

    margin-bottom: 0;

    text-shadow: 1px 3px 6px rgba(0, 0, 0, 0.10);

    

}



@media (max-width: 576px) {

  .header-title {

          font-family: 'Montserrat', Arial, sans-serif;

          font-size: 1.5rem;

          font-weight: 60;

          letter-spacing: 1px;

          margin-left: 10px;

          margin-bottom: 0;

          text-shadow: 1px 3px 6px rgba(0, 0, 0, 0.10);

      }



}



.nav-link {

    /*color: #fff !important;*/

    font-weight: 600;

    letter-spacing: 1px;

    transition: color 0.2s;

}



.nav-link:hover,

.nav-link.active {

    color: #999999 !important;

}



.demenu {padding: 8px; border-radius: 8px;}



.navbar-toggler:focus,

.navbar-toggler:active,

.navbar-toggler:focus-visible {

    outline: none !important;

    box-shadow: none !important;

  }



/* */



.mySwiper .swiper-wrapper {

  display: flex;

  align-items: stretch;

}



.mySwiper .swiper-slide {

  display: flex;

  flex-direction: column;

}



.mySwiper .card {

  flex: 1;

  display: flex;

  flex-direction: column;

}

/* Slajdy są równej wysokości */

.mySwiper .swiper-slide {

  display: flex;

  flex-direction: column;

}



.mySwiper .p-2 {

  flex: 1;

  display: flex;

  flex-direction: column;

}



/* Karta wypełnia wysokość kontenera */

.mySwiper .card {

  flex: 1;

  display: flex;

  flex-direction: column;

  height: 100%;

}



/* Card-body rozciągnięte, żeby treść była równo rozłożona */

.mySwiper .card-body {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.swiper-pagination-bullet {

  background: #999;

  opacity: 0.5;

  width: 40px;       /* większy rozmiar */

  height: 20px;      /* większy rozmiar */

  margin: 0 6px;     /* większe odstępy */

  border-radius: 20%; /* kółko */

  transition: all 0.3s;

  cursor: pointer;    /* lepszy UX */

}



/* Aktywny bullet */

.swiper-pagination-bullet-active {

  background: #189c14; /* kolor aktywnej */

  opacity: 1;

  width: 40px;         /* lekko większy, aby wyróżnić */

  height: 20px;



  border-radius: 20%; /* kółko */

  transition: all 0.3s;

  cursor: pointer;    /* lepszy UX */

}



/* Aktywny bullet */

.swiper-pagination-bullet-active {

  background: #189c14; 

  opacity: 1;

  width: 40px;      

  height: 22px;

}



/* koszulki team */



.jersey {

  background-repeat: no-repeat;

  background-position: center;

  background-size:contain;

  height: 250px;



  padding-top: 0px;

  padding-right: 0px;

    

  font-weight: bold;

  color: #ffffffe1;

  letter-spacing: 0px;

}

.jersey .nr {font-size: 85px;}



@media (max-width: 767.98px) {



    .jersey {

      background-repeat: no-repeat;

      background-position: center;

      background-size:contain;

      height: 150px;

      padding-top: 0px;

      padding-right: 0px;   

      font-weight: bold;

      letter-spacing: 0px;

    }

   .jersey .nr { font-size: 50px;}

}



.p3d {  

  transform-style: preserve-3d;

  transform: skewX(-0deg) rotateY(55deg) translateZ(0px);

}



.imie  {

  text-shadow: 1px 1px 1px #000000;

  color:#9dc3fc;

  font-weight:bolder

}



.nazwisko {

  text-shadow: 1px 1px 1px #000000;

  font-weight:bolder;

  color: #dadada;

}



.bgnumer {

  position: absolute;

  top: -50px;

  right: 8%;

  font-size: 40rem;

  line-height: 80%;

  opacity: 15%;

  letter-spacing: -70px;

  pointer-events: none; 

}



.player {

  background-repeat: no-repeat !important;

  background-position: 100px 50px;

}



.player-gk {

  background-repeat: no-repeat !important;

  background-position: 0px 20px;

}



@media (max-width: 767.98px) {



.player {

  background-repeat: no-repeat !important;

  background-position: 0px 20px;

}



.player-gk {

  background-repeat: no-repeat !important;

  background-position: 0px 20px;

}



.bgnumer {

  position: absolute;

  z-index: 0;

  top: -5px;

  right: 10%;

  font-size: 30rem;

  line-height: 80%;

  opacity: 25%;

  letter-spacing: -70px;

  pointer-events: none;



}

 .fn5 {

    font-size: 1rem !important; /* mniejszy rozmiar dla mobile */

  }

}



.fn5 {

  font-size: 1.25rem; /* rozmiar dla desktopa */

}



sub small, sup small {color: #067ead;}



.slide-out-left {

    transform: translateX(-100vw); /* Przesunięcie na zewnątrz widoku w lewo */

}



.slide-out-right {

    transform: translateX(100vw); /* Przesunięcie na zewnątrz widoku w prawo */

}



.bg-black-temp {

    background-color: #000000 !important; 

}



.player-page-wrapper {

    display: flex;

    justify-content: center; 

    align-items: center;

    width: 100%;

}



.player-nav-btn {

    position: fixed;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1000;

    

    display: none; 

    

    background: rgba(0, 0, 0, 0.4);

    color: white;

    border: none;

    border-radius: 50%;

    padding: 1rem;

    cursor: pointer;

    font-size: 1.5rem;

    opacity: 0.7;

    transition: opacity 0.2s;

}



.player-nav-btn:hover {

    opacity: 1;

}



#nav-prev {

    left: 20px;

}



#nav-next {

    right: 20px; 

}



@media (min-width: 768px) {

    .player-nav-btn {

        display: block;

    }

}



#trwa {

    font-size: 1.5em;

    font-weight: bold;

    color: red;

    display: flex; 

    align-items: center;



    margin-top: 1rem; 

    width: auto; 

}



.floating-bar-container {

  width: 20px;

  height: 20px;

  border: 1px solid rgb(2, 2, 2); 

  overflow: hidden; 

  position: relative; 

  border-radius: 3px;

  flex-shrink: 0;

  

}



/* Styl dla ruchomego paska */

.floating-bar {

    width: 20%; 

    height: 5px; 

    background-color: #0c8002;

    position: relative;

    top: 0px;

    left: 0; 

    animation: flowBar 2s linear infinite; 

}



@keyframes flowBar {

    0% {

        transform: translateX(0%); 

    }

    100% {

        transform: translateX(400%); 

    }

}



.video {width: 100% !important; height: auto; aspect-ratio: 16 / 9; }

.ribbon-container {

  position: relative; 

  overflow: hidden;

}



.ribbon {

    position: absolute;

    top: 80px;

    right: -80px;

    padding: 10px 80px;

    background-color: #01200b;

    color: white;

    font-size: 1.2em;

    font-weight: bold;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);



    transform: rotate(45deg); 

    z-index: 999;

}



.tooltip-success-custom {

    --bs-tooltip-bg: var(--bs-success);

    --bs-tooltip-padding-y: 0.6rem;

    --bs-tooltip-padding-x: 1rem;
}



.tooltip-danger-custom {

    --bs-tooltip-bg: var(--bs-danger);

    --bs-tooltip-padding-y: 0.6rem;

    --bs-tooltip-padding-x: 1rem;

}

.tooltip-secondary-custom {

    --bs-tooltip-bg: var(--bs-secondary);

    --bs-tooltip-padding-y: 0.6rem;

    --bs-tooltip-padding-x: 1rem;

}

.tooltip-light-custom {

    --bs-tooltip-bg: var(--bs-light);

    --bs-tooltip-text: var(--bs-dark);

    --bs-tooltip-padding-y: 0.6rem;

    --bs-tooltip-padding-x: 1rem;

}



/* artykuly */



.news-card-bg, .art-card-bg {

    position: relative;

    background-size: cover; 

    background-position: center; 

    background-repeat: no-repeat; 

    border-radius: .5rem;

    overflow: hidden;

}



.news-card-bg {

    aspect-ratio: 3 / 2 ;

}

.art-card-bg {

    aspect-ratio: 3 / 2;

}



@media (max-width: 768px) {

    .news-card-bg {

        aspect-ratio: 3 / 2;

    }

    .art-card-bg {

        aspect-ratio: 3 / 2;

    }

}



.news-card-overlay, .art-card-overlay {

    position: absolute;

    inset: 0;

    padding: 1.25rem;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background: linear-gradient(

        to top,

        rgba(0,0,0,.75) 0%,

        rgba(0,0,0,.35) 45%,

        rgba(0,0,0,0) 100%

    );

}



.news-content blockquote {
    margin: 1 rem 0;
    padding: 0.75rem 1.25rem;
    border-left: 4px solid #088d04;
    background-color: rgba(13, 253, 105, 0.05);
    font-style: italic;
    color: #495057;

}
.cms-content blockquote {
    display: block !important;
    border-left: 4px solid #088d04 !important; 
    background-color: rgba(13, 253, 105, 0.05) !important; 
    padding: 1rem 1.5rem !important;
    margin: 1.5rem 0 !important;
    color: inherit;
}

.cms-content blockquote p {
    margin: 0 !important;
    padding: 0 !important;
    font-style: italic;
    line-height: 1.6;
    display: inline; 
}

.hero-bg {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.pinned-badge {

    background: rgba(0, 0, 0, 0.45);

    border-radius: 50%;

    padding: 6px;

    line-height: 1;

}

/* Quill - rozmiary tekstu */

.ql-size-small {

    font-size: 0.85em;

}



.ql-size-large {

    font-size: 1.4em;

}



.ql-size-huge {

    font-size: 1.8em;

}



/*-----*/

.header-title, h1, h2,h3, h4, h5, h6 {

      /* font-family: 'Montserrat', Arial, sans-serif; */

      font-family: 'Oswald', sans-serif;

      font-weight: 700;

      font-stretch: condensed;

      letter-spacing: 0px;

      transform: scaleY(1.18);

      display: inline-block;

  

  }

 .ff {

      /* font-family: 'Montserrat', Arial, sans-serif; */

      font-family: 'Oswald', sans-serif;

      font-weight: 700;

      font-stretch: condensed;

      letter-spacing: 0.1px;

      transform: scaleY(1.10);



  

  }



.dropdown-item {

      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

      font-stretch: normal;

      line-height: 1 !important;

      letter-spacing: 0.5px;

      transform: scaleY(0.9);

      display: block;

}

.cms-content {

    font-family:

        system-ui,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        "Apple Color Emoji",

        "Segoe UI Emoji",

        "Segoe UI Symbol",

        sans-serif;

}



/* box -- info -- */

.marquee-container {

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    box-sizing: border-box;

}



.marquee-content {

    display: inline-block;

    

    /* Ustaw animację */

    animation: marquee-final 10s linear infinite;

}



.marquee-container:hover .marquee-content {

    animation-play-state: paused;

}



@keyframes marquee-final {

    from {

        transform: translateX(15%);

    }

    to {

        transform: translateX(-100%);

    }

}



.pl1:hover {

            transform: translateY(-4px);

            box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);

        }



.zoom-wrapper {

    overflow: hidden;

}



.zoom-img {

    width: 100%;

    transition: transform 0.4s ease;

    transform-origin: top center; /* KLUCZOWE */

}



.zoom-wrapper:hover .zoom-img {

    transform: scale(1.4);

}



.history-polaroid{

background:#fff;

padding:10px 10px 28px 10px;

box-shadow:0 10px 25px rgba(0,0,0,.25);

border-radius:2px;

transition:all .35s ease;

position:relative;

}



.polaroid-left{

transform:rotate(-3deg);

}



.polaroid-right{

transform:rotate(3deg);

}



.history-polaroid:hover{

transform:rotate(0deg) scale(1.05);

z-index:5;

}



#lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.9);

display:none;

align-items:center;

justify-content:center;

z-index:2000;

cursor:zoom-out;

}



#lightbox img{

max-width:92%;

max-height:92%;

border-radius:6px;

box-shadow:0 10px 30px rgba(0,0,0,.5);

}



/* kursory */



.timeline-img,

.history-polaroid img,

.art-img img{

cursor:zoom-in;

}



.history-polaroid img{

cursor:zoom-in;

}

.timeline img{

aspect-ratio:3/2;

object-fit:cover;

}