#gameStats{
	background: transparent;
	margin: 0;
	display: block;
	padding: 0;
	display: none;
	position: absolute;
	left: 28px;
	top: 72px;
	width: 160px;
}
#gameStats p#timer{
	float: left;
	text-align: left;
	font-family: Tahoma, Geneva, sans-serif;
	padding: 10px 29px;
	color: black;
	background: rgb(255,204,104);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
}
#gameStats p#timer span{
	font-weight: normal;
}
#gameStats p#reset{
	text-align: center;
	color: black;
	cursor: pointer;
	background: rgb(0,206,153);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 115px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: bold;
}
#popup_ins{
	text-align: center;
	color: white;
	cursor: pointer;
	background: rgb(234, 91, 102);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: bold;
	position: absolute;
	top: 244px;
	left: 28px;
	width: 160px;
}
div[data-sg-id="item-popup"]{
	background: white;
  	border: 2px solid #666666;
  	width: 757px;
  	text-align: center;
  	height: 582px;
  	padding-top: 10px;
  	-moz-border-radius: 10px;
  	-webkit-border-radius: 10px;
  	border-radius: 10px;
}
div[data-sg-id="item-popup"] .icon_close_button{
	position: absolute;
  	top: -22px;
  	left: 730px;
}
div[data-sg-id="game-matchmemory"] {
	/*background: #001711;*/
	width: 842px;
	height: 602px;
	margin: 0 auto;
	display: block;
	-moz-box-shadow: 0px 3px 12px #000;
	-webkit-box-shadow: 0px 3px 12px #000;
	box-shadow: 0px 3px 12px #000;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 11px;
	margin-left: 230px;
}
#cards {
	position: relative;
	width: 822px;
	height: 584px;
	display: none;
	top: -70px;
	left: -67px;
}
/* Define the 3D perspective view and dimension of each card. */
#cards > div, .card {
	-webkit-perspective: 600;
	width: 264px;
	height: 278px;
	position: absolute;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	transition: all .3s;
	cursor: pointer;
	background: black;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	transform: scale(0.5);
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -o-transform:scale(0.5);
    -ms-transform:scale(0.5);
}
#cards > div.zoom{
	animation: zoom 5s linear;
	-webkit-animation: zoom 5s linear;
	-webkit-box-shadow: -1px 0px 8px 3px rgba(90, 81, 81, 1);
	-moz-box-shadow: -1px 0px 8px 3px rgba(90, 81, 81, 1);
	box-shadow: -1px 0px 8px 3px rgba(90, 81, 81, 1);
}
@keyframes zoom {
    0% {
    	transform: scale(0.7);
    	-webkit-transform:scale(0.7);
    	-moz-transform:scale(0.7);
    	-o-transform:scale(0.7);
    	-ms-transform:scale(0.7);
    	z-index: 10000;
    	-moz-box-shadow: 0px 0px 0px white;
    	-webkit-box-shadow: 0px 0px 0px white;
    	box-shadow: 0px 0px 0px white;
    }
    15% {
    	transform: scale(1);
    	-webkit-transform:scale(1);
    	-moz-transform:scale(1);
    	-o-transform:scale(1);
    	-ms-transform:scale(1);
    	z-index: 10000;
  		left: 343px;
    	top: 184px;
    	-moz-box-shadow: 0px 0px 0px white;
    	-webkit-box-shadow: 0px 0px 0px white;
    	box-shadow: 0px 0px 0px white;
    }
    85% {
    	transform: scale(1);
    	-webkit-transform:scale(1);
    	-moz-transform:scale(1);
    	-o-transform:scale(1);
    	-ms-transform:scale(1);
    	z-index: 10000;
  		left: 343px;
    	top: 184px;
    	-moz-box-shadow: 0px 0px 0px white;
    	-webkit-box-shadow: 0px 0px 0px white;
    	box-shadow: 0px 0px 0px white;
    }
    100% {
    	transform: scale(0.5);
    	-webkit-transform:scale(0.5);
    	-moz-transform:scale(0.5);
    	-o-transform:scale(0.5);
    	-ms-transform:scale(0.5);
    	z-index: 1;
    }
} 

@-webkit-keyframes zoom {
    0% {
    	transform: scale(0.7);
    	-webkit-transform:scale(0.7);
    	-moz-transform:scale(0.7);
    	-o-transform:scale(0.7);
    	-ms-transform:scale(0.7);
    	z-index: 10000;
    	-moz-box-shadow: 0px 0px 0px white;
    	-webkit-box-shadow: 0px 0px 0px white;
    	box-shadow: 0px 0px 0px white;
    }
    15% {
    	transform: scale(1);
    	-webkit-transform:scale(1);
    	-moz-transform:scale(1);
    	-o-transform:scale(1);
    	-ms-transform:scale(1);
    	z-index: 10000;
    	left: 343px;
    	top: 184px;
    	-moz-box-shadow: 0px 0px 0px white;
    	-webkit-box-shadow: 0px 0px 0px white;
    	box-shadow: 0px 0px 0px white;
    }
    85% {
    	transform: scale(1);
    	-webkit-transform:scale(1);
    	-moz-transform:scale(1);
    	-o-transform:scale(1);
    	-ms-transform:scale(1);
    	z-index: 10000;
  		left: 343px;
    	top: 184px;
    	-moz-box-shadow: 0px 0px 0px white;
    	-webkit-box-shadow: 0px 0px 0px white;
    	box-shadow: 0px 0px 0px white;
    }
    100% {
    	transform: scale(0.5);
    	-webkit-transform:scale(0.5);
    	-moz-transform:scale(0.5);
    	-o-transform:scale(0.5);
    	-ms-transform:scale(0.5);
    	z-index: 1;
    }
}
#cards > div.zoom2{
	animation: zoom2 1s linear;
	-webkit-animation: zoom2 1s linear;
}
@keyframes zoom2 {
    0% {
    	transform: scale(1);
    	-moz-transform: scale(1);
    	-webkit-transform:scale(1);
    	-o-transform:scale(1);
    	-ms-transform:scale(1);
    	z-index: 10000;
    }
    50% {
    	transform: scale(0.8);
    	-moz-transform: scale(0.8);
    	-webkit-transform:scale(0.8);
    	-o-transform:scale(0.8);
    	-ms-transform:scale(0.8);
    	z-index: 10000;
    }
    100% {
    	transform: scale(0.5);
    	-moz-transform: scale(0.5);
    	-webkit-transform:scale(0.5);
    	-o-transform:scale(0.5);
    	-ms-transform:scale(0.5);
    	z-index: 1;
    }
} 

@-webkit-keyframes zoom2 {
    0% {
    	transform: scale(1);
    	-moz-transform: scale(1);
    	-webkit-transform:scale(1);
    	-o-transform:scale(1);
    	-ms-transform:scale(1);
    	z-index: 10000;
    }
    50% {
    	transform: scale(0.8);
    	-moz-transform: scale(0.8);
    	-webkit-transform:scale(0.8);
    	-o-transform:scale(0.8);
    	-ms-transform:scale(0.8);
    	z-index: 10000;
    }
    100% {
    	transform: scale(0.5);
    	-moz-transform: scale(0.5);
    	-webkit-transform:scale(0.5);
    	-o-transform:scale(0.5);
    	-ms-transform:scale(0.5);
    	z-index: 1;
    }
}
#gameIntro {
	background: white url(../img/SB_L_G10_U02_L05-instrucciones.png) center center no-repeat;
	background-size: contain;
	position: absolute;
	padding: 80px 0;
	margin: 20px 0;
	text-align: center;
	height: 520px;
	width: 750px;
}
#gameIntro button {
	background: url('../img/SB_L_G10_U02_L05-boton-ir-al-juego.png') center center no-repeat;
	background-size: auto;
	display: block;
	width: 286px;
	height: 73px;
	border: none;
	color: transparent;
	cursor: pointer;
	opacity: 0.8;
	transition: all .5s;
	position: absolute;
	bottom: 25px;
	left: 278px;
}
#gameIntro button:hover, #gameIntro button:active  {
	opacity: 1;
	text-decoration: none;
}
#gameComplete {
	background: white url(../img/SB_L_G10_U02_L05-bien-hecho.png) center center no-repeat;
	background-size: contain;
	padding: 80px 0;
	text-align: center; 
	height: 470px;
}
#gameComplete button {
	background: url('../img/SB_L_G10_U02_L05-intentalo-de-nuevo-boton.png') center center no-repeat;
	background-size: auto;
	border:none;
	color: transparent;	
	width: 473px;
	height: 77px;
	cursor: pointer;
	opacity: 0.8;
	transition:all .5s;
	position: absolute;
	bottom: 172px;
	left: 422px;
}
#gameComplete button:hover, #gameComplete button:active  {
	opacity: 1;
	text-decoration: none;
}
#gameComplete h2{
	display: none;
}
#gameComplete p {
	font-size: 1.25em;
	color: black;
	top: 390px;
	position: relative;
}
.face {
	width: 248px;
	height: 277px;
	margin-left: 9px;
	left: 0;
	top: 0;
	position: absolute;
	text-align: center;
	-webkit-transition-property: opacity, transform;
	-webkit-transition-duration: .3s;
	-webkit-backface-visibility: hidden;
}
.front {
	background: black url(../img/SB_L_G10_U02_L05--numero-y-estrellas.png) center center no-repeat;
	background-size: auto;
	z-index: 0;
	display: none;
	-webkit-transform: rotate3d(0,1,0,-180deg);
}
.back {
	background: black url(../img/SB_L_G10_U02_L05--numero-y-estrellas.png) top center no-repeat;
	color: white;	
	z-index: 10;
}
.card-removed {
	opacity: 0;
}
.face.back{
	border-left: 8px dotted white;
	border-right: 8px dotted white;
}
.face.back span.info{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.24em;
	font-style: italic;
	color: white;
	padding: 60px 37px;
	padding-bottom: 0px;
	text-align: center;
	display: block;
	position: relative;
	top: 60px;
}

.card10.face.back span.info,
.card13.face.back span.info,
.card16.face.back span.info,
.card17.face.back span.info,
.card20.face.back span.info,
.card22.face.back span.info,
.card23.face.back span.info{
	padding: 60px 32px;
	padding-bottom: 0px;
}
.card15.face.back span.info,
.card18.face.back span.info{
	padding: 60px 27px;
	padding-bottom: 0px;
}
#cards > div .face.back{
	background-color: black;
	background-position: 76px 5px;
	background-repeat: no-repeat;
}
#cards > div:nth-child(1) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas.png);
}
#cards > div:nth-child(2) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas2.png);
}
#cards > div:nth-child(3) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas3.png);
}
#cards > div:nth-child(4) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas4.png);
}
#cards > div:nth-child(5) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas5.png);
}
#cards > div:nth-child(6) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas6.png);
}
#cards > div:nth-child(7) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas7.png);
}
#cards > div:nth-child(8) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas8.png);
}
#cards > div:nth-child(9) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas9.png);
}
#cards > div:nth-child(10) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas10.png);
}
#cards > div:nth-child(11) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas11.png);
}
#cards > div:nth-child(12) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas12.png);
}
#cards > div:nth-child(13) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas13.png);
}
#cards > div:nth-child(14) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas14.png);
}
#cards > div:nth-child(15) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas15.png);
}
#cards > div:nth-child(16) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas16.png);
}
#cards > div:nth-child(17) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas17.png);
}
#cards > div:nth-child(18) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas18.png);
}
#cards > div:nth-child(19) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas19.png);
}
#cards > div:nth-child(20) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas20.png);
}
#cards > div:nth-child(21) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas21.png);
}
#cards > div:nth-child(22) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas22.png);
}
#cards > div:nth-child(23) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas23.png);
}
#cards > div:nth-child(24) .face.back{
	background-image: url(../img/SB_L_G10_U02_L05--numero-y-estrellas24.png);
}
.card-flipped-old .front {
	-webkit-transform: rotate3d(0,1,0,180deg);
	z-index: 8;
}
.card-flipped-old .back {
	-webkit-transform: rotate3d(0,1,0,0deg);
	z-index: 10;
}
#cards > div.card-flipped-old .back.face{
	background-position: 76px 3px;
	background-repeat: no-repeat;
}
#cards > div:nth-child(1).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton1.png);
}
#cards > div:nth-child(2).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton2.png);
}
#cards > div:nth-child(3).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton3.png);
}
#cards > div:nth-child(4).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton4.png);
}
#cards > div:nth-child(5).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton5.png);
}
#cards > div:nth-child(6).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton6.png);
}
#cards > div:nth-child(7).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton7.png);
}
#cards > div:nth-child(8).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton8.png);
}
#cards > div:nth-child(9).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton9.png);
}
#cards > div:nth-child(10).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton10.png);
}
#cards > div:nth-child(11).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton11.png);
}
#cards > div:nth-child(12).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton12.png);
}
#cards > div:nth-child(13).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton13.png);
}
#cards > div:nth-child(14).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton14.png);
}
#cards > div:nth-child(15).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton15.png);
}
#cards > div:nth-child(16).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton16.png);
}
#cards > div:nth-child(17).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton17.png);
}
#cards > div:nth-child(18).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton18.png);
}
#cards > div:nth-child(19).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton19.png);
}
#cards > div:nth-child(20).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton20.png);
}
#cards > div:nth-child(21).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton21.png);
}
#cards > div:nth-child(22).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton22.png);
}
#cards > div:nth-child(23).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton23.png);
}
#cards > div:nth-child(24).card-flipped-old .back.face{
	background-image: url(../img/SB_L_G10_U02_L05-boton24.png);
}
.card-flipped-old .face.back span.info{
	color: black;
}
#cards > div[data-sg-key="1"].card-flipped-old,
#cards > div[data-sg-key="1"].card-flipped-old .back.face {
	background-color: #cc6666;
}
#cards > div[data-sg-key="2"].card-flipped-old,
#cards > div[data-sg-key="2"].card-flipped-old .back.face {
	background-color: #ff9966;
}
#cards > div[data-sg-key="3"].card-flipped-old,
#cards > div[data-sg-key="3"].card-flipped-old .back.face {
	background-color: #669966;
}
#cards > div[data-sg-key="4"].card-flipped-old,
#cards > div[data-sg-key="4"].card-flipped-old .back.face {
	background-color: #ffcc99;
}
#cards > div[data-sg-key="5"].card-flipped-old,
#cards > div[data-sg-key="5"].card-flipped-old .back.face {
	background-color: #99cc99;
}
#cards > div[data-sg-key="6"].card-flipped-old,
#cards > div[data-sg-key="6"].card-flipped-old .back.face {
	background-color: #9999cc;
}
#cards > div[data-sg-key="7"].card-flipped-old,
#cards > div[data-sg-key="7"].card-flipped-old .back.face {
	background-color: #ffcc66;
}
#cards > div[data-sg-key="8"].card-flipped-old,
#cards > div[data-sg-key="8"].card-flipped-old .back.face {
	background-color: #66cccc;
}
