#menu {
	list-style-type: none;
	list-style: none;
	display: block;
}

#menu li {
	position: relative;
	float: left;
	width: 100px;
	height: 100px;
	background-size: cover;
	margin: 0;
}

@media screen and (max-width: 892px) {
	#menu li {
		margin-bottom: 20px;
	}
}

#menu li .layer {
	display: block;
	width: 100px;
	height: 97px;
	background-color: rgba(0, 68, 137, 0.25);
}
#menu li .layer:hover {
	background-color: rgba(93, 205, 25, 0.65);
}

#menu li .border {
	border-bottom: 7px;
	border-style: solid;
	border-color: transparent;
}

#menu li a {
	text-decoration: none;
}
#menu li a span.header {
	color: #FFFFFF;
	display: block;
	font-size: 150%;
	text-decoration: none;
	padding-top: 20px;
	padding-left: 5px;
}


#menu li.brown {
	background-image: url('../images/nav/nav-home.jpg');
}
#menu li.brown.selected .layer, #menu li.brown .layer:hover {
	background-color: rgba(0, 143, 194, 0.65);
}
#menu li.brown .border {
	border-color: #008fc2;
}



#menu li.pink {
	background-image: url('../images/nav/nav-zorg.jpg');
}
#menu li.pink.selected .layer, #menu li.pink .layer:hover {
	background-color: rgba(227, 0, 82, 0.65);
}
#menu li.pink .border {
	border-color: #e30052;
}



#menu li.purple {
	background-image: url('../images/nav/nav-con.jpg');
}
#menu li.purple.selected .layer, #menu li.purple .layer:hover {
	background-color: rgba(186, 119, 172, 0.65);
}
#menu li.purple .border {
	border-color: #ba77ac;
}

#menu li.lgreen {
	background-image: url('../images/nav/nav-contact-2.jpg');
}
#menu li.lgreen.selected .layer, #menu li.lgreen .layer:hover {
	background-color: rgba(93, 205, 25, 0.65);
}
#menu li.lgreen .border {
	border-color: #5dcd19;
}


#menu li.dgreen {
	background-image: url('../images/nav/nav-contact-2.jpg');
}
#menu li.dgreen.selected .layer, #menu li.dgreen .layer:hover {
	background-color: rgba(0, 132, 61, 0.65);
}
#menu li.dgreen .border {
	border-color: #00843d;
}