.menu-button-target {
  cursor:pointer;
  position:fixed;
  z-index:200;
  right:03vw;
  top:3vw;
  height:2rem;
  width:3.5rem;
  height:3.5rem;
  border-radius:0.5rem;
  background-color:#f17233;
  padding: 0 10px;
  transition: all 0.2s;
}
.menu-button-target.active {
  background-color: transparent;
}
.menu-button-target.active .menu-button {
  background-color: transparent;
}
.menu-button-target.active .menu-button:before {
  transform: translateY(0%) rotate(45deg);
  background-color: #ffffff;
}
.menu-button-target.active .menu-button:after {
  transform: translateY(0%) rotate(-45deg);
  background-color: #ffffff;
}
.menu-button {
  position: relative;
  top:50%;
  left: 0;
  display: block;
  width:2.3rem;
  height:0.3rem;
  margin-top: -2px;
  background-color: #ffffff;
  transition: all 0.2s;
}
.menu-button:before,
.menu-button:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: #ffffff;
  transition: all 0.2s;
}
.menu-button:before {
  transform: translateY(-250%);
}
.menu-button:after {
  transform: translateY(250%);
}
.menu-overlay {
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
    background-color: rgba(0, 0, 0, 0.9);
    display:none;
    z-index:3;
}
.menu-overlay.active nav ul {
  margin-top:calc(50vh - 210px);
}
nav {
  overflow: hidden;
}
nav ul {
  overflow: hidden;
  margin-top: 0;
  transition: margin-top 0.4s ease;
}
nav ul li {
  width: 100%;
  text-align: center;
  color: #FFF!important;
  padding: 10px 0;
  font-size:2rem;
  transition: background-color 0.4s, color 0.2s;
}
nav ul li a { color:#FFF; }
/*
nav ul li:hover {
  background-color: #ffffff;
  color: #33b6db;
}
*/

@media screen and (min-width:1001px) {
	.menu-button-target { display:none; }
}
@media screen and (max-width:1000px) {
	.menu-button-target { display:black; }
}