.leiding_foto {
	width: 20vw; /* Kleinere breedte */
	border-radius: 50%;
	margin: 0; /* Verwijder marge */
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

.leiding {
	all: unset;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%; /* Zorg ervoor dat de container de volledige breedte van de pagina inneemt */
	gap: 0px; /* Verwijder de ruimte tussen elementen */
	margin: 0; /* Verwijder marges */
	padding: 0; /* Verwijder padding */
}

.leiding_functie {
	font-size: 20px; /* Iets kleiner lettertype */
	font-weight: bold;
	text-decoration: underline;
}

.leiding_naam {
	font-size: 16px; /* Iets kleiner lettertype */
	font-weight: bold;
}

.email {
	font-size: 18px; /* Iets kleiner lettertype */
	color: rgb(247, 148, 51);
	background-color: rgb(46, 85, 56);
	padding: 5px; /* Kleinere padding */
	border-radius: 8px; /* Kleinere border-radius */
}

.email:hover {
	cursor: pointer;
}

.nummer {
	font-size: 18px; /* Iets kleiner lettertype */
	margin-top: 3px; /* Kleinere marge */
	color: rgb(247, 148, 51);
	background-color: rgb(46, 85, 56);
	padding: 3px; /* Kleinere padding */
	border-radius: 8px; /* Kleinere border-radius */
}

.nummer:hover {
	cursor: pointer;
}

.leiding_container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	gap: 10px; /* Verminderde gap */
	margin: unset;
}

.leiding_functie {
	margin-top: 3px;
	margin-bottom: 3px;
}

.leiding_totem,
.leiding_naam,
.nummer,
.email {
	margin: 5px; /* Verwijder marges */
	padding: 5px; /* Verwijder padding */
	line-height: 1.2; /* Maak de tekst dichter op elkaar */
}

.info {
	margin-top: 3px;
	margin-bottom: 3px;
}

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}
.zijbalk {
	height: 95%;
	width:min(48vw , 250px); /* Breedte van de zijbalk */
	position: fixed;
	top: 150px;
	left: -150px; /* Initieel buiten beeld */
	background-color: rgb(46, 85, 56);
	color: rgb(247, 148, 51);
	padding-top: 20px;
	transition: 0.3s;
	z-index: 2; /* Zorg ervoor dat de zijbalk boven andere elementen staat */
}
.zijbalk:hover {
	left: 0;
}

.zijbalk a {
	padding: 10px 8px 10px 16px;
	text-decoration: none;
	font-size: 18px;
	display: block;
	color: rgb(247, 148, 51);
}

.logo_container {
	display: flex;
	justify-content: right;
	padding: 10px;
	margin-bottom: 20px; /* Ruimte onder de logo */
	transition: opacity 0.3s; /* Transitie voor de opacity */
}

.zijbalk_logo {
	width: min(50%, 100px); /* Max breedte van 100px */
}

.zijbalk a:hover {
	background-color: rgb(247, 148, 51);
	color: rgb(46, 85, 56);
}

.zijbalk:hover .logo_container {
	opacity: 0;
}

.uniform_foto {
	width: max(30vw,200px); /* Breedte is 10% van de viewport */
	height: auto; /* Zorg ervoor dat de hoogte proportioneel blijft */
	border-radius: 2%; /* Ronde hoeken */
	margin: 0 auto; /* Centreer de afbeelding */
	object-fit: cover; /* Zorg ervoor dat de afbeelding netjes wordt bijgesneden */
	transition: all 0.3s ease; 
}

.uniform_container {
	width: 100%; /* Zorg ervoor dat de container de volledige breedte van de pagina inneemt */
	margin: 0 auto; /* Centreer de container */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0px; /* Verwijder de ruimte tussen elementen */
	margin: 0; /* Verwijder marges */
	padding: 0; /* Verwijder padding */
}

.foto {
    width: 50%;
    height: 100%;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);

}

@media (max-width: 900px) {
	.zijbalk {
		top: 160px; /* Verander de top positie voor kleinere schermen */
		opacity: 0;

	}
}