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 url(../grafika/tlo.jpg) left bottom no-repeat;
  background-size: cover;
  -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;
}

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

.header_tlo, .header_tlo_p {
  width: 100%;
  z-index: 11;
  display: flex;
  margin: 0;
}

.header {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1232px;
  height: 72px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.logo {
  position: relative;
  z-index: 10;
  height: 100%;
  padding: 0 24px 0 24px;
  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-color: transparent;
  display: flex;
  align-items: center;
}
.linki_gora {
  flex: 0 0 128px;
  display: flex;
  align-items: center;
  margin: 0px 24px 0px auto;
}

.logo:hover,
.header a:hover,
.linki_gora > a:hover span,
.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 {
    height: 40px !important;
    padding: 0;
    margin: 16px 0 !important;
    gap: 0px 16px;
    justify-content: center;
  }

  .logo,
  .szukaj-gora,
  .animacja_tlo,
  .animacja,
  .animacja-slider,
  .menu_lewe {
    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;
    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 16px;
    border: none;
  }
  .main_srodek_p .strona-tresc > article {
    padding: 24px 16px;
  }
}

.szukaj-gora-ikona {
  flex: 0 1 64px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration-color: transparent;
}
.szukaj-gora-ikona::before, .szukaj-gora-ikona::after {
  content: "";
  width: 1px;
  height: 16px;
  background: #dbe6ee;
}
.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: 32px;
  border-top: 1px solid #c2dfbf;
  border-bottom: 1px solid #c2dfbf;
}

.szukaj-gora form {
  flex: 0 1 312px;
  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;
}

.animacja_tlo {
  width: clamp(360px, 100%, 1232px);
  height: 26vw;
  max-height: 360px;
  position: relative;
  z-index: 1;
  margin: 0 auto 16px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
}
.animacja_tlo .lewy_blok_tlo {
  flex: 0 1 250px;
  background: #ffefcf;
  display: flex;
  align-items: center;
  justify-content: center;
}
.animacja_tlo .lewy_blok_tlo .lewy_blok {
  flex: 1 1;
  height: 20vw;
  max-height: 169px;
  margin: 0px 24px;
  font-size: 0rem !important;
  background: url(../grafika/herb.png) center center no-repeat;
  background-size: contain;
}
.animacja_tlo .prawy_blok_tlo {
  flex: 0 1 250px;
  background: #ffefcf;
  display: flex;
  align-items: center;
  justify-content: center;
}
.animacja_tlo .prawy_blok_tlo .prawy_blok {
  flex: 1 1;
  height: 20vw;
  max-height: 70px;
  margin: 0px 24px;
  font-size: 0rem !important;
  background: url(../grafika/logo.png) center center no-repeat;
  background-size: contain;
}
.animacja_tlo .lewy_blok_tlo .lewy_blok:hover, .animacja_tlo .prawy_blok_tlo .prawy_blok:hover {
  opacity: .65;
}

.animacja,
.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;
  flex: 0 1 732px;
  max-width: 732px;
}

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

@media (min-width: 320px) and (max-width: 1023px) {
  .animacja-slider-slide {
    height: 38vw;
    max-height: 536px;
    max-width: 100%;
  }
}

.animacja-slider-tytul {
  display: block;
  font-family: var(--tytul-font);
  font-size: 48px;
  line-height: 52px;
  font-weight: 400;
  color: #fff;
}

.animacja-slider-tytul span {
  background: #000;
  padding: 5px 20px;
  line-height: 71px;
}

.animacja-slider-tytul span span {
  font-weight: 900;
  color: #3794ff;
  padding: 0;
}

.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-tytul a:after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-size: 0.9rem;
  color: #000;
}

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

.animacja-slider .slick-next {
  right: 0;
  background-image: url(../grafika/animacja_n.png);
  background-position: center;
  background-repeat: no-repeat;
}

.animacja-slider .slick-prev {
  left: 0;
  background-image: 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 > * {
  opacity: 0;
  transition: .2s;
}

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

#animacja-pause,
#animacja-play {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  border: none;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 14px;
  height: 40px;
  padding: 0 12px;
  cursor: pointer;
  transition: all .3s;
}

#animacja-pause:before,
#animacja-play:before {
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  color: #fff;
  margin-right: 10px;
}

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

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

#animacja-play {
  display: none;
}

#animacja-pause:hover,
#animacja-play: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: clamp(320px, 100%, 1232px);
  display: flex;
  flex-direction: column;
  margin: 0px auto 72px;
}
.srodek_tlo {
  flex: 1 1 auto;
  width: clamp(320px, 100%, 100%);
  margin: 0 auto;
  display: flex;
  gap: 0 16px;
  align-items: flex-start;
}

.strona-tresc {
  flex: 0 1 calc(100% - 412px);
  max-width: calc(100% - 412px);
  padding: 36px 36px 0px;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 16px;
  overflow: hidden;
}

.main_srodek_p .strona-tresc {
  flex: 0 1 calc(100% - 412px);
  max-width: calc(100% - 412px);
  padding: 36px 36px 0px;
  margin: 0px auto 0;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 16px;
  overflow: hidden;
}
.main_srodek_p .strona-tresc article {
  padding: 0;
}
.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;
}

footer {
  overflow: hidden;
}

.stopka {
  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: 0 0 40px;
}

.stopka .blok {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 40px;
  width: clamp(320px, 100%, 1232px);
  margin: 0 auto;
}

.stopka .blok .kolumna {
  flex: 0 1 calc(50% - 20px);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.stopka .blok .kolumna:nth-child(1) > span {
  font-family: var(--stopka-kolumna-tytul-font);
  font-size: 2.4rem;
  line-height: 2.8rem;
  font-weight: 900;
  color: #333f46;
  padding: 0px 0px 24px;
  margin: 0px 0px 40px;
  border-bottom: 1px solid #fff;
}

.stopka-kolumna-tytul {
  display: none;
  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);
}

.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;
  max-width: 20px;
  height: 24px;
  display: flex;
  align-items: center;
  margin: 0px 0px 0px 0px;
}

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

@media (min-width: 1232px) {
  .stopka .blok .kolumna:nth-child(1) {
    background: url(../grafika/herb.png) right 228px bottom no-repeat, url(../grafika/logo.png) right bottom 20px no-repeat;
    background-size: 102px 112px, 216px 70px;
  }
}

@media (min-width: 320px) and (max-width: 1023px) {
  .stopka {
    padding: 0;
  }
  .stopka .blok {
    gap: 24px;
    padding: 0 !important;
  }
  .stopka .blok .kolumna:nth-child(1) > span {
    text-align: center;
  }
  .stopka-kolumna-tytul,
  .stopka-tytul {
    text-align: center;
  }

  .stopka .blok .stopka_tytul {
    padding: 24px 0;
  }
}

@media (min-width: 320px) and (max-width: 639px) {
  .stopka_tytul {
    font-size: 3.4rem;
  }

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

  .stopka .blok .kolumna ul > li {
    font-size: 1.6rem;
  }
}

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