@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Dim the page behind the menu while it's open.
   #dl-menu-overlay is a real element (added in menubarnew.php as a
   sibling right after .dl-menuwrapper, NOT inside it) so it can receive
   click events and isn't trapped by .dl-menuwrapper's `perspective`
   property, which creates a containing block for position:fixed
   descendants and would otherwise confine the overlay to that small box
   instead of the full viewport. */
#dl-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998; /* below .dl-menuwrapper's z-index:9999 but above page content */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease-in-out;
}
#dl-menu:has(.dl-menu.dl-menuopen) ~ #dl-menu-overlay,
#dl-menu-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Common styles of menus */
.dl-menuwrapper {
	width: 60%;
    height:100%;
	float: left;
	position: relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
    z-index: 9999; /**IMPORTANT: For menu bar to float above top picture**/
}
@media only screen and (orientation:portrait)
    {.dl-menuwrapper{width:100%;}}
/*.dl-menuwrapper:first-child {
	margin-right: 100px;
}*/

.dl-menuwrapper button {/**styling for dl-trigger presides in this css element*/
	border: none;
    background-color: transparent;
	height: 100%;
    aspect-ratio:1.06/1;
	text-indent: -900em;
	overflow: hidden;
	position: relative;
	outline: none;
    padding:0 0;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items: center;
}

/* Menu icon: inline SVG pulled in via PHP include (real DOM, not an
   <img> — this is what lets CSS reach its stroke color directly).
   File lives at Assets/header/header-menu-icon.svg. */
.dl-trigger-icon {
	position: relative;
	inset: 0;
	width: 70%;
	height: 70%;
	pointer-events: none;
}
.dl-trigger-icon line {
	stroke: var(--menu-icon-color, #999);
	transition: stroke 0.2s ease;
}
#cluster-box-4:hover .dl-trigger-icon line {
	stroke: var(--menu-icon-hover-color, #666);
}
/* Hidden while the menu is open — the X icon (::before/::after on the
   button) takes over visually at that point. */
button.dl-trigger.dl-active .dl-trigger-icon {
	opacity: 0;
}

/* Open/close icon toggle: draws an X over the trigger button when the
   menu is open (.dl-active, added by jquery.dlmenu.js), and hides the
   background menu-icon image set on #cluster-box-4 in header.php
   underneath it. No new image asset required. */
.dl-menuwrapper button.dl-trigger::before,
.dl-menuwrapper button.dl-trigger::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 52%;
	width: 60%;
	height: 3px;
	background: #fefefe;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
	transition: opacity 0.2s ease, transform 0.3s ease;
	pointer-events: none;
}
.dl-menuwrapper button.dl-trigger.dl-active::before {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(45deg);
}
.dl-menuwrapper button.dl-trigger.dl-active::after {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* Cursor applies unconditionally (not just on :hover) and directly on
   the interactive elements themselves -- these menu items are the
   default UA `cursor:pointer` anchors, and while :hover-gating usually
   works fine for overriding that, the .dl-menu open/close animation
   (a 3D rotate transform on the <ul>, driven by jquery.dlmenu.js) can
   cause rapid hover in/out toggling while that transform is running,
   which is exactly the kind of thing that makes Chromium drop a custom
   image cursor and fall back to the arrow -- same root cause as the
   class-selection button's flicker (see yma-class-selection-button.php).
   Setting it unconditionally means there's no hover-state flicker for
   the browser to lose the cursor image on. */
.dl-trigger,
.dl-menu a,
.dl-submenu a{
    cursor: url("../../Assets/home/hand-pointer-large.png"), pointer;
}

.dl-menuwrapper ul {
    background-color: var(--header-menu-bg-color);
	padding: 0;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.dl-menuwrapper li {
	position: relative;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 15px 8%;
	font-size: 20px;
	line-height: 1em;
	font-weight: 300;
	color: #fefefe;
	outline: none;
}
@media only screen and (max-width:768px) and (orientation:portrait){
    .dl-menuwrapper li a {font-size: 3em;}
    /* The back-link's triangle icon (li.dl-back:after) sits directly on
       the <li>, not inside its <a>, so the 3em bump above -- which only
       targets <a> -- never reached it: it kept inheriting the <li>'s own
       small base size while the forward triangles (li > a:after) inherit
       the now-3em <a> and ended up 3x bigger. Match it explicitly here
       (3em of the <li>'s own base, same multiplier as the <a> rule, so
       both triangles land on the same computed size without the <a>'s
       em compounding through the <li>). */
    .dl-menuwrapper li.dl-back:after {font-size: 3em;}
}

.no-touch .dl-menuwrapper li a:hover {
	background: rgba(255, 255, 255, 0.3);
}

.dl-menuwrapper li.dl-back > a {
	padding-left: 30px;
	background: #5b5b5b;/**back> color**/
}
li.dl-back:hover {background-color: #777777;} /**back> hover color**/

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: 'icomoon';
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\e000";
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: rgba(212,204,198,1);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
    
}

.dl-menuwrapper li > a:after {
	right: 10px;
	color: rgba(0,0,0,0.15);
}

.dl-menuwrapper .dl-menu {
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
    margin-top:1%;
    margin-bottom:0;
}

/* Cascading swipe-up entrance for TOP-LEVEL menu items.
   ul.dl-menu is never display:none (only opacity toggles via
   .dl-menuopen above), so a plain transition + nth-child stagger
   works directly on the real elements here. */
.dl-menu > li > a {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.dl-menu.dl-menuopen > li > a {
	opacity: 1;
	transform: translateY(0);
}
.dl-menu.dl-menuopen > li:nth-child(1) > a { transition-delay: 0.05s; }
.dl-menu.dl-menuopen > li:nth-child(2) > a { transition-delay: 0.10s; }
.dl-menu.dl-menuopen > li:nth-child(3) > a { transition-delay: 0.15s; }
.dl-menu.dl-menuopen > li:nth-child(4) > a { transition-delay: 0.20s; }
.dl-menu.dl-menuopen > li:nth-child(5) > a { transition-delay: 0.25s; }
.dl-menu.dl-menuopen > li:nth-child(6) > a { transition-delay: 0.30s; }
.dl-menu.dl-menuopen > li:nth-child(n+7) > a { transition-delay: 0.35s; }

.dl-menu > li {
	/* Keep the transition definition here, unconditionally, so it stays
	   active whether or not .dl-subview is present — if it only lived
	   inside the .dl-subview rule below, removing that class would also
	   remove the transition itself and the element would snap back
	   instantly instead of animating in. */
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Override the plugin's display:none hiding for TOP-LEVEL items only
   (direct children of ul.dl-menu) with an opacity/pointer-events
   approach instead. display:none can't be transitioned — when the
   plugin removes .dl-subview (e.g. clicking Back from a first-level
   submenu), items hidden via display:none just snap back instantly.
   Using opacity here lets the swipe-up cascade replay properly.
   Deliberately scoped with > and :not(.dl-subviewopen) so nested
   submenu levels keep their original display:none stacking behavior
   untouched. */
.dl-menu.dl-subview > li:not(.dl-subviewopen):not(.dl-subview) {
	display: block;
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
	/* Hide instantly, no fade, when a submenu opens — only the return
	   trip (dl-subview removed, falling back to .dl-menu > li's
	   transition above) should animate. */
	transition: none;
}
.dl-menu.dl-subview > li:not(.dl-subviewopen):not(.dl-subview):nth-child(1) { transition-delay: 0.05s; }
.dl-menu.dl-subview > li:not(.dl-subviewopen):not(.dl-subview):nth-child(2) { transition-delay: 0.10s; }
.dl-menu.dl-subview > li:not(.dl-subviewopen):not(.dl-subview):nth-child(3) { transition-delay: 0.15s; }
.dl-menu.dl-subview > li:not(.dl-subviewopen):not(.dl-subview):nth-child(4) { transition-delay: 0.20s; }
.dl-menu.dl-subview > li:not(.dl-subviewopen):not(.dl-subview):nth-child(5) { transition-delay: 0.25s; }
.dl-menu.dl-subview > li:not(.dl-subviewopen):not(.dl-subview):nth-child(6) { transition-delay: 0.30s; }
.dl-menu.dl-subview > li:not(.dl-subviewopen):not(.dl-subview):nth-child(n+7) { transition-delay: 0.35s; }

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
    margin: 1% 0 0 0;
}
@media only screen and (min-width:1401px) and (orientation:landscape)
    {.dl-menuwrapper > .dl-submenu,.dl-menuwrapper .dl-menu.dl-menuopen {margin: 5px 0 0 0;}}
@media only screen and (min-width: 1024px) and (max-width: 1400px) and (orientation:landscape)
    {.dl-menuwrapper > .dl-submenu,.dl-menuwrapper .dl-menu.dl-menuopen {margin: 6px 0 0 0;}}
@media only screen and (max-width: 1023px) and (orientation:landscape)
    {.dl-menuwrapper > .dl-submenu,.dl-menuwrapper .dl-menu.dl-menuopen {margin: 5px 0 0 0;}}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-2 {
	-webkit-animation: MenuAnimOut2 0.3s ease-in-out forwards;
	animation: MenuAnimOut2 0.3s ease-in-out forwards;
}

@-webkit-keyframes MenuAnimOut2 {
	0% { }
	100% {
		-webkit-transform: translateX(-100%);
        transform: translateX(-100%);/**/
		opacity: 0;
	}
}

@keyframes MenuAnimOut2 {
	0% { }
	100% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-2 {
	-webkit-animation: MenuAnimIn2 0.3s ease-in-out forwards;
	animation: MenuAnimIn2 0.3s ease-in-out forwards;
}

@-webkit-keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
        transform: translateX(-100%);/**/
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
        transform: translateX(0px);/**/
		opacity: 1;
	}
}

@keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
	-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
	animation: SubMenuAnimIn2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
        transform: translateX(-100%);/**/
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
        transform: translateX(0px);/**/
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1;
	}
}

/* Cascading swipe-up for items WITHIN a submenu as it flies in.
   The plugin doesn't animate the real .dl-submenu directly — it clones
   it into a temporary element (this selector, .dl-menuwrapper > .dl-submenu)
   and animates THAT via dl-animate-in-2/SubMenuAnimIn2 (horizontal slide,
   above), then swaps to the real, already-visible submenu once this
   clone's animation ends. So the per-item stagger has to target the
   clone's children, since that's the only version of these items that's
   actually visible while animating.
   li.dl-back is excluded here — its <a> background box should be
   visible immediately (see the fade-only rule for just its inner span,
   below), not swipe up as a whole box like the other items. */
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 > li:not(.dl-back) > a {
	opacity: 0;
	transform: translateY(20px);
	animation: itemSwipeUp 0.4s ease forwards;
}
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 > li:not(.dl-back):nth-child(2) > a { animation-delay: 0.05s; }
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 > li:not(.dl-back):nth-child(3) > a { animation-delay: 0.10s; }
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 > li:not(.dl-back):nth-child(4) > a { animation-delay: 0.15s; }
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 > li:not(.dl-back):nth-child(5) > a { animation-delay: 0.20s; }
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 > li:not(.dl-back):nth-child(6) > a { animation-delay: 0.25s; }
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 > li:not(.dl-back):nth-child(n+7) > a { animation-delay: 0.30s; }

@keyframes itemSwipeUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Back link: only the "back" text fades in (last, after every other
   item) — the <a>'s background box stays static and fully visible from
   the start, unlike the other items which swipe up as a whole box.
   Scoped to the transient clone only (.dl-animate-in-2), not the
   persisted real submenu — matching both caused a double-animation
   flash/restart the last time we tried this pattern. */
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 > li.dl-back > a > span {
	display: inline-block;
	opacity: 0;
	animation: backFadeIn 0.4s ease forwards;
	animation-delay: 0.35s;
}

@keyframes backFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
	-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
	animation: SubMenuAnimOut2 0.3s ease-in-out;
}

@-webkit-keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
        transform: translateX(0%);/**/
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(100%);
        transform: translateX(100%);/**/
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}

.no-js .dl-menuwrapper li .dl-submenu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}