@media only screen and (max-width: 768px) {

	body {
		padding-top: 8px;
		margin: 0;
		font-family: Arial, sans-serif;
	}
	#eol, .eor {
		color: #000;	
	}
	.mobileNavbar {
		overflow: hidden;
	}
	.mobileNavbar {
		display: block;
		margin-top: 0x;
		margin-left: 8px;
	}

	.hamburger-menu {
		display: inline-block;
		cursor: pointer;
		margin-top:5px;
	}

	.hamburger-icon {
		width: 30px;
		height: 3px;
		background-color: #000;
		margin: 5px 10px;
	}

	.menu {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--color-espresso);
		padding-top: 20px;
	}

	.menu a {
		display: block;
		color: #fff;
		text-align: center;
		padding: 20px;
		text-decoration: none;
		font-size: 20px;
		text-transform: uppercase;
		border-top: 2px solid transparent;
		border-bottom: 2px solid transparent;
	}

	.menu a:hover {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
	}

	.close-button {
		position: absolute;
		top: 15px;
		right: 30px;
		background: none;
		border: none;
		cursor: pointer;
		font-size: 30px;
		font-weight: normal;
		color: #fff;
	}

	#groupNameDiv {
		border-radius: 0px !important;	
	}
	
	@keyframes slide-in {
	  from {
		transform: translateX(100%);
	  }
	  to {
		transform: translateX(0);
	  }
	}

	/* Define slide-out animation (adjust as needed) */
	@keyframes slide-out {
	  to {
		transform: translateX(100%);
	  }
	}

}