html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--main-font);
  font-size: 1.4rem;
  color: #000;
  overflow-x: hidden;
  transition: padding .5s linear;
  background: #fff;
  -webkit-text-size-adjust: none;
  font-size-adjust: none;
}

* {
  box-sizing: border-box;
}

header, section, footer, aside, nav, main, article, figure {
  display: block;
  width: 100%;
}
h1, h2, h3, h4, h5, h6 {
  margin: .175em 0;
}

a[target="_blank"]::after {
  content: url(../grafika/link_zewn.png);
  position: absolute;
  right: -16px;
  top: 0;
  opacity: 0;
  transition: opacity .3s;
}

a[target="_blank"]:hover::after {
  opacity: 1;
}

.fas span,
.szukaj-gora label,
.animacja-slider-tresc,
.strona-tresc-dzial,
article > h2.informacje-tresc-dzial,
.h1.glowna-tytul {
  display: none;
}

.hidden {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}

.strona {
  width: clamp(320px, 100%, 100%);
  margin: 0 auto;
  overflow-x: hidden;
}

.header_tlo, .header_tlo_p {
  position: absolute;
  top: 0;
  width: 100%;
  height: 10rem;
  z-index: 11;
  display: flex;
  flex-direction: column;
  margin: 0 0;
}
.header {
  position: relative;
  z-index: 2;
  width: clamp(32rem, 100%, 123.2rem);
  height: fit-content;
  display: flex;
  align-items: center;
  gap: 0 4.8rem;
  margin: 0 auto;
  transition: width 0.3s ease-in-out;
}
.logo_t {
  flex: 0 1 60vw;
  max-width: 68.7rem;
  height: 100%;
  padding: 0 0 0 0;
  font-family: var(--logo-font);
  font-size: var(--logo-font-size);
  line-height: var(--logo-line-height);
  font-weight: var(--logo-font-weight);
  color: var(--logo-color) !important;
  text-decoration: none;
  text-decoration-color: transparent;
  padding: 1.6rem 0 0 1.6rem;
  text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989992px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756802px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279415px 0px;
}
.logo {
  position: relative;
  z-index: 10;
  width: clamp(3.6rem, 100%, 13.5rem);
  min-height: 9.6rem;
  height: 100%;
  padding: 0 0 0 0;
  font-family: var(--logo-font);
  font-size: 0 !important;
  line-height: var(--logo-line-height);
  font-weight: var(--logo-font-weight);
  color: var(--logo-color) !important;
  text-decoration-color: transparent;
  display: flex;
  align-items: center;
  background: url(../grafika/logo.png) left center no-repeat;
}
.linki_gora {
  flex: 0 0 34.3rem;
  height: 9.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 2.4rem;
  padding: 0 0 2.4rem 0;
  margin: 0;
  background: url(../grafika/ikonki.png) left center no-repeat;
  background-size: cover;
}
.linki_gora * {
  position: relative;
}
.linki_gora > a:first-child {
  flex: 0 0 6rem;
  height: 2.6rem;
  font-size: 0 !important;
  background: url(../grafika/bip.png) left center no-repeat;
}
.linki_gora > a:nth-child(2) {
  font-size: 0 !important;
}
.linki_gora > a:nth-child(2)::before {
  content: "\f09e";
  font-family: "Font Awesome 5 Free";
  font-size: 3rem;
  color: #fff;
  margin: -1px 0px 0px 1px;
}
.linki_gora > a:nth-child(3) {
  font-size: 0 !important;
}
.linki_gora > a:nth-child(3)::before {
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-size: 3rem;
  color: #fff;
  margin: -1px 0px 0px 1px;
}

.logo:hover,
.logo_t:hover,
.linki_gora > a:hover,
.animacja-slider-tytul a:hover,
.stopka .blok .kolumna a:hover,
.szukaj-gora-ikona:hover a {
  opacity: .55;
}

@media (min-width: 320px) and (max-width: 1023px) {
  body {
    background: #fff;
  }
  .header {
    display: none;
  }
  .header_tlo, .header_tlo_p {
    position: fixed;
    height: 5rem;
  }
  .logo,
  .herb,
  .szukaj-gora,
  .animacja_tlo,
  .animacja,
  .animacja-slider,
  .header-pasek div {
    display: none !important;
  }

  .header_tlo .header .ulatwienia-wcag,
  .header_tlo_p .header .ulatwienia-wcag,
  .header .szukaj-gora-ikona {
    display: flex;
    flex: 0 0 48px;
    max-width: 48px;
    height: 48px;
  }
  .linki_gora {
    flex: 0 0 106px;
    display: flex;
    align-items: center;
    gap: 0 1.6rem;
    margin: 0 auto;
  }
  .szukaj-gora-ikona {
    flex: 0 0 25px;
    height: 25px;
  }

  .szukaj-gora-ikona a {
    background-size: 50%;
  }

  .main_srodek,
  .main_srodek_start {
    padding: 0;
    margin: 0 auto;
    background: none;
  }

  .srodek_tlo,
  .main_srodek .strona-tresc {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
  }
  main .main_srodek_p .strona-tresc {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    border: none;
  }
  .main_srodek_p .strona-tresc > article {
    padding: 24px 16px;
  }
}

@media (min-width: 320px) and (max-width: 1023px) {
  .main_srodek,
  .main_srodek_p {
    padding: 0;
    margin: 0 auto !important;
    background: none;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  main .main_srodek_p .strona-tresc {
    padding: 0 1.6rem;
  }
}

.szukaj-gora-ikona {
  flex: 0 0 3.1rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration-color: transparent;
}
.szukaj-gora-ikona a {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../grafika/wyszukiwarka.png) center no-repeat;
}

.szukaj-gora-ikona a i,
.szukaj-gora button i,
.szukaj-gora button i span {
  font-size: 0 !important;
  color: #000;
}

.szukaj-gora {
  flex: 0 1 312px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  margin-bottom: 16px;
  border-top: 1px solid #aec91f;
  border-bottom: 1px solid #aec91f;
}

.szukaj-gora form {
  flex: 0 1 344px;
  display: flex;
}

.szukaj-gora input {
  font-family: var(--main-font);
  font-size: 1.4rem;
  font-weight: 400;
  padding: 11px 8px 10px 16px;
  border: none;
  width: 100%;
  background: none;
}

.szukaj-gora input::placeholder {
  opacity: 1;
  color: #5b5b5b;
}

.szukaj-gora button {
  width: 40px;
  height: 40px;
  margin: 0 8px 0 0;
  background: url(../grafika/wyszukiwarka.png) center no-repeat;
  border: none;
}

.szukaj-gora button:hover {
  opacity: .75;
  cursor: pointer;
}

.wiersz_animacja {
  position: relative;
  width: clamp(32rem, 100%, 100%);
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.animacja_tlo {
  width: clamp(36rem, 100%, 162rem);
  height: 40vw;
  max-height: 63rem;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: flex;
}

.animacja-slider,
.animacja-slider .slick-list,
.animacja-slider .slick-list .slick-track,
.animacja-slider .slick-list .slick-track > div > div {
  height: 100%;
}

.animacja {
  position: relative;
  z-index: 1;
  flex: 1 1;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
.animacja::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../grafika/animacja_maska.png) center no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.animacja-slider-slide {
  width: 100%;
  height: 120%;
  background-position: center top;
  background-size: cover;
  display: flex !important;
}

@media (min-width: 320px) and (max-width: 1232px) {
  .animacja_g1, .animacja_g2, .animacja_g3 {
    display: none;
  }
  .animacja-slider-slide {
    height: 75vw;
    max-height: 580px;
    max-width: 100%;
  }
}

.animacja-slider-tytul {
  display: none;
  font-family: var(--tytul-font);
  font-size: 48px;
  line-height: 52px;
  font-weight: 400;
  color: #fff;
}
.animacja-slider-tytul a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 16px;
  width: 288px;
  font-size: 18px;
  font-family: 'Barlow', sans-serif;
  background: #fff;
  color: #000 !important;
  text-decoration-color: transparent;
  margin-top: 32px;
  padding: 6px 0;
  border-radius: 40px;
}

.animacja-slider .slick-next,
.animacja-slider .slick-prev {
  opacity: 0;
  top: 50%;
  height: 4.8rem;
  z-index: 9;
  background: rgba(0, 0, 0, .8);
}

.animacja-slider .slick-next {
  right: calc((100% - 162rem) / 2 + 19.3rem);
  width: 3.2rem;
  background: rgba(0,0,0,0.8) url(../grafika/animacja_n.png);
  background-position: center;
  background-repeat: no-repeat;
}

.animacja-slider .slick-prev {
  left: calc((100% - 162rem) / 2 + 19.3rem);
  width: 3.2rem;
  background: rgba(0,0,0,0.8) url(../grafika/animacja_p.png);
  background-position: center;
  background-repeat: no-repeat;
}

.animacja:hover .slick-next,
.animacja:hover .slick-prev,
.animacja-slider .slick-next:focus,
.animacja-slider .slick-prev:focus {
  opacity: 1;
}

.animacja-slider .slick-next:focus,
.animacja-slider .slick-prev:focus {
  outline: 2px outset #ff0000;
}

.animacja-slider .slick-prev:before,
.animacja-slider .slick-next:before {
  display: none;
}

.animacja-slider .slick-dots {
  display: none !important;
  bottom: 16px !important;
}

.animacja-slider,
.slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}


.animacja-slider-buttons {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(32rem, 100%, 123.2rem);
  height: 100%;
  margin: 0 auto;
}
.animacja-slider-buttons > * {
  opacity: 0;
}

.animacja:hover .animacja-slider-buttons > *,
.animacja > .animacja-slider-buttons > *:focus {
  opacity: 1;
}

#animacja-pause,
#animacja-play {
  position: absolute;
  z-index: 10;
  left: 0rem;
  bottom: 8rem;
  border: none;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 1.4rem;
  width: fit-content;
  height: 4rem;
  padding: 0 1.6rem;
  cursor: pointer;
}

#animacja-pause:before,
#animacja-play:before {
  font-family: "Font Awesome 5 Free";
  font-size: 1.4rem;
  color: #fff;
  margin: 0 0.8rem 0 0;
}

#animacja-pause:before {
  content: "\f04c";
}

#animacja-play:before {
  content: "\f04b";
}

#animacja-play {
  display: none;
}

#animacja-pause:hover, #animacja-play:hover, .animacja-slider .slick-next:hover, .animacja-slider .slick-prev:hover {
  opacity: .75;
}

@media (min-width: 320px) and (max-width: 1232px) {
  .animacja-slider .slick-next {
    right: 16px;
  }

  .animacja-slider .slick-prev,
  #animacja-pause,
  #animacja-play {
    left: 16px;
  }
}

main {
  width: 100%;
  margin: 0 auto;
}

.main_srodek,
.main_srodek_p {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 4rem auto 0;
}
.srodek_tlo {
  width: clamp(32rem, 100%, 100%);
}
.wiersz_tresc {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0 1.6rem;
  width: 100%;
  margin: 0 0 22.4rem;
}
.wiersz_tresc .tresc_grafika_1 {
  position: absolute;
  top: 14.8rem;
  left: calc((100vw - 123.2rem) / 2 - 24.2rem - 9.2rem);
  width: 24.2rem;
  height: 71.4rem;
  background: url(../grafika/aktualnosci.png) center no-repeat;
  background-size: cover;
}

.wiersz_tresc .tresc_grafika_2 {
  position: absolute;
  top: 8rem;
  left: calc(100vw - 25.1rem);
  width: 25.1rem;
  height: 75.5rem;
  background: url(../grafika/aktualnosci_2.png) center no-repeat;
  background-size: cover;
}
@media (max-width: 1900px) {
  .wiersz_tresc .tresc_grafika_1 {
    left: calc(2.4rem - (1900px - 100vw) / 2);
  }
  .wiersz_tresc .tresc_grafika_2 {
    left: calc(100vw - 25.1rem + (1900px - 100vw) / 2);    
  }
}


.main_srodek_p .wiersz_tresc {
  margin: 0;
}
.strona-tresc {
  order: 1;
  position: relative;
  flex: 0 1 81.6rem;
  width: clamp(32rem, 60%, 81.6rem);
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.main_srodek_p .strona-tresc {
  flex: 0 1 123.2rem;
  width: clamp(32rem, 60%, 123.2rem);
  padding: 0 0;
  margin: 0 auto 0;
  overflow: hidden;
}
.strona-tresc .tresc img {
  max-width: 100%;
  height: auto;
}

.mapa-serwisu-poziom-1 {
  flex: 1 1 100%;
  padding-left: 20px;
  margin: 24px 40px 16px;
}

.mapa-serwisu-poziom-1 li,
.mapa-serwisu-poziom-1 a {
  font-size: 1.8rem;
  line-height: 2.2rem;
}

.mapa-serwisu-poziom-1 ul {
  padding-left: 16px;
}
.mapa {
  font-size: 0 !important;
  width: 100%;
  height: 50vw;
  max-height: 40rem;
  border: none;
}
@media (min-width: 320px) and (max-width: 1023px) {
  .main_srodek_p .wiersz_tresc {
    margin: 0 0 6rem;
  }
  .wiersz_tresc {
    margin: 0 0 10rem;
  }
  .wiersz_tresc::before {
    top: -5rem;
    height: 5rem;
  }
  .wiersz_tresc::after {
    bottom: -5rem;
    height: 5rem;
}
}

footer {
  overflow: hidden;
  width: 100%;
  padding: 4.8rem 0 0;
  margin: 0;
}

.stopka {
  position: relative;
  z-index: 2;
  font-family: var(--stopka-kolumna-tresc-font);
  font-size: var(--stopka-kolumna-tresc-font-size);
  line-height: var(--stopka-kolumna-tresc-line-height);
  font-weight: var(--stopka-kolumna-tresc-font-weight);
  color: var(--stopka-kolumna-tresc-color);
  padding: 8.8rem 0 6.4rem;
  background: #875281;
}
.stopka .stopka_grafika_1 {
	position: absolute;
	top: -2rem;
	left: calc((100vw - 123.2rem) / 2 - 9.7rem);
	width: 10.5rem;
	height: 38.3rem;
	background: url(../grafika/stopka.png) center no-repeat;
	background-size: cover;
}
.stopka .stopka_grafika_2 {
	position: absolute;
	top: -0.8rem;
	right: calc((100vw - 123.2rem) / 2 + 4rem);
	width: 6.4rem;
	height: 9rem;
	background: url(../grafika/stopka_2.png) center no-repeat;
	background-size: cover;
}

.stopka .blok {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem 5.4rem;
  width: clamp(32rem, 100%, 123.2rem);
  margin: 0 auto;
}

.stopka .blok .kolumna {
  flex: 0 1 calc(100% / 3 - 3.6rem);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.stopka-kolumna-tytul {
  font-family: var(--stopka-kolumna-tytul-font);
  font-size: var(--stopka-kolumna-tytul-font-size);
  line-height: var(--stopka-kolumna-tytul-line-height);
  font-weight: var(--stopka-kolumna-tytul-font-weight);
  color: var(--stopka-kolumna-tytul-color);
  display: flex;
  padding: 0;
  margin: 0 0 2.4rem;
}

.stopka .blok .kolumna ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 4px;
  list-style: none;
  padding: 0;
}

.stopka .blok .kolumna ul > li {
  flex: 0 1 calc(100% - 32px);
}

.stopka .blok .kolumna ul > li:has(img) {
  flex: 0 0 20px;
  width: 20px;
  max-width: 20px;
  height: 24px;
  display: flex;
  align-items: center;
  margin: 0;
}

.stopka .blok .kolumna a {
  color: #fff;
  text-decoration-color: transparent;
}

@media (min-width: 320px) and (max-width: 1023px) {
  footer {
    padding: 5.6rem 0 0;
    margin: 0 auto;
  }
  .stopka {
    padding: 4rem 0 0;
  }
  .stopka .blok {
    justify-content: center;
    gap: 24px;
    padding: 0 !important;
  }
  .stopka .blok .kolumna:nth-child(1) > span {
    text-align: center;
  }
  .stopka .blok .kolumna ul > li:has(img) {
    display: none;
  }
}

@media (min-width: 320px) and (max-width: 1023px) {
  .kolumna * {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .stopka .kolumna {
    flex: 1 1 100% !important;
    max-width: 356px !important;
    margin: 0px 16px !important;
    padding: 0 !important;
    background: none !important;
  }

  .stopka .blok .kolumna ul > li {
    font-size: 1.6rem;
  }
  .tresc_grafika_1, .tresc_grafika_2, .wydarzenia_grafika_1, .wydarzenia_grafika_2, .moduly_grafika_1, .moduly_grafika_2, .stopka_grafika_1, .stopka_grafika_2 {
    display: none;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .stopka .kolumna {
    flex: 1 1 100% !important;
    max-width: 500px !important;
    margin: 0 1.6rem !important;
    padding: 0 !important;
    background: none !important;
  }
}