html, body {
	width: 100%; 
	height: 100%;
	overflow: hidden;
	position: relative;
	margin: 0;
	font-size: 0;
}
#bgGrayscale, #bgColor {
	position: absolute;
	margin: auto;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#bgGrayscale {
	z-index: 2;
	opacity: 1;
}
#bgColor {
	z-index: 1;
	opacity: 0;
}
#graycote, #elmhurst {
	border: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	z-index: 3;
	margin: 0;
	padding: 0;
	image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 499px) {
	#graycote, #elmhurst {
		width: 80%;
		font-size: 18vw;
	}
}
#graycote {
	opacity: 1;
	display: none;
}
#elmhurst {
	opacity: 0;
}

.fadeOut {
	animation: fadeOut 3s forwards;
}
.fadeOutDelay {
	animation: fadeOut 6s forwards;
}
.fadeIn {
	animation: fadeIn 3s forwards;
}
.fadeInDelay {
	animation: fadeInDelay 6s forwards;
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadeOutDelay {
	0% {
		opacity: 1;
	}
	33% {
		opacity: 1;
	}
	66% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeInDelay {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 0;
	}
	66% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}