
body{ position: absolute; padding: 0; background-color: #FFF; width:100%; margin:0 auto; font-family: 'Lato', sans-serif; font-size: 15px;}
*{ box-sizing: border-box;}


@font-face {
    font-family: 'DCC - Ash';
    src: url('../fonts/DCC-Ash.woff2') format('woff2'),
    url('../fonts/DCC-Ash.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.number{font-family: 'DCC - Ash', Arial; font-size: 30px; color: white; position: absolute; right: 18px; top: -45px; width: 30px; text-align: center;}


.wrapper{ position: relative;  margin:0 auto; top: 0; left: 0; width: 300px; height: 300px; background-color: #d2d3d4; overflow:hidden; }


#container{ transition: all 1.5s linear; transform: translateX(0); width: 100%; height: 100%;}
#container > div{ position:absolute; width: 300px; height: 100%; left: 0; top: 0; border: none;}
#container > div.active{ opacity: 1;}
#container > div img{ display: block;}

.p1{ z-index: 10000;}
.pass.active{ opacity: 1; visibility: visible; transform: initial;}
.pass{ position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; transform: scale(.6) rotate(60deg) skewX(90deg); transition: all .6s;}

.preguntas{ position: absolute; top:100px; left: 0; z-index: 100;}
.preguntas h4{ color: #1d3f25; text-shadow: 2px 2px 0 white, -2px -2px 0 white, 0 0 4px white; font-weight: bold; font-size: 18px; text-align: center; padding: 0 15px; margin: 0;}
.preguntas ul{ list-style: none; padding: 0; margin: 0;counter-reset:index; margin-top: 10px;}
.preguntas li{counter-increment: index;}
.preguntas li a::before{ content:counter(index, upper-latin) "."; font-weight: 900; display: inline-block; padding-right: 5px;}
.preguntas li a{text-decoration: none; color: #002e08; display: block; padding:4px 15px;}
.preguntas li a:hover{ background: #057428; color: #fff;}

.p2 img{ position: absolute; top: 0; left: 0;}




