@charset "utf-8";

.btn1 {
  position: absolute;
  width: 60px;
  height: 60px;
  top: -6px;
  left: 15px;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.btn1 .icon-left {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  position: absolute;
  height: 5px;
  width: 20px;
  top: 30px;
  background-color: #20399d;
  left: 5px;
}
.btn1 .icon-left:before {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  position: absolute;
  width: 20px;
  height: 5px;
  background-color: #20399d;
  content: "";
  top: -10px;
}
.btn1 .icon-left:after {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  position: absolute;
  width: 20px;
  height: 5px;
  background-color: #20399d;
  content: "";
  top: 10px;
}
.btn1 .icon-left:hover {
  cursor: pointer;
}
.btn1 .icon-right {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  position: absolute;
  height: 5px;
  width: 20px;
  top: 30px;
  background-color: #20399d;
  left: 25px;
}
.btn1 .icon-right:before {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  position: absolute;
  width: 20px;
  height: 5px;
  background-color: #20399d;
  content: "";
  top: -10px;
}
.btn1 .icon-right:after {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  position: absolute;
  width: 20px;
  height: 5px;
  background-color: #20399d;
  content: "";
  top: 10px;
}
.btn1.open .icon-left {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  background: transparent;
}
.btn1.open .icon-left:before {
  -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
  transform: rotateZ(45deg) scaleX(1.4) translate(4px, 2px);
}
.btn1.open .icon-left:after {
  -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
  transform: rotateZ(-45deg) scaleX(1.4) translate(5px, -4px);
}
.btn1.open .icon-right {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  background: transparent;
}
.btn1.open .icon-right:before {
  -webkit-transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
  transform: rotateZ(-45deg) scaleX(1.4) translate(-8px, -4px);
}
.btn1.open .icon-right:after {
  -webkit-transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
  transform: rotateZ(45deg) scaleX(1.4) translate(-9px, 2px);
}
.btn1:hover {
  cursor: pointer;
}