.zpf-map-results {
	position: relative;
}

.zpf-map-results .map-result {
	display: flex;
	opacity: 0;
	width: 100%;
	transition: 0.5s ease opacity;
	gap: 0;
	height:0px;
	user-select:none;
	z-index: 0;    z-index: 0;
}
@media screen and (min-width:992px){
.map-result .zpf-projecten-card:nth-of-type(1){
	margin-bottom:150px;
}
.map-result .zpf-projecten-card:nth-of-type(2){
	margin-top:75px;
	margin-bottom:75px;
}
.map-result .zpf-projecten-card:nth-of-type(3){
	margin-top:150px;
}
}
.zpf-projecten-card{
    width: 33.333%;    background-repeat: no-repeat;
	aspect-ratio:45/67;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-position: center;
    background-size: auto 100%;
	transition:background-size 0.3s ease;
	position:relative;
    padding: 0;
	overflow:hidden;
    margin: 0;
}
.zpf-projecten-card::before{
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0.4;
	background: rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 1) 100%);
background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#000000", GradientType=0);
}
.zpf-projecten-card:hover,.zpf-projecten-card:focus{
	background-size:auto 105%;
	
    outline: none!important;
}
.zpf-map-card-title button{
	background-color:transparent;
}
.zpf-map-card-title h4{
	color:white;
	
}
.zpf-map-card-title{
	padding:45px 35px;
	position:relative;
}
.zpf-map-results .display-map-result {
	display: flex;
	height:fit-content;
	user-select:initial;
	z-index: 99;
	opacity: 1;
}
.display-map-result .zpf-projecten-card{

	margin:0 15px;
	
}
.selected-region {
	fill: var(--color-primary) !important;
}

@media screen and (max-width: 992px) {
	.zpf-map-results .map-result .projecten-card {
		width: calc(100% - 5px);
	}

	.zpf-map-results .map-result {
		flex-wrap: wrap;
	}

	.col-md-7.results_container {
		min-height: 1115px !important;
	}

}
		.zpf-map svg {
			width: 100%;
			height: auto;
			display: block;
		}

		.zpf-map .region {
			fill: #dbdbdb;
			cursor: pointer;
			transition: fill .15s ease-in-out;
			outline: none;
			stroke: none;
		}
		.zpf-map .region.no-projects {
			cursor: default;

    }

		.zpf-map .region:not(.no-projects):hover,
		.zpf-map .region:not(.no-projects)[aria-pressed="true"] {
			fill: var(--color-primary) !important;
		}

		/* === loader (jouw spinner) === */
		.zo-loader {
			width: 48px;
			height: 48px;
			border: 5px solid;
			border-color: var(--color-primary) transparent;
			border-radius: 50%;
			display: inline-block;
			box-sizing: border-box;
			animation: zo-rotation 1s linear infinite;
		}

		.loaderwrap {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			padding: 2rem 0;
		}

		@keyframes zo-rotation {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		/** results ***/
		.col-md-8.results_container {
			background: #f2f2f2;
			padding: 50px 30px;
		}

#zpf-map-container{
    display: flex;
	
}
.zpf-map-results{
	margin:0 -15px;
}
 .conform-to-container{
	
}
.zpf-map-map{	
    width: 100%;
    padding-left: 120px;
}
#zpf-map-explanation{
    position: absolute;
    top: 13%;
    left: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#zpf-map-explanation > small{
    font-size: 18px;
    color: #898989;
}
@media screen and (min-width:1560px){
.zpf-map-results{
		margin-top:-150px;
	}
}
@media screen and (max-width:992px){
	.zpf-projecten-card{
		width:50%;
	}
	.map-result{
		flex-wrap:nowrap;
	}
	.zpf-map{
		
    margin-right: -15px;
	}
	#zpf-map-explanation{
		
    top: 7%;
    left: 0%;
	}
	#zpf-map-explanation > small{
    font-size: 11px;
		
	}
	#zpf-map-explanation svg{
		
    width: 54px;
	}
.zpf-map-map{	
    padding-left: 0;}
}
@media screen and (max-width:768px){
	.zpf-projecten-card{
		width:100%;
	}
	.zpf-map-card-title{
		padding:20px;
	}
	.display-map-result .zpf-projecten-card{
    margin-bottom: 25px;
		
	}
}