nav#overlay {
	position: absolute;
	background: #008acf;
	padding: 2em;
	width: calc(50%);
	height: auto;
	display: none;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right;
	transform-origin: right;
	z-index: 999;
	right: 0;
}

#open-menu {
	position: absolute;
	right: 1.5rem;
	cursor: pointer;
	z-index: 998;
	display: block;
}

@media (max-width: 767px) {
	#open-menu {
		top: 1rem;
	}
}

#open-menu img {
	pointer-events: none;
}

nav#overlay .close-button {
	float: right;
	cursor: pointer;
	opacity: 0;
	width: 40px;
}

nav#overlay ul {
	list-style-type: none;
	margin: 0 auto 0 auto;
	padding: 0;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (auto) [2];
	grid-template-columns: repeat(2, auto);
	width: 80%;
}

nav#overlay ul br {
	display: none;
}

nav#overlay ul a {
	color: #fff;
	font-weight: 300;
	font-size: 20px;
	display: block;
	padding: 10px 0 5px 10px;
	line-height: 100%;
}

nav#overlay ul a:hover {
	background: #ffcc00;
	color: #000;
}

nav#overlay ul span {
	color: gray;
	display: block;
	font-size: 0.75em;
	margin-top: 20px;
}

nav#overlay ul li {
	opacity: 0;
	margin: 0 20px 10px 20px;
	font-size: 16px;
	line-height: 8px;
	letter-spacing: 0;
}

nav#overlay ul li a:first-child {
	font-weight: 600;
}

nav#overlay.show-menu {
	display: block;
	-webkit-animation: slide-menu 1s ease-in forwards;
	animation: slide-menu 1s ease-in forwards;
}

nav#overlay.show-menu .close-button {
	-webkit-animation: show-x 1s 1s forwards;
	animation: show-x 1s 1s forwards;
}

nav#overlay.show-menu li:nth-of-type(1) {
	-webkit-animation: menu-item-anim 0.6s forwards 1s ease-in-out;
	animation: menu-item-anim 0.6s forwards 1s ease-in-out;
}

nav#overlay.show-menu li:nth-of-type(2) {
	-webkit-animation: menu-item-anim 0.6s forwards 1.2s ease-in-out;
	animation: menu-item-anim 0.6s forwards 1.2s ease-in-out;
}

nav#overlay.show-menu li:nth-of-type(3) {
	-webkit-animation: menu-item-anim 0.6s forwards 1.6s ease-in-out;
	animation: menu-item-anim 0.6s forwards 1.6s ease-in-out;
}

nav#overlay.show-menu li:nth-of-type(4) {
	-webkit-animation: menu-item-anim 0.6s forwards 1.8s ease-in-out;
	animation: menu-item-anim 0.6s forwards 1.8s ease-in-out;
}

nav#overlay.show-menu li:nth-of-type(5) {
	-webkit-animation: menu-item-anim 0.6s forwards 1.8s ease-in-out;
	animation: menu-item-anim 0.6s forwards 1.8s ease-in-out;
}

nav#overlay.show-menu li:nth-of-type(6) {
	-webkit-animation: menu-item-anim 0.6s forwards 1.8s ease-in-out;
	animation: menu-item-anim 0.6s forwards 1.8s ease-in-out;
}

@-webkit-keyframes slide-menu {
	from {
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}

@keyframes slide-menu {
	from {
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}

@-webkit-keyframes show-x {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes show-x {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@-webkit-keyframes menu-item-anim {
	from {
		-webkit-transform: translateY(70%);
		transform: translateY(70%);
		opacity: 0;
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes menu-item-anim {
	from {
		-webkit-transform: translateY(70%);
		transform: translateY(70%);
		opacity: 0;
	}

	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

/*Tablet Landscape*/
@media only screen and (min-width: 960px) and (max-width: 1024px) {
	nav#overlay {
		height: calc(100vh);
		width: calc(100vw);
	}

	nav#overlay ul {
		margin: 10% 0 0 0;
		-ms-grid-columns: (auto) [3];
		grid-template-columns: repeat(3, auto);
		width: 100%;
	}

	nav#overlay ul li {
		margin: 0 20px 30px 20px;
	}
}

/*Tablet Portrait*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	nav#overlay {
		height: calc(100vh);
		width: calc(100vw);
	}

	nav#overlay ul {
		margin: 10% 0 0 0;
		-ms-grid-columns: (auto) [3];
		grid-template-columns: repeat(3, auto);
		width: 100%;
	}

	nav#overlay ul li {
		margin: 0 20px 30px 20px;
	}
}

/*Smartphone Landscape*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	nav#overlay {
		height: calc(100vh);
		width: calc(100vw);
	}

	nav#overlay ul {
		margin: 50px 0 0 0;
		-ms-grid-columns: (auto) [3];
		grid-template-columns: repeat(3, auto);
		width: 100%;
	}

	nav#overlay ul a {
		font-weight: 400;
		font-size: 14px;
		padding: 10px 0 0 0;
		line-height: 100%;
	}

	nav#overlay ul li {
		margin: 0 20px 30px 0;
	}

	nav#overlay ul li {
		font-size: 14px;
		line-height: 0;
	}

	nav#overlay .close-button {
		width: 28px;
	}

	#overlay br {
		display: none;
	}
}

/*Smartphone Portrait*/
@media only screen and (min-width: 320px) and (max-width: 479px) {
	nav#overlay {
		height: calc(100vh);
		width: calc(100vw);
	}

	nav#overlay ul {
		margin: 50px 0 0 0;
		-ms-grid-columns: (auto) [2];
		grid-template-columns: repeat(2, auto);
		width: 100%;
	}

	nav#overlay ul a {
		font-weight: 400;
		font-size: 14px;
		padding: 10px 0 0 0;
		line-height: 100%;
	}

	nav#overlay ul li {
		margin: 0 20px 30px 0;
	}

	nav#overlay ul li {
		font-size: 14px;
		line-height: 0;
	}

	nav#overlay .close-button {
		width: 28px;
	}

	#overlay br {
		display: none;
	}
}