#navbar {
  background-color: #400C08; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: -70px; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* Style the navbar links */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 24px;
  font-family: Work Sans;
  font-weight: 700;
}

div.main_nav {
  float: right;
}

#navbar a:hover {
  background-color: #D9D9D7;
  color: #0D0D0D;
}

button.navbar_toggle {
	display: none;
	margin: 0;
	align-items: center;
	background: url(sources/list.png);
	background-size: contain;
	border: 0;
	height: 50px;
	width: 50px;
	margin-right: 10px;
	cursor: pointer;
}


@media only screen and (max-width : 700px){

  #navbar {
	  background-color: #400C08;
  }
  
  div.main_nav {
	  display: none;
  }
  
  div.show_nav {
	  display: flex;
	  flex-wrap: wrap;
	  width: 100%;
  }
  
  a.links{
	  float: left;
	  height: 50px;
	  width: 100%;
  }
  
button.navbar_toggle {
	display: flex;
	  float: right;
}
}