.ham{
  width: 35px;
  height: 15px;
  margin-right: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ham span{
  width: 100%;
  height: 4px;
  display: block;
  background-color: #0e0e0e;
}
.ham span:nth-child(1){
   transition: 0.5s;
}
.ham span:nth-child(2){
    transition: 0.01s;
}
.ham span:nth-child(3){
    transition: 0.5s;
}
.ham.x span:nth-child(1){
   transform:translateY(10px) rotate(45deg);
}
.ham.x span:nth-child(2){
  opacity: 0; 
}
.ham.x span:nth-child(3){
   transform:translateY(-10px) rotate(-45deg);
}