body.template-wzm-bierviltjes {
	
	--color2: #194a60;
	--color2bright: #194a60;
	--color1:  #F1F4E4; 
	--color1bright:  #FFF; 
	
	
}

body.template-wzm-bierviltjes  *:is(.content-wrapper, .menu-important, body:not(.menu-open) .hamburger-menu-wrapper) { 
	--color_darkest:var(--color1,#F1F4E4);
	--color_text:var(--color1,#F1F4E4);
}
body.template-wzm-bierviltjes, html:has(body.template-wzm-bierviltjes)  {
	overflow-x: hidden;
}
html:has(body.template-wzm-bierviltjes) {
	overflow-y: hidden;
}
body.template-wzm-bierviltjes .campagne-wrapper {
	position: relative;
	overflow: hidden;
	padding-top: 100px;
}
.bierviltjes-hscroller {
	
}
.bierviltje h2 {
	font-size:30px;
	line-height: 40px;
}
.bierviltje h3 {
	font-size: 17px;
	line-height: 1.3;
}
.bierviltje p {
	font-size:14px;
	line-height: 1.1;
}

.bierviltje:not(.selected) {
	pointer-events: none;
	filter: brightness(80%);
}
.bierviltjes-hscroller {
	min-height: 400px;
}
@media only screen and (max-width:660px) {
	.bierviltjes-hscroller {
		min-height: 660px;
	}
}
.bierviltjes-hscroller .bierviltje {
	opacity: 0;
	
	display: flex;
	
	position: absolute;
	left: 50%;
	margin-left: -200px;
	bottom:20px;
	width: 440px;
	height: 440px;
	
	z-index: 1;
	
	transition: 0.5s ease all;

	
	color:#fff;
	box-shadow: 5px 5px 14px 0px rgba(0,0,0,0.1), 0px 0px 0px 0.01px #6bceea;
	border-radius: 20px;
	/* Licht kartelig randje via SVG mask */
	/*-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><filter id="f"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" /></filter><rect width="100%" height="100%" filter="url(%23f)" /></svg>');
	-webkit-mask-size: 200%;
	
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"><filter id="f"><feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="0.1" /></filter><rect width="100%" height="100%" filter="url(%23f)" /></svg>');
	mask-size: 100%;*/

	
}
body:not(.is-touch-device)  .bierviltjes-hscroller .bierviltje:is(:hover, :active) {
	transition: 0.1s ease all;
	box-shadow: 5px 5px 14px 0px rgba(0,0,0,0.1), 0px 0px 0px 3px #6bceea;
}


@media only screen and (max-width:660px) {
	.bierviltjes-hscroller .bierviltje {
		bottom:auto;
		top: 30px;
	}
}
.cms-helperbar-wrapper  {
	display: none!important;
}
.bierviltjes-hscroller .bierviltje.selected {  
	pointer-events: all;	
}
body > .bierviltje {
	position: absolute;
	left: -10px;
	top: 50%;
	right: auto;
}
body > .bierviltje * {
	color:#f1f4e4!important;
}
body > .bierviltje  p {
	padding-left: 20px;
	padding-right: 20px;
}

.bierviltje .bierviltje-voorkant img {
	position: absolute!important;
	
	width: calc(100% - 80px);
	height: calc(100% - 80px);
	left: 40px;
	right: 40px;
	top: 40px;
	bottom: 40px;
	mix-blend-mode:darken;
	pointer-events: none;
	object-fit: contain;
}

.bierviltje {
	min-width: calc(100% - 80px);
	min-height: calc(100% - 80px);
}

@media only screen and (min-width:660px) {
	.bierviltje  {
		min-width: 400px;
		min-height: 400px;
		max-width: 400px;
	}
}

.bierviltjes-hscroller .bierviltje .bierviltje-voorkant  > *:not(img) {
	z-index: +1;
}
.bierviltje .bierviltje-voorkant,
 .bierviltje .bierviltje-achterkant {
	
	
	background-image: url('/themes/wezienmekaar2027/images/bierviltjes/biervilt-grain.png');
	background-color: var(--color1,#194a60);
	margin: 0px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 10px;
	
	border-radius: 20px;
	
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	clip-path: inset(0 0 0 0);
	transition: 0.3s ease all;
}


@media only screen and (min-width:660px) {
	.bierviltjes-hscroller .bierviltje .bierviltje-voorkant,
	.bierviltjes-hscroller .bierviltje .bierviltje-achterkant {
		padding: 30px;
	}
}
.bierviltjes-hscroller .bierviltje .bierviltje-voorkant * { 
	color:var(--color2bright,#F1F4E4);
	user-select: none;
}
 
.bierviltjes-hscroller .bierviltje .bierviltje-achterkant {
	clip-path: inset(100% 0 0 0); 
		background-color: var(--color2bright,#F1F4E4);
}
.bierviltjes-hscroller .bierviltje .bierviltje-achterkant > * {
	margin: 0px 0px;
}
body:not(.is-touch-device)  .bierviltjes-hscroller .bierviltje:not(.show-achterkant):hover .bierviltje-achterkant {
	transition-delay: 0.5s;
}
body:not(.is-touch-device) .bierviltjes-hscroller .bierviltje:hover .bierviltje-achterkant,
.bierviltjes-hscroller .bierviltje.selected.show-achterkant  .bierviltje-achterkant {
	clip-path: inset(0% 0 0 0)!important; 

}
.is-touch-device  * {
	user-select: none;
}

.bierviltjes-hscroller .bierviltje .bierviltje-voorkant {

}
.bierviltje {
	 	transform: translate(0,0) rotate(-1deg);
}
.bierviltje:nth-child(even) {
	 	transform: translate(0,0) rotate(1deg);
}
.bierviltje-achterkant {
	display: none;
}

.bierviltje.selected, .bierviltje.selected + .bierviltje, .bierviltje.selected + .bierviltje + .bierviltje, .bierviltje.passed:last-of-type {
	opacity: 1;
}
.bierviltje.passed:has( + .selected) {
	opacity: 1;
}
.bierviltje.passed {
 	transform: translate(-90%,50%) rotate(-20deg);
}
.bierviltje.passed:has( + .selected)  {
	transform: translate(-85%,30%) rotate(-23deg);
	filter: brightness(60%);
}

.bierviltje.selected + .bierviltje {
	transform: translate(85%,30%) rotate(20deg);
}
.bierviltje.selected + .bierviltje + .bierviltje {
	z-index: 0;
	filter: brightness(50%);
	transform: translate(170%,80%) rotate(30deg);
}
.bierviltje.selected + .bierviltje ~ .bierviltje {
	z-index: 0;
	filter: brightness(50%);
	transform: translate(170%,80%) rotate(30deg);
}

.bierviltje h2 {
	text-align: center;
}
.bierviltje.selected {
	z-index: 8;
}
h2:has( + h2) {
	text-align: right;
}
h2:has( + h2) {
/*	font-weight: 900;	*/
}
h2:has( + h2), .bierviltje h2 {
	padding-left: 10px;

	font-size:26px!important;
	line-height: 1.3!important;
}


.bierviltje h2 + h2 {
	margin-top: 20px;
	font-size:18px!important;
	text-align: left;
}


@media only screen and (min-width:660px) {
	
	.bierviltje h2:has( + h2) {
		padding-left: 10px;
		text-align: right;
		font-size:36px!important;
	}
	.bierviltje h2 + h2 {
		margin-top: 20px;
		text-align: left;
		font-size:28px!important;
	}

}

@media only screen and (max-width:660px) {
	.bierviltje h3 {
		font-size:3.6vw;
		line-height: 1.3;
		font-weight: 900;
	}

	.bierviltje-achterkant {
		padding: 20px!important;
	}
	.bierviltje-achterkant > *, .bierviltje .bierviltje-achterkant  p {
		line-height: 1.2!important;
		font-size:2.6vw;
	}
}

*[onSwipeLeft] {
	cursor: grab;
}