* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #1a1a1a;
  height: 100%;
}

/*Pasek Nawigacyjny */
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #5271ff;
  border-bottom: 2px solid white;
  position: fixed;
  top: 0;
  width: 100%;
}

/*Animacja*/
#obecna {
  display: inline-block;
  vertical-align: top;
  padding-bottom: 20px;
  position: relative;
  text-align: center;
  line-height: 24px;
  color: #fff;
}

/*Animacja*/
#obecna::before {
  animation: bounceInLeft;
  animation-duration: 1s;
  display: inline-block;
  transform: translateX(-0%);
  border-radius: 100%;
  position: absolute;
  background: white;
  bottom: 10px;
  height: 5px;
  content: "";
  width: 5px;
  left: 50%;
}

/*Tekst Prohipo*/
.logo {
  color: white;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links li {
  list-style: none;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 85%;
  margin-top: 15px;
}
.nav-links a {
  color: white;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}
/*Przycisk Nawigacyjny dla telefonu*/
.lines {
  display: none;
  cursor: pointer;
}

/*Przycisk Nawigacyjny dla telefonu*/
.lines div {
  width: 25px;
  height: 5px;
  background-color: white;
  margin: 5px;
  height: 3px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

/*Div na całą stronę*/
.wrapper {
  position: relative;
  height: 100%;
}
.wrapper2 {
  margin-top: 100px;
}

/*Przycisk na telefon*/
.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
/*Przycisk na telefon*/
.toggle .line2 {
  opacity: 0;
}
/*Przycisk na telefon*/
.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}
/*Zdjęcie Logo*/
.img {
  width: 35%;
  height: 35%;
  margin-top: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  border: 2px solid white;
}
/*Tekst pod zdjęciem*/
.KRS {
  text-align: center;
  color: white;
}

.footer {
  color: white;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.text_size_buttons {
  color: white;
}

.text_size_btn {
  background-color: gray;
  border-radius: 7px;
  padding: 0 10px;
  cursor: pointer;
}

.text_size_btn.active {
  background-color: #444;
}

.text_size_btn:nth-child(2) {
  font-size: 1.25em;
}

.text_size_btn:nth-child(3) {
  font-size: 1.5em;
}

/*Animacja tekstu*/
#text {
  transition-duration: 0.25s;
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.pudelko_naglowka {
  background: #5271ff;
  font-weight: 400;
  width: 60%;
  letter-spacing: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 25px;
  border-radius: 20px 50px;
  color: white;
  border-bottom: 3px solid white;
}

.tekst_naglowka {
  padding: 20px;
  box-sizing: border-box;
}

.pudelko_tekstu {
  background: #5271ff;
  height: auto;
  font-weight: 400;
  width: 60%;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  margin-top: 20px;
  color: white;
  border-bottom: 3px solid white;
  border-radius: 15px 50px;
  padding: 30px;
}

.herb {
  width: 20%;
  height: auto;
  margin-top: 30px;
  margin-bottom: 5px;
  transition: 0.5s;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.FIO {
  width: 60%;
  height: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  transition: 0.5s;
  border-radius: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.FIO:hover {
  opacity: 1;
}

.plakatprojekt {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 30px;
  border: 3px solid black;
}

.logaprojektu_slideshow {
  display: flex;
  justify-content: center;
  margin-left: 30px;
  margin-right: 30px;
}

.osrodekzdjeciadiv {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.osrodekzdjecia {
  display: block;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid white;
  border-radius: 30px;
}

.footer {
  color: white;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.tutaj {
  display: flex;
  justify-content: center;
}
#album_zdjecia {
  width: 30%;
  height: auto;
  margin: 30px;
  border: 2px solid white;
  border-radius: 15px 50px;
}
.album {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 0px;
}
.dokumenty {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 65%;
  border-radius: 30px;
}
.pudlomenu {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

a {
  text-decoration: none;
  color: white;
}

.tekst_sprawozdanie {
  margin: 20px;
}

.box {
  background: #5271ff;
  height: auto;
  width: 60%;
  letter-spacing: 1px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  margin-top: 0px;
  color: white;
  border-bottom: 3px solid white;
  border-radius: 15px 50px;
  padding: 20px;
  padding-bottom: 30px;
}

.box2 {
  background: #5271ff;
  color: white;
  height: auto;
  text-align: center;
  font-weight: bold;
  width: 60%;
  letter-spacing: 1px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  margin-top: 40px;
  border-bottom: 3px solid white;
  border-radius: 15px 50px;
  padding: 20px;
}

.content {
  text-align: center;
  margin-top: 0px;
  color: white;
}

.content1 {
  text-align: center;
  margin-top: 25px;
  font-size: 1.5em;
  margin-bottom: 25px;
  color: white;
}

.content2 {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
  transition: 0.5s;
}
/*
WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON WERSJA STRONY NA TELEFON 
*/
@media screen and (max-width: 1000px) {
  .wrapper {
    overflow-x: hidden;
    margin-top: 50px !important;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #5271ff;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    margin-top: 0px !important;
  }

  .nav-active {
    transform: translateX(0%);
  }

  .nav-links li {
    opacity: 0;
  }
  .lines {
    display: block;
  }

  .img {
    min-width: 70%;
    min-height: 70%;
  }

  .pudelko_naglowka {
    min-width: 90%;
    margin-top: 60px !important;
  }
  .pudelko_tekstu {
    min-width: 90%;
  }

  .mySlides {
    flex-direction: column;
    gap: 10px;
  }

  .logaprojektu {
    flex-direction: column;
  }

  .plakatprojekt {
    min-width: 100%;
  }

  .osrodekzdjeciadiv {
    flex-direction: column;
  }

  .osrodekzdjecia {
    margin: 10px;
    min-width: 100%;
  }

  section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .body {
    font-size: 12px;
  }
  .tekst_pudelko_tekstu {
    min-width: 0% !important;
  }

  .FIO {
    min-width: 100%;
  }
  #album_zdjecia {
    min-width: 90%;
    height: auto;
    margin: 10px !important;
    border: 2px solid white;
  }
  .album {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 0px;
  }
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow Slideshow 

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slideshow_buttons {
  display: flex;
  justify-content: center;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.active,
.dot:hover {
  background-color: #717171;
}