body{
	background:#e4edf2;
	font-family:"Roboto Condensed", Arial, sans-serif;
}

#cabecera{
	background:#fff;
	line-height:50px;
	padding:5px 15px;
}
#logo img{
	float:left;
}
#rrss{
	float:right;
	line-height:50px;
}
#rrss a{
	display:inline-block;
	color:#666;
	font-size:2em;
	margin-left:5px;
}

#cuerpo{
	opacity:0;
	width:1024px;
	height:500px;
	background:#fff;
	margin:auto;
	position:absolute;
	left:50%;
	margin-left:-512px;
	top: 50%;
	margin-top:-250px;
	transition:opacity ease 2000ms;
}
body.init #cuerpo{
	opacity:1;
}
#cuerpo .left{
	float:left;
	position:relative;
	height:100%;
	width:40%;
	background:#409fff;
	color:#fff;
	padding:60px;
	text-align:center;
}
#cuerpo .left .imagen{
	display:inline-block;
	margin-bottom:15px;
}
#cuerpo .left .ayuda{
	position:absolute;
	bottom:60px;
	left:60px;
}
#cuerpo .right{
	overflow:hidden;
	padding:60px;
	position:relative;
	height:100%;
}
#cuerpo .right .boton{
	position:absolute;
	right:60px;
	bottom:60px;
}
#cuerpo .right .boton.secundario{
	left:60px;
	right:auto;
}

.separador{
	height:40px;
}

h1{
	font-size:2.6em;
	margin-bottom:15px;
	line-height:30px;
}
h2{
	font-size:2.6em;
	margin-bottom:15px;
	line-height:30px;
}
p{
	font-size:1.3em;
}
p.pasos{
	font-size:1.6em;
	color:#999;
}
i.ayuda{
	font-size:2em;
}

label{
	font-size:2em;
	line-height:24px;
	margin-bottom:5px;
	color:#666;
	display:block;
}
.text, select, textarea{
	font-family:"Roboto Condensed", Arial, sans-serif;
	border:none;
	border-bottom:1px solid #ccc;
	font-size:1.6em;
	transition:all ease 500ms;
	width:100%;
	background:none;
	display:block;
	height:30px;
	line-height:30px;
	padding:10px;
}
select{
	padding:0 10px;
}
.text:focus, select:focus{
	border-bottom:1px solid #333;
}
.boton{
	display:inline-block;
	background:#409fff;
	color:#fff;
	font-size:1.6em;
	text-align:center;
	line-height:30px;
	text-decoration:none;
	padding:0 20px;
	transition:all ease 200ms;
	border-radius:3px;
}
.boton:hover{
	background:#0073e5;
}
.boton.secundario{
	background:#eee;
	color:#999;
}
.boton.secundario:hover{
	background:#f5f5f5;
}

#respuesta{
	font-size:1.4em;
	overflow:auto;
	height:280px;
	color:#555;
}
#loading-bar{
	position:absolute;
	bottom:0;
	height:3px;
	width:20%;
	background:#409fff;
	animation: animate 2s ease infinite;
}

#footer{
	margin-top:20px;
	text-align:right;
}
#footer label, #footer img{
	font-size:1.2em;
	display:inline-block;
	line-height:20px;
	margin:0;
	margin-left:5px;
	vertical-align: middle;
}

@keyframes animate {
    0%{
        left: -20%;
    }
    100%{
        left: 100%;
    }
}

@media (max-width: 1024px) {
    #cuerpo{
		width:100%;
		position:static;
		margin-top:unset;
		margin-left:unset;
		height:auto;
	}
	#cuerpo .left{
		float:none;
		width:100%;
		padding:20px 60px;
	}
	#cuerpo .right{
		float:none;
		width:100%;
		height:500px;
	}
	#footer{
		padding:10px;
		background:#e4edf2;
	}
}