.resp-menu{
  position: relative;
  width: 45px;
  height: 45px;
}
.resp-menu__button{
  position: absolute;
  width: 40px;
  height: 26px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.resp-menu__button__line{
  display: block;
  position: absolute;
  left: 0;
  background-color: black;
  height: 4px;
  width: 100%;
  border-radius: 4px;
  pointer-events: none;
}
.resp-menu__button__line--top{
  top: 0;
}
.resp-menu__button__line--middle{
  top: 0;
  bottom: 0;
  margin: auto;
}
.resp-menu__button__line--bottom{
  bottom: 0;
}

.resp-menu--close .resp-menu__button__line--top {
  transition: transform .3s ease-in-out, 
    top .2s ease-in-out .3s;
}
.resp-menu--close .resp-menu__button__line--top:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: black;
  border-radius: 4px;
  transition: transform .1s ease-in-out .2s;
}
.resp-menu--close .resp-menu__button__line--middle {
  transition: opacity .0s ease-in-out .3s;
}
.resp-menu--close .resp-menu__button__line--bottom {
  transition: opacity .0s ease-in-out .3s, 
    bottom .2s ease-in-out .3s;
}

.resp-menu--close.open .resp-menu__button__line--top {
  top: 11px;
  transform: rotate(135deg);
  transition: top .3s ease-in-out, 
    transform .3s linear .3s;
}
.resp-menu--close.open .resp-menu__button__line--top:before {
  transform: rotate(90deg);
  transition: transform .1s ease-in-out .3s;
}
.resp-menu--close.open .resp-menu__button__line--middle {
  opacity: 0;
  transition: opacity .0s ease-in-out .3s;
}
.resp-menu--close.open .resp-menu__button__line--bottom {
  bottom: 11px;
  opacity: 0;
  transition: bottom .3s ease-in-out, 
    opacity .0s ease-in-out .3s;
}