/* Menu Appearance */

.pushy {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  overflow: auto;
  width: 260px;
  height: 100%;
  background: #222;
  -webkit-box-shadow: inset -10px 0 6px -9px rgba(0,0,0,.7);
     -moz-box-shadow: inset -10px 0 6px -9px rgba(0,0,0,.7);
          box-shadow: inset -10px 0 6px -9px rgba(0,0,0,.7);
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pushy .parent {
  font: bold 18px/1 sans-serif;
  font: bold 1.8rem/1 sans-serif;
  border-top: 1px solid #666;
}

.pushy .parent:first-child {
  border-top: 0;
}

.pushy .parent > a {
  display: block;
  padding: 15px 30px 14px;
  text-decoration: none;
  color: #eee;
}

.pushy .children {
  padding: 20px 45px;
  border-top: 1px solid #333;
}

.pushy .children li {
  font: bold 14px/1 sans-serif;
  font: bold 1.4rem/1 sans-serif;
  margin-top: 15px;
  list-style: none;
}

.pushy .children li:first-child {
  margin-top: 0;
}

.pushy .children a {
  text-decoration: none;
  color: #eee;
}

/* Menu Movement */

.pushy-right {
  -webkit-transform: translate3d(260px,0,0);
     -moz-transform: translate3d(260px,0,0);
      -ms-transform: translate3d(260px,0,0);
       -o-transform: translate3d(260px,0,0);
          transform: translate3d(260px,0,0);
}

.pushy-open {
  -webkit-transform: translate3d(0,0,0);
     -moz-transform: translate3d(0,0,0);
      -ms-transform: translate3d(0,0,0);
       -o-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

.container-push,
.push-push {
  -webkit-transform: translate3d(-260px,0,0);
     -moz-transform: translate3d(-260px,0,0);
      -ms-transform: translate3d(-260px,0,0);
       -o-transform: translate3d(-260px,0,0);
          transform: translate3d(-260px,0,0);
}

/* Menu Transitions */

.pushy,
.pushy-container,
.push {
  -webkit-transition: -webkit-transform .2s cubic-bezier(.16,.68,.43,.99);
     -moz-transition:    -moz-transform .2s cubic-bezier(.16,.68,.43,.99);
       -o-transition:      -o-transform .2s cubic-bezier(.16,.68,.43,.99);
          transition:         transform .2s cubic-bezier(.16,.68,.43,.99);
}

/* Site Overlay */

.site-overlay {
  display: none;
}

.pushy-active .site-overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  right: 260px;
  bottom: 0;
  left: 0;
  display: block;
  -webkit-animation: fade 500ms;
     -moz-animation: fade 500ms;
      -ms-animation: fade 500ms;
       -o-animation: fade 500ms;
          animation: fade 500ms;
  background-color: rgba(0,0,0,.7);
}

@keyframes fade{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fade{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fade{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fade{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}​

@-o-keyframes fade{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Example Media Query */

@media screen and (max-width: 768px) {

  .pushy {
    font-size: 1.0em;
  }

}