.menuToggle
{
  position: relative;
  top: 0px;
  z-index: 1;
  right: 0px;
  -webkit-user-select: none;
  user-select: none;
  width: 40px;
  height: 40px;
  float: right;
  transition:300ms;
}

.menuToggle a
{
  text-decoration: none;
  /* color: #232323; */
  transition: color 0.3s ease;
}

.menuToggle a:hover
{
  color: white;
}


.menuToggle input
{
  display: block;
  width: 27px;
  height: 25px;
  position: absolute;
  /* top: -7px; */
  /* left: -5px; */
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

.menuToggle input:checked {/* transform: scale(0.5); *//* display: block; */}

.menuToggle input[type="checkbox"]:checked {
    /* transform: scale(0.5); */
    /* display: block; */
}

/*
 * Just a quick hamburger
 */
.menuToggle span
{
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: 18%;
  position: relative;
  background: #ffffff;
  z-index: 1;
  transform-origin: center;
  transition: 0.3s cubic-bezier(0.77,0.2,0.05,1.0);
}

.menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

.menuToggle span:nth-last-child(2)
{
  transform-origin: center;
}


.menuToggle span:nth-last-child(3)
{
  margin-top: calc(-2px - 18%);
}


.menuToggle.active span:nth-last-child(3)
{
  margin-top: calc(-2px - 18%);
  top: 9px;
}


.menuToggle.active{
  top:5px;
  transform: scale(0.8);
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
.menuToggle.active > span
{
  opacity: 1;
  transform: rotate(45deg);
}

/*
 * But let's hide the middle one.
 */
.menuToggle.active > span:nth-last-child(1)
{
  opacity: 0;
  transform: rotate(0deg);
}

.menuToggle.active > span:nth-last-child(4)
{
  opacity: 0;
  transform: rotate(0deg);
}

/*
 * Ohyeah and the last one should go the other direction
 */
.menuToggle.active > span:nth-last-child(2)
{
    transform: rotate(-45deg );
    }

.menuToggle:hover span {
    background: #ffffff !important;
}