.pushy {position:fixed;top:0;width:300px;height:100%;overflow:auto;background:#111;z-index:9999;
-webkit-overflow-scrolling: touch;
}

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

.pushy-left-open {left:0px;
-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-left-push {
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
}

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

.pushy-right-open {right:0px;
-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-right-push {
-webkit-transform: translate3d(-300px,0,0);
-moz-transform: translate3d(-300px,0,0);
-ms-transform: translate3d(-300px,0,0);
-o-transform: translate3d(-300px,0,0);
transform: translate3d(-300px,0,0);
}


.pushy-top {width:100%;height:auto;
-webkit-transform: translate3d(0,-100%,0);
-moz-transform: translate3d(0,-100%,0);
-ms-transform: translate3d(0,-100%,0);
-o-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}

.pushy-top-open {top:0;width:100%;height:auto;
-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-top-push {
-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);
}


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


.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 */
.overlay-pushy {display:none;}

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

@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; }
}

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