.custom .game img{
	display: block;
	margin-left: auto;
	margin-right: auto;

}
/*canvas part where the initial gamearea will be placed*/
.custom #canvas{
	
	/* width:860px;
	height: 860px; */
	width:780px;
	height: 780px;
	/* background: #f2f2f2; */
	/* margin: 20px auto 10px auto; */
	position: relative;
	-webkit-transition: all 0.8s cubic-bezier(0.58, -0.55, 0.265, 1.45);
	-ms-transition: all 0.8s cubic-bezier(0.58, -0.55, 0.265, 1.45);
	-moz-transition: all 0.8s cubic-bezier(0.58, -0.55, 0.265, 1.45);
	transition: all 0.8s cubic-bezier(0.58, -0.55, 0.265, 1.45);
	}

	.custom .game .gamearea{
	/* width: 338px;
	height: 338px; */
	width:260px;
	height:260px;
	position: absolute;
	z-index: 20;
	-webkit-transition: all 0.5s cubic-bezier(0.58, -0.55, 0.265, 1.45);
	-ms-transition: all 0.5s cubic-bezier(0.58, -0.55, 0.265, 1.45);
	-moz-transition: all 0.5s cubic-bezier(0.58, -0.55, 0.265, 1.45);
	transition: all 0.5s cubic-bezier(0.58, -0.55, 0.265, 1.45);
	perspective: 1000px;
	}

/*image position settings*/


.custom .game #tile1{ 							/*top left*/
	top: 0;
	left: 0;
	background-position: 0px 0px;
	
}

.custom .game #tile2{								/*top middle */
	top: 0;
	left: 260px;
	background-position: 520px 0px;
	}

.custom .game #tile3{							/*top right*/
	top: 0;
	left: 520px;
	background-position: 260px 0px;
	}

.custom .game #tile4{						/*middle left */
	top: 260px;
	left: 0;
	background-position: 0px 520px;
	}

	.custom .game #tile5{						/*middle middle*/
	top: 260px;
	left: 260px;
   
	background-position: 520px 520px;
	
	}

	.custom .game #tile6{						/*middleright*/
	top: 260px;
	left: 520px;
	
	background-position: 260px 520px;
   
	}

	.custom .game #tile7{						/*bottom left*/
	top: 520px;
	left: 0px;
	
	background-position: 0px 260px;
   
	}

	.custom .game #tile8{						/*bottom middle*/
	top: 520px;
	left: 260px;
	
	background-position: 520px 260px;
   
	}

	.custom .game #tile9{						/*bottom right*/
	top: 520px;
	left: 520px;
	
	background-position: 260px 260px;
   
	}



	.custom .game .highlight{ /*highlight image when pressed*/
	z-index: 200;
	-webkit-box-shadow: 0px 0px 20px 0px #000000;
	box-shadow: 0px 0px 20px 0px #000000;
	transform: scale(1.05);
	}

@-webkit-keyframes animate-guage {
	0%   { transform: scale(1.04); }
	50%   { transform: scale(1.06); }
	100%  { transform: scale(1.04); }
	}

	.custom .game .highlight-2{ -webkit-transform: rotateX(360deg); } /*when the game is over */

@-webkit-keyframes animate-guage-2 {
	0%   { transform: scale(1); }
	50%   { transform: scale(1.02); }
	100%  { transform: scale(1); }
	}

	



	.custom .game {
		position:relative;
		/* zoom:1.14; */
	  
	}


	@media screen AND (max-width:1680px) {
	
	.custom .game {
		position:absolute;
		zoom:1.0;
		transform:scale(1.0);
	}
}



	@media screen AND (max-width:1360px) {
	
		.custom .game {
			position:absolute;
			
			transform:scale(0.65);
		}
	}

	@media screen AND (max-width:1024px) {
	
		.custom .game {
			position:relative;
			left:-50px;
			top:-50px;
			height:600px;
			width:600px;
			margin:0 auto;
			transform:scale(0.60);
		}
	}

	@media screen AND (max-width:728px) {
	
	.custom .game {
		position:relative;
		left:-70px;
		top:-70px;
		height:580x;
		width:580px;
		margin:0 auto;
		transform:scale(0.6);
	}
}

	@media screen AND (max-width:540px) {
	
		.custom .game {
			position:relative;
			left:-90px;
			top:-90px;
			height:450px;
			width:450px;
			margin:0 auto;
			
			transform:scale(0.5);
		}
	}
	@media screen AND (max-width:420px) {
	
	.custom .game {
		position:relative;
		left:-95px;
		top:-94px;
		height:385px;
		width:445px;
		margin:0 auto;
		
		transform:scale(0.43);
	}
}

	.custom .gameinfo {
		background:#86C1B7;
		border-radius:30px;
		color:#fff;
		padding:20px;
		
		text-align:left;
		margin:0px auto 20px auto;
		
		
		
		
	}

	.custom .win {
		display:none;
		
	}

	.custom .play {
		display:block;
		
	}

	.custom a.playagain {
		display:none;
		margin-top:10px;
		float:left;
		font-size:10pt;
		
	}

	.custom .moves{
		display:inline-block;
		float:right;
		text-align:right;
		margin-top:10px;
		font-size:10pt;
	}

	.custom #my-canvas{
		display:none;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:0;
	}


	.custom .freeze {
	pointer-events:none;
	}