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

header{background-color: #fff;
	display: grid; grid-gap: 2rem;
	grid-template-areas: "logo btn nav";
	grid-template-columns: 10rem auto 10rem; 
	position: sticky; top: 0; left: 0; width: 10rem; height: 10rem;
	padding: 1dvw calc( (100dvw - 1400px) / 2 );
	align-content: center; align-items: center; width: 100%; height: 4rem;
	z-index: 1;
}
#logo{display: block; height: 4rem}
header *{margin: 0; padding: 0}
header nav{display: flex;align-content: center; align-items: center}
header nav ul{width: fit-content; justify-self: right; align-self: right; margin: auto; margin-right: 0}
header nav li{display: inline-block}
header nav li ul{display: none; position: absolute; width: fit-content} /******DOROBIĆ ROZWIJANIE*********************/
header nav li ul li{display: block}
header nav li a{
  display: block; width: 100%; padding: 1rem 1rem;
  color: #222;text-decoration: none;}
}

.container{width: 1400px; margin: 0 auto; padding: 2rem}


.container{
	display: block;
	width: 1400px;
	margin: 0 auto
}
#front-page .hero{
	background-image: url(/wp-content/themes/b/img/bkg-home.webp);
	background-attachment: fixed;
	background-size: cover;
	display: block;
	position: relative;
	width: 100dvw;
	height: calc(100dvh - 10rem);
	z-index: 0; overflow: hidden;
}
.hero .cytat{display: block; position: absolute; bottom: 0;  width: 50dvw ; right: 0; background-color: #fff; padding: 2rem}
.hero .cytat:before{
	content: '';
	background-color: var(--background_color_light_mode);
	display: block; position: absolute; top: -0%; left: 0%; width: 0%; height: 0%; z-index: -1;
	transform: rotate(0)
}
.hero .cytat p{font-size: calc(var(--default_font_size_desktop) * 1px); width: 70%;; z-index: 2; position: relative;}
.hero .cytat img{position: absolute; left: auto; right: 5dvw; bottom: 5dvw;
	width: 10rem; height: auto; z-index: 0; bottom: 0; right: calc( (100dvw - 1400px) / 2 );
}
#front-page .hero +section .container{display: flex; justify-content: center; gap: 5rem;width: 1400px; margin: 0 auto}

#front-page .book .btn{display: block; width: 10rem}

#front-page .hero + section .btn{}

.card{
	display: flex;flex-direction: column;
	padding: .5rem; 
	border: solid 1px #ccc; 
	border-radius: calc(var(--default_border_radius) * 5px)
}
.card>img{
	border-radius: calc(var(--default_border_radius) * 3px); width: 100%; height: auto
}
.card>h3{padding: 2rem 1rem; padding-top: 1rem;  text-align: center; font-size: 1.5rem}

.book{display: block; margin: 5rem 3rem}
.book  .container {display: grid; grid-template-columns: 1fr 1fr; align-items: center; grid-gap: 2rem}
.book .container div div {display: flex; gap: 1rem; justify-items: center; justify-content: center; margin-top: 3rem}
.colaboration div{display: flex; align-content: center; align-items: center}
.colaboration div:last-of-type{justify-content: end}

.list{padding:  5rem 0}
.list .container.grid{
	display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem
}