/**********************************************************
// Modal >> Nav
**********************************************************/
.Modal-Nav {
	padding: var(--10px);
	width: 100%;
	height: 100%;
	display: none;
	overflow: hidden;
	position: fixed;
	z-index: 999999;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	}

.Modal-Nav-BG {
	width: 3rem;
	height: 3rem;
	background: rgba(1, 26, 54, 0.9);
	box-shadow: unset;
	overflow: hidden;
	border-radius: 100%;
	-webkit-transition: all 0.9s ease-in-out;
       -moz-transition: all 0.9s ease-in-out;
        -ms-transition: all 0.9s ease-in-out;
         -o-transition: all 0.9s ease-in-out;
    		transition: all 0.9s ease-in-out;
	position: fixed;
	z-index: 100;
	top: var(--40px);
	right: 9.5%;
	}

body.admin-bar .Modal-Nav-BG { top: 4.5rem; }

.Modal-Nav-BG.Open {
	-webkit-transform: scale(150);
	   -moz-transform: scale(150);
	     -o-transform: scale(150);
	    -ms-transform: scale(150);
	        transform: scale(150);
	}

.Modal-Nav-Outer {
	padding-top: var(--60px);
	width: auto;
	overflow-x: hidden;
    overflow-y: scroll;
	position: absolute;
	z-index: 200;
	bottom: 0;
	right: -3.125rem;
	left: 0;
	top: 0;
	}

.Modal-Nav-Inner {
	margin-left: 15%;
	padding: 0 var(--20px) var(--20px) var(--20px);
	width: 85%;
	max-width: 43.75rem;
	display: none;
	}

/**********************************************************
// Modal Nav >> Close
**********************************************************/
.Modal-Nav-Close:hover,
.Modal-Nav-Close:focus,
.Modal-Nav-Close:focus-visible { background: var(--Color-Orange); }
.Modal-Nav-Close {
	padding: 0 !important;
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
	border: 0;
	border-radius: 100%;
	background: var(--Color-Red);
	color: var(--Color-White);
	font-size: var(--20px);
	cursor: pointer;
	display: inline-block;
	position: fixed;
	z-index: 300;
	top: var(--40px);
	right: 9.5%;
	}

body.admin-bar .Modal-Nav-Close { top: 4.5rem; }

/**********************************************************
// Modal Nav >> Links
**********************************************************/
.Modal-Nav-Links li {
	padding: 0.375rem 0;
	display: block;
	}

.Modal-Nav-Links li:first-child { padding-top: 0; }
.Modal-Nav-Links li:last-child { padding-bottom: 0; }

.Modal-Nav-Links .menu > li > a {
	line-height: 1.5em;
	font-family: var(--Font-Serif);
	font-weight: 700;
	font-size: var(--40px);
	display: inline-block;
	position: relative;
	}

.Modal-Nav-Links .menu > li.menu-item-has-children.Active > a:after { content: "\f0d7"; }
.Modal-Nav-Links .menu > li.menu-item-has-children > a:after {
	content: "\f0da";
	margin-left: var(--12px);
	font-family: "Font Awesome 6 Pro";
	font-weight: 700;
	font-size: var(--14px);
	color: var(--Color-White);
	display: inline-block;
	vertical-align: middle;
	}

.Modal-Nav-Links a:focus { color: var(--Color-White); }
.Modal-Nav-Links a:hover,
.Modal-Nav-Links a:focus-visible { color: var(--Color-Red); }
.Modal-Nav-Links a {
	color: var(--Color-White);
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	}

.Modal-Nav-Links .menu > li.current_page_parent > a,
.Modal-Nav-Links li.current_page_item > a { color: var(--Color-Red); }

.Modal-Nav-Links .sub-menu {
	margin: var(--10px) 0 0 var(--40px);
	padding-bottom: var(--10px);
	display: none;
	}

.Modal-Nav-Links .menu > li.current_page_parent > .sub-menu,
.Modal-Nav-Links .menu > li.current_page_item > .sub-menu,
.Modal-Nav-Links .menu > li.current_page_parent:focus > .sub-menu,
.Modal-Nav-Links .menu > li.current_page_item:focus > .sub-menu { display: block; }

.Modal-Nav-Links .sub-menu > li a {
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.0625rem;
	font-family: var(--Font-Title);
	font-weight: 300;
	font-size: var(--20px);
	display: inline-block;
	}

/**********************************************************
// Modal >> Nav >> Meta
**********************************************************/
.Modal-Nav-Meta { margin-top: var(--90px); }
.Modal-Nav-Meta li {
	margin: var(--10px) var(--10px) 0 var(--10px);
	display: inline-block;
	vertical-align: middle;
	}

.Modal-Nav-Meta li:first-child { margin-left: 0; }
.Modal-Nav-Meta li:last-child { margin-right: 0; }

.Modal-Nav-Meta li a:focus { color: var(--Color-White); }
.Modal-Nav-Meta li a:hover,
.Modal-Nav-Meta li a:focus-visible { color: var(--Color-Red); }
.Modal-Nav-Meta li a {
	text-decoration: underline;
	font-weight: 300;
	font-size: var(--14px);
	color: var(--Color-White);
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	     -o-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	}

/**********************************************************
// Media Queries
**********************************************************/
@media /* 1500px */
all and (max-width: 93.75rem),
all and (max-device-width: 93.75rem)
{
	.Modal-Nav-BG,
	.Modal-Nav-Close { right: 4%; }
}

@media /* 1280px */
all and (max-width: 80rem),
all and (max-device-width: 80rem)
{
	.Modal-Nav-BG,
	.Modal-Nav-Close { right: 1%; }
}

@media
all and (max-width: 64rem),
all and (max-device-width: 64rem)
{
	.Modal-Nav-BG,
	.Modal-Nav-Close {
		right: var(--20px) !important;
		top: var(--20px) !important;
		}

	body.admin-bar .Modal-Nav-BG,
	body.admin-bar .Modal-Nav-Close { top: 3.25rem !important; }
}

@media
all and (max-width: 48rem),
all and (max-device-width: 48rem)
{
	.Modal-Nav-Inner { margin-left: 10%; }
	.Modal-Nav-Links .menu > li > a { font-size: var(--30px); }
	.Modal-Nav-Links .menu > li.menu-item-has-children > a:after { font-size: var(--12px); }
	.Modal-Nav-Links .sub-menu > li a { font-size: var(--16px); }

	body.admin-bar .Modal-Nav-BG,
	body.admin-bar .Modal-Nav-Close { top: 4.125rem !important; }
}
