/*
Cyan #15DDFF
azul claro #0098FF
morado #5518E2
blanco #ffffff
negro #000000
magenta #BC00FF
*/

.cyanColor{
  color:#15DDFF;
}



h3.title{
  color: #15DDFF;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 0;
}
h4.title{
  color: #CE49FF;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 0;
}

.containerCenter{
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentCenter{
  text-align: center;
}

.btnMision{
  border: none;
  cursor: pointer;
  text-align: center;
  width:190px;
  height:42px;
  color: #fff;
  background-image: url('../images/botonNormal.png');
  background-color: transparent;
  font-size: 20px;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
.btnMision:hover{
  color: #fff;
  background-image: url('../images/botonSelected.png');
}


.btnMisionResponsive{
  border: none;
  cursor: pointer;
  text-align: center;
  height:0px;
  padding-top: 22.1%;    /* 190/42 aspect ratio = 42 ÷ 190 = 0.221 → 21.1% */
  color: #fff;
  background-image: url('../images/botonNormal.png');
  background-color: transparent;
  background-size: 100% auto;
  font-size: 20px;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  overflow: hidden;
  position: relative;
}
.btnMisionResponsive:hover{
  color: #fff;
  background-image: url('../images/botonSelected.png');
}
.btnMisionResponsive .textoIn{
  position: absolute;
  top:0;
  text-align: center;
  width: 100%;
  padding-top: 2.3%;
}


.btnCuartel{
  display: block;
  cursor: pointer;
  width:100%;
  height:auto;
  padding-bottom: 30px;
}
.btnCuartel img{
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  width:100%;
}

.inlineblock{
  display: inline-block !important;
}

.alertaUP{
  overflow: visible;
  padding-top: 290px;
  position:relative;
}
.alertaUPNoPadding{
  padding-top: 40px !important;
}
.alerta{
  width: 100%;
}
.alertaTop{
  width: 100%;
}
.alertaMid{
  width: 80%;
  background-image: url('../images/alertBG_mid.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  /*padding: 0 120px 0 80px;*/
  padding: 0 11% 0 9%;
  position: relative;
}
.alertaMidFull{
  width: 84% !important;
  padding: 0 8% 0 8% !important;
}

.alertaMid .tituloFila{
  line-height: 1;
  font-weight: bold;
  border-bottom: 2px solid #8474ff;
  padding-bottom: 1%;
  margin-right: 3%;
  padding-top: 2%;
  margin-bottom: 2%;
  font-size: 1.5em;
  position: relative;
}
.alertaMid .tituloFila img{
  position: absolute;
  display: block;
  width: 5%;
  top: 10px;
}
.alertaMid .tituloFila span{
  display: block;
  padding-left: 5%;
}
.alertaMid .titulo{
  font-size: 30px;
  font-weight: bold;
  line-height: 34px;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.alertaMid .tituloAzul{
  font-size: 26px;
  color: #15DDFF;
  font-weight: bold;
  line-height: 30px;
  padding: 25px 0;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.alertaMid .textos{
  font-size: 20px;
  line-height: 26px;
  padding: 25px 0;
}

.alertaBot{
  width: 100%;
}
.alertaUP .imgTituloGralDiv{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
}
.alertaUP .imgTituloGral{
  position: relative;
  top: 0px;
}
.alertaUP .imgPersonajeDiv{
  position: absolute;
  left: -130px;
  top:0px;
}
.alertaUP .imgPersonaje{
  width: 300px;
}

.alertaUP .contenidoAlerta{
  padding-left: 120px;
}


@media only screen and (max-width: 1280px) {
  .alertaUP .imgPersonajeDiv{
    left: -130px;
  }
  .alertaUP .imgPersonaje{
    width: 250px;
  }
  .alertaUP .contenidoAlerta{
    padding-left: 80px;
  }
  
}
@media only screen and (max-width: 980px) {
  .alertaUP{
    padding-top: 180px;
  }
  .alertaUP .imgTituloGral{
    width: 230px;
  }
  .alertaUP .imgTituloGralDiv{
    text-align: left;
  }
  .alertaUP .imgPersonajeDiv{
    position: relative;
    left: 0px;
    top: -330px;
    text-align: center;
    height: 200px;
    overflow: visible;
  }
  .alertaUP .imgPersonaje{
    width: 350px;
  }
  .alertaUP .contenidoAlerta{
    padding-left: 0px;
  }
  .alertaUP .contenidoAlerta{
    text-align: center;
  }
  .alertaMid .titulo{
    
  }
  .alertaMid .titulo{
    font-size: 36px;
  }
  .alertaMid .tituloAzul{
    padding: 35px 0;
  }
  .alertaMid .textos{
    padding: 35px 0;
  }
  
}
@media only screen and (max-width: 660px) {
  .alertaUP .imgPersonajeDiv{
    top: -240px;
    height: 170px;
  }
  .alertaUP .imgPersonaje{
    width: 250px;
  }
}
@media only screen and (max-width: 560px) {
  .alertaUP .imgPersonajeDiv{
    top: -200px;
    height: 130px;
  }
  .alertaUP .imgPersonaje{
    width: 200px;
  }
}


/*-------------------------------------------------------------------------pictureInside*/

.pictureAvatar{
  width: 100%;
  background-size: cover; /* Scales the image to cover the entire element while preserving aspect ratio */
  background-position: center center; /* Centers the image horizontally and vertically */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  overflow: hidden;
  padding-bottom: 100%;
}
.pictureInsignia{
  width: 100%;
  background-size: cover; /* Scales the image to cover the entire element while preserving aspect ratio */
  background-position: center center; /* Centers the image horizontally and vertically */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  overflow: hidden;
  padding-bottom: 100%;
}
.labelImg{
  cursor: pointer;
}
.radioImg{
  cursor: pointer;
}

/*-------------------------------------------------------------------------avatarPeq y menu*/
menu.full{
  padding:0;
  margin:0;
}
menu.full .logoGralPC img{
  width:60%;
  display:block;
  padding-left:5%;
  padding-top:10px;
}
menu.full .avatarPeq{
  cursor: pointer;
}
menu.full .avatarPeq img{
  padding-left:5%;
  padding-right:5%;
  width:90%;
}

menu.full .menuBots{
  padding-left:5%;
  padding-right:5%;
}
menu.full .cadaBtnMenu{
  width:60%;
  position:relative;
}
menu.full .cadaBtnMenu a{
  display:block;
}

.imgIcon{
  position:absolute;
  top:13%;
  left:7%;
  width:16%;
}
.imgIcon img{
  width:100%;
}

menu.full .btnMenu{
  border: none;
  cursor: pointer;
  text-align: left;
  width:70%;
  height:0;
  color: #fff;
  background-image: url('../images/btnMenuNormal.png');
  background-color: transparent;
  background-size: 100% auto;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  padding-bottom: 29%;
  padding-left:30%;
  padding-top:3%;
  font-size: 1.2vw;
}
menu.full .btnMenu:hover{
  color: #fff;
  background-image: url('../images/btnMenuSel.png');
}
menu.full .cadaBtnMenu .selected{
  color: #fff !important;
  background-image: url('../images/btnMenuSel.png') !important;
}


menu.full .avatarPeq{
  background-image: url('../images/avatarBG.png');
  background-size: 100% auto;
  position:relative;
  padding-left:42%;
  line-height:1;
  width:58%;
  padding-top:7%;
  padding-bottom:27%;
  height:0;
  overflow:visible;
}

menu.full .avatarPeq .tituloAvatar{
  font-weight:bold;
}
menu.full .avatarPeq .miNivel{
  padding:0px 0;
}
menu.full .avatarPeq .miFoto{
  width:18.5%;
  border:2px solid #15DDFF;
  border-radius:10px;
  /*padding-bottom:18%;*/
  background-color:#5518E2;
  position:absolute;
  top:12%;
  left:12.5%;
  overflow: hidden;
}
menu.full .avatarPeq .misGotas{
  padding:0px 0;
}
menu.full .avatarPeq .miInsignia{
  width:7%;
  position:absolute;
  top:20%;
  right:12.5%;
  overflow: hidden;
}


@media screen and (min-width: 1520px) {
  menu.full .btnMenu{
    font-size: 19px;
  }
}

/*-------------------------------------------------------------------------avatarPeq y menu RESPONSIVE*/
menu.menuResp{
  padding:0;
  margin:0;
  overflow: hidden;
}
menu.menuResp .logoGralPC{
  width:calc(30% - 3px);
  display:block;
  padding-top:10px;
  float: left;
  border-right:3px solid #15DDFF;
  overflow:hidden;
  margin-top:40px;
}
menu.menuResp .logoGralPC img{
  width:100%;
  display:block;
}
menu.menuResp .avatarPeq{
  float: left;
  width:calc(30% - 43px);
  line-height:1;
  margin-top:40px;
  padding: 10px 20px;
  border-right:3px solid #15DDFF;
  cursor: pointer;
  position: relative;
}

menu.menuResp .avatarPeq .tituloAvatar{
  font-weight:bold;
}
menu.menuResp .avatarPeq .miNivel{
  padding:5px 0;
}
menu.menuResp .avatarPeq .miFoto{
  width:calc(60% - 4px);
  border:2px solid #15DDFF;
  border-radius:10px;
  /*padding-bottom:calc(68% - 4px);*/
  background-color:#5518E2;
  overflow: hidden;
}
menu.menuResp .avatarPeq .misGotas{
  padding:5px 0;
}
menu.menuResp .avatarPeq .barraAvatar{
  width:100%;
}
menu.menuResp .avatarPeq .barraAvatar img{
  width:100%;
}
menu.menuResp .avatarPeq .miInsignia{
  width:12%;
  position:absolute;
  top:5%;
  right:5%;
  overflow: hidden;
}


menu.menuResp .menuBots{
  width:30%;
  float: left;
   background-color: #a60;
}
menu.menuResp .cadaBtnMenu{
  width:60%;
}
menu.menuResp .cadaBtnMenu a{
  display:block;
}
menu.menuResp .btnMenu{
  border: none;
  cursor: pointer;
  text-align: left;
  width:70%;
  height:0;
  color: #fff;
  background-image: url('../images/btnMenuNormal.png');
  background-color: transparent;
  background-size: 100% auto;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  padding-bottom: 29%;
  padding-left:30%;
  padding-top:3%;
  font-size: 1.2vw;
}
menu.menuResp .btnMenu:hover{
  color: #fff;
  background-image: url('../images/btnMenuSel.png');
}
menu.menuResp .cadaBtnMenu .selected{
  color: #fff !important;
  background-image: url('../images/btnMenuSel.png') !important;
}
menu.menuResp .showMenu{
  width:9%;
  float:left;
  margin-top:40px;
  padding-left:1%;
  padding-top:2%;
  
}
menu.menuResp .showMenu img{
  width:100%;
  display:block;
}
menu.menuResp .showMenu #iconShowMenu{
  cursor:pointer;
}
menu.menuResp .showMenu .iconAyudaMovil{
  padding-top:110%;
}




#sequiadometroSideMovil{
  width:calc(27% - 13px);
  float:left;
  margin-top:40px;
  border-right:3px solid #15DDFF;
  padding:2% 5px 0px 5px;
  position: relative;
}
#sequiadometroSideMovil a{
  display:block;
}
#sequiadometroSideMovil img{
  display:block;
  width:100%;
  padding-top:16px;
}
#sequiadometroSideMovil .seqAguja{
  position: absolute;
  top: 76.3%;
  left: 50%;
  width: 1%;
  height: 1%;
  overflow: visible;
  transform: rotate(0deg);
}
#sequiadometroSideMovil .seqAgujaIn{
  width: 1300%;
  position: relative;
  top: -2250%;
  left: -620%;
}
#sequiadometroSideMovil .seqAgujaIn img{
  width: 100%;
}
#sequiadometroSideMovil .seqEstado{
  font-weight: bold;
  position: absolute;
  bottom:9.5%;
  left:53%;
  color:#000;
  width: 50%;
  line-height: 1;
}

#fondoTransp{
  width:100%;
  position:fixed;
  background-color:rgba(0,0,0,0.9);
  top:0;
  left:0;
  bottom:0;
  display:none;
}
#menuBotsMovil{
  width:80%;
  position:absolute;
  top:0;
  left:10%;
  bottom:0;
  display:none;
}
#menuBotsMovil #iconCerrarMenu{
  overflow:hidden;
}
#menuBotsMovil .iconCerrarMenuIn{
  float:right;
  padding: 3% 1% 0 0;
  width:13%;
  cursor:pointer;
}
#menuBotsMovil .iconCerrarMenuIn img{
  width:100%;
}

@media screen and (min-width: 1520px) {
  menu.menuResp .btnMenu{
    font-size: 19px;
  }
}



#menuBotsMovil .cadaBtnMenu{
  width:100%;
}
#menuBotsMovil .cadaBtnMenu a{
  display:block;
}
#menuBotsMovil .btnMenu{
  border: none;
  cursor: pointer;
  text-align: left;
  width:70%;
  height:0;
  color: #fff;
  background-image: url('../images/btnMenuNormal.png');
  background-color: transparent;
  background-size: 100% auto;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  padding-bottom: 29%;
  padding-left:30%;
  padding-top:3%;
  font-size: 5.3vw;
}
#menuBotsMovil .btnMenu:hover{
  color: #fff;
  background-image: url('../images/btnMenuSel.png');
}
#menuBotsMovil .cadaBtnMenu .selected{
  color: #fff !important;
  background-image: url('../images/btnMenuSel.png') !important;
}

@media screen and (min-width: 600px) {
  #menuBotsMovil .btnMenu{
    font-size: 6vw;
  }
}
@media screen and (min-width: 650px) {
  #menuBotsMovil .btnMenu{
    font-size: 5.3vw;
  }
  #menuBotsMovil .cadaBtnMenu{
    width:70%;
  }
}



/*-------------------------------------------------------------------------sidebar right sequiadometro*/
#sequiadometroSide{
  width:90%;
  margin:0 auto;
  padding-top:40px;
  position: relative;
}
#sequiadometroSide a{
  display:block;
}
#sequiadometroSide img{
  display:block;
  width:100%;
}

#imagenPersSide{
  width:100%;
}
#imagenPersSide img{
  width:90%;
  display:block;
  margin:0 auto;
}


#sequiadometroSide .seqAguja{
  position: absolute;
  top: 76.3%;
  left: 50%;
  width: 1%;
  height: 1%;
  overflow: visible;
  transform: rotate(0deg);
}
#sequiadometroSide .seqAgujaIn{
  width: 1300%;
  position: relative;
  top: -1610%;
  left: -620%;
}
#sequiadometroSide .seqAgujaIn img{
  width: 100%;
}
#sequiadometroSide .seqEstado{
  font-weight: bold;
  position: absolute;
  bottom:10%;
  left:53%;
  color:#000;
  width: 50%;
  line-height: 1;
}


/*-------------------------------------------------------------------------IndexIndex*/
#IndexIndex .imagenInicio{
  display: block;
  margin: 0 auto;
  position: relative;
  left: 25px;
  max-width: 465px;
}
.btnInicio{
  border: none;
  cursor: pointer;
  padding: 10px 0;
  text-align: center;
  width:305px;
  height:48px;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  background-image: url('../images/botonPlano.png');
  margin: 0 auto;
  display: block;
}
.btnInicio:hover{
  color: #fff;
  background-image: url('../images/botonPlanoOver.png');
}
/*-------------------------------------------------------------------------MisionEntrar*/
#MisionEntrar{
  text-align: center;
  font-size: 18px;
}
#MisionEntrar .imagenInicio{
  display: block;
  margin: 0 auto;
  max-width: 300px;
}
#MisionEntrar .titulo{
  color: #15DDFF;
  font-size: 20px;
  font-weight: bold;
  width: 350px;
  text-align: left;
  margin: 0 auto;
}
#MisionEntrar form .inputs{
  border: 2px solid #15DDFF;
  background-color: transparent;
  width: 350px;
  padding: 5px 10px;
  height: 20px;
  font-size: 16px;
  color: #fff;
  border-radius: 20px;
}
#MisionEntrar form .inputs:focus{
  border: 2px solid #15DDFF;
  background-color: transparent;
  outline: none;
}

#MisionEntrar .olvidaste{
  color: #15DDFF;
}
#MisionEntrar .recuperar{
  color: #15DDFF;
  border-radius: 25px;
  border: 2px solid #BC00FF;
  padding: 3px 15px;
}
#MisionEntrar .recuperar:hover{
  background-color: #0098FF;
  color: #EAFCFF;
}
/*-------------------------------------------------------------------------MisionIndex*/

/*-------------------------------------------------------------------------MisionCuartel*/
#MisionCuartel {
  padding:60px 40px 40px 40px;
  overflow:hidden;
}

#MisionCuartel .divMision{
  width:50%;
  float:left;
  position: relative;
  font-size: clamp(20px, 5vw, 32px);
}


#MisionCuartel .imgFondo{
  
}
#MisionCuartel .imgFondo img, #MisionCuartel .logoMision img{
  width: 100%;
  display: block;
}
#MisionCuartel .logoMision{
  position: absolute;
  top:17%;
  left: 5%;
  width: 43%;
}
#MisionCuartel .numMision{
  position: absolute;
  top:25%;
  right: 10%;
  font-weight: bold;
  width: 40%;
  line-height: 1;
}
#MisionCuartel .titulo{
  position: absolute;
  top:32%;
  right: 10%;
  font-weight: bold;
  width: 40%;
  line-height: 1;
}

#MisionCuartel .btnComenzar{
  position: absolute;
  bottom:15%;
  right: 15%;
  width:35%;
  
}
#MisionCuartel .btnComenzar a{
  display: block;
}

#MisionCuartel .insignia{
  display: block;
  position: absolute;
  width: 3%;
  height: 0;
  padding-bottom: 3%;
  border-radius: 50px;
  background-color:#15DDFF;
  border:1px solid #fff;
}
#MisionCuartel .insignia1{
  top:8.2%;
  left: 19.35%;
}
#MisionCuartel .insignia2{
  top:8.2%;
  left: 23%;
}
#MisionCuartel .insignia3{
  top:8.2%;
  left: 26.75%;
}
#MisionCuartel .imgFondoCompletada{
  position: absolute;
  top: 1.8%;
  left: 2%;
  width: 96%;
  height: 96%;
}
#MisionCuartel .imgFondoCompletada img{
  width: 100%;
}

@media (max-width: 1280px) {
  #MisionCuartel .divMision{
    width:100%;
  }
}

/*-------------------------------------------------------------------------MisionInventario*/

#MisionInventario .cadaFila{
  position: relative;
  overflow: hidden;
}
#MisionInventario .cadaInsignia{
  width: 31%;
  padding: 1% 1% 1% 1%;
  float: left;
  overflow: visible;
}
#MisionInventario .brresponsive{
  width: 100%;
  height: 1px;
  float: left;
}
#MisionInventario .imagen{
  
}
#MisionInventario .imagen img{
  width: 100%;
}
#MisionInventario .titulo{
  text-align: center;
  line-height: 1;
  font-size: 20px;
  font-weight: bold;
}
#MisionInventario .texto{
  text-align: center;
  line-height: 1.2;
  color:#15DDFF;
}

@media (min-width: 1550px) {
  #MisionInventario .cadaInsignia{
    width: 14%;
    padding: 1%;
    float: left;
  }
  #MisionInventario .brresponsive{
    display: none;
  }
}

/*-------------------------------------------------------------------------MisionPosiciones*/


#MisionPosiciones .submenu{
  background-image: url('../images/plecamorada_movil.png');
  background-size: 100% auto;
  width: 100%;
  height: 0;
  padding-bottom: 6.03%;
  overflow: visible;
}
#MisionPosiciones .submenu a{
  color: #fff;
  display: block;
  width: 50%;
  height: 0;
  padding-bottom: 6.03%;
  overflow: visible;
  float: left;
}
#MisionPosiciones .submenu a:hover{
  font-weight: bold;
}
#MisionPosiciones .submenuGlobal{
  width: 100%;
  height: 0;
  padding-bottom: 12.06%;
  overflow: visible;
  float: left;
}
#MisionPosiciones .submenuEscuela{
  width: 100%;
  height: 0;
  padding-bottom: 12.06%;
  overflow: visible;
  float: left;
}
#MisionPosiciones .submenuSelected{
  background-image: url('../images/plecaazul_escritorio.png');
  background-size: 100% auto;
  font-weight: bold;
}
#MisionPosiciones .respTextMenu{
  display: block;
  padding-left: 3%;
}



#MisionPosiciones .posiciones{
  line-height: 1;
}

#MisionPosiciones .cadaPosicion{
  height: 0;
  padding-bottom: 15%;
  overflow: visible;
  background-image: url('../images/posicionesMovilBG.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 96%;
  margin-top: 2%;
  position: relative;
  margin: 2% auto 0 auto;
}
#MisionPosiciones .cadaPosicionEsc{
  background-image: url('../images/posicionesMovilBGesc.png') !important;
}

#MisionPosiciones .Izq{
  width: 11%;
  padding-bottom: 12%;
  padding-right: 5.5%;
  padding-left: 2.5%;
  padding-top: 2%;
  height: 0;
  overflow: visible;
  float: left;
}
#MisionPosiciones .Der{
  width: 80%;
  float: left;
  height: 0;
  overflow: visible;
  padding-bottom: 9%;
  padding-top: 4.5%;
}
#MisionPosiciones .DerEscuela{
  width: 90% !important;
  padding-left: 5%;
}

#MisionPosiciones .Top{
  overflow: hidden;
  position: relative;
  font-weight: bold;
  
}
#MisionPosiciones .Bottom{
  overflow: hidden;
  position: relative;
  padding-top:1.5%;
}

#MisionPosiciones .foto{
  width: calc(100% - 4px);
  border: 2px solid #15DDFF;
  border-radius: 10px;
  float: left;
  background-color: #5518E2;
  height: 0;
  overflow: visible;
  padding-bottom: calc(100% - 4px);
  overflow: hidden;
}
#MisionPosiciones .num{
  width: 12%;
  float: left;
  border-right: 2px solid #15DDFF;
}
#MisionPosiciones .nombre{
  width: 79%;
  float: left;
  padding-left: 2%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#MisionPosiciones .insignias{
  float: left;
  width: 35%;
}
#MisionPosiciones .misiones{
  float: left;
  width: 35%;
}
#MisionPosiciones .nivel{
  width: 23%;
  float: left;
  text-align: right;
  padding-left: 2%;
}






#MisionPosiciones .numEsc{
  width: 12%;
  float: left;
  border-right: 2px solid #15DDFF;
}
#MisionPosiciones .nombreEsc{
  width: 79%;
  float: left;
  padding-left: 2%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 30px;
}

#MisionPosiciones .insigniasEsc{
  float: left;
  width: 37%;
}
#MisionPosiciones .misionesEsc{
  float: left;
  width: 62%;
}





#MisionPosiciones .miPosicion{
  background-image: url('../images/fondoMiPosicion.png') !important;
  height: 0;
  padding-bottom: 15.58%;
  overflow: visible;
  background-size: 100% auto;
  width: 100%;
  margin-top: 2%;
  position: relative;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
#MisionPosiciones .miPosicion .Izq{
  width: 11%;
  padding-bottom: 12%;
  padding-right: 4.5%;
  padding-left: 4.5%;
  padding-top: 2.5%;
  height: 0;
  overflow: visible;
  float: left;
}
#MisionPosiciones .miPosicion .Der{
  width: 77%;
  float: left;
  height: 0;
  overflow: visible;
  padding-bottom: 9%;
  padding-top: 5%;
}

/*-------------------------------------------------------------------------MisionPosiciones*/
#MisionSequiadometro .seqAll{
  overflow: hidden;
}
#MisionSequiadometro .seqIzq{
  width: 40%;
  float: left;
}
#MisionSequiadometro .seqDer{
  width: 60%;
  float: left;
  line-height: 1;
}

#MisionSequiadometro .seqLogo img{
  width: 100%;
}
#MisionSequiadometro .seqPersonaje{
  position: relative;
}
#MisionSequiadometro .seqPersonaje img{
  width: 100%;
  position: relative;
  top:-25px;
  display: block;
}



#MisionSequiadometro .seqTitulo{
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  text-align: center;
  font-weight: bold;
  padding-top: 5%;
  padding-bottom: 5%;
}
#MisionSequiadometro .seqImagenFondo img{
  width: 100%;
}
#MisionSequiadometro .seqImagen{
  position: relative;
}
#MisionSequiadometro .seqCarita{
  position: absolute;
  top: 59%;
  left: 32.8%;
  width: 35%;
  overflow: visible;
}
#MisionSequiadometro .seqCarita img{
  width: 100%;
}
#MisionSequiadometro .seqAguja{
  position: absolute;
  top: 49%;
  left: 50%;
  width: 1%;
  height: 1%;
  overflow: visible;
  transform: rotate(0deg);
}
#MisionSequiadometro .seqAgujaIn{
  width: 1950%;
  position: relative;
  top: -3000%;
  left: -1000%;
}
#MisionSequiadometro .seqAgujaIn img{
  width: 100%;
}
#MisionSequiadometro .seqEstado{
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  text-align: center;
  font-weight: bold;
  padding-top: 5%;
}

@media (max-width: 980px) {
  #MisionSequiadometro .seqIzq{
    display: none;
  }
  #MisionSequiadometro .seqDer{
    width: 100%;
  }
}

/*-------------------------------------------------------------------------MisionAvatar*/

#MisionAvatar .cadaFila input.texto{
  width: 98%;
  height: 25px;
}
#MisionAvatar .cadaFila input.radio{
  
}
#MisionAvatar .imagenes .cadaFila{
  display: inline-block;
  width: 20%;
}

#MisionAvatar .miFoto{
  width:50%;
  border:2px solid #15DDFF;
  border-radius:10px;
  background-color:#5518E2;
  display: inline-block;
  margin-left: 2%;
  overflow: hidden;
}

#MisionAvatar input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px; /* Desired width */
  height: 20px; /* Desired height */
  border: 2px solid #ccc; /* Border for the circle */
  border-radius: 50%; /* Makes it a circle */
  background-color: #fff; /* Background color when unchecked */
  /* Add other styles like margin, position, etc., as needed */
}

#MisionAvatar input[type="radio"]:checked {
  background-color: #15DDFF; /* Background color when checked */
  border-color: #15DDFF; /* Border color when checked */
  /* Add styles for the inner dot/fill if desired, e.g., using a pseudo-element */
}

#MisionAvatar .mensaje{
  font-size: 2em;
  color: #D36BF9;
  line-height: 1;
  text-align: center;
}