/* BLOCK TYPE 5 - image + text */
/* BLOCK TYPE 5 - image + text */
/* BLOCK TYPE 5 - image + text */

.block_type_5 {
	position: relative;
	padding: 10vw 0;

	background-color: var(--clr-black-100);
}
.block_type_5::before {
	content: '5';
	background-color: #84de02;
}
/* THEME */
.block_type_5.theme_licht {
	background-color: var(--bg-light);
	color: var(--txt-light);
}
.block_type_5.theme_donker {
	background-color: var(--bg-dark);
	color: var(--txt-dark);
}

.block_type_5 .link a::after {
	background-color: white;
}

.block_type_5 .left {
	width: 60%;
	float: left;
	margin-top: -15vw;
	margin-left: 5vw;
	padding: 6vw 4vw;	

	opacity: 0;
	transform: translateX(-150px);
	transition: 0.5s ease-in-out;
	transition-delay: 0.25s;
}

.block_type_5 .right {
	width: 60%;
	float: right;

	opacity: 0;
	transform: translateX(150px);
	transition: 0.5s ease-in-out;
}
.block_type_5 .right .image {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
}

/* .block_type_5 .link a::after {
	content: url(/assets/img/arrow.svg);
	background-color: white;
	border-color: white;
}
.block_type_5 .left .link a:hover {
	color: var(--bg-dark);
}
.block_type_5 .link a:hover::after {
	content: url(/assets/img/arrow_white.svg);
	background-color: var(--bg-dark);
	border-color: var(--bg-dark);
} */

.block_type_5.into-view .left,
.block_type_5.into-view .right {
	transform: translateX(0px);
	opacity: 1;
}

/* COLOR */
.block_type_5.color_magenta .left {
	background-color: var(--clr-magenta-90);
	color: white;
}
.block_type_5.color_blauw .left {
	background-color: var(--clr-blue-90);
	color: white;
}
.block_type_5.color_oranje .left {
	background-color: var(--clr-orange-90);
	color: white;
}
.block_type_5.color_groen .left {
	background-color: var(--clr-green-90);
	color: white;
}

@media (max-width: 1000px) {
	.block_type_5 .left {
		width: 95%;
		margin-left: 0;
		padding: 10vw 5vw;
	}
	.block_type_5 .right {
		width: 95%;
	}
}