/**
 * SVI CSS
 * @author: Lukas De Roo
**/


/* Importeer Bootstrap */
@import "bootstrap/bootstrap.css";

html {
	box-sizing:border-box;
	/* Font */
	font-family: "Bebas Neue", "sans-serif";
	font-weight: 400;
	font-style: normal;
	
	/* Kleuren */
	--groen: #949852;
	--groen-trans: #94985266;
	--wit: #fff;
	--blauw: #6498d3;
	--blauw-trans: #6498d366;
	--oker: #d0b039;
	--oker-trans: #d0b03966;
	--bruin: #a25e2a;
	--bruin-trans: #a25e2a66;
	height: 100vh;
}

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

ul {
	list-style: none;
}

/* Kleur body  */
body {
	background-color: var(--wit);
}

.green {
	color: var(--groen);
}
.blue {
	color: var(--blauw);
}

.vh-25 {
	height: 25vh;
}

.toggleCard {
	overflow: hidden;
	
	img {
		object-fit: cover;
	}
	
	.card-img-overlay {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.green-overlay {
		background-color: var(--groen-trans);
	}
	.blue-overlay {
		background-color: var(--blauw-trans);
	}
	.oker-overlay {
		background-color: var(--oker-trans);
	}
	.brown-overlay {
		background-color: var(--bruin-trans);
	}
}

#InteresseData {
	background-color: var(--groen);
	
	.Cards {
		justify-content: center;
		gap: 1rem;
	}
	
	.timeline {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		/* cards */
		.event {
			position: relative;
			background: var(--wit);
			padding: 1rem;
			margin-bottom: 2.5rem;
			border-radius: 0.75rem;
			text-align: center;
			
			.split {
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
			}
		}
		
		/* arrow shaft */
		.event::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 100%;
			transform: translateX(-50%);
			width: 6px;
			height: 20px;
			background: var(--wit);
		}
		
		/* arrow head */
		.event::before {
			content: "";
			position: absolute;
			left: 50%;
			top: calc(100% + 20px);
			transform: translateX(-50%);
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-top: 12px solid var(--wit);
		}
		
		/* remove arrow on last card */
		.event:last-child::after,
		.event:last-child::before {
			display: none;
		}
	}
}

#RuimteData {
	background-color: var(--blauw);
}

#PlaatsData {
	background-color: var(--oker);
}

#ContactData {
	background-color: var(--bruin);
}