.medewerker-img{
	position: relative;
	padding: 7px;
}

.medewerker-img:before{
	content: "";
	position: absolute;	
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 308 308'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:url(%23Naamloos_verloop_2);%7D%3C/style%3E%3ClinearGradient id='Naamloos_verloop_2' y1='154' x2='308' y2='154' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%232f3247'/%3E%3Cstop offset='0.51' stop-color='%2300755e'/%3E%3Cstop offset='1' stop-color='%23dbcc00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Laag_2' data-name='Laag 2'%3E%3Cg id='Laag_1-2' data-name='Laag 1'%3E%3Cpath class='cls-1' d='M154,308C69.08,308,0,238.92,0,154S69.08,0,154,0,308,69.08,308,154a4,4,0,0,1-8,0C300,73.5,234.51,8,154,8S8,73.5,8,154,73.5,300,154,300a4,4,0,0,1,0,8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	border-radius: 50%;
	transition: 0.3s transform;
}

.medewerker-img img{
	border-radius: 50%;
}

.medewerker{
	font-size: 1.6rem;
	line-height: 2.4rem;
}

.medewerker strong{
	line-height: 3.2rem;
	font-size: 2rem;
}

.medewerker-info{
	padding: 1.5rem 3rem 0;
}

.medewerkers-row{
	row-gap: 3rem;
}

.medewerkers-items{
	margin-bottom: 8rem;
}

.bg-rotate-1 .medewerker-img:before{
	
}

.bg-rotate-1:hover .medewerker-img:before{
	transform: rotate(25deg);
}

.bg-rotate-2 .medewerker-img:before{
	transform: rotate(50deg);
}

.bg-rotate-2:hover .medewerker-img:before{
	transform: rotate(75deg);
}

.bg-rotate-3 .medewerker-img:before{
	transform: rotate(100deg);
}

.bg-rotate-3:hover .medewerker-img:before{
	transform: rotate(125deg);
}

.bg-rotate-4 .medewerker-img:before{
	transform: rotate(150deg);
}

.bg-rotate-4:hover .medewerker-img:before{
	transform: rotate(175deg);
}

@supports not (row-gap: 1rem) {
   /* 
	Isolated code for not supporting flexbox row-gap so have to work with margins. Thanks Safari :/ 
	*/
	.medewerkers-row > div{
		margin-bottom: 3rem;
	}
}

@media (max-width:767px)
{		
	.medewerkers-items > div{
		flex-basis: 50%;
		max-width: 50%;
	}
	
	.medewerker-info {
		padding: 1.5rem 0 0;
	}
	
	.medewerker-img {
		padding: 3px;
	}
}

@media (min-width:768px) and (max-width:991px)
{
	
}

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

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

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