@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: 25px;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: center;
  color: brown;
}


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

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-title {
  background-color: #5788e4;
  color: white
}

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

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

/* .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: #DFDBE5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg fill='%2392a5ac' fill-opacity='0.4'%3E%3Cpath d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z' opacity='.5'%3E%3C/path%3E%3Cpath d='M15 15h50l-5 5H20v40l-5 5V15zm0 50h50V15L80 0v80H0l15-15zm32.07-32.07l3.54-3.54A15 15 0 0 1 29.4 50.6l3.53-3.53a10 10 0 1 0 14.14-14.14zM32.93 47.07a10 10 0 1 1 14.14-14.14L32.93 47.07z'%3E%3C/path%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;
}

.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: #f7720d;
  background-image: -moz-linear-gradient(top, #f7720d 0%, #d9933c 100%);
  background-image: -webkit-linear-gradient(top, #f7720d 0%, #d9933c 100%);
  background-image: -o-linear-gradient(top, #f7720d 0%, #d9933c 100%);
  background-image: -ms-linear-gradient(top, #f7720d 0%, #d9933c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9933c', endColorstr='#d9933c', GradientType=0);
  background-image: linear-gradient(top, #f7720d 0%, #d9933c 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: #f7720d;
  background-image: -moz-linear-gradient(top, #f7720d 0%, #c9a350 100%);
  background-image: -webkit-linear-gradient(top, #f7720d 0%, #c9a350 100%);
  background-image: -o-linear-gradient(top, #f7720d 0%, #c9a350 100%);
  background-image: -ms-linear-gradient(top, #f7720d 0%, #c9a350 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9a350', endColorstr='#c9a350', GradientType=0);
  background-image: linear-gradient(top, #f7720d 0%, #c9a350 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: 45px;
}


.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: auto;
  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: 95%;
  pointer-events: none;
}

.contenedor-a5 {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 95%;
  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: 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: 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: 9px;
  font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  width: 50%;
  height: 3vh;
  color: black;
  text-align: center;
}





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

#resultado-1,
#resultado-1B,
#resultado-1C,
#resultado-1D {
  width: 30px;
  height: 15px;
  display: block;
}

/* #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
}

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

.texto-imagen-grafica {
  display: flex;
  justify-content: center;
  flex-direction: column;

  width: 60%
}

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


/* 
  ##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) {

  p {
    font-size: 0.8em
  }

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

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

  .contenedor-a4,
  .contenedor-a5 {

    flex-direction: column
  }





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

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

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



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

  #grafica{
    width: 206px;
  }

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

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

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

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

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


}