@charset "UTF-8";
/* CSS Document */

:root{
	/* Old: #44cfaa */
	--ac1: #009772;
	--ac3: #00b185;
	--ac2: #dff0e6;
	}

*{
	margin:0px; 
	padding:0px;
	font-size: 16px;
	font-family: arial;
	text-decoration: none;
	color: white;
}

body{width:100%; height: 100%; overflow-x: hidden; background-color: var(--ac1); cursor: default;}

/* Header */

#header{
	width:100%;
	height:100px;
	padding: 24px 0px;
	overflow: hidden;
	background-color: white;
	position: relative;
	z-index: 200;
}

#header img{width:100%; height:100%; object-fit: contain;}

/* Navbar */
#navbar{width:100%; text-align: center; background-color: var(--ac2); box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2); position: relative; z-index: 100;}
#navbar a{
	display: inline-block;
	padding:8px 16px;
	cursor: pointer;
	z-index: 100;
	position: relative;

}

#navbar a:hover, #navbar .active{
	background-color: var(--ac1);
}

#navbar h2{color: var(--ac1)}
#navbar a:hover h2, #navbar .active h2{color: var(--ac2);}


/* Page */
#page {position: relative; z-index: 90; padding:16px 0px;}
#stamp{position: fixed; bottom:0; right:0; width:50%; height:500px; max-width:500px; height:100%; object-fit: contain; object-position: bottom right; z-index: 0; opacity: 0.2; pointer-events: none}


#book img{
	width:100%;
	height:100%;
	object-fit: contain;
	z-index: 100;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

#book{
	background-color: var(--ac2);
	width:100%; 
	height:200px;
	padding:8px 0px;
	text-align: center;
	position: relative;
}

.block{width:90%; margin:auto; padding:8px 0px; color: white; overflow-x:auto; }
.block p{margin-bottom:16px;}
.block a{font-weight: 800; z-index: 100; position: relative;}
.block a:hover{cursor: pointer; text-decoration: underline;}
.block h1{font-size:24px;}





/* Products */

.productlist{
	overflow-x: auto
}

.productcategory{
	display: flex;
	margin-bottom:32px;
	align-items: center;
	min-width:800px
}

.productcatimages{
	align-self: center;
	text-align: center;
	width:8%;
	max-width:240px;
	padding-right:16px;
}

.product{
	display: flex;
	border-bottom: 0.5px solid var(--ac2);
	
}

.productitem{
	width:100%;
	padding:4px 8px;
	
}


.plcatimage {
	width:100%;
	height: auto;
	margin:8px 0px;
	
}

.plcatimage.rounded{
	border-radius: 8px;
}


.productscontainer{
	width:100%;
}

.productlist p{
	margin: 0px;
}

.plprice, .plamount{
	width:50%;
	max-width:120px;
}


.plprice p::before{
	content:"€ "
}



.pltitles p:not(.plsubtitle){
	font-weight: 640;
	text-transform: uppercase;
}

/* Form */




form{width:100%; z-index: 100; position: relative;}
form td{vertical-align: top; padding:0px;}
form td:nth-child(2){padding-right:16px;}

input, textarea{
	border: none;
	background-color: var(--ac2);
	color: var(--ac1);
	width: 100%;
	height:32px;
	padding-left:8px;
	resize: none;
	cursor: text;
}

textarea {height: 64px; padding-top:4px;}
input[type="checkbox"]{width:16px; height:16px; position: absolute; cursor:pointer; opacity:0; z-index: 100;}
.checkbox p{cursor:pointer; position: absolute; width:16px; height: 16px; padding:2px; text-align: center; z-index: 90; background-color:var(--ac2); color: var(--ac2); border-radius: 4px;}

input[type="checkbox"]:checked ~ .checkbox p {color: var(--ac1)}

form .error p{font-style: italic; margin:0px; padding-bottom:16px;}

.submit button{cursor:pointer; border: none; background-color: var(--ac2);}
.submit button p{margin:0px; padding:8px; color: var(--ac1);}