

.controlDiv {
	width: 83vh; /* Fits at most 12 buttons next to each other. (4 + 1 * 2 + 0.5 * 2) * 12 - 1*/
	max-width: 100%;
	background-color: rgba(0,0,0,0.0);
	line-height: 1.2;
	margin: 0vh auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.controlButton, .controlButtonInactive {
	width: 4vh;
	height: 4vh;
	margin: 0.5vh;
	padding: 1vh;
	background-color: rgba(0,0,0,1);
	color: rgba(255,255,255,1);
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0.75vh 0.75vh rgba(0,0,0,0.5);
	text-decoration: none;
	text-align: center;
	transition: 0.1s;
}

.controlButton:first-child, .controlButtonInactive:first-child {
	margin-left: 0vh;
}

.controlButton:last-child, .controlButtonInactive:last-child {
	margin-right: 0vh;
}

.controlButton:hover {
	/*transform: translateY(-1vh);*/
	background-color: rgba(63,63,63,1);
}

.controlButtonInactive {
	color: rgba(63,63,63,1);
	cursor: default;
}

.controlButtonText {
	font-size: 4vh;
	font-family: "Aldrich";
}

.reducedHeightSection {
	margin: -8vh 0vh;
}

.reducedHeightSection:last-child {
	margin-top: -8vh;
	margin-bottom: 0vh;
}