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



/*¨---- actividad nueva----*/
.content {
  display: flex;
  height: 53vh;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 88%;
  margin: 0px auto;
  /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
}

.content .row {
  width: auto
}

.row hr {
  width: 56%;
  display: inline-flex;
  border: 1px solid red;
}




.contenedor-actividad-2 {
  display: flex;
  height: 54vh;
  justify-content: center;
  align-items: center;
}

.contenedor-actividad-2 .row {
  width: 50%
}

.contendor-opcion,
.contendor-opcion-A1 {
  display: grid;
  grid-template-columns: 3fr 1fr;
  text-align: revert;
}

.contendor-opcion div {
  width: 100%
}

/* figura circulo 1 */
.st0-1 {
  fill: #662D91;
  stroke: #F15A24;
  stroke-width: 3;
  stroke-miterlimit: 10;
}

/* FIgura 2 circulo */
.st0 {
  fill: #662D91;
  stroke: #F15A24;
  stroke-width: 3;
  stroke-miterlimit: 10;
  cursor: pointer;
}

.st0-click {
  fill: maroon;
  stroke: #F15A24;
  stroke-width: 3;
  stroke-miterlimit: 10;
  border: 1px solid white;
  cursor: pointer;
}

.st0-click2 {
  fill: #fba55c !important;
  stroke: #F15A24;
  stroke-width: 3;
  stroke-miterlimit: 10;
  border: 1px solid white;
  cursor: pointer;
}

/* Class lienas figura cancha */
.st0-division {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #00CC33;
}

.st1-division {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #009726;
}

.st2-division {
  fill: none;
  stroke: #FFFFFF;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st3-division {
  fill: #00CC33;
}

.st4-division {
  fill: none;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

.st5-division {
  fill: #CC9200;
}

.contenedor-figuras-A2 {
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: 39vh;
}

.c1{
  background-image:url(./assets/imagenes/C1.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c2{
  background-image:url(./assets/imagenes/C2.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c3{
  background-image:url(./assets/imagenes/C3.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c4{
  background-image:url(./assets/imagenes/C4.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c5{
  background-image:url(./assets/imagenes/C5.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c6{
  background-image:url(./assets/imagenes/C6.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c7{
  background-image:url(./assets/imagenes/C7.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c8{
  background-image:url(./assets/imagenes/C8.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c9{
  background-image:url(./assets/imagenes/C9.png);
  background-repeat: no-repeat;
  background-size:contain
}

.c10{
  background-image:url(./assets/imagenes/C10.png);
  background-repeat: no-repeat;
  background-size:contain
}

.partes-cancha{
  pointer-events:all
}

.menu-principal {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-direction: column;
  width: 95%;
}

.menu-principal .texto-menu {
  border: 1px solid #cad2ca;
  width: 100%;
  height: 38px;
  padding: 5px 12px;
  filter: drop-shadow(2px 4px 6px black);
  background: white;
  border-radius: 17px;
}

.menu-principal .texto-menu::before {
  content: "";
  background-image: url(./assets/imagenes/frames.gif);
  width: 81px;
  height: 80px;
  position: absolute;
  left: -37px;
  top: -36px;
  background-color: white;
  border-radius: 100%;
}

.menu-principal .row-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 21px;
  width: 367px;
  cursor: pointer;
}


.menu-principal .row-menu :hover {
  background-color: purple;
  color: white;
}

.menu-principal:first-child {
  font-size: 20px;
  color: white;
  background-color: orange;
}

.division {
  display: none
}

#circulo-2,
#circulo-3,
#circulo-4,
#paso-2,
#res-paso2,
#paso-3,
#res-paso3,
#paso-4,
#res-paso4,
#btn-listoA,
#btn-listoB,
#btn-listoC,
#btn-siguienteA,
#btn-siguienteB,
#btn-siguienteC {
  display: none
}

#res-paso2,
#res-paso3,
#res-paso4 {
  text-align: center;
  font-size: 18px
}

#res-paso2 hr {
  width: 10%;
  border: 2px solid red;
}

.MensajeRespuesta-A1 hr {
  width: 80%;
  border: 2px solid red;
}

.MensajeRespuesta-A1{
  display:none;
  margin: 41px auto;
  text-align: center;
  border: 2px solid silver;
  border-radius: 16px;
  padding: 12px;
  filter: drop-shadow(2px 4px 6px black);
  background-color: white;
  width: 260px;
}

.MensajeRespuesta-A3{
  display:block;
  margin: 0px auto;
  text-align: center;
  border: 2px solid silver;
  border-radius: 16px;
  padding: 12px;
  filter: drop-shadow(2px 4px 6px black);
  background-color: white;
  width: 260px;
}


#res-paso3 hr {
  width: 10%;
  border: 2px solid red
}


#res-paso4 hr {
  width: 10%;
  border: 2px solid red
}

#instrucciones-paso2,
#instrucciones-paso3,
#instrucciones-paso4 {
  text-align: center;
  font-size: 23px;
  display:none;
  margin: 41px auto;
  text-align: center;
  border: 2px solid silver;
  border-radius: 16px;
  padding: 12px;
  filter: drop-shadow(2px 4px 6px black);
  background-color: white;
  width: 260px;
}

#mensaje-practica-A3{
  text-align: center;
  font-size: 23px;
  display:none;
  margin: 41px auto;
  text-align: center;
  border: 2px solid silver;
  border-radius: 16px;
  filter: drop-shadow(2px 4px 6px black);
  background-color: white;
  width: 260px;
}

.botones-actividad2 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
}

.btn-disabled {
  filter: grayscale(1);
  pointer-events: none !important;
}

.remover-click {
  pointer-events: none;
}



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: 'Open Sans', '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
}


table.customTable2 {
  width: 82%;
  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: 'Open Sans', '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;

}



/* .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' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

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

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

#atras,
#siguiente {
  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;
}

.boton-circulo {
  width: 40px;
  height: 40px;
  border: 1px solid silver;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background-color: white;
  filter: drop-shadow(2px 4px 6px silver);
  margin: 9px;
  cursor: pointer
}

.contenedor-botones-circulo {
  width: 77%;
  margin: 3px auto;
  pointer-events: all;
}






.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: row;
  width: 100%;
  height: 67vh;
  pointer-events: none;
}

.contenedor-a3 .row {
  width: 50%
}



.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: 20%;
  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: 37%;
  margin: 0px auto;
}

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

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

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

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


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

.mensajeActividad3 {
  text-align: center;
  display: none;
  position: relative;
  font-size: 0.9em;
  width: 100%;
  height: 30px;
  color: red
}

#mensaje-practica-A3{
  text-align: center;
  display:none;
  font-size: 23px;
}

#contenedor-actividad-A3{
  text-align: center;
  display:none;
  font-size: 23px;
}

#listo-actividad3,#siguiente-practica-A3,#respuesta-actividad3,#respuestaActividad3,#botonActividad3,#instruccion2-A3,#siguienteEjercicioActividad3{
  display:none
}

.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;
  margin: 0px auto
}

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

}

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

.respuestas-3 {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  height: 23px;
  width: 73%;
  margin: 0px auto;
  padding-left: 126px;
  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-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: 1fr 3fr;
}

.respuestas-1 .recuadro,
.recuadro-comodin {
  padding: 12px 0px;
  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-cancha{
  height: 59vh
}

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

  canvas{
    height: 40vh !important;
  }

  h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.2em;
}

  p,
  span {
    font-size: 0.8em
  }

  /* Nueva actividad */
  .content {
    display: flex;
    height: 68vh;
    width: 100%;
    flex-direction: column-reverse;
  }

  .content .row {
    width: auto;
    height: 40vh;
}



  .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-a3{
    padding-top: 36px;
    flex-direction: column;
    height: 69vh;
  }

  .contendor-bienvenida {
    height: 998px;
  }

 

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





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


  
  .menu-principal .texto-menu {
    font-size: 0.8em;
  }

  .menu-principal {
    width: 100%;
  }

  .menu-principal .row-menu {
    width: 100%;
    padding: 14px
  }

  .menu-principal .texto-menu::before {
    content: "";
    background-image: url(./assets/imagenes/frames.gif);
    width: 30px;
    height: 29px;
    position: absolute;
    left: -10px;
    top: -7px;
    background-size: contain;
  }

  .contendor-opcion, .contendor-opcion-A1{
    grid-template-columns: 5fr 1fr;
    width: 100%;
  }

  .MensajeRespuesta-A1{
    width: 100%;
  }

  canvas {
    height: 22vh;
  }

  .contenedor-actividad-2 {
    display: flex;
    height: 70vh;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}

.contenedor-botones-circulo {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.boton-circulo {
  width: 30px;
  height: 30px;
  margin: 6px;
}

.contenedor-a3 .row {
  width: 100%;
  height: 44vh;
}

.contenedor-actividad-2 .row{
  width: 100%;
}

.contenedor-figuras-A2 {
  height: 46vh;
}

#imagen-cancha{
  height: 32vh !important;
}


.MensajeRespuesta-A3{
  width: 90%;
}

#instrucciones-paso2,
#instrucciones-paso3,
#instrucciones-paso4{
  width: 90%;
}
#mensaje-practica-A3{
  width: 90%;
}

}