/* .header-container {transition: opacity .8s ease;} */

body.no-scroll {
	overflow: hidden;
}

.modal-menu {
	/* display: none; */
	opacity: 0; visibility: hidden;
		transition: opacity .8s ease, visibility .8s ease; /* Transition for fade effect */
}

.modal-menu.is-open {
	/* display: block; */
	opacity: 1; visibility: visible;
}

.modal-menu-backdrop {
	position: fixed;
	inset: 0;
		top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgb(0 0 0 / 5);
		background-color: rgba(0, 0, 0, .5);
}

.modal-menu-content {
	position: fixed;
	/* inset-block: 1em; */
		top: .1em;
		bottom: .1em;
	/* inset-inline: 5%; */
		left: 0%;
		right: 0%;    
	padding: .3em .5em;
	background-color: white;
	overflow: auto;

	z-index: 10000;
	border-radius: 0.5em;
	box-shadow: 0 .3rem 1.3rem rgba(255, 255, 255, 0.8); /* Shadow for depth */
}

.modal-menu-close {
	position: absolute;
	top: 0.3em;
	right: 0.3em;
	padding: 0.3em;
	border: 0;
	font-size: 2em;
	height: 1em;
	width: 1em;
	text-indent: 10em; /* Forces the text to overflow */
	overflow: hidden;  /* the element and hides it.   */

	/* Reset the styles taken from the main stylesheet. */
	/* font: inherit; */
	background: none;
	color: #333;
	box-shadow: initial;
	text-shadow: initial;

}
	.modal-menu-close:hover {
		background: none;
		cursor: pointer;
	}

.modal-menu-close::after {
	position: absolute;
		color: #333;
	line-height: 0.5;
	top: 0.2em;
	left: 0.1em;
	text-indent: 0;
	content: "\00D7";
	transition: all .2s ease;
}
	.modal-menu-close:hover:after {
		color: #777;
		transform: scale(1.2);
		transform-origin: center;
	}
	.modal-menu-close:active:after {
		transform: rotate(360deg) scale(.5);
		transform-origin: center;
	}

.navButtonComponentTitle { /* 'Site Navigation' title */
	margin: .2em 0 .8em;
	text-align: center;
	letter-spacing: .08em;
	font-size: 1.2rem;
	font-family: monospace;
	font-weight: bold;
}

.main-nav-list-container-modal > ul {
	display: flex;
	flex-flow: row wrap;
	gap: .5em;
}

.main-nav-list-container-modal > ul > * {
	flex: 1 1 calc(50% - .5em);
}

.main-nav-list-container-modal li {
	margin: 0; padding: 0;
}

.main-nav-list-container-modal ul > li > div,
.main-nav-list-container-modal li.currentPage,
.main-nav-list-container-modal li a {
	display: block;
	border-bottom: 1px solid #DDD;
	padding: .1em .3em;
	padding: .3em .3em;
}

.main-nav-list-container-modal li.currentPage {
	/* background-color: #EEE; */
	color: #444;
	/* box-shadow: inset 0 0 16px rgba(65,65,65,.95); */
	/* border-bottom: 1px solid #DDD; */
	opacity: .55;
	opacity: .40;
	position: relative;

	background-image:
		/* linear-gradient(to right, rgba(255,30,70,.09) 1px, transparent 1px), /1* Vertical lines *1/ */
		/* linear-gradient(to bottom,rgba(255,30,70,.09) 1px, transparent 1px); /1* Horizontal lines *1/ */
	background-size: 3px 3px; /* Size of each grid cell */
}
	.main-nav-list-container-modal li.currentPage::before {
		position: absolute;
		left: -0.62em;
		content: '\27A4';
		content: '\27A2';
		color: #5317E9;
		color: inherit;
		opacity: 1;

		animation: rotate 2s linear infinite;
		transform-origin: 50% 55%; /* Center the rotation */
	}
    @keyframes rotate {
      0% {
        transform: rotateX(0deg);
      }
      100% {
        transform: rotateX(360deg);
      }
    }


.main-nav-list-container-modal li a {
	text-decoration: none;
	/* the following image is fine only on one line. */
	/*
	background-image:url("../template_images/navimage_160x26.gif");
	color: #333;
	*/
	/* background-color: #EAEAEA; */
	color: #444;

	/* background-color: #B3B3B3; */
	/* color: #FFF; */

	background-image:
		linear-gradient(to right, rgba(200,200,200,.07) 1px, transparent 1px), /* Vertical lines */
		linear-gradient(to bottom, rgba(200,200,200,.07) 1px, transparent 1px); /* Horizontal lines */
	background-size: 3px 3px; /* Size of each grid cell */
}
.main-nav-list-container-modal li a:hover {
	/* box-shadow: inset 0 0 10px rgba(255,255,255,.75); */
	/* filter: contrast(1.05); */
	/* color: #635A6A; */
	background-color: #F5F5F5;
}
.main-nav-list-container-modal li a:active {
	/* box-shadow: inset 0 0 20px rgba(255,255,255,.75); */
	/* filter: brightness(1.05); */
	background-color: #EAEAEA;
}

.main-nav-list-container-modal ul > li > div { /* The heading for sections in the menu */
	text-align: center;
	background-color: #E31759;
	background-image: linear-gradient(to bottom, #E6054B 0%, #B72661 85%, #888); /* darker (original) */
	background-image: linear-gradient(to bottom, #F6155B 0%, #C73671 85%, #888);
	font-family: Courier;
	color: #F2F2F6;
	margin-bottom: .3em;
}

/* Remove the 'Home' item: */
.main-nav-list-container-modal > ul > li:first-of-type {
	display: none;
}


 /* .modal-menu.is-open { */
 /*            animation: fadeZoomIn 0.5s forwards; /1* Fade and zoom in animation *1/ */
 /*            animation-delay: 0.5s; /1* Delay before the animation starts *1/ */
 /*        } */

 /*        .modal-menu-content { */
 /*            /1* position: absolute; *1/ */
 /*            /1* top: 50%; *1/ */
 /*            /1* left: 50%; *1/ */
 /*            transform: translate(-50%, -50%) scale(0); /1* Start scaled down *1/ */
 /*            /1* background: linear-gradient(45deg, #ff6b6b, #f7d94c); *1/ */
 /*            /1* padding: 20px; *1/ */
 /*            /1* border-radius: 10px; *1/ */
 /*            /1* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); *1/ */
 /*            /1* color: white; *1/ */
 /*            /1* text-align: center; *1/ */
 /*            animation: zoomIn 0.5s forwards; /1* Zoom in animation *1/ */
 /*            animation-delay: 0.5s; /1* Delay before the zoom-in animation starts *1/ */
 /*        } */

 /* @keyframes fadeZoomIn { */
 /*            0% { */
 /*                opacity: 0; */
 /*                transform: scale(0); */
 /*            } */
 /*            50% { */
 /*                opacity: 0.5; */
 /*                transform: scale(1.1); */
 /*            } */
 /*            100% { */
 /*                opacity: 1; */
 /*                transform: scale(1); */
 /*            } */
 /*        } */

 /*        @keyframes zoomIn { */
 /*            0% { */
 /*                transform: translate(-50%, -50%) scale(0); */
 /*            } */
 /*            100% { */
 /*                transform: translate(-50%, -50%) scale(1); */
 /*            } */
 /*        } */

 /*        @keyframes fadeZoomOut { */
 /*            0% { */
 /*                opacity: 1; */
 /*                transform: scale(1); */
 /*            } */
 /*            50% { */
 /*                opacity: 0.5; */
 /*                transform: scale(1.1); */
 /*            } */
 /*            100% { */
 /*                opacity: 0; */
 /*                transform: scale(0); */
 /*            } */
 /*        } */