.nav-btn { display:none; }

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

.close-btn { display:block; width:30px; height:30px; outline:none; background:#000 url("../images/icon-close.png") no-repeat; background-size:100%; text-indent: 100%; opacity:1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.nav-btn { position:absolute; left:0; top:0; width:50px; height:50px; border:none; background:url(../images/icon-menu.png) no-repeat; background-size:auto 100%; display:block; text-indent:-9999px; box-shadow:inset -1px 0 0 rgba(0, 0, 0, 0.07); }

#outer-wrap { position:relative; overflow:hidden; width:100%; background:#134051; }
#inner-wrap { position:relative; width:100%; display:inline-block; background:#FFF; }
	
	#nav { position:absolute; top:0; padding:50px 0 0 0; margin:0; overflow:hidden; width:100%; color:#FFF; z-index:200; display:inline-block; box-shadow:none; }
		#nav:not(:target) { z-index: 1; height: 0; }
		#nav:target .close-btn { display: block; }
		#nav .close-btn { position: absolute; top:-50px; left:20px; }
		
		#nav ul { box-shadow:0 -1px 0 rgba(250, 250, 250, 0.05); }
			#nav li { width:100%; height:auto; border-bottom:1px solid rgba(250, 250, 250, 0.05); text-align:left; padding:0; box-shadow:none; }
			#nav li:hover { background:none; }
			#nav li:last-child { box-shadow:none; }
				#nav li a { float:left; width:100%; height:50px; color:#FFF; padding:0 25px; font-family:Roboto; line-height:50px; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.7); box-shadow:none; background:none; }
				#nav li a:hover , #nav li a.active { background:rgba(0, 0, 0, 0.2); box-shadow:inset 3px 0 0 #E5333E; }
				
				#nav li span { float:left; width:100%; display:block; position:static; padding-bottom:15px; border:none; box-shadow:none; }
					#nav li span a { font-weight:400; background:none; box-shadow:none; padding-left:40px; border-bottom:1px solid rgba(250, 250, 250, 0.15); }
					#nav li span a:first-child { border-top:1px solid rgba(250, 250, 250, 0.15); }
					#nav li span a:hover { background:rgba(0, 0, 0, 0.2); }

	.js-ready #nav { height: 100%; width:270px; background:none; /*	box-shadow:inset -30px 0 60px -20px rgba(0, 0, 0, 0.9); */ }
	
	.js-ready #nav .close-btn { display:block; opacity:0.3; }
	.js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover { opacity:1; }

	.js-ready #nav { left: -270px; }
	.js-ready #inner-wrap { left: 0; }

	.js-nav #inner-wrap { left:270px; }
		.js-nav #nav { height:auto; padding-bottom:100px; }

	.csstransforms3d.csstransitions.js-ready #nav {
	left: 0;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	-ms-transform: translate3d(-100%, 0, 0);
	-o-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	}
	.csstransforms3d.csstransitions.js-ready #inner-wrap {
	left: 0 !important;
	-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);
	-webkit-transition: -webkit-transform 500ms ease;
	-moz-transition: -moz-transform 500ms ease;
	-o-transition: -o-transform 500ms ease;
	transition: transform 500ms ease;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	}

	.csstransforms3d.csstransitions.js-nav #inner-wrap {
	-webkit-transform: translate3d(270px, 0, 0) scale3d(1, 1, 1);
	-moz-transform: translate3d(270px, 0, 0) scale3d(1, 1, 1);
	-ms-transform: translate3d(270px, 0, 0) scale3d(1, 1, 1);
	-o-transform: translate3d(270px, 0, 0) scale3d(1, 1, 1);
	transform: translate3d(270px, 0, 0) scale3d(1, 1, 1);
	}

	.csstransforms3d.csstransitions.js-ready #nav .block {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
	-webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
	-webkit-transition-delay: ease, 0s;
	-moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
	-o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
	transition: opacity 300ms 100ms ease, transform 500ms ease;
	-webkit-transform: translate3d(270px, 0, 0) scale3d(0.9, 0.9, 0.9);
	-moz-transform: translate3d(270px, 0, 0) scale3d(0.9, 0.9, 0.9);
	-ms-transform: translate3d(270px, 0, 0) scale3d(0.9, 0.9, 0.9);
	-o-transform: translate3d(270px, 0, 0) scale3d(0.9, 0.9, 0.9);
	transform: translate3d(270px, 0, 0) scale3d(0.9, 0.9, 0.9);
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	}

	.csstransforms3d.csstransitions.js-nav #nav .block {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
	-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);
	}

}