#modal-menu {
	z-index: 100;
	overflow: auto;
	padding: 150px 25px 50px;
	
	background-color: var(--main-color);
	
	color: #FFF;
}
.menu-open #modal-menu {
    opacity: 1;
    pointer-events: auto;
}

/*--------------------------------------------------------------------------------------------------------------------*/

#modal-menu > .menu-wrapper {
	display: flex; min-height: 100%;
	flex-direction: column;
	justify-content: center;
	row-gap: 90px;
}

/*--------------------------------------------------------------------------------------------------------------------*/

#modal-menu > .menu-wrapper > .menu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 35px;
}

#modal-menu > .menu-wrapper > .menu a {
	font-size: 16px;
	font-weight: 500;
	
	cursor: pointer;
}
.loaded #modal-menu > .menu-wrapper > .menu a { transition: color .2s ease-out; }
#modal-menu > .menu-wrapper > .menu a.current,
#modal-menu > .menu-wrapper > .menu a:hover { color: var(--off-color); }

#modal-menu > .menu-wrapper > .menu .menu-item { line-height: 30px; }
#modal-menu > .menu-wrapper > .menu > .submenu-container > .submenu-btn {
	position: relative;
	padding-right: 35px;
}
#modal-menu > .menu-wrapper > .menu > .submenu-container > .submenu-btn:after {
	content: '';
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	display: block; width: 14px; height: 8px;
	
	background-color: var(--off-color);
	
	-webkit-mask-image: url("../../images/icons/arrow.down.svg");
	mask-image: url("../../images/icons/arrow.down.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.loaded #modal-menu > .menu-wrapper > .menu > .submenu-container > .submenu-btn:after { transition: transform .2s ease-out; }
#modal-menu > .menu-wrapper > .menu > .submenu-container > .submenu-btn.open:after { transform: translateY(-50%) scale(-1); }
#modal-menu > .menu-wrapper > .menu > .submenu-container > .submenu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 15px;
	padding-left: 30px;
	margin-top: 35px;
}
#modal-menu > .menu-wrapper > .menu > .submenu-container > .submenu > .submenu-item { font-size: 15px; }

/*--------------------------------------------------------------------------------------------------------------------*/

#modal-menu > .menu-wrapper > .contact-details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 45px;
}
#modal-menu > .menu-wrapper > .contact-details > .contact-detail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 25px;
}
#modal-menu > .menu-wrapper > .contact-details > .contact-detail > .label {
	position: relative;
	padding-left: 45px;
	
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 500;
	color: var(--off-color);
}
#modal-menu > .menu-wrapper > .contact-details > .contact-detail > .label:before {
	content: '';
	position: absolute; top: 50%; left: 0; transform: translateY(-50%);
	display: block; height: 20px; width: 20px;
	
	background-color: var(--off-color);
	
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
#modal-menu > .menu-wrapper > .contact-details > .contact-detail > .label.phone:before {
	-webkit-mask-image: url(../../images/icons/phone.svg);
	mask-image: url(../../images/icons/phone.svg);
}
#modal-menu > .menu-wrapper > .contact-details > .contact-detail > .label.email:before {
	-webkit-mask-image: url(../../images/icons/email.svg);
	mask-image: url(../../images/icons/email.svg);
}
#modal-menu > .menu-wrapper > .contact-details > .contact-detail > .value {
	font-size: 18px;
	font-weight: 500;
}
.loaded #modal-menu > .menu-wrapper > .contact-details > .contact-detail > .value { transition: color .2s ease-out; }
#modal-menu > .menu-wrapper > .contact-details > .contact-detail > .value:hover  { color: var(--off-color); }