.menu {
	position: fixed;
	left: 0;
	bottom: -12vh;
	width: 100%;
	height: 25vh;
	z-index: 2;
	overflow: visible;
	transition: transform 0.3s;
}


#menu ul {
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	color: #fff;
	height: auto;
	align-items: center;
	background-color: rgba(64, 98, 63, 0.7); /* Add a semi-transparent background color for readability */
	bottom: 5vh;
}

@media all and (max-width: 800px) {
	/* Add styles for smartphones screens */
	#menu ul {
	  height: auto;
	  flex-direction: column;
	  justify-content: center;
	}
	
	#menu li {
	  margin: 5px 0;
	}

}

#menu li {
margin: 0 10px;


}

#menu a {
	display: block; /* Add this line to make the link fill the entire menu item */
	padding: 10px; /* Add some padding for better readability and clickable area */
	color: #c25151;
	text-decoration: none;
	background-image: url('/assets/img/buisson.svg'); /* Add this line to set the link background image */
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#menu a:hover{
	color: #c22828;
	transform: translateY(-2px);
}
  


.mobile-menu {
	display: block;
	position: fixed;
	top: 0; left: 0;
	overflow: hidden;
	width: 100%;
	z-index: 20;

	height: 0;
	background: rgba(15, 15, 23, 0);

	transition: background-color 0.2s linear;
}

.mobile-menu .containerF3g {
	width: 100%; height: 100%;
	overflow: auto;
}

.mobile-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 2vh 60px;
	min-height: 100vh;
	justify-content: center;
	align-content: center;
}

.mobile-menu-link {
	min-width: 100px;
	width: 50%;
	display: block;
	opacity: 0;
    cursor: pointer;
	transform: translateY(10%);
	transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s;
}

nav.mobile-menu.open .mobile-menu-link {
	transform: translateY(0);
	opacity: 1;
}

.menu-link:hover text {
	fill: #FFDC00;
}

.mobile-brick {
	display: block;
}


span.close-mobile-menu {
	color: #FFF;
	font-size: 80px;
	display: block;
	position: absolute;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    cursor: pointer;
	bottom: 0;
	right: 20px;
    transition: color 0.5s;
}

span.close-mobile-menu:hover {
	color: #FFDC00;

}