@keyframes openDialog {
	from {
		opacity: 0; translate: 0 -20px;
	}
	to {
		opacity: 1; translate: 0 0;
	}
}
@keyframes closeDialog {
	to {
		opacity: 0; translate: 0 -20px;
	}
}

.dialog-open-no-scroll {
	overflow: hidden !important; 
}

body dialog {
	border: none; 
	padding: 0; 
	border: none;
	border-radius: 10px 10px 10px 10px;
	overflow: visible;
	max-height: 80vh;
	max-width: 672px;
	/* margin: auto auto 0px auto; */
}

body dialog >.dialog-wrapper {
	background: #213C31;
	color: white;
	border-radius: 9px;
	padding: 0px; 
	overflow-y: scroll;
	max-height: 80vh;
	width: calc(100vw - 40px); 
	max-width: 100%;
}



body dialog:has(.video) {
	max-width: 992px;
	/* height: auto; */
}

body dialog > .dialog-wrapper.video {
	/* max-width: 992px;
	height: auto; */
	aspect-ratio: 16 / 9;
}

body dialog:has(.verhaal) {
	max-width: 992px;
	margin: auto auto 0px auto;
	border-radius: 10px 10px 0px 0px;
	max-height: 90vh;
}
	

body dialog > .dialog-wrapper.verhaal {
	max-width: 992px;
	border-radius: 9px 9px 0px 0px;
	max-height: 90vh;
}


body dialog iframe {
width: 100%;
height: 100%;
vertical-align: middle;
}


body dialog > button.close-dialog {
	position: absolute; top: 0; left: 0; z-index: 5;
	display: flex; align-items: center; justify-content: flex-end; gap: 0.5em;
	ius: 0; border: none; text-transform: lowercase;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	color: #ffffff; padding: 0.5em 1em; width: 100%;
	background: transparent; transform: translate(0px, -100%);
}
body dialog[open] {
	animation: openDialog 0.5s ease normal;
	-webkit-animation: openDialog 0.5s ease normal;
}
body dialog.hideDialog {
	animation: closeDialog 0.5s ease normal;
	-webkit-animation: closeDialog 0.5s ease normal;
}
body dialog.hideDialog::backdrop {
	opacity: 0;
}

body dialog::backdrop {
background: rgba(14, 24, 20, 0.70);
backdrop-filter: blur(5px);
transition: opacity 0.3s ease-in-out;
}



body dialog.ervaring-popup:active  {
border: none;	
outline: none;
}
body dialog.ervaring-popup:focus  {
border: none;	
outline: none;
}


body .ervaring-popup div.dialog-wrapper p {
color: white;	
font-size: 18px;
}

body .ervaring-popup div.dialog-wrapper .gegevens {
font-size: 18px;
display: flex;
flex-direction: column;
margin-bottom: 10px;
}

body .ervaring-popup div.dialog-wrapper .gegevens .naam_en_land {
font-weight: bold;	
}

body .ervaring-popup div.dialog-wrapper .label {
background-color: #36B57E;
padding: 12px 40px;
border-radius: 100px;
display: inline-block;
margin-bottom: 30px;
font-size: 16px;
font-weight: bold;
}
	
body .ervaring-popup div.dialog-wrapper .titel {
font-size: 24px;
margin-bottom: 1.5rem;
font-weight: bold;
}

body .ervaring-popup div.dialog-wrapper:has(.label) .titel {
font-size: 40px;
margin-bottom: 1.5rem;
font-weight: bold;
}


body #ervaringenGrid .ervaring-popup div.dialog-wrapper .ervaring-content {
	padding: 56px 70px 56px 70px; 
}

body #ervaringenGrid .ervaring-popup div.dialog-wrapper .ervaring-content h4 {
	color: #36B57E;
	margin: 0 0 15px;
}

body .ervaring-popup .trustpilot-svg {
	display: flex;
	justify-content: space-between;
	margin-bottom: 37px;
}

body .ervaring-popup .trustpilot-logo {
	margin-right: 30px; 
}

body #ervaringenGrid .ervaring-popup div.dialog-wrapper .ervaring-image-header {
	width: 100%;
	aspect-ratio: 3/1;
	border-radius: 10px;
}

body .ervaring-popup div.dialog-wrapper .gallery-image {
	position: absolute;
	aspect-ratio: 2/1;
	margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
body #ervaringenGrid .ervaring-popup div.dialog-wrapper .ervaring-content {
	padding: 50px 20px 40px 20px; 
}
	
	body .ervaring-popup div.dialog-wrapper:has(.label) .titel {
	font-size: 24px;
	}

}