@import url("modern-normalize.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');


:root {
  --biel:#fff;
  --szb:#f5fafd;
  --sz200:#ebeff4;
  --sz400:#dad7d7;
  --sz600:#7b7a7a;
  --sz900:#303030;
}

html {    font-family: 'Poppins', sans-serif;}
html, body {  height: 100%;}
body {  display: flex;  flex-direction: column;}
a {	text-decoration:none;	color:#555;}
img {  max-width: 100%;  height: auto;}
p {	font-size:1.1rem;	line-height:1.8rem;		margin-bottom:1rem;	letter-spacing:0.04rem	}
h1 {    font-size: 2rem;        margin:2rem 0; }
h2 {    font-size: 1.6rem;      margin:2rem 0; }
h3 {    font-size: 1.4rem;      margin:1.5rem 0; }
h4 {    font-size: 1rem;        margin:1rem 0; }
h5 {    font-size: 0.8rem;       margin:1rem 0; }

h3.hover-accent {width: max-content; padding: .5rem; background-color: var(--sz200); font-size:1.1rem; font-weight:400;}
h3.hover-accent:hover {background-color: var(--sz400);}
h3.hover-accent span {font-weight: 100; color: var(--sz600); }

.link {	padding:10px;	display:block;	text-decoration: none;	letter-spacing:0.08rem;	color:#000;	position:relative;}
.link:after{	content:'';	width:0%;	transition:all 0.3s ease;	left:50%;}
.link:before{	content:'';	width:0%;	transition:all 0.3s ease;	left:50%;}
.link:hover:after{	content:'';	position:absolute;	bottom:0px;	left:50%;	background:#ddd;	height:1px;	width:50%;}
.link:hover:before{	content:'';	position:absolute;	bottom:0px;	left:0px;	background:#ddd;	height:1px;	width:50%;}

/* ------------ stopka na dole ---------- */
#layout-content {  flex: 1 0 auto;}
.container {  flex-grow: 1;  margin: 0 auto;  position: relative;  width: min(95%, 1400px);}
#layout-footer {  flex-shrink: 0;}

/* ------------ sekcja naglowek ---------- */

#layout-header {	margin-bottom:3rem; padding:1.42rem 0;	}
#naglowek { display:flex;	flex-direction:row;	justify-content:space-between; align-items:center;}
.menu {    display:flex;    flex-direction:row;    justify-content:space-around;}
.menu > div {margin-right:2rem;}
#wstep {    display:flex;    flex-direction:row;    justify-content:flex-end;}
#wstep-text {    width:40%;    padding: 5% 5% 0 2%;    font-size:1.9rem;    font-weight:600;    line-height:1.4    }
#wstep-text::before {  content:'';  background:#ebf2f7;  display:block;  width:60%;  height:30rem;  position:absolute;  z-index:-2;  top:0;  left:0;}
#slider {  position:relative; width:902px; height:661px; overflow:hidden; }
#slider::before {  content:'';  background:hsl(0 0% 93% / 0.7);  display:block;  width:100%;  height:95%;  position:absolute;    z-index:-1;  top:1rem;  left:-1rem;}
#slider > div {  position: absolute;  top: 10px;  left: 10px;  right: 10px;  bottom: 10px;}


@media screen and (max-width: 480px){
  #wstep { flex-direction: column; } 
  #wstep-text { font-size: 1rem; width:100%;  padding: 5% ;  }
  #slider {   width:100%;  height: 350px  }
  #slider::before { display: none;}  
}

/* ----------- rozwijana wyszukiwarka ----------- */

.header-button {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;
  overflow: hidden;  position: relative;  z-index: 1;  display: block;  width: 40px;  height: 40px;
  margin: 0;  padding: 0;  outline: none;  border: none;  cursor: pointer;  background:none;}

#toggle-search {  float: right;  background-position: -60px 0;}
#toggle-search.open:after {  top: 40px;}
#toggle-search:after {  -moz-transition: top, 0.5s;  -o-transition: top, 0.5s;  -webkit-transition: top, 0.5s;  transition: top, 0.5s;
  position: absolute;  top: 52px;  left: 50%;  margin-left: -8px;  content: "";  border-color: transparent transparent #e1e4e7;  border-style: solid;
  border-width: 8px 8px 12px;
}
#search-form {  -moz-transition: max-height, 0.5s;  -o-transition: max-height, 0.5s;  -webkit-transition: max-height, 0.5s;  transition: max-height, 0.5s;
  position: absolute;  top: 60px;  left: 68%;  width: 30%;  max-height: 0;  overflow: hidden;  background-color: #e1e4e7;}
#search-form.open {  max-height: 60px;}
#search-form fieldset {  position: relative;  margin: 0 60px 0 0;  padding: 0;  border: none;}
#search-form input {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;  display: block;  height: 60px;}
#search-form input[type="search"] {  width: 100%;  padding: 0 5px 0 22px;  background: transparent;  border: none;}
#search-form input[type="submit"] {  position: absolute;  bottom: 0;  right: 0;  width: 60px;  margin: 0;  padding: 0;  font-weight: 700;
  text-transform: uppercase;  color: #516270;  background: #c6cacd;  border: none;  cursor: pointer;}


/* ------------ sekcja dostepne ---------- */

#layout-content {margin-top:-2rem; }

#dostepne-projekty {  display:flex;  flex-direction:row;  align-items:center;  padding:3rem 1rem;}
.tlo-niebieskie {    background: var(--szb);  }
.napis-pion {  color: var(--sz200);  padding: 1rem;  font-size:4rem;  font-weight:700;  transform: rotate(-90deg);  margin:0;    }
.naglowek span { display:block; margin-bottom:-2rem; color:var(--sz600)}
#dp-galeria {width: clamp(800px, 100%, 70dvw); }
#dp { margin:0 auto; columns: 300px; column-gap:1em;  }
#dp > div { display: block; margin-bottom: 1em; width: 100%; }

@media screen and (max-width: 480px){  
  .napis-pion {display: none}  
  .tlo-niebieskie {background: var(--szb)}
}

/* ------------ sekcja faq ---------- */

#sekcja2 {  display:flex;  flex-direction:row;  justify-content:center;  align-items:center;  padding:8rem 0;}

#faq {width:35rem; background-color: var(--szb);  padding:3rem; margin-right:-15rem; z-index:100; }
.accordion{	transform: translateZ(0);}
.accordion > .accordion-toggle {	position: absolute;	opacity: 0;	display: none;}
.accordion > label{	position: relative;	display: block;	height:50px; line-height:50px; padding:0 20px; font-size:14px; font-weight:700; border-top: 1px solid #ddd;	cursor: pointer;}
.accordion > label:after {  content: '+';  position: absolute;  top: 0px;  right: 20px;  font-family: fontawesome;    }
.accordion > section{	height: 0;	transition: .3s all;	overflow: hidden;}
.accordion > .accordion-toggle:checked ~ label:after {content: '-';}
.accordion > .accordion-toggle:checked ~ section{  height: 200px;}
.accordion > section p {  margin: 15px 0;  padding: 0 20px;  font-size: 12px;  line-height: 1.5;}

#s2-zdjecia { display:flex; align-items:center;  }
#zd2 img {height:560px;}

@media screen and (max-width: 480px){
  #sekcja2 {  flex-direction:column; padding:4rem 0;}
  #sekcja2 {  background: none;}
  #faq { padding: 3rem 2rem; margin:0; width:100%;}
  #s2-zdjecia { display:none; align-items:center;  }
}


/* ------------ sekcja formularza ---------- */

#sekcja-fk { display:flex;  flex-direction:row; align-items:center;  padding:5rem 0}
#sekcja-fk .napis-pion {margin-left:-5rem}
#kontakt {display:flex;flex-direction:row;justify-content:flex-start;width:70%;gap:6rem;}
#fk {width:35rem; }
.form-group {width:100%;}
.form-group label, .form textarea {display:block; margin-bottom:1rem}
.form-group input {width:100%; background:none !important; margin-bottom:1rem; border-top:none; border-left:none; border-right:none; border-bottom: var(--sz400) solid 1px }
.form-group textarea {width:100%; background:none !important; margin-bottom:1rem; border-top:none; border-left:none; border-right:none; border-bottom: var(--sz400) solid 1px }
input[type='checkbox'] { margin:1rem 0; width:20px; transform: scale(1.5); }
#simpleContactSubmitButton { width:40%; background:#fff!important; margin:1rem 0; padding:1rem; border: var(--sz400) solid 1px  }

@media screen and (max-width: 480px){
  #sekcja-fk {flex-direction: column;}
  #kontakt {flex-direction: column; width: 90%; padding: 3rem 0;}
  #fk { max-width: 100%;}  
}

#kontakt_forms_flash { text-align:center;  margin:1rem 0;} 
#kontakt_forms_flash button {display: none;} 
#kontakt_forms_flash .alert-success { background-color: #9ef5b7; padding:1rem 1rem 0.1rem 1rem ; }
#kontakt_forms_flash .alert-error { background-color: #f95644; padding:1rem 1rem 0.1rem 1rem ; }

/* ---------- produkt------------ */
.nazwa-produktu {	margin:1rem 0;}
#produkt-kolumny {	display:flex;	flex-direction:row;	margin:3rem 0;}
#lewa, #prawa {width:50%;}
#lewa  {position: sticky;top: 5rem;}
#prawa {line-height:0}
#lewa a {color:#a0a0a0; }

.duza-nazwa {background: var(--szb); padding:2rem 0; margin: 0 auto; text-align:center}
.duza-nazwa h2 {color:var(--sz600); font-size: clamp( 1.5rem , calc(4vw + 1rem), 2rem ); }
.duza-nazwa h3 {color:var(--sz400); font-size: clamp( 1.2rem , calc(1vw + 1rem), 1.6rem );}
.rezerwacja {font-size: clamp( 1.2rem , calc(1vw + 1rem), 1.6rem );}
.opis {width:90%;  position:sticky;  top:3rem;  }
.opis p {font-size:0.91rem}
.dane {width: 90%}
.wymiary-produkt p {font-size:0.8rem;}
.dopisek { background-color:var(--sz200); line-height:1.8em; padding:1em; margin-top:1.5em}
.dopisek p {margin-bottom:0; font-size:.8em}
.cena-index { width:100%; display:flex; flex-direction:row; justify-content: space-between;}
.cena-index strong {font-size:1.2rem}
.index {font-size:.6rem !important; margin-top:1.5rem;}

.galeria {  columns: 300px; column-gap: 1rem}
.galeria > div { display: block; margin-bottom: 1em;}

.miniatura { position: relative;  }
.miniatura span {	position:absolute; padding:1rem;	left:0;	bottom: 0; 	background:rgb(255 255 255 / 85%);
    visibility: hidden;    opacity: 0;    transition: opacity .5s, visibility .2s;}
.miniatura:hover span {	  visibility: visible;  opacity: 1;}

.nazwa-kategorii {	position:absolute;	padding:.3em;	left:0;	bottom:0;     background:rgb(255 255 255 / 75%);  font-size:1.4em;  }

.miniaturka { position: relative;  }
.miniaturka span {	position:absolute;	padding:1rem;		left:0;	bottom: 0;     
	background:rgb(255 255 255 / 85%);
    visibility: hidden;    opacity: 0;    transition: opacity .5s, visibility .2s;}
.miniaturka:hover span {	  visibility: visible;  opacity: 1;}


/* ---------  zapytaj o produkt ------------- */

#pojedyncza-kategoria {  display: flex;        flex-direction:row;        flex-wrap: wrap; }
#pk {margin:12rem 0; }
#pk .miniatura {margin:0.5rem}
#wk {  display: flex;        flex-direction:row;        flex-wrap: wrap; margin:4rem 0;}
#wk .miniatura {margin:0.5rem}
hr {    margin:1rem auto;   height:1px; border: 1px solid var(--sz200);}
.text {	padding:1rem;}
#zapprodukt_forms_flash { text-align:center;  margin:1rem 0;} 
#zapprodukt_forms_flash button {display: none;} 
#zapprodukt_forms_flash .alert-success { background-color: #9ef5b7; padding:1rem 1rem 0.1rem 1rem ; }
#zapprodukt_forms_flash .alert-error { background-color: #f95644; padding:1rem 1rem 0.1rem 1rem ; }

/* ---------  stopka ------------- */
#layout-footer {  padding: 1rem;  background-color: #333;}
#stopka {	padding:2rem 1rem;	color:#fff;	display:flex;	gap:5rem; }
#regulaminy {display: flex; flex-direction: column;}
#regulaminy a {	color:#fff; margin-bottom: .4rem}
#regulaminy div:first-of-type {	 margin-bottom: .8rem; }
.copy {color:#fff; margin-top: 2rem;}
.sidenavbutton {display:none;}
.contact-icon {height:1.5rem; margin-right:0.7rem; align-self: center;}

@media screen and (max-width: 1024px){
.link {	letter-spacing:0.2rem;}
#lewa {width:100%}
.opis {margin-top:0.5rem;}
#prawa {width:100%}
#stopka {	padding:1rem 0;}
#stopka p {	font-size:0.8rem; margin:0 0.6rem;}
}

@media screen and (max-width: 768px){        .menu > div {margin-right:1rem;}}

@media screen and (max-width: 480px){
.menu {display:none}
#layout-header { padding:1rem; margin-bottom:0;}
#layout-content { padding:1rem;}
.opis { width:100%; margin: 2rem 0; padding: 1rem;  }  
.opis p {	width:100%;	}
#wszystkie-kategorie .miniatura {    width: calc(100% / 2 - 2%);    margin: 1%;	}
.dostepne-produkty-def .miniatura {   width: calc(100% / 2 - 2%);   margin: 1%;    }
#pojedyncza-kategoria .miniatura {	width: calc(100% / 2 - 2%);    margin: 1%;	}
#stopka {	flex-direction:column; font-size:1rem; gap: 2rem }
#stopka >div {	margin-bottom:2rem;}
  .duza-nazwa {padding:1rem; margin-top: 2rem;}
}


@media screen and (max-width: 600px){
#produkt-kolumny {	display:flex;	flex-direction:column-reverse;		margin:3rem 0;}  
}


/* The side navigation menu */
.sidenavbutton { text-align:center; }
.sidenav {  height: 100%;  width: 0;  position: fixed;   z-index: 1;  top: 0;  left: 0;  background-color: #111;  overflow-x: hidden;  padding-top: 50px;  transition: 0.5s;}

/* The navigation menu links */
.sidenav a {  padding: 0;  text-decoration: none;  font-size: 25px;  color: #fff;  display: block;  transition: 0.3s;}
.sidenav a:hover {  color: #f1f1f1;}
.sidenav .closebtn {  position: absolute;  top: 20px;  right: 25px;  font-size: 36px;  margin-left: 50px;}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 1.3rem; margin-bottom:2rem;}
}
@media screen and (max-width: 480px) {
.sidenavbutton {display:block; font-size:2rem; }
.sidenav { padding-top:8rem;}
.sidenav a {font-size: 1.3rem; margin-bottom:2rem; padding-left:2rem;}
}
/* ------------ dokument ---------- */
.dokument ol { padding-left: 2rem; line-height: 1.8rem}
.dokument ol>li { margin-block:1rem}
.dokument ul {padding-left: 2rem;}
.dokument {margin-bottom: 4rem; font-size:1.1rem;}

/* ------------ wyszukiwarka ---------- */
.ss-search-form__input input {border:none; border-bottom: 1px solid #aaa; width:12rem }
.ss-search-form__submit {background: none; outline: none; border:none;}
#mySidenav .ss-search-form__input input {background:none; width: 10rem; margin-left:2rem; caret-color: #fff; color:#fff;}
.wyniki {display: flex; flex-wrap: wrap; gap:1rem;}
.ss-result {display: flex; /*! border-block-end: 1px solid #333; */ margin-block:1rem; flex-direction: column;flex-wrap: wrap;}
.ss-result__aside {width:100%;}
.ss-result__title {width: 30ch}
mark {background-color:#fff;}

@media screen and (max-width: 480px){
.ss-result {display: flex; flex-direction: column; }
.ss-result__aside {width:100%}  
}

#siatka-miniatur {   --grid-min-col-size: 250px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min-col-size), 100%), 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.pagination {  display: flex; gap:2rem; padding:1rem; list-style:none; margin-block:3rem; flex-wrap: wrap;}

.kontakt {
   
  * { margin-block-end: 1rem;}
  
  img { width:20px; margin-right: .3rem; }
  
  a { color:#fff; display: block;}
    
}


.foot-link { display: flex; align-content: center; flex-direction: row;

  img { margin-block-end: unset;}
}