.container {
display: inline-block;
cursor: pointer;
}


.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
/* background-color: rgb(238, 238, 228); */
background-color: #4d4d4d;
margin: 6px 0px 6px 0px;
transition: 0.1s;
}

.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}


@media only screen and (max-width: 500px) {

.bar1, .bar2, .bar3 {
/*
  width: 17.5px;
  height: 2.5px;
*/
  width: 24.5px;
  height: 3.5px;


  /* background-color: rgb(238, 238, 228); */
  background-color: #4d4d4d;
  /*
  margin: 3px 0px 3px 0px;
  */
  margin: 4px 0px 4px 0px;
  transition: 0.1s;
}

.change .bar1 {
  /*
  -webkit-transform: rotate(-45deg) translate(-4.5px, 3px);
  transform: rotate(-45deg) translate(-4.5px, 3px);
  */

  -webkit-transform: rotate(-45deg) translate(-6.0px, 4.2px);
  transform: rotate(-45deg) translate(-6.0px, 4.2px);


}

.change .bar2 {opacity: 0;}

.change .bar3 {
  /*
  -webkit-transform: rotate(45deg) translate(-4px, -4px);
  transform: rotate(45deg) translate(-4px, -4px);
  */

  -webkit-transform: rotate(45deg) translate(-5.8px, -5.6px);
  transform: rotate(45deg) translate(-5.8px, -5.6px);

}

}