.navigation-overlay {
    width:100vw;
    height:100vh;
    background:var(--monoBack);
    position:fixed;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.5s;
}

.navigation-overlay-show {
    top:0;
    left:0;
    opacity:1;
}

.navigation-overlay-hidden {
    top:-100vh;
    left:0;
    opacity:0;
}

.navigation-overlay-top {
	width:100%;
	position:absolute;
	box-shadow:0px 0px 5px var(--monoFront);
	top:0;
	left:0;
	background:var(--monoBack);
	    border-bottom:solid 0.25em var(--baseColour);
}

.navigation-overlay-top-inner {
	width:var(--contentwidth);
	margin:auto;
	background-size:auto 90% !important;
	background-repeat:no-repeat !important;
	background-position:left center !important;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

.navigation-overlay-top-inner i {
		font-size:1.25em;
	display:block;
	color:var(--monoFront);
	padding:0.5em;
	transition:all 0.5s;
	cursor:pointer;
}

.navigation-overlay-top-inner i:hover {
		background:var(--baseColour);
	color:var(--baseColourInvert);
}

.navigation-overlay-container {
    display:grid;
    width:100%;
    grid-template-columns:60% 40%;
    height:100%;
}

.navigation-overlay-container-image {
    background-size:cover !important;
    background-position:center !important;
        border-right:solid 0.25em var(--baseColour);
}

.navigation-overlay-container-menu {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    margin-top:15vh;
    max-height:80vh;
    overflow-y:auto;
}

.navigation-overlay-container-menu ul {
    list-style-type:none;
}

.navigation-overlay-container-menu ul li a {
    font-family:var(--font01);
    font-weight:900;
    text-transform:uppercase;
    text-decoration:none;
    font-size:1.25em;
    padding:0.1em;
    color:var(--baseColour);
    text-align:center;
    transition:.4s ease-in-out,color .4s ease-in-out;
        background: linear-gradient(to bottom,var(--baseColour) 0,var(--baseColour) 100%);
    background-position: 100% 100%;
    background-repeat: repeat-x;
    background-size: 0 0;
}
.navigation-overlay-container-menu ul li a:hover {
    background-size:100% 100%;
    color:var(--baseColourInvert);
}


.navigation-overlay-container-menu .menu-main-menu-container {
    min-width:50%;
}
.navigation-overlay-container-menu ul {
    width:100%;
}

.navigation-overlay-container-menu ul li {
    position:relative;
    
}

.navigation-overlay-container-menu ul li i {
position: absolute;
    font-size:1.5em;
    right:0;
    cursor:pointer;
    transition:all 0.5s;
    padding:0.25em;
}
.navigation-overlay-container-menu ul li i:hover {
    color:var(--baseColour);
}
.navigation-overlay-container-menu ul.sub-menu li a {
    font-size:1.1em;
    padding-left:1em;
}

.navigation-overlay-container-menu ul.sub-menu {
    display:none;
    margin-top:1em;
    margin-bottom:1em;
}

.fa-minus {
    display:none;
}

.navigation-overlay-container-menu {
	margin-right:2em;
}

/* width */
.navigation-overlay-container-menu::-webkit-scrollbar {
  width: 1em;
	border:solid 0.25em var(--monoBack);
	background:var(--monoFront);
}

/* Track */
.navigation-overlay-container-menu::-webkit-scrollbar-track {
	background:var(--monoFront);
}
 
/* Handle */
.navigation-overlay-container-menu::-webkit-scrollbar-thumb {
  background:var(--baseColour);
border:solid 0.25em var(--monoBack);
}

/* Handle on hover */
.navigation-overlay-container-menu::-webkit-scrollbar-thumb:hover {
  background:var(--secondaryColour);
}