.btn11 {
  position: absolute;
  width: 32px;
  height: 32px;
  margin:2px 8px;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.btn11 .icon-left {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  height: 2px;
  width: 12px;
  top: 15px;
  background-color: #fff;
}
.btn11 .icon-left:before {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #fff;
  content: "";
  top: -8px;
}
.btn11 .icon-left:after {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #fff;
  content: "";
  top: 8px;
}
.btn11 .icon-left:hover {
  cursor: pointer;
}
.btn11 .icon-right {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  height: 2px;
  width: 12px;
  top: 15px;
  background-color: #fff;
  left: 12px;
}
.btn11 .icon-right:before {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #fff;
  content: "";
  top: -8px;
}
.btn11 .icon-right:after {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #fff;
  content: "";
  top: 8px;
}
.show .btn11 .icon-left {
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
  background: transparent;
}
.show .btn11 .icon-left:before {
  -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(1.5px, 1.5px);
          transform: rotateZ(45deg) scaleX(1.25) translate(1.5px, 1.5px);
}
.show .btn11 .icon-left:after {
  -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(1.5px, -1.5px);
          transform: rotateZ(-45deg) scaleX(1.25) translate(1.5px, -1.5px);
}
.show .btn11 .icon-right {
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
  background: transparent;
}
.show .btn11 .icon-right:before {
  -webkit-transform: rotateZ(-45deg) scaleX(1.25) translate(-1.5px, 1.5px);
          transform: rotateZ(-45deg) scaleX(1.25) translate(-1.5px, 1.5px);
}
.show .btn11 .icon-right:after {
  -webkit-transform: rotateZ(45deg) scaleX(1.25) translate(-1.5px, -1.5px);
          transform: rotateZ(45deg) scaleX(1.25) translate(-1.5px, -1.5px);
}
.btn11:hover {
  cursor: pointer;
}


.btn12 {
  position: absolute;
  width: 32px;
  height: 32px;
  /*top: 300px;
  left: 312px;*/
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.btn12 .icon {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  height: 3px;
  width: 30px;
  top: 12px;
  background-color: #fff;
}
.btn12 .icon:before {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: #fff;
  content: "";
  top: -10px;
}
.btn12 .icon:after {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: #fff;
  content: "";
  top: 10px;
}
.btn12.open .icon {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  background: transparent;
}
.btn12.open .icon:before {
  -webkit-transform: rotateZ(45deg) scaleX(1.15) translate(6.5px, 6.5px);
          transform: rotateZ(45deg) scaleX(1.15) translate(6.5px, 6.5px);
}
.btn12.open .icon:after {
  -webkit-transform: rotateZ(-45deg) scaleX(1.15) translate(6.5px, -6.5px);
          transform: rotateZ(-45deg) scaleX(1.15) translate(6.5px, -6.5px);
}
.btn12:hover {
  cursor: pointer;
}