#site-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}
#site-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  
  -webkit-transform: translate3d(0, 0, 0); 
  transform: translate3d(0, 0, 0); 
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  z-index:2000;
}

.show-nav #site-canvas {
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
  
  transform: translate3d(300px, 0, 0);
  -webkit-transform: translate3d(300px, 0, 0);
}

#site-menu {
	width: 300px;
	position: absolute;
	top: 85px;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b30003+0,800000+100 */
	background: #b30003; /* Old browsers */
	background: -moz-linear-gradient(top, #b30003 0%, #800000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #b30003 0%,#800000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #b30003 0%,#800000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b30003', endColorstr='#800000',GradientType=0 ); /* IE6-9 */
}	

#site-menu {left: -300px;}

.boring #site-menu {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
	-webkit-transition: 300ms ease all; 
	transition: 500ms ease all;
}

.boring .show-nav #site-menu {
  -webkit-transition: 500ms ease all; 
  transition: 500ms ease all; 
 
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
  
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
  
  width:100%;

}

.boring .show-nav #site-canvas, .boring-right .show-nav #site-canvas {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
} 

ul.offcanvas{padding:0; margin:0;}
ul.offcanvas li {list-style-type:none; text-align:center;padding: 10px 0px; overflow: hidden;}
ul.offcanvas li a {transition: 0.3s; text-transform: uppercase; text-decoration: none; color: #eac176;}
ul.offcanvas li a:hover {text-decoration: underline; color: #fff7b7; transition: 0.3s;}
ul.offcanvas li.border-bottom {padding-bottom:0 !important; margin-bottom: -3px !important; margin-top: -13px !important;}

@media (min-width: 761px) {
ul.offcanvas {    display: none;}
}