@charset "UTF-8";
@font-face {
  font-family: "nunito-black";
  src: url("../fonts/Nunito/Nunito-Black.ttf"); }
@font-face {
  font-family: "nunito-bold";
  src: url("../fonts/Nunito/Nunito-Bold.ttf"); }
@font-face {
  font-family: "nunito-regular";
  src: url("../fonts/Nunito/Nunito-Regular.ttf"); }
@font-face {
  font-family: "muli-italic";
  src: url("../fonts/Muli/Muli-Italic.ttf"); }
@font-face {
  font-family: "muli-light";
  src: url("../fonts/Muli/Muli-Light.ttf"); }
@font-face {
  font-family: "muli-lightItalic";
  src: url("../fonts/Muli/Muli-LightItalic.ttf"); }
@font-face {
  font-family: "muli-regular";
  src: url("../fonts/Muli/Muli-Regular.ttf"); }
.elemento-oculto {
  visibility: hidden; }

.boton-saltar {
  right: 4vw;
  top: 2vh;
  margin-left: auto; }

.boton-saltar,
.boton-direccion-izq,
.boton-direccion-derch {
  position: absolute;
  background-color: white;
  color: black;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  width: 100px;
  border: 2px solid black;
  border-radius: 40px;
  position: relative;
  height: 42px;
  z-index: 4;
  display: flex; }

.botonera {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 100vw;
  padding: 20px;
  z-index: 4; }
  .botonera img {
    height: 20px;
    margin: auto; }

.boton-direccion-derch {
  margin-left: auto; }

.cuerpo {
  max-width: 500px; }
  @media screen and (max-width: 450px) {
    .cuerpo {
      width: 100%; } }
  @media screen and (min-width: 451px) and (max-width: 490px) {
    .cuerpo {
      width: 90%;
      margin: auto; } }
  @media screen and (min-width: 491px) and (max-width: 545px) {
    .cuerpo {
      width: 80%;
      margin: auto; } }
  @media screen and (min-width: 810px) {
    .cuerpo {
      width: 70%;
      margin: auto; } }
  .cuerpo .bocadillo {
    position: relative;
    display: flex; }
    .cuerpo .bocadillo .texto {
      position: absolute;
      top: 30px;
      margin-left: 10%;
      z-index: 3;
      font-size: 1.4em; }
      @media screen and (min-width: 541px) {
        .cuerpo .bocadillo .texto {
          width: 60%;
          right: 45px; } }
      @media screen and (max-width: 540px) {
        .cuerpo .bocadillo .texto {
          width: 76%;
          left: 0; } }
    .cuerpo .bocadillo .bocadillo-img {
      margin-left: auto; }
      @media screen and (min-width: 541px) {
        .cuerpo .bocadillo .bocadillo-img {
          width: 75%; } }
  .cuerpo .almadrabin {
    width: 90%;
    margin: 0 auto;
    translate: 0px -70px;
    z-index: 1; }

body {
  height: 100%;
  background-image: linear-gradient(to bottom, #bbd9e7, #038f81);
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column; }

html {
  background-color: #038f81; }

* {
  font-family: "nunito-black"; }

@keyframes latido_burbuja_grande {
  from {
    width: 2.5em;
    height: 2.5em; }
  to {
    width: 2em;
    height: 2em; } }
@keyframes latido_burbuja_mediana {
  from {
    width: 2em;
    height: 2em; }
  to {
    width: 1.75em;
    height: 1.75em; } }
@keyframes latido_burbuja_pequeña {
  from {
    width: 1.75em;
    height: 1.75em; }
  to {
    width: 1.5em;
    height: 1.5em; } }
@keyframes giro_circulo {
  from {
    transform: rotate(-180deg) translate(calc(240px));
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes timer_visible {
  from {
    margin-left: 50%;
    opacity: 0; }
  to {
    margin-left: 0%;
    opacity: 1; } }
@keyframes aciertos_visible {
  from {
    margin-left: -50%;
    opacity: 0; }
  to {
    margin-left: 0%;
    opacity: 1; } }
@keyframes inputHighlighter {
  from {
    background: black; }
  to {
    background: transparent; } }
#circulo_central {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  border-radius: 50%;
  color: white; }
  @media screen and (min-width: 700px) {
    #circulo_central {
      width: 550px;
      height: 550px; } }
  @media screen and (max-width: 699px) {
    #circulo_central {
      width: 250px;
      height: 250px; } }
  @media screen and (max-height: 870px) and (min-width: 699px) {
    #circulo_central {
      width: 350px;
      height: 350px; } }
  #circulo_central #zona_circulos_letras {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center; }
    #circulo_central #zona_circulos_letras .inicio_partida {
      animation-name: giro_circulo;
      animation-duration: 1.5s; }
    #circulo_central #zona_circulos_letras .circulo_letra {
      background-color: white;
      margin: 0 auto;
      border: 2px solid black;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      font-family: "nunito-black";
      font-weight: bolder;
      color: black; }
      @media screen and (min-width: 700px) {
        #circulo_central #zona_circulos_letras .circulo_letra {
          width: 2em;
          height: 2em;
          font-size: 2em; } }
      @media screen and (max-width: 699px) {
        #circulo_central #zona_circulos_letras .circulo_letra {
          width: 1.5em;
          height: 1.5em;
          font-size: 1.5em; } }
      @media screen and (max-height: 870px) and (min-width: 699px) {
        #circulo_central #zona_circulos_letras .circulo_letra {
          width: 1.75em;
          height: 1.75em;
          font-size: 1.75em; } }
    #circulo_central #zona_circulos_letras .acierto {
      background: #038f81;
      background: linear-gradient(209deg, #038f81 0%, #bbd9e7 100%); }
    #circulo_central #zona_circulos_letras .fallo {
      background: #da3a3a;
      background: linear-gradient(209deg, #da3a3a 0%, white 100%); }
    #circulo_central #zona_circulos_letras .activa {
      background-color: black;
      color: white; }
      @media screen and (min-width: 700px) {
        #circulo_central #zona_circulos_letras .activa {
          animation: latido_burbuja_grande alternate-reverse 0.75s infinite; } }
      @media screen and (max-width: 699px) {
        #circulo_central #zona_circulos_letras .activa {
          animation: latido_burbuja_pequeña alternate-reverse 0.75s infinite; } }
      @media screen and (max-height: 870px) and (min-width: 699px) {
        #circulo_central #zona_circulos_letras .activa {
          animation: latido_burbuja_mediana alternate-reverse 0.75s infinite; } }
  #circulo_central #pista_pregunta {
    font-weight: bold;
    border-radius: 0.75em;
    background-color: white;
    color: black;
    border: 2px solid black;
    margin-bottom: 3%; }
    @media screen and (min-width: 700px) {
      #circulo_central #pista_pregunta {
        font-size: 1.5em;
        margin-left: 5%;
        margin-right: 5%; } }
    @media screen and (max-width: 699px) {
      #circulo_central #pista_pregunta {
        font-size: 0.9em;
        margin-left: 18%;
        margin-right: 18%;
        margin-top: 3%; } }
    @media screen and (max-height: 870px) and (min-width: 699px) {
      #circulo_central #pista_pregunta {
        font-size: 1.5em;
        margin-left: 15%;
        margin-right: 15%; } }
  @media screen and (min-width: 700px) {
    #circulo_central #pregunta {
      font-size: 1.25em; } }
  @media screen and (max-width: 699px) {
    #circulo_central #pregunta {
      font-size: 0.9em; } }
  @media screen and (max-height: 870px) and (min-width: 699px) {
    #circulo_central #pregunta {
      font-size: 1.15em; } }

#zona_pregunta {
  display: none; }

#img_check {
  height: 15px;
  width: 15px;
  vertical-align: middle;
  filter: hue-rotate(60deg) brightness(500%); }

.btn_custom {
  font-family: "nunito-bold";
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  color: white;
  border-radius: 20px;
  padding-inline: 10px;
  height: min-content;
  width: min-content;
  display: inline-flex;
  font-size: 20px;
  margin-top: 20px;
  border: 2px solid white; }
  .btn_custom:hover, .btn_custom:active {
    color: white;
    transform: translateY(3px);
    box-shadow: 0 3.5px 7.5px rgba(0, 0, 0, 0.25);
    transition: transform 0.1s ease-out; }

#marcadores {
  position: absolute;
  visibility: hidden;
  width: 900px; }
  @media screen and (max-width: 699px) {
    #marcadores {
      margin-top: 320px; } }
  @media screen and (max-height: 849px) and (min-width: 700px) {
    #marcadores {
      margin-top: 350px; } }
  @media screen and (min-width: 700px) {
    #marcadores {
      margin-top: 600px; } }

#btn_responder {
  background-color: white;
  border: 2px solid black;
  color: black; }

#btn_jugar {
  background-color: white;
  color: black;
  border: 2px solid black;
  padding-left: 2em;
  padding-right: 2em; }

#btn_instrucciones {
  background-color: white;
  color: black;
  border: 2px solid black; }

#btn_historial {
  background-color: white;
  color: black;
  border: 2px solid black; }

#Aciertos {
  background-color: white;
  color: black;
  border: 2px solid black;
  font-size: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  margin-right: 100%; }
  @media screen and (min-width: 700px) {
    #Aciertos {
      width: 150px;
      height: 150px; } }
  @media screen and (max-width: 699px) {
    #Aciertos {
      width: 125px;
      height: 125px; } }
  @media screen and (max-width: 450px) {
    #Aciertos {
      width: 75px;
      height: 75px;
      font-size: 20px; } }

#timer {
  background-color: white;
  border: 2px solid black;
  font-size: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black; }
  @media screen and (min-width: 700px) {
    #timer {
      width: 150px;
      height: 150px; } }
  @media screen and (max-width: 699px) {
    #timer {
      width: 125px;
      height: 125px; } }
  @media screen and (max-width: 450px) {
    #timer {
      width: 75px;
      height: 75px;
      font-size: 20px; } }

#logos {
  position: absolute;
  bottom: 1%;
  margin-right: 1%; }
  @media screen and (max-height: 670px) {
    #logos {
      position: relative;
      top: 100px; } }
  #logos .logo {
    height: 100px; }
    @media screen and (min-width: 900px) {
      #logos .logo {
        height: 100px; } }
    @media screen and (max-width: 899px) {
      #logos .logo {
        height: 75px; } }

.bar {
  position: relative;
  display: block; }

.bar:before,
.bar:after {
  content: "";
  height: 4px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: black;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all; }

.bar:before {
  left: 50%; }

.bar:after {
  right: 50%; }

#input_respuesta:focus ~ .bar:before,
#input_respuesta:focus ~ .bar:after {
  width: 50%; }

#input_respuesta {
  border: none;
  outline: none;
  border-bottom: 2px solid white;
  color: white;
  font-size: 1.5em;
  text-align: center;
  background: none;
  text-transform: uppercase;
  display: relative;
  width: 80%; }

#input_respuesta:focus {
  border: none; }

#titulo_contenedor {
  display: block;
  text-align: center;
  padding-top: 1%;
  padding-bottom: 1%; }
  #titulo_contenedor #titulo_web {
    margin: 0 auto;
    height: 10em;
    margin-bottom: 1.5%; }
  #titulo_contenedor .logo-almadraba {
    width: 80%;
    max-width: 300px; }

.instrucciones-bg {
  color: white;
  background: #bbd9e7;
  background: linear-gradient(209deg, #bbd9e7 0%, #038f81 100%);
  border-radius: 20px;
  padding: 10px 0 5px 0;
  margin-bottom: 5px; }
  .instrucciones-bg strong {
    color: black; }

#imagenPremio {
  width: 50%;
  margin-left: -5%; }

#instruccionesPremio {
  text-align: center; }

#tituloComoSeJuega {
  text-align: center;
  font-size: xx-large;
  margin-bottom: 5%; }

.modal-dialog {
  max-height: 95%; }

#modalInstrucciones * {
  line-height: 1.25; }

#modalFinPartida #formulario_subir_partida * {
  font-family: "muli-regular";
  font-weight: bold; }
#modalFinPartida #formulario_subir_partida .form-check {
  margin-left: -5%; }
#modalFinPartida #formulario_subir_partida label {
  width: 100%;
  margin-bottom: 2%;
  border-radius: 20px; }
#modalFinPartida #formulario_subir_partida button {
  font-family: "nunito-black"; }
#modalFinPartida #formulario_subir_partida .btnSubir {
  background: #bbd9e7;
  background: linear-gradient(209deg, #bbd9e7 0%, #038f81 100%);
  color: white; }
#modalFinPartida #formulario_subir_partida .btnDescartar {
  background-color: black;
  color: white; }
#modalFinPartida #spTituloCentro {
  text-align: center; }
#modalFinPartida #spDatosPartida {
  text-align: center; }
#modalFinPartida .modal-body {
  padding: 5%; }
#modalFinPartida #spFormInputs .group {
  position: relative;
  margin-bottom: 45px; }
#modalFinPartida #spFormInputs input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #757575; }
#modalFinPartida #spFormInputs input:focus {
  outline: none; }
#modalFinPartida #spFormInputs label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all; }
#modalFinPartida #spFormInputs input:focus ~ label,
#modalFinPartida #spFormInputs input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: black; }
#modalFinPartida #spFormInputs .bar {
  position: relative;
  display: block;
  width: 100%; }
#modalFinPartida #spFormInputs .bar:before,
#modalFinPartida #spFormInputs .bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: black;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all; }
#modalFinPartida #spFormInputs .bar:before {
  left: 50%; }
#modalFinPartida #spFormInputs .bar:after {
  right: 50%; }
#modalFinPartida #spFormInputs input:focus ~ .bar:before,
#modalFinPartida #spFormInputs input:focus ~ .bar:after {
  width: 50%; }
#modalFinPartida #spFormInputs .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5; }
#modalFinPartida #spFormInputs input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease; }
@-webkit-keyframes inputHighlighter {
  from {
    background: #146eff; }
  to {
    width: 0;
    background: transparent; } }
@-moz-keyframes inputHighlighter {
  from {
    background: #146eff; }
  to {
    width: 0;
    background: transparent; } }
@keyframes inputHighlighter {
  from {
    background: #146eff; }
  to {
    width: 0;
    background: transparent; } }
#modalSPAciertos {
  color: #02b33c;
  font-size: x-large; }

#modalSPFallos {
  color: #d03131;
  font-size: x-large; }

#modalSPTiempo {
  color: #146eff;
  font-size: x-large; }

.modal button {
  width: 100%;
  color: black;
  font-family: "nunito-black";
  font-size: large;
  border-radius: 20px;
  border: 2px solid black; }
.modal .modal-content {
  border-radius: 20px; }
  .modal .modal-content #tablaPuntuaciones {
    margin: unset !important; }

.btnVolver {
  background-color: white;
  border: 2px solid black;
  border-radius: 40px;
  color: black;
  margin-top: 10%;
  margin-bottom: 10%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
  .btnVolver:hover, .btnVolver:active {
    color: black !important;
    transform: translateY(3px);
    box-shadow: 0 3.5px 7.5px rgba(0, 0, 0, 0.25);
    transition: transform 0.1s ease-out; }

.formulario_filtro_centros {
  padding-left: 3%;
  padding-right: 3%; }
  .formulario_filtro_centros .col-12 .col-md-4 {
    padding: 0%; }
  .formulario_filtro_centros label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
  .formulario_filtro_centros #rgPuntuaciones {
    width: 100%;
    margin: auto;
    margin-top: 10px; }
    .formulario_filtro_centros #rgPuntuaciones div.col-4 {
      padding: unset;
      margin: auto; }

div.bolaNavidad {
  width: 20%;
  height: 0;
  padding-bottom: 20%;
  background-color: white;
  border-radius: 50%; }

/*# sourceMappingURL=layout.css.map */