body{
	line-height: var(--default_line_height_mobile);
  	font-size:  calc(var(--default_font_size_mobile) * 1dvw);
	position: relative;
	z-index: 0
}
header{background-color: #fff;
	display: grid; 
	grid-template-areas: "logo btn nav";
	grid-template-columns: 30dvw auto 16dvw; 
	position: sticky; top: 0; left: 0; width: 100dvw; height: 16dvw;
	padding: 2dvw;
	align-content: center; align-items: center;
	z-index: 1;
}

h1, h2, h3, h4, h5{
	display: block; width: 100%;
}
h1{
	font-size: calc(var(--default_font_size_mobile) * 2dvw);
	line-height: 1.2; margin-bottom: calc(var(--default_font_size_mobile) * 1dvw)}
h2{font-size: calc(var(--default_font_size_mobile) * 1.5dvw);
	line-height: 1.2; margin-bottom: calc(var(--default_font_size_mobile) * .75dvw)}
h3{font-size: calc(var(--default_font_size_mobile) * 1dvw);
	line-height: 1.2; margin-bottom: calc(var(--default_font_size_mobile) * .5dvw)}
p, span, li, a {font-size: calc(var(--default_font_size_mobile) * 1dvw); margin-bottom: calc(var(--default_font_size_mobile) * .5dvw)}
ul{padding-left: 5dvw}
#nav_open{display: none;}

header #logo{grid-area: logo; width: fit-content;margin-top: .5rem}
header nav{grid-area: nav;}
header .btn {grid-area: btn; width: fit-content;}
header>nav{height: 14dvw;display: flex; position: relative}

#lbl_nav_close, #lbl_nav_open, #lbl_nav_filter{position: absolute;  transition: all .5s; padding: 0; margin: 0;}
#lbl_nav_close img, #lbl_nav_open img{margin: 0; position: relative; width: 100%; height: 100%; padding: 0; }
header>nav>ul{
	display: flex; flex-direction: column; background-color: #fff;
	position: fixed; left: 0; top: 16dvw; width: 100%; height: auto;
	border-bottom:  solid 1px #ccc;
	z-index: 1;
	transition: all .5s;
}
header *{text-decoration: none; color: #444; margin: 0; paddin: 0; list-style-type: none;}
header nav>ul li .sub-menu
{padding-left: 1.5rem; height: 0; overflow: hidden}
header nav>ul li:hover>.sub-menu{height: fit-content; overflow: initial}
header nav a{display: block; padding: calc( var(--default_padding) * .25rem); border-bottom: solid 1px #ccc;}


#nav_open ~.main_nav{left: -100%; top: -100dvw; width: 0; height: 0;}
#nav_open:checked ~.main_nav{left: 0%; top: 16dvw; width: 100%; height: fit-content;}

#nav_open ~#lbl_nav_close, #nav_open ~#lbl_nav_filter{width: 0; eight: 0}
#nav_open ~#lbl_nav_open{width: 14dvw; height: 14dvw; position: relative}

#nav_open:checked ~#lbl_nav_close, #nav_open:checked ~#lbl_nav_filter{width: 14dvw; height: 14dvw}
#nav_open:checked ~#lbl_nav_open{width: 0; height: 0; position: relative}


.btn{background-color: var(--defaut_btn_background);
  color: var(--text_color_dark_mode);
  font-size: calc( var(--default_font_size_mobile) * var(--default_font_size_btn) * 1dvw ); 
  border-radius: calc(var(--default_btn_radius) * 3dvw);
  padding: calc(var(--default_padding) * 1dvw) calc(var(--default_padding) * 1dvw) ;
  gap: calc(var(--default_font_size_mobile) * .5dvw)
}
.btn span{
  display: block; position: relative; height: fit-content; color: var(--text_color_dark_mode);  }
.btn:has(svg){ padding-right: calc(var(--default_font_size_mobile) * 2.1dvw)}
.btn svg{height: calc(var(--default_font_size_desktop)  * var(--default_font_size_btn) * .5dvw ); width: auto; ; position: absolute; right: calc(var(--default_font_size_mobile) * .4dvw); margin-top: calc(var(--default_font_size_mobile) * .11dvw)}


/**
 * STRONA GŁÓWNA 
 */
.container{
	padding: calc(var( --default_padding ) * 1dvw);
}
#front-page .hero{
	background-image: url(/wp-content/themes/b/img/bkg-home-mobile.webp);
	background-attachment: fixed;
	background-size: contain;
	display: block;
	position: relative;
	width: 100dvw;
	height: calc(100dvh - 16dvw);
	z-index: 0; overflow: hidden;
}
.hero .cytat{display: block; position: absolute; bottom: 0;  width: 100dvw }
.hero .cytat:before{
	content: '';
	background-color: var(--background_color_light_mode);
	display: block; position: absolute; top: -30%; left: -20%; width: 200%; height: 200%; z-index: -1;
	transform: rotate(-5deg)
}
.hero .cytat p{font-size: calc(var(--default_font_size_mobile) * 1dvw); width: 70dvw; margin-bottom: 10dvw}
.hero .cytat img{position: absolute; left: auto; right: 5dvw; bottom: 5dvw;z-index: -1;
	width: 30dvw; height: auto;
}

#front-page .hero + section .btn{display: block; width: 60dvw; margin-left: 20dvw; margin-bottom: 5dvw; }
#front-page .book .btn{width: calc(50% - 1dvw);display: inline-block; }
.colaboration{text-align: center}
.colaboration .grid, .container.grid{
	display: grid; grid-gap: 3dvw; grid-template-columns: repeat(2, 1fr);
}
.container.grid.center{align-items: center;}
.card{
	display: flex;flex-direction: column;
	padding: .5dvw; 
	border: solid 1px #ccc; 
	border-radius: calc(var(--default_border_radius) * 5dvw)
}
.card>img{
	border-radius: calc(var(--default_border_radius) * 3dvw); width: 100%; height: auto
}
.card>h3{padding: 2dvw 1dvw; padding-top: 5dvw;  text-align: center}

.icon_flex{gap: 1dvw;}
.icon_flex img{width: 7dvw; margin-top: -1dvw}

footer{gap: 1dvw; padding: 2dvw; text-align: center}
footer *{color: #999; padding: 0; font-size: 5dvw}
footer li{display: inline-block;}
footer img{width: 50%; height: auto; margin: 0 auto}


.cookie-consent-banner{
  background-color: #eee; display: flex; flex-direction: column; gap: 1rem; position: absolute; padding: 1rem; justify-content: center; justify-items: center; text-align: center;
  position: fixed; bottom: 0; left: 0; width: 100dvw; height: auto;
}
.cookie-consent-banner *{
  font-size: .5rem
}
.cookie-consent-buttons{gap: 2dvw; padding: 2dvw; font-size: 2dvw;}
.cookie-consent-button{font-size: 4dvw; padding: .25dvw}