@charset "utf-8";
img{border:none;}
/*para quitar los puntitos alrededro de las imagenes al haberlas pinchado*/
a:active, a:focus{outline:none;}
h1{
	font-size:25px;
	color:#FFF;
	line-height:0px;
}
h2{
	position:relative;
	top:-13px;	
	font-size:25px;
	color:#FFF;
	z-index:1000;
}
h3{
	position:relative;	
	font-size:15px;
	color:#039;
	z-index:1000;
	top:-10px;
}

body{
	position: relative;
	width:1000px;
	margin:0 auto;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	background-image:url(../imagenes/fondo_body.jpg);
	background-size:width 100%;
	background-repeat:repeat-x;
}

#banner{
	float:right;
	position:relative;
	top:0px;
	left:0px;
	z-index:300;
}
#cabecera{
	position:relative;
	float:left;
	top:0px;
	left:0px;
	width:275px;
}

/*botonera*/
nav {
	display: block;
	float:left;
 	 position: relative;
 	 top:-19px;
  	width: 1000px;
  	height:50px; 
  	text-align:center;
  	font-size:20px;
  	background-image:url(../imagenes/botonera3.jpg);
	margin-bottom:30px;
}

section{
	position:relative;/*absolute*/
	width:710px;
	height:auto;
	left:0px;	
	float:right;
	margin-bottom:80px;

}
section p{
	position:relative;
	width:700px;
	left:10px;
	text-align:justify;
	text-indent:10px;
}
.distancia{
	position:relative;
	margin-top:100px;
}
#titulo{	
	width:710px;
	/*height:40px*/;
	background-color:#3C9;
	margin-bottom:20px;
	padding-bottom:4px;
	padding-top:4px;
	text-indent:10px;	
}
#titulo img{
	float:left;
	margin-left:5px;
	vertical-align: middle;	
}
#titulo.logo img{
	float:left;
	margin-left:5px;
	position:relative;
	top:-10px;	
}

/*menu fijo*/
#sidebar{	
	text-align:left; 
	z-index:2000;
	width:275px;
	float:left;
	background-color:#3C9;
}
/*esto es importante pa ke las listas se situen en su sitio correcto sin margenes*/
ul{
	padding: 0;
	margin: 0;
}
#sidebar ul{
	list-style: none;
	margin-top:5px;
	margin-bottom:5px;
	}
#sidebar img{	
    vertical-align: middle;
}
#sidebar #arriba img{
	width:40px;
	height:40px;	
    vertical-align: middle;
}

#sidebar ul a, #sidebar ul a:visited { /* al agrupar estos selectores, se asegurará de que los vínculos mantengan el aspecto de botón incluso después de haber sido visitados  */
	padding: 5px 5px 5px 15px;/*arriba derecha abajo izkierda*/
	display: block; /* esto asigna propiedades de bloque al vínculo, lo que provoca que llene todo el LI que lo contiene. Esto provoca que toda el área reaccione a un clic de ratón. */
	width: 255px;  /*esta anchura hace que se pueda hacer clic en todo el botón para IE6. Puede eliminarse si no es necesario proporcionar compatibilidad con IE6. Calcule la anchura adecuada restando el relleno de este vínculo de la anchura del contenedor de barra lateral. */
	text-decoration: none;
	font-size:20px;
	color:#FFF;	
}
#sidebar ul a:hover,  #sidebar ul a:active {
	color:#03F;
	background-color:#6FC;/*#69F;*/	
}

#content {
	position:relative;
	left:0px;
	top:0px;
	width:725px;
	float:right;
}

/* Slider */
#slider{
	position:relative;
	width:725px;
	height:325px;
	overflow:hidden;
	z-index:20;
	font-size:15px;	
	top:0px;
	left:0px;
	text-align:center;
}
#slider p{
	position:relative;
	top:5px;
	text-align:center;
}
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
}
#slider, #slider li{ 
	width:725px;
	height:325px;
	overflow:hidden; 	
}



/*link pa dena*/
a.enlace2{
	
	text-decoration:none;
	color:#03F;
}
a.enlace2:visited{	
	text-decoration:none;
}
a.enlace2:hover{	
	color:#F30;
}
article{
	width:710px;
	height:auto;
	position:relative;
	top:0px;
	margin:auto;
	margin-top:0px;
   	text-align:center;
	overflow:hidden;	
}
.idiomas{
	position:absolute;
	width:230px;
	bottom:40px;
	margin:0 auto;
}
.banderas{
	padding:3px;
	margin:0 auto;
}

/*fichas_apps*/
.juego{
	background-color:white;
	background-color: rgba(200,200,200,.7);	
	border-radius: 10px;
	position:relative;
	margin:3px;
	float:left;
	width:230px;
	height:360px;
	font-size:12px;
	text-align:center;
	-webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.juegoimg {
	margin:10px auto;
	display:block;         
	-webkit-transform: scale(.9);
	-moz-transform: scale(.9);
	-ms-transform: scale(.9);
	-o-transform: scale(.9));         
	transform: scale(.9);
	-webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.juego:hover {
	background-color:#3C9;
	-webkit-border-radius: 10px;
	border-radius: 10px;           
	/*cursor: pointer;*/
}
      
.juego:hover img {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1));
	-ms-transform: scale(1);
	transform: scale(1);
}                              

.precio{
	position:absolute;
	text-align:center;
	width:100%;
	margin:0 auto;
	bottom:15px;
	font-size:18px;
	
}

/*menu*/
#menubalanceo {
  position: relative;
  float: left;
  width: 550px;/*100%*/
  padding: 0px;/*0 20*/
}

#menu2{
	position:relative;
	float: left;
	width: 450px;/*100%*/
	padding: 0px;/*0 20*/
}

#menu2 li li a:hover{
	color:#3F3; /*rgba(0,223,252,1);colorletras menu*/
	background: rgba(0,223,252,0.15);/*color fondo submenu*/
}

#menubalanceo, #menubalanceo ul, #menu2, #menu2 ul {
  list-style: none;
}

#menubalanceo > li {
	z-index:5000;
	float: left;
	position: relative;
	width:275px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 1200px;/*efecto de balanceo*/  
}
#menu2 > li {
	z-index:5000;/*importante pa ke kede por encima de todo*/
	float: left;
	position: relative;
	width:225px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 1200px;/*efecto de balanceo*/  
}
#menubalanceo a , #menu2 a{
	display: block;
	position: relative;
  	z-index: 10;
  	padding: 15px 20px 15px 20px;/*13px 20px 13px 20px*/
  	text-decoration: none;
  	color:#006  !important;/*rgba(75,75,75,1)color letras menu*/
  	line-height: 1;
  	background: transparent;  
  	-webkit-transition: all .25s ease-in-out;/*efecto difumino del color boton*/
  	-moz-transition: all .25s ease-in-out;
  	-o-transition: all .25s ease-in-out;
  	-ms-transition: all .25s ease-in-out;
  	transition: all .25s ease-in-out;
}
#menubalanceo > li:hover > a , #menu2 > li:hover > a {
  	background:#33C;/*036 color fondo menu sobre*/
  	color: #00DFFC !important;
  	text-shadow: none;
}
#menubalanceo li ul  {
  position: absolute;/**/
  font-size:18px;
  left: 0px;
  top:44px;/*submenu*/
  z-index: 1;
 width: 275px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  z-index:25000;
}
#menu2 li ul  {
  position: absolute;/*necesario pa ke solo se abra al poner encima del boton-menu*/
  font-size:18px;
  left: 0px;
  top:44px;
  z-index: 1;
 width: 225px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  z-index:25000;
}

#menubalanceo li:hover ul , #menu2 li:hover ul{  
  background:#30C;/*036 color fondo ficha ke se balancea*/
  opacity: 1;
  padding: 2px 0;/*KITAR*/
  visibility: visible;
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);
  -webkit-animation-name: swingdown;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: swingdown;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: ease;
  -o-animation-name: swingdown;
  -o-animation-duration: 2s;
  -o-animation-timing-function: ease;
  -ms-animation-name: swingdown;
  -ms-animation-duration: 2s;
  -ms-animation-timing-function: ease;
  animation-name: swingdown;
  animation-duration: 2s;
  animation-timing-function: ease;
}

@-webkit-keyframes swingdown {
  0% {
   opacity: .99999;
   -webkit-transform: rotateX(90deg);
  }
  30% {  
   -webkit-transform: rotateX(-20deg) rotateY(5deg);
   -webkit-animation-timing-function: ease-in-out;
  }
  65% {
   -webkit-transform: rotateX(20deg) rotateY(-3deg);
   -webkit-animation-timing-function: ease-in-out;
  }
  100% {
   -webkit-transform: rotateX(0);
   -webkit-animation-timing-function: ease-in-out;
  }
}

@-moz-keyframes swingdown {
  0% {
   opacity: .99999;
   -moz-transform: rotateX(90deg);
  }
  30% {  
   -moz-transform: rotateX(-20deg) rotateY(5deg);
   -moz-animation-timing-function: ease-in-out;
  }
  65% {
   -moz-transform: rotateX(20deg) rotateY(-3deg);
   -moz-animation-timing-function: ease-in-out;
  }
  100% {
   -moz-transform: rotateX(0);
   -moz-animation-timing-function: ease-in-out;
  }
}

@-o-keyframes swingdown {
  0% {
   opacity: .99999;
   -o-transform: rotateX(90deg);
  }
  30% {  
   -o-transform: rotateX(-20deg) rotateY(5deg);
   -o-animation-timing-function: ease-in-out;
  }
  65% {
   -o-transform: rotateX(20deg) rotateY(-3deg);
   -o-animation-timing-function: ease-in-out;
  }
  100% {
   -o-transform: rotateX(0);
   -o-animation-timing-function: ease-in-out;
  }
}

@-ms-keyframes swingdown {
  0% {
   opacity: .99999;
   -ms-transform: rotateX(90deg);
  }
  30% {  
   -ms-transform: rotateX(-20deg) rotateY(5deg);
   -ms-animation-timing-function: ease-in-out;
  }
  65% {
   -ms-transform: rotateX(20deg) rotateY(-3deg);
   -ms-animation-timing-function: ease-in-out;
  }
  100% {
   -ms-transform: rotateX(0);
   -ms-animation-timing-function: ease-in-out;
  }
}

@keyframes swingdown {
  0% {
   opacity: .99999;
   transform: rotateX(90deg);
  }
  30% {  
   transform: rotateX(-20deg) rotateY(5deg);
   animation-timing-function: ease-in-out;
  }
  65% {
   transform: rotateX(20deg) rotateY(-3deg);
   animation-timing-function: ease-in-out;
  }
  100% {
   transform: rotateX(0);
   animation-timing-function: ease-in-out;
  }
}

#menubalanceo li li a , #menu2 li li a{
  color:#FFF  !important;/*#00DFFC  letras submenu*/
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  -o-transition: all .15s linear;
  -ms-transition: all .15s linear;
  transition: all .15s linear;
}

#menubalanceo li li a:hover , #menu2 li li a:hover{
  color: rgba(0,223,252,1);/*colorletras menu*/
  background: rgba(0,223,252,0.15);/*color fondo submenu*/
}


footer {
	clear:both;
	background-image:url(../imagenes/pie.jpg);
	background-repeat:no-repeat;
	width:100%;
	position:relative;
	top:0px;
	height:200px;
	text-align:center;	
}
footer img{
	vertical-align: middle;	
}

/*link pa ir*/
a.enlace, a.dena{
	text-decoration:none;
	color:#03F;
}
a:visited{	
	text-decoration:none;
}
a.enlace:hover{	
	color:#FFF;
}
/*link pa dena*/

a.dena:hover{	
	color:#F60;
}
.correo img { 
 	position:relative;
	float:none;   
	-webkit-transform: scale(.9);
	-moz-transform: scale(.9);
	-ms-transform: scale(.9);
	-o-transform: scale(.9));         
	transform: scale(.9);
	-webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}      
.correo:hover img {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1));
	-ms-transform: scale(1);
	transform: scale(1);
	cursor: pointer;
}