@charset "utf-8";
/* CSS Document */

body {text-align:center; 
background-color: #e9e9ea;
	font-family:arial, verdana, sans-serif;
	color:#555454;
	margin: 0;
	padding: 0;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
	


	
	A {text-decoration:none;color:#6c6d6d;font-size:0.9em; FONT-FAMILY: Verdana,Arial;}
A:active {text-decoration:none;color:#009cd7 ;} 
A:hover {
	text-decoration:none;
	color:#fa8e4e;
}
h1 { font-size:1.2em; font-weight:bold;  color:#9dbc4d; text-align:center;}
h2 { font-size:1.2em; font-weight:bold;  color:#717171; text-align:center;}


a.linkopacity img {
        filter:alpha(opacity=100);
        -moz-opacity: 1.0;
        opacity: 1.0;
        -khtml-opacity: 1.0;
}
 
a.linkopacity:hover img {
        filter:alpha(opacity=30);  
        -moz-opacity: 0.5;  
        opacity: 0.5;
        -khtml-opacity: 0.5; 
}

.caja-txt a:link, .caja-txt a:visited, .caja-txt a:active  { font-family: Verdana,Arial;	font-size: 0.9em; color: #fff;}
	
.container {
		width:70%;
		background:#ffffff;
		border-radius: 12px;
		margin:0px auto;
		font-size:1em;
	}
	section,aside {
		padding: 14px;
		background:#ffffff;
		
		text-align:left;
	}
	section {
		float: left;
		width: 64%;
	}
	aside {
		float: right;
		width: 27%;
	}
	nav {
		overflow: hidden;
	}
	nav ul {
		list-style-type:none;
		float:left;
		padding:0px;
	}
	nav ul li {
		float:left;
		padding:15px 15px; 15px 15px;
		margin:2px;
		background:#bfcfd6;
		-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
	}
	
	
	
	#main-header {
	background: #129fdb;
	color: white;
	height: 50px;
	width: 100%; 
	left: 0;
	top: 0; 
	
}	
	#main-header a {
		color: white;
	}
	
#logo-header {
	float: left;
	padding: 15px 0 0 20px;
	text-decoration: none;
}
	#logo-header:hover {
		color: #b3b1ae;
	}
	
	
	
	footer {
	text-align: center;
	clear: both;
	padding: 20px;
	
	}
 
#main-footer {
	background: #129fdb;
	color: white;
	text-align: center;
	padding: 20px;
	margin-top: 40px;
}
	#main-footer p {
		margin: 0;
	}
	
	#main-footer a {
		color: white;
	}
	
#redes {
	width: 100%;
	height: 20px;
	float: left;
	margin: 10px 0px 10px 15px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}	
	
#columnas2sb {
	width: 48%;
	height: auto;
	background-color: ffffff;
	height: auto;
	float: left;
	margin: 5px 5px 5px 5px;
	min-width: 270px;
  	
}

#columnas3sb {
	width: 220px;
	height: auto;
	background-color: ffffff;
	height: auto;
	float: left;
	margin: 5px 5px 5px 5px;
	
}

#columnas2color {
	width: 44%;
	text-align:left;
font-size:1em;
	font-family:arial, verdana, sans-serif;
	color:#ffffff;
	background:#31609b;
	height: 270px;
	float: left;
	margin: 0px 2px 10px 2px;
	border-radius: 5px;
	padding-top: 0px;
  padding-right: 15px;
  padding-bottom: 0px;
  padding-left: 15px;
	min-width: 270px;
  	
}
#caja { 
	font-size:0.9em;
	font-family:arial, verdana, sans-serif;
	color:#ffffff;
	width: 130px;
	height: 140px;
	float: left;
	border-radius: 8px;
	margin: 5px 5px 5px 5px;
	padding-top: 7px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
}

#caja-vertical { 
	width: 23%;
	height: 240px;
	float: left;

	margin: 10px 10px 0px 0px;
min-width: 155px;
  	max-width: 170px;
}

#caja2sb1 { 
	width: 170px;
	height: 210px;
	float: left;
	
}

#caja2sb2 { 

	
	float: left;

}

#caja-b {
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #6c6d6d;
	width: 20%;
	height: 140px;
	float: left;
	border-radius: 8px;
	margin: 10px 5px 10px 5px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
	border: thin solid #C0C0C0;
	min-width: 130px;
  	max-width: 150px;
	

}

#caja-b:hover {
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	background-color: #91c6ee;

}

#caja-3 {
	font-size: 1em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	background-color: #d7ac18;
	width: 29%;
	height: 170px;
	float: left;
	border-radius: 8px;
	margin: 10px 5px 10px 9px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	border: thin solid #ffffff;
	min-width: 200px;
  	
	

}

#caja-3:hover {
	font-size: 1em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	background-color: #7fa029;

}







#caja-b-c {
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	width: 20%;
	height: 160px;
	float: left;
	border-radius: 8px;
	margin: 10px 5px 10px 8px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
	min-width: 130px;
	max-width: 150px;
	background-color: #f79204;
	background-image: url("inferior-text.png");
	
}

#caja-b-c:hover {
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	background-color: #ed3d2b;
	background-image: url("inferior-text.png");
	
}

#caja-b-c2 {
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	width: 20%;
	height: 160px;
	float: left;
	border-radius: 8px;
	margin: 10px 5px 10px 8px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
	min-width: 130px;
	max-width: 150px;
	background-color: #369dd0;
	background-image: url("inferior-text.png");
	
}

#caja-b-c2:hover {
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	background-color: #0370a6;
	background-image: url("inferior-text.png");
	
}


#colorear {
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	width: 20%;
	height: auto;
	float: left;
	border-radius: 8px;
	margin: 10px 5px 10px 8px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	min-width: 130px;
	max-width: 150px;
	background-color: #369dd0;
	
	
}

#colorear:hover {
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	background-color: #0370a6;
	
	
}

#caja2 {
	width: 210px;
	height: 180px;
	background-color: ffffff;
	float: left;
	margin: 5px 5px 20px 5px;
	border-radius: 8px;
	border: thin solid #898989;
	padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#caja-p {
	width: 100px;
	height: 122px;
	float: left;
	margin: 5px 5px 5px 5px;
padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  }

#caja-colorear { 
	
	width: 150px;
	height: 150px;
	float: left;
	margin: 5px 5px 5px 5px;
padding-top: 0px;
  padding-right: 9px;
  padding-bottom: 0px;
  padding-left: 9px;
}

#caja-300 { 
	
	width: 220px;
	height: auto;
	float: left;
	margin: 5px 5px 5px 5px;
padding-top: 0px;
  padding-right: 9px;
  padding-bottom: 0px;
  padding-left: 9px;
}

#caja-300f { 
	
width: 220px;
	height: 220px;
	background-color: 74c4e5;
	float: left;
	margin: 5px 5px 20px 5px;
	border-radius: 8px;
	border: thin solid #898989;
	padding-top: 0px;
  padding-right: 9px;
  padding-bottom: 0px;
  padding-left: 9px;
}

#caja-columna300 { 
	
width: 220px;
	height: auto;
	background-color: 74c4e5;
	float: left;
	margin: 5px 5px 20px 5px;
	border-radius: 8px;
	border: thin solid #898989;
	padding-top: 0px;
  padding-right: 9px;
  padding-bottom: 0px;
  padding-left: 9px;
}

#caja-neutra { 
	
	width: 130px;
	height: 150px;
	float: left;
	margin: 5px 5px 5px 5px;
padding-top: 0px;
  padding-right: 9px;
  padding-bottom: 0px;
  padding-left: 0px;
}

#caja-neutra-lateral { 
	
	width: 41%;
	height: 140px;
	float: left;
	margin: 5px 5px 7px 5px;
padding-top: 0px;
  padding-right: 9px;
  padding-bottom: 0px;
  padding-left: 9px;
}
#caja2b {
	width: 93%;
	height: auto;
	font-family: arial, verdana, sans-serif;
	background-color: ffffff;
	border-radius: 7px;
	border: thin solid #9dbc4d;
	float: left;
	margin: 5px 0px 5px 5px;
	padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
	  	
}


#cuadro {
	text-align: center;
	font-size: 1.6em;
	font-family: arial, verdana, sans-serif;
	color: #ffffff;
	background: #f0eded;
	width: 89%;
	height: auto;
	float: left;
	margin: 0px 0px 10px 10px;
	border-radius: 5px;
	padding-top: 1px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	border: medium dashed #CCC;
}

#cuadro-cont {
	text-align: center;
	font-size: 1em;
	font-family: arial, verdana, sans-serif;
	background: #ffffff;
	width: 95%;
	height: auto;
	float: left;
	margin: 5px 5px 10px 0px;
	border-radius: 5px;
	padding-top: 1px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	border: thin solid #e7e6e5;
}

#cuadro-des {
	text-align: center;
	font-size: 1.5em;
	font-family: arial, verdana, sans-serif;
	color: #bc915f;
	background: #f0eded;
	width: 94%;
	height: auto;
	float: left;
	margin: 5px 5px 10px 0px;
	border-radius: 5px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	border: medium dashed #CCC;
}

#cuadro-des2 {
	text-align: center;
	font-size: 0.9em;
	font-family: arial, verdana, sans-serif;
	color: #bfa007;
	background: #f9cf01;
	width: 93%;
	height: auto;
	float: left;
	margin: 0px 0px 0px 3px;
	border-radius: 5px;
	padding-top: 1px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-left: 10px;
	border: medium dashed #dbb706;
	font-weight: bold;
}

#caja-cabecera { 
text-align:center;
font-size:1.2em;
font-family:arial, verdana, sans-serif;
	color:#ffffff;
	background:#ee7741;
	width: 95%;
	height: auto;
	float: left;
	margin: 5px 5px 10px 0px;
	border-radius: 5px;
	padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#caja-cabecera-lateral { 
text-align:center;
font-size:1.2em;
	font-family:arial, verdana, sans-serif;
	color:#ffffff;
	background:#9dbc4d;
	width: 93%;
	height: auto;
	float: left;
	margin: 5px 5px 10px 0px;
	border-radius: 5px;
	padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}



#caja-juego { 
text-align:left;
font-size:0.8em;
	font-family:arial, verdana, sans-serif;
	color:#ffffff;
	background:#75b8d2;
	width: 94%;
	height: auto;
	float: left;
	margin: 0px 5px 10px 5px;
	border-radius: 5px;
	padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}

#caja-text-azul { 
text-align:left;
font-size:1em;
	font-family:arial, verdana, sans-serif;
	color:#ffffff;
	background:#31609b;
	width: 94%;
	height: auto;
	float: left;
	margin: 0px 5px 10px 5px;
	border-radius: 5px;
	padding-top: 0px;
  padding-right: 15px;
  padding-bottom: 0px;
  padding-left: 15px;
}


 


#gameswf{width:100%;text-align:center;margin-bottom:30px;margin-top:10px;}




/* para 980px o menos */
	@media screen and (max-width:980px) {
		.container {
			width:98%;
		}
		section {
			width:68%;
		}
	}
 
	/* para 700px o menos */
	@media screen and (max-width:700px) {
		aside,section {
			float:none;
			width:96%;
		}
		nav, section {
			font-size:1.2em;
		}
		aside {
			margin-top:5px;
		}
		nav ul {
			float:none;
			clear:both;
		}
	}
 
	/* para 480px o menos */
	@media screen and (max-width:480px) {
		
		nav, section {
			font-size:1.5em;
		}
		section {
			width:94%;
		}
		nav ul {
			float:left;
			clear:none;
			width:50%;
		}
		nav ul li {
			float:none;
		}
	}
	
	@import url(http://fonts.googleapis.com/css?family=Raleway);
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  width: auto;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu > ul {
  background: #e02714;
}
#cssmenu > ul > li {
  float: left;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 20px;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  background: #e02714;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
  color: #ffffff;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
  -webkit-transform: rotateX(90deg) translateY(-23px);
  -moz-transform: rotateX(90deg) translateY(-23px);
  transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 16px 20px;
  color: #ffffff;
  background: #891206;
  content: attr(data-title);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
  background: #129fdb;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #ffffff;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: #e02714;
}
#cssmenu.small-screen #menu-button:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 17px;
  display: block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  width: 22px;
  height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #9c170a;
  border-bottom: 2px solid #9c170a;
}
#cssmenu.small-screen #menu-button:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 27px;
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #9c170a;
}


.accordion {
  background: white;
  margin: auto;
  padding: 1em;
  width: 70%;
}
.accordion h1 {
  text-align: center;
}
.accordion h2 {
  color: aca7a7;
  text-align:left;
font-size:0.8em;
	font-family:arial, verdana, sans-serif;

  cursor: pointer;
}
.accordion h2, .accordion p {
  margin: 0;
}

/*Código para modificar el aviso de cookies*/

#cookieChoiceInfo {
background: #aad2e4 !important; /*Fondo de la barra*/
color: #fff !important;
font-size: 18px !important; /*Tamaño fuente botones, modifica el tamaño final*/
font-weight:normal !important; /*Estilo de fuente: normal, cursiva, negrita*/
top: auto !important;
bottom: 0 !important;/*Posición de la barra: abajo*/
border-top: 10px #86c1dd solid !important; /*Borde de la barra, anchura, color y estilo*/
padding: 40 !important;
box-sizing: border-box;
transform:scale(1.0,1.0);
opacity: 1.0; /*Transparencia de 0 a 1*/
}


.cookie-choices-text {
display: inline-block !important;
vertical-align: middle !important;
font-size: 18px !important; /*Tamaño de la fuente del aviso*/
margin: 5px 10px !important;
color: #fff !important; /*Color de la fuente del aviso*/
max-width: 800px !important;
text-align: left !important;
line-height: 40px !important;

}

#cookieChoiceInfo a {
display: inline-block;
background: #e7eaeb; /*Fondo del botón*/
padding: 8px;
border-radius: 8px; /*Borde redondeado*/
box-shadow: 1px 1px 8px #737576; /*Sombra del botón*/
border: 2px #fff solid; /*Borde del botón, anchura, color y estilo*/
text-shadow: 1px 1px 2px #bcd8e5; /*Sombra del texto del botón*/
}
#cookieChoiceInfo a:nth-child(2) {
background: #aad2e4; /*Fondo del segundo botón*/

/*Si quieres que el segundo botón sea diferente del primero modifica aquí*/
}
.cookie-choices-button {
font-weight: normal;
text-transform: none !important;
white-space: nowrap;
color: #fff;
margin-left: 8px;
padding: 0 10px;
text-decoration: none;
}