/* FONTS */



@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Anonymous Pro'), local('AnonymousPro'), url(font/Zhfjj_gat3waL4JSju74E3n3cbdKJftHIk87C9ihfO8.woff2) format('woff2'), url('font/AnonymousPro-Regular.ttf')  format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Anonymous Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Anonymous Pro Bold'), local('AnonymousPro-Bold'), url(font/WDf5lZYgdmmKhO8E1AQud9CbUiP4h8l_SeFbysZT7Cg.woff2) format('woff2'), url('font/AnonymousPro-Bold.ttf')  format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}









/* RESETS, CHROME */

body  {
  text-rendering: optimizeLegibility;
  font-family:'Anonymous Pro';
  margin:0;
  padding:0;
  font-size: 16px;
  overflow:hidden;
  color: #fff;
  /* transition:background 1s ease-in-out,color 1s ease-in-out;*/
  transition: background 0.5s,color 0.5s;
  background: #000000;
  background-size: contain;
  background-position: center center;
  height: 100vh;
}

* {box-sizing:border-box;}

::-webkit-input-placeholder {color: inherit; }
::-moz-placeholder {color: inherit; }
:-ms-input-placeholder {color: inherit; }

:placeholder-shown {opacity: 0.7; }

::selection {background-color:#1863ff !important;}














/* HUD BASICO */

#starfield {position: fixed !important;overflow:hidden;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}
#starfield_fade {display:none;}

#screen {position: fixed;top: 0;left: 0;right: 0;z-index:1;}
#screen:after {content:"";position: fixed;top: 3em;left: 0em;right: 0em;bottom: 0em;border:solid 1px;pointer-events: none;display: none;}
#screen.empty:after {border:dashed thin rgba(255, 255, 255, 0.25);}
#screen.muted {display:none;}


.bar {position: fixed;top: 2em;overflow: visible;/* animation:cathode-on-bar 3s linear; *//* -webkit-animation:cathode-on-bar 3s linear; */transition:opacity 0.5s;z-index: 1;/* width: 45%; */}
.warping .bar {opacity:0.2;pointer-events: none;}
.bar.left {left: 2.5em;}
.bar.right {right: 2.5em;text-align: right;}
.bar a {padding: 0 0.5em;text-decoration: none;}
.bar a:hover {}
body.intro #screen, body.intro .bar,body.intro-animating .bar {opacity:0;pointer-events: none;animation:none;-webkit-animation:none;}

#editar {display: none;width: 3.5em;padding: 0;margin: -1.2em 0 0 -1.5em;height: 3.5em;vertical-align: top;text-align: center;border-radius: 50%;}
#editar.on {display: inline-block;}

#title {text-decoration:none;padding: 0;}
#title:hover {text-decoration:underline;}


#nav {animation:cathode-on 1s linear;-webkit-animation:cathode-on 1s linear;border: solid thin; width: 10vw; height: 10vw; bottom: 1vw; right: -2.5vw; background: #000; z-index: 1; }


#menu { animation:cath 1s linear;}
#menu a:hover,#menu a:focus {background:#fff;color:#000;}

#hudmenu {cursor:pointer;padding: 1em;display: inline-block;margin: -1em -1em -1em -0.5em !important;}
#hudmenu:hover {animation: blink 0.1s infinite linear;}
#menu span.hudonly {display:none;}
#menu a.hudonly {display:none;}
body.hud .hudhide {display:none !important;}
body.hud #menu {display:none;top: 4em;text-align: right;width: auto;border: solid 1px;}
body.hud #menu.on {display:block;}
body.hud #menu a {display:block;padding: 0.6em 1em;}
body.hud #menu a.hudsemi {/* margin-left:1em; */float: right;}
body.hud #menu span.hudonly {display:inline;}
#hud {display:none; animation:cath 1s linear;}
#hud>* {margin-left:0.25em;}
body.hud #hud {display:block;}
.hudico {display: inline-block; width: 1.25em; height: 1.25em; margin: -0.25em 0 -0.25em 0.1em; }
body.nuevosecreto .secretoscount {animation:brillo 1s linear infinite;}


#areas {position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow: hidden;}
.area {display:none;transition: transform 0.5s cubic-bezier(0.71, 0, 0.26, 1),opacity 0.5s;position: fixed;top: 0;left: 0;right: 0;bottom: 0;overflow: auto;perspective: 700px;}
.area.on {}













/* MAPA */

#mapa {bottom: 2em;transition: all 0.4s cubic-bezier(0.56, -0.19, 0.32, 1.63);right: 2em;position: fixed;display: none;pointer-events: none;z-index: 2;}
/*#mapa:before,#mapa:after {content:"";position: absolute;border-top: solid 1px;top: 50%;width: 106%;left: -3%;}
#mapa:after {top: -3%; left: 50%; height: 106%; width: auto; border-left: solid 1px; }*/
#mapa.on {bottom: 2em;right: 2em;pointer-events: all;display: block;animation: cath 1s linear;transform-origin: bottom right !important;}
#mapavp {width: 100px;height: 100px;border: solid 1px;border-radius: 50px;position: relative;z-index: 1;transition: all 0.4s cubic-bezier(0.56, -0.19, 0.32, 1.63);overflow: hidden;bottom: -1em;right: -1em;}
#mapa:hover,#mapa.zoom {bottom: -7.4em;right: -7.4em;}
#mapa:hover #mapavp,#mapa.zoom #mapavp {width: 420px;height: 420px;border-radius: 50px 50px 0 50px;bottom: 150px;right: 150px;}
#mapa:hover #mapain,#mapa.zoom #mapain {margin: 200px 0 0 195px;}
#mapain {position: relative;margin: 39px 0 0 35px;transition: margin 0.4s cubic-bezier(0.56, -0.19, 0.32, 1.63);}
#mapa .a {width: 1.5em;height: 1.5em;border: none;position: absolute;display: block;padding: 0;text-align: center;line-height: 1.5em;text-decoration: none;}
#mapa .a:hover {}
#mapa:hover .a.on,#mapa.zoom .a.on {animation: blink 1s infinite linear;z-index: 1;pointer-events: none;}
#mapa .a.vacio {}
#mapa .a:after {content:"\e910";font-family: 'nl111' !important;}
#mapa .a.vacio:after {content:"\e90c";opacity:0.2;}
#mapa .a.on:after { }
#mapa .a:hover:after {animation: blink 0.1s infinite linear; margin: 4px; }











/* RADIO */

#radio {bottom: 1em;transition: all 0.4s cubic-bezier(0.56, -0.19, 0.32, 1.63);left: 1em;position: fixed;display: none;pointer-events: none;z-index: 2;width: 100px;height: 100px;border-radius: 50px;overflow: hidden;background: transparent !important;border: solid 1px;}
#radio.on {pointer-events: all;display: block;animation: cath 1s linear;transform-origin: bottom right !important;}
#radio button {
    position: absolute;
    top: 55%;
    padding: 0;
    left: 50%;
    width: 30px;
    border-radius: 50%;
    height: 30px;
    line-height: 1.4em;
    background: none;
    color: inherit;
    transition: all 0.3s;
    /* font-size: 150%; */
    /* border: solid 1px; */
}

#radioonoff {
    transform: translateX(-100%);
}
#radio button:hover {
    animation: blink 0.1s infinite linear;
    /* box-shadow: 0 0 2px #fff,0 0 2px #fff,0 0 2px #fff; */
}
#radio:before {content: ".................................................................";position: absolute;left: 0;right: 0;top: -1%;height: 51%;word-break: break-word;overflow: hidden;display: block;text-align: center;line-height: 0.65em;/* border-bottom: solid 1px; */}
#radiotick {
    position: fixed;
    bottom: 2em;
    left: 130px;
    white-space: pre;
}













/* EDITOR */

#editor {background: #fff;position: fixed;top: 0;left: 0;right: 0;bottom: 0em;padding: 0;/* text-align:right; *//* color: #000; *//* line-height: 1.5em; */z-index: 3;/* transition: transform 0.2s cubic-bezier(0.78, -0.43, 0.77, 0.94); *//* transform-origin: top left; *//* transform: scale(0); *//* pointer-events: none; */display: none;}
#jsoneditor {height: 90%;}
#editor.on {/* transform:none; *//* pointer-events: all; *//* transition: transform 0.3s cubic-bezier(0.09, 1.08, 0.64, 1.07); */display: block;}
#jsoneditor .jsoneditor-menu {display:none;}
#editorhtml {
    position: absolute;
    left: 1%;
    width: 70%;
    top: 1%;
    bottom: 1%;
    border: solid 1px;
    font-size: 125%;
}
#editortemplates{
    padding: 2% 3%;
    overflow: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
#editortemplates .template {
    border: solid 1px;
    width: 29.9%;
    margin: 1% 1%;
    cursor: pointer;
}
#editortemplates .template:hover,
#editortemplates .template:focus {
    animation: blink 0.075s infinite linear;
}
#editoreditor {}
#editoroptions {
    position: absolute;
    right: 1%;
    width: 27%;
    top: 1%;
    bottom: 1%;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.campo {
    margin: 0 0 1.5em;
    clear: both;
}
.campo.semi {
    width: 50%;
    float: left;
    clear: none;
    text-align: center;
}
.campo input {
    color: inherit;
    padding: 0.7em;
}
.campo input[type="color"] {
    width: 3em;
    padding: 0;
    height: 3em;
    border-radius: 50%;
    overflow: hidden;
    -webkit-appearance: none;
    vertical-align: middle;
}input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}
.campo textarea {
    color: inherit;
    padding: 0.7em;
    font-size: 80%;
    white-space: pre-wrap;
    height: 10em;
}
.campo input[type="checkbox"] {
    transform: scale(2.5);
    width: auto;
    margin: 1em 10%;
    vertical-align: middle;
}
form.campo {}
form.campo input {
    width: 40%;
    padding: 0.95em;
    float: left;
    text-align: center;
    margin: 0 0 0 9%;
}
form.campo button {
    width: 50%;
    float: left;
}
.campo select {
    color: inherit;
    padding: 0;
}
.campo select option {
    padding: 0.5em;
}
#editoractions {margin: 1em 0 0;}
#editoractions button {
    width: 100%;
    border: solid 1px;
}


#uploads {
    flex: 1;
    border: dashed 1px;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: all 0.3s ease-in-out;
}
#uploads.dz-drag-hover {border:dashed 0.5em;}
.upload.upload-btn {align-items: center;justify-content: center;cursor: pointer;border: solid 1px;}
.upload {
    border-bottom: solid 1px;
    display: flex;
    position: relative;
    height: 3.5em;
    min-height: 3.5em;
}
.upload-img {
    width: 15%;
    height: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    margin-left: 2%;
}
.upload-img img {max-width: 100%;max-height: 100%;width: auto;height: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.upload-url {
    flex: 1;
    padding: 0 5%;
    display: flex;
    align-items: center;
}
.upload-x {}
.upload-error {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #fff;
    color: #000;
    animation: zoominout linear 5s;
    opacity: 0;
    display: none;
}
[data-dz-errormessage]{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.dz-success-mark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    animation: zoominout linear 5s;
    display: none;
}
.dz-progress{position: absolute;}
.dz-upload {}
.upload-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 7.5%;
}
.upload-x, .upload-insert {
  cursor:pointer;
  display: block;
  /* flex: 1; */
  padding: 3%;
  text-align: center;
}
.upload-x:hover,.upload-insert:hover,.upload-btn:hover {animation:blink linear 0.09s infinite;}











/* INTROS */

.entrar {background: #fff; color: #000; text-decoration: none; width: 7em; height: 7em; display: -webkit-flex; display: flex; margin: 1em auto 0.5em; -webkit-align-items: center; -webkit-justify-content: center; align-items: center; justify-content: center; border-radius: 4em; transition: all 0.4s cubic-bezier(0.16, 0.62, 0.58, 1); }
.entrar:hover {transform: scale(1.1); }
.entrar:active {transform: scale(0.8); }

.finitud {padding: 2em 20% 1em; border: solid 1px; border-left: none; border-right: none; }

#intro {transition: transform 2s cubic-bezier(0.93, -0.02, 0.76, -0.08);transform: scale(9);position: absolute;left: -5%;top: 0%;width: 110%;height: 110%;font-size: 2vh;display:none;background: url(img/intro-bg.gif) center center;background-size: cover;}
body.intro #intro {transform: none; }
body.intro-animating #intro {display:block; }
body.intro #introbg {
    z-index: 1;
}
body.intro-animating #intro .puerta.izq {transform: none;animation: intro-abrir-izq 2.1s cubic-bezier(0.34, 1.72, 0, 0.69);}
body.intro-animating #intro .puerta.der {transform: none;animation: intro-abrir-der 2.1s cubic-bezier(0.34, 1.72, 0.43, 0.77);}
body.intro #intro .puerta.izq {animation: intro-puerta-izq 0.7s infinite;}
body.intro #intro .puerta.der {animation: intro-puerta-der 0.7s infinite;}


#introbg {height: 40%;position: absolute;left: 0;width: 100%;top: 30%;perspective: 800px;}


#introbg .puerta {position: absolute;height: 144%;bottom: 0%;animation: none;transition: transform 2s cubic-bezier(0.22, 0.19, 0.13, 0.99);}
#introbg .puerta.izq {right: 50%;transform-origin: center left;transform: rotateY(80deg);}
#introbg .puerta.der {left: 50%;transform-origin: center right;transform: rotateY(-80deg);}

#intro a#ouro {display:none;position: absolute;background: url(img/ouro_01.gif) center center no-repeat;background-size: auto 41%;width: 20%;height: 60%;top: 22%;left: 39.9%;transform: scale(0.8);cursor: pointer;}
body.intro #intro a#ouro:hover {background-image: url(img/ouro_02.gif);background-size: auto 53%;}
body.intro #intro a#ouro:active {transform: scale(0.7);}
body.intro #intro a#ouro {display:block;}

body #intro #ourout {position: absolute;left: 50%;bottom: -53%;height: 110%;pointer-events: none;transform: translateX(-50%);z-index: 2;opacity: 1;}
body.intro #intro #ourout {opacity: 0;}

#boot {position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 5vw; display: none; }
.bootsc3 {position: absolute; bottom: 0; }

.cath {animation:cath linear 4s infinite !important;}

#screen.intro:after {animation:cathode-on 1s ease-in-out;-webkit-animation:cathode-on 1s ease-in-out;}
body.intro #screen:after {opacity: 0;transform: scale(0.1);pointer-events: none;}
body.intro .area,body.intro-animating .area {display:none;}

#introtxt {position:absolute;left: 50%;width: 20em;height: 5.8em;bottom: 0;color: #e2e2e2;text-align: center;font-weight: 800;letter-spacing: 0.3em;font-size: 125%;white-space: pre-wrap;line-height: 1.5em;transform: translateX(-50%) rotateX(82deg) translateZ(-8.5em);word-wrap: break-word;word-break: break-all;overflow: hidden;text-shadow: 0px -3px 0px #636363;}

#introtitwrap {
    position: absolute;
    left: 0.1%;
    width: 100%;
    top: -60%;
    height: 64%;
    overflow: hidden;
    padding-top: 0.3em;
    pointer-events: none;
}

#introtitwrap .arch {}








/* ZONA FANTASMA */

/*body.zonafantasma {text-shadow:0px 0px 3px #fff,0px 0px 2px #fff;color:transparent;}*/
body.zonafantasma #menu {display:none;}
body.zonafantasma #mapa {pointer-events:none;}
body.zonafantasma #mapain {display:none;}
body.zonafantasma #mapavp {animation:zonafantasma1 0.25s linear infinite !important;background-image: url(img/zonafantasma3.gif) !important;background-size:auto !important;/*border: dashed thin rgba(255, 255, 255, 0.25);*/}

















/* SCREEN FRAMEWORK */


.area.on {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 5.5em 2.5em;
}
.area.on div {
    display: flex;
    min-height: min-content;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
}
.area.on>div{}

.area.on img {max-width: 100%;}

.area.on p {margin: 1em auto; }
.area.on p+p {margin: 0 auto 1em; }
.area.on [ticker]{white-space: pre-wrap; }

div[izq] {align-items:flex-start !important;}
div[der] {align-items:flex-end !important;}
div[llenar] {align-items:stretch !important;}

div[centro],div.centro,[cen] {justify-content:center !important;}
div[arr] {justify-content:flex-start !important;}
div[aba] {justify-content:flex-end !important;}

sep,[sep],.sep {padding: 1em;width: auto !important;}
exp,[exp],.exp {flex: 1;width: 100%;height: 100%;}
[margen],.margen {max-width: 42em !important;margin: 0 auto;}
[margen]>*,.margen>* {width:100%;}
[margen] img,.margen img {/* max-width: 100%; */}
img[ajustar],img.ajustar {max-width: 100%; max-height:100%;}
[centrar],.centrar{text-align: center;}
[justificar],.justificar{text-align: justify;}
[derecha],.derecha{text-align: right;}

[dialogo],.dialogo {width: auto !important;padding: 2em 2.5em;margin: 0.5em;text-align: center;}
[dialogo] p,.dialogo p {/* margin: 0em auto 2em !important; */}

cols {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:row;
}

cols[arr]{align-items:flex-start !important;}
cols[aba]{align-items:flex-end !important;}
cols[llenar] {align-items:stretch !important;}




/*
.area.on>*{border:solid 1px blue;}
.area.on>*>*{border:solid 1px cyan;}
.area.on>*>*>*{border:solid 1px lightblue;}
*/





a{color:inherit;outline:none;}

h1,h2,h3,h4,h5,h6 {font-size: 100%;letter-spacing: 0.075em;}
h1 {font-size: 200%;font-weight: normal;}
h2 {font-size: 150%;font-weight: normal;}

p {line-height: 1.25em;/* text-align: justify; */margin: 1em 0;}

big {font-size:200%;}
small {font-size:75%;}

ul {margin:0;padding:0;list-style-type: none;}
li {padding: 0 0 0.5em 2em;position: relative;}
li:before {content:"* ";position: absolute;left: 0;}

pre {text-align:left;display: inline-block;width: auto !important;}

hr {border: none;border-top: solid 1px #fff;margin: 2em;padding: 1px;width: 100%;}

em {animation:brillo linear infinite 2s;font-weight:normal;font-style: normal;}

key {
    border: solid 1px;
    height: 2.5em;
    width: 2.5em;
    display: inline-block;
    line-height: 2.5em;
    text-align: center;
    border-radius: 0.3em;
    animation: pulsate 1s infinite linear;
}



form {  width:100%;position:relative;transition:all 0.5s ease-in-out;}
form.wait {opacity:0.2;pointer-events:none;}
.response {background:#fff;color:#000;position:absolute;left:0;top:0;width:100%;height:100%;display: flex;align-items: center;justify-content: center;animation: zoominout 5s ease-in-out;padding:1em;}

input,textarea,select,button {font:inherit;border: double 1px;background:none;resize:none;outline:none;color: #fff;padding: 1em;width: 100%;height: 3.2em;vertical-align: text-bottom;}
label {border:solid 1px;display:inline-block;height:3.2em;vertical-align:bottom;padding: 0.9em;text-align: center;}
label input {height: 0.9em; }

.inlineform {display: flex;text-align: center;width: 100%;flex-direction: row;}
.inlineform input,.inlineform button,.inlineform select {flex: 1;display:inline-block;width: auto;}
.inlineform button {flex: 0.5;}

.btn,button {background:#fff;color:#000;text-decoration:none;padding: 1em;display:inline-block;border: none;font: inherit;/* margin: 1px; */}
.btn.neg,button.neg {background:none;color:inherit;border:solid 1px;}
.btn:hover, button:hover {animation: blink 0.08s infinite linear;cursor:pointer;}
/*.btn:focus, button:focus {animation: blink 0.08s infinite linear;cursor:pointer;}*/

.statusico {animation:brillo linear infinite 2s;font-size:400%;letter-spacing: -0.2em;}



.pag {padding: 0.5em; }
.pag.on {pointer-events: none; text-decoration: none; opacity: 0.5; }






.area.on .papelpa {flex:1;justify-content:center;perspective:700px;position:relative;animation: floating 5s infinite linear !important;-webkit-animation: floating 5s infinite linear !important;}
.papel {
    background-color:#fff;
    background-size: 100% 100% !important;
    font-size: 90%;
    transition: all 0.3s ease-in-out;
    transform: translateY(0%) translateZ(-1000px) rotateY(40deg) rotateX(55deg);
    color: transparent;
    position: relative;
    padding: 3em;
    outline: solid 2px black;
    outline-offset: -1px;
}
.papel:hover {
    animation:none;
    transform: translateZ(0px) translateY(0%) translateX(0%);
    transition: all 1s ease-in-out;
    color: #000;
    animation: none;
    filter:none !important;
}
.papel-1 {background-image:url(img/papel01.gif);}
.papel-2 {background-image:url(img/papel02.gif);}
.papel-3 {background-image:url(img/papel03.gif);}
.papel-4 {background-image:url(img/papel04.gif);padding: 3em 4em;}

img.papel {
    max-width:90vw;
    max-height:80vh;
    outline:none;
    padding: 0;
    background: none;
}
img.papel.foto {background:#fff;padding:2em;}
img.papel.polaroid {filter: contrast(0.3) brightness(1.5);background:#fff;padding:2em 2em 10em;}



.area.on div.libro {
    display: block;
    width: 70vw;
    height: 50vw;
    min-height: 50vw;
    position: relative;
    animation:zoomin 1s cubic-bezier(0, 0, 0.05, 0.99);
    overflow: visible;
    align-items: stretch;
}
.area.on div.pagina {position:absolute;height:100%;width:100%;perspective:800px;display: flex;overflow: visible;min-height: auto;align-items: stretch;}
.area.on div.pagina.on {z-index:1;/* display: block; */}
.area.on div.pizq, .area.on div.pder {
    border: solid 1px;
    position: absolute;
    height: 100%;
    top: 0;
    width: 50%;
    background: #000 center center;
    background-size: cover;
    padding: 2em;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0, 0, 0.02, 0.99);
    display: block;
    backface-visibility: hidden;
}
.area.on div.pizq.out, .area.on div.pder.out {transition:all 0.3s cubic-bezier(0.96, 0.01, 1, 1);}
.area.on div.pizq.out {transform:rotateY(90deg);}
.area.on div.pizq {border-radius: 1em 0 0 1em; transform-origin: center right; }
.area.on div.pder {border-radius: 0 1em 1em 0;right: 0;/* border-left: none; */transform-origin: center left;}
.area.on .pagina+.pagina .pder {border-left:none;}
.area.on .pder.out {transform: rotateY(-90deg);}
.area.on .pprox,.area.on .pprev {
    position: absolute;
    cursor:pointer;
    left: -3em;
    font-size: 150%;
    font-family: sans-serif;
    padding: 0.75em;
    top: 50%;
    margin-top: -1.25em;
    opacity: 0;pointer-events: none;transition:opacity 1s linear;
}
.area.on .pprox.on,.area.on .pprev.on {opacity:1;pointer-events: all;}
.area.on .pprox.on:hover,.area.on .pprev.on:hover {animation: blink 0.1s infinite linear;}
.area.on .pprox {right: -3em;left: auto;}
.area.on .pprev {}
.area.on .pmask {
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 4em;
    padding: 1em 2em;
    left: 0;
    right: 0;
    display: block;
    min-height: 100%;
}
.pmask form {
    flex: 1;
}
.pmask form+form {
}
.pmask form button {}
.pmask h1 {text-align:center;}

a.descubierto {display: block; text-align: center; padding: 0.5em;
}
a.descubierto:hover {background:#fff;color:#000;}







/* SPACE FRAMEWORK */



spa {
  position: absolute !important;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background:no-repeat center center;
  background-size:contain;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
  animation:fade 1s ease-out;
}

[fondo],[fondo="llenar"],[llenar],.fondo,.fondo-llenar,.llenar {background-size: cover !important;}
[fondo="ajustar"],[ajustar],.fondo-ajustar,.ajustar {background-size: contain !important;}
[fondo="real"],[fondo-real],[real],.fondo-real {background-size:initial !important;}
[fondo="ancho"],[fondo-ancho],[ancho],.fondo-ancho,.ancho {background-size:100% auto !important;}
[fondo="alto"],[fondo-alto],[alto],.fondo-alto,.alto {background-size:auto 100% !important;}
[ancla="s"],[ancla-s],.ancla-s {background-position:bottom center !important;}
[ancla="n"],[ancla-n],.ancla-n {background-position:top center !important;}
[ancla="e"],[ancla-e],.ancla-e {background-position:center right !important;}
[ancla="o"],[ancla-o],.ancla-o {background-position:center left !important;}
[ancla="so"],[ancla-so],.ancla-so {background-position:bottom left !important;}
[ancla="se"],[ancla-se],.ancla-se {background-position:bottom right !important;}
[ancla="ne"],[ancla-ne],.ancla-ne {background-position:top right !important;}
[ancla="no"],[ancla-no],.ancla-no {background-position:top left !important;}
[repetir],.repetir {background-repeat:repeat !important;}
[repetir="x"],.repetir-x {background-repeat:repeat-x !important;}
[repetir="y"],.repetir-y {background-repeat:repeat-y !important;}

/*
spa .plyr video {min-height: 100vh; min-width: 100vw; width: auto; height: auto;}
spa .plyr__video-wrapper,spa .plyr__video-wrapper iframe,spa .plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {padding:0;min-height: 100vh !important;min-width: 100vw !important;width: auto !important;height: auto !important;display: block !important;transform: none !important;}
spa .plyr--full-ui {padding:0;min-height: 100vh !important;min-width: 100vw !important;width: auto !important;height: auto !important;display: block !important;transform: none !important;}
*/


/* efectos css */


.ccw,[ccw],.gira,[gira],.rota,[rota] {animation:ccw 40s infinite linear;-webkit-animation:ccw 40s infinite linear;}
.cw,[cw] {animation:cw 40s infinite linear;-webkit-animation:cw 40s infinite linear;}

.flip-x,.flip,[flip="x"] {transform: rotateY(180deg) !important;-webkit-transform: rotateY(180deg) !important;}

.float,.flota,[flota] {animation: floating 5s infinite linear;-webkit-animation: floating 5s infinite linear;/* position:relative; */}

.parpadea,.blink,[parpadea],[blink] {animation: blink 1s infinite linear;}

.pulsa,.pulsar,.pulsate,[pulsa] {animation: pulsate 1s infinite linear;}

.brilla,.brillar,.brillate,[brilla] {animation: brilla 1s infinite cubic-bezier(0.18, 0, 0.83, 1);}

.fade,.aparece,[fade],[aparece] {animation: fadein 3s ease-out;}
.fade-1,.aparece-1,[aparece="1"] {animation: fadelay 1s ease-out;}
.fade-2,.aparece-2,[aparece="2"] {animation: fadelay 2s ease-out;}
.fade-3,.aparece-3,[aparece="3"] {animation: fadelay 3s ease-out;}



/* efectos js */

spa[data-tres] canvas {width:100% !important;height:100% !important;}
[data-tres] .escaneando {height: 75vh;width: 75vw;text-align: center;line-height: 75vh;animation: blink 0.8s infinite linear;}

/*.c {background-position:center center;background-size:cover;width: 20vw;height: 20vw;text-align: center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;border:solid 1px;border-radius: 50%;padding:1em;}
.c .label {text-align: center;}*/

[z] {position:absolute;left:50%;top:50%;}

.ascii {white-space:pre;text-align:left;width: auto;color: #999;overflow: visible;}

.arch {/* position: absolute; */ width: 55vh; height: 55vh; transform: translate(-50%,-50%); animation: ccw 45s linear infinite; display: block; margin: auto; }
.arch span {display: block; left: 50%; top: 0; position: absolute; padding-bottom: 97%; }

#zap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background: url(img/zap.gif) center center;
    background-size: contain;
    display: none;
    pointer-events: none;
}
#zap.on {
    animation: zap 0.5s cubic-bezier(0.33, 0.07, 0.44, 0.85);
    display: block;
    opacity: 0;
}






/* AREAS ESPECIFICAS */







/* #0 INICIO */

ul.selector {
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    justify-content: center;
    margin-left: -1em;
}
ul.selector li {padding: 0vh 0;/* height: 100%; */}
ul.selector li:before {display:none;}
ul.selector li a {text-decoration: none;display: block;padding: 1em 2em 1.5em;transition: background 0.2s,color 0.2s;}
ul.selector li a:hover {background: #fff; color: #000; } ul.selector li h2 {background: #fff;color: #000;padding: 0.3em 0.4em;display: inline-block;letter-spacing: 0.05em;margin: 0;}
ul.selector li a div {margin: 1em 0em 0;display: block;}

#hometop {margin: 0 auto 0 0;/* height: 80%; *//* flex: 1; */width: 53%;}
#ads {display: flex;justify-content: space-between;align-items: stretch;width: 100%;min-height: 13vw;max-height: 13vw;flex: 0;}
#ads .ad {border:solid 1px;display: block;width: 32%;background-size: cover;background-position: center center;background-repeat: no-repeat;}





/* #10 NACHO */

.area.on .nacho {
    position:absolute;
    width: 40em;
    height: 20em;
    min-height: 0;
    font-size:8px;
    display:block;
    text-align:center;
}
.area.on .nacho.anim {
    transition: all 1s cubic-bezier(0.29, 0.05, 0.68, 0.94) !important;
    pointer-events: none;
}
.area.on .nacho img {max-width:100%;margin-bottom:-3em;}
.area.on .nacho h1,.area.on .nacho p {width:100%;z-index:1;position:relative;}
.area.on .nacho h1 {display:none;margin-top: -0.5em; animation:fadein 0.2s;}
.area.on .nacho p {display: block;}
.area.on .nacho.on p {}
.area.on .nacho:hover h1, .area.on .nacho.on h1 {display:block;}
.area.on .nacho.on {
    transform:translate(-50%,-50%) !important;
    font-size: 16px !important;
    top: 50% !important;
    left: 50% !important;
    height: auto;
    width: 80vw;
    max-width:40em;
    overflow: visible;
    z-index:101 !important;
}
.area.on .nacho.off {
    opacity:0.15;
    font-size: 6px !important;
}





/* #18 LABS */

.area[id="18"] {justify-content: flex-start;}
.acceso {
    display: inline-grid;
    border: solid 1px;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin:0 0 2em;
    transition: filter 0.5s ease-in-out;
}
.acceso img {
    width: 100%;
}
.acceso img+img {
    position: absolute;
    display: none;
    opacity:0;
}
.acceso img.on {
    display: block;
    opacity:1;
    /* animation:fadein 0.1s linear; */
}
.acceso:hover {}
.acceso:hover img {}
.acceso:hover h2 {}
.acceso.off {
    filter: brightness(0.2);
    transition: filter 3s ease-in-out;
}


.area.on .acceso .info {background:#fff;color: #fff;text-decoration: none !important;display: block;padding: 0em 1em;max-height: 0em;overflow: hidden;transition: all 0.2s linear;position: relative;z-index: 1;min-height: 0;}
.acceso .info h2 {
    margin: 0;
}
.acceso .info p {
    margin: 0;
    text-align: left;
}
.area.on .acceso:hover .info {
    max-height: 10em;
    padding: 1em;
    transition: all 2s cubic-bezier(1, -0.18, 0.53, 0.29);
    color: #000;
}

.mason {
    flex-direction: row;
    align-items: flex-start;
    /* padding: 2em 4em; */
}
.mason .col {flex: 1;}

.mason .col+.col {margin-left:2em;}




/* poemario */

.poemario {white-space:pre-wrap;text-align: justify;line-height:1.3em;margin: 0em 0em 2em;/* border: solid 1px #fff; *//* border-left: none; *//* border-right: none; */padding: 2em 3em;color: #000;/* box-shadow: 0 5px 10px #eee; */background: rgba(255, 255, 255, 0.85);}
.poemario::first-letter {font-size:200%;text-transform:uppercase;margin:0 -0.05em 0 0;}







/* stickers */

.jenny {margin: 2em 0; transition: opacity 0.5s ease-out, transform 0.5s ease-out; opacity: 0; transform: scale(1.5) rotate(5deg); }
.jenny.intro {opacity: 1; transform: none; }









/* AVENTURA */

#highscore {border:solid 1px;/* max-height: 80vh; */overflow: hidden;width: 100%;}
#highscore .table {width: 100%;display: block;overflow: visible;height: auto;}
#highscore .th {/* border-bottom:solid 1px; */text-align:center;padding: 1em 0 2em;display: block;}
#highscore .tr {
    display: flex;
    width: 100%;
    flex-direction: row;
}
#highscore .td {padding: 1em;white-space: nowrap;text-overflow: clip;position: relative;overflow: hidden;max-width: 29em;flex: 1;flex-direction: row;display: block;}
#highscore .td+.td {/* text-align: right; */flex: 0;min-width: 4em;letter-spacing: -0.05em;}
#highscore .td:first-child:after {content: "...............................................................................................";color: #4e4e4e;}

/* #68 aduana y pasaporte */

.pas-fecha {
    color: #424242;
    text-align: center;
    margin: 0;
    letter-spacing: 0.4em;
}
.area.on div.pas-foto {
    width: 9vw;
    /* border: solid 1px; */
    height: 9vw;
    float: left;
    /* margin: 1em 2vw 3vw 0; */
    background: #2d2d2d center center;
    background-size: cover;
    display: inline-block;
}
.pas-alias {
    letter-spacing: 0;
    font-size: 125%;
    text-decoration: none;
    clear: none;
    margin: 0.8em 0;
    float: left;
}
.pas-email {
    /* clear: none; */
    /* float: left; */
    /* display: inline; */
    /* width: 17vw; */
    /* display: block; */
    overflow: hidden;
    word-wrap: break-word;
    /* font-size: 80%; */
    margin: -0.5em 0 1em !important;
}
.pas-opcion {
    border-bottom: solid 1px #333;
    display: block;
    padding: 0.5em 0;
    clear: both;
}
.pas-opcion input {
    width: auto;
}















/* VERTICAL */

@media all and (orientation: portrait) {
    .arch {}
}





/* SOLO ESCRITORIO */

@media only screen and (min-width: 801px){
  .tl-it {margin:-0.5em 0 0;}
  .tl-it:nth-child(odd) {margin-left: -40vw;-webkit-flex-direction: row-reverse;flex-direction: row-reverse;transform-origin: right center;transform:rotateY(-90deg);}
  .tl-it:nth-child(odd):before {right: 0; }
  .tl-it:nth-child(odd) .tl-label {text-align:right;}
  #menu {/* background: none !important; */}
  
}






/* SOLO MOVIL */

.area.on .solomovil {display:none;}
@media only screen and (max-width: 800px){

    .area.on .solomovil {display:block;}
    .area.on .nomovil {display:none;}

    .bar {top: 1em; }
    .bar.left {left: 1em; }
    .bar.right {right: 1em; }
    body.hud #menu {padding: 0.75em;right: 1em;transition: all 0.5s;top: 3.5em;}
    #menu a {}
    #hp {display:none;}

    .area.on {margin: 0;border: none;padding: 5.5em 1em 2em 1em;}

    cols {display: block; }
    cols>div {width: 100% !important; }

    .mason .col+.col {margin:0;}

    .tl {margin: 0; background: none; }
    .tl-head {height: 60vw; width: 60vw; margin: 0 auto; }
    .tl-it {width: 90vw;}
    .tl-it:before {display:none;}
    .poemario {margin: 2em 0; padding: 2em 1em; }


    .area[id="0"] spa {display:none;}
    .area[id="0"] #hometop {width:100%;margin:0;}



}












/* KEYFRAMES */



@keyframes cath {
  0% {opacity:1;text-shadow:none;}
  1% {opacity:0.9;text-shadow: 0 0 1px #fff;}
  5% {opacity:1;text-shadow: 0 0 2px #fff,0 0 7px #fff;}
  10% {opacity:0.8;}
  20% {opacity:0.9;text-shadow: 0 0 3px #fff;}
  22% {opacity:1;}
  30% {opacity:0.9;}
  40% {opacity:0.8;text-shadow:none}
  42% {opacity:1;text-shadow: 0 0 2px #fff,0 0 7px #fff;}
  50% {opacity:0.7;}
  55% {opacity:0.9;}
  62% {opacity:1;text-shadow: 0 0 2px #fff,0 0 7px #fff;}
  70% {opacity:1;text-shadow: 0 0 3px #fff;}
  78% {opacity:0.9;text-shadow:none;}
  80% {opacity:1;text-shadow: 0 0 3px #fff;}
  84% {opacity:1;}
  90% {opacity:0.8;text-shadow: 0 0 3px #fff;}
  92% {opacity:1;}
  95% {opacity:0.5;}
  100% {opacity:1;text-shadow:none;}
}

@keyframes cathode-on {
  0% {transform:scaleX(0.001) scaleY(0.001);background:#fff;}
  30% {transform:scaleX(0.001) scaleY(1.1);}
  50% {transform:scaleX(0.01) scaleY(1);background:rgba(255,255,255,0.5);}
  70% {transform:scaleX(1.1) scaleY(1); background:rgba(255,255,255,0);}
  100% {transform:scaleX(1) scaleY(1);}
}
@-webkit-keyframes cathode-on {
  0% {-webkit-transform:scaleX(0.001) scaleY(0.001);background:#fff;}
  30% {-webkit-transform:scaleX(0.001) scaleY(1.1);}
  50% {-webkit-transform:scaleX(0.01) scaleY(1);background:rgba(255,255,255,0.5);}
  70% {-webkit-transform:scaleX(1.1) scaleY(1); background:rgba(255,255,255,0);}
  100% {-webkit-transform:scaleX(1) scaleY(1);}
}
@keyframes cathode-on-bar {0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} }
@-webkit-keyframes cathode-on-bar {0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} }



@keyframes brillo {
  0% {text-shadow:0px 0px 0px, 0px 0px 0px, 0px 0px 0px;}
  50% {text-shadow:0px 0px 4px, 0px 0px 4px, 0px 0px 4px, 0px 0px 4px, 0px 0px 4px, 0px 0px 4px;}
  100% {text-shadow:0px 0px 0px, 0px 0px 0px, 0px 0px 0px;}
}


@keyframes zonafantasma1 {
  0% {background-position:0px 0px;}
  10% {background-position:60px 20px;}
  15% {background-position:00px 80px;}
  40% {background-position:40px 0px;}
  43% {background-position:30px 80px;}
  70% {background-position:0px 20px;}
  75% {background-position:10px 40px;}
  100% {background-position:0px 20px;}
}


@keyframes zoominout {
  0% {transform:scale(0.01);opacity:1;}
  5% {transform:scale(1);}
  90% {transform:scale(1);}
  100% {transform:scale(0.01);opacity:1;}
}

@keyframes zoomin {
  0% {transform:scale(0.01);}
  100% {transform:scale(1);}
}


@keyframes cw {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@keyframes ccw {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(-360deg);}
}
@-webkit-keyframes cw {
  0% {-webkit-transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes ccw {
  0% {-webkit-transform:rotate(0deg);}
  100% {-webkit-transform:rotate(-360deg);}
}


/*@keyframes floating {
  0% {top:0;}
  50% {top:-1em;}
  100% {top:0;}
}
@-webkit-keyframes floating {
  0% {top:0;}
  50% {top:-1em;}
  100% {top:0;}
}*/


@keyframes floating {
  0% {transform:translateY(0);}
  50% {transform:translateY(1em);}
  100% {transform:translateY(0);}
}
@-webkit-keyframes floating {
  0% {transform:translateY(0);}
  50% {transform:translateY(1em);}
  100% {transform:translateY(0);}
}


@keyframes blink {
  0% {opacity:0.2;}
  50% {opacity:1;}
  100% {opacity:0.2;}
}
@-webkit-keyframes blink {
  0% {opacity:0.2;}
  50% {opacity:1;}
  100% {opacity:0.2;}
}


@keyframes pulsate {
  0% {transform:scale(0.9);}
  50% {transform:scale(1);}
  100% {transform:scale(0.9);}
}
@-webkit-keyframes pulsate {
  0% {-webkit-transform:scale(0.9);}
  50% {-webkit-transform:scale(1);}
  100% {-webkit-transform:scale(0.9);}
}


@keyframes brilla {
  0% {filter:brightness(1.8);}
  50% {filter:brightness(0.9);}
  100% {filter:brightness(1.8);}
}
@-webkit-keyframes brilla {
  0% {filter:brightness(1.8);}
  50% {filter:brightness(0.9);}
  100% {filter:brightness(1.8);}
}



@keyframes fade {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadein {
  0% {transform:scale(0.7);opacity: 0;}
  100% {transform:scale(1);opacity: 1;}
}
@keyframes fadelay {
  0% {transform:scale(0.7);opacity: 0;}
  70% {transform:scale(0.7);opacity: 0;}
  100% {transform:scale(1);opacity: 1;}
}




@keyframes intro-puerta-der {0% {transform:rotateY(0deg);} 10% {transform:rotateY(-3deg);} 30% {transform:rotateY(0deg);} 50% {transform:rotateY(0deg);} 70% {transform:rotateY(-2deg);} 80% {transform:rotateY(0deg);} }
@keyframes intro-puerta-izq {0% {transform:rotateY(0deg);} 15% {transform:rotateY(4deg);} 30% {transform:rotateY(0deg);} 60% {transform:rotateY(0deg);} 75% {transform:rotateY(2deg);} 85% {transform:rotateY(0deg);} }


@keyframes intro-abrir-der {0% {transform:rotateY(0deg);} 100% {transform:rotateY(-80deg);} }
@keyframes intro-abrir-izq {0% {transform:rotateY(0deg);} 100% {transform:rotateY(80deg);}  }



@keyframes zap {
    0% {filter:brightness(5);opacity: 1;}
    100% {filter:brightness(0);opacity:0;}
}



google {you:suck;}