body, html { 
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'Open Sans', sans-serif;
}

h2 { font-family: 'Bebas Neue', cursive; font-size: 2rem; margin: 0; text-align: center;}
h5 { font-family: 'Bebas Neue', cursive; font-size: 2.5rem; color: #000000;}
h6 { font-family: 'Bebas Neue', cursive; font-size: 1.5rem; margin: 0; padding-right:1rem; display: inline-block;}
h4 { font-family: 'Bebas Neue', cursive; font-size: 1.5rem; margin: 0; display: inline-block;}

.cargando{
  padding: 2rem 1rem;
  border-radius: 10px;
  border: 3px outset #ff0097;
  background-color: rgba(255,255,255,.7);
  min-width: 80%;
}
.cargando h5{font-family: 'Cinzel', serif; display: block; font-size: 2rem; line-height: 2rem;}
.cargando div{ font-size: 2rem; }

.pregunta .dinamico .titulo{margin-bottom: 1rem;}
.pregunta .dinamico .titulo span{display: inline-table; line-height: 1.2rem; font-family: 'Bebas Neue', cursive; font-size: 1.5rem;}
.pregunta .dinamico .titulo span > span{margin: 0; font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: bold;}
.pregunta .dinamico .titulo svg{ width: 3rem; height: 3rem; display: inline-block; vertical-align: middle; margin-right: 1rem;}
.pregunta .dinamico h4{ margin-bottom: 1rem; line-height: 1.6rem;}
.pregunta .dinamico .cont-radio{ margin-bottom: 1rem; display: flex; align-items: center;}
.pregunta .dinamico .cont-radio label { padding: 0 .5rem; line-height: 1.2rem;}
/***** boton arbelo en preguntas *****/
.pregunta [color="asul"] + div .btn-arbelo{background-color: #2d89ef; color: #ffffff;}
.pregunta [color="naranga"] + div .btn-arbelo{background-color: #fa6800; color: #ffffff;}
.pregunta [color="amariyo"] + div .btn-arbelo{background-color: #ffcc00;}
.pregunta [color="rogo"] + div .btn-arbelo{background-color: #d90202; color: #ffffff;}
.pregunta [color="berde"] + div .btn-arbelo{background-color: #00a300; color: #ffffff;}
.pregunta [color="morado"] + div .btn-arbelo{background-color: #603cba; color: #ffffff;}
.pregunta .btn-gris{background-color: #ceced2;}

/***** radio buttons en preguntas *****/
input[type='radio']:after {
  width: 24px;
  height: 24px;
  border-radius: 15px;
  top: -5px;
  left: -1px;
  position: relative;
  background-color: #ffffff;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid #999999;
  cursor: pointer;
}

input[type='radio']:checked:after {
  width: 24px;
  height: 24px;
  border-radius: 15px;
  top: -5px;
  left: -1px;
  position: relative;
  background-color: #ffa500;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid white;
}

.pregunta [color="asul"] input[type='radio']:checked:after{background-color: #2d89ef; color: #ffffff; border: 1px solid #999999;}
.pregunta [color="naranga"] input[type='radio']:checked:after{background-color: #fa6800; color: #ffffff; border: 1px solid #999999;}
.pregunta [color="amariyo"] input[type='radio']:checked:after{background-color: #ffcc00; border: 1px solid #999999;}
.pregunta [color="rogo"] input[type='radio']:checked:after{background-color: #d90202; color: #ffffff; border: 1px solid #999999;}
.pregunta [color="berde"] input[type='radio']:checked:after{background-color: #00a300; color: #ffffff; border: 1px solid #999999;}
.pregunta [color="morado"] input[type='radio']:checked:after{background-color: #603cba; color: #ffffff; border: 1px solid #999999;}

.q_naranga{color: #fab005;}
.q_naranga svg path{fill: #fab005;}
.q_rogo{color: #d90202;}
.q_rogo svg path{fill: #d90202;}
.q_morado{color: #603cba;}
.q_morado svg path{fill: #603cba;}
.q_berde{color: #02bd37;}
.q_berde svg path{fill: #02bd37;}
.q_amariyo{color: #F7DE3A;}
.q_amariyo svg path{fill: #F7DE3A;}

.escenario { height: 100%;}
.escenario .w3-display-middle { text-align: center; }
.centrado { text-align: center; }

.castillo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/castillo.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/***** preloader corazón *****/

.lds-heart {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  transform-origin: 40px 40px;
}
.lds-heart div {
  top: 32px;
  left: 32px;
  position: absolute;
  width: 32px;
  height: 32px;
  background: #d90202;
  animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lds-heart div:after,
.lds-heart div:before {
  content: " ";
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  background: #d90202;
}
.lds-heart div:before {
  left: -24px;
  border-radius: 50% 0 0 50%;
}
.lds-heart div:after {
  top: -24px;
  border-radius: 50% 50% 0 0;
}
@keyframes lds-heart {
  0% {
    transform: scale(0.95);
  }
  5% {
    transform: scale(1.1);
  }
  39% {
    transform: scale(0.85);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}

@keyframes alegre-guina {
  45% {
    background-image: url('img/alegre2.png'); 
  }
  46% {
    background-image: url('img/alegre.png');
  }
}

/***** tribial *****/
.tribial{
  width: 98%;
  height: 100%;
  max-width: 700px;
  overflow-y: auto;
}

.tribial h5{
  font-family: 'Cinzel', serif; 
  font-size: 2rem;
  width: 92%;
  margin: 2rem auto 1rem;
  line-height: 1.5rem;
}

.tribial .ayuda{
  width: 92%;
  margin: 1rem auto;
}

.tribial .tarta{
  margin-bottom: .5rem;
}

.tribial li.ok{
  background-image: url('img/check-all.svg');
  background-repeat: no-repeat;
  background-position: center right;
}

.tribial li.ko{
  background-image: url('img/thumb-down.svg');
  background-repeat: no-repeat;
  background-position: center right;
}

.pregunta .dinamico {
  margin-top: 2rem;
}

.ok, .ko{
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.ok p, .ko p {
  text-align: center;
  text-transform: uppercase;
}

.ok svg, .ko svg {
  max-width: 300px;
}

input[type='radio'] {
  margin-right: 1rem;
}

.tribial .quecito { cursor: pointer;}
.tribial .quecito:hover .circulo {
  stroke: #fff;
  stroke-width: 6px;
}
.tribial .quecito.error:hover * {
  cursor: not-allowed;
}
.tribial .quecito.error:hover .circulo {
  stroke-width: 0px;
}
.tribial .quecito.acierto:hover * {
  cursor: default;
}
.tribial .quecito.acierto:hover .circulo {
  stroke-width: 0px;
}

.sin-seleccion{
  display: none;
  text-align: center;
  font-weight: bold;
  color: #d90202;
  margin-top: .5rem;
}

.alerta-contenido {
  text-align: center;
  padding-bottom: 1rem;
}
.alerta .alerta-contenido div{
  padding: 1rem;
}
.alerta .alerta-contenido .alerta-titulo{
  font-family: 'Cinzel', serif; 
  font-size: 2rem;
  line-height: 2rem;
  padding-bottom: 0;
}


.gameober{
  text-align: center;
}
.gameober h2{
  padding: 2rem 1rem 0;
  text-align: center;
  font-family: 'Cinzel', serif; 
  font-size: 2rem;
}
.gameober .gameober-contenido div{
  padding: 1rem;
  text-align: center;
}
.gameober button{
  margin-bottom: 2rem;
  text-align: center;
}
/***** pregunta del tribial *****/

.triste  {
  height:200px; 
  background-image: url('img/triste.png'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.alegre  {
  height:200px; 
  background-image: url('img/alegre.png'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.publi{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.publi-cont{
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 700px;
  width: 90%;
}
.publi h5{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Cinzel', serif; 
  font-size: 2rem;
  line-height: 2rem;
  margin-top: 1rem;
  color: #ffffff;
}

.publi .contador{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Bebas Neue', cursive; 
  font-size: 2rem;
  color: #ffffff;
}
.publi-imagen{
  background-image: url(img/publi.png);
  flex: 4;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}