@charset "utf-8";
/* CSS Document — div_mobilemenu.css */

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

	div#MobileMenu {
		width: 100%;
		height: 100%;
		position: fixed;
		margin-bottom: 15px;
		text-align: right;
		z-index: -1;
	}

	.icon-menu:before {
		content: "Menu";
		color: #FFFFFF;
		position: fixed;
		right: 15px;
		top: 15px;
	}

	.icon-close:before {
		content: "x";
		color: #2d3a52;
	}

	.menu {
		position: absolute;
		width: 300px;
		left: -300px;
		top: 0px;
		background-color: #FFFFFF;
		opacity: 0.98;
		height: 100%;
		overflow: auto;
		z-index: 100;
		box-shadow: 4px 0 28px rgba(2, 35, 99, 0.14);
		border-right: 1px solid #dfe6f5;
	}

	/* MENUBUTTON */
	.MobileMenuTitle {
		font-family: 'Outfit', Arial, sans-serif;
		font-size: 0.72rem;
		font-weight: 700;
		color: #022363;
		text-align: left;
		margin: 20px 10px 5px 10px;
		width: 100%;
		padding-top: 25px;
		border-bottom: 1px solid #dfe6f5;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.MobileMenuRow {
		font-family: 'Outfit', Arial, sans-serif;
		font-size: 1rem;
		font-weight: 400;
		text-align: left;
		color: #2d3a52;
		margin: 1px 8px;
		padding: 9px 12px;
		border-radius: 8px;
		transition: background 0.15s ease, color 0.15s ease;
	}

	.MobileMenuRow:hover {
		background-color: #e8f1ff;
		color: #022363;
	}

	#menuButton {
		position: fixed;
		font-size: 1.2em;
		color: #FFFFFF;
		background-color: #022363;
		width: 100%;
		padding: 20px 10px 30px 20px;
		box-shadow: 0 2px 8px rgba(2, 35, 99, 0.3);
	}

	#menuButton a {
		cursor: pointer;
		transition: all 0.2s;
	}

	#menuButton a:hover {
		color: #3399FF;
	}

	/* CLOSEBUTTON */
	.closeButton {
		font-size: 1.3em;
		color: #2d3a52;
		position: absolute;
		left: 260px;
		top: 15px;
		height: 40px;
	}

	.closeButton a:hover {
		color: #022363;
		cursor: pointer;
	}

	/* Scrollbar */
	::-webkit-scrollbar { width: 3px; }
	::-webkit-scrollbar-track { -webkit-border-radius: 10px; border-radius: 10px; background: #f5f8ff; }
	::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #dfe6f5; }
}