.nav-toggle
	{
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1100;
	}

.nav-main
	{
	grid-area: bottom-left;
	height: 78vh;
	overflow-x: hidden;
	overflow-y: auto;
	min-height: 0;
	direction: rtl;
	}

.nav-main ul
	{
	text-align: center;
    padding: 0;
    margin: 0;
	}

.nav-main li
	{
	display: inline-block;
	width: 100%;
	margin: 0 0 0.38rem 2rem;
	}

.nav-main li:hover
	{
	background-color: rgba(255, 255, 255, 0.7);
	opacity: 0.7;
/*	font-size: 1.25rem;	*/
	}

.nav-main ul li ul li:hover
	{
	background-color: rgba(0, 0, 0, 0.2);
	opacity: 0.7;
	}

.nav-main ul li ul li:hover a
	{
	color: #000000;
	}

.nav-main a
	{
	text-decoration: none;
	letter-spacing: 0.25rem;
	}

.logo
	{
	margin: 0 auto;
	grid-area: top-left;
	padding: 0.75rem;
	}

.custom-logo:hover
	{
	opacity: 0.7;
	}

.custom-logo
	{
	margin-left: 1rem;
	min-height: 125px;
	height: 18vh;
	width: auto;
	}

@media (min-width: 769px)
	{
	.nav-toggle
		{
		display: none;
		}	
	}

@media (max-width: 768px)
	{
	.logo
		{
		position: fixed;
		width: 98vw;
		top: 0;
		text-align: center;
		}

	.nav-main
		{
		position: fixed;
		top: 22vh;
		right: 0;
		}

	.nav-main, .logo
		{
		background: #cecece;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 1000;
		}

	.nav-main.is-open, .logo.is-open
		{
 		transform: translateX(0);
		}
	}