nav.breadcrumbs-bar {
	background: var(--bodycolor2);
	color: var(--textcolor1);
	padding: 15px 0;
	position: relative;
	z-index: 3;
}

nav.breadcrumbs-bar .breadcrumbs-container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
nav.breadcrumbs-bar .breadcrumbs-container a {
	color: var(--textcolor1);
}
nav.breadcrumbs-bar .breadcrumbs-container a:hover {
	color: var(--color1);
}

/* kolom met breadcrumbs */
.breadcrumbs ul {
    display: flex;
    flex-wrap: wrap;
}
.breadcrumbs ul li {
    padding-right: 10px;
}
.breadcrumbs ul li:not(:last-child):after {
    content: "›";
    padding-left: 10px;
}

/* kolom met contactgegevens */
.contacts {
	display: flex;
	gap: 30px;
	font-weight: bold;
	font-size: .9em;
	color: var(--color1);
}
nav.breadcrumbs-bar .breadcrumbs-container .contacts a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color1);
}
.contacts img {
	width: 20px;
	height: 20px;
	/*filter: var(--colorfilter1);*/
}


/* die op de homepage is anders */
body.homepage .breadcrumbs ul li,
body.homepage .breadcrumbs ul li a {
	color: var(--bodycolor1);
}
body.homepage nav.breadcrumbs-bar {
	margin-bottom: -68px;
	background: rgba(0,0,0,0.1);
	backdrop-filter: blur(5px);
}
body.homepage nav.breadcrumbs-bar .breadcrumbs-container a {
	color: var(--bodycolor1);
}
body.homepage nav.breadcrumbs-bar .breadcrumbs-container a:hover {
	color: var(--bodycolor2);
}





@media screen and (max-width: 1100px) {

    .contacts {
        display: none;
    }
    nav.breadcrumbs-bar {
    	font-size: .8em;
    }

    body.homepage nav.breadcrumbs-bar  {
    	display: none;
    }
    
}