.presentation a{
	color:pink;
}
.left a{
	color:pink;
}

.presentation a:visted{
	color:dark-pink;
}

.image-left
{width: 30%;
margin:20px;
margin-top:0px;


}

.text
{display: inline-block;
vertical-align:top;
max-width: 60%;
	text-align: left;
	
}

}
.left {
	text-align: left;
	margin-left: 20%;
	width: 60%;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	padding-bottom: 15px;

	
}
.left h2
{padding-top:10px;
	text-align:center;



}
.soirs {
	text-align: center;
}
.hfs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
}
.hfs-item {
	width: 600px;
	margin: 20px;
	max-width: 100%;
	background-color: var(--second);
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 10px 15px #7e878d;
}
	.hfs-item img {
		object-fit: contain;
		max-width: 100%;
		
	}

@media (prefers-reduced-motion: no-preference) {
	img {
		animation: fade-in linear;
		animation-timeline: view();
		animation-range: entry;
	}


		@keyframes fade-in {
			0% {
				scale: .5;
				opacity: 0;
			}
			100% {
				scale: 1;
				opacity: 1;
			}
		}

	}

.hfs-desc {
	max-height: 90px;
	overflow: hidden;
	transition: max-height 3s ease-out;
	
}
.hfs-item:hover .hfs-desc {
	height: fit-content;
	max-height: 1000px;
	transition: max-height 5s ease-out;
}
.image-left
{max-height:600px;
object-fit: contain;
}



@media screen and (max-width: 800px) {
	.left 
	{text-align: center;
	margin: 0;
	width:100%;
	
	
	}
	.image-left
	{width:60%;
	margin:0;
	}
	
	.text
    {
     max-width: 90%;
	
    }
	
	
	.top-img p
	{font-size: 20px;
	}
	
	.presentatie
	{max-width: 90%;
	margin-left:5%;
	}
	
	
}