/**
 * Contains styles for MEGA MENU and the LEFT MENU
 **/

/***** MEGA MENU ******/
/* Level 1 */
ul.fn-main-menu {
	background: var(--darkGrey);
	display: inline-flex;
    align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0px; 
}
ul.fn-main-menu li {
	list-style: none; 
}
ul.fn-main-menu li a {
	text-transform: uppercase;
    color: #ffffff;
	font-size: 14px; 
	padding: 10px 15px 10px 15px;
	display: inline-block;
}
ul.fn-main-menu li a.has-children-link::after {
	font-family: 'Font Awesome 6 Pro';
    content: "\f107";
    margin-left: 5px;
    font-size: 16px;
    color: #ffffff;
}
ul.fn-main-menu li:hover {
	background: var(--lightGrey);
}
ul.fn-main-menu li:hover a {
	color: var(--darkGrey);
}
/* Level 2 & 3 */
.fn-main-menu-sub1,
.fn-main-menu-sub2,
.fn-main-menu-sub3 {
	display: block;
	margin-left: 0px; 
	width: 200px; 
	position: absolute;
    text-align: left;
    background: #ffffff;
    font-weight: 400;
    z-index: 70;
    box-shadow: 0 0 3px rgba(0, 0, 0, .15);
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    pointer-events: none;
    transform: translateY(15px) translateZ(0);
}
.fn-main-menu-sub2 {
	margin-left: 200px;
	margin-top: -50px; 
}
.fn-main-menu-sub3 {
	margin-left: 200px;
	margin-top: -50px; 
}
.fn-main-menu-sub1 li,
.fn-main-menu-sub2 li,
.fn-main-menu-sub3 li {
	border-bottom: 2px solid var(--lightGrey);
}
/***** LEFT MENU ******/
ul.fn-left-menu {
	margin: 0px; 
}
ul.fn-left-menu li {
	list-style: none; 
}
ul.fn-left-menu li a {
	text-transform: uppercase;
    color: var(--darkGrey);
	font-size: 16px;
    padding: 5px 0px;
    display: inline-block;
}
ul.fn-left-menu li a:hover {
	color: var(--primary);
}
ul.fn-left-menu li i {
	float: right;
	color: var(--darkGrey);
	position: relative;
	top: 9px; 
}
.fn-left-menu-sub1,
.fn-left-menu-sub2,
.fn-left-menu-sub3 {
	display: none; 
}
/***** RESPONSIVE STYLES *****/
/* Mobile styles */
@media only screen and (max-width: 768px) {
	ul.fn-main-menu {
		display: none; 
	}
}