@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');


body,
html {
  padding: 0px;
  margin: 0px;
}

h1,
h4 {
  padding: 0px;
  margin: 0px;
}

h4 {
  margin: 5px 0px
}




h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 32px;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #4d8a51;
}


p,
span {
  font-size: 0.9em;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: center;
  word-wrap: break-word;
}

/* Estilos nueva actividad*/

#tablero {
  background: url(./assets/imagenes/Plano.svg) no-repeat center center;
  /*background: url(./assets/imagenes/Plano2.png) no-repeat center center;*/

  /* background-size: auto; */
  width: 100%;
  height: 357px;
}

.contenedor-botones {

  width: 344px;
  height: 310px;
  /* float: right; */
  /* display: flex; */
  position: relative;
  bottom: 15px;
  left: 15px;
  padding: 20px;
  pointer-events: none;

}

.contenedor-imagenes-referencia{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-direction: column;
}

.imagen{
  width:60px;
  height:60px
}

.imagen-corazon {
  background: url(./assets/imagenes/corazon.svg) no-repeat center center;
  background-size: 77%;
  background-position: 41% 87%;
}

.imagen-casa {
  background: url(./assets/imagenes/casa.svg) no-repeat center center;
  background-size: 81%;
  background-position: 28% 125%
}

.imagen-barco {
  background: url(./assets/imagenes/barco.svg) no-repeat center center;
  background-size: 86%;
  background-position: 40% 57%;
}

.imagen-gato {
  background: url(./assets/imagenes/gato.svg) no-repeat center center;
  background-size: 84%;
  background-position: 39% 51%;
  pointer-events: none;
}

.imagen-pato {
  background: url(./assets/imagenes/pato.svg) no-repeat center center;
  background-size: 85%;
  background-position: 41% 103%;
}


.animacion_inicio {
  background: url(./assets/imagenes/animacion-inicio.gif) no-repeat center center;
  background-size: contain;
  height: 57vh;
  vertical-align: middle;
  display: grid;
  align-items: center;
}


#siguienteCoordenada {
  pointer-events: none;
  filter: grayscale(1)
}

.figura-circulo {
  width: 6px;
  height: 6px;
  border: 1px solid rgb(114, 113, 113);
  background-color: rgb(194, 188, 188);
  box-shadow: 2px 1px 3px black;
  /* margin: 0px 8px 10px 2px; */
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  padding: -1px 6px;
  opacity: 0.6;
  margin-bottom: 8.4px;
  margin-right: 12.2px;
  cursor: pointer;
  pointer-events: all;
}

.figura-circulo-click {
  background-color: blue;
  border: "1px solid blue";
  opacity: 1;
  pointer-events: none
}

.mensaje-bienvenida {
  display: flex;
    /* justify-content: center; */
    align-items: center;
    align-content: center;
    /* grid-template-columns: 5fr 7fr; */
    text-align: center;
    pointer-events: none;
    flex-direction: row;
    height: 96vh;
}



.mensaje-bienvenida .row {
  width: 50%;
  margin: 0px auto
}

#coordenadas {
  height: 46vh;
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  border: 2px solid silver;
  background: #cbcbce7a;
  border-radius: 3%;
  box-shadow: -3px -2px 5px silver;
  margin-bottom: 9px;
  border: 3px solid #e3b165
}

.coordenadaB {
  padding: 2px 5px;
}

.responsive-imagen {
  width: 34%;
  height: auto;
}

.contendor-bienvenida {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #DFDBE5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23ecb864' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contenido-actividad-bienvenida {
  border: 13px #e4ac57 double;
  border-radius: 28px 28px;
  width: 65%;
  height: 74%;
  background-color: white;
  margin: 0px auto;
  padding: 12px;
  background-image: url("./assets/imagenes/1.png");
  opacity: 0.9;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-blend-mode: exclusion;
}

.recuadro-explicacion-1 {
  display: block;
  width: 100%;
  text-align: center;
  height: 65vh;
}

#atras {
  visibility: hidden;
}


.button {

  text-decoration: none;
  text-align: center;
  padding: 5px 10px;
  border: solid 1px #004F72;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color: #3BA4C7;
  background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  background-image: -ms-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1982A5', endColorstr='#1982A5', GradientType=0);
  background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  cursor: pointer;
  pointer-events: all;
}

.button:hover {

  padding: 5px 10px;
  border: solid 1px #004F72;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color: #3BA4C7;
  background-image: -moz-linear-gradient(top, #3BA4C7 0%, #12627d 100%);
  background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #12627d 100%);
  background-image: -o-linear-gradient(top, #3BA4C7 0%, #12627d 100%);
  background-image: -ms-linear-gradient(top, #3BA4C7 0%, #12627d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#12627d', endColorstr='#12627d', GradientType=0);
  background-image: linear-gradient(top, #3BA4C7 0%, #12627d 100%);
  -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  cursor: pointer
}




/* ok */
.titulo-interactiva {
  font-size: 23px;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 62vh;
}

.titulo-interactiva h1 {
  font-size: 32px;
}

.titulo-interactiva p {
  font-size: 18px;
  width: 80%;
  text-align: center;
  margin-top: -125px;
  margin-left: 39px;
}








.recuadro-explicacion-1,
.recuadro-explicacion-2,
.recuadro-explicacion-3 {
  height: 87%;
}



#slide-2,
#slide-3 {
  display: none
}




.contenedor {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: auto;
  pointer-events: none;

}

.contenedor .row {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
}



.contenedor-a1 {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 65vh;
  pointer-events: none;
}


.mensajeActividad {

  text-align: center;
  display: flex;
  visibility: hidden;
  position: relative;
  font-size: 2.5em;
  font-weight: bold;
  width: 100%;
  height: 100%;
  position: absolute;
  top: initial;
  z-index: 999999;
  left: -1%;
  justify-content: center;
  align-content: center;
  align-items: center;
  background: rgb(191 183 183 / 30%)
}

.mensajeActividad span {
  color: red;
}





.table-scrolling {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 63vh;
  pointer-events: all;
}







.contenedor-textos-imagen {
  display: grid;
  grid-template-columns: 1fr 3fr;
}



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  /* CSS */





}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {

  /* CSS */





}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {

  /* CSS */



}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  /* CSS */





}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {

  /* CSS */

  .contendor-bienvenida {
    height: auto;
  }



}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 18px;
  }

  p {
    font-size: 0.7em
  }

  .titulo-interactiva h1 {
    font-size: 1em;
  }







  .contendor-bienvenida {
    height: 130vh;
  }

  #coordenadas{
    height:auto
  }

  .contenido-actividad-bienvenida {
    margin: 8px auto;
    padding: 12px 13px;
    height: 1000px
  }

  .recuadro-explicacion-1,
  .recuadro-explicacion-2,
  .recuadro-explicacion-3,
  .recuadro-explicacion-4,
  .recuadro-explicacion-5,
  .recuadro-explicacion-6 {
    height: 87%;
    margin-bottom: 27px;
  }

  .titulo-interactiva p {
    font-size: 16px;
    margin-left: 22px;
  }

  .titulo-interactiva {
    height: 106vh;
  }



  .contenedor {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
    width: auto;
    height: 49vh;
    font-size: 0.8em;
  }




  .contenedor-imagen {
    flex-direction: column-reverse;
  }



  .responsive-imagen {
    width: 100%;
    height: auto;
  }

  .table-scrolling {
    width: 227px;
    overflow-x: scroll;
    overflow-y: scroll;
    height: 365px;
    pointer-events: all
  }


  #tablero {
    background: url(./assets/imagenes/Plano2.svg) no-repeat center center;
    background-size: cover;
    height: 354px;
    width: 157%;
}

.contenedor-botones {
  width: 344px;
    height: 310px;
    /* float: right; */
    /* display: flex; */
    position: relative;
    bottom: 12px;
    left: 0px;
    padding: 20px;
    pointer-events: none;
}


  /* nueva actividad clase */
  .contenedor-a1 {
    height: 100vh;
  }

  

  .contenedor .row {
    width: 100%;
  }


  .contenedor-textos-imagen {
    display: flex;
    /* grid-template-columns: 1fr 3fr; */
    justify-content: center;
    flex-direction: column;
  }

  .contenedor-imagenes-referencia{
    flex-direction: row;
  }

  .imagen {
    width: 30px;
    height: 27px;
    padding: 9px;
  }

  .mensaje-bienvenida {
    
      flex-direction: column-reverse;
      height: 96vh;
  }
  
  .mensaje-bienvenida div img{
    width: 81%;
  }





}