#hexjump {
	display: block; float: right;
	padding: 1em;
	background: #eee; border: 1px solid #ccc;
}
#challenges {
	overflow: hidden;
	height: 1px;
}

#grid {
	display: block; position: relative; overflow: hidden;
	width: 100%; margin: 0 auto; padding-bottom: 6%;
}
#grid .hex {
	display: block; position: relative; float: left; visibility: hidden;
	width: 25%; margin: 0;
}
#grid .hex::after {
	content: "";
	display: block;
	padding-bottom: 86.602%;
}
#grid .hex:nth-child(7n+5) {
	margin-left: 12.5%;
}
#grid .hex.title {
	cursor: pointer;
}
#grid .outer {
	position: absolute; overflow: hidden; visibility: hidden;
	width: 96%; margin: 0 2%; padding-bottom: 110.851%;
	-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg); -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
	transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
#grid .outer * {
	visibility: visible;
}
#grid .inner {
	display: block; position: absolute; overflow: hidden;
	width: 100%; height: 100%;
	background: #eee;
	color: #333;
	-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg); -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
	transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}
#grid .hex.title:hover .inner {
	background: #777;
	color: #fff;
}
#grid .hex.image img {
	position: absolute;
	left: -100%; right: -100%; top: 0; width: auto; height: 100%; margin: 0 auto;
}
#grid .hex.logo img {
	position: absolute;
	top: 70px; width: 90%; height: auto; margin: 0 5%;
}
#grid .hex h1 {
	z-index: 1;
	position: absolute; box-sizing: border-box;
	top: 50%; width: 100%; margin: -1.7em 0 0 0; padding: 0.5em 5%;
	font-size: 1.2em; text-align: center; line-height: 1.2em;
}
#grid .hex h1.single {
	margin-top: -1em;
}