#menu__toggle {
  opacity: 0;
  
  &:checked > span {
    transform: rotate(45deg);
  }
  
  &:checked > span::before {
    top: 0;
    transform: rotate(0deg);
  }
  
  &:checked > span::after {
    top: 0;
    transform: rotate(90deg);
  }
  
  &:checked ~ .menu__box {
    right: 0 !important;
  }
}

.menu__box {
  display: flex;
  position: fixed;
  bottom: 0px;
  right: -100%;
  width: 80%;
  max-width: 400px;
  height: 100%;
  margin: 0;
  list-style: none;
  background-color: white;
  transition-duration: .25s;
  z-index: 1045;
  flex-direction: column;
  padding: 55px 15px;
}
