@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
html, body {
  scroll-behavior: smooth;
  background: #e5edf0; }

body {
  color: #838587; }
  body .is-layout-flex {
    gap: 0; }

* {
  box-sizing: border-box; }

.highContrast {
  background-color: #000 !important;
  color: yellow !important; }
.highContrast .wp-site-blocks {
  border-color: yellow; }
.highContrast .wp-block-button__link {
  background-color: yellow !important;
  color: black !important; }

.wp-block-button__link {
  padding: calc(0.667em + 2px) calc(1.333em + 2px); }

.btn-color .wp-block-button__link:hover {
  color: yellow !important;
  background-color: black !important; }

.wp-block-columns {
  gap: 0 !important; }

.wp-block-group .wp-block-columns + .wp-block-columns {
  margin-block-start: 0; }

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap; }
  .wp-block-buttons .wp-block-button {
    flex-wrap: nowrap; }

.head-element {
  padding: 3rem !important; }

.page-template-blank .wp-block-button + .wp-block-button {
  margin-left: 1rem !important; }
.page-template-blank .wp-site-blocks {
  padding: 0;
  margin: 0; }

.page-template-default .wp-block-button + .wp-block-button {
  margin-left: 3rem !important; }
.page-template-default .wp-site-blocks {
  border: 7px solid #fff;
  margin: 25px; }
.page-template-default body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--wide-size) !important; }
.page-template-default .wp-block-cover {
  position: relative; }
  .page-template-default .wp-block-cover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(237, 30, 59, 0);
    z-index: 2;
    transition: background-color .3s ease-in; }
  .page-template-default .wp-block-cover:hover:after {
    background-color: rgba(237, 30, 59, 0.4); }
  .page-template-default .wp-block-cover .wp-block-cover__inner-container {
    z-index: 3 !important;
    position: relative; }
    .page-template-default .wp-block-cover .wp-block-cover__inner-container a {
      color: #007cb1;
      font-weight: 700;
      background-color: #ffffff; }
      .page-template-default .wp-block-cover .wp-block-cover__inner-container a:hover {
        color: red; }

#videoLayer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 20;
  display: none; }

#videoLayer #exit {
  color: #000;
  font-size: 40px;
  position: absolute;
  right: -10%;
  top: -10%;
  background: #fff;
  padding: 0 20px;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  cursor: pointer; }

#videoLayer #exit:hover {
  transform: scale(0.95); }

#videoLayer .videoForLayer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

* {
  box-sizing: border-box; }

.highContrast .btnArrow {
  fill: yellow; }

.highContrast .visitButton a {
  color: yellow; }

.highContrast .visitButton .greyBg {
  background-color: black; }

circle {
  fill: #e30d2b;
  stroke: #fff;
  stroke-width: 20px; }

html,
body {
  height: 100%; }

html {
  overflow-y: scroll;
  overflow-y: overlay; }

body {
  margin: 0;
  padding: 0;
  background: #e5edf0;
  font-family: "Open Sans", sans-serif; }

.containerIndexLine {
  border: 7px solid #fff;
  margin: 25px; }

.indexSite {
  text-align: center; }

.indexSite img {
  margin: 30px auto 20px auto; }

.indexSite p {
  margin: 0 20% 40px 20%;
  color: #838587;
  font-size: 1.2em;
  font-weight: 400; }

.starterRow {
  display: flex; }

.starterRow .starterBox {
  height: 35vh;
  width: 50%; }

.btnPlace {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 124, 177, 0.4);
  transition: 0.3s; }

.btnPlace:hover {
  background: rgba(237, 30, 59, 0.4); }

.visitButton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  margin: 0;
  height: 100px;
  width: 335px;
  padding-left: 15px;
  text-align: center;
  transition: 0.3s; }

.visitButton:hover .greyBg {
  background: #ed1e3b; }

.visitButton:hover a {
  color: #ed1e3b; }

.btnArrow {
  width: 50%;
  fill: black;
  transition: .25s; }

.visitButton:hover .btnArrow {
  fill: #f1f1f1; }

.textCard h2 {
  color: #007cb1; }

.visitButton a {
  font-size: 1.3em;
  font-weight: 700;
  color: #007cb1;
  margin: 0;
  width: 85%;
  text-decoration: none;
  transition: 0.3s; }

.visitButton a:hover {
  color: #ed1e3b; }

.visitButton .greyBg {
  background: #f1f1f1;
  margin: 0;
  padding: 15px 5px;
  margin-left: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 100%;
  width: 15%;
  transition: 0.3s; }

.greyBg {
  display: flex;
  justify-content: center;
  align-items: center; }

.visitButton embed {
  margin-top: 25px; }

.starterRow #leftFirst,
.starterRow #rightSecond {
  background: url("img/starter.png");
  background-size: cover;
  background-position: bottom; }

.starterRow #rightSecond {
  background: url("img/brama.png");
  background-size: cover;
  background-position: bottom; }

.starterRow #rightFirst {
  background: url("img/sortownia.png");
  background-size: cover;
  background-position: bottom; }

.starterRow #leftSecond {
  background: url("img/kompostownia.png");
  background-size: cover;
  background-position: bottom; }

.navMapSite {
  background: #007cb1;
  color: #fff; }

.text {
  color: #838587; }

.navLi:hover {
  color: #007cb1;
  background-color: #fff; }

ol {
  padding: 0; }

/* linia obrysowująca strone */
.containerMap {
  outline: 4px solid #fff;
  outline-offset: -20px;
  display: flex;
  z-index: 1;
  width: 100%;
  max-width: 100% !important;
  margin-block-start: 0 !important; }

.containerMapHC {
  outline: 4px solid yellow; }

.navMapSite {
  z-index: 1;
  min-height: 100%;
  min-width: 30vw; }

.containerMap .navMapSite .whiteLogo {
  margin: auto;
  display: block;
  margin-top: 50px; }

.containerMap .navMapSite h3 {
  font-size: 2em;
  text-align: center;
  font-weight: 700; }

.containerMap .navMapSite ol {
  list-style-type: none;
  margin: 0;
  text-align: left;
  width: 100%; }

.containerMap .navMapSite li {
  font-size: 1rem;
  line-height: 1.2em;
  padding: 6px 1rem 6px 3rem;
  cursor: pointer;
  display: flex;
  align-items: center; }

.containerMap .navMapSite li:hover .mapElement {
  fill: red; }

.navLi {
  transition: .25s ease; }

.mapSim {
  cursor: pointer;
  fill: transparent;
  transition: .15s ease; }

.activeMapElement {
  fill: red; }

.containerMap .navMapSite .activeNavElement {
  background: #fff;
  color: #ed1e3b;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding-left: 3rem;
  padding-right: 5px; }

.redArrow {
  width: 1.25rem;
  margin-bottom: 0;
  margin-right: 8px;
  display: none;
  fill: #ed1e3b; }

.containerHeaderMain {
  display: flex;
  flex-direction: column; }

.containerMap .headerMapSite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px 0 40px; }

.containerMap .headerMapSite p {
  font-size: 1.1em;
  font-weight: 400;
  margin-right: 50px; }

svg {
  width: 100%;
  max-height: 80vh;
  margin-bottom: -5px; }

.containerMap main svg .mapElement {
  cursor: pointer;
  fill: transparent;
  transition: 0.3s; }

.containerMap main svg .mapElement:hover {
  fill: rgba(237, 30, 59, 0.7); }

#videoLayer {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 20;
  display: none;
  max-width: 100% !important; }

#videoLayer #exit {
  color: #000;
  font-size: 40px;
  position: absolute;
  right: -10%;
  top: -10%;
  background: #fff;
  padding: 0 20px;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  cursor: pointer; }

#videoLayer #exit:hover {
  transform: scale(0.95); }

#videoLayer .videoForLayer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.video {
  height: 600px;
  width: 1000px;
  border-radius: 20px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  margin-top: 200px auto; }

.textCard {
  background-color: transparent;
  padding: 0 1rem;
  width: 100%;
  display: none;
  color: black;
  height: 200px; }

#emptyCard {
  display: block; }

.textCard h1 {
  color: #007cb1;
  font-size: 18pt;
  z-index: 1;
  position: relative; }

.textCard p {
  color: grey;
  font-size: 12pt;
  z-index: 1;
  padding: 10px;
  position: relative; }

.textCard p:last-of-type {
  padding-bottom: 30px; }

.texCard p:last-of-type {
  padding-bottom: 20px; }

@media only screen and (max-width: 1440px) {
  .containerMap .navMapSite {
    min-width: 25vw; }

  .videoForLayer .video {
    width: 800px;
    height: 450px; }

  .containerMap .navMapSite li {
    line-height: 1; }

  .containerMap .navMapSite .activeNavElement {
    padding-right: 0; }

  .containerMap .navMapSite .redArrow {
    width: 4%; }

  .textCard {
    max-width: 90%; } }
.highContrastBtn {
  margin-left: 3rem;
  margin-top: 3rem;
  padding: .5rem 1rem;
  background-color: #ed1e3b;
  color: #fff;
  border: none;
  transition: .5s ease;
  font-family: "Open Sans", sans-serif;
  font-size: 12pt;
  font-weight: bold;
  height: 100%; }

.highContrastBtn:hover {
  color: yellow;
  background-color: black; }

.highContrast .highContrastBtn {
  background-color: yellow;
  color: black; }

.highContrast .highContrastBtn:hover {
  background-color: #ed1e3b;
  color: #fff; }

.highContrast, .highContrast .navMapSite, .highContrast .textCard {
  color: yellow;
  background-color: black;
  stroke: yellow;
  fill: black; }

.highContrast h1,
.highContrast p,
.highContrast h2,
.highContrast a,
.highContrast a:link,
.highContrast a:visited,
.highContrast a:active {
  color: yellow; }

.highContrast .navLi:hover {
  background-color: yellow;
  color: black; }

.highContrast .navLi.activeNavElement {
  background-color: yellow;
  color: black; }

.highContrast .navLi.activeNavElement .redArrow {
  fill: black; }

.highContrast .containerIndexLine {
  border-color: yellow; }

.highContrast .visitButton {
  background: black; }

.backButton:hover {
  background: #ed1e3b;
  filter: brightness(80%);
  color: white; }

.mobileMain {
  display: none; }

.buttonRow {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: 80%; }

.mapCircles {
  cursor: pointer; }

#mobileButton {
  display: inline; }

#pctext {
  display: block; }

#mobiletext {
  display: none; }

@media screen and (max-width: 1024px) {
  .starterRow {
    flex-direction: column;
    width: 100%; }

  .starterRow .starterBox {
    width: 100%;
    height: 375px; }

  .starterRow .starterBox .visitButton {
    height: 150px; }

  .starterRow .starterBox .visitButton a {
    font-size: 1.6em; }

  .whiteLogo {
    width: 40%; }

  .containerMap {
    display: none; }

  .mobileMain {
    display: block;
    padding: 0 20px; }

  .mobileLogo {
    width: 100%;
    background-color: #007cb1;
    position: fixed;
    display: flex;
    justify-content: center;
    top: 0;
    left: 0;
    padding: 1rem 0; }

  svg {
    width: 50%;
    stroke: #fff;
    fill: #fff;
    margin-bottom: .5rem; }

  .mobileTile {
    margin-top: 1rem;
    display: flex;
    background-color: #007cb1;
    color: #fff;
    cursor: pointer;
    min-height: 20vh; }

  .mobileTile h1 {
    margin: 0;
    font-size: 150%;
    text-align: center; }

  .mobileTile div {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%; }

  .tileVisible {
    margin: 1rem auto;
    width: 100%;
    display: none; }

  .tileVisible.active {
    display: block; }

  .tileVisible p {
    text-align: justify;
    font-size: 14pt;
    margin: 0;
    margin-bottom: 1rem; }

  .mobileVideo {
    width: 100%;
    height: 450px; }

  #m-0 > div:nth-child(2) {
    background-image: url("img/1-brama.jpg");
    background-size: cover; }

  #m-1 > div:nth-child(2) {
    background-image: url("img/2-waga.jpg");
    background-size: cover; }

  #m-2 > div:nth-child(2) {
    background-image: url("img/3-pszok.JPG");
    background-size: cover; }

  #m-3 > div:nth-child(2) {
    background-image: url("img/4-niebezpieczne.JPG");
    background-size: cover; }

  #m-4 > div:nth-child(2) {
    background-image: url("img/5-sortownia.JPG");
    background-size: cover; }

  #m-5 > div:nth-child(2) {
    background-image: url("img/6-boxy.JPG");
    background-size: cover; }

  #m-6 > div:nth-child(2) {
    background-image: url("img/7-kompostownia.JPG");
    background-size: cover; }

  #m-7 > div:nth-child(2) {
    background-image: url("img/8-polepszacz.JPG");
    background-size: cover; }

  #m-8 > div:nth-child(2) {
    background-image: url("img/9-gabaryty.JPG");
    background-size: cover; }

  #m-9 > div:nth-child(2) {
    background-image: url("img/10-stara.JPG");
    background-size: cover; }

  #m-10 > div:nth-child(2) {
    background-image: url("img/11-nowa.JPG");
    background-size: cover; }

  #m-11 > div:nth-child(2) {
    background-image: url("img/12-azbest.JPG");
    background-size: cover; }

  #m-12 > div:nth-child(2) {
    background-image: url("img/13-podczyszczalnia.JPG");
    background-size: cover; }

  #m-13 > div:nth-child(2) {
    background-image: url("img/14-biogazowania.JPG");
    background-size: cover; }

  #m-14 > div:nth-child(2) {
    background-image: url("img/15-sokoły.JPG");
    background-size: cover; }

  #m-15 > div:nth-child(2) {
    background-image: url("img/16-koniec.JPG");
    background-size: cover; }

  #mobileButton {
    display: none; }

  #pctext {
    display: none; }

  #mobiletext {
    display: block;
    font-size: 1.45em;
    margin: 0 5% 40px 5%; } }
@media screen and (max-width: 600px) {
  .mobileLogo img {
    width: 50%; }

  .mobileTile h1 {
    font-size: 100%; }

  .mobileVideo {
    height: 250px; }

  #mobileButton {
    display: none; }

  #pctext {
    display: none; }

  #mobiletext {
    display: block;
    font-size: 1.45em;
    margin: 0 5% 40px 5%; } }

/*# sourceMappingURL=style-9.css.map */