@CHARSET "ISO-8859-1";
.gameGrid
{
	color: rgba(255,255,255,1);
	text-align: center;
	margin: 15px auto 10px auto;
	max-width: 200px;
	cursor: pointer;
	overflow: hidden;
	background: rgba(255,255,255,1);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	transition: 0.6s ease-in-out;
	-webkit-filter: grayscale(45%);
	-webkit-transition: 0.6s ease-in-out;
    -moz-filter:    grayscale(45%);
	-moz-transition: 0.6s ease-in-out;
    -ms-filter:     grayscale(45%);
    -ms-transition: 0.6s ease-in-out;
    -o-filter:      grayscale(45%);
	-o-transition: 0.6s ease-in-out;
    filter: gray;
	transition: 0.6s ease-in-out;
    text-shadow: 1px 1px #000000;
	box-shadow: 1px 0 5px #000;
}
.gameGrid:hover
{
	-webkit-filter: grayscale(0%);
	-webkit-transition: 0.6s ease-in-out;
	-moz-filter: grayscale(0%);
	-moz-transition: 0.6s ease-in-out;
	-o-filter: grayscale(0%);
	overflow: hidden;
	-o-transition: 0.6s ease-in-out;
	filter: grayscale(0%);
	transition: 0.6s ease-in-out;
}
.gameName
{
	width: 100%;
	margin-top: 10px;
	background: rgba(0,0,0,0.5);
	height:55px;
	vertical-align: middle;
}
.gameName > span
{
	display:flex;
	justify-content:center;
	align-items:center;
	width:99%;
	height:45px;
}
.gameGrid > h3
{
	font-weight: 300;
}
.gameGrid > img
{
	padding-top: 10px;
	max-width: 64px;
	max-height: 64px;
	
}
.gameGrid > button
{
	/*position: absolute;
	bottom: 10px;
	left: 50%; // position the left edge of the element at the middle of the parent 
    transform: translate(-50%, -50%);*/
	margin-bottom: 10px;
}