@charset "UTF-8";
/* CSS Document */


/* reset */

		/* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126   License: none (public domain)	*/
		html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, 
		audio, video { margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline; }
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block; } 
		body { 	line-height: 1; }
		ol, ul {	list-style: none; }
		blockquote, q {	quotes: none; }
		blockquote:before, blockquote:after, q:before, q:after { 	content: '';	content: none; }
		table {	border-collapse: collapse;	border-spacing: 0; }


/* Estilos Generales */

body { font: 1em/1.62em  Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; background: #eee; }
			
		textarea, input, button { outline: none; } 		/* quita el glow (box-shadow) por defecto de los formularios, ojo */

.contenedor { max-width: 860px; position: relative; margin: 0 auto; padding: 100px 120px; }
.cabecera-pequena { width: 360px; margin: 0 auto; background: #fff; padding: 2em; border-radius: 12px; }
.cabecera-pequena h1 { font-size: 2em; margin-bottom: .8em; color: #d24; }
.cabecera-pequena h2 { font-size: 1.4em; margin-bottom: 1em; color: #555; }
.cabecera-pequena p { margin-bottom: .6em; }
.subtitulo { font-size: .8em; padding: 0 2em; color: #27A; }

/* Botones */
.boton { padding: .8em 1.2em; margin-top: 2em; border-radius: 4px; border: 1px  solid #2c8; background: #2da;
														font-size: .9em; color: #fff; cursor: pointer; transition: background .3s; }
.boton:hover { background: #20d09f; text-decoration: none; color: #fff; }

.bt-azul { background: #0AD; border: 1px solid #09D; }
.bt-azul:hover { background: #09C;  border: 1px solid #09B; }

.bt-rojo { background: #A00; border: 1px solid #900; }
.bt-rojo:hover { background: #900;  border: 1px solid #800; }

a { color: #27A; text-decoration: none; transition: color .3s; }
a:hover { text-decoration: underline; color: #d24; transition: color .3s; }

/* Acceso */

.formulario-acceso { position: relative; margin: 100px auto; width: 300px; }
.formulario-acceso label { display: none; }
.formulario-acceso input { display: inline-block; position: relative; /* posicion rel para que funcione glow */
														width:252px; padding: .9em; border: 1px solid #bbb; font-size: .9em;	}
.formulario-acceso button { padding: .76em; margin-top: 2em; border-radius: 4px; border: 1px  solid #08f; background: #09f;
														font-size: 1em; color: #fff; cursor: pointer; transition: background .3s, border-color .4s; width:280px; }
.formulario-acceso button span { text-shadow:1px 1px 1px #069; }
.formulario-acceso button:hover { background: #26f; border-color:#25f; }
.formulario-acceso h1 { font-size: 2.2em; margin-bottom: 1em; }
.formulario-acceso input:first-of-type { border-radius: 4px 4px 0 0; z-index: 1000; box-shadow: 0px 0px 4px #3cf; }
.formulario-acceso input:not(:first-of-type) { margin-top: -1px; border-radius: 0 0 4px 4px; }