@import url('//fonts.googleapis.com/css?family=Inconsolata');

/*RESET*/
html{font-size:62.50%;}
.bbody,.demo form{font-family:Inconsolata,Roboto,arial,sans-serif;}
*{margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;}
/*FIN RESET*/

.bbody{width:49.5rem;display:inline-block;margin:-0.2rem;}
.info{position:relative;padding-left:4em;padding-top:4em;}
.info .ima{position:absolute;left:5.5rem;top:10.4rem;z-index:0;}
.info > img{border:0.5em solid #fff;max-width:100%;height:auto;}
.step2 .info{padding:0;}

.demo form{width:100%;display:inline-block;top:4em;left:0;position:absolute;margin:0 -0.2em;padding-left:51.5em;}
.demo form .step2.hddn ~ .pasos{left:0;width:50%;}
.demo form .pasos{width:100%;position:relative;padding:0 2em;display:inline-block;left:17.8rem;}
.demo form .pasos h2{font-size:260%;color:#242520;font-weight:600;line-height:1;}
.demo form .pasos p{font-size:180%;color:#242520;font-weight:500;line-height:1.5;padding-bottom:0.5em;}
.demo form .step2.hddn{clip:rect(0,0,0,0);}
.demo form .step2{position:absolute;clip:auto;}
.demo form .step2 h2{padding-top:2rem;}

.demo form .select{width:13em;height:3.6em;position:relative;}
.demo form .select span{width:100%;height:100%;display:inline-block;background:#222222;color:#deebde;padding:0.8rem 0rem;font-size:180%;text-align:center;position:absolute;}
.demo form .select input{opacity:0;height:100%;width:100%;cursor:pointer;}

.demo form .droparea{position:relative;height:28.5em;float:left;max-width:21.4em;width:50%;background:rgba(0,0,0,0);display:table;}
.demo form .droparea.hddn{position:absolute;clip:rect(0,0,0,0);}
.demo form .droparea span{vertical-align:middle;text-align:center;display:table-cell;width:100%;font-size:160%;padding:0 4rem;border:0.1rem solid #959593;cursor:default;}
.demo form .droparea input{width:100%;height:100%;opacity:0;position:absolute;display:inline-block;left:0;}

.demo form .info label{position:absolute;clip:rect(0,0,0,0);}
.demo form .info input[type="text"]{background:transparent;border:0.1rem solid #222222;padding:1rem;text-align:center;font-size:160%;margin-bottom:1rem;width:80%;min-width:18rem;max-width:30rem;}
.demo form .info select[name="tarea"]{margin:1rem 0;background:transparent;border:0.1rem solid #222222;padding:1rem;text-align:center;font-size:160%;display:block;width:80%;min-width:18rem;max-width:30rem;}

.demo form .info input[type="text"]:-moz-placeholder{color:#222222;}
.demo form .info input[type="text"]::-webkit-input-placeholder{color:#222222;}
.demo form .info input[type="text"]:-ms-input-placeholder{color:#222222;}


.demo form .step2 input[type="submit"]{background:#222222;color:#f8f0e3;border:none;width:13rem;height:3.6rem;font-family:Inconsolata,Roboto,arial,sans-serif;font-size:180%;position:absolute;top:100%;}

/* estilos portada */
.generador .f16x9{padding-top:28.125%;}
.generador .mod:not(.no_ima) .mediaBox>a:after{display:none;}
.generador .mainBox .socialBox+.txtBox+.auxBox{padding:3em;background:url('http://img.rtve.es/css/rtve.2015.television/rtve.programas/aqui-la-tierra/i/generador/carnet-alt_bg.png') #deebde;margin:0;}
.generador ~ .container.byside{margin-top:-8.2em;}
.generador ~ .container.byside .gridBox .cell .mark{background:url('http://img.rtve.es/css/rtve.2015.television/rtve.programas/aqui-la-tierra/i/generador/carnet-alt_bg.png') #deebde;padding:0 3em 3em;}
.generador ~ .container.byside .gridBox .cell .mark iframe{border:0.1rem solid #222222;height:55rem;}