@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Noto+Sans+Display:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
  --background-color: #0a474e;
  --text-color-on-light: #0a0a0a;
  --text-color-on-dark: #efefef;
  --background-color-o: #0a474e80;
  --button-background: #0a474e;
  --button-background-hover: #1b585f;
  
  font-size: 24px;
}
*{color: var(--text-color-on-light); box-sizing:border-box;font-weight: 300; font-family: 'Noto Sans Display';margin: 0;font-size: 21px;}
html, body {display: block; padding: 0; margin: 0;overflow-x: hidden;}
strong{font-weight: 500}
img{max-width: 100%; height: auto;}
table *{text-align: left;}
table th, table td{padding: .5rem}
table th{font-weight: 600}
.bkg_dark{background-color: var(--background-color);}
.bkg_dark, .bkg_dark *{color: var(--text-color-on-dark)}
.piktogramy div{display: flex; flex-direction: column; align-content: center; align-items: center}
.piktogramy img{width: 80%; margin: 0 auto;}
h1, h2, h3, h4, h5, h6{font-size: 3rem; margin: 0; font-weight: 600; font-family: "", sans-serif;}
h1{ margin-top: calc(1 * 3rem); margin-bottom: calc(.5 * 3rem); }
h2{font-size: 2.5rem; margin-top: calc(1 * 2.5rem); margin-bottom: calc(.5 * 2.5rem); }
h3{font-size: 2rem; margin-top: calc(1 * 2rem); margin-bottom: calc(.5 * 2rem); }
h4, h5{font-size: 1.5rem; margin-top: calc(1 * 1.5rem); margin-bottom: calc(.5 * 1.5rem); }
h6{font-size: 1rem; margin-top: calc(1 * 1rem); margin-bottom: calc(.5 * 1rem); }
section>h1, section>h2, section>h3, section>h4, section>h5, section>h6{text-align: center;}
p, ul{margin: .5rem 0}
p:empty{ height: 0; margin: 0; padding: 0;}
ul{padding: 0; padding-left: 1rem; }
.separator{display: block; width: 100%; height: 2rem}
header [class^="menu-menu-top"] a, 
header>a>p{ font-family: "", sans-serif;}
footer{
  display: block; margin-top: -1rem;
  background-color: var(--background-color);
}
footer *{color: #fff;}
iframe{width: 100%; }
section{display: block; position: relative; border: solid 1px rgba(0,0,0,0)}
footer a{text-decoration: none;}
footer li{border-bottom: dotted 1px; list-style-type: none; margin: 0; padding: .25rem 0}
footer li:hover{background-color: var(--button-background-hover);}


.flex-center-vert{display: flex; flex-direction: column; justify-content: center}
.btn{
  display: flex; border: solid 1px var(--background-color); background-color: var(--background-color); color: #fff; padding: .5rem; width: auto; justify-content: center; text-decoration: none; border-radius: .25rem;
  width: fit-content;
}



.wpcf7-response-output{
  display: flex;position: relative; text-align: center; font-weight: bold; color: #fff; border-left: solid 4px var(--button-background)
}

.lightboxItem{display: none;}
.fslightbox-container .lightboxItem{display: initial}

.swiper-pagination-bullet{width: 1rem !important; height: 1rem !important;background-color: var(--background-color-o) !important; opacity: 1 !important}
.swiper-pagination-bullet-active{background-color:  var(--background-color) !important; border: solid 4px var(--background-color); }

.img_mask{position: absolute; z-index: 2;}
.img_mask.bottom{bottom: .1rem; z-index: 5}}
.img_mask.top{margin-top: 0rem !important; border: solid 1re #000}

.gallery a{text-align: center;overflow: hidden; position: relative; display: block; }

.ps_form * {color: #222 !important;}
.hero-form p, .hero-form p *:not(input):not(a){color: #fff}
.hero-form a{color: yellow; text-decoration: none}
.hero-form a:hover{text-decoration: underline}

.hero_article{
  display: flex; position: relative; align-content: center; align-items: center; top: 5rem; max-height: 20rem; margin: -5rem 0 6rem 0; padding: 0;
}
.hero_article>img{
  width: 100%; z-index: -1; 
}
.hero_article>h1{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: #fff; text-shadow: 0 0 8px #000; font-size: 5rem}