@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;
  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*/



table.customTable {
  width: 100%;
  background-color: #FFFFFF;
  border-collapse: collapse;
  border-width: 2px;
  border-color: #7ea8f8;
  border-style: solid;
  color: #000000;
  text-align: center;
  font-size: 1em;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 0.8em;
  pointer-events: all;
  margin: 0px auto;
}




table.customTable td,
table.customTable th {
  border: 2px silver solid;

}

.table-title {
  background-color: #3b903f;
  color: white
}





table.customTable2 {
  width: 44%;
  background-color: #FFFFFF;
  border-collapse: collapse;
  border-width: 2px;
  border-color: #7ea8f8;
  border-style: solid;
  color: #000000;
  text-align: center;
  font-size: 1em;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 0.8em;
  pointer-events: all;
  margin: 0px auto;
}




table.customTable2 td,
table.customTable2 th {
  border: 2px silver solid;

}





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


.resultado-1,
.resultado-2 {
  width: 40px
}

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

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

.contendor-bienvenida {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #e0e8b1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2335ca54' fill-opacity='0.4'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contenido-actividad-bienvenida {
  border: 13px #5788e4 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 16px;
  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 16px;
  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: 65vh;
}

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


.titulo-interactiva p {
  font-size: 18px;
  width: 80%;
  text-align: center;
}








.recuadro-explicacion-1,
.recuadro-explicacion-2,
.recuadro-explicacion-3,
.recuadro-explicacion-4,
.recuadro-explicacion-5,
.recuadro-explicacion-6,
.recuadro-explicacion-7 {
  height: 87%;
}



#slide-2,
#slide-3,
#slide-4,
#slide-5,
#slide-6,
#slide-7 {
  display: none
}




.contenedor {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  height: 40vh;
  pointer-events: none;
  font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

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

.contenedor .row .grids {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 6px;
}

.grids div {
  padding: 5px;
}

.grids-title {
  color: red
}

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



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

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




.imagen-correcta-resultado {
  background-image: url("./assets/imagenes/Co.png");
  background-repeat: no-repeat;
  background-size: 15px;
  width: 30px;
  background-position: center center;
  /* display: inline-flex; */
  display: inline-block;

  height: 15px;
}




.imagen-incorrecta-resultado {
  background-image: url("./assets/imagenes/In.png");
  background-repeat: no-repeat;
  background-size: 15px;
  width: 30px;
  background-position: center center;
  /* display: inline-flex; */

  display: inline-block;
  height: 15px;
}



.botones-actividad {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}


input[type="text"] {
  /* border: 3px silver solid; */
  font-size: 15px;
  font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  width: 50%;
  height: 3vh;
  color: black;
  text-align: center;
}







.enebled-boton {
  filter: grayscale(1);
  cursor: none;
  pointer-events: none;
}


.inputs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 14vh;
  width: auto;
  /* text-align: center; */
  justify-content: center;
  align-items: center;
  align-content: center;
}



.mensajeActividad {

  text-align: center;
  display: inline-block;
  visibility: hidden;
  position: relative;
  font-size: 1.2em;
  width: 100%;
  height: 30px;
  color: red
}





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

/* Estilos actividad nueva */
.respuestas-5 {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 197px;

}

.respuestas-6 {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  height: 19px;
  width: 79%;
  margin: 0px auto;
  padding-left: 80px;
  padding-top: 4px;
}





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

.respuestas-5 .recuadro,
.recuadro-comodin {
  padding: 12px 0px;
  display: inline-block;
}




.texto-situacion-descripcion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.imagen-situacion {
  display: flex;
  justify-content: center
}


.titulos-descripcion{
  font-size: 16px;
    width: 80%;
    margin: 14px;
    font-family: 'Open sans';
    background-color: #42a1bb;
    padding: 3px 9px;
    color: white;
}
/* 
  ##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: 24px;
  }

  p {
    font-size: 0.8em
  }

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







  .contendor-bienvenida {
    height: 100vh;
  }

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

  .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;
  }

  #tabla thead td {
    background-color: #966e5b;
    font-size: 0.7em;
  }

  #tabla tbody td {

    font-size: 0.5em
  }


  input[type="text"] {
    font-size: 0.7em;
    width: 3vh;
    height: 2vh;
  }


  .button:hover {
    padding: 9px 12px;
    font-size: 14px;
    width: 90%;
  }

  .button {
    padding: 9px 12px;
    font-size: 14px;
    width: 90%;
  }

  .contenedor-explicacion h4 {
    font-size: 1.5em
  }


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

  

  table.customTable th {
    border: 2px silver solid;
    padding: 3px;
  }



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



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

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


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

  .contenedor-a5 {
    height: 75vh;
  }
  .contenedor-a4 {
    height: 48vh;
  }

  .contenedor .row {
    width: 100%;
  }

  .contenedor .row .grids {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0px
  }

  .grids div {
    padding: 3px;
  }

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


  .titulos-descripcion {
    font-size: 1em;
  }

}