:root{
	--pulldown_breedte          : 170px;
	--winkelwagen_positie_left	: 50%;
	--winkelwagen_positie_top 	: 5px;
}

/* Bedrijfslogo */
.bedrijfslogo {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: blue;
	height: 70px;
}

.bedrijfslogo img {
	height: 60px;
	margin-left: 10px;
}

.klantinformatie {
	position: abolute;
	color: white;
	font-size: 14px; 
	margin-right: 15px;
	margin-bottom: 10px;
}

/* Stijl voor het navigatiemenu */
nav {
    background-color: grey;
    color: white;
    display: flex;
	margin-bottom: 10px;
}

/* Stijl voor de hoofdmenu-items */
nav > div {
    position: relative;
    padding: 10px 10px;
    cursor: pointer;
}

/* Stijl voor de submenu-items */
nav > div > div {
	display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: blue;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Stijl om submenu-items te tonen bij hover */
nav > div:hover > div {
    display: block;
}

/* Stijl voor de submenu-item */
nav > div > div > div {
    padding: 10px;
    border-bottom: 1px solid white;
	
}

/* Voorbeeld van lichtblauwe achtergrondkleur voor div-hover */
nav > div:hover {
    background-color: blue; /* Verander naar de gewenste kleur */
}

/* Stijl voor het hoofdmenu-item bij hover */
nav > div:hover {
    background-color: blue; /* Achtergrondkleur voor hover-toestand */
}

/* Stijl voor het submenu-item bij hover */
nav > div > div > div:hover, nav a:hover {
    background-color: #ADD8E6; /* Achtergrondkleur voor hover-toestand */
}

nav a {
	width: var(--pulldown_breedte);
    display: block;
    background-color: inherit;
	border-bottom: 1px solid white;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
}

/* Stijlen voor de normale toestand van de links in de nav */
nav div a {
	
    text-decoration: none;
    color: inherit; /* Behoudt de standaardtekstkleur van de parent (div) */
}


/* Stijlen voor de div-elementen in de normale toestand */
nav > div {
    background-color: grey; /* Achtergrondkleur voor normale toestand */
}

/* Stijlen voor de div-elementen bij hover */
nav > div:hover {
    background-color: blue; /* Achtergrondkleur voor hover-toestand */
}

div a {
    color: white;
}

/* Op kleine schermen */
@media screen and (max-width: 768px) {
	/* Bovenste rij */
	nav {
		font-size: 12px;
	}
  
	nav > div {
		font-size: 14px;
	}
	
	nav > div > div {
		width: 150px;
	}
	  
	/* Pulldown opties */
	nav > div > div > div {
		padding: 10px;
		border-bottom: 1px solid white;
	}
	
	nav a {
		font-size: 14px;
		display: block;
		background-color: inherit;
		border-bottom: 1px solid white;
		padding: 10px 20px;
		text-decoration: none;
		color: white;
	}

	/* Stijlen voor de normale toestand van de links in de nav */
	nav div a {
		font-size: 14px;
		text-decoration: none;
		color: inherit; /* Behoudt de standaardtekstkleur van de parent (div) */
	}
	
    .bedrijfslogo {
        flex-direction: column; /* Verander de richting naar kolommen in @media-modus */
        align-items: flex-start; /* Plaats items aan de linkerkant van de ouder */
    }

    .klantinformatie {
        position: relative; /* Gebruik relatieve positionering in @media-modus */
        margin-left: 10px; /* Geen linkermarge meer nodig in @media-modus */
        margin-bottom: 10px;
		font-size: 10px;
    }

	.bedrijfslogo img {
		height: 60px;
	}

}