:root {
	--white: #FFFFFF;
	--magenta: #E21A41;
	--black: #161618;
	--transition-time: 200ms;
}

@media screen and (max-width: 767px) {
	.clCubeSpace {
		line-height: 11px !important;
		font-size: smaller !important;
		width: 5rem !important;
		height: 5rem !important;
		font-weight: normal !important;
	}
	.clTitleRow, .clBodyRow {
		min-width: 23rem !important;
	}

	.clCheckMark {
		padding-top: 0.5rem !important;
	}
}

.clCubeSpace {
	font-weight: bold;
	border: 3px solid var(--magenta);
	padding: 0.5rem;
	width: 7rem;
	height: 7rem;
	text-align: center;
	vertical-align: middle;
}
.clMainContentRow, .clButtonRow {
	padding: 0 1rem;
}
.clTitleRow {
	min-width: 32rem;
}
.clTitleRow .clCubeSpace {
	color: var(--white);
	font-weight: bold;
	font-family: Century Gothic, Arial, Sans Serif !important;
	font-size: 4rem !important;
	background-color: var(--black);
}
.clLogo img { opacity: 0.5 }
.clText {
	z-index: 1;
	position: absolute;
}
.clFreeSpace {
	position: relative;
    z-index: 1;
    color: var(--white);
    background-color: var(--black);
    background-image: url(../games/images/cia_dark_trans.png);
	/*background-image: url(../images/cia_seal_bw_blackbg-01.png);*/
	
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
}/*
.clFreeSpace:before {
	z-index: -1;
	content: url('../games/images/cia_logo_black.png');
	opacity: 0.2;
	position: absolute;
	top: 0;
	left: 8;
}*/
.clFreeSpace::after { opacity: 0.6; }
.clBodyRow {
	min-width: 32rem;
	font-family: Arial, Sans Serif;
	font-size: 0.8rem;
}
.clBodyRow .clCubeSpace:hover {
	cursor: pointer;
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: background-color var(--transition-time) linear;
	-ms-transition: background-color var(--transition-time) linear;
	transition: background-color var(--transition-time) linear;
}
.clBackgroundMagenta { color: var(--white); background-color: var(--magenta); }
.clBackgroundWhite { background-color: var(--white); }
.clCheckMarkWrapper { color: white; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: rgba(0,0,0,0.6); }
.clCheckMark {
	color: #33e510;
	font-size: 3rem;
	text-align: center;
	vertical-align: middle;
	padding-top: 1.5rem;
}
.complete {
	display:none;
}
.complete h4 {
	color: green;
}