/* ---- FRONT-END ---- */
#hbn-360graden-fotos-wrapper h2.hbn-360graden-fotos-title {
	font-family: 'Averta Bold';
	font-size: clamp( 28px, 2.73504vw, 32px);
	color: #272049;
	margin-bottom: 30px;
}

#hbn-360graden-fotos-wrapper .hbn-360graden-fotos-introtext {
	margin-bottom: 30px;
}

#hbn-360graden-fotos-wrapper .hbn-foto-thumb-container {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	margin-bottom: 30px;
}

#hbn-360graden-fotos-wrapper .hbn-foto-thumb-container a {
	display: block;
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	width: 100%;
}

#hbn-360graden-fotos-wrapper .hbn-foto-thumb-container a.image-overlay::after {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	height: 100%;
	width: 100%;
	justify-content: center;
	align-items: center;
	content: 'Bekijk meer foto\'s';
	font-family: 'Averta Semibold';
	font-size: clamp( 14px, 1.88034vw, 22px );
	color: #FFFFFF;
	background-color: #27204999;
}

#hbn-360graden-fotos-wrapper .hbn-foto-thumb-container img,
#hbn-360graden-fotos-wrapper .hbn-foto-thumb-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

#hbn-360graden-fotos-wrapper .hbn-foto-thumb-container img {
	object-fit: cover;
}

#hbn-360graden-fotos-wrapper .hbn-foto-thumb-container .video-overlay {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: transparent;
}


/* ---- PREVIEW ---- */
#hbn-360graden-fotos-wrapper.preview {
	display: block;
	height: 100%;
	overflow: hidden;
	width: 100%;
	float: inherit;
}

#hbn-360graden-fotos-wrapper.preview #hbn-foto-thumbs-wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 30px;
}

#hbn-360graden-fotos-wrapper.preview #hbn-foto-thumbs-wrapper .hbn-foto-thumb-container {
	display: none;
	flex: 0 0 calc( 33.33333% - 20px);
	height: 0;
	padding-bottom: 20%;
}

#hbn-360graden-fotos-wrapper.preview #hbn-foto-thumbs-wrapper .hbn-foto-thumb-container:nth-child(-n+3) {
	display: flex;
}




@media(max-width: 767px) {
	#hbn-360graden-fotos-wrapper .hbn-foto-thumb-container {
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
		margin-bottom: 30px;
	}
}





/* ---- PREVIEW BACK-END ---- */
#text-wrapper {
	padding: 35px 0;
}