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

body dialog {
	border: none; padding: 0; border: none;
	overflow: visible; border-radius: 10px;
}
body dialog > .dialog-wrapper {
	width: calc(100vw - 40px); max-width: 750px;
	padding: 20px;
}
body dialog > button.close-dialog {
	position: absolute; bottom: 100%; right: 0; left: auto; z-index: 5;
	display: flex; align-items: center; justify-content: center;
	border-radius: 0; border: none; gap: 1em; text-transform: lowercase;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	color: #ffffff; padding: 0; translate: 0 -20px; 
	background: transparent;
}
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-color: #0E1814; opacity: 0.6;
	transition: opacity 0.3s ease-in-out;
}
body dialog iframe {
	width: 100%; 
	/* aspect-ratio: 16/9; height: auto; */
	vertical-align: middle;
}


body .ervaring-popup div.dialog-wrapper  {
	background: #213C31;
	color: white;
	border-radius: 10px;
	padding: 92px 70px; 
	
}

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;
}

body .ervaring-popup div.dialog-wrapper .titel {
font-size: 24px;
margin-bottom: 1.5rem;
}