/* MENU */
/* menu that is horizontal below the header if possible, otherwise vertical on  RHS */
/* It should float to be always visible when the header is scrolled out of the window. */
/* It should collapses into a button for small device widths. */
/*  .menu position: was sticky to make the menu sticky below header */
.menu
{
	position: fixed;
	/* 
	top: 160px;
 */
	top: 28px;
	left: 0px;
	right: 0px;
	/* 
	background-color: rgba(240, 240, 240, 0.5);

	background-color: rgba(200, 200, 200, 0.7); */
	z-index: 1000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.8rem;
	overflow-x: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	/* 
	background-color: transparent;
 */
}

.menu ul
{
	list-style-type: none;
	margin: 1px;
	padding: 1px;
	width: 100%;
	overflow-x: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	background-color: var(--menuback);
}

.menu li
{
	margin: 6px 14px 9px;
	padding: 1px;
	background-color: var(--menuitemback);
}

.menu a
{
	text-decoration: none;
	color: #ffffff;
	padding: 6px 8px 0px;
}

.menu-toggle
{
	display: none;
	/* Hidden by default */
}

/* ======================================= */
.pagemenu
{
	top: -10px;
	left: 0px;
	right: 0px;
	margin: 0px;
	padding: 0px;
	background-color: var(--pagemenuback);
	overflow-x: auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	z-index: 900;
}

.pagemenu p
{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: bold;
	top: -25px;
	margin: 5px;
	padding: 1px;
	width: max-content;
}

.facebook-link
{
	text-decoration: none;
	color: #3b5998;
	/* Facebook blue */
	font-size: 1.5rem;
	/* Adjust size as needed */
}

.facebook-link:hover
{
	color: #2d4373;
	/* Darker blue on hover */
}