.mobile-nav-btn {
  display: none; position: absolute; top: 0; bottom: 0; right: 15px; overflow: hidden;
  margin: auto; padding: 0; width: 30px; height: 30px; font-size: 0; text-indent: -9999px;
  appearance: none; box-shadow: none; border-radius: 0; border: none; cursor: pointer;
  transition: background 0.3s; background: transparent;
}

.mobile-nav-btn:focus { outline: none; }

.mobile-nav-btn span { display: block; position: absolute; top: 15px; left: 2px; right: 2px; height: 3px;
  background: white; transition: background 0s 0.3s }

.mobile-nav-btn span:before,
.mobile-nav-btn span:after { position: absolute; display: block; left: 0; width: 100%; height: 3px;
  background-color: #fff; content: ""; transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s;
}

.mobile-nav-btn span:before { top: -8px; transition-property: top, transform; }
.mobile-nav-btn span:after { bottom: -8px; transition-property: bottom, transform; }

.mobile-nav-btn.is-active span { background: transparent; }
.mobile-nav-btn.is-active span:before { top: 0; transform: rotate(45deg); }
.mobile-nav-btn.is-active span:after { bottom: 0; transform: rotate(-45deg); }

.mobile-nav-btn.is-active span:before,
.mobile-nav-btn.is-active span:after { transition-delay: 0s, 0.3s; }