nav
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 31px;
		background-color: white;
		color: #9d9999;
		border-bottom: 2px solid #d7d7d7;
	}

	nav > .container
	{
		display: flex;
		justify-content: center;
		height: 100%;
	}

	#menu
	{
	  display: flex;
	  align-items: center;
	  height: inherit;
	  margin: 0;
	  transition: 0.5s;
	  font-weight: bold;
	}

	#hamburger_menu
	{
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  height: inherit;
	  padding: 9px 0;
	  margin-right: 15px;
	  overflow: hidden;
	}

	#hamburger_menu span
	{
	  background-color: #9d9999;
	  width: 24px;
	  height: 2px;
	  transition: 0.5s;
	}

	#menu span:first-child
	{
		position: relative;
		top: 1px;
	}

	#menu span:last-child
	{
	  position: absolute;
	  top: 14px;
	}

	#main_menu
	{
	  position: fixed;
	  z-index: 2;
	  top: 31px;
	  left: -300vw;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-start;
	  width: 100%;
	  min-height: calc(100vh - 31px);
	  padding: 0;
	  margin: 0;
	  background-color: white;
	}

	#main_menu > li
	{
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: flex-start;
	  height: auto;
	  min-height: 40px;
	  text-align: center;
	  border-bottom: solid 1px #d7d7d7;
	  transition-duration: 0.2s;
	}

	#main_menu a, .menu_item, #main_menu li > span
	{
  		font-size: 15px;
	  font-weight: bold;
	  color: #9d9999;
	  padding-left: 15px;
	  padding-top: 11px;
	  height: 40px;
	  width: 100%;
	  text-align: left;
	}

	@media(min-width: 960px)
	{
		nav
		{
			height: 40px;
			border-bottom: none;
		}

		#menu
		{
			display: none;
		}

		#main_menu
		{
			position: initial;
			flex-direction: row;
			justify-content: center;
			min-height: initial;
			width: initial;
		}

		#main_menu > li
		{
		  border: none;
		}

		#main_menu a
		{
			display: flex;
			align-items: center;
			text-align: center;
			font-size: 13px;
		  	padding: 0 10px;
		}

		#main_menu li:hover
		{
			background-color: var(--color2);
		}

		#main_menu li:hover a
		{
			color: white;
		}

	}

	.opened #main_menu {
  left: 0;
  transition: 0.5s;
    transition-timing-function: ease;
  transition-timing-function: ease-out;
}

.opened #hamburger_menu span:nth-child(1) {
  opacity: 0;
  transition: 0.5s;
}

.opened #hamburger_menu span:nth-child(2) {
  transform: rotate(-45deg);
  transition: 0.5s;
}

.opened #hamburger_menu span:nth-child(3)
{
  opacity: 0;
  transition: 0.5s;
}

.opened #hamburger_menu span:last-child
{
  transform: rotate(45deg);
  transition: 0.5s;
  
}