:root {
	--red: rgb(187, 173, 173);
	--blue: rgb(161, 161, 161);
	--green: rgb(164, 184, 164);
	--header-height:100px;
}

html, body {
	box-sizing: border-box;
	margin:0;
	padding: 0;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

#overlay {
	display:block;
	position: fixed;
	top:var(--header-height);
	right:0;
	bottom:0;
	left:0;
	overflow-y: scroll;
	background-color: rgba(75, 68, 110, 0.445);
}
#overlay[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

#overlay[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}
body {
	overflow:hidden;
}
#grid-wrapper {
	margin: 0 auto;
	max-width: 56em;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: var(--header-height) auto 100px;
	min-height: 100vh;
}

header,
footer {
	grid-column: 1 / span 5;
	background-color: var(--red);
}

main {
	grid-column: 1 / span 5;
	background-color: var(--blue);
}

aside {
	display:flex;
	position: absolute;
	right:0;
	top:var(--header-height);
	width: 0;
	height: 0;
	justify-content: flex-end;
	align-items: stretch;
	opacity: 0;
	overflow: hidden;
}
aside.open {
	display: flex;
	min-height: calc(100% - var(--header-height));
	width: 100%;
	height: auto;
	opacity: 1;
	transition: opacity 0.5s;
	overflow: initial;
}
aside.open::before {
	content: "";
	flex: auto;
	background-color: #555;
	opacity: 0.8;
}
aside > div {
	background-color: var(--green);
	width: 200px;
}


header,
main,
footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

header > section {
	flex: auto;
	background-color: #555;
}


@media (min-width: 700px) {
	main {
		grid-column: 2 / 5;
	}
	aside {
		display: flex;
		position: initial;
		width:auto;
		min-height:auto;
		height: auto;
		overflow: initial;
		transition: none;
		opacity: 1;
		grid-column: 1 / 2;
	}
	aside > div {
		width:100%;
	}
	div.hamburg {
		display:none;
	}
}

.hamburg {
	display: block;
	background: #555;
	width: 75px;
	height: 50px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	border-radius: 4px;
	transition: border-radius .5s;
}

.hamburg span {
	position: absolute;
	left: 10px;
	height: 4px;
	width: 55px;
	background: #fff;
	border-radius: 2px;
	display: block;
	transition: 0.5s;
	transform-origin: center;
}

.hamburg span:nth-child(1) {
	top: 12px;
}

.hamburg span:nth-child(2) {
	top: 24px;
}

.hamburg span:nth-child(3) {
	top: 36px;
}

.hamburg.open span:nth-child(1) {
	transform: translateY(12px) rotate(-45deg);
}

.hamburg.open span:nth-child(2) {
	opacity: 0;
}

.hamburg.open span:nth-child(3) {
	transform: translateY(-12px) rotate(45deg);
}