@import url('https://fonts.googleapis.com/css?family=Calibri:400,700,400italic,700italic');


body,html{
  padding: 0px;
  margin: 0px;

}

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



.contendor-responsive-drag {
  display: flex;
  height: 77px;
  width: 100%;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}



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


.item-descripcion{
  width: 70%;
  display: inline-block;
  padding: 16px 6px;
}

.item-descripcion-collision{
  display: flex;
    justify-content: center;
    align-items: center;
}

.item-descripcion-imagen{
  width: 10%;
  display: inline-block
}

.opcion-descripcion-juego{
  width: 70%;
  display: inline-block;
  padding: 7px 6px;
}
.descripcion-juego:before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:8px;
  border-color:#fff #fff transparent transparent;
  background:#658E15;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
  display:block; width:0;
}

.item-drag-collision{
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-descripcion-drag{
  width: 70%;
  display: inline-block;
  padding: 16px 6px;
  width: 180px;
}

.contenedor-imagenes{
  padding-top: 21px;
    display: flex;
    width: 106%;
    height: 56vh;
    margin-top: -60px;
}

.animacion-bienvenida {
  width: 100%;
  height: 40vh;
  background-image: url(./public/animations/AnimacionBienvenida.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/*--------- imagens slider 1---------*/
#imagenA-S1{
  width: 100%;
height: 80vh;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenida.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenB-S1{
  width: 100%;
height: 80vh;
  display: inline-block;
  background-image: url(./public/animations/PersonajeReading.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}



#imagenD-S1{
  width: 100%;
  height: 80vh;
  display:inline-block;
  background-image: url(./public/animations/Persona1.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#imagenC-S1{
  width: 100%;
  height: 80vh;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenidaojoS.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ----- Fin imagenes slider 1 ---------- */
/* ----- Inicio imagenes slider 2---------- */
#imagenA-S2{
  width: 100%;
  height: 80vh;
  display: inline-block;
  background-image: url(./public/animations/PersonajeReading.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

}

#imagenB-S2{
  width: 100%;
  height: 80vh;
  display: inline-block;
  background-image: url(./public/animations/PersonajeEscribiendo.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#imagenD-S2{
  width: 100%;
  height: 80vh;
  display:inline-block;
  background-image: url(./public/animations/Persona1.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#imagenC-S2{
  width: 100%;
  height: 80vh;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenidaojoS.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* ----- Fin imagenes slider 2---------- */

/* ----- Inicio imagenes slider 3---------- */
#imagenA-S3{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenida.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenB-S3{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/PersonajeReading.gif);
  background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenD-S3{
  width: 100%;
  height: 40vh;
  display:inline-block;
  background-image: url(./public/animations/Persona1.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;;
}

#imagenC-S3{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenidaojoS.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* ----- Fin imagenes slider 3---------- */


/* ----- Inicio imagenes slider 4---------- */
#imagenA-S4{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenidaojoS.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenB-S4{
  width: 100%;
  height: 40vh;;
  display: inline-block;
  background-image: url(./public/animations/PersonajeReading.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenD-S4{
  width: 100%;
  height: 40vh;
  display:inline-block;
  background-image: url(./public/animations/Persona1.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenC-S4{
  width: 364px;
  height: 230px;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenidaojoS.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* ----- Fin imagenes slider 4---------- */

/* ----- Inicio imagenes slider 5---------- */
#imagenA-S5{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/PersonajeEscribiendo.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenB-S5{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/PersonajeReading.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenD-S5{
  width: 100%;
  height: 40vh;
  display:inline-block;
  background-image: url(./public/animations/Persona1.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenC-S5{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenidaojoS.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* ----- Fin imagenes slider 5---------- */
/* ----- Inicio imagenes slider 6---------- */
#imagenA-S6{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/Persona1.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenB-S6{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/PersonajeReading.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenD-S6{
  width: 100%;
  height: 40vh;
  display:inline-block;
  background-image: url(./public/animations/Persona1.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#imagenC-S6{
  width: 100%;
  height: 40vh;
  display: inline-block;
  background-image: url(./public/animations/AnimacionBienvenidaojoS.gif);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* ----- Fin imagenes slider 6---------- */

.filterGrayOn{
  filter: opacity(0.6)
}

.filterGrayOff{
  filter: none
}

.tagTitle{
  font-size:18px;
  font-family:  'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
}


.circulo-banner{
  width: 130px;
    display: flex;
    position: absolute;
    height: 130px;
    top: 25px;
    background-color: silver;
    right: 161px;
    border-radius: 100%;
    overflow: hidden;
    background-image: url(./public/assets/Img/images/Personaje_inicio.png);
    background-size: 92%;
    background-repeat: no-repeat;
    border: 4px double #1473b1 ;
    z-index: 99999;
}

.titulo-interactiva{
  font-size: 32px;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 449px;
  pointer-events: none;


}

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

.mensaje-final{
  height: 46vh;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}


.dnd-poly-drag-image {
  opacity: .5 !important;
}
/* applied when the drag effect is none and the operation ends */
.dnd-poly-drag-image.snapback {
  -webkit-transition: -webkit-transform 250ms ease-out !important;
  -moz-transition: -moz-transform 250ms ease-out !important;
  -o-transition: -o-transform 250ms ease-out !important;
  transition: transform 250ms ease-out !important;
}
/* applied always as a base class for drop effect styles */
.dnd-poly-drag-icon {}


.banderin {
  background-color: #003e58;
  color: white;
  position: absolute;
  transform: rotate(
-45deg
);
  padding: 15px 65px;
  margin-left: -65px;
  left: 0px;
  top: 0px;
  font-size: 1.4em;
  text-align: center;
  margin-top: 20px;
  z-index: 999999;
}

.contendor-bienvenida{
  display:flex;
  width: 100%;
  height:100vh;
  background-color: #e1e4e7;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d99233' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  justify-content:center;
  align-items:center;
  flex-direction: column;

}

.recuadro-explicacion-1{
  display:block;
  width: 100%;
  text-align: center;
}
.responsive {
  display: block;
  margin: 0 auto;
  max-width: 50%;
  width: 30%;
}


.contenido-actividad-bienvenida{
  border:13px #1473b1 double;
  border-radius: 28px 28px;
  width: 65%;
  height: 80vh;
  background-color: white;
  margin:0px auto;
  padding:12px;
  background-image: url("./public/assets/Img/images/1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /* overflow-x: hidden; */
  background-blend-mode: difference;
}




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

}






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

.descripcion-juego{
  padding: 2px 4px;
  font-size: 14px;
  font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  background-color:white;
  border:1px solid teal
}



h4{
  margin:5px 0px
  }


.contenedor-titulo{
  display: flex;
  width: 100%;
  height: 10vh;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
}


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


p,span{
    font-size: 15px;
    font-family:  'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
    text-align:center;
}


/* .figura-circulo,.figura-circulo-drop{
  width: 22px;
  height: 22px;
  background-color: darkgrey;
  box-shadow: 2px 1px 3px black;
  border-radius: 100%;
  cursor: pointer;
  padding: 2px 2px;
} */

.figura-circulo-drop{
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background-color:white;
  border:2px solid darkgrey;
  box-shadow: 2px 1px 3px black;
  display: inline-block;
}

.figura-circulo-drop-colli{
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background-color:rgb(207, 52, 52);
  box-shadow: 2px 1px 3px black;
  display: inline-block;
  border:2px solid green;
  background-color:rgb(101, 223, 101);
}

.figura-circulo{
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background-color:rgb(207, 52, 52);
  border:2px solid rgb(255, 0, 0);
  cursor: pointer;
  /* background-image: url(./public/assets/Img/images/circulo1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; */
}

.circulo-error{

  border:2px solid red;

}

.circulo-correcto{
  width: 22px;
  height: 22px;
  border-radius: 100%;
  border:2px solid green;
  background-color:red;
}



#Resultado{
  display: none;
}



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

.button_repetir-presentacion{
  width: 96px;
    text-decoration: none;
    text-align: center;
    padding: 9px 13px;
    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;
    margin: 0px auto;
    cursor:pointer
   }

   .button_repetir-presentacion:hover{
    width: 96px;
    display: block;
    margin: 0px auto;
  padding:9px 13px;
  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:#154352;
  background-image: -moz-linear-gradient(top, #154352 0%, #1982A5 100%);
  background-image: -webkit-linear-gradient(top, #154352 0%, #1982A5 100%);
  background-image: -o-linear-gradient(top, #154352 0%, #1982A5 100%);
  background-image: -ms-linear-gradient(top, #154352 0% ,#1982A5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
  background-image: linear-gradient(top, #154352 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;

  }


.button_repetir{
  width: 96px;
    display: none;
    text-decoration: none;
    text-align: center;
    padding: 9px 13px;
    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;
    margin: 0px auto;
    cursor:pointer
   }

  .button_repetir:hover{
    width: 96px;
    display: block;
    margin: 0px auto;
  padding:9px 13px;
  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:#154352;
  background-image: -moz-linear-gradient(top, #154352 0%, #1982A5 100%);
  background-image: -webkit-linear-gradient(top, #154352 0%, #1982A5 100%);
  background-image: -o-linear-gradient(top, #154352 0%, #1982A5 100%);
  background-image: -ms-linear-gradient(top, #154352 0% ,#1982A5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
  background-image: linear-gradient(top, #154352 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;

  }

.button_siguiente{
  float:right;
  text-decoration:none;
  text-align:center;
  padding:9px 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:#eaca61;
  background-image: -moz-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -webkit-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -o-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -ms-linear-gradient(top, #eaca61 0% ,#eaac61 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaac61', endColorstr='#eaac61',GradientType=0 );
  background-image: linear-gradient(top, #eaca61 0% ,#eaac61 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{
  visibility:hidden;
}
.button_actividad{
  display:none;
}

.button_actividad{
  text-decoration:none;
  text-align:center;
  padding:9px 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:#eaca61;
  background-image: -moz-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -webkit-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -o-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -ms-linear-gradient(top, #eaca61 0% ,#eaac61 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaac61', endColorstr='#eaac61',GradientType=0 );
  background-image: linear-gradient(top, #eaca61 0% ,#eaac61 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:9px 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_atras{
  float:left;
  text-decoration:none;
  text-align:center;
  padding:9px 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:#eaca61;
  background-image: -moz-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -webkit-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -o-linear-gradient(top, #eaca61 0%, #eaac61 100%);
  background-image: -ms-linear-gradient(top, #eaca61 0% ,#eaac61 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaac61', endColorstr='#eaac61',GradientType=0 );
  background-image: linear-gradient(top, #eaca61 0% ,#eaac61 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 #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;

   }

.boton_personalizado{
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff;
  background-color: #1883ba;
  border-radius: 6px;
  border: 2px solid #0016b0;
}


.cajainicio_personalizado{
  text-decoration: none;
    padding: 17px;
    margin: 5px 0px 5px 20px;
    font-weight: 600;
    font-size: 20px;
    color: #1883ba;
    border-radius: 6px;
    border: 2px solid #0016b0;
    width: 600px;
    height: 438px;

}


.recuadro-explicacion-1,.recuadro-explicacion-2,.recuadro-explicacion-3,.recuadro-explicacion-4,.recuadro-explicacion-5,.recuadro-explicacion-6,.recuadro-explicacion-7,.recuadro-explicacion-8,.recuadro-explicacion-9,.recuadro-explicacion-10{
  height: 85%;
}

.descripcion{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 422px;
}
/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    /* CSS */


    .contenedor-imagenes {

      width: 100%;

  }

      /*--------- imagens slider 1---------*/
  #imagenA-S1 {
    width: 100%;
    height: 50vh;
}

#imagenB-S1 {
  width: 67%;
  height: 50vh;
}



#imagenC-S1 {
  width: 100%;
  height: 50vh;

}

#imagenD-S1 {
  width: 61%;
  height: 50vh;
}

/* ----- Fin imagenes slider 1 ---------- */

  }

  /*
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

  @media (min-width: 1025px) and (max-width: 1280px) {

    /* CSS */


  .contenedor-imagenes {

    width: 100%;

}
  /*--------- imagens slider 1---------*/
  #imagenA-S1 {
    width: 100%;
    height: 50vh;
}

#imagenB-S1 {
  width: 67%;
  height: 50vh;
}



#imagenC-S1 {
  width: 100%;
  height: 50vh;

}

#imagenD-S1 {
  width: 61%;
  height: 50vh;
}

/* ----- Fin imagenes slider 1 ---------- */

  }

  /*
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px) {

    /* CSS */




  .contenedor-imagenes {

    width: 100%;

}

    .contenedor {
      width: 100%;
      height: 423px;
    }

    .contendor-responsive-drag {
      display: flex;
      height: 77px;
      width: 99%;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      align-content: center;
      cursor:move
  }


    .item-descripcion-drag {
      padding: 10px 6px;
      width: 89px;
    }

    .item-descripcion-imagen {
      width: 10%;
      padding: 7px 6px;
    }

    .descripcion {

      flex-direction: column;
  }

    .contenedor-titulo {
      width:400px;
    }

    .opcion-descripcion-juego {
      padding: 7px 6px;
      width: 82%;
    }

    .item-descripcion-collision {
      flex-direction: row-reverse;
  }

    h1,h2,h3,h4,h5,h6{
      font-size: 24px;
    }

    .controls{
      position: absolute;
    left: 50%;
    bottom: 5px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 100%;
    margin-top: 30px;
    text-align: center;
    padding: 0;
    }

    .controls li{
      opacity: 0.9;
      cursor: pointer;
      overflow: hidden;
      display: inline-block;
      height: 34px;
      margin: 0 10px;
      padding: 0px 8px;
      border-radius: 10px;
      font: 1.32rem/30px Arial, sans-serif;
      font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
      background: #3ea04f !important;
      border: 2px solid #bcf536;
      color: white;
    }

    .circulo-banner{
      border:2px solid red;
      right:46px;
      top:42px;
      width: 130px;
      height: 120px;
      background-size: 92%;
    }

      /*--------- imagens slider 1---------*/
  #imagenA-S1 {
    width: 100%;
    height: 50vh;
}

#imagenB-S1 {
  width: 67%;
  height: 50vh;
}



#imagenC-S1 {
  width: 100%;
  height: 50vh;

}

#imagenD-S1 {
  width: 61%;
  height: 50vh;
}

/* ----- Fin imagenes slider 1 ---------- */
  }

  /*
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* CSS */


    .contenedor-titulo {
      width:400px;
    }

    h1,h2,h3,h4,h5,h6{
      font-size: 24px;
    }




  }

  /*
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

  @media (min-width: 481px) and (max-width: 767px) {

    /* CSS */


          /*--------- imagens slider 1---------*/
  #imagenA-S1 {
    width: 100%;
    height: 50vh;
}

#imagenB-S1 {
  width: 67%;
  height: 50vh;
}



#imagenC-S1 {
  width: 100%;
  height: 50vh;

}

#imagenD-S1 {
  width: 61%;
  height: 50vh;
}

/* ----- Fin imagenes slider 1 ---------- */

.contenedor-imagenes {
  padding-top: 21px;
  display: flex;
  width: 106%;
  height: 48vh;
  margin-top: -46px;
}

    .figura-circulo,.figura-circulo-drop {
      width: 30px;
      height: 30px;
    }

    .item-descripcion-imagen {
      width: 10%;
      padding: 0px 6px;
  }


    .contendor-bienvenida {
      height: 640px;
    }
    .contenido-actividad-bienvenida {
      height: 80%;
     /*  overflow-x:hidden; */
    }


    .circulo-banner{
      border:2px solid red;
      right:34px
    }

    .contendor-responsive-drag {
      display: flex;
      height: 77px;
      width: 100%;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      align-content: center;
  }


  .item-descripcion-drag {
    padding: 10px 6px;
    width: 55px;
}

    .item-descripcion-imagen {
      width: 17%;
      padding: 7px 6px;
    }

    .descripcion {

      flex-direction: row;
  }

    .contenedor-titulo {
      width:400px;
    }

    .opcion-descripcion-juego {
      padding: 3px 6px;
      width: 100%;
  }

    .item-descripcion-collision {
      flex-direction: row;
  }

  .descripcion-juego {

    font-size: 12px;
  }

  .contenedor {
    width: 100%;
    height: 421px;
}

.mensaje-final {
  height: 60vh;
}

 /*    .item-descripcion-drag {
      padding: 10px 6px;
      width: 89px;
    }

    .item-descripcion-imagen {
      width: 10%;
      padding: 7px 6px;
    }

    .descripcion {

      flex-direction: column;
  }

    .contenedor-titulo {
      width:400px;
    }

    .opcion-descripcion-juego {
      padding: 7px 4px;
      width: 82%;
    }

    .item-descripcion-collision {
      flex-direction: row-reverse;
  } */




  }

  /*
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

  @media (min-width: 320px) and (max-width: 480px) {



    .contenedor-titulo {
      width:300px;
    }


    #imagenA-S1,#imagenC-S1,#imagenB-S1,#imagenD-S1 {
      width: 100%;
      height:14vh;
      padding: 6% 0px
    }

    #imagenA-S3,#imagenC-S3,#imagenB-S3,#imagenD-S3 {
      width: 100%;
      height:14vh;
      padding: 6% 0px
    }

    #imagenA-S4,#imagenB-S4,#imagenC-S4,#imagenD-S4 {
      width: 100%;
      height: 14vh;
      padding: 6% 0px
    }

    #imagenA-S4,#imagenB-S4,#imagenC-S4,#imagenD-S4 {
      width: 100%;
      height: 14vh;
      padding: 6% 0px
    }

    #imagenA-S5,#imagenB-S5 {
      width: 100%;
      height: 14vh;
      padding: 6% 0px
    }

    #imagenA-S6,#imagenB-S6 {
      width: 100%;
      height: 14vh;
      padding: 6% 0px
    }




    .contenido-actividad-bienvenida{
      height: 72vh;
    }
    /* .contenedor .row{
      flex-direction: column;
    }  */

    .contenedor-imagenes {
      padding-top: 0px;
      flex-direction: row;
      height: 35vh;
      margin-top:0px
  }

    .contenedor {
      display: none;
    }

    h1,h2,h3,h4,h5,h6{
      font-size: 24px;
    }

    .button_atras,.button_siguiente{
      padding:4px 4px;
      font:14px "Arial Black", Gadget, sans-serif;
    }

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

      .responsive {
        display: block;
        margin: 0 auto;
        max-width: 80%;
        width: 100%;
    }

    .circulo-banner{
      border:2px solid red;
      right:16px;
      top:42px;
      width: 90px;
      height: 90px;
      background-size: 92%;
    }

    /* .opcion-descripcion-juego {
      width: 100%;
      display: inline-block;
      padding: 6px 6px;
    }

    .descripcion-juego {
      font-size: 0.8em;
    }

    .item-descripcion-collision{
      flex-direction: row-reverse;
    }

    .descripcion {
      display: flex;
      flex-direction: column;
    } */

  /* .recuadro-explicacion-9::before{
    content: 'GIRA EL DISPOTIVO PARA REALIZAR LA ACTIVIDAD';
    text-align: center;
    font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    background-color: silver;
    width: 100%;
    height:20vh;
    display: block;
    padding:55% 0px;
  } */



  .item-descripcion-drag {
    padding: 10px 6px;
    width: 55px;
}

    .item-descripcion-imagen {
      width: 10%;
      padding: 7px 6px;
    }

    .descripcion {

      flex-direction: column;
  }

    .contenedor-titulo {
      width:400px;
    }

    .opcion-descripcion-juego {
      padding: 0px 6px;
      width: 82%;
  }

    .item-descripcion-collision {
      flex-direction: row-reverse;
  }

  .descripcion-juego {
    padding: 0px 0px !important;
    font-size: 12px;
  }

  .contendor-responsive-drag {
    display: none;
    height: 264px;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.contendor-responsive-drop{

  height: 38vh;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;

}

.contenedor-imagenes-row {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
  flex: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 32vh;
}

.tagTitle{
  font-size:16px;
}



  }