#site-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-transition: 300ms ease all; 
  transition: 300ms ease all; 
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#site-canvas {
  width: 100%;
  height: 100%;
  position: relative;
}

#site-menu {
  position:fixed;
  width: 300px;
  left: -300px;
  top:60px;
  bottom:0;
  overflow-x:hidden;
  overflow-y:scroll;
  -webkit-transition: 300ms ease all; 
  transition: 300ms ease all; 
}

.show-nav #site-menu {
  -webkit-transition: 300ms ease all; 
  transition: 300ms ease all; 
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
}

.show-nav #site-wrapper {
  -webkit-transition: 300ms ease all; 
  transition: 300ms ease all; 
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
}