.header
{
	background: #e1ffb5;
	width: 100%;
	height: 100px;
	box-shadow: 0 8px 6px rgb(0,0,0,0.3);
}

.container
{
	width: 1000px;
	height: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 250px auto;
}

.container #logo-container
{
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container #logo-container img
{
	max-width: 100%;
	max-height: 100%;
}

/* NAVIGATION */

.container #navigation
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	float: right;
	height: 100%;
	display: flex;
	justify-content: flex-end;
}

.container #navigation a
{
	height: 100%;
	float: left;
	padding: 0px 20px;
	text-decoration: none;
}

.container #navigation a:last-child
{
	padding-right: 0px;
}

.container #navigation a li
{
	display: table-cell;
	font-family: 'Quicksand';
	font-size: 18px;
	color: #338000;
	line-height: 100px;
	font-weight: 600;
	opacity: 100%;
	transition: opacity 0.1s
}

.container #navigation a li:hover
{
	opacity: 75%;
	transition: opacity 0.1s
}

@media screen and (max-width: 1000px)
{
	.header
	{
		height: 80px;
	}

	.container
	{
		width: 100%;
		grid-template-columns: 80px auto;
	}

	.container #navigation
	{
		display: none;
	}

	.container #logo-container img
	{
		max-height: 70px;
		max-width: 100%;
	}
}

.sidenav 
{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #e1ffb5;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a 
{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #338000;
  display: block;
  white-space: nowrap;
  transition: 0.3s;
  font-weight: 800;
}

.sidenav a:hover 
{
  opacity: 75%;
}

.sidenav .closebtn 
{
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) 
{
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.menu
{
  display: none;
}

.menu-button 
{
  display: none;
  background: rgba(0, 0, 0, 0);
  font-family: 'Roboto', sans-serif;
  color: #54d100;
  font-size: 42px;
  border: none;
  cursor: pointer;
  text-align: center;
}

@media only screen and (max-width: 1000px)
{
  .menu
  {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 3px solid rgba(51, 128, 0, 0.5);
  }

  .menu-button
  {
    display: block;
  }

}