#off-canvas {
	background: #ffffff;
	position: absolute;
	top: 0px;
	right: 0px;
	display: none;
	font-size: 1px;
	font-size: 0;
	width: auto;
	height: auto;
	z-index: 101;
	padding: 20px;
	}
	#off-canvas::before {
		font-size: 2rem;
		color: inherit;
		width: auto;
		height: auto;
		display: block;
	}
#on-canvas {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 1px;
	font-size: 0;
	width: auto;
	height: auto;
	}
	#on-canvas::before {
		font-size: 2rem;
		color: inherit;
	}
	#mainnav > div #on-canvas {
		display: none;
	}

@media (max-width: 960px) {
	#mainnav > div { display: none; }
	#off-canvas { display: block; }
}

.sidr {
	display:none;
	position:absolute;
	position:fixed;
	top:0;
	height:100%;
	z-index:999999;
	width:100%;
	overflow-x:none;
	overflow-y:auto;
	background:#f8f8f8;
	color:#333;
	}
	.sidr.right {
		left:auto;
		right:-260px;
	}
	.sidr.left {
		left:-260px;
		right:auto;
	}
	.sidr > div {
		padding: 20px 0;
	}
	.sidr ul {
		padding: 20px 40px;
		font-size: 1.2rem;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
		}
		.sidr ul li {
			margin-bottom: 20px;
			list-style: none;
			position: relative;
			padding-left: 15px;
			}
			.sidr ul li:before{
				content:"- ";
				position: absolute;
				top: 0;
				left: 0;
				}
			.sidr ul ul {
				padding-bottom: 0;
				padding-left: 10px;
				padding-right: 0;
			}
			.sidr > div > ul > li {
				list-style: square;	
				padding-left: 0;
				}
				.sidr > div > ul > li:before {
					display: none;
				}