html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,  del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
  margin:0;
  padding:0;
  text-decoration:none;
  outline:none;
  border:none;
  font-size: 100%;
  list-style:none;
  font-family: "Bariol", Helvetica, Arial, sans-serif;
  /*! color:#000; */
  -webkit-text-size-adjust:none;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
}
*, *:before, *:after {
    box-sizing: border-box;
}
:focus { outline: 0;}
:link, :visited, :hover, :active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}
u{  text-decoration: underline; }


html{
  position: relative;
  top:0px;
  left: 0px;
  width:100%;
  min-height:100%;
  background-color: #fff !important;
}

body{
  background: #160b31;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/
/*********************************************************************************************/




#loading{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000 url(../../codigo/img/loading.gif) no-repeat center;
  background-size: 300px;
  z-index: 1000000000;
}

#deviceOrientation{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#281743 url(../../images/05_offline_fondo.png); no-repeat center;
  background-size: cover;
  z-index: 100000000;
}
#deviceOrientation > .box{
  position:fixed;
  left:0;
  right: 0px;
  bottom: 0px;
  margin: auto;
}
#deviceOrientation > .box > .texto{
  position:absolute;
  top: 0px;
  left:0;
  right: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#deviceOrientation > .box > .texto > span{
  display: block;
  text-align: center;
  color: #00ff00;
  text-align: center;
  cursor: default;
}
#deviceOrientation > .box > .personaje{
  position:absolute;
  left:0;
  right: 0px;
  bottom: 0px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/06_pantalla_rotate_personaje.png);
}


.boxPantallas{
  max-width: 100%;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/03_fondo_interactivo.png);
}

.boxPantallas > .pantallas{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="introduccion"]{ background-color: transparent; }
.boxPantallas > .pantallas[data-pantalla="mission"]{ background-color: transparent; }
.boxPantallas > .pantallas[data-pantalla="verify"]{ background-color: transparent; }
.boxPantallas > .pantallas[data-pantalla="unblock"]{ background-color: transparent; }
.boxPantallas > .pantallas[data-pantalla="challenge"]{ 
  background-color: transparent; 
  background-image: url(../../images/04_fondo_challenge_intro.png);
}




.boxPantallas > .pantallas[data-pantalla="introduccion"] > div.content_centro{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="introduccion"] > div.content_centro > div.box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: #00ff3f;
  z-index: 1;
}
.boxPantallas > .pantallas[data-pantalla="introduccion"] > div.content_centro > div.box > font{
  color: #f248b8;
}

.boxPantallas > .pantallas[data-pantalla="introduccion"] > div.content_centro > .fondo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../images/02_introduccion_centro.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="introduccion"] > div.content_centro > .btn_play{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-image: url(../../images/btn_play.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  animation: welcome_play 2s infinite ease-in-out;
}
.boxPantallas > .pantallas[data-pantalla="introduccion"] > div.content_centro > .btn_play:hover{
  cursor: pointer;
  filter: brightness(1.5);
  transform: scale(1.05);
}
@keyframes welcome_play {
  0% {
    filter: none;
  }
  25% {
  }
  50% {
    filter: brightness(1.6);
    transform: scale(1.03);
  }
  75% {
  }
  100% {
    filter: none;
  }
}





.boxPantallas > .pantallas[data-pantalla="mission"] > div.content_centro_box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.boxPantallas > .pantallas[data-pantalla="mission"] > div.content_centro{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="mission"] > div.content_centro > div.box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: #00ff3f;
  z-index: 1;
}
.boxPantallas > .pantallas[data-pantalla="mission"] > div.content_centro > div.box > font{
  color: #f248b8;
}

.boxPantallas > .pantallas[data-pantalla="mission"] > div.content_centro > .fondo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../images/02_introduccion_centro.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.boxPantallas > .pantallas[data-pantalla="mission"] .box_brazo{
  position: absolute;
  margin: auto;
  overflow: hidden;
  transition: 1.5s ease;
}
.boxPantallas > .pantallas[data-pantalla="mission"] .box_brazo.seleccionado{
  animation: brazoSeleccionado 2s infinite ease-in-out;
}
@keyframes brazoSeleccionado {
  0% {
    filter: none;
  }
  25% {
  }
  50% {
    filter: brightness(3);
    transform: scale(1.03);
  }
  75% {
  }
  100% {
    filter: none;
  }
}

.boxPantallas > .pantallas[data-pantalla="mission"] .box_brazo > div{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}
.boxPantallas > .pantallas[data-pantalla="mission"] .box_brazo.verify > div{  background-image: url(../../images/02_mission_verify_brazo.png);  }
.boxPantallas > .pantallas[data-pantalla="mission"] .box_brazo.unblock > div{  background-image: url(../../images/02_mission_unblock_brazo.png);  }
.boxPantallas > .pantallas[data-pantalla="mission"] .box_brazo.challenge > div{  background-image: url(../../images/02_mission_challenge_brazo.png);  }
.boxPantallas > .pantallas[data-pantalla="mission"] .box_brazo.special_tip > div{  background-image: url(../../images/02_mission_special_brazo.png);  }


.boxPantallas > .pantallas[data-pantalla="mission"] .btn{
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn svg{
  position: absolute;
  top: 0px;
  left: 0px;
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn .fondo{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn.btn_verify .fondo{
  background-image: url(../../images/02_mission_verify_box.png);
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn.btn_unblock .fondo{
  background-image: url(../../images/02_mission_unblock_box.png);
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn.btn_challenge .fondo{
  background-image: url(../../images/02_mission_challenge_box.png);
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn.btn_special_tip[data-num="3"] .fondo{
  background-image: url(../../images/02_mission_special_box_n3.png);
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn.btn_special_tip[data-num="4"] .fondo{
  background-image: url(../../images/02_mission_special_box_n4.png);
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn.disabled{
  filter: grayscale(100%);
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn.seleccionado{
  transform: scale(1.05);
  filter: brightness(1.2);
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn:not(.disabled):hover{
  cursor: pointer;
  transform: scale(1.05);
  filter: brightness(2);
}
.boxPantallas > .pantallas[data-pantalla="mission"] .btn > font{
  position: absolute;
  color: #8fffa4;
  font-weight: bold;
  z-index: 1;
  font-size: 1em;
}







.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_imagen{
  position: absolute;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_imagen .marco{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-image: url(../../images/02_verify_imagen.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; 
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_imagen .img{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center; 
}

.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links{
  position: absolute;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .titulo{
  position: relative;
  width: 100%;
  background-image: url(../../images/02_verify_panel_titulo.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: left;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .titulo > span{
  color: #fff;
  font-size: 1em;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content{
  position: relative;
  width: 100%;
  background-image: url(../../images/02_verify_panel_cuadricula.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: table;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row{
  display: table-row;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell{
  display: table-cell;
  vertical-align: middle;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.icono{
  text-align: center;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.icono > div{
  text-align: center;
  display: inline-block;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.icono[data-secure="true"] > div{
  background-image: url(../../images/02_verify_panel_icon_web_fail.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.icono[data-secure="false"] > div{
  background-image: url(../../images/02_verify_panel_icon_web_ok.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.nombre{
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.nombre > span{
  color: #fff;
  display: inline-block;
  width: 100%;
  font-weight: bold;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.nombre > span.disabled{
  filter: grayscale(100%);
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.nombre > span:not(.disabled):hover{
  cursor: pointer;
  color: #22fff2;
  text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000, 2px 2px 2px #000;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.estado{
  text-align: center;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.estado:not(.visitado){
  filter: grayscale(100%);
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.estado > div{
  position: relative;
  display: inline-block;
  background-image: url(../../images/02_verify_panel_visit.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.estado > div > span{
  position: absolute;
  font-size: 1em;
  color: #ffde00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_links .content > div.row > div.cell.estado:not(.visitado) > div > span{
  display: none;
}


.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious{
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url(../../images/02_verify_suspicious.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center; 
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious > .pregunta{
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: left;
  color: #fff;
  font-size: 1em;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious > .btn{
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: left;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious > .btn.disabled{
  filter: grayscale(10%);
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious > .btn:not(.disabled):hover{
  cursor: pointer;
  transform: scale(1.05);
  text-shadow: -2px -2px 2px #b81681, 2px -2px 2px #b81681, -2px 2px 2px #b81681, 2px 2px 2px #b81681;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious > .btn > span{
  color: #4fef6d;
  font-size: 1em;
  font-weight: bold;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious > .btn.seleccionado > span{
  position: relative;
  display: block;
  background-image: url(../../images/02_verify_suspicious_triangulo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 1%;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious > .btn > font{
  position: relative;
  display: block;
  margin-left: 1%;
  color: #4fef6d;
  font-weight: bold;
  font-size: 1em;
}
.boxPantallas > .pantallas[data-pantalla="verify"] > div.content_centro_box .box_suspicious > .btn.no_seleccionado > font{
  opacity: 0.5;
}








.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box{
  /*! background-color: green; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .titulo{
  position: absolute;
  width: 100%;
  text-align: center;
  color: #4fef6d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .code_unblocked{
  position: absolute;
  z-index: 1;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .code_unblocked > span{
  color: #22fff2;
  position: absolute;
  z-index: 1;
  font-size: 1em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo{
  position: absolute;
  display: table;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row{
  display: table-row;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row:hover{
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(255,222,0,0.4976190305223652) 20%, rgba(255,222,0,0.5032212714187237) 60%, rgba(0,0,0,0) 100%);
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.numero{
  /*! background-color: green; */
  text-align: center;
  color: #4fef6d;
  font-weight: bold;
  font-size: 1.2em;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.texto{
  /*! background-color: purple; */
  text-align: left;
  color: #fff;
  font-size: 0.85em;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.texto > input{
  background-color: rgba(63,87,130,0.9);
  border: none;
  color: #ffffff;
  box-shadow: 0px 0px 5px 3px rgba(63,87,130,0.7);
  margin: 0px 0.5%;
  padding: 3px 2px;
  font-size: 0.9em;
  text-align: center;
  min-width: 30px;
  width: auto;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.texto > input.done{
  background-color: #2ecc71;
  color: #2c5105;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.texto > input.fail{
  background-color: #e74c3c;
  color: #51050a;
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled{
  /*! background-color: orange; */
  text-align: center;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled > div{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled > div > span{
  font-size: 0.7em;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled[data-estado="filled"] > div{
  background-image: url(../../images/02_unblock_carpeta_filled.png);
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled[data-estado="filled"] > div > span{
  color: #4fef6d;
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled[data-estado="proceed"] > div{
  background-image: url(../../images/02_unblock_carpeta_proceed.png);
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled[data-estado="proceed"] > div > span{
  color: #ff00a8;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled[data-estado="proceed"] > div:not(.disabled):hover > span{
  color: #22fff2;
  text-shadow: -2px -2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000, 2px 2px 2px #000;
  cursor: pointer;
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled[data-estado="fail"] > div{
  background-image: url(../../images/02_unblock_carpeta_fail.png);
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.filled[data-estado="fail"] > div > span{
  color: #e74c3c;
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.unblock{
  /*! background-color: red; */
  position: relative;
  text-align: right;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.unblock > div.candado{
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: relative;
  z-index: 10;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.unblock > div.candado[data-estado="block"]{
  background-image: url(../../images/icon_candado_cerrado.png);
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.unblock > div.candado[data-estado="unblock"]{
  background-image: url(../../images/icon_candado_abierto.png);
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.unblock > div.line{
  position: absolute;
  margin: auto;
  z-index: 1;
  background-color: #763e89;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.unblock > div.line.h{
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 50.8%;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row > .cell.unblock > div.line.v{
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  height: 100%;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row:first-child > .cell.unblock > div.line.v{
  height: 50%;
  top: initial !important;
  left: 0px !important;
  bottom: 0px !important;
  right: 0px !important;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row:not(.completado):last-child > .cell.unblock > div.line.v{
  height: 50%;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: initial;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .box_interactivo > .row.completado:last-child > .cell.unblock > div.line.v{
  height: 160%;
  transition: 2s ease;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: initial;
}




.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .secret_word_box{
  position: absolute;
  z-index: 2;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .box{
  position: absolute;
  display: inline-block;
  background-image: url(../../images/02_unblock_secret_word_box.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .box .icon{
  position: absolute;
  background-image: url(../../images/02_unblock_secret_word_icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .box .texto{
  position: absolute;
  color: #22fff2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: bold;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .box input{
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
  background-color: rgba(63,87,130,0.9);
  border: none;
  color: #ffffff;
  box-shadow: 0px 0px 5px 3px rgba(63,87,130,0.7);
  padding: 3px 2px;
  font-size: 0.7em;
  text-align: center;
  min-width: 30px;
  width: auto;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .box input.done{
  background-color: #2ecc71;
  color: #2c5105;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .box input.fail{
  background-color: #e74c3c;
  color: #51050a;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .btn_check{
  position: absolute;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../../images/02_unblock_secret_word_btn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .btn_check > span{
  color: #05e9e1;
  font-weight: bold;
  font-size: 0.9em;
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .btn_check:not(.disabled):hover{
  cursor: pointer;
  filter: brightness(1.5);
  transform: scale(1.05);
}
.boxPantallas > .pantallas[data-pantalla=unblock] > div.content_centro_box .secret_word_box > .btn_check.disabled{
  filter: grayscale(50%);
}

.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .code_unlocked{
  position: absolute;
  z-index: 1;
  background-image: url(../../images/02_unblock_secret_word_box_final.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="unblock"] > div.content_centro_box .code_unlocked > span{
  color: #22fff2;
  position: absolute;
  z-index: 1;
  font-size: 1em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}




.boxPantallas > .pantallas[data-pantalla="challenge"] > div.content_centro{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .pantallas[data-pantalla="challenge"] > div.content_centro > div.box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  color: #00ff3f;
}
.boxPantallas > .pantallas[data-pantalla="challenge"] > div.content_centro > div.box > font{
  color: #f248b8;
}


.boxPantallas > .pantallas[data-pantalla="challenge"] > div.content_centro > .fondo{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../images/02_introduccion_centro.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}













.boxPantallas > .botonera{
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: 250;
  padding-left: 0.5%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}
.boxPantallas > .botonera > .btn{
  position: relative;
  bottom: -5px;
  float: left;
  width: 19.7%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/_navegacion_INTRO.png);
}
.boxPantallas > .botonera > .btn[data-btn="introduccion"]{  background-image: url(../../images/botonera_btn_introduccion.png);  }
.boxPantallas > .botonera > .btn[data-btn="mission"]{  background-image: url(../../images/botonera_btn_mission.png);  }
.boxPantallas > .botonera > .btn[data-btn="verify"]{  background-image: url(../../images/botonera_btn_verify2.png);  }
.boxPantallas > .botonera > .btn[data-btn="unblock"]{  background-image: url(../../images/botonera_btn_unblock2.png);  }
.boxPantallas > .botonera > .btn[data-btn="challenge"]{  background-image: url(../../images/botonera_btn_challenge.png);  }
.boxPantallas > .botonera > .btn.disabled{
  opacity: 0.25;
  cursor: not-allowed;
}
.boxPantallas > .botonera > .btn:not(.disabled):hover{
  cursor: pointer;
  top: 0px;
  filter: brightness(1.5);
}
.boxPantallas > .botonera > .btn.activo{
  cursor: pointer;
  filter: brightness(2) !important;
}


.boxPantallas > .btn_next{
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 270;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPantallas > .btn_survival{
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 250;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/btn_survival_kit_nombre.png)
}
.boxPantallas > .btn_survival > svg{
  position: relative;
  top: 5%;
}
.boxPantallas > .btn_next.disabled,
.boxPantallas > .btn_survival.disabled{
  filter: grayscale(100%);
}
.boxPantallas > .btn_next:not(.disabled):hover,
.boxPantallas > .btn_survival:not(.disabled):hover{
  cursor: pointer;
  transform: scale(1.05);
  filter: brightness(2);
}







.boxGame{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 500;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/_game/04_fondo_challenge_game.png);
}

.boxGame > .bkg_robot{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxGame > .bkg_troll{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.boxGame > .bkg_robot[data-estado="idle"]{ background-image: url(../../images/_game/Robot_idle.gif);  }
.boxGame > .bkg_robot[data-estado="attack1"]{ background-image: url(../../images/_game/Robot_attack.gif);  }
.boxGame > .bkg_robot[data-estado="attacked1"]{ background-image: url(../../images/_game/Robot_attacked1.gif);  }
.boxGame > .bkg_robot[data-estado="attacked2"]{ background-image: url(../../images/_game/Robot_attacked2.gif);  }

.boxGame > .bkg_troll[data-estado="idle"]{ background-image: url(../../images/_game/HackTroll_idle.gif);  }
.boxGame > .bkg_troll[data-estado="attack1"]{ background-image: url(../../images/_game/HackTroll_attack1.gif);  }
.boxGame > .bkg_troll[data-estado="attack2"]{ background-image: url(../../images/_game/HackTroll_attack2.gif);  }
.boxGame > .bkg_troll[data-estado="attacked"]{ background-image: url(../../images/_game/HackTroll_attacked.gif);  }

.boxGame > .box_header{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 20;
  text-align: center;
}
.boxGame > .box_header > .content{
  position: relative;
  height: 100%;
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxGame > .box_header > .content > .zonas{
  position: relative;
  width: auto;
  height: 100%;
  display: inline-block;
}
.boxGame > .box_header > .content > .zonas > .punto,
.boxGame > .box_header > .content > .zonas > .punto_vacio{
  position: relative;
  width: auto;
  height: 100%;
  float: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxGame > .box_header > .content > .zonas > .punto[data-estado="on"]{  background-image: url(../../images/_game/punto_on.png); }
.boxGame > .box_header > .content > .zonas > .punto[data-estado="off"]{  background-image: url(../../images/_game/punto_off.png); }

.boxGame > .box_header > .content > .zona_barra{
  position: relative;
  width: auto;
  height: 100%;
  display: inline-block;
}
.boxGame > .box_header > .content > .zona_barra > .barra{
  background: rgb(21,210,194);
  background: linear-gradient(90deg, rgba(21,210,194,1) 50%, rgba(255,255,255,1) 100%);
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  border: 1px solid #491d66;
  overflow: hidden;
}
.boxGame > .box_header > .content > .zona_barra > .barra .progress{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 52%;
  height: 100%;
  transition: 2s;
  background: rgb(229,157,215);
  background: linear-gradient(90deg, rgba(229,157,215,1) 0%, rgba(117,92,179,1) 94%, rgba(48,165,183,1) 97%, rgba(21,236,215,0.4982114641853933) 100%);

}
.boxGame > .content{
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  z-index: 10;
}
.boxGame > .content > .box_robot{
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
  margin: auto;
  /*! background-color: rgba(200,300,4,0.3); */
}
.boxGame > .content > .box_troll{
  position: relative;
  width: 50%;
  height: 100%;
  float: left;
  margin: auto;
  /*! background-color: rgba(200,3,4,0.3); */
}
.boxGame > .content .zona_game{
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  z-index: 10;
}
.boxGame > .content .zona_game > ul{
  width: 100%;
  height: 100%;
  text-align: center;
}
.boxGame > .content .zona_game > ul > li,
.boxGame > .content .zona_game > ul > li.ui-sortable-placeholder{
  color: #fff;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  font-size: 1.5em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border:1px solid rgba(255,255,255,0.5);
}
.boxGame > .content .zona_game > ul > li:not(.disabled):hover{
  cursor: pointer;
}


.boxGame > .content .box_robot .zona_game > ul > li{
  background-color: rgba(100,175,186,0.7);
}
.boxGame > .content .box_robot  .zona_game > ul > li:not(.disabled):hover{
  background-color: rgba(100,175,186,1);
}
.boxGame > .content .box_troll .zona_game > ul > li{
  background-color: rgba(197,87,190,0.7);
}
.boxGame > .content .box_troll  .zona_game > ul > li:not(.disabled):hover{
  background-color: rgba(197,87,190,1);
}

.boxGame > .content .zona_game > ul > li.ui-sortable-placeholder{
  background-color: rgba(000,000,000,0.5) !important;
  border-radius: 100%;
}



.boxGame > .content .btn_check{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
.boxGame > .content .btn_check:after{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/_game/btn_check_puntomira.png);
}
.boxGame > .content .btn_check:not(.disabled):hover{
  cursor: pointer;
  transform: scale(1.1);
}


.boxGame > .content .btn_check:not(.disabled):after{
  animation: btnCheck_ani 4s infinite ease-in-out;
}
@keyframes btnCheck_ani {
  0% {
    filter: none;
    top: 0%;
    left: 0%;
  }
  25% {
    top: -5%;
    left: -5%;
  }
  50% {
    top: 10%;
    left: 10%;
    filter: brightness(1.6);
    transform: scale(1.03);
  }
  75% {
    top: -5%;
    left: -5%;
  }
  100% {
    filter: none;
    top: 0%;
    left: 0%;
  }
}





header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  margin:0 0;
  z-index: 270;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/01_header_fondo.png);
}

header .name_page{
  top: 0px;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  text-align: center;
}
header .name_page > span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: #319cbf;
  font-weight: bold;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/01_header_luzverde.png);
}

header .subtitulo{
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  text-align: center;
}
header .subtitulo > span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  color: #f248b8;
  font-weight: bold;
}



header .btn_audio{
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 10;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
}
header .btn_audio[data-estado="on"]{  background-image: url(../../images/icon_audio_on.png);  }
header .btn_audio[data-estado="off"]{  background-image: url(../../images/icon_audio_off.png);  }
header .btn_audio:not(.disabled):hover{
  cursor: pointer;
  opacity: 1;
  filter: brightness(1.5);
}




.portadaBox{
  background-color: #96bd5d;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 200;
  cursor: pointer !important;
  
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/00_portada_fondo.jpg);
}
.portadaBox > .titulo{
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  text-align: center;
  z-index: 1;
}
.portadaBox > .titulo > span{
  background-color: rgba(0,203,209,0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
  border: 0px solid transparent;
  border-radius: 30%;
  color: #fff;
  font-weight: bold;
  box-shadow: 0px 0px 23px 5px rgba(0,203,209,0.7);
  text-shadow: -3px -3px 3px #000, 3px -3px 3px #000, -3px 3px 3px #000, 3px 3px 3px #000;
  
}

.portadaBox .portada{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/00_portada.png);
}
.portadaBox .logo{
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/00_portada_logo.png);
}
.portadaBox .logo > div{
  position: absolute;
  margin: auto;
  z-index: 10;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/00_portada_logo_img.png);
}
.portadaBox .logo > div:hover{
  cursor: pointer;
  opacity: 0.7;
}
.portadaBox .btnPlay{
  position: absolute;
  z-index: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/00_portada_play.png);
}
.portadaBox .btnPlay:hover{
  right: -0.8% !important;
}




.boxVideoHome{
  background-color: #160b31;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 300;
}
.boxVideoHome > video{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 95%;
  height: 95%;
}
.boxVideoHome > .boxPoster{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(22,11,49,0.5);
  background-size: 20%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/btn_play.png);
}
.boxVideoHome > .boxPoster:hover{
  cursor: pointer;
  background-size: 21%;
}

.boxVideoHome > .btn_close{
  opacity: 0.8;
  position: absolute;
  z-index: 10;
  top: 0px;
  right: 0px;
  width: 95%;
  height: 95%;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/btn_close.png);
}
.boxVideoHome > .btn_close:hover{
  opacity: 1;
  transform: scale(1.1)
}








.boxVideoIntroduccion{
  background-color: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 260;
  background:#000 url(../../codigo/img/webquest.gif) no-repeat center;
  background-size: 200px;
}
.boxVideoIntroduccion > iframe{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 100%;
  height: 100%;
}


.boxVideoIntroduccion > .btn_close{
  opacity: 0.8;
  position: fixed;
  z-index: 300;
  top: 0px;
  right: 0px;
  width: 95%;
  height: 95%;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/btn_close.png);
  display: none !important;
}
.boxVideoIntroduccion > .btn_close:hover{
  opacity: 1;
  transform: scale(1.1)
}




.boxVideoChallenge{
  background-color: #160b31;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 260;
}
.boxVideoChallenge > video{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 95%;
  height: 95%;
}
.boxVideoChallenge > .boxPoster{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(22,11,49,0.5);
  background-size: 20%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/btn_play.png);
}
.boxVideoChallenge > .boxPoster:hover{
  cursor: pointer;
  background-size: 21%;
}

.boxVideoChallenge > .btn_close{
  opacity: 0.8;
  position: absolute;
  z-index: 10;
  top: 0px;
  right: 0px;
  width: 95%;
  height: 95%;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/btn_close.png);
  display: none !important;
}
.boxVideoChallenge > .btn_close:hover{
  opacity: 1;
  transform: scale(1.1)
}



.boxOffline{
  background-color: #160b31;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 300;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/05_offline_fondo.png);
}
.boxOffline > .btn_close{
  opacity: 0.8;
  position: absolute;
  z-index: 10;
  top: 0px;
  right: 0px;
  width: 95%;
  height: 95%;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/btn_close.png);
}
.boxOffline > .btn_close:hover{
  opacity: 1;
  transform: scale(1.1)
}
.boxOffline > .box {
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
}
.boxOffline > .box > .personaje{
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/05_offline_personaje.png);
}
.boxOffline > .box > .content {
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
.boxOffline > .box > .content > .linea {
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/05_offline_lnea.png);
}
.boxOffline > .box > .content > .texto {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boxOffline > .box > .content > .texto > span{
  color: #00ff00;
  text-align: center;
  cursor: default;
}
.boxOffline > .box > .content > .btn {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/05_offline_btn.png);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: welcome_play 2s infinite ease-in-out;
}
.boxOffline > .box > .content > .btn > span{
  color: #00f4f8;
}
.boxOffline > .box > .content > .btn:hover{
  cursor: pointer;
  filter: brightness(1.5);
  transform: scale(1.05);
}






.boxGame_win{
  background-color: #160b31;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 300;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/05_offline_fondo.png);
}
.boxGame_win > .box {
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
}
.boxGame_win > .box > .personaje{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/07_game_personaje_win.gif);
}
.boxGame_win > .box > .content {
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
.boxGame_win > .box > .content > .texto {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boxGame_win > .box > .content > .texto > span{
  color: #00ff00;
  text-align: center;
  cursor: default;
}
.boxGame_win > .box > .content > .btn {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/07_game_btn_win.png);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: welcome_play 2s infinite ease-in-out;
}
.boxGame_win > .box > .content > .btn > span{
  color: #00f4f8;
}
.boxGame_win > .box > .content > .btn:hover{
  cursor: pointer;
  filter: brightness(1.5);
  transform: scale(1.05);
}











.boxGame_lose{
  background-color: #160b31;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 300;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/05_offline_fondo.png);
}
.boxGame_lose > .box {
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
}
.boxGame_lose > .box > .personaje{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/07_game_personaje_lose.gif);
}
.boxGame_lose > .box > .content {
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
.boxGame_lose > .box > .content > .linea {
  position: absolute;
  z-index: 1;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/07_game_btn_lose_line.gif);
}
.boxGame_lose > .box > .content > .texto {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boxGame_lose > .box > .content > .texto > span{
  color: #fff;
  text-align: center;
  cursor: default;
}
.boxGame_lose > .box > .content > .btn {
  position: absolute;
  z-index: 2;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/07_game_btn_lose.png);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: welcome_play 2s infinite ease-in-out;
}
.boxGame_lose > .box > .content > .btn > span{
  color: #00f4f8;
}
.boxGame_lose > .box > .content > .btn:hover{
  cursor: pointer;
  filter: brightness(1.5);
  transform: scale(1.05);
}











.boxCreditos{
  background-color: rgba(000,000,000,0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 210;
}
.boxCreditos > .box{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 500px;
  height: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  cursor: pointer;
}

.boxCreditos > .box > .close{
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../../images/00_creditos_cerrar.png);
}
.boxCreditos > .box > div{
  font-family: initial !important;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
 font-size: 0.65em;
}
.boxCreditos > .box > div *{
  font-family: 'OpenSans-Regular' !important;
  color: #011e41;
}



.boxPopLinks{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(22,11,49,0.8);
  z-index: 300;
}
.boxPopLinks > .box{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 50%;
  height: 50%;
  z-index: 300;
  overflow: hidden;
  border: 1px solid #00ffff;
}
.boxPopLinks > .box > .header{
  position: relative;
  z-index: 1;
  box-shadow: 0px 3px 17px 1px #0C7877;
}
.boxPopLinks > .box > .header > .top{
  position: relative;
  background-image: url(../../images/popup_links_header_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPopLinks > .box > .header > .top > .btn_close{
  position: absolute;
  z-index: 1;
  background-image: url(../../images/popup_links_icon_close.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPopLinks > .box > .header > .top > .btn_close:hover{
  cursor: pointer;
  transform: scale(1.05);
  filter: brightness(2);
}
.boxPopLinks > .box > .header > .explorador{
  background-color: #fff;
  position: relative;
  box-shadow: 0px 0px 5px 1px #fff;
}
.boxPopLinks > .box > .header > .explorador > .iconos_1{
  position: absolute;
  background-image: url(../../images/popup_links_explorador_1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPopLinks > .box > .header > .explorador > .iconos_2{
  position: absolute;
  background-image: url(../../images/popup_links_explorador_2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPopLinks > .box > .header > .explorador > .url{
  position: absolute;
  background-color: #edf6f7;
  background-image: url(../../images/popup_links_url_block.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
  box-shadow: inset 0px 0px 5px 1px rgba(000,000,000,0.2);
}
.boxPopLinks > .box > .header > .explorador > .url[data-fake="true"] .icon_alert{
  display: block;
}
.boxPopLinks > .box > .header > .explorador > .url > .icon_alert{
  display: none;
  background-image: url(../../images/popup_links_url_alert.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  float: left;
}
.boxPopLinks > .box > .header > .explorador > .url > .icon_alert:hover{
  cursor: pointer;
  transform: scale(1.05);
  filter: brightness(1.2);
}
.boxPopLinks > .box > .header > .explorador > .url > .cartel{
  position: absolute;
  background-image: url(../../images/popup_links_url_alert_cartel.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.boxPopLinks > .box > .header > .explorador > .url > .cartel:hover{
  cursor: pointer;
  transform: scale(1.05);
  filter: brightness(0.9);
}
.boxPopLinks > .box > .header > .explorador > .url > .cartel > .titulo{
  position: absolute;
  color: #00e5ff;
  font-size: 0.8em;
}
.boxPopLinks > .box > .header > .explorador > .url > .cartel > .texto{
  position: absolute;
  color: #000000;
  font-size: 0.8em;
}

.boxPopLinks > .box > .header > .explorador > .url > font{
  font-size: 0.65em;
  float: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.boxPopLinks > .box > iframe#frameURL{
  background-color: #160b31;
  position: relative; 
  background:#000 url(../../codigo/img/webquest.gif) no-repeat center;
  background-size: 200px;
}
.boxPopLinks > .box > iframe#frameURL::-webkit-scrollbar {
    width: 10px;
    background: transparent;
}
.boxPopLinks > .box > iframe#frameURL::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #6b6a6a;
}