.content_met_afbeelding_animatie_container{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 3rem;
}

.content_met_afbeelding_animatie_content{
	grid-column: 1 / 6;
    display: flex;
    flex-direction: column;
    gap: 20rem;
}

.content_met_afbeelding_animatie_afbeeldingen{
	grid-column: 8 / -1;
    display: flex;
    flex-direction: column;
    gap: 20rem;
}

.content_met_afbeelding_animatie_afbeeldingen img{
	width: 100%;
	height: auto;
}

.animatie_content{
	position: sticky;
	top: calc(var(--jumbotron-standard-margin) / 2);
	opacity: 0;
}

.animatie_content,
.animatie_afbeelding{
    display: flex;
    flex-direction: column;
}

.animatie_content:last-child, 
.animatie_afbeelding:last-child{
	height: auto !important;
}

.fade-in {
    animation: fadeInAnimation 0.5s forwards;
}

.fade-out {
    animation: fadeOutAnimation 0.5s forwards;
}

@keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOutAnimation {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (max-width:767px)
{		
	.content_met_afbeelding_animatie_content{
		grid-column: 1 / -1;
		gap: 12rem;
	}
	
	.animatie_content{
		position: static;
		opacity: 1 !important;
	}
	
	.content_met_afbeelding_animatie_afbeeldingen{
		display: none !important;
	}
	
	.animatie_content img{
		width: 100%;
		max-width: 30rem !important;
		height: auto;
	}
}

@media (min-width:768px) and (max-width:991px)
{
	.content_met_afbeelding_animatie_content{
		grid-column: 1 / 7;
	}
}

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

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

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