*, *::after, *::before {
	box-sizing: border-box;
}

.popup{
	position: fixed;
	top: 50%;
	left: 50%; /* Popup in het midden*/
	transform: translate(-50%, -50%) scale(0); /* scale(0) wanneer js ready is.*/
	transition: 200ms ease-in-out; /* Ook voor transitie*/
	z-index: 10; /* om hem naar de voorgrond te trekken */
	background-color: white; /* zodat de overlay niet in de weg zit*/
	width: 500px; /* de breedte van de popup*/
	max-width: 80%; /* meebeweging met browser*/
	box-shadow: 0 6px 23px 0 rgba(0,0,0,.16);
}

.popup.active{
	transform: translate(-50%, -50%) scale(1); /*scale(1) active popup (js)*/
}

.popup-header{
	padding: 10px 15px; /* extra padding voor de looks*/
	display: flex; /* meebeweging*/
	justify-content: space-between; /* kruis en titel worden gescheiden*/
	align-items: center; /* alignment*/
	border-bottom: 1px solid white; /* balk voor de looks*/
}

.popup-header .title/*de titel*/{
	font-size: 1.7rem; /* grotere font*/
	font-weight: bold; /* dik gedrukt*/
	font-family: courier, monospace;
	color: black;
}

.popup-header .close-button/*sluitknop (rechtsboven)*/{
	cursor: pointer;
	border: none; /* geen border om knop*/
	outline: none; /* haalt ook border weg*/
	background: none; /* haalt achtergrond weg*/
	font-size: 1.7rem; /* maakt het groter*/
	font-weight: bold; /* dikgedrukt*/
	color: black;
}

.popup-image/*css voor image*/{
	padding: 1px 15px;
	text-align: center; /* image center*/
	border-bottom: 1px solid white; /* rand onder image*/
	background-color: white;
}
.popup-body{
	padding: 10px 15px;
	align-items: center; 
	font-family: courier, monospace; /* lettertype*/
	color: black;
	background-color: rgba(0, 0, 0, .2)
}

.popup-footer{
	padding: 10px 10px;
	align-items: center; /* naar het midden halen*/
	position: relative; 
	display: flex; /* flex met browser*/
	justify-content: space-between; /* ruimte tussen beide*/
	background-color: rgba(0, 0, 0, .2)
}

.popup-footer .button{
	padding: 10px 10px; 
	cursor: pointer;
	border: none; /* border weg*/
	background: #0067b8; /* witte achtergrond */
	font-weight: ;
	font-size: 1rem;
	color: white;
}

.popup-footer .button:hover{/* voor cursor hover*/
	text-decoration: underline; /* lijn onder text*/
}

#overlay{
	position: fixed;
	opacity: 0; /* niet zichtbaar wanneer popup er niet is*/
	transition: 200ms ease-in-out; /*transitie*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .5); /*grijs*/
	pointer-events: none; /* klikken is mogelijk*/
}

#overlay.active{
	opacity: 1; /* zichtbaar*/
	pointer-events: all; /* niks is klikbaar */
	z-index: 1; /* komt voor andere items te staan*/
}