/* CSS for mobile off-canvas navigation menu */

/*Hide mobile nav on all except mobile */
.mobileNavWrapper {display:none;}

a.open-panel,
a.close-panel { display: none; }

@media only screen and (max-width: 769px) {
	
	.mobileNavWrapper {display:block;}

	/* Move nav off screen, setup transitions */
	nav.mobileNav {
		width: 75%;
		position: absolute;
		left: -75%;
		top: 0;
		height: 100%;
		background: #af1212;
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top, #af1212 0%, #870202 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#af1212), color-stop(100%,#870202));
		background: -webkit-linear-gradient(top, #af1212 0%,#870202 100%);
		background: -o-linear-gradient(top, #af1212 0%,#870202 100%);
		background: -ms-linear-gradient(top, #af1212 0%,#870202 100%);
		background: linear-gradient(to bottom, #af1212 0%,#870202 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af1212', endColorstr='#870202',GradientType=0 );
	}
	/* Display nav items vertically */
	ul.mobileNavLinks { border-top: 1px solid #888; } 
	ul.mobileNavLinks li {
	 width: 100%;
	 text-align: left;
	 padding: .5em 1em;
	 box-sizing: border-box;
	 border-bottom: 1px solid #888;
	}

	/* Reveal open/close buttons */
	a.open-panel,
	a.close-panel { 
		display: block;
		outline: 0;
		color: #FFF;
		border: 1px solid #FFF;
		border-radius: 3px;
		text-align: center;
		padding: 5px;
		position:absolute;
		top:35%;
		left:20px;
	}
	a.open-panel:hover, a.close-panel:hover,
	.open-panel:focus, a.close-panel:focus,
	.open-panel:active, a.close-panel:active { 
		color: #eee;
		background: #680202;
 	}
	.close-panel {
		position: relative;
		top: .5em;
		left: 1em;
	}
	.openNav .pageWrapper {
		left: 0;
		-webkit-transform: translate3d(75%, 0, 0);
		-moz-transform: translate3d(75%, 0, 0);
		-ms-transform: translate3d(75%, 0, 0);
		-o-transform: translate3d(75%, 0, 0);
		transform: translate3d(75%, 0, 0);
		-webkit-transition: -webkit-transform 500ms ease;
		-moz-transition: -moz-transform 500ms ease;
		-o-transition: -o-transform 500ms ease;
		transition: transform 500ms ease;
	}
	.pageWrapper {
		left: 0px;
		position:static;
		-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;
	}
	/* IE9 does not support transform3d, so use margins and position instead */
	.ie9 .openNav nav.mobileNav {left:0;} 
	.ie9 .openNav .pageWrapper { margin-left: 75%;}

	/* When the panel is closed, transition the page back to the left */

}