#nav_menu {
position: fixed;
top: 0;
right: -400px;
background-color: var(--primary);
z-index: 1000;
padding: 3rem 3rem 1rem 3rem;
width: 400px;
transition: all .15s ease-in-out;
color: white;
overflow-y: scroll;
}

#nav_menu a {
color: white;
}

#nav_menu.active {
right: 0;
-webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.5);
}

#nav_menu .nav-link.active {
font-weight: bold;
}

#nav_menu svg {
  color: inherit;
}

#nav_menu .nav-link {
	color: white;
	font-size: 1.2em;
}

#nav_menu .nav-link {
display: block;
padding: 0.5rem 1rem;
}

#body-click {
display: block;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
height: 0;
left: 0;
top: 0;
z-index: 99;
background-color: var(--primary);
opacity: .25;
}

#body-click.active {
height: 100vh;
}

/** Close icon **/
#nav_menu .close {
	position: absolute;
	right: 2em;
	top: 2em;
	width: 2em;
	height: 2em;
	opacity: 0.5;
}
#nav_menu .close:hover {
  opacity: 1;
}
#nav_menu .close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 2em;
  width: 2px;
  background-color: #fff;
}
#nav_menu .close:before {
  transform: rotate(45deg);
}
#nav_menu .close:after {
  transform: rotate(-45deg);
}

@media (min-width: 992px) {
  #nav_menu {
  padding: 7rem 5rem 3rem 2rem;
  }
  #nav_menu .close {
  right: 2em;
  top: 2em;
  }
}

@media screen and (max-width:520px) {
  #nav_menu .nav-link.active:before {
  content: "";
  display: none;
  }
  #nav_menu .close {
  right: 1em;
  top: 1em;
  }
}