#off-canvas {
	position: absolute;
	top: 20px;
	right: 20px;
	display: none;
	font-size: 1px;
	font-size: 0;
	width: auto;
	height: auto;
	z-index: 101;
	}
	#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;
	}
	header.header #on-canvas {
		display: none;
	}

@media (max-width: 640px) {
	header.header ul.top-nav { 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 ul {
		padding: 40px;
		font-size: 1.5rem;
		}
		.sidr ul li {
			margin-bottom: 20px;
		}