.teamleden{
	--lightswitch_hoogte: 20rem;
    transition: 0.3s background-color;
	padding-bottom: calc(var(--jumbotron-standard-margin) + var(--lightswitch_hoogte)) !important;
	overflow: clip;
}

.teamleden.light-on {
    background-color: #fff;
	color: #000;
}

.teamleden h2,
.teamleden h3,
.teamleden .teamlid_functie,
.teamleden p{
	transition: 0.3s color;
}

.teamleden.light-on h2{
	color: #000;
}

.team_grid{
	display: grid;
	gap: 6rem 3rem;  
	opacity: 0.2;
	transition: 0.3s opacity;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.light-on .team_grid{
	opacity: 1;
}

.team_lid_image_container{
	display: grid;
}

.team_lid_image_container > div{
	grid-column: 1;
	grid-row: 1;
}

.teamlid_functie{
	margin: 0.5rem 0 2rem;
	opacity: 0.5;
}

.teamlid_functie:last-child{
	margin-bottom: 0 !important;
}

.team_lid_image_container{
	mix-blend-mode: initial;
	margin-bottom: 2rem;
	transition: 0.3s all;
}

.light-on .team_lid_image_container{
	mix-blend-mode: none;
}

.licht_aan > div{
	position: sticky;
    margin-top: var(--jumbotron-standard-margin);
    text-align: center;
    top: calc(100% - var(--lightswitch_hoogte));
	padding-bottom: 4rem;
	padding-top: 3rem;
}

/* Dark background */
.licht_aan > div:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(87, 87, 86, 0) 0%, #575756 50%);
    opacity: 1;
    transition: opacity 0.3s;
    z-index: -1;
    width: 200vw;
    left: -100vw;
}

/* Light background */
.licht_aan > div:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF 50%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
    width: 200vw;
    left: -100vw;
}

/* When light-on is active, fade out the dark background and fade in the light background */
.light-on .licht_aan > div:before {
    opacity: 0;
}

.light-on .licht_aan > div:after {
    opacity: 1;
}

.team_grid_container{
	display: grid;
	margin-top: 8rem;
}

.team_grid_container > div{
	grid-column: 1;
	grid-row: 1;
}

.team_grid_container > div.licht_aan{	
    height: calc(100% + var(--lightswitch_hoogte));
}

.licht_aan{
	z-index: 5;
	pointer-events: none;
}

#light_switch{
	background: #828282;
	width: 30rem;
	height: 8rem;
	border-radius: 10rem;
	color: #fff;
	text-decoration: none !important;
	display: inline-flex;
	padding: 0.5rem;
    transition: 0.3s all;
	pointer-events: all;
}

#light_switch span{
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	display: inline-flex;
    background: var(--oranje);
	font-size: 3rem;
    margin-left: clamp(0px, 25vw, calc(100% - 7rem));
    transition: 0.3s all;
}

.light-on #light_switch{
	background: #FDF6D5;
}

.light-on #light_switch span{
	background: var(--geel);
	margin-left: clamp(0px, 25vw, 0px);
}

.light-on .team_lid *,
.visible-light{
	color: #000;
}

.light-on .team_lid_image_container > div:nth-child(1){
	z-index: 2;
}

@media (max-width:767px)
{		
	.light-on .licht_aan > div{
		top: calc(100% - var(--lightswitch_hoogte) + 2.4rem);
	}
	
	#light_switch{
		width: 17rem;
		height: 6rem;
	}
	
	
	#light_switch span {
		width: 5rem;
		height: 5rem;
    	margin-left: clamp(0px, 29vw, calc(100% - 5rem));
	}
}

@media (min-width:768px) and (max-width:991px)
{
	.team_grid{
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
	
	#light_switch{
		width: 25rem;
	}
}

@media (min-width:992px) and (max-width:1199px)
{
	
}

@media (min-width:1200px) and (max-width:1399px)
{
    
}

@media (min-width:1400px)
{
    
}