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

#site-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
}

#site-menu {
    width: 140px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -140px;
    background: none;
    padding: 15px;
	background-image: -webkit-linear-gradient(bottom, color-stop(rgba(0, 0, 0, 0.0001) 0%), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-y;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

#site-wrapper.show-nav #site-canvas {
    -webkit-transform: translateX(140px);
    transform: translateX(140px);
}

.offcanvas_button {
	margin-left: 16px;
	max-height: 21;
	width: auto;
}

#site-canvas {

    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);

    -moz-transform: translateZ(0) translateX(0);
    -ms-transform: translateZ(0) translateX(0);
    -o-transform: translateZ(0) translateX(0);
    -webkit-transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0);

    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    -moz-transition: 300ms ease all;
    -ms-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;

    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.show-nav #site-canvas {
    -moz-transform: translateX(140px);
    -ms-transform: translateX(140px);
    -o-transform: translateX(140px);
    -webkit-transform: translateX(140px);
    transform: translateX(140px);

    -moz-transform: translateZ(0) translateX(140px);
    -ms-transform: translateZ(0) translateX(140px);
    -o-transform: translateZ(0) translateX(140px);
    -webkit-transform: translateZ(0) translateX(140px);
    transform: translateZ(0) translateX(140px);

    -moz-transform: translate3d(140px, 0, 0);
    -ms-transform: translate3d(140px, 0, 0);
    -o-transform: translate3d(140px, 0, 0);
    -webkit-transform: translate3d(140px, 0, 0);
    transform: translate3d(140px, 0, 0);
}