<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-17546029739"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-17546029739');
</script>
        <meta name="google-site-verification" content="PWjsI6_XQi_iz5XDkWZSekUDSx5unnZmlyW30kLWBgs" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
        <title>Stowarzyszenie KoLiber</title>
        <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
        <link rel="stylesheet" href="style.css?v=1758217976">
        <link rel="icon" type="image/webp" href="./resources/logo.webp">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
        <link rel="stylesheet" type="text/css" href="cssmap-poland/cssmap-poland.css" media="screen"/></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cssmapsplugin.com/5/jquery.cssmap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="scripts.js?v=1755637895"></script>
        <script type="text/javascript" src="scroll.js"></script>
        <link rel="canonical" href="https://koliber.org" />
        <link rel="stylesheet" href="gallery.css">
        <style>
          html,body
          {
              width: 100%;
              height: 100%;
              margin: 0px;
              padding: 0px;
              overflow-x: hidden;
          }
          html {
            scroll-behavior: smooth;
            overflow-x: hidden;
            width: 100vw;
          }
          @media (max-width: 768px) {
            body{
              overflow-x: hidden;
            }
          }
          canvas
          {
            pointer-events: none;
            position: absolute;
            will-change: transform; /* Optimize rendering */
          }
            #nawigator{
              position: relative;
              z-index: 3;
            }
            @media (max-width: 767px) {
              .header-image img {
                content: url('./resources/menu5_mobile.webp');
                /* Zaktualizuj również koordynaty mapy odsyłaczy na urządzenia mobilne */
              }
              .mobile{
                display:none;
              }
            }   
            #kolibertv{
                background-image: url("/resources/tlo-czarne1.webp");
                justify-content: center;
                align-items: center;
                width: 100%;
            }
            #aktualnosci{
              background-image: url("/resources/tlo-ciemne1.webp");
              padding: 40px;
              
            }
            #main-mecenasi{
              background-image: url("/resources/tlo-ciemne1.webp");
              
            }
            #aktualnosci-heading{
              font-size:4rem;
              background: #62B7D9;
              background: -webkit-linear-gradient(to top left, #ffffff 30%, #62b7d9 100%);
              background: -moz-linear-gradient(to top left, #ffffff 30%, #62b7d9 100%);
              background: linear-gradient(to top left, #ffffff 30%, #62b7d9 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            #twitter-section{
              background-image: url('./resources/tlo-ciemne1.webp');

            }
            #media{
              background-image: url("./resources/tlo-niebieskie1.webp");
              width: 50%;
            }
            #idee-section{
              background-image: url("./resources/tlo-biale2.webp");
              width: 100%;
              padding-top: 40px;
            padding-bottom: 50px;
            }
            #nav1{
              z-index: 2;
              width:99.2%;
            }
            @media (max-width: 2000px) {
              #nav1{
                width:99.2%;
            }
            }
            @media (max-width: 1800px) {
              #nav1{
                width:99.1%;
            }
            }
            @media (max-width: 1700px) {
              #nav1{
                width:99%;
            }
            }
            @media (max-width: 1600px) {
              #nav1{
                width:98.9%;
            }
            }
            @media (max-width: 800px) {
              #nav1{
                width:100%;
            }
            }
            main{
              z-index: 0;
            }
            #map-img{
              width: 500px;
              height: auto;
            }
            #wladze{
            background-image: url("/resources/tlo-niebieskie4.webp");
            }
            #strukturydiv{
            background-image: url("/resources/tlo-niebieskie4.webp");
            }
            #struktury-heading {
                width: 100%;
                text-align: center;
                background: #ffffff;
                background: linear-gradient(to bottom, #017dc7 -30%, #f2f2f2 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 14vw;
            }
            #wladze-heading {
                width: 100%;
                text-align: center;
                background: #ffffff;
                background: linear-gradient(to top, #017dc7 -30%, #f2f2f2 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 14vw;
            }
            #komisja-heading {
              width: 100%;
              text-align: center;
              background: #ffffff;
              background: linear-gradient(to top, #154659 40%, #222222 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-size: 5vw;
              -webkit-text-stroke: 2px linear-gradient(to top, #154659 30%, #62B7D9 100%);
            }
            #idea-heading {
              text-align: center;
              background: linear-gradient(to top left, #62B7D9 30%, #154659 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-size: 10vw;
            }
            #projekty-heading{
              width:100%;
              text-align: center;
              background: #ffffff;
              background: linear-gradient(to top, #f2f2f2 10%, #62B7D9 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-size: 15vw;

            }
            @media (min-width: 1600px) {
              .fill-image-large {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 0px;
              }
              #onas.fill-image-large {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 80px;
                --fill-left: 0px;
              }
              #publikacje.fill-image-large{
                --fill-top: 150px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 0px;
              }
              #idee.fill-image-large {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 100px;
              }
              #projekty.fill-image-large {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 160px;
              }
              #wsparcie.fill-image-large {
                --fill-top: 190px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 130px;
              }
            }
            @media (max-width: 1599px) {
              .fill-image-medium {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 0px;
              }
              #onas.fill-image-medium {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 0px;
              }
              #publikacje.fill-image-medium {
                --fill-top: 80px;
                --fill-right: 120px;
                --fill-bottom: 160px;
                --fill-left: 40px;
              }
              #idee.fill-image-medium {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 90px;
              }
              #projekty.fill-image-medium {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 150px;
              }
            }
            @media (max-width: 767px) {
              .fill-image-small {

                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 0px;
              }
              #onas.fill-image-small {

                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 0px;
              }
              #publikacje.fill-image-small {

                --fill-top: 80px;
                --fill-right: 120px;
                --fill-bottom: 160px;
              }
              #idee.fill-image-small {

                --fill-top: 0px;
                --fill-right: 390px;
                --fill-bottom: 0px;
                --fill-left: 0px;
              }
              #projekty.fill-image-small {
                --fill-top: 0px;
                --fill-right: 0px;
                --fill-bottom: 0px;
                --fill-left: 250px;
              }
            }
            #projekty{
              background-image: url("/resources/tlo-biale3.webp");
              min-height: 400px;
              width: 100%;
            }
            #demo-agents .card{
              background-color: #282828;
              color: white;
            }
        #card-text1 {
            font-size: 1.3rem;
            margin-left: 10px;
        }
        #inverted1 {
            background-color: black;
            color: white;
        }
        #inverted1 .icon {
            filter: invert(100%);
        }
          /* Ukryj trzecią publikację na ekranach mniejszych niż 768px */
      @media (max-width: 767px) {
        .hidden-mobile {
          display: none !important;
        }
      }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
body.loading #nawigator {
  visibility: hidden;
}
      @font-face {
        font-family: 'Oswald';
        font-display: swap;
        src: url('https://fonts.googleapis.com/css?family=Oswald') format('woff2');
    }
.kongres-banner {
    position: relative;        /* nadal potrzebne dla przycisku absolute, jeśli flex nie obejmuje przycisku */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;             /* flex pozwala łatwo centrować */
    justify-content: center;   /* wyśrodkowanie poziome */
    align-items: center;       /* wyśrodkowanie pionowe */
    flex-direction: column;    /* przydatne jeśli dodasz inne elementy pod przyciskiem */
}

.banner-img {
    width: 100%;
    height: auto;
    display: block;
}
.btn-zapisz-sie {
    position: relative;       /* teraz nie musimy absolute w desktopie */
    background-color: #292a2b;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    font-size: 2.5rem;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
.btn-zapisz-sie:hover {
  background-color: #0056b3;
}
@media (min-width: 767px) and (max-width: 1164px) {
    .btn-zapisz-sie {
        font-size: 2rem;
        padding: 8px 15px;
        bottom: 15%;
    }
    .kongres-banner{
        height: 30%;
    }
}
/* Na urządzeniach mobilnych */
@media (max-width: 768px) {
    .btn-zapisz-sie {
        position: static;      /* usuwa absolute, żeby był pod obrazkiem */
        transform: none;       /* usuwa przesunięcie */
        display: block;        /* blokowy, zajmuje całą szerokość */
        width: 100%;
        font-size: 1.8rem;     /* trochę mniejsza czcionka */
        text-align: center;    /* wyśrodkowanie tekstu */
        border-radius: 0;      /* przycisk na całą szerokość bez zaokrągleń */
    }
    .kongres-banner img {
        content: url('resources/banerdesk.webp');
    }
}
    </style>
  </head>
   <body onload='myInit()'>
    <div id="canvasWrapper">
  <canvas id="myCanvas"></canvas>
</div>
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="nav1" style="position:fixed; ">
    <div class="container-fluid">
        <a style="margin: 0px; padding: 0px; !important" id="logonav" class="navbar-brand" href="#nawigator"><img src="./resources/logobiale1.webp" style="height:70px;" /></a>
<div class="footer-col" style="margin-bottom: 0px; margin-left: 0px; padding-left: 0px;">
                    <div class="social-links" style='display: flex; height: 120% !important; width:120%; '>
  	 				          <a href="https://www.facebook.com/StowKoLiber"><i class="fab fa-facebook-f"></i></a>
  	 				          <a href="https://twitter.com/KoLiber_org"><i class="fab fa-twitter"></i></a>
  	 				          <a href="https://www.instagram.com/koliber_org/"><i class="fab fa-instagram"></i></a>
  	 				          <a href="https://www.youtube.com/@KoLiberTV"><i class="fab fa-youtube"></i></a>
                              <a href="https://www.tiktok.com/@stowarzyszeniekoliber"><i class="fab fa-tiktok"></i></a>
  	 			    </div>
        </div>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav navbar-center mb-2 mb-sm-0">
                <li class="nav-item fs-3 mx-5">
                    <a class="nav-link link-color" aria-current="page" href="index.php#aktualnosci" style="font-weight: bold; font-size: 1.1em;">Publikacje</a>
                </li>
                <li class="nav-item fs-3 mx-5">
                    <a class="nav-link link-color" aria-current="page" href="index.php#struktury" style="font-weight: bold; font-size: 1.1em;">Struktury</a>
                </li>
                <li class="nav-item fs-3 mx-5">
                    <a class="nav-link link-color" aria-current="page" href="/projekty" style="font-weight: bold; font-size: 1.1em;">Projekty</a>
                </li>
                <li class="nav-item fs-3 mx-5 ">
                    <a class="nav-link link-color" data-bs-toggle="modal" data-bs-target="#wsparcie-info" href="" style="font-weight: bold; font-size: 1.1em;">Wsparcie</a>
                </li>
            </ul>
    </div>
    </div>
</nav>  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" id="welcome">
        <div class="toast-header">
          <img src="./resources/KoLiberZnakKolo_white_300x300.webp" style="width: 30px; height: 30px;" class="rounded me-2" alt="logo">
          <strong class="me-auto">Stowarzyszenie KoLiber</strong>
          <small></small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          <p>Znajdujesz się na oficjalnej stronie KoLibra!<br>
          Kliknij na interaktywne menu, by zapoznać się z treścią :)</p>
          <div id="cookie-banner" style="width: 100%; background: #f0f0f0; padding: 10px;">
Ta strona wykorzystuje pliki cookies. <a href="#" id="cookie-accept">Akceptuj</a>
</div>
        </div>
      </div>
    </div>
    <script async>
function scaleCoordinates(coords, scale) {
  return coords.map(coord => Math.round(coord * scale)).join(',');
}
function setCoordinates(areaId, coords) {
  const area = document.getElementById(areaId);
  if (area) area.setAttribute('coords', coords);
}
async function updateAreaCoordinates() {
  const screenWidth = window.innerWidth || document.documentElement.clientWidth;
  if (screenWidth <= 768) {
    const scaleFactor = screenWidth / 768;
    const areas = {
      "onas": "0,0,343,0,349,291,0,167",
      "idee": "342,0,477,241,559,190,768,263,768,0",
      "publikacje": "0,167,352,462,0,583",
      "projekty": "768,263,559,364,361,930,768,930",
      "koliber": "363,924,351,464,0,169,350,293,343,0,479,228,560,190,768,263,558,364,363,930",
      "wsparcie": "0,930,0,664,354,525,361,930"
    };
    Object.entries(areas).forEach(([areaId, coords]) => {
      const scaledCoords = scaleCoordinates(coords.split(',').map(Number), scaleFactor);
      setCoordinates(areaId, scaledCoords);
    });
  }
  return new Promise(resolve => setTimeout(resolve, 100));
}
window.addEventListener('load', async () => {
  await updateAreaCoordinates();
  const splash = document.getElementById('splash-screen');
  if (splash) {
    splash.style.transition = 'opacity 0.5s ease';
    splash.style.opacity = '0';
    setTimeout(() => splash.remove(), 500);
  }
});
</script>
    <div id="nawigator">
        <div id="splash-screen" style="position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;z-index:9;display:flex;justify-content:center;align-items:center;">
  <img src="resources/KoLiberZnakKolo_white_300x300.webp" alt="Logo" style="width: 100px; height: 100px; animation: spin 2s linear infinite;">
</div>
        <div class="header-image">
            <img src="./resources/tlo5.webp?v=2" width="100%" height="100%" id="menu1" name="menu1" alt="Interaktywne menu nawigacja" usemap="#mapaodsylaczy" class="maparea" loading="lazy">
        </div>
        <map id="mapaodsylaczy" name="mapaodsylaczy" class="maparea">
            <area id="onas" class="fill-image-large fill-image-medium fill-image-small" onmouseover="myHover(this);" onmouseout="myLeave()" shape="poly" coords="0,0,0,300,644,546,883,548,682,0" alt="onas" href="#struktury"> 
            <area id="publikacje" class="fill-image-large fill-image-medium fill-image-small" onmouseover="myHover(this);" onmouseout="myLeave()"shape="poly" coords="0,300,922,652,640,940,0,940" href="#aktualnosci" alt="publikacje">
            <area id="idee"class="fill-image-large fill-image-medium fill-image-small" onmouseover="myHover(this);" onmouseout="myLeave()" shape="poly" coords="819,369,950,480,991,441,1133,440,1577,0,682,0" href="#idee-section" alt="idee"> 
            <area id="projekty" class="fill-image-large fill-image-medium fill-image-small"  onmouseover="myHover(this);" onmouseout="myLeave()" shape="poly" coords="1030,940,1030,599,1635,0,1920,0,1920,940" href="./projekty" alt="projekty" > 
            <area id="koliber" onmouseover="myHover2(this);" onmouseout="myLeave()" shape="poly" coords="1028,938,924,651,649,546,885,546,820,374,950,479,990,441,1132,441,1061,512,1015,512,1051,475,1005,475,932,547,1027,547" alt="koliber" data-bs-toggle="modal" data-bs-target="#koliber-info">
            <area id="wsparcie" class="fill-image-large fill-image-medium fill-image-small" onmouseover="myHover(this);" onmouseout="myLeave()" shape="poly" coords="639,940,922,652,1027,940,639,940" alt="wsparcie" data-bs-toggle="modal" data-bs-target="#wsparcie-info">
        </map>     			
    </div> 
    
      <!-- Modal koliber -->
      <div class="modal fade" id="koliber-info" tabindex="-1" aria-labelledby="koliber-modal" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="koliber-modal">Stowarzyszenie KoLiber</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="display:flex;">
              <div class="col-lg-6 col-md-7">
              <h2>Stowarzyszenie KoLiber to organizacja łącząca młodych intelektualistów
oraz przedsiębiorców, którym bliskie są poglądy konserwatywno - liberalne.
Naszym celem jest wykształcenie elit, które będą zdolne wziąć aktywny
udział w życiu społeczno - politycznym kraju oraz pozytywnie wpłynąć
na jakość polskiej debaty publicznej.</h2>
</div>
            <div class="col-lg-5 col-md-2" style="padding-left: 70px;">
                <img class="img-fluid" src="./resources/logo.webp">
            </div>
            </div>
          
            <div class="modal-footer">
            <div class="d-flex justify-content-start">
              <button type="button" class="btn btn-secondary">
                <a href="backrooms">Przejdź na zaplecze</a>
              </button>
            </div>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zamknij</button>
            </div>
          </div>
        </div>
      </div>
        <!-- Modal wsparcie -->
        <div class="modal fade" id="wsparcie-info" tabindex="-1" aria-labelledby="koliber-modal" aria-hidden="true">
            <div class="modal-dialog modal-l modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header">
                  <h1 class="modal-title fs-5" id="koliber-modal">Wspieraj KoLibra</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="justify-content: center; align-items: center; padding: 0px;">
                  <div class="payment-card" style="font-size: 18px; justify-content: center; align-items: center;">
<!-- Opcje płatności -->
<div class="payment-option"  style="font-size: 18px; ">
  <label>
    <p>Przelew Bankowy</p>
  </label>
  <p style="font-size: 23px;"><strong>Nazwa Odbiorcy:<br></strong> Stowarzyszenie KoLiber</p>
  <p style="font-size: 23px;"><strong>Numer Konta:<br></strong> 97 1750 0012 0000 0000 3897 8292</p>
  <p style="font-size: 23px;"><em>Tytuł: Darowizna na cele statutowe.</em></p>
</div>
<!-- Opcja płatności online 
<div class="payment-option">
  <label>
    <input type="radio" name="paymentMethod" value="onlinePayment">
    Płatność Online
  </label>
  -->
  <!-- Tutaj umieść rzeczywistą integrację z bramką płatności 
  <button class="btn btn-primary">Wpłać Online</button>
</div>
-->

</div>
<div style="text-align: center;">
<img src="./resources/logo3.webp" alt="logo" style="width: 80%;">
</div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zamknij</button>
</div>
</div>
</div>
</div></header>
<main>
<div id="kolibertv" style="width:100%;"><!-- SEKCJA KOLIBERTV -->
  <div class="row" style="background-color: black; border: 5px solid #faa61a;">
    <div class="col-lg-4 col-md-4 col-sm-12">
      <div class="latest-video-wrapper">
        <div class="latest-video" style="border: 1px solid #262223;">
          <div class="video-container" style="text-align: left;">
            <iframe src="https://www.youtube.com/watch?v=D7YNFD_i5k4?autoplay=1&amp;mute=1" style="width: 100% !important; height: 100% !important;" loading="lazy"></iframe>
          </div>
          <h2 style="margin-top: 20px; padding-top: 10px; font-size: 150%;" class="video-title">Dlaczego warto dołączyć do KoLibra? Sprawdź sam!</h2>
          <p style="margin-bottom: 5px;" class="video-date">3.09.2024</p>
          <p class="video-description"></p>
        </div>  
      </div>
    </div>
    <div class="col-lg-8 col-md-8 col-sm-12 mobile">
      <div class="film-reel-container">
        <div class="film-reel"></div>
      </div>
      <div class="other-videos-container" style="background-color: black;">
        <div class="other-videos" style="border: 1px solid #262223;">
          <!-- Other videos will be dynamically inserted here -->
        </div>
      </div>
      <div class="film-reel-container">
        <div class="film-reel"></div>
      </div>
    </div>
  </div>
</div>
<script>
  async function fetchJSON() {
    try {
      const timestamp = new Date().getTime(); // Unikalny znacznik czasu
      const url = `videos.json?t=${timestamp}`;
      const response = await fetch(url);
      if (!response.ok) throw new Error('Network response was not ok');
      return await response.json();
    } catch (error) {
      console.error('There has been a problem with your fetch operation:', error);
    }
  }
  function createVideoElements(videos) {
    const otherVideos = document.querySelector('.other-videos');
    videos.sort((a, b) => new Date(b.snippet.publishedAt) - new Date(a.snippet.publishedAt));
    videos.forEach((video, index) => {
      const videoCard = document.createElement('div');
      videoCard.classList.add('video-card');
      const thumbnailUrl = video.snippet.thumbnails.medium.url;
      const videoTitle = video.snippet.title;
      const videoId = video.id.videoId;
      const thumbnail = document.createElement('img');
      thumbnail.src = thumbnailUrl;
      videoCard.appendChild(thumbnail);
      const title = document.createElement('h3');
      title.textContent = videoTitle;
      title.style.color = 'white';
      videoCard.appendChild(title);
      videoCard.addEventListener('click', () => {
        window.location.href = 'https://www.youtube.com/watch?v=' + videoId;
      });
      if (index === 0) {
        // Wyświetlanie najnowszego filmu osobno
        const latestVideoContainer = document.querySelector('.latest-video .video-container');
        const latestVideoTitle = document.querySelector('.latest-video .video-title');
        const latestVideoDate = document.querySelector('.latest-video .video-date');
        const latestVideoDescription = document.querySelector('.latest-video .video-description');
        latestVideoContainer.innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}" style="width: 100% !important; height: 100% !important;" allowfullscreen></iframe>`;
        latestVideoTitle.textContent = videoTitle;
        latestVideoDate.textContent = new Date(video.snippet.publishedAt).toLocaleDateString();
        latestVideoDescription.textContent = video.snippet.description;
      } else {
        otherVideos.appendChild(videoCard);
      }
    });
    scrollOtherVideos(); // Rozpoczęcie animacji przewijania po utworzeniu elementów
    startMobileSlider(videos); // Inicjalizacja slidera dla wersji mobilnej
  }
  function scrollOtherVideos() {
    const container = document.querySelector('.other-videos');
    let videoCards = container.querySelectorAll('.video-card');
    if (videoCards.length === 0) return;

    function moveFirstToLast() {
      const firstVideoCard = videoCards[0];
      container.appendChild(firstVideoCard);
      videoCards = container.querySelectorAll('.video-card');
    }

    function scrollStep() {
      container.classList.add('scrolling');
      setTimeout(() => {
        moveFirstToLast();
        container.classList.remove('scrolling');
      }, 1000);
    }

    let interval = setInterval(scrollStep, 6000);

    // Fix bug on window resize or minimize/restore
    function handleVisibilityChange() {
      if (document.hidden) {
        clearInterval(interval);
      } else {
        clearInterval(interval);
        interval = setInterval(scrollStep, 6000);
      }
    }

    window.addEventListener('resize', () => {
      clearInterval(interval);
      interval = setInterval(scrollStep, 6000);
    });

    document.addEventListener('visibilitychange', handleVisibilityChange);
  }
  function startMobileSlider(videos) {
    if (window.innerWidth <= 768) {
      let currentIndex = 0;
      let isFirstVideoShown = false;
      function showNextVideo() {
        if (videos.length === 0) return;
        if (!isFirstVideoShown) {
          isFirstVideoShown = true;
          return;
        }
        currentIndex = (currentIndex + 1) % videos.length;
        const video = videos[currentIndex];
        const videoId = video.id.videoId;
        const latestVideoContainer = document.querySelector('.latest-video .video-container');
        const latestVideoTitle = document.querySelector('.latest-video .video-title');
        const latestVideoDate = document.querySelector('.latest-video .video-date');
        const latestVideoDescription = document.querySelector('.latest-video .video-description');
        latestVideoContainer.innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}" style="width: 100% !important; height: 100% !important;" allowfullscreen></iframe>`;
        latestVideoTitle.textContent = video.snippet.title;
        latestVideoDate.textContent = new Date(video.snippet.publishedAt).toLocaleDateString();
        latestVideoDescription.textContent = video.snippet.description;
      }
      setTimeout(() => {
        showNextVideo();
        setInterval(showNextVideo, 8000);
      }, 8000);
    }
  }
  // --- Rolki filmowe ---
function initFilmReels(numBlocks = 30, speed = 0.5) {
  const reels = document.querySelectorAll('.film-reel');
  reels.forEach(reel => {
    reel.innerHTML = '';
    for (let i = 0; i < numBlocks; i++) {
      const block = document.createElement('div');
      block.className = 'block';
      reel.appendChild(block);
    }

    let offset = 0;
    const blockWidth = reel.querySelector('.block').offsetWidth + 10;

    function animate() {
      offset -= speed;
      if (-offset >= blockWidth) {
        reel.appendChild(reel.firstElementChild);
        offset += blockWidth;
      }
      reel.style.transform = `translateX(${offset}px)`;
      requestAnimationFrame(animate);
    }

    // Ensure no empty spaces by resetting the reel's position
    function resetReel() {
      offset = 0;
      reel.style.transform = `translateX(0)`;
    }

    // Handle window resize or minimize/restore events
    function handleVisibilityChange() {
      if (document.hidden) {
        cancelAnimationFrame(animate);
      } else {
        resetReel();
        requestAnimationFrame(animate);
      }
    }

    // Attach event listeners
    window.addEventListener('resize', resetReel);
    document.addEventListener('visibilitychange', handleVisibilityChange);

    requestAnimationFrame(animate);
  });
}

  fetchJSON().then(data => {
    if (data && data.items) {
      createVideoElements(data.items);
      initFilmReels(); // Initialize infinite scrolling for white blocks
    }
  });
  function checkScreenWidth() {
    if (window.innerWidth <= 768) {
      startMobileSlider();
    }
  }
  checkScreenWidth();
  window.addEventListener('resize', checkScreenWidth);
</script>
<div class="row"><!-- SEKCJA AKTUALNOSCI -->
  <!-- LEWA SEKCJA - Najnowsze publikacje -->
  <div class="col-lg-5 col-md-12 col-sm-12" id="aktualnosci">
    <h1 id="aktualnosci-heading" style="padding-bottom: 10px;" class="text-center mobile">Najnowsze publikacje:</h1>
<div class="row" id="slider-container">
    <div class="col-lg-4 col-md-4 col-sm-4 col-mobile center publikacja " style="padding:0;"><div class="card h-100"><img src="./resources/publikacje/relacjepolweg.webp" class="card-img-top" alt="img_publikacja" loading="lazy"><div class="card-body"><h3 style="font-weight: normal; font-size: 26px;">Raport o relacjach polsko-węgierskich w latach 2015-2023</h3></div>        <a class="btn btn-primary mt-2" style="width: 100%; font-size: 30px;" href="publikacje/raport-o-relacjach-polsko-wegierskich-w-latach-2015-2023/">Zobacz publikację</a>
        </div></div><div class="col-lg-4 col-md-4 col-sm-4 col-mobile center publikacja " style="padding:0;"><div class="card h-100"><img src="./resources/publikacje/raportstudenci.webp" class="card-img-top" alt="img_publikacja" loading="lazy"><div class="card-body"><h3 style="font-weight: normal; font-size: 26px;">Raport “Studenci a wymagania rynku pracy”</h3></div>        <a class="btn btn-primary mt-2" style="width: 100%; font-size: 30px;" href="publikacje/raport-studenci-a-wymagania-rynku-pracy/">Zobacz publikację</a>
        </div></div><div class="col-lg-4 col-md-4 col-sm-4 col-mobile center publikacja hidden-mobile" style="padding:0;"><div class="card h-100"><img src="./resources/publikacje/pozycjaustrojowa.webp" class="card-img-top" alt="img_publikacja" loading="lazy"><div class="card-body"><h3 style="font-weight: normal; font-size: 26px;">[Analiza] Pozycja ustrojowa organów stanowiących w jednostkach samorządu terytorialnego – diagnoza i propozycje zmian</h3></div>        <a class="btn btn-primary mt-2" style="width: 100%; font-size: 30px;" href="publikacje/analiza-pozycja-ustrojowa-organow-stanowiacych-w-jednostkach-samorzadu-terytorialnego-diagnoza-i-propozycje-zmian/">Zobacz publikację</a>
        </div></div>  </div>
<script>
  function adjustPublications() {
    var publications = document.querySelectorAll('.publikacja');
    if (window.innerWidth < 768 && publications.length === 3) {
      publications[2].style.display = 'none';
    } else {
      publications.forEach(function(publication) {
        publication.style.display = 'block';
      });
    }
  }
  window.addEventListener('load', adjustPublications);
  window.addEventListener('resize', adjustPublications);
</script>
<div class="row">
<div class="col-6">
        <div class="center-container">
  <div class="button-container" style="margin-top: 30px;">
    <a href="https://koliber.org//publikacje">
      <img src="/resources/inbox.webp" alt="struktury_page" class="button-icon" loading="lazy">
      <span class="button-text" style="color: white;">Zobacz wszystkie publikacje</span>
    </a>
  </div>
  </div>
</div>
<div class="col-6">
    <div class="center-container">
  <div class="button-container" style="margin-top: 30px;">
    <a href="https://koliber.org/goniecwolnosci">
      <img src="/resources/goniec-logo1.webp" alt="struktury_page" class="button-icon" loading="lazy">
      <span class="button-text" style="color: white;">Goniec Wolności</span>
    </a>
  </div>
  </div>
  </div>
  </div>

</div>
<div class="col-lg-7 col-md-12 col-sm-12" id="twitter-section"><!-- PRAWA SEKCJA - Ostatnie posty z Twittera -->
  <h1 id="aktualnosci-heading" style="padding-top: 40px;" class="text-center mobile">Sekcja Twittera:</h1>
  <div class="twitter-posts">
    <div class="row justify-content-center" style="justify-content: center; position: relative;">
      <div class="col-md-6">
        <blockquote class="twitter-tweet" style="position: absolute; z-index: 1;">
          <a href="https://twitter.com/KoLiber_org/status/1830945262992335344?t=c1vt_vcmtWDQTfhzGDOPXg&s=19"></a>
        </blockquote>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </div>
      <div class="col-md-6">
        <blockquote class="twitter-tweet">
          <a href="https://twitter.com/KoLiber_org/status/1962900704055447912"></a>
        </blockquote>
        <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </div>
    </div>
  </div>
</div> 
<iframe src="https://www.petycjeonline.com/embed/stop_opacie_reprograficznej_petycja_do_minister_kultury_i_dziedzictwa_narodowego_marty_cienkowskiej" style="width: 100%; height: 500px; border: 1px solid #ccc;"></iframe>
<div class="kongres-banner">
    <img class="banner-img mobile" src="resources/banermill.webp" alt="Tysiąclecie Królestwa Polskiego">
    <div class="btn-zapisz-sie">
        <a href="https://millennium.koliber.org">Wejdź na stronę!</a>
    </div>
</div>
<div id="idee-section"><!-- SEKCJA IDEE -->
<div id="idee">
<div class="col-md-12">
  <div class="heading mobile">
      <h1 id="idea-heading">NASZE CELE I IDEAŁY</h1>
    </div>
      <div class="col-lg-12 col-md-12 container" style="padding-top: 10px;">
        <h2 style="font-size:200%; padding:10px;">Stowarzyszenie KoLiber to organizacja łącząca młodych intelektualistów oraz przedsiębiorców. Naszym celem jest wykształcenie elit, które będą zdolne wziąć aktywny udział w życiu społeczno - politycznym kraju oraz pozytywnie wpłynąć na jakość polskiej debaty publicznej.</h2>
        <h2 style="padding-bottom: 20px; padding-top: 50px;">W naszej działalności dążymy do:</h2>
        <div>
       <div class="accordion col-lg-12 col-md-12 col-sm-12 mx-auto" style="text-align: center;">
  <div class="accordion-item" style="width:100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="z-index: 0;">
      <h2><strong>1. Realizacji idei wolnego społeczeństwa</strong></h2>
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse">
      <div class="accordion-body">
        <p>Wierzymy, że podstawowym podmiotem społecznym jest osoba ludzka z przyrodzonymi jej od naturalnego poczęcia do naturalnej śmierci niezbywalną godnością i wolną wolą. Dlatego też troszczymy się o dobro osoby ludzkiej i jej wyżej wymienione atrybuty stanowiące fundament wszelkich instytucji społecznych i politycznych charakterystycznych duchowi ubranej w polską formę cywilizacji łacińskiej, a kt&oacute;ra jest dla nas najważniejszym instytucjonalnie punktem odniesienia. Uważamy, że stosunkami społecznymi kierować powinna rozumność i słuszność zakorzeniona w zasadach prawa rzymskiego oraz greckiej refleksji spekulatywnej podporządkowanych regułom etyki chrześcijańskiej, zaś wynikająca z nich wolność osobista powinna wiązać się z odpowiedzialnością za własny los oraz troską o dobro wsp&oacute;lne.</p>
        </div>
      </div>
    </div>
    <div class="accordion-item" style="width: 100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="z-index: 0;">
      <h2><strong>2. Wcielania w życie idei wolnościowych w gospodarce</strong></h2>
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse">
      <div class="accordion-body">
      <p>Jesteśmy przekonani, że dążność do budowy silnego państwa minimum, podporządkowywanie mechanizm&oacute;w rynkowych oddolnej inicjatywie społecznej, a także wspieranie związanych z nimi proces&oacute;w deinstytucjonalizacji oraz rozwoju samorządności skorelowanych z zasadą subsydiarności jest drogą do osiągnięcia trwałego dobrobytu umożliwiającego pojedynczym Polakom oraz narodowi polskiemu najpełniejsze urzeczywistnianie się w swej wolności i człowieczeństwie. Warunkiem ku temu niezbędnym jest tworzenie sprzyjającego wartościom konserwatywno liberalnym modelu funkcjonowania państwa oraz dążenie do znoszenia barier prawnych hamujących przedsiębiorczość, inicjatywę i możliwość samoorganizacji.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item" style="width: 100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="z-index: 0;">
      <h2><strong>3. Obrony suwerenności Państwa Polskiego</strong></h2>
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse">
      <div class="accordion-body">
      <p>Jesteśmy przeświadczeni, że ponad tysiącletnia historia Narodu Polskiego wraz z jego głęboko zakorzenionymi tradycjami niepodległościowymi stanowią wystarczającą legitymację dla istnienia w pełni niezależnego Państwa Polskiego. Dlatego też uznajemy za święte prawo Narodu Polskiego do samostanowienia. W szczeg&oacute;lności przeciwdziałać chcemy narzucaniu Państwu Polskiemu polityki zagranicznej, gospodarczej, wewnętrznej i militarnej przez podmioty zewnętrzne, a także wspierać jego dalszy rozw&oacute;j jako podmiot oraz suwerenny byt.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item" style="width: 100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="z-index: 0;">
      <h2><strong>4. Poszanowania tradycji i historii</strong></h2>
      </button>
    </h2>
    <div id="collapseFour" class="accordion-collapse collapse">
      <div class="accordion-body">
      <p>Uważamy, że wsp&oacute;lna tradycja i kultywowanie polskości są czynnikami scalającymi społeczeństwo oraz wzmagającymi poczucie jedności narodowej. Dlatego też staramy się otoczyć troską pielęgnowanie narodowych i republikańskich tradycji polskich. Dostrzegamy wartość wsp&oacute;lnoty przeszłości i przyszłości wyrażającej się w ciągłości pokoleniowej.</p>
      </div>
    </div>
  </div>
  <div class="accordion-item" style="width: 100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" style="z-index: 0;">
      <h2><strong>5. Uznania szczeg&oacute;lnej roli Rodziny</strong></h2>
      </button>
    </h2>
    <div id="collapseFive" class="accordion-collapse collapse">
      <div class="accordion-body">
      <p>Rodzina jest w naszej ocenie podstawową i naturalną instytucją społeczną &ndash; to w niej człowiek najpełniej dojrzewa oraz urzeczywistnia w swoim powołaniu. Sądzimy także, że wszelkie przejawy ataku na rodzinę są bardzo niebezpieczne dla kondycji całego społeczeństwa. Dlatego też opieką staramy się otoczyć tradycyjny model rodziny ufundowany na małżeństwie rozumianym jako związek mężczyzny i kobiety. Za niepodważalne uważamy także prawo rodzic&oacute;w do wychowania dzieci według własnych przekonań i światopoglądu.</p>
      </div>
    </div>
  </div>
  </div>
  </div>
        <p style="font-size:160%; margin-top: 50px; padding:10px;text-align: center;">KoLiber jest inicjatywą młodych Polaków, których łączy wyznawany system wartości, określany mianem konserwatywno-liberalnego. Uważamy, że wcielanie tych wartości w życie prowadzić będzie zarówno do wzrostu powszechnego dobrobytu ekonomicznego, jak i do wzmocnienia więzi społecznych oraz odbudowy moralnych podstaw naszej cywilizacji.</p>
        <div class="center-container">
  <div class="button-container">
    <a href="./statut">
      <img src="/resources/constitution.webp?v=2" alt="statut_page" class="button-icon" loading="lazy">
      <span class="button-text">Zobacz Statut KoLibra</span>
    </a>
  </div>
</div>
    </div>
  </div>
</div>
  </div>
<!-- SEKCJA STRUKTURY -->
<script>
  function displayContactInfo(kategoria, miejscowosc, firstName, lastName, email, facebookLink) {
    var modalBody = document.getElementById('kontakt-info').getElementsByClassName('modal-body')[0];
    modalBody.innerHTML = '<div class="col-lg-6 col-md-7">' +
      '<h1>' + kategoria + ' ' + miejscowosc + '</h1>' +
      '<p style="display:none;">' + firstName + ' ' + lastName + '</p>' +
      '<h2>' + email + '</h2>' +
      '<a href="https://www.facebook.com/KoLiber' + miejscowosc + '" target="_blank" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>' +
      '</div>';
  }
</script>
<script>
  function hideAd() {
    document.getElementById("regionAd").style.display = "none";
  }
  function showAd() {
    document.getElementById("regionAd").style.display = "block";
  }
  const regionLinks = document.querySelectorAll(".poland a");
  regionLinks.forEach(function (link) {
    link.addEventListener("click", function (event) {
      event.preventDefault(); // Prevent the default link behavior
      hideAd();
      // You can add additional code here to display region-specific content
    });
  });
  document.getElementById("regionAd").addEventListener("click", showAd);
</script>
<section id="struktury">
<div id="strukturydiv" style="display:flex; flex-wrap: wrap; position:relative;">
     <!-- Modal kontakt -->
     <div class="modal fade" id="kontakt-info" tabindex="-1" aria-labelledby="kontakt-modal" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title fs-5" id="koliber-modal">KoLibrowe kontakty</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="display:flex;">
              <div class="col-lg-6 col-md-7">
                <h2>W tym miejscu będzie wyświetlany kontakt do poszczególnych oddziałów</h2>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zamknij</button>
            </div>
          </div>
        </div>
      </div>
      <div class="container" style="text-align: center;">
    <p id="struktury-heading">STRUKTURY <p>
</div>
    <div class="col-lg-12 col-md-12 col-sm-12 mx-auto">
    <div class="advertisement">
      <img src="/resources/KoLiberZnakKolo_white_300x300.webp" alt="deklaracja"/>
        <h1 style="color: #f2f2f2;">Dołącz do naszego stowarzyszenia!</h1>
        <a class="btn" href="./docs/deklaracja.pdf" target="_blank"><h3>Deklaracja członkowska (PDF)</h3></a>
    </div>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-12 mx-auto">
      <div id="map-poland">
        <ul class="poland" style="text-align: center;">
          <li class="pl1"><a href="#dolnoslaskie">Dolnośląskie</a></li>
          <li class="pl2"><a href="#kujawsko-pomorskie">Kujawsko-pomorskie</a></li>
          <li class="pl3"><a href="#lubelskie">Lubelskie</a></li>
          <li class="pl4"><a href="#lubuskie">Lubuskie</a></li>
          <li class="pl5"><a href="#lodzkie">Łódzkie</a></li>
          <li class="pl6"><a href="#malopolskie">Małopolskie</a></li>
          <li class="pl7"><a href="#mazowieckie">Mazowieckie</a></li>
          <li class="pl8"><a href="#opolskie">Opolskie</a></li>
          <li class="pl9"><a href="#podkarpackie">Podkarpackie</a></li>
          <li class="pl10"><a href="#podlaskie">Podlaskie</a></li>
          <li class="pl11"><a href="#pomorskie">Pomorskie</a></li>
          <li class="pl12"><a href="#slaskie">Śląskie</a></li>
          <li class="pl13"><a href="#swietokrzyskie">Świętokrzyskie</a></li>
          <li class="pl14"><a href="#warminsko-mazurskie">Warmińsko-mazurskie</a></li>
          <li class="pl15"><a href="#wielkopolskie">Wielkopolskie</a></li>
          <li class="pl16"><a href="#zachodniopomorskie">Zachodniopomorskie</a></li>
        </ul>
      </div>
  </div>
  <div id="demo-agents" class="col-lg-5 col-md-6 col-sm-12 mx-auto" style="padding-top:10px;">
  <div id="regionAd" style="text-align: center;">
    <p>Kliknij na wybrane województwo i sprawdź KoLibrowe Struktury!</p>
  </div>
  <ul style="padding-left: 0rem;">
       <li " id="dolnoslaskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Wrocław.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Wrocław</p><p>Prezes: Artur Ważny</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Wrocław','Artur', 'Ważny', 'artur.wazny@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoLiberWroclaw target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><div class="col-lg-5 col-md-6 col-sm-12"><li id="kujawsko-pomorskie"><div class="card animate pop" style="padding: 10px; font-size: 1.3rem;"><div class="row"><div class="col-md-12 col-sm-21"></div><div class="col-md-12 col-sm-12"><p>Brak struktur w tym województwie</p><p>Pełnomocnik Zarządu ds. Oddziałów i struktur regionalnych Marcin Trawka</p>
<p>mail: marcin.trawka@koliber.org</p></div></div></div></li></div><li " id="lubelskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Biała Podlaska.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Biała Podlaska</p><p>Prezes: Piotr Musiał</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Biała Podlaska','Piotr', 'Musiał', 'piotr.musial@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/profile.php?id=61556569124993 target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="lubelskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Lublin.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Lublin</p><p>Prezes: Bartłomiej Kiedrzynek</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Lublin','Bartłomiej', 'Kiedrzynek', 'bartlomiej.kiedrzynek@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoliberLublin target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><div class="col-lg-5 col-md-6 col-sm-12"><li id="lubuskie"><div class="card animate pop" style="padding: 10px; font-size: 1.3rem;"><div class="row"><div class="col-md-12 col-sm-21"></div><div class="col-md-12 col-sm-12"><p>Brak struktur w tym województwie</p><p>Pełnomocnik Zarządu ds. Oddziałów i struktur regionalnych Marcin Trawka</p>
<p>mail: marcin.trawka@koliber.org</p></div></div></div></li></div><li " id="lodzkie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Łódź.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Łódź</p><p>Prezes: Mateusz Pawłowski</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Łódź','Mateusz', 'Pawłowski', 'mateusz.pawlowski@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoliberLodz target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="malopolskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Kraków.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Kraków</p><p>Prezes: Dominik Majcher</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Kraków','Dominik', 'Majcher', 'dominik.majcher@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/koliberkrakow target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="mazowieckie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Siedlce.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Siedlce</p><p>Prezes: Jakub Tymiński</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Siedlce','Jakub', 'Tymiński', 'jakub.tyminski@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoLiberSiedlce target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="mazowieckie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Warszawa.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Warszawa</p><p>Prezes: Łukasz Kaźmierczak</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Warszawa','Łukasz', 'Kaźmierczak', 'lukasz.kazmierczak@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href= target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><div class="col-lg-5 col-md-6 col-sm-12"><li id="opolskie"><div class="card animate pop" style="padding: 10px; font-size: 1.3rem;"><div class="row"><div class="col-md-12 col-sm-21"></div><div class="col-md-12 col-sm-12"><p>Brak struktur w tym województwie</p><p>Pełnomocnik Zarządu ds. Oddziałów i struktur regionalnych Marcin Trawka</p>
<p>mail: marcin.trawka@koliber.org</p></div></div></div></li></div><div class="col-lg-5 col-md-6 col-sm-12"><li id="podkarpackie"><div class="card animate pop" style="padding: 10px; font-size: 1.3rem;"><div class="row"><div class="col-md-12 col-sm-21"></div><div class="col-md-12 col-sm-12"><p>Brak struktur w tym województwie</p><p>Pełnomocnik Zarządu ds. Oddziałów i struktur regionalnych Marcin Trawka</p>
<p>mail: marcin.trawka@koliber.org</p></div></div></div></li></div><div class="col-lg-5 col-md-6 col-sm-12"><li id="podlaskie"><div class="card animate pop" style="padding: 10px; font-size: 1.3rem;"><div class="row"><div class="col-md-12 col-sm-21"></div><div class="col-md-12 col-sm-12"><p>Brak struktur w tym województwie</p><p>Pełnomocnik Zarządu ds. Oddziałów i struktur regionalnych Marcin Trawka</p>
<p>mail: marcin.trawka@koliber.org</p></div></div></div></li></div><li " id="pomorskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Trójmiasto.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Trójmiasto</p><p>Prezes: Jakub Goran</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Trójmiasto','Jakub', 'Goran', 'email wkrótce')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href= target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="slaskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Katowice.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Katowice</p><p>Prezes: Mikołaj Piotrowski</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Katowice','Mikołaj', 'Piotrowski', 'mikolaj.piotrowski@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href= target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="swietokrzyskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Kielce.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Kielce</p><p>Prezes: Paweł Kwietniewski</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Kielce','Paweł', 'Kwietniewski', 'pawel.kwietniewski@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoLiberKielce target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><div class="col-lg-5 col-md-6 col-sm-12"><li id="warminsko-mazurskie"><div class="card animate pop" style="padding: 10px; font-size: 1.3rem;"><div class="row"><div class="col-md-12 col-sm-21"></div><div class="col-md-12 col-sm-12"><p>Brak struktur w tym województwie</p><p>Pełnomocnik Zarządu ds. Oddziałów i struktur regionalnych Marcin Trawka</p>
<p>mail: marcin.trawka@koliber.org</p></div></div></div></li></div><li " id="wielkopolskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Kalisz.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Kalisz</p><p>Prezes: Wiktor Ślusarski</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Kalisz','Wiktor', 'Ślusarski', 'wiktor.slusarski@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoLiberKalisz target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="wielkopolskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Konin.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Konin</p><p>Prezes: Marcin Pokrywiecki</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Konin','Marcin', 'Pokrywiecki', 'marcin.pokrywiecki@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoLiberKonin target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="wielkopolskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Poznań.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Poznań</p><p>Prezes: Mateusz Nowak</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Poznań','Mateusz', 'Nowak', 'mateusz.nowak@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoLiberPoznan target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="wielkopolskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Rawicz.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Rawicz</p><p>Prezes: Marcin Trawka</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Rawicz','Marcin', 'Trawka', 'marcin.trawka@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoLiberRawicz target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li><li " id="zachodniopomorskie" style="flex: 0 0 auto;"><div class="card animate pop" style="padding: 5px; margin-bottom: 10px; font-size: 1.5rem; display:flex; flex-direction: column; max-width: 600px;"><div class="row"><div class="col-md-4 col-sm-4 mobile"><img class="mobile" src="./resources/profilowe/Profilowe Szczecin.webp?v=2" style="width: 100%; height:auto;" loading="lazy"></div><div class="col-md-8 col-sm-8"><p>oddział Szczecin</p><p>Prezes: Dariusz Olech</p><div class="row" style="padding-right: 0px; padding-left: 0x; margin: 0;"><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0;"><button class="btn btn-primary mt-2" style="width: 100%;" data-bs-toggle="modal" data-bs-target="#kontakt-info" onclick="displayContactInfo('oddział','Szczecin','Dariusz', 'Olech', 'dariusz.olech@koliber.org')">
                    <span style="font-variant:small-caps; font-size: 1.3rem; text-decoration: bold;">Kontakt</span>
                    </button></div><div class="col-md-6 col-sm-6" style="padding-right: 0px; padding-left: 0x; margin: 0; text-align: center;">
                        <a href=https://www.facebook.com/KoLiberSzczecin target="_blank" style="width: 100%; font-size: 1.3rem;" class="btn btn-primary mt-2"><i class="fab fa-facebook"></i> Facebook</a>
                    </div></div></div></div></li>    </div></ul>
</section>
<div id="wladze">
  <div class="container" style="text-align: center;">
    <p id="wladze-heading">WŁADZE <p>
</div>
    <div class="accordion col-lg-11 col-md-12 col-sm-12 mx-auto" style="text-align: center;">
  <div class="accordion-item" style="width:100%;">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        <h2>Prezes</h2>
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <div class="container">
          <div class="row g-0">
            <div class="col-md-3 d-flex align-items-center justify-content-center">
              <div class="image-container" style="max-width: 250px;">
                <img class="image" src="/resources/kustusz.webp?v=2" alt="Prezes" style="max-width: 100%; height: auto;" loading="lazy">
              </div>
            </div>
            <div class="col-md-9">
              <div class="card mb-3">
                <div class="card-body">
                  <h4 class="card-title">Norbert Kustusz</h4>
                            <p class="card-text" style="font-size: 1.2rem;">Prezes Zarządu Głównego Stowarzyszenia KoLiber od dnia 27. maja 2023 roku. Wcześniej pełnił funkcję Wiceprezesa Zarządu Głównego (5. luty 2022 r. - 27. maja 2023 r.) oraz Prezesa Zarządu Oddziału Kalisz (28. czerwca 2021 r. - 23. maja 2023 r.). Były Regionalny Przedstawiciel Młodzieżowej Rady Sprawiedliwości na województwo wielkopolskie. Członek Rady Programowej Stowarzyszenia NowaPL.org. Były członek Kaliskiej Rady Działalności Pożytku Publicznego. Organizator Kongresu Konserwatywnego-Liberalnego. Ekspert ds. Polityki Samorządowej Instytutu Kaliskiego. Absolwent szkoły letniej Akademii Liderów Fundacji im. Świętego Mikołaja. Konserwatywny-liberał oraz narodowy-demokrata ceniący dorobek pisany Romana Dmowskiego, Miltona Friedmana czy Feliksa Konecznego. Zwolennik idei ekumenizmu polskich środowisk prawicowych.</p>
                </div>
              </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
  <div class="accordion-item" style="width: 100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="z-index: 0;">
        <h2>Wiceprezesi</h2>
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse">
    <div class="accordion-body">
        <div class="container">
          <div class="row">
            <div class="col-lg-2 col-md-6 col-sm-12 flex-column align-items-center justify-content-center">
              <div class="image-container" style="max-width: 300px; min-width: 240px;">
                <img class="image" src="/resources/zajaczkowski.webp?v=2" alt="woloszczuk" style="width: 100%; height: auto;" loading="lazy">
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-3 h-100">
                <div class="card-body">
                  <h4 class="card-title">Kacper Prus-Zajączkowski</h4>
                            <p class="card-text" style="font-size: 100%;">Były rzecznik prasowy Stowarzyszenia KoLiber od dnia 12. marca 2024 r. Umiarkowany militarysta i konserwatysta z wolnościowym podejściem gospodarczym działający społecznie już od kilku ładnych lat. Patriota z długim stażem w Związku Harcerstwa Polskiego kształcący się obecnie na kierunku elektroradiologii.</p>                </div>
            </div>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 flex-column align-items-center justify-content-center">
              <div class="image-container" style="max-width: 300px; min-width: 240px;">
                <img class="image" src="/resources/gora.webp?v=2" alt="gora" style="width: 100%; height: auto;" loading="lazy">
              </div>
            </div>
            <div class="col-md-4">
              <div class="card mb-3 h-100">
                <div class="card-body">
                  <h4 class="card-title">Adrian Góra</h4>
                            <p class="card-text" style="font-size: 100%;">Student V roku prawa na Uniwersytecie Warszawskim. Od lat zaangażowany w szerzenie idei konserwatywno-liberalnych. Obecnie m.in. Członek Zarządu Krajowego Młodych dla Wolności, a także Członek Rady Dialogu z Młodym Pokoleniem przy Kancelarii Prezesa Rady Ministrów. W przeszłości Przewodniczący II kadencji Młodzieżowej Rady Sprawiedliwości przy Ministrze Sprawiedliwości oraz wielokrotny Poseł Parlamentu Młodych RP. Zaangażowany również w działalność akademicko-naukową, m.in. jako Prezes Koła Naukowego Historii Prawa „Iustitias Vestras Iudicabo” oraz Wiceprezes Koła Nauk o Państwie i Prawie „Pro Patria”.</p>                </div>
            </div>
            </div>
            </div>
          </div>
      </div>
    </div>
  </div>
  <div class="accordion-item" style="width: 100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="z-index: 0;">
        <h2>Skarbnik</h2>
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse">
      <div class="accordion-body">
        <div class="card mb-3" style="max-width: 100%;">
          <div class="row g-0">
            <div class="col-md-3">
              <div class="image-container">
                <img src="/resources/basinski.webp?v=2" class="img-fluid rounded-start" alt="basinski" loading="lazy">
              </div>
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h4 class="card-title">Bartosz Basiński</h4>
                <p class="card-text" style="font-size: 1.2rem;">Skarbnik Zarządu Głównego Stowarzyszenia KoLiber, student ostatniego roku stosunków międzynarodowych na Uniwersytecie im. Adama Mickiewicza w Poznaniu. Od lat zaangażowany w środowisko akademickie i działalność organizacji pozarządowych, między innymi wspierając Regionalny Ośrodek Debaty Międzynarodowej w Poznaniu. Pełnił służbę wolontariacką na Warsaw Security Forum i European Defence Days. Absolwent Akademii Liderów Rzeczypospolitej, Akademii Liderów Dyplomacji oraz Ligi NGO's. Regularnie uczestniczy w konferencjach naukowych, wygłaszając referaty z zakresu konfliktów międzynarodowych i bezpieczeństwa zbiorowego.</p>
              </div>
            </div>          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-item" style="width: 100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="z-index: 0;">
        <h2>Sekretarz</h2>
      </button>
    </h2>
    <div id="collapseFour" class="accordion-collapse collapse">
      <div class="accordion-body">
        <div class="card mb-3" style="max-width: 100%;">
          <div class="row g-0">
            <div class="col-md-3">
              <div class="image-container" style="max-width: 300px; min-width: 240px;">
                <img src="/resources/stachowiak.webp?v=2" class="img-fluid rounded-start" alt="stachowiak" loading="lazy">
              </div>
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h4 class="card-title">Szymon Stachowiak</h4>
                <p class="card-text" style="font-size: 1.2rem;">Radny Miasta Płocka, Przewodniczący Klubu Radnych Prawa i Sprawiedliwości. Prezes NowaPL.org. Organizator największego konserwatywnego kongresu młodych w Polsce - ECR Kongres Młodych. W latach 2021-2023 Szef Gabinetu Politycznego Ministra Sportu i Turystyki. Współautor ustawy o zakazie sprzedaży napojów energetycznych dzieciom i młodzieży do lat 18 oraz projektu „Sportowe Talenty”.</p>
              </div>
            </div>          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-item" style="width: 100%;">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" style="z-index: 0;">
        <h2>Rzecznik prasowy</h2>
      </button>
    </h2>
    <div id="collapseFive" class="accordion-collapse collapse">
      <div class="accordion-body">
        <div class="card mb-3" style="max-width: 100%;">
          <div class="row g-0">
            <div class="col-md-3">
              <div class="image-container" style="max-width: 300px; min-width: 240px;">
                <img src="/resources/przytula.webp?" class="img-fluid rounded-start" alt="Hubert Przytuła" loading="lazy">
              </div>
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h4 class="card-title">Hubert Przytuła</h4>
                
                <p class="card-text" style="font-size: 1.2rem;">Polityk młodego pokolenia, publicysta i filantrop pochodzący z Zachodniej Małopolski. Związany z Konfederacją i partią Nowa Nadzieja, w latach 2023–2025 pełnił funkcję wiceprezesa okręgu chrzanowskiego Młodych dla Wolności, a od kwietnia 2025 roku stoi na jego czele jako prezes. Od 2024 r. sekretarz krakowskiego oddziału Stowarzyszenia KoLiber. Parlamentarzysta Parlamentu Młodych RP VII i VIII kadencji, w których to stał na czele największych klubów zrzeszających parlamentarzystów o poglądach prawicowych. W przeszłości radny Młodzieżowej Rady Powiatu Oświęcimskiego oraz członek Rady Młodzieżowej przy Parlamentarnym Zespole ds. Młodzieży.
Asystent posła Przemysława Wiplera a także asystent społeczny posła Konrada Berkowicza. Od 2025 roku współpracuje z Fundacją Dobry Rząd, gdzie wspiera inicjatywy na rzecz poprawy jakości polskiego życia publicznego.
Od lipca 2025 r. dyrektor Biura Poselskiego Posłów Ryszarda Wilka i Bronisława Foltyna w Oświęcimiu. 
Zawodowo związany z branżą mediów społecznościowych, grafiki i montażu wideo. Prywatnie — pasjonat historii, prawa i sztuki.</p>
                    <div style="margin-top 10px;">
          <div class="email-container">
        <img src="/resources/email.webp" alt="Kopiuj e-mail" style="width: 50px; height: 50px; cursor: pointer;" id="emailIcon" loading="lazy">
        <p id="card-text1">hubert.przytula@koliber.org</p>
    </div>
              </div>
            </div>          </div>
        </div>
      </div>
    </div>
  </div>
<div class="center-container" style="display: none;">
  <div class="button-container">
    <a href="./konto/panel.php">
      <img src="/resources/user.webp" alt="login_page" class="button-icon">
      <span class="button-text">ZALOGUJ SIĘ JAKO CZŁONEK</span>
    </a>
  </div>
</div>
</div><script type="text/javascript">
$(document).ready(function(){
  function setMapSize() {
    var newSize;
    if (window.innerWidth < 768) {
        newSize = 320;
    } else if (window.innerWidth < 1150) {
        newSize = 430;
    } else  if (window.innerWidth > 1150){
        newSize = 540;
    }
  // CSSMap;
  $("#map-poland").CSSMap({
  "size": newSize,
  "tooltips": "floating-middle-bottom",
  "responsive": "none",
  "tapOnce": true,
  "mobileSupport": true,
  "visibleList": {
    "enable": false,
    "listPosition": "right",
    "columns": 2,
    "columnsGap": 5,
    "columnWidth": 120
  },
  "agentsList": {
    "enable": true,
    "agentsListId": "#demo-agents",
    "agentsListSpeed": 0,
    "agentsListOnHover": false,
    "agentsPosition": "bottom"
  },
  "pins": {
    "enable": false,
    "pinsId": "#demo-markers",
    "mapSize": 540,
    "markerPosition": "middle",
    "tooltipPosition": "right",
    "tooltipOnClick": false,
    "clickableRegions": true
  }
});
// END OF THE CSSMap;
  }
  setMapSize();
});
</script>
</div>
</div>
<!-- SEKCJA HONOROWI -->
  <!-- CZLONKOWIE HONOROWI SEKCJA -->
<div id="main-mecenasi" style="width: 100%; height: auto; margin:0px;">
         <div class="services-section row">
             <div class="services col-lg-12 col-md-12" id="1polowa">
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/michalkiewicz.webp" alt="michalkiewicz" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/michalkiewicz.webp" alt="michalkiewicz" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Stanisław Michalkiewicz</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/kluska.webp" alt="kluska" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/kluska.webp" alt="kluska" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Roman Kluska</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/liechtenstein.webp" alt="liechtenstein" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/liechtenstein.webp" alt="liechtenstein" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Alojzy Liechtenstein</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/laar.webp" alt="laar" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/laar.webp" alt="laar" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Mart Laar</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/warzecha.webp" alt="warzecha" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/warzecha.webp" alt="warzecha" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Łukasz Warzecha</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/gwiazdowski.webp" alt="gwiazdowski" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/gwiazdowski.webp" alt="gwiazdowski" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Robert Gwiazdowski</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/gniadek.webp" alt="gniadek" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/gniadek.webp" alt="gniadek" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">ks. Jacek Gniadek</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/ziemkiewicz.webp" alt="ziemkiewicz" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/ziemkiewicz.webp" alt="ziemkiewicz" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Rafał Ziemkiewicz</div>
                 </div>
               </div>
             </div>
           </div>
           <div class="services-heading">
           <p>Członkowie honorowi KoLibra</p>
           </div>
           <div class="services col-lg-12 col-md-12" id="2polowa" >
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                 <img src="./resources/honorowi/rybinski.webp" alt="rybinski" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/rybinski.webp" alt="rybinski" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Maciej Rybiński</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/romanczuk.webp" alt="romanczuk" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/romanczuk.webp" alt="romanczuk" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Jarosław Romańczuk</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                 <img src="./resources/honorowi/winiecki.webp" alt="winiecki" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/winiecki.webp" alt="winiecki" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Jan Winiecki</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/lorenc.webp" alt="lorenc" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/lorenc.webp" alt="lorenc" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Michał Lorenc</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/wildstein.webp" alt="wildstein" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/wildstein.webp" alt="wildstein" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Bronisław Wildstein</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/mordasewicz.webp" alt="mordasewicz" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/mordasewicz.webp" alt="mordasewicz" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Jeremi Mordasewicz</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/kancelarczyk.webp" alt="kancelarczyk" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/kancelarczyk.webp" alt="kancelarczyk" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">ks. Tomasz Kancelarczyk</div>
                 </div>
               </div>
             </div>
             <div class="services-cell" onclick="flipCard(this)">
               <div class="flipper">
                 <div class="front">
                   <img src="./resources/honorowi/pospieszalski.webp" alt="pospieszalski" class="services-cell_img" loading="lazy">
                 </div>
                 <div class="back">
                   <img src="./resources/honorowi/pospieszalski.webp" alt="pospieszalski" class="services-cell_img" loading="lazy">
                   <div class="services-cell_text">Jan Pospieszalski</div>
                 </div>
               </div>
             </div>
           </div>
           </div>
       </div> </main>
  <!-- STOPKA SEKCJA -->
  <footer class="footer">
  	 <div class="container">
  	 	<div class="row" style="display:flex;">
  	 		<div class="footer-col">
  	 			<h3>Publikacje</h3>
  	 			<ul>
  	 				<li><a href="#aktualnosci">Aktualności</a></li>
  	 				<li><a href="./publikacje">Publikacje</a></li>
  	 				<li><a href="./projekty">Projekty</a></li>
  	 				<li><a href="./analizy">Centrum Analiz</a></li>
  	 			</ul>
  	 		</div>
  	 		<div class="footer-col">
  	 			<h3>O nas</h3>
  	 			<ul>
  	 				<li><a href="#idee">Idee</a></li>
  	 				<li><a href="./statut">Statut</a></li>
  	 				<li><a href="#struktury">Struktury</a></li>
  	 			</ul>
  	 		</div>
  	 		<div class="footer-col">
  	 			<h3>Formalności</h3>
  	 			<ul>
  	 				<li><a href="./politykaprywatnosci">Polityka Prywatności</a></li>
  	 				<li><a href="./regulamindarowizn">Regulamin Darowizn</a></li>
  	 			</ul>
  	 		</div>
  	 		<div class="footer-col">
  	 			<h3>Obserwuj nasze media</h3>
  	 			<div class="social-links">
  	 				<a href="https://www.facebook.com/StowKoLiber"><i class="fab fa-facebook-f"></i></a>
  	 				<a href="https://twitter.com/KoLiber_org"><i class="fab fa-twitter"></i></a>
  	 				<a href="https://www.instagram.com/koliber_org/"><i class="fab fa-instagram"></i></a>
  	 				<a href="https://www.youtube.com/@KoLiberTV"><i class="fab fa-youtube"></i></a>
					<a href="https://www.tiktok.com/@stowarzyszeniekoliber"><i class="fab fa-tiktok"></i></a>
  	 			</div>
  	 		</div>
  	 	</div>
  	 </div>
  	 <h3 style="text-align: center; color: white; padding-top: 45px;">Kontakt:</h3>
  	 <h3 style="text-align: center; color: white;">koliber@koliber.org</h3>
     <p style="text-align: center; color: white; padding-top: 45px;"> SC 2024 | © 1999-2024 Stowarzyszenie KoLiber, Al. Zjednoczenia 50/U1, 01-801 Warszawa. </p>
  </footer>
  <div id="dhtmlgoodies_marquee">
  <div class="textObj"><span class="highlighted">1000 LAT KRÓLESTWA POLSKIEGO</span> Wybudujmy Chrobremu pomnik na tysiąclecie koronacji! - strona <a href="https://millennium.koliber.org">millennium.koliber.org</a></div>
      <div class="textObj"><span class="highlighted">UWAGA</span> Zachęcamy do wzięcia udziału w akcji "Goń z pomnika bolszewika" - strona <a href="https://gonbolszewika.pl">gonbolszewika.pl</a></div>
    </div>
    
  </body>

    <script type="text/javascript">
        initMarquee();
    </script>

  <script src="https://apis.google.com/js/api.js"></script>
  <script src="https://kit.fontawesome.com/f37e86c547.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
    <!-- PLIKI COOKIE TYMCZASOWE -->

    <script>
        document.cookie = 'CONSENT=.youtube.com/; SameSite=None; Secure';
        document.cookie = 'PREF=.youtube.com/; SameSite=None; Secure';
        document.cookie = 'CONSENT=.google.com/; SameSite=None; Secure';
        document.cookie = 'SID=.google.com/; SameSite=None; Secure';
        document.cookie = '__Secure-1PSID=.google.com/; SameSite=None; Secure';
        document.cookie = 'HSID=.google.com/; SameSite=None; Secure';
        document.cookie = 'SSID=.google.com/; SameSite=None; Secure';
        document.cookie = 'APISID=.google.com/; SameSite=None; Secure';
        document.cookie = 'SAPISID=.google.com/; SameSite=None; Secure';
        document.cookie = '__Secure-1PAPISID=.google.com/; SameSite=None; Secure';
        document.cookie = '1P_JAR=.google.com/; SameSite=None; Secure';
        document.cookie = '__Secure-1PSIDTS=.google.com/; SameSite=None; Secure';
        document.cookie = 'SIDCC=.google.com/; SameSite=None; Secure';
        document.cookie = '__Secure-1PSIDCC=.google.com/; SameSite=None; Secure';
    </script>    <!-- Strona główna KoLiber - wykonał Szymon Celiński -->
</html>