/* Nav
.nav-container { width: 150px; height: 150px; background: #0F7D4E; margin: 0; padding: 0; } */
.toggle-button {
  height: 22px;
  width: 30px;
  cursor: pointer;
  position: absolute;
  top: 24px; right: 30px;
  z-index: 10;
  -webkit-transition: all ease 0.3s; transition: all ease 0.3s;
}
.bar {
  background-color: #4D4D4D;
  display: block;
  width: 100%;
  height: 2px;
  border: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.bar + .bar {
    margin-top: 8px;
}
.middle {
    top: 10px;
}
.bottom {
  top: 20px;
}
.toggle-button:hover {
  opacity: .7;
}
.toggle-active .bar {/*
  background-color: #fff;*/
}
.toggle-active .top {
  margin-top: 3px;
  -webkit-transform: translateY(5px) translateX(0) rotate(45deg);
}
.toggle-active .middle {
  opacity: 0;
}
.toggle-active .bottom {
  -webkit-transform: translateY(-15px) translateX(0) rotate(-45deg);
}

.overlay {
  position: fixed;
  background: #E5DFD8;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  z-index: 9;
}
.nav-active {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay div { padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.overlay div span {  }
.overlay div span img { margin: 20px 0; max-width: 200px; }
.overlay ul.mainNav {
  display: block;
  position: relative;
  font-size: 21px;
  vertical-align: top;
}
.overlay ul.mainNav li {
  text-align: center;
  display: block;
  margin: 40px 0;
}
.overlay ul.mainNav li a {
  text-decoration: none;
}
.overlay ul.socialNav { display: none; }
.overlay ul.socialNav li { display: inline-block; margin: 15px; }
.overlay ul.socialNav li a { color: #fff; font-size: 30px; }