/*
 * ============================================================
 * HJP - AUTOMATISCHE BREADCRUMBS
 * CSS
 * ============================================================
 */

.hjp-automatische-breadcrumb__bron {
	display: none !important;
}


/*
 * ============================================================
 * ELEMENTOR HERO
 * ============================================================
 */

.elementor-top-section
.hjp-automatische-breadcrumb {
	position: absolute;
	top: 28px;
	left: 50%;
	width: 1170px;
	max-width: calc(100% - 40px);
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	z-index: 100;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(
		255,
		255,
		255,
		0.75
	);
}


/*
 * Hero links.
 */

.elementor-top-section
.hjp-automatische-breadcrumb
a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 500;
}


.elementor-top-section
.hjp-automatische-breadcrumb
a:hover {
	color: #ffffff;
	text-decoration: underline;
}


/*
 * Hero huidige pagina.
 */

.elementor-top-section
.hjp-automatische-breadcrumb
.breadcrumb_last {
	color: #ffffff;
	font-weight: 600;
}


/*
 * Hero scheidingsteken.
 */

.elementor-top-section
.hjp-automatische-breadcrumb
.hjp-breadcrumb-scheidingsteken {

	color: rgba(
		255,
		255,
		255,
		0.55
	);
}


/*
 * ============================================================
 * ZWARTE BREADCRUMB-BALK
 * ============================================================
 */

.hjp-automatische-breadcrumb__balk {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	min-height: 60px;
	max-width: none !important;
	background: #000000 !important;
	box-sizing: border-box;
	padding: 0;
	margin: 0 0 25px 0 !important;
}


/*
 * Inhoud zwarte balk.
 */

.hjp-automatische-breadcrumb__balk
.hjp-automatische-breadcrumb {
	position: static;
	width: 1170px;
	max-width: calc(100% - 40px);
	min-height: 60px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(
		255,
		255,
		255,
		0.75
	);
}


/*
 * Links zwarte balk.
 */

.hjp-automatische-breadcrumb__balk
.hjp-automatische-breadcrumb
a {

	color: #ffffff;

	text-decoration: none;

	font-weight: 500;
}


.hjp-automatische-breadcrumb__balk
.hjp-automatische-breadcrumb
a:hover {
	color: #fdc300;
	text-decoration: underline;
}


/*
 * Huidige pagina.
 */

.hjp-automatische-breadcrumb__balk
.hjp-automatische-breadcrumb
.breadcrumb_last {
	color: #ffffff;
	font-weight: 600;
}


/*
 * Scheidingsteken.
 */

.hjp-automatische-breadcrumb__balk
.hjp-automatische-breadcrumb
.hjp-breadcrumb-scheidingsteken {
	color: rgba(
		255,
		255,
		255,
		0.55
	);
}


/*
 * ============================================================
 * SHOPTIMIZER LEGE BREADCRUMB-HEADER
 * ============================================================
*/

body.page
.shoptimizer-archive
.archive-header {
	display: none !important;
}


/*
 * Extra zekerheid voor andere Shoptimizer breadcrumb-
 * containers op gewone WordPress-pagina's.
 */

body.page:not(.woocommerce)
.site-breadcrumb,

body.page:not(.woocommerce)
.site-breadcrumbs,

body.page:not(.woocommerce)
.breadcrumb-wrapper,

body.page:not(.woocommerce)
.breadcrumb-area,

body.page:not(.woocommerce)
.breadcrumb-container {
	display: none !important;
}


/*
 * ============================================================
 * MOBIEL
 * ============================================================
 */

@media (max-width: 767px) {


	/*
	 * Hero breadcrumb.
	 */

	.elementor-top-section
	.hjp-automatische-breadcrumb {

		top: 18px;
		width: calc(
			100% - 30px
		);
		max-width: none;
		font-size: 11px;
	}


	/*
	 * Zwarte balk.
	 */

	.hjp-automatische-breadcrumb__balk {
		min-height: 60px;
	}


	/*
	 * Inhoud zwarte balk.
	 */

	.hjp-automatische-breadcrumb__balk
	.hjp-automatische-breadcrumb {

		width: calc(
			100% - 30px
		);
		max-width: none;
		min-height: 60px;
		font-size: 11px;
	}
}