/* MAKES THE DRAWER A REAL OFFCANVAS AND SHIFTS BODY TO RIGHT */
body {
	margin-left:0;
	transition: margin-left 300ms;
	width:100%;
}
body.offcanvas {
	margin-left:calc(100vw - 2.5rem);
}
/* ––– */

#offcanvas {
	display:none;
}
.canvas {
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	z-index:999;
}
label.offcanvas {
	display:inline-block;
	width:2.5rem;
	height:2.5rem;
	cursor: pointer;
	position:absolute;
	left:100%;
	background: rgba(0,0,0,0);
	transition: background 300ms;
}
label.offcanvas:before {
	content:"";
	display:inline-block;
	width:1rem;
	height:.25rem;
	border-top: 3px solid #fdc300;
	border-bottom: 3px solid #fdc300;
	position:absolute;
	top:1rem;
	margin-top:-3px;
	left:.75rem;
}
label.offcanvas:after {
	content:"";
	display:inline-block;
	width:1rem;
	height:.25rem;
	border-top: 3px solid #fdc300;
	border-bottom: 3px solid #fdc300;
	position:absolute;
	top:1.25rem;
	left:.75rem;
}


#offcanvas:checked + .canvas label.offcanvas:before,
#offcanvas:checked + .canvas label.offcanvas:after {
	border-color: #fff;
	margin:0;
}

#offcanvas:checked + .canvas label.offcanvas:before {
	top:1.25rem;
	transform:rotate(45deg);
	height:0;
	border-width:2px;
}
#offcanvas:checked + .canvas label.offcanvas:after {
	top:1.25rem;
	transform:rotate(-45deg);
	height:0;
	border-width:2px;
}
#offcanvas:checked + .canvas label.offcanvas {
	height:100%;
	width:100%;
	background: rgba(0,0,0,0.2);
}
@media all and (min-width:710px){
	label.offcanvas {
		display:none;
	}
}
@media all and (max-width:710px){
	.canvas {
		position:fixed;
		width:calc(100vw - 2.5rem);
		left:calc(-100vw + 2.5rem);
		top:0;
		transition: left 300ms;
	}
	.navigation {
		height:100vh;
		overflow-y:auto;
		background: #fff;
	}
	#offcanvas:checked + .canvas {
		left:0;
	}
	#offcanvas:checked ~ .grid {
		display:none;
	}
}