@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?9demlr");
  src: url("../fonts/icomoon.eot?9demlr#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?9demlr") format("truetype"), url("../fonts/icomoon.woff?9demlr") format("woff"), url("../fonts/icomoon.svg?9demlr#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'poppins';
  src: url("../fonts/poppins.eot?9demlr");
  src: url("../fonts/poppins.eot?9demlr#iefix") format("embedded-opentype"), url("../fonts/poppins.ttf?9demlr") format("truetype"), url("../fonts/poppins.woff?9demlr") format("woff"), url("../fonts/poppins.svg?9demlr#poppins") format("svg");
  font-weight: normal;
  font-style: normal;
}

i {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconoMusica {
  position: absolute;
  top: 5px;
  left: 5px;
  float: left;
  color: #333;
  cursor: pointer;
  font-size: 17px;
}
.iconoMusica:before { content: "\ea27"; }

.iconoSilencio {
  position: absolute;
  top: 5px;
  left: 5px;
  float: left;
  color: #333;
  cursor: pointer;
  font-size: 17px;
}
.iconoSilencio:before { content: "\ea2a"; }

.iconoCerrar {
  position: relative;
  top: 5px;
  right: 5px;
  float: right;
  color: #b93940;
  cursor: pointer;
  font-size: 15px;
}

.iconoReiniciar:before {
  content: "\e984";
  font-size: 14px;
  margin-right: 10px;
}

.iconoCerrar:before { content: "\ea0f"; }
.iconoJugar:before {
  content: "\ea1c";
  font-size: 14px;
  margin-right: 10px;
}
.iconoPista:before { margin-right: 10px; content: "\1f329"; }
.iconoCheck:before {
  content: "\ea10";
  position: absolute;
  top: 4px;
  left: 4px;
}

.iconoFallo:before {
  content: "\ea0f";
  position: absolute;
  top: 4px;
  left: 4px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  text-align: center;
  font-size: 14px;
}
body { font-family: 'poppins', sans-serif; color: #111; }
a { text-decoration: none; }
h1 { font-size: 30px; }

/* ---- Reglas del VIDEO INICIAL ---- */
.infoInicial {
  margin: 40px auto auto;
  min-width: 310px;
  max-width: 600px;
  text-align: center;
  position: relative;
}
.cajaVideo { position: absolute; z-index: 1 }
.video { width: 100%; }
#botonInfoinicial { padding: 2%; margin: 21.5% auto; display: inline-block; }
.overlay {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.25);
}

#botonInfoinicial div {
  background-color:  #00813D;
  font-size: 25px;
  border-radius: 30px;
}
#botonInfoinicial .iconoJugar:before { font-size: 24px; }
/* ---- FIN de las reglas del VIDEO INICIAL ---- */

/* ---- REGLAS MENSAJE FINAL ---- */
.mensajeFinal {
  text-align: center;
  height: 65px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  font-size: 19px;
}
.superada { background-color: #00B84B; }
.noSuperada { background-color: #FF3353; }
/* ---- FIN reglas MENSAJE FINAL ---- */

/* ---- REGLAS del MARCADOR ---- */
.marcador { background-color: #FDAA00; display: block; }
.indicadores {
  max-width: 739px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.indicadores li {
  margin: 0 12px;
  display: block;
  float: left;
  width: 32%;
  text-align: center;
  padding: 14px 0 8px;
}

.titIndicador {
  font-size: 11px;
  text-transform: uppercase;
  line-height: 15px;
  opacity: .65;
}

.cajaPuntos {
  padding: 4px 0;
  background-color: #F9F9F9;
  border-radius: 3px;
  border-top: 1px solid #fff;
  position: relative;

}
/* ---- FIN de las REGLAS del MARCADOR ---- */
/* ---- REGLAS de la ACTIVIDAD en general ---- */

/* -- Reglas para hacer dos columnas (Juego + s) -- */
.fila {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
}
.columna1 { flex: 50%; }
.columna2 { flex: 50%; }

/* -- Reglas para la COLUMNA del JUEGO (izquierda) -- */
.cajaJuego {
  margin: 20px auto auto auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -moz-transform: perspective(1000px);
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* ---- REGLAS para la zona de INTERACCIÓN del JUEGO ---- */
.juego {
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
}

#divImagen, #divImagenResuelto {
  position: relative;
  max-width: 620px;
  margin: auto;
}
#divImagen img, #divImagenResuelto img {
  width: 100%;
  margin: 0 auto;
  box-shadow: rgba(0,0,0,.38)0 0 13px;
}

img { vertical-align: middle; -ms-interpolation-mode: bicubic; }
.marker {
  width: 25px;
  height: 25px;
  position: absolute;
  border-radius: 4px;
  background-color: rgba(255,215,147,.10);
  margin: -13px 0 0 -13px;
  box-shadow: rgba(0,0,0,.5) 0 2px 3px;
  cursor: pointer!important;
  transition: all .1s;
  -moz-transition: all .1s;
  -webkit-transition: all .1s;
  -o-transition: all .1s;
}

.marker:before {
  display: block;
  content: " ";
  width: 21px;
  height: 21px;
  border-radius: 3px;
  border: 2px solid #00813D;
  background-color: rgba(255, 255, 255, 0.6);
}

.markerCorrecto:after {
  background-color: #00C857;
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  opacity: .50;
}
.marker:before, .marker:after { display: block; content: " "; }
.iconoRespuesta, .iconoRespuestaCorreccion {
  background-position: 0 0;
  -moz-animation: fade 1s;
  -webkit-animation: fade 1s;
  -o-animation: fade 1s;
  animation: fade 1s;
  content: "\ea10";
  background-position: 0 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  position: absolute;
}
.iconoRespuestaCorreccion {
  top: 3px;
}
.respuestaIntentoMAL:before {
  background-color: rgba(255,51,83,.9);
  border-color: #ce0d1d;
}
#pistaPalabra {
  box-shadow: 0 3px 8px rgba(255, 255, 255, 0.4);
  font-size: 18px;
  width: 340px;
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 7px 0 8px;
  text-align: center;
  color: #000;
  border-radius: 3px;
  z-index: 12;
  background-color: rgba(255, 215, 147, 0.96);
}
#pistaPalabra div { display: inline-block; }

.textoCorreccion {
  width: 360px;
  margin: 0 auto;
  text-align: left;
  padding: 15px;
}

/* -- REGLAS para los RESULTADOS -- */
#cajaFinal {
  margin: 15px auto;
  max-width: 1200px;
  text-align: center;
}

/* Reglas para la caja del marcador final */
#resultados {
  border: 2px solid #328734;
  border-radius: 5px;
  margin-bottom: 15px;
}

#resultados ul {
  display: inline-block;
  margin-bottom: 10px;
  padding-top: 10px;
}

#resultados li {
  display: inline-block;
  padding: 0 30px;
  list-style:none;
  text-align: center;
  text-transform: uppercase;
  font-size: 11px;
  position: relative;
}

.resultDatos {
  font-size: 32px;
  font-weight: bold;
  line-height: 37px;
  display: block;
  font-family: 'poppins', sans-serif;
}
/* Reglas para los botones finales */
.btn {
  padding: 10px 0;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  font-size: 19px;
}

.btn div {
  cursor: pointer;
  color: #fff;
  font-weight: 400;
  background-color: #328734;
  padding: .4em 1em;
  line-height: 1.7em;
  border-radius: 30px;
  text-transform: uppercase;
}
.btn div:hover { background-color: #00C857; }
.btnInicio { width: 200px; }
.btnReiniciar { width: 245px; }
.btnCorrecion { width: 220px; }

/* ---- REGLAS para OCULTAR contenidos ---- */
.ocultar { display: none; }

.negrita { font-weight: bold; }