#ui-bar,#ui-overlay{display:none;}
body{font-family: 'Space Mono', monospace;background-color:#000 !important;}
body.nivel1{background:url(../images/fondos/fondo_nivel1.jpg) left top no-repeat;background-size:cover;}
#story{margin:0 !important;}
#passages{width:900px;max-width:860px !important;height:485px !important;margin:0 auto;position:relative;padding:20px;overflow:hidden;}
.carta{width:210px;height:350px;position:absolute;left:20px;top:20px;}
#cartamama{background:url(../images/cartas/carta_mama.png); left top no-repeat;background-size:cover;}
#cartapapa{background:url(../images/cartas/carta_papa.png); left top no-repeat;background-size:cover;}
#cartaabue{background:url(../images/cartas/carta_abuela.png); left top no-repeat;background-size:cover;}
.n1confirmacion #passages{width: 650px;}
.n1confirmacion #cartapapa{left:250px;}
.n1confirmacion #cartaabue{left:480px;}
.n1confirmacion #dialogo{width:100%;}
.n1confirmacion #dialogotexto{width: 500px;}
.n1confirmacion #dialogotext{width:500px;}
.n1confirmacion #dialogo .accion{position:absolute;bottom: 10px;right: 26px;font-size:.8em;}
.n1confirmacion #dialogo .accion:nth-of-type(2){right:100px;}
#passage-prevencion #dialogo{width:800px}
#passage-prevencion #dialogotext{width:650px}
#passage-prevencion .accion{right: 10px;position: absolute;bottom: 10px;}
#atributos{width:300px;height:330px;position:absolute;left:240px;top:20px;background-color:rgba(0,0,0,.7);padding:10px;line-height: 1.5;font-size:.85em;}
#roles{width:330px;height:480px;position:absolute;top:20px;left:564px;background-color:rgba(0,0,0,.7);}
#roles div button{width: 100px;height: 100px;background-color: transparent;border: none;text-indent: -9999px;}
.director{background:url(../images/medallas/director.png) left top no-repeat;}
.transporte{background:url(../images/medallas/transporte.png) left top no-repeat;}
.contribucion{background:url(../images/medallas/contribucion.png) left top no-repeat;}
.apoyo{background:url(../images/medallas/apoyo.png) left top no-repeat;}
.venta{background:url(../images/medallas/venta.png) left top no-repeat;}
.muchos{background:url(../images/medallas/muchos.png) left top no-repeat;}
.coordinador{background:url(../images/medallas/coordinador.png) left top no-repeat;}
.acercamiento{background:url(../images/medallas/acercamiento.png) left top no-repeat;}
.negociacion{background:url(../images/medallas/negociacion.png) left top no-repeat;}
.sabe{background:url(../images/medallas/sabe.png) left top no-repeat;}
.conocimiento{background:url(../images/medallas/conocimiento.png) left top no-repeat;}
.asesoramiento{background:url(../images/medallas/asesoramiento.png) left top no-repeat;}
#roles .director{position:absolute;top:20px;left:7px;}
#roles .transporte{position:absolute;top:20px;left:112px;}
#roles .contribucion{position:absolute;top:20px;left:217px;}
#roles .apoyo{position:absolute;top:135px;left:7px;}
#roles .venta{position:absolute;top:135px;left:112px;}
#roles .muchos{position:absolute;top:135px;left:217px;}
#roles .coordinador{position:absolute;top:250px;left:7px;}
#roles .acercamiento{position:absolute;top:250px;left:112px;}
#roles .negociacion{position:absolute;top:250px;left:217px;}
#roles .sabe{position:absolute;top:365px;left:7px;}
#roles .conocimiento{position:absolute;top:365px;left:112px;}
#roles .asesoramiento{position:absolute;top:365px;left:217px;}
#roles div{opacity:.6;}
#roles div:hover{opacity:1;transition:opacity .3s linear, transform .2s ease-in;transform: scale(1.35,1.35);}
.cartaroles{position:absolute;top:275px;left:20px;width:300px;}
.cartaroles br{display:none;}
.cartaroles div{width:60px;height:60px;text-indent:-999px;display:inline-block;background-size:cover;}
#dialogo{position:absolute;background-color:rgba(0,0,0,.7);bottom:5px;height:145px;width:540px;}
#dialogotext{position:absolute;width:420px;left:120px;top:10px;font-size:.8em;}
#dialogotext strong{font-size:1.2em;}
#avatar{position:absolute;width:100px;height:100px;background:url(../images/avatar_ernesto.png) left top no-repeat;background-size:cover;top:10px;left:10px;}
#passage-resultadoplan #dialogotext{width:550px !important;}
#passage-resultadoplan .action button{padding:6px 15px !important;bottom: 2px;right: 27px;}
#passage-resultadoplan .accion{bottom:7px !important;right:47px !important;}
#passage-resultadoplan .accion button{padding:5px 15px !important;}

#passage-dadosn3 .action{bottom: 26px;
    position: absolute;
    right: 111px;}

.daditos{filter: hue-rotate(350deg);}
.dadosn3 .daditos{filter: hue-rotate(180deg);}
.dadosn2 .daditos{filter: hue-rotate(270deg);}

body.historia{background:#000;}
body.hace3meses #passages{background:url(../images/historia/hace_tres_meses.jpg) left top no-repeat;}
body.enelpresente #passages{background:url(../images/historia/en_el_presente.jpg) left top no-repeat;}
body.telefono #passages{background:url(../images/historia/telefono.jpg) left top no-repeat;}
body.llamada .llamando_mama{position:absolute;width:100%;height:100%;background:url(../images/historia/mama_llamando.jpg) left top no-repeat;top:0;left:0;}
body.llamada .llamando_papa{position:absolute;width:100%;height:100%;background:url(../images/historia/papa_llamando.jpg) left top no-repeat;;top:0;left:0;}
body.llamada .llamando_abuela{position:absolute;width:100%;height:100%;background:url(../images/historia/abuela_llamando.jpg) left top no-repeat;top:0;left:0;}
body.inicionivel3 #passages{background:url(../images/historia/inicio_nivel_3.jpg) left top no-repeat;}
body.final1 #passages{background:url(../images/historia/final_1.jpg) left top no-repeat;}
body.final2 #passages{background:url(../images/historia/final_2.jpg) left top no-repeat;}
body.final3 #passages{background:url(../images/historia/final_3.jpg) left top no-repeat;}


body.historia a, body.disclaimer a, body.activaraudio a{left: 40%;bottom: 20%;position: absolute;background:#000;color:#fff;padding:10px 15px;text-transform:uppercase;font-weight:bold;letter-spacing:2px;border:#e5b400 1px solid !important;}
body.historia a:hover, body.disclaimer a:hover, body.activaraudio a:hover{background:#e5b400;text-decoration:none;}
body.disclaimer a{left:20px !important;bottom:15%}
#passage-activarsonido{text-align:center;width:450px;margin:0 auto;padding-top: 200px;}

body.nivel2{background:url(../images/fondos/fondo_nivel2.jpg) left top no-repeat;background-size:cover;}
.secuestradores{background-color:rgba(0,0,0,.7);position:absolute;width:600px;height:300px;top:40px;left:300px;}
body.nivel2 #dialogo{width:100%;}
body.nivel2 #dialogotext{width:700px;}
.secuestradores p{font-size:1.4em;text-align:center;width:600px;}
.secuestradores div{width:110px; height:116px;position:absolute;top:140px;opacity:.6;}
.secuestradores div:hover{opacity:1;transform: scale(1.2,1.2);}
.secuestradores div button{text-indent:-9999px;border:none;background:transparent;width:100%;height:100%;position:absolute;top:0}
.secuestradores .cartel{background:url(../images/medallas/secuestrador_cartel.png) left top no-repeat;background-size:cover;left:20px;}
.secuestradores .profesional{background:url(../images/medallas/secuestrador_profesional.png) left top no-repeat;background-size:cover;left:130px;}
.secuestradores .novato{background:url(../images/medallas/secuestrador_novato.png) left top no-repeat;background-size:cover;left:240px;}
.secuestradores .policia{background:url(../images/medallas/secuestrador_policia.png) left top no-repeat;background-size:cover;left:350px;}
.secuestradores .trafico{background:url(../images/medallas/secuestrador_trafico.png) left top no-repeat;background-size:cover;left:460px;}
body.nivel2 #dialogo button{position: absolute; top: 90px;left: 120px;font-size: .9em;}
body.nivel2 #dialogo [data-passage="DadosN2"]{left:700px;}
.accion button,.action button{background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:10px 15px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;}
.accion button:hover,.action button:hover{background:#e5b400 !important;text-decoration:none !important;}
.cartasecuestrador{width:190px;height:324px;position:absolute;top:40px;left:50px;}
.carta_buchona{background:url(../images/cartas/carta_buchona.png) left top no-repeat;background-size:cover;}
.carta_fresa{background:url(../images/cartas/carta_fresa.png) left top no-repeat;background-size:cover;}
.carta_norte{background:url(../images/cartas/carta_norte.png) left top no-repeat;background-size:cover;}
.carta_distorcion{background:url(../images/cartas/carta_distorcion.png) left top no-repeat;background-size:cover;}
.carta_desconocido{background:url(../images/cartas/carta_desconocido.png) left top no-repeat;background-size:cover;}
.carta_naco{background:url(../images/cartas/carta_vecino.png) left top no-repeat;background-size:cover;}
.cartasecuestrador p{position: absolute; top: 194px;width: 100%;text-align: center;text-transform: uppercase;font-weight: bold;letter-spacing: 2px;left: -3px;}
#negociador{position:absolute;top: -16px;left: 300px;width:50px;}
#negociador button{text-indent:-9999px;width:50px;height:50px;background:url(../images/asesor.png) left top no-repeat;animation: blink 1s linear infinite alternate-reverse;background-size:cover;width:80px;height:110px;border:none;}
#negociador button:hover{border:2px #e5b400 solid;}
#negociador p{position:absolute;width:420px;font-size:.7em;left:90px;top:50px;opacity:0;}
#negociador:hover p{opacity:1;transition:opacity .5s linear;}
#passage-escucharnuevamente #dialogo{bottom:200px;} 
#passage-escucharnuevamente [data-passage="contestar"]{top:64px !important;}
#passage-escucharnuevamente button{padding: 5px 5px !important;}
#passage-escucharnuevamente [data-passage="QuienEs"]{top:105px !important;}



#guiaboton{position:absolute;top:12px;left: 820px;width:50px;}
#guiaboton button{text-indent:-9999px;width:50px;height:50px;background:url(../images/guia..jpg) left top no-repeat;background-size:cover;width:80px;height:110px;border:none;animation: blink 1s linear infinite alternate-reverse}
#guiaboton button:hover{border:2px #e5b400 solid;}
.guia{z-index:100;position:absolute;top:0;left:80px;width:800px;height:500px;background:url(../images/guia_completa.png) left top no-repeat;background-size:cover;}
.guia button{background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:5px 10px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;font-size:.7em;position:absolute;right:0;}
.guia button:hover{background:#e5b400 !important;text-decoration:none !important;}


body.dados{background:#000;}
body.dados #dialogo{width:100%;}
body.dados #dialogotext{width:700px;}
.daditos{width:300px;height:300px;position:absolute;top:50px;}
.daditos:first-of-type{left:150px;}
.daditos:nth-of-type(2){left:450px;}
.dadorandom{background:url(../images/dados/Dado.gif) left top no-repeat;background-size:cover;width:180px;height:180px;text-indent:-9999px;position: absolute;top: 30px;}
.dado1{background:url(../images/dados/dado_1.jpg) left top no-repeat;background-size:cover;width:180px;height:180px;text-indent:-9999px;position: absolute;top: 30px;}
.dado2{background:url(../images/dados/dado_2.jpg) left top no-repeat;background-size:cover;width:180px;height:180px;text-indent:-9999px;position: absolute;top: 30px;}
.dado3{background:url(../images/dados/dado_3.jpg) left top no-repeat;background-size:cover;width:180px;height:180px;text-indent:-9999px;position: absolute;top: 30px;}
.dado4{background:url(../images/dados/dado_4.jpg) left top no-repeat;background-size:cover;width:180px;height:180px;text-indent:-9999px;position: absolute;top: 30px;}
.dado5{background:url(../images/dados/dado_5.jpg) left top no-repeat;background-size:cover;width:180px;height:180px;text-indent:-9999px;position: absolute;top: 30px;}
.dado6{background:url(../images/dados/dado_6.jpg) left top no-repeat;background-size:cover;width:180px;height:180px;text-indent:-9999px;position: absolute;top: 30px;}
.tirar button{position: absolute;
    top: 230px;left:12px;
    font-size: .7em;background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:10px 15px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;}
.tirar button:hover{background:#e5b400 !important;text-decoration:none !important;}
body.dados button[data-passage="InicioNivel3"],body.dados button[data-passage="InicioNivel2"], body.dados button[data-passage="GameOver"], button[data-passage="Final"]{
    position: absolute;
    right: 113px;
    top: 85px;}
.sorpresa{text-align:center;position:absolute;z-index:100;width:820px;height:500px;top:60px;background:rgba(0,0,0,.95);}
.sorpresa div p{position:absolute;width:500px;height:200px;top:100px;text-align:left;left:300px;}
.sorpresa div .sorpresafoto{width:150px;height:150px;position:absolute;top:110px;left:130px;}
.sorpresa .geo .sorpresafoto{background:url(../images/medallas/geo.png) left top no-repeat;background-size:100%;}
.sorpresa .emocional .sorpresafoto{background:url(../images/medallas/emocional.png) left top no-repeat;background-size:100%;}
.sorpresa .judas .sorpresafoto{background:url(../images/medallas/judas.png) left top no-repeat;background-size:100%;}
.sorpresa .milicia .sorpresafoto{background:url(../images/medallas/milicia.png) left top no-repeat;background-size:100%;}
.sorpresa .muchos .sorpresafoto{background:url(../images/medallas/muchos.png) left top no-repeat;background-size:100%;}
.sorpresa .palabraclave .sorpresafoto{background:url(../images/medallas/palabra_clave.png) left top no-repeat;background-size:100%;}
.sorpresa .passwords .sorpresafoto{background:url(../images/medallas/plan_password.png) left top no-repeat;background-size:100%;}
.sorpresa .recursos .sorpresafoto{background:url(../images/medallas/plan_recursos.png) left top no-repeat;background-size:100%;}
.sorpresa .sinpalabraclave .sorpresafoto{background:url(../images/medallas/sin_palabraclave.png) left top no-repeat;background-size:100%;}
.sorpresa .tabu .sorpresafoto{background:url(../images/medallas/tabu.png) left top no-repeat;background-size:100%;}
.sorpresa .tokens .sorpresafoto{background:url(../images/medallas/tokens.png) left top no-repeat;background-size:100%;}

#carpeta{position:absolute;top:0;left:0;}
body.nivel3{background:url(../images/fondos/fondo_nivel3.jpg) left top no-repeat;background-size:cover;}
#plan{top: 0;width: 880px;position: absolute; height: 540px;background:url(../images/libreta.png) left top no-repeat;background-size:cover;}
#plan .planes button{background-color:transparent;border:none;color:#000000;width:375px;text-align:left;font-size:.76em;top:0;position:absolute}
#plan .planes button:hover{background-color:transparent;}
#plan .planes{position:absolute;left: 46px;top: 28px;width:50px;height:50px;}
#plan .planes button{padding-left: 54px;}
#plan .planes:nth-of-type(2){top: 120px;}
#plan .planes:nth-of-type(3){top: 210px;}
#plan .planes:nth-of-type(4){top: 270px;}
#plan .planes:nth-of-type(5){top: 350px;}
#plan .planes{background:url(../images/cuando_unchecked.png) left top no-repeat;}
#plan .checked{background:url(../images/cuandro_checked.png) left top no-repeat;}
body.nivel3 #dialogo{left: 350px;bottom:0}
body.nivel3  #dialogo button{    position: absolute;font-size: .7em;padding: 6px 15px !important; top: 80px !important;left: 357px !important;background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;}
body.nivel3  #dialogo button:hover{background:#e5b400 !important;text-decoration:none !important;}
.nivel3 #dialogo{height:115px;}


@keyframes espiral {
    from {transform:rotate(0)}
    to {transform:rotate(-360deg)}
  }

@keyframes blink{
    from{filter: brightness(.3);}
    to{filter: brightness(1);}
}

body.gameover{overflow:hidden;background:#F9615D !important;}
body.finalfeliz{overflow:hidden;background:#78CFEA !important;}
body.finalfeliz #story::before{background:url(../images/espiral_azul.svg) center center no-repeat!important;}
body.gameover #story::before{content:"";width:300%;height:300%;left:-100%;top:-100%;position:absolute;background:url(../images/espiral.svg) center center no-repeat;background-size:100%;animation: espiral 20s linear infinite}
#carpeta{width:100%;height:100%;color:#000;background:url(../images/folder.svg) center top no-repeat;background-size:75%;position:absolute;top:0;height:100%;}
#carpeta strong{position:absolute;right:150px;top:50px;}
#carpeta p:first-of-type{position:absolute;left:50%;width:300px;line-height:1.4;top:70px;font-size:.8em;}
#carpeta p:last-of-type{position:absolute;top:440px;right:140px;font-size:.8em;}
body.gameover span{background:#000 !important;}
.fotofinal{    width: 180px;
    height: 160px;
    position: absolute;
    top: 80px;
    left: 180px;background-size:100%;}
#fotofinal1{background:url(../images/finales/final_1.png) left top no-repeat;background-size:100%;} 
#fotofinal2{background:url(../images/finales/final_2.png) left top no-repeat;background-size:100%;} 
#fotofinal3{background:url(../images/finales/final_3.png) left top no-repeat;background-size:100%;} 
#fotofinal4{background:url(../images/finales/final_4.png) left top no-repeat;background-size:100%;} 
#fotofinal5{background:url(../images/finales/final_5.png) left top no-repeat;background-size:100%;} 
#fotofinal6{background:url(../images/finales/final_6.png) left top no-repeat;background-size:100%;} 
#fotofinal7{background:url(../images/finales/final_7.png) left top no-repeat;background-size:100%;} 
#fotofinal8{background:url(../images/finales/final_8.png) left top no-repeat;background-size:100%;} 
#fotofinal9{background:url(../images/finales/final_9.png) left top no-repeat;background-size:100%;} 
#fotofinal10{background:url(../images/finales/final_10.png) left top no-repeat;background-size:100%;} 
#fotofinal11{background:url(../images/finales/final_11.png) left top no-repeat;background-size:100%;} 
#fotofinal12{background:url(../images/finales/final_12.png) left top no-repeat;background-size:100%;} 
#fotofinal13{background:url(../images/finales/final_13.png) left top no-repeat;background-size:100%;} 
#fotofinal14{background:url(../images/finales/final_14.png) left top no-repeat;background-size:100%;} 
#fotofinal15{background:url(../images/finales/final_15.png) left top no-repeat;background-size:100%;} 
#fotofinal16{background:url(../images/finales/final_16.png) left top no-repeat;background-size:100%;} 
#fotofinal17{background:url(../images/finales/final_17.png) left top no-repeat;background-size:100%;} 
#fotofinal18{background:url(../images/finales/final_18.png) left top no-repeat;background-size:100%;} 
#fotofinal19{background:url(../images/finales/final_19.png) left top no-repeat;background-size:100%;} 
#fotofinal20{background:url(../images/finales/final_20.png) left top no-repeat;background-size:100%;} 

body.gameover button{position:absolute;bottom:0;right:140px;font-size:.9em;background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:6px 15px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;}
body.gameover button:hover{background:#e5b400 !important;text-decoration:none !important;}

h1{text-indent:-9999px;position:absolute;top:100px;width:800px;height:800px;background:url(../images/codigosecuestro_logo.gif) left top no-repeat;}

video{position:absolute;top:-100px; z-index:1}
.video a{   
    position: absolute;
bottom:20px;
right:10px;
z-index:2;
font-size:.9em;background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:6px 15px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;
   }
.video a:hover{background:#e5b400 !important;text-decoration:none !important;}
.video #passages{background:url(../images/loading.gif) center center no-repeat;}

#passage-tryagain{background:url(../images/gameover.png) left top no-repeat;width:800px;height:600px;text-align:center !important;padding-top:300px !important;}
#passage-tryagain a{font-size:.9em;background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:6px 15px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;line-height: 3;}
#passage-tryagain a:hover{background:#e5b400 !important;text-decoration:none !important;}

#passage-victoria{background:url(../images/sobrevivio.png) left top no-repeat;width:800px;height:600px;text-align:center !important;padding-top:278px !important;}
#passage-victoria a{font-size:.9em;background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:6px 15px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;line-height: 3;}
#passage-victoria a:hover{background:#e5b400 !important;text-decoration:none !important;}

#passage-iniciojuego h1{top: -130px !important;transform: scale(.8);}
#passage-iniciojuego video{right: 0;position: absolute;top: 0;}
#passage-materialextra video{right: 0;position: absolute;top: 0;z-index:-1;}

.portada h1{color:#000;width:600px;}
.portada a{font-size:.9em; font-size: 1.3em;background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:6px 15px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;line-height: 3;}
.portada a:hover{background:#e5b400 !important;text-decoration:none !important;}

.portada a{     position: absolute;
    bottom: 40px;
    padding: 0px 30px !important;font-size:.9em;left:160px}

    .portada [data-passage="MaterialExtra"]{left:300px !important;}
.portada [href="./pdf/paraiso_las_dunas.pdf"]{border:none !important;background:transparent !important;font-size:.6em !important;bottom:-5px;text-align:left !important;}
.portada [href="./pdf/paraiso_las_dunas.pdf"]:hover{background:transparent !important;text-decoration:underline !important;}
.popupx.action{position:absolute;position: absolute;
    bottom: 135px;right: 2px;}

.material p{font-family: 'Space Mono', monospace;font-weight:bold;font-size:1.2em;margin-bottom:0;}
.material [href="./pdf/paraiso_las_dunas.pdf"]:after{display:none !important;}
.material #passage-materialextra{text-align:left !important;    padding-top: 70px;}
.material [href="./pdf/paraiso_las_dunas.pdf"] p{margin:0 !important;}
.material a{font-size:.9em !important; font-size: 1.3em;background:#000 !important;border:#e5b400 1px solid !important;color:#fff !important;padding:6px 15px !important;text-transform:uppercase !important;font-weight:bold !important;letter-spacing:2px !important;line-height: 3;}
.material a:hover{background:#e5b400 !important;text-decoration:none !important;}

#advertencia{background:url(../images/disclaimer.png) left top no-repeat;width:128px;height:128px;text-align:center;}
.disclaimer{background:#e5b400 !important;color:#000;}
.disclaimer p{margin:0 !important;}
.disclaimer a{bottom:0 !important;}
.d-amarillo a:hover{border:#000000 1px solid !important;color:#000 !important;}
.d-rojo{background:#F9615D !important;font-weight:bold;}