.menu {
	z-index: 2;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgb(39, 6, 52);
	overflow: auto;
}

.menu-closed {
	display: none;
}

.menu-link {
	z-index: 1;
	position: fixed;
	top: 0;
	right: 0;
	width: 4em;
	height: 4em;
	background-color: rgb(140, 196, 62);
	border-left: 1px rgb(91, 129, 41) solid;
	border-bottom: 1px rgb(91, 129, 41) solid;
}

.menu-link label {
	position: absolute;
	font-size: 2.8em;
	top: 0;
	left: .27em;
	color: rgb(39, 6, 52);
}

.menu-link:hover,
.menu-link label:hover {
	cursor: pointer;
}

.hex-container {
	position: absolute;
	position: relative;
	text-align: center;
	width: 330px;
	margin: auto;
	padding-top: .3em;
}

.hex:before {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 0;
	top: -30px;
	border-bottom: 30px rgb(140, 196, 62) solid;
	border-left: 52px transparent solid;
	border-right: 52px transparent solid;
}

.hex {
	position: relative;
	width: 104px;
	height: 60px;
	margin-top: 34px;
	margin-left: 4px;
	background-color: rgb(140, 196, 62);

	float: left;

	font-family: "opensans-regular", helvetica, arial;
	text-transform: uppercase;
	font-size: .90em;
	text-decoration: none;
	text-align: center;
	color: rgb(39, 6, 52);
	padding-top: 1em;
	text-shadow: 0 0 8px #fff;
}

.hex.br {
	padding-top: .6em;
}

.hex:after {
	content: "";
	position: absolute;
	width: 0;
	left: 0;
	bottom: -30px;
	border-top: 30px rgb(140, 196, 62) solid;
	border-left: 52px transparent solid;
	border-right: 52px transparent solid;
}

.hex.logo {
	background-color: transparent;
}

.hex.logo:before {
	border-bottom: 30px transparent solid;
}

.hex.logo:after {
	border-top: 30px transparent solid;
}

.hex img {
	margin-top: -33%;
	width: 100%;
	z-index: 3;
	position: relative;
}

.hex:nth-child(4),
.hex:nth-child(9) {
	clear: left;
	margin-left: 58px;
}

.hex:nth-child(6),
.hex:nth-child(11) {
	clear: left;
}

.login-link {
	position: fixed;
	bottom: 6px;
	right: 6px;
	color: rgb(140, 196, 62);
}

/* iPhone/Samsung landscape, iPad Portrait */
@media only screen and (min-width: 433px)
{
	.hex-container {
		width: 660px;
	}
	.hex:nth-child(4),
	.hex:nth-child(6),
	.hex:nth-child(9),
	.hex:nth-child(11) {
		clear: none;
		margin-left: 4px;
	}

	.hex:nth-child(7),
	.hex:nth-child(18) {
		clear: left;
		margin-left: 58px;
	}

	.hex:nth-child(12) {
		clear: left;
	}


	.login-link {
		bottom: auto;
		top: 4px;
		right: 4px;
	}

}

/* Desktop/iPad landscape */
@media only screen and (min-width: 1024px) /*and (orientation: landscape)*/
{
	.menu-link {
		display:none;
	}

	.menu {
		height: 9em;
		background-image: linear-gradient(rgb(38, 139, 191), rgb(39, 6, 52));
	}

	.menu-closed {
		display: block;
	}

	.hex-container {
		width: 990px;
		margin-left: 0;
	}
	.hex:nth-child(4),
	.hex:nth-child(6),
	.hex:nth-child(7),
	.hex:nth-child(9),
	.hex:nth-child(11),
	.hex:nth-child(12),
	.hex:nth-child(18) {
		clear: none;
		margin-left: 4px;
	}

	.hex:nth-child(10) {
		clear: left;
		margin-left: 58px;
	}

	/* Hover behavior */
	.hex:hover {
		color: #fff;
		background-color: rgb(97, 135, 41);
		text-shadow: 0 0 8px rgb(39, 6, 52);
	}

	.hex:hover:before {
		border-bottom: 30px rgb(97, 135, 41) solid;
	}

	.hex:hover:after {
		border-top: 30px rgb(97, 135, 41) solid;
	}
}