.header {
	display:flex;
	align-items:center;
	width:100%;
	height:70px;
	background:linear-gradient(
		135deg,
		var(--header_background_color) 0%,
		var(--header_background_color) 40%,
		#4F8CCF 100%
	);
}

/*
 * ------------------------------------------------------------
 * BEDRIJFSLOGO
 * ------------------------------------------------------------
 */

.bedrijfslogo {
	position:relative;
	display:flex;
	align-items:center;
	height:100%;
}

.bedrijfslogo img {
	height:70px;
	width:auto;
}

/*
 * ------------------------------------------------------------
 * OPTIES
 * ------------------------------------------------------------
 */

.opties {
	margin-left:auto;
	margin-right:10px;
	display:flex;
	align-items:stretch;
	gap:0.7em;
}

.header_winkelwagen,
.inloggen,
.pulldown_menu-hamburger {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	width:55px;
	color:white;
	text-decoration:none;
}

.header_winkelwagen i,
.inloggen i,
.pulldown_menu-hamburger i {
	font-size:1.5em;
}

.optie_tekst {
	font-size:0.7em;
}

.header_winkelwagen,
.inloggen,
.pulldown_menu-hamburger {
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
    border-radius:8px;
}

.header_winkelwagen:hover,
.inloggen:hover,
.pulldown_menu-hamburger:hover {
    background-color:rgba(255,255,255,0.12);
    transform:translateY(-2px);
}


/*
 * ------------------------------------------------------------
 * WINKELWAGEN AANTAL
 * ------------------------------------------------------------
 */

.winkelwagen-icoon {
	position:relative;
	display:inline-block;
}

.winkelwagen-inhoud-aantal {
	position:absolute;
	top:-0.5em;
	right:-0.5em;

	min-width:1.2em;
	padding:0.1em 0.25em;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:50%;

	background-color:#d00;
	color:white;

	font-size:0.7em;
	font-weight:bold;
	line-height:1;
}


/*
 * ------------------------------------------------------------
 * HAMBURGER
 * ------------------------------------------------------------
 */

.pulldown_menu-hamburger {
	display:none;

	border:0;
	background:none;

	font:inherit;
	cursor:pointer;
	padding:0;
}



/*
 * ------------------------------------------------------------
 * MOBIEL
 * ------------------------------------------------------------
 */

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

.header {
	height: 60px;
}

	.bedrijfslogo img {
		height:50px;
		margin-left: unset;
	}

	.pulldown_menu-hamburger {
		display:flex;
	}

	.opties {
		gap:0.4em;
		margin-right:5px;
	}

	.header_winkelwagen,
	.inloggen,
	.pulldown_menu-hamburger {
		width:35px;
	}

	.header_winkelwagen i,
	.inloggen i,
	.pulldown_menu-hamburger i {
		font-size:1.2em;
	}

	.optie_tekst {
		font-size:0.5em;
	}

	.klantinformatie {
		font-size:10px;
	}
	

}