/* GENERAL */
a {
	text-decoration: none !important;
	outline: none !important;
}
 
a:hover {
	text-decoration: none !important;
}
img {
	user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: auto;
}
.clear {
	clear:both;
	display:block;
	height:0;
	overflow:hidden;
	visibility:hidden;
	width:0;
}
.absoluta {
	position: absolute;
}
.absoluta.centrado {
	left:0;
	right:0;
}
.relativa {
	position: relative;
}

.oculto {
	display: none !important;
}
.bold {
	font-weight:bold;
}
.over_hidden {
	overflow:hidden;
}
.redonda {
	border-radius: 50%;
}
.centrado {
	margin: 0 auto;
}
.text-center {
	text-align:center;
}
.sin_padding {
	padding:auto 0;
}
.shadow {
	-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3); 
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3);
}
.click {
	cursor: pointer;
}
.click:hover {
	opacity: .8;
}
.center {
	text-align: center;
}
.capital {
	text-transform: uppercase;
}
.inactivo {
	opacity: .3 !important;
	cursor: not-allowed !important;
	filter: grayscale(1);
}
.animado {
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.animado1s {
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
.animado10s {
	-webkit-transition: all 10s ease-out;
	-moz-transition: all 10s ease-out;
	-ms-transition: all 10s ease-out;
	-o-transition: all 10s ease-out;
	transition: all 10s ease-out;
}
.fundido {
	-webkit-animation-duration: 5s !important;
  	animation-duration: 5s !important;
}
.transition {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.titulo-mision {
	font-family: 'comic', cursive;
	position:absolute;
	top:200px;
    left:0px;
	width:100%;
	text-align:center;
    font-size: 34px;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
	background: rgba(0, 0, 0, .3);
    padding: 10px;
}
.subtitulo-mision {
	font-family: 'comic', cursive;
	position:absolute;
	top:280px;
    left:0px;
	width:100%;
	text-align:center;
    font-size: 32px;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
	background: rgba(0, 0, 0, .3);
    padding: 10px;
}

.titulo-avion {
	font-family: 'comic', cursive;
	position:absolute;
	top:493px;
    left:0px;
	width:100%;
	text-align:center;
    font-size: 14px;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
	background: rgba(0, 0, 0, .3);
    padding: 10px;
}
.subtitulo-avion {
	font-family: 'comic', cursive;
	position:absolute;
	top:530px;
    left:0px;
	width:100%;
	text-align:center;
    font-size: 14px;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
	background: rgba(0, 0, 0, .3);
    padding: 10px;
}

/* BOCADILLOS */
#prueba-completada {
	position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    width: 100%;
	height:100%;
	background: rgba(0, 0, 0, .9);
    z-index: 9999;
}
.caja-circon {
	position:absolute;
	width: 340px;
    left: 20px;
    bottom: 210px;
    background: rgba(255, 255, 255, .7);
	overflow: hidden;
	height:fit-content;
	min-height: 230px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dialogo-circon {
	position: absolute;
	bottom: -5px;
	left:10px;
	width: 200px;
	height:225px;
	transform-origin: bottom center;
}
.texto-circon {
	padding-left: 20px;
	padding-right:20px;
	width:100%;
	min-height: 230px;
}
.bocadillo {
	font-family: 'comic';
	font-size:12px;
	line-height: 20px;
    padding: 30px 40px;
    position: relative;
    border-radius: 50%;
    box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5);
    text-align: center;
    margin-bottom: 0;
    min-height: 130px;
	transform-origin: left bottom;
	display: flex;
    align-items: center;
    justify-content: center;
	will-change: transform;
}
.bocadillo.der{
	transform-origin: right bottom;
}
.bocadillo p.oculto {
	margin:0;
}
.bocadillo:hover {
	/*background: #aaa;*/
	cursor: pointer;
}
.bocadillo::before {
	content: "";
    position: absolute;
    bottom: -29px;
    right: 35px;
    width: 20px;
    height: 30px;
    background: url(../img/pico2.png) center top no-repeat;
    background-size: 100%;
    z-index: -1;
    filter: drop-shadow(1px 2px 0px #34c2bd);
}
#mochila .bocadillo::before {
	display:none;
}
.bocadillo::after {
	content: "";
    position: absolute;
    bottom: 10px;
    left: 20px;
    width: 40px;
    height: 30px;
    background: url(../img/pico.png) center top no-repeat;
    background-size: 100%;
	z-index: -1;
}
.bocadillo.der::after {
	left: auto;
    right: 20px;
    background: url(../img/pico3.png) center top no-repeat;
    background-size: 100%;
}
.bocadillo.largo::after {
	bottom: 20px;
}

.bocadillo.aina {
	padding: 10px 40px 10px 20px;
    border-radius: 20px;
    min-height: fit-content;
}
.bocadillo.aina::after {
	content: '';
    position: relative;
    top: 0;
	bottom: 0;
    width: 20px;
    height: 23px;
    background: url(../img/next.png) center top no-repeat;
    background-size: 100%;
    -webkit-transition: transform .3s ease-out;
    -moz-transition: transform .3s ease-out;
    -ms-transition: transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
}
.caja-circon .bocadillo {
	font-family: inherit;
    border-radius: 0;
    box-shadow: none;
    padding: 10px;
    font-size: 16px;
    line-height: 1.2;
	position: relative;
	width:100%;
	min-height: 230px;
}
.caja-circon .bocadillo::before {
	display:none;
}
.caja-circon .bocadillo::after {
	content: '';
    position: absolute;
    bottom: 10px;
	right: 0;
    left: auto;
    width: 20px;
    height: 23px;
    background: url(../img/next.png) center top no-repeat;
    background-size: 100%;
    -webkit-transition: transform .3s ease-out;
    -moz-transition: transform .3s ease-out;
    -ms-transition: transform .3s ease-out;
    -o-transition: transform .3s ease-out;
    transition: transform .3s ease-out;
}
@-webkit-keyframes fondo_zoom {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
	50% {
	  -webkit-transform: scale3d(1.5, 1.5, 1.5);
	  transform: scale3d(1.5, 1., 1.5);
	}
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  
  @keyframes fondo_zoom {
	from {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
	50% {
	  -webkit-transform: scale3d(1.5, 1.5, 1.5);
	  transform: scale3d(1.5, 1., 1.5);
	}
	to {
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  
  .fondo_zoom {
	-webkit-animation-name: fondo_zoom;
	animation-name: fondo_zoom; 
	-webkit-animation-duration: 60s;
	animation-duration: 60s;
  }

/* EJERCICIOS */
.ejercicio {
	top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.enunciado {
    top: 90px;
    width: 660px;
    z-index: 1;
    font-size: 18px;
    background: url(../img/cartel-blanco.png) center top no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding: 35px 35px 45px 40px;
	color:#333;
}
.respuestas {
	top: 190px;
    left: 20px;
    width: 580px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    z-index: 2;
}
.anulador {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height: 100%;
	z-index:9999;
}
.opcion {
	position:relative;
	text-align: center;
    font-size: 14px;
    padding: 10px;
	margin: 10px 0;
    background-color: rgba(255,255,255,.9);
	color:#000;
    border: 2px solid rgba(150,150,150,.5);
    border-radius: 11px;
    overflow: hidden;
	width:100%;

    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.opcion.img {
	height:80px;
	background-size: 78px 78px;
    background-repeat: no-repeat;
    background-position: -1px -1px;
    padding-left: 90px;
    display: flex;
    align-items: center;
}
.opcion.sinimg {
	height:80px;
	padding-left: 10px;
	display: flex;
    align-items: center;
}
.opcion:hover {
	cursor:pointer;
	opacity:.7;
}
.opcion.inactivo {
	opacity:1 !important;
	filter:none !important;
}
.opcion.inactivo:hover {
	opacity:.5;
}
.opcion.pulsado {
	background-color: rgba(107,56,75,.9);
	color:#fff;
}
.opcion.acierto {
	background-color: #009045;
	color:#fff;
}
.opcion.fallo {
	background-color: #bf0811;
	color:#fff;
}
.opcion.hotspot {
	position:absolute;
	padding:0;
	margin:0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}
.hotspot {
	position:absolute;
	width: 100px;
	height: 100px;
	/*background:rgba(0,250,0,.7);*/
	z-index: 8;
}
.hotspot.pulsado {
	background-color: rgba(107,56,75,.9);
	color:#fff;
}
.hotspot.acierto {
	background-color: #009045;
	color:#fff;
}
.hotspot.fallo {
	background-color: #bf0811;
	color:#fff;
}
.tick {
	width: 30px;
	height: 30px;
	color:#fff;
	border:1px solid #fff;
	font-size:18px;
	padding:4px 5px;
	box-sizing:border-box;
	background:rgba(0,250,0,.7);
	
	-webkit-box-shadow: 0px 0px 5px 5px rgba(250,250,250,0.5);
	box-shadow: 0px 0px 5px 5px rgba(250,250,250,0.5);
	z-index: 7;
}
.tick:after {
	font-family: 'Font Awesome 5 Pro';
	content: '\f00c';
}
.instruccion {
	font-family: 'comic';
    position: absolute;
    bottom: 3px;
    left: 20px;
    width: 830px;
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 8px 10px;
}

.feedback {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
	display: flex;
    align-items: center;
    justify-content: center;
	z-index:10;
}
.feedback.oculto {
	display:none;
}
.feedback .popup {
    width: 490px;
    height: auto;
    font-size: 14px;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 25px;
    border-radius: 15px;
    background: rgba(0,0,0,.9);
    z-index: 3;
}
.feedback .popup .cerrar {
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 24px;
    cursor: pointer;
}

/* SOPA DE LETRAS */
/**
* Styles for the puzzle
*/
#juego {
	background: rgba(0,0,0,.7);
	padding: 20px;
	float: left;
	margin: 30px 20px;
  }
  
  #juego div {
	width: 100%;
	margin: 0 auto;
  }
  
  /* style for each square in the puzzle */
  #juego .puzzleSquare {
	height: 30px;
	width: 30px;
	text-transform: uppercase;
	background-color: white;
	color:#000;
	border: 0;
	font: 1em sans-serif;
  }
  
  button::-moz-focus-inner {
	border: 0;
  }
  
  /* indicates when a square has been selected */
  #juego .selected {
	background-color: orange;
  }
  
  /* indicates that the square is part of a word that has been found */ 
  #juego .found {
	background-color: green;
	color: white;
  }
  /* indicates that the square is part of a bad word that has been found */ 
  #juego .bad {
	background-color:red;
	color: white;
  }
  
  #juego .solved {
	background-color: purple;
	color: white;
  }
  
  /* indicates that all words have been found */
  #juego .complete {
	background-color: lightgray;
  } 
  #juego .found.complete {
	background-color: green;
  }
  /* indicates that all words have been found */
  #juego .complete.bad {
	background-color: red;
  }
  
  /**
  * Styles for the word list
  */
  #palabras {
	width: 300px;
  }
  
  #palabras ul {
	list-style-type: none;
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    height: 310px;
    justify-content: center;
  }
  
  #palabras li {
	padding: 2px 0;
    font-size: 20px;
    opacity: 0;
    margin: 2px 0;
    text-align: center;
    border-radius: 5px;
	width:100%;
  }
  
  /* indicates that the word has been found */
  #palabras .wordFound {
	background: green;
	opacity:1;
  }
  /* indicates that the bad word has been found */
  #palabras .wordFoundBad {
	text-decoration: line-through;
	background:red;
	opacity:1;
  }
  
  /**
  * Styles for the button
  */
  #solve {
	margin: 0 30px;
  }

/* BOTON */
.boton {
	font-family: 'comic';
    text-align: center;
    font-size: 24px;
    padding: 5px 20px 10px 20px;
    background: url(../img/boton.png) center top no-repeat;
	background-size: 100% 100%;
	color: #882200;
    text-shadow: 1px 1px 1px #ff9900;
    overflow: hidden;
	width:fit-content;

    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.boton:hover {
	filter: brightness(1.2);
	cursor: pointer;
}
.boton p {
	margin:0;	

	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.boton:hover p {
	transform:scale(1.02);
}
.boton.inactivo {
	cursor: not-allowed;
}

.boton:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.boton p {
	margin:0;	
}
.boton.inactivo {
	cursor: not-allowed;
}

/***************** PERSONAJES **************/
	/* CIRCON */
	.circon {
		
	}
	.circon img {
		position: absolute;
		left:0;
		opacity: 0;
		width:100%;
		transition: opacity 1s ease-in-out;
	}
	.circon img:nth-child(1) { 
		opacity: 1;
	}
	.circon.habla img {
		animation: hablar 1.2s steps(1) infinite;
	}
	  
	.circon.habla img:nth-child(1) { animation-delay: 0s; }
	.circon.habla img:nth-child(2) { animation-delay: 0.4s; }
	.circon.habla img:nth-child(3) { animation-delay: 0.8s; }

	/* PERSONAJES */
	.personaje {
		position: absolute;
		top: 305px;
		left: 250px;
		width: 200px;
		height: 255px;
	}
	.personaje img {
		position: absolute;
		opacity: 0;
		width:100%;
		transition: opacity 1s ease-in-out;
	}
	.personaje img:nth-child(1) { 
		opacity: 1;
	}
	.personaje.habla img {
		animation: hablar 1.2s steps(1) infinite;
	}
	.personaje.habla img:nth-child(1) { animation-delay: 0s; }
	.personaje.habla img:nth-child(2) { animation-delay: 0.4s; }
	.personaje.habla img:nth-child(3) { animation-delay: 0.8s; }

	@keyframes hablar {
		0% { opacity: 1; }
		50% { opacity: 0; }
		100% { opacity: 0; }
	}

	  @-webkit-keyframes parado {
		0% {
			-webkit-transform: scaleY(1) rotate(0deg);
			transform: scaleY(1) rotate(0deg);
		  }
		  
		  25% {
			-webkit-transform: scaleY(.99) rotate(.2deg);
			transform: scaleY(.99) rotate(.2deg);
		  }
		  
		  50% {
			-webkit-transform: scaleY(1) rotate(0deg);
			transform: scaleY(1) rotate(0deg);
		  }
		  
		  75% {
			-webkit-transform: scaleY(.99) rotate(-.2deg);
			transform: scaleY(.99) rotate(-.2deg);
		  }
		  
		  to {
			-webkit-transform: scaleY(1) rotate(0deg);
			transform: scaleY(1) rotate(0deg);
		  }
	  }
	  @keyframes parado {
		0% {
		  -webkit-transform: scaleY(1) rotate(0deg);
		  transform: scaleY(1) rotate(0deg);
		}
		
		25% {
		  -webkit-transform: scaleY(.99) rotate(.2deg);
		  transform: scaleY(.99) rotate(.2deg);
		}
		
		50% {
		  -webkit-transform: scaleY(1) rotate(0deg);
		  transform: scaleY(1) rotate(0deg);
		}
		
		75% {
		  -webkit-transform: scaleY(.99) rotate(-.2deg);
		  transform: scaleY(.99) rotate(-.2deg);
		}
		
		to {
		  -webkit-transform: scaleY(1) rotate(0deg);
		  transform: scaleY(1) rotate(0deg);
		}
	  }
  
	  .parado2 {
		width:100%;
		height:100%;
		-webkit-transform-origin: bottom center;
		transform-origin: bottom center;
		animation:parado 5s infinite;
	  }

	  @-webkit-keyframes parado {
		0% {
			-webkit-transform: scaleY(1) rotate(0deg);
			transform: scaleY(1) rotate(0deg);
		  }
		  
		  25% {
			-webkit-transform: scaleY(.95) rotate(1deg);
			transform: scaleY(.95) rotate(1deg);
		  }
		  
		  50% {
			-webkit-transform: scaleY(1) rotate(0deg);
			transform: scaleY(1) rotate(0deg);
		  }
		  
		  75% {
			-webkit-transform: scaleY(.95) rotate(-1deg);
			transform: scaleY(.95) rotate(-1deg);
		  }
		  
		  to {
			-webkit-transform: scaleY(1) rotate(0deg);
			transform: scaleY(1) rotate(0deg);
		  }
	  }
	  @keyframes parado2 {
		0% {
		  -webkit-transform: scaleY(1) rotate(0deg);
		  transform: scaleY(1) rotate(0deg);
		}
		
		25% {
		  -webkit-transform: scaleY(.95) rotate(1deg);
		  transform: scaleY(.95) rotate(1deg);
		}
		
		50% {
		  -webkit-transform: scaleY(1) rotate(0deg);
		  transform: scaleY(1) rotate(0deg);
		}
		
		75% {
		  -webkit-transform: scaleY(.95) rotate(-1deg);
		  transform: scaleY(.95) rotate(-1deg);
		}
		
		to {
		  -webkit-transform: scaleY(1) rotate(0deg);
		  transform: scaleY(1) rotate(0deg);
		}
	  }

	.girado .imagen {
	  -webkit-transform: scaleX(-1);
	  transform: scaleX(-1);
	}

/* CARTEL */
.cartel {
	background:url(../img/cartel.png) center top no-repeat;
	background-size: 100% 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	text-align: center;
    padding: 20px 50px;
}
.cartel-prueba {
	top: 50px;
    left: 100px;
    width: 780px;
    height: 410px;
	background: url(../img/cartel-blanco.png) center top no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding: 35px 35px 45px 40px;
	color:#333;
}
.marco-prueba {
	top: 50px;
    left: 100px;
    width: 780px;
    height: 410px;
	background: url(../img/cartel-marco.png) center top no-repeat;
    background-size: 100% 100%;
	pointer-events: none;
}

/* PANORAMA */
.panorama {
	top:0;
	left: -990px;
	height:100%;
}
.boton-panorama {
	position: absolute;
	top:45%;
	width:60px;
}
.objeto {
	position: absolute;
}

/* LUPA */
.fondo-lupa {
	position: absolute;
	width: 100%;
	height: 100%;
	background: none;
	background-size: cover;
	filter: blur(10px);
	padding:0;
}