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


body,
html {
  padding: 0px;
  margin: 0px;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

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

.enabled {
  pointer-events: none;
  filter: grayscale(1)
}

.texto-boton {
  display: inline
}

#mensaje {
  text-align: center;
  display: inline-block;
  visibility: hidden;
  position: relative;
  font-size: 18px;
  width: 100%;
  height: 41px;
}

#ejercicio-title{
  color: #521aeb;
  height: 20px;
}

.titulo-interactiva-inicio h1 {
  font-size: 45px;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
  
  /* pointer-events: none; */
}

.titulo-interactiva-slider {
  font-size: 1em;
  color: #521aeb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 8vh
}
/* ok */
.titulo-interactiva {
  font-size: 32px;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60vh;
  /* pointer-events: none; */
}

.sliderPasos {
  width: 120px;
  height: 307px;
}


.contendor-bienvenida {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #dbe4e5;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10h10v10H0V10zM10 0h10v10H10V0z' fill='%23e3b56c' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input[type="text"],
input[type="phone"] {
  border: 3px green solid;
  background-color: #86c277;
  text-align: center;
  font-size: 21px;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  width: 11%;
  height: 56%;
}

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

.contenido-actividad-bienvenida {
  border: 13px #631ce7 double;
  border-radius: 28px 28px;
  width: 65%;
  height: 74%;
  background-color: white;
  margin: 0px auto;
  padding: 12px;
  background-image: url("./public/assets/Img/images/1.png");
  opacity: 0.9;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}



.contenedor {
  display: flex;
  width: 100%;
  height: 375px;
  justify-content: flex-end;
  align-content: flex-start;
  align-items: start;
  flex-direction: column;
  flex-wrap: wrap;
}


.contenedor-inputs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  background-image: url(./public/assets/Img/images/operadores2.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 89px;
  background-size: contain;
  width: 660px;
  margin: 0px auto;
}

.contenedor-inputs-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  height: 49vh;
  background-size: contain;
  width: 100%;
  margin: 0px auto;
}

.contenedor-inputs-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  height: 60vh;
  background-size: contain;
  width: 100%;
  margin: 0px auto;
}

.contenedor-boton {
  height: 11vh;
  width: 100%;
  padding: 24px;
  text-align:center;
}




.contenedor .row {
  width: 50%;
  text-align: center;
}



h4 {
  margin: 5px 0px
}




h1,
h2,
h3,
h4,
h5,
h6 {
  z-index: 999;
  font-size: 32px;
  font-family: 'Calibri', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: center;
}


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




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


.button_continuar {
  width: 118px;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color:#eb1a2b; 
  background-image: -moz-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -o-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#eb5264 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb5264', endColorstr='#eb5264',GradientType=0 ); 
  background-image: linear-gradient(top, #eb1a2b 0% ,#eb5264 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;  
  margin: 0px auto;
  cursor: pointer
}

.button_continuar:hover {
  width: 118px;

  margin: 0px auto;
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color:#eb1a2b; 
    background-image: -moz-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -o-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#d96666 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d96666', endColorstr='#d96666',GradientType=0 ); 
    background-image: linear-gradient(top, #eb1a2b 0% ,#d96666 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;  

}


.button_comprobar {
  width: 118px;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color:#eb1a2b; 
  background-image: -moz-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -o-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#eb5264 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb5264', endColorstr='#eb5264',GradientType=0 ); 
  background-image: linear-gradient(top, #eb1a2b 0% ,#eb5264 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;  
  margin: 0px auto;
  cursor: pointer
}

.button_comprobar:hover {
  width: 118px;

  margin: 0px auto;
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color:#eb1a2b; 
    background-image: -moz-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -o-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#d96666 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d96666', endColorstr='#d96666',GradientType=0 ); 
    background-image: linear-gradient(top, #eb1a2b 0% ,#d96666 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;  

}


.button_repetir {
  width: 96px;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color:#eb1a2b; 
    background-image: -moz-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
    background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
    background-image: -o-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
    background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#eb5264 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb5264', endColorstr='#eb5264',GradientType=0 ); 
    background-image: linear-gradient(top, #eb1a2b 0% ,#eb5264 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;  
  margin: 0px auto;
  cursor: pointer
}

.button_repetir:hover {
  width: 96px;

  margin: 0px auto;
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color:#eb1a2b; 
    background-image: -moz-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -o-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#d96666 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d96666', endColorstr='#d96666',GradientType=0 ); 
    background-image: linear-gradient(top, #eb1a2b 0% ,#d96666 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;  

}





#atras{
  visibility:hidden;
}


.button_atras {
  visibility: hidden;
  z-index: 999;
}

.button_actividad {
  display: none;
}

.button_actividad {
  text-decoration: none;
  text-align: center;
  padding: 14px 13px;
  border: solid 1px #d99133;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 16px "Arial Black", Gadget, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color:#eb1a2b; 
  background-image: -moz-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -o-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#eb5264 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb5264', endColorstr='#eb5264',GradientType=0 ); 
  background-image: linear-gradient(top, #eb1a2b 0% ,#eb5264 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
}


.button_actividad:hover {
  padding: 14px 13px;
  border: solid 1px #d99133;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 16px "Arial Black", Gadget, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background: #eaca61;
  -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;

}



.button_siguiente {
  z-index: 999;
  text-decoration: none;
  text-align: center;
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 16px "Arial Black", Gadget, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color:#eb1a2b; 
  background-image: -moz-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -o-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
  background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#eb5264 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb5264', endColorstr='#eb5264',GradientType=0 ); 
  background-image: linear-gradient(top, #eb1a2b 0% ,#eb5264 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
}


.button_siguiente:hover {
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 16px "Arial Black", Gadget, sans-serif;
  font-weight: bold;
  background-color:#eb1a2b; 
  background-image: -moz-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
  background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
  background-image: -o-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
  background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#d96666 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d96666', endColorstr='#d96666',GradientType=0 ); 
  background-image: linear-gradient(top, #eb1a2b 0% ,#d96666 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;  

}

.button_atras {
  text-decoration: none;
  text-align: center;
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 16px "Arial Black", Gadget, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color:#eb1a2b; 
    background-image: -moz-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
    background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
    background-image: -o-linear-gradient(top, #eb1a2b 0%, #eb5264 100%); 
    background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#eb5264 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb5264', endColorstr='#eb5264',GradientType=0 ); 
    background-image: linear-gradient(top, #eb1a2b 0% ,#eb5264 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
}


.button_atras:hover {
  padding: 9px 13px;
  border: solid 1px #457539;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font: 16px "Arial Black", Gadget, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color:#eb1a2b; 
    background-image: -moz-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -webkit-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -o-linear-gradient(top, #eb1a2b 0%, #d96666 100%); 
    background-image: -ms-linear-gradient(top, #eb1a2b 0% ,#d96666 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d96666', endColorstr='#d96666',GradientType=0 ); 
    background-image: linear-gradient(top, #eb1a2b 0% ,#d96666 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;  

}



.botones-resultado {
  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: 85%;
}

/* .recuadro-explicacion-3{
  height: 76%;
} */


.contenedor-resultados {
  width: 79%;
  padding-right: 89px;
  display: flex;
  justify-content: flex-end;
}

.contenedor-opciones {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 16vh;
}


.contenedor-recta-actividad {
  height: 22vh;
}

#videoescena1,
#videoescena3 {
  width: 100%;
    height: 75vh;
    margin-top: 44px;
    pointer-events: none;
}

#videoescena2{
  width: 100%;
  height: 65vh;
    margin-top: 151px;
    pointer-events: none;
}

#videoescena4 {
  width: 100%;
  height: 67vh;
  margin-top: 159px;
  pointer-events: none;
}

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

#opcion1A:hover {
  transition: transform .2s;
  /* Animation */
  transform: scale(1.1);
}

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

#opcion2A:hover {
  transition: transform .2s;
  /* Animation */
  transform: scale(1.1);
}

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

#opcion3A:hover {
  transition: transform .2s;
  /* Animation */
  transform: scale(1.1);
}

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

#opcionA1,#opcionA2,#opcionA3,#opcionB1,#opcionB2,#opcionB3,#opcionC1,#opcionC2,#opcionC3{
width: 7%;
height: 65%;
background-color: white;
}

#opcionA1 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac1Opc/opcion1-A1.png);
  background-size: contain;
  padding: 12px;

  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}

#opcionA2 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac1Opc/opcion2-A1.png);
  background-size: contain;
  padding: 12px;

  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}

#opcionA3 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac1Opc/opcion3-A1.png);
  background-size: contain;

  padding: 12px;

  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}


#opcionB1 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac2Opc/opcion1-A2.png);
  background-size: contain;
  padding: 12px;

  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}

#opcionB2 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac2Opc/opcion2-A2.png);
  background-size: contain;
  padding: 12px;
 
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}

#opcionB3 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac2Opc/opcion3-A2.png);
  background-size: contain;

  padding: 12px;

  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}


#opcionC1 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac3Opc/opcion1-A3.png);
  background-size: contain;
  padding: 12px;

  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}

#opcionC2 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac3Opc/opcion2-A3.png);
  background-size: contain;
  padding: 12px;

  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}

#opcionC3 {
  border-radius: 100%;
  background-image: url(./public/assets/Img/images/Ac3Opc/opcion3-A3.png);
  background-size: contain;

  padding: 12px;

  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid orange;
  cursor: pointer
}


#contenedor-opciones-2,
#contenedor-opciones-3 {
  display: none
}


/* The Modal (background) */
.modal {
  display: none;
    /* position: fixed; */
    z-index: 1;
    padding-top: 7vw;
    left: 0;
    top: 0;
    width: 100%;
    height: 92%;
    /* overflow: auto; */
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 1%;
}

/* Modal Content */
.modal-content {
  position: relative;
  
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 7px #631ce7 double;
  width: 48%;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  border-radius: 31px;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }

  to {
    top: 0;
    opacity: 1
  }
}

/* The Close Button */
.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-right: 13px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.modal-body {
  padding: 2px 16px;
}

#mensaje-error,
#mensaje-correcto,
#mensaje-final {
  display: none;
  height: 96px;
  text-align: center;
  vertical-align: middle;
  padding: 75px 0px;
}


#mensaje-opcion {
  display: none;
  height: 29px;
  text-align: center;
  vertical-align: middle;
  color:red
}

#repetir1,#repetir2,#repetir3,#repetir4{
  display:none
}

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


}

/* 
    ##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: 1.2em;
  }

  .contenedor-opciones {
    width: 100%;
    height: 7vh
  }
  .contenedor-boton{
    height: 2vh;
  }

  .modal {
    display: none;
      /* position: fixed; */
      height: 70vh;
      border-radius: 3%;
  }

  .modal-content{
    width:75%
  }

  .modal-body {
    padding: 27px 3px;
  }

  #videoescena1,
  #videoescena3,
  #videoescena2,
  #videoescena4 {
    margin-top:0px
  }

  .contenedor-inputs-2{
    height: 40vh;
  }
     
  
}