#sp-hide-menu {
  display: none;
}
#sp-nav,
#sp-nav.wide {
  width: 80%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#sp-nav nav,
#sp-nav.wide nav {
  display: block;
  background: black;
  color: white;
  z-index: 5;
  height: 100%;
}
#sp-nav nav div,
#sp-nav.wide nav div {
  z-index: 5;
}
#sp-page {
  position: absolute;
  width: 100%;
  height: 100%;
  float: right;
  z-index: 10;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#sp-nav.show,
#sp-nav.show.wide {
  left: 0px;
  overflow-x: hidden;
background: white;
border: 1px solid gray;

}
#sp-nav.show + #sp-page #sp-show-menu,
#sp-nav.show.wide + #sp-page #sp-show-menu {
  display: none;
}
#sp-nav.show + #sp-page #sp-hide-menu,
#sp-nav.show.wide + #sp-page #sp-hide-menu {
  display: inline;
}
#sp-nav.show + #sp-page,
#sp-nav.show.wide + #sp-page {
  position: absolute;
  -webkit-transform: translateX(80%);
  transform: translateX(80%);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1080px) {
    body {
        overflow-x: hidden;
    }
}
@media (min-width: 900px) {
  #sp-nav {
    width: 405px;
  }
    #sp-page {
        -webkit-transform: none;
        transform: none;
        transition-duration:0;
        -webkit-transition-duration: 0;
        -webkit-overflow-scrolling: none;
    }
  #sp-nav.show + #sp-page {
      -webkit-transform: none;
      transform: none;
      transition-duration:0;
      -webkit-transition-duration: 0;
      -webkit-overflow-scrolling: none;
      left: 405px;
      height: inherit;
      width: initial;
      overflow-x: visible;
      right: 0;

  }
}