/*Rocking Memory Styles*/
@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;}
html, body{
  height: 100%;
}
body{
	background:linear-gradient(rgba(213, 213, 213, 0.72),rgba(96, 136, 95, 0.68));
	text-shadow: 0 1px 0 #ccc,
		0 2px 0 #c9c9c9,
		0 3px 0 #bbb,
		0 4px 0 #b9b9b9,
		0 5px 0 #aaa,
		0 6px 1px rgba(0,0,0,.1),
		0 0 5px rgba(0,0,0,.1),
		0 1px 3px rgba(0,0,0,.3),
		0 3px 5px rgba(0,0,0,.2),
		0 5px 10px rgba(0,0,0,.25),
		0 10px 10px rgba(0,0,0,.2),
		0 20px 20px rgba(0,0,0,.15);
	color:#fff;
}
div.gameBlock{
	width: 13%;
	height: 40%;
	margin:10% 0 0 2%;
	float:left;
}
div.gameBlock h1{
	margin:0 auto;
	padding:0;
	font-size: 1.5rem;
    text-align: center;
}
div.gameBlock a{
    width:100%;
	height:100%;
	display:inline-block;
	border: 1px solid black;
	-webkit-filter: blur(1px) brightness(50%) grayscale(100%);	
}
div#blockGame, div#rockingMemory, div#guessMyNumber{
	transform: perspective( 300px ) rotateX(0deg) rotateY(30deg) rotateZ(0deg); 

}
div#blockGame{
    height: 45%;
}
div#blockGame, div#ttt{
	width: 13%;
	margin-top: 12%;
}
div#rockingMemory{
    height: 25%;
}
div#rockingMemory{
	height: 32%;
    margin-top: 14.3%;
    width: 10%;
}
div#oneKick{
	margin-top: 15%;
    height: 25%;
	width: 8%;
}
div#whiteBlack {
	height: 31%;
    margin-top: 13.6%;
	width: 10%;
}
div#rockingMemory h1, div#whiteBlack  h1{
	font-size: 1.25rem;
}
div#guessMyNumber{
	height: 25%;
    margin-top: 13.8%;
    width: 8%;
}
div#guessMyNumber h1, div#oneKick  h1{
	font-size: 1rem;
}
div#blockGame:hover, div#guessMyNumber:hover, div#rockingMemory:hover,
div#oneKick:hover, div#whiteBlack:hover, div#ttt:hover{
	transform: perspective( 300px ) rotateY(0deg) rotateZ(0deg) scale(1.1,1);
    transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) transform;
	z-index: 2;
}
div#ghostHunting:hover{
	transform:scale(1.2,1.2);
    transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) transform;
    transition: 0.3s cubic-bezier(0.3, -0.5, 1, -0.15) transform;
	z-index: 2;
}
div#blockGame a{
	background: url(../images/blockGame.png) no-repeat -160px 0px;
	box-shadow:-10px 10px 10px rgba(0,0,0,0.3);
	background-size:cover;
	-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 20%, transparent 30%);
}
div#ghostHunting{
	transform: perspective( 300px ) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
	margin-top: 14.5%;
    width: 20%;
    height: 23%;
}
div#ghostHunting a {
  box-shadow:0px 10px 10px rgba(0,0,0,0.3);
  background:url(../images/ghostHunting.png) no-repeat;
  background-size:cover;
  -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
  
}
div#oneKick, div#whiteBlack, div#ttt  {
	transform: perspective( 300px ) rotateX(0deg) rotateY(-20deg) rotateZ(0deg); 
}

div#rockingMemory  a{
	box-shadow:10px 10px 10px rgba(0,0,0,0.3);
	background:url(../images/rockingMemory.png) no-repeat -100px 0;
	background-size:cover;
	-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 20%, transparent 30%);
}
div#oneKick a{
	box-shadow:10px 10px 10px rgba(0,0,0,0.3);
	background:url(../images/oneKick.png) no-repeat -115px 0;
	background-size:cover;
	-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 20%, transparent 30%) ;
	
}
div#guessMyNumber a{
  box-shadow:10px 10px 10px rgba(0,0,0,0.3);
  background:url(../images/guessMyNumber.png) no-repeat -100px 0px;
  background-size:cover;
  -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 20%, transparent 30%);
}
div#whiteBlack a{
	box-shadow:10px 10px 10px rgba(0,0,0,0.3);
	background:url(../images/whiteBlack.png) no-repeat -160px 0px;
	background-size:cover;
	-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 20%, transparent 30%);
  }
div#ttt a{
box-shadow:10px 10px 10px rgba(0,0,0,0.3);
background:url(../images/ttt.png) no-repeat -180px 0px;
background-size:cover;
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 20%, transparent 30%);
}
div.gameBlock a:hover{
	-webkit-filter: blur(0px) brightness(100%) grayscale(10%);
	box-shadow:0px 20px 100px 20px #fff !important;
}
@media (max-width: 1280px) {
	div.gameBlock h1{
		font-size: 1.3rem;
	}
}
@media (max-width: 1048px) {
	div.gameBlock h1{
		font-size: 1rem !important;
	}
}
@media (max-width: 768px) {
	div.gameBlock h1{
		font-size: 0.9rem !important;
	}
	div#blockGame a, div#whiteBlack a, div#ttt a{
		background-position: -50px 0 !important;
	}
	div#rockingMemory a, div#guessMyNumber a, div#oneKick a{
		background-position: -25px 0 !important;

	}
}
@media (max-width: 640px) {
	div.gameBlock h1{
		font-size: 0.8rem !important;
	}
}

@media screen and (max-width: 1494px){
	div#rockingMemory{
		height: 33%;
		margin-top: 12.3%;
	}
}
@media (orientation: portrait) {
	
	div.gameBlock a{
		-webkit-filter: blur(0px) brightness(100%) grayscale(10%);
	}
	div.gameBlock{
		width: 40% !important;
		height: 15%  !important;
		margin: 4%  !important;
		display: inline-block  !important;
	}
	div#blockGame, div#rockingMemory, div#oneKick, div#guessMyNumber, div#whiteBlack, div#ttt{
		transform: perspective( 300px ) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
	}
	div#ghostHunting{
		margin-top: 4%;
		width: 40%;
		height: 15%;
	}
	div#rockingMemory, div#guessMyNumber, div#oneKick {
		height: 15%;
		margin-top: 4%;
	}
	div#blockGame a, div#oneKick a, div#rockingMemory a, div#guessMyNumber a, div#whiteBlack a, div#ttt a {
		background-position-x: -30px;
	}
}