@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: #d05c25;
}


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

table.customTable {
  width: 58%;
  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.customTable1 {
  width: 88%;
  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.customTable1 td,
table.customTable1 th {
  border: 2px silver solid;

}

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

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
  color: #000;
}

tfoot {
  font-weight: bold;
  background-color: #5788e4;
  color: white
}


table.customTable2 {
  width: 672px;
  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;

}



table.customTable3 {
  width: 98%;
  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.customTable3 td,
table.customTable3 th {
  border: 2px silver solid;

}


table.customTable4 {
  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.customTable4 td,
table.customTable4 th {
  border: 2px silver solid;

}

table.customTable5 {
  width: 400px;
  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.customTable5 td,
table.customTable5 th {
  border: 2px silver solid;

}

/* .customTable tr > *:nth-last-child(1) {
  display: none;
} */

.contenedor-imagen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  width: 100%
}

#grafica {
  pointer-events: all;
  margin: 0px auto;
  width: 379px
}




#grafica:hover {
  transition: transform .5s;
  /* Animation */
  transform: translate(242px, 17px) scale(1.5);
}

#grafica:not(:hover) {
  transition: transform .5s;
  /* Animation */
  transform: scale(1);
}

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

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

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

.contendor-bienvenida {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #f2eee5;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ec7b30' fill-opacity='0.4'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%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;
}




.botones-resultado-actividad {
  margin: 23px 0px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  height: 38px;
}






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



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

.contenedor-explicacion {
  width: 100%;
  height: 64vh;
}



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

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

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

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

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

.contenedor-actividades {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
  width: 80%;
  height: 62vh;
  padding: 11px 3px;
  margin: 10px auto;
}

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

#btn-comprobar-grafica,
#btn-comprobar {
  width: 52%;
  margin: 0px auto;
}

#grafica-estadistica {
  width: 273px !important;
  height: auto !important;
  margin: 0px auto
}

.column {
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.column .row {
  width: 50%
}

#contenedor-inputs-actividad1 {
  display: none;
}



/* #comprobar-ejercicio1{
  display:none;
} */

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

.mensajeActividad-grafica {

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

.contendor-imagen-grafica {
  padding: 39px 5px;
}

.texto-imagen-grafica {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 60%
}

.contenedor-constante{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 30px;
  pointer-events: all;
  padding: 4px 10px;
  margin-bottom: 17px;
}

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

.table-scrolling2 {
  width: 100%;
  overflow: scroll;
  height: 15vh;
  pointer-events: all;
}

.recuadro-comidin-space {
  width: 30px;
}

/* Estilos actividad nueva */
.respuestas-1 {
  display: block;
  visibility: hidden;
  justify-content: space-evenly;
  flex-direction: row;
  height: 6vh;
  width: 104%;
  margin-left: 66px;
  flex-wrap: nowrap;
}

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

.respuestas-3 {
  display: none;
  justify-content: space-evenly;
  flex-direction: row;
  height: 23px;
  width: 67%;
  /* margin: 0px auto; */
  margin-left: 112px;
  padding-top: 4px;
}

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

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

.respuestas-4-denominadores {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  height: 22px;
  width: 88%;
  margin: 0px auto;
  margin-left: 35px;
  padding-top: 4px;
}

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

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

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


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

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


#imagen-izquierda,
#imagen-derecha {
  display: none
}


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

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

.imagen-situacion img {
  width:150px; 
  height:210px
}

/* 
  ##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: 1em;
  }
  p {
    font-size: 0.8em
  }

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

  .titulo-interactiva{
    height: 100vh
  }

  .contenedor,
  .contenedor-a1,
  .contenedor-a2,
  .contenedor-a3,
  .contenedor-a4,
  .contenedor-a5 {
    pointer-events: all
  }

  .contenedor-a4,
  .contenedor-a5 {

    flex-direction: column
  }


  .contenedor-a5 {
    height: 20vh
  }


  .contendor-bienvenida,
  .contenido-actividad-bienvenida {
    height: 129vh;
  }

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

  .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: 8vh;
    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: 35vh;
  }

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



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

  .contenedor-constante{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 15vh;
    pointer-events: all;
    padding: 4px 10px;
    margin-bottom: 17px;
  }

  #grafica {
    width: 206px;
  }

  #grafica:hover {
    transition: transform .5s;
    /* Animation */
    transform: translate(0px, 0px) scale(1.6);
    margin: 0px auto
  }

  #grafica-estadistica {
    width: 213px !important;
    height: auto !important;
    margin: 0px -22px;
  }

  .contenedor-imagen-grafica {
    padding: 0px 0px;
    overflow-x: scroll;
    width: 100%;
  }

  .contenedor-textos-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
  }

  .texto-imagen-grafica {
    padding: 0px 0px;
    width: 100%;
  }

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

  .imagen-situacion img {
    width:100px; 
    height:150px
  }

  .table-scrolling {
    width: 100%;
    overflow: auto;
    height: 28vh;
  }

  .column {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .column .row {
    width: 100%
  }

  .respuestas-1 {
    display: none;
    justify-content: space-evenly;
    flex-direction: row;
    height: 0vh;
    width: max-content;
    margin-left: 15px;
    flex-wrap: nowrap;
  }

  .respuestas-1 .recuadro, .recuadro-comodin {
    padding: 4px 17px;
    display: inline-block;
}

.respuestas-2 .recuadro, .recuadro-comodin {
  padding: 4px 19px;
  display: inline-block;
}
.respuestas-2{
  justify-content: space-evenly;
  flex-direction: row;
  height: 19px;
  width: max-content;
  margin: 0px auto;
  margin-left: 3px;
  padding-top: 4px;
}

table.customTable3 {
  width: 320px;
}

.respuestas-3 {
  display: none;
  justify-content: space-evenly;
  flex-direction: row;
  height: 23px;
  width: 202%;
  /* margin: 0px auto; */
  margin-left: -10px;
  padding-top: 4px;

}

.respuestas-3 .recuadro,
.recuadro-comodin {
  padding: 4px 35px;
  display: inline-block;
}

.mensajeActividad {
  font-size:0.9em
}

.respuestas-4-numeradores {
  width: 525px;
}

.respuestas-4-denominadores {
  width: 620px;
  margin-left: 21px;
}

}