/* +-+ BASIC STRUCTURE +-+ */
	
#Navigation { position: relative; display: none;}
	
#Navigation, #Navigation nav { width: 100%; }
	
#Navigation ul, #Navigation li, #Navigation a, #Navigation span {
	margin: 0;
	padding: 0;
	width: 100%;
}

#Navigation ul.sub-menu li.menu-item-has-children { position: relative; }

#Navigation nav { display: block; z-index: 120; }
	
#Navigation li { display: block; }
#Navigation li.home { display: none; }
	
#Navigation a {
	display: table;
	min-height: 40px;
	text-align: center;
}
	
#Navigation span {
	display: table-cell;
	vertical-align: middle;
	padding: 10px;
}

/* 1st Level */
#Navigation, #Navigation nav > ul > li > a { height: 60px; font-size: 20px; }

/* 2nd Level */
#Navigation nav > ul > li > ul.sub-menu > li > a { font-size: 18px; }

/* 3rd Level */
#Navigation ul.sub-menu ul.sub-menu li { background-color: rgba(50, 154, 240, 1); }

#Navigation ul.sub-menu ul.sub-menu a { font-size: 16px; }


/* +-+ COLOR +-+ */

#Navigation a {
	color: rgba(255, 255, 255, 0.75);
	text-shadow: -1px -1px rgba(0, 0, 0, 0.25);
}

@media (hover: hover) {
	#Navigation a:hover {
		color: rgba(255, 255, 255, 1);
		text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
	}
}
/* Main Color */
#Navigation, #Navigation nav {  }

/* 2nd Color */
#Navigation nav > ul > li > ul.sub-menu > li,
#Navigation nav > ul > li:hover a { background-color:var(--color-main); }

/* 3rd Color */
#Navigation ul.sub-menu ul.sub-menu li,
#Navigation ul.sub-menu li:hover a {
	background-color: var(--color-main-30);
	color: var(--color-main);
	text-shadow: none; }

/* 4th Color */
#Navigation ul.sub-menu ul.sub-menu li:hover a { background-color: rgba(114, 195, 252, 1); }

/* Mobile Background */
#Navigation .background { background-color: rgba(0, 38, 58, 0.8)}

/* Mobile Submenu Triggers */
#Navigation li.menu-item-has-children > span { color: rgba(255, 255, 255, 0.75); }

/* Mobile Submenu Indicators */
#Navigation ul.sub-menu:before { border-color: transparent transparent var(--color-main-70) transparent; }
#Navigation ul.sub-menu ul.sub-menu:before { border-color: transparent transparent var(--color-main-70) transparent; }

/* +-+ DESKTOP +-+ */

@media only screen and (min-width:732px) {
	
	#Navigation nav { z-index: 100; position: absolute;}
	
	#Navigation li.menu-item-has-children > span { display: none; }
	
	/* 1st Level */
	
	/*#Navigation nav > ul > li > a { height: 60px; }*/
	
	#Navigation { margin-top: var(--unit); }
	
	#Navigation nav, #Navigation nav > ul, #Navigation nav > ul > li { height: 62px; }
	
	#Navigation nav > ul > li { width: 20%; float: left; }
	
	#Navigation nav > ul > li > a { border-radius: var(--corner); }
	
	#Navigation nav > ul > li > a:has(+ ul) { border-bottom-left-radius: 0; border-bottom-right-radius: 0;  }
	
	/* 2nd Level*/
	
	#Navigation nav > ul > li > ul {
		display: none; /* Show or Hide */
		width: calc(100% + 40px);
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
		margin-left: -20px;
	}
	
	#Navigation nav > ul > li:hover > ul  { display: block; }
	
	#Navigation nav > ul > li > ul.sub-menu > li { background-color: transparent; }
	#Navigation nav > ul > li > ul > li a { border-top: 1px solid var(--color-alternate) } 
	#Navigation nav > ul > li > ul > li:last-child a { border-bottom-left-radius: var(--corner); border-bottom-right-radius: var(--corner);}
	
	/* 3rd level */
	
	#Navigation ul.sub-menu > li > ul.sub-menu {
		display: none; /* Show or Hide */
		position: absolute;
		width: 80%;
		top: 0;
		left: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-top: -20px;
		padding-right: 20px;
	}
	
	#Navigation ul.sub-menu li.menu-item-has-children:hover ul{ display: block; }
	#Navigation ul.sub-menu li.alamos a:hover { background-color:var(--color-alamos); color: rgb(255,255,255)}
	#Navigation ul.sub-menu li.kidu a:hover { background-color:var(--color-kidu); color: rgb(255,255,255)}
	#Navigation ul.sub-menu li.fontanar a:hover { background-color:var(--color-fontanar); color: rgb(255,255,255)}
	
}

/* +-+ Mobile +-+ */

#Navigation .background, #Navigation .trigger-box { display: none; }

@media only screen and (max-width: 731px) {
	
	#Navigation nav, #Navigation .background, #Navigation .trigger-box  { display: none; }
	
	#Navigation .trigger-box, #Navigation .showing { display: block; }
	
	#Navigation .background {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	
	#Navigation nav {
		width: 80%;
		position: fixed;
		top: 0;
		height: 100%;
		overflow-y: scroll;
		left: 0;
	}
	
	#Navigation nav > ul {
		border-bottom: 1px solid var(--color-main-70);
	}
	
	#Navigation nav li { border-top: 1px solid var(--color-main-70); }
	
	#Navigation li.home { display: block; border-top: none;}
	
	#Navigation nav span {
		padding-right: 32px;
		padding-left: 32px;
	}
	
	#Navigation nav > ul > li:hover a,
	#Navigation ul.sub-menu li:hover a,
	#Navigation ul.sub-menu ul.sub-menu li:hover a  {
		background-color: transparent;
	}
	
	/* Open */
	
	#Navigation .trigger-box {
		display: block;
		position: absolute;
		right: 0;
		z-index: 160;
	}
	
	#NavTrigger {
		height: 48px;
		border-top-style: none !important;
		border-bottom-style: none !important;
		vertical-align: text-top;
	}
	
	#NavTrigger span {
		padding: calc(var(--unit) / 2) calc(var(--unit) / 2) calc(var(--unit) / 2) var(--unit);
		text-align: center;
		background-color: var(--color-main);
		border-radius: calc(var(--unit) / 4);
	}
	
	#NavTrigger span:after {
		content: "";
		display: inline-block;
		height: 24px;
		width: 24px;
		background-image: url(svg/ico-menu.svg);
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	
	#NavTrigger label, #NavTrigger span:after { vertical-align: middle; font-weight: 500; }
	
	/* Close */
	
	#NavTrigger.close {
		position: fixed;
		top: 24px;
		right: 24px;
		padding: 0 !important;
		text-align: center;
		z-index: 300;
		width: 40px;
		height: 32px;
	}
	
	#NavTrigger.close span{ padding: 0; }
		
	#NavTrigger.close span:after {
		margin-left: 0;
		content: "";
		background-position-y: -24px;
	}
	
	#NavTrigger.close label { display: none; }
	
	#NavTrigger span.close:after { content: ""; }
	
	/* Show & Hide Sub Menus */
	
	#Navigation li.menu-item-has-children { position: relative; }
	
	#Navigation li.menu-item-has-children > span {
		position: absolute;
		width: 32px !important;
		height: 32px !important;
		padding: 0 !important;
		display: block;
		top: 13px;
		right: 4px;
		background-image: url(svg/ico-menu.svg);
		background-repeat: no-repeat;
		background-size: 32px auto;
	}
	
	#Navigation li.menu-item-has-children li.menu-item-has-children > span { top: 9px; }
	
	#Navigation li.menu-item-has-children > span { background-position-y: -64px; }
	#Navigation li.menu-item-has-children.show-submenu > span { background-position-y: -96px; }
	
	#Navigation li.menu-item-has-children > ul { display: none; }
	#Navigation li.menu-item-has-children.show-submenu > ul { display: block; }
	
	/* Sub Menus Marks */
	
	ul.sub-menu { position: relative; }
	
	ul.sub-menu:before {
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 12px 9px 12px;
		position: absolute;
		top: -8px;
		right: 50%;
		margin-right: -10px;
		z-index: 20;
	}	
}

/* ⬇⬆ 380px to 459px */
@media screen and (min-width: 320px) and (max-width: 479px) {
	#NavTrigger.close {
		top: 16px;
		right: 16px;
	}
}

/* ⬇⬆ 380px to 459px */
@media screen and (min-width: 380px) and (max-width: 459px) {
	#Navigation nav { width: 70%; }
}

/* ⬇⬆ 460px to 480px */
@media screen and (min-width: 480px) and (max-width: 579px) {
	#Navigation nav { width: 60%; }
}

/* ⬇⬆ 460px to 480px */
@media screen and (min-width: 580px) and (max-width: 731px) {
	#Navigation nav { width: 50%; }
}