.ham{
  width: 43px;
  height: 14px;
  margin-right: 15px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.ham span{
  width: 100%;
  height: 4px;
  display: block;
  background-color: black;  
}
.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);
}