.btn10 {
text-align:left;
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0%;
  left:0%;
  margin:13px 0px 0px 20px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.btn10 .icon {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  height: 5px;
  width: 30px;
  top: 10px;
  background-color: #888888;
}
.btn10 .icon:before {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  width: 30px;
  height: 5px;
  background-color: #888888;
  content: "";
  top: -10px;
}
.btn10 .icon:after {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  width: 30px;
  height: 5px;
  background-color: #888888;
  content: "";
  top: 10px;
}
.btn10.open .icon {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.btn10.open .icon:before {
  -webkit-transform: rotateZ(45deg) scaleX(0.75) translate(10px, -3px);
          transform: rotateZ(45deg) scaleX(0.75) translate(10px, -3px);
}
.btn10.open .icon:after {
  -webkit-transform: rotateZ(-45deg) scaleX(0.75) translate(10px, 3px);
          transform: rotateZ(-45deg) scaleX(0.75) translate(10px, 3px);
}
.btn10:hover {
  cursor: pointer;
}