#ticTacToeGame { background:#999; width:347px !important; height:347px !important; white-space:nowrap; margin:20px auto; border-radius:20px; overflow:hidden; }
#ticTacToeBlock { width:347px; height:347px; position:absolute; display:none; }
.tictac { width:50px; height:50px; font-size:80px; font-weight:700; width:113px; height:113px; border:0px; background:#fff; color:#fff; margin-bottom:5px; transition:all .5s ease; cursor:pointer; }
.tictac[value=" X "] { color:#0073bf; }
.tictac[value=" O "] { color:#000; }

.tictac.hideSelected { color:#fff; }

#ticTacToeWin { color:#000; font-size:70px; position:absolute; height:0px; opacity:0; line-height:96px; width:0px; text-align:center; background: url(/Images/site-templates/transparent/whitetrans_90.png); border-radius:52px; overflow:hidden; transition:opacity 1s ease; }
#ticTacToeWin span { color:#0073bf; }
#gameStatus { display:none; font-size:14px; line-height:14px; font-weight:700; margin-bottom:-15px; }

#ticTacToeWin[data-configeration="1"] { transform: rotate(0deg) translate(15px,25px); width:360px; height:auto; opacity:1; animation: 5s linear 1s 1 forwards finishAnimation1; }
#ticTacToeWin[data-configeration="2"] { transform: rotate(0deg) translate(15px,145px); width:360px; height:auto; opacity:1; animation: 5s linear 1s 1 forwards finishAnimation2; }
#ticTacToeWin[data-configeration="3"] { transform: rotate(0deg) translate(15px,262px); width:360px; height:auto; opacity:1; animation: 5s linear 1s 1 forwards finishAnimation3; }
#ticTacToeWin[data-configeration="4"] { transform: rotate(-90deg) translate(-145px,-102px); width:360px; height:auto; opacity:1; animation: 5s linear 1s 1 forwards finishAnimation4; }
#ticTacToeWin[data-configeration="5"] { transform: rotate(-90deg) translate(-145px,15px); width:360px; height:auto; opacity:1; animation: 5s linear 1s 1 forwards finishAnimation5; }
#ticTacToeWin[data-configeration="6"] { transform: rotate(-90deg) translate(-145px,132px); width:360px; height:auto; opacity:1; animation: 5s linear 1s 1 forwards finishAnimation6; }
#ticTacToeWin[data-configeration="7"] { transform: rotate(45deg) translate(96px,93px); width:360px; height:auto; opacity:1; animation: 5s linear 1s 1 forwards finishAnimation7; }
#ticTacToeWin[data-configeration="8"] { transform: rotate(-45deg) translate(-96px,110px); width:360px; height:auto; opacity:1; animation: 5s linear 1s 1 forwards finishAnimation8; }

@keyframes finishAnimation1
{
	0%		{ transform: rotate(0deg) translate(15px,25px); }
	10%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	90%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	100%	{ transform: rotate(0deg) translate(14px,140px); opacity:0; }
}
@keyframes finishAnimation2
{
	0%		{ transform: rotate(0deg) translate(15px,145px); }
	10%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	90%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	100%	{ transform: rotate(0deg) translate(14px,140px); opacity:0; }
}
@keyframes finishAnimation3
{
	0%		{ transform: rotate(0deg) translate(15px,262px); }
	10%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	90%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	100%	{ transform: rotate(0deg) translate(14px,140px); opacity:0; }
}
@keyframes finishAnimation4
{
	0%		{ transform: rotate(-90deg) translate(-145px,-102px); }
	10%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	90%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	100%	{ transform: rotate(0deg) translate(14px,140px); opacity:0; }
}
@keyframes finishAnimation5
{
	0%		{ transform: rotate(-90deg) translate(-145px,15px); }
	10%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	90%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	100%	{ transform: rotate(0deg) translate(14px,140px); opacity:0; }
}
@keyframes finishAnimation6
{
	0%		{ transform: rotate(-90deg) translate(-145px,132px); }
	10%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	90%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	100%	{ transform: rotate(0deg) translate(14px,140px); opacity:0; }
}
@keyframes finishAnimation7
{
	0%		{ transform: rotate(45deg) translate(96px,93px); }
	10%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	90%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	100%	{ transform: rotate(0deg) translate(14px,140px); opacity:0; }
}
@keyframes finishAnimation8
{
	0%		{ transform: rotate(-45deg) translate(-96px,110px); }
	10%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	90%		{ transform: rotate(0deg) translate(14px,140px); opacity:1; }
	100%	{ transform: rotate(0deg) translate(14px,140px); opacity:0; }
}




/* Remove Hover Effects for Mobile Devices */
@media (min-width: 800px)
{
	.tictac:hover { background:#f1f1f1; }
}