@import url("reset.css");
@import url("icomoon.css");
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic);

/* ESTILOS */

html,
body{
	height: 100%;
}
body{
	font-size: 14px;
	color: #888;
	background-color: #1597A3;
}
body,
input{
	font-family: 'Lato', 'Segoe UI', Tahoma, sans-serif;
}

.centrado{
	width: 300px;
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
}

#superior{
	display: table;
	width: 320px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -225px
}
	#superior:after{
		height: 225px;
	}
	#superior .centrado{
		display: table-cell;
		vertical-align: middle;
		padding-bottom: 225px
	}

header{
	float: left;
	width: 100%;
	height: 45px;
	margin-top: 25px;
	margin-bottom: 25px;
	background-image: url('../imagenes/layout/recibi.svg');
	background-position: center;
	background-repeat: no-repeat;
}

#principal{
	float: left;
	width: 100%;
	padding-top: 210px;
	padding-bottom: 20px;
	background-image: url('../imagenes/layout/ilustracion.svg');
	background-size: 204px auto;
	background-position: center 0;
	background-repeat: no-repeat;
}

	#principal ul{
		
	}
		#principal ul li{
			position: relative;
			float: left;
			margin-bottom: 9px;
		}
			#principal ul li input[type="text"],
			#principal ul li input[type="password"]{
				float: left;
				width: 300px;
				padding-left: 15px;
				height: 40px;
				font-style: italic;
				font-size: 16px;
				color: #888;
				border: none;
				box-sizing: border-box;
				background-color: #F9F9F9;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
			}
			#principal ul li input[type="text"]:focus,
			#principal ul li input[type="password"]:focus{
				outline: 0;
				background-color: #FFF;
			}
			#principal ul li .icono-usuario,
			#principal ul li .icono-clave{
				position: absolute;
				top: 0;
				right: 0;
				width: 45px;
				height: 40px;
				background-color: #DADADA;
				-webkit-border-top-right-radius: 3px;
				-moz-border-top-right-radius: 3px;
				border-top-right-radius: 3px;
				-webkit-border-bottom-right-radius: 3px;
				-moz-border-bottom-right-radius: 3px;
				border-bottom-right-radius: 3px;
			}
				#principal ul li .icono-usuario::before,
				#principal ul li .icono-clave::before{
					display: block;
					width: 45px;
					height: 40px;
					font-family: "icomoon";
					font-size: 32px;
					text-align: center;
				}
				#principal ul li .icono-usuario::before{
					content: "\1f464";
					line-height: 45px;
				}
				#principal ul li .icono-clave::before{
					content: "\1f512";
					line-height: 42px;
					text-indent: 2px;
				}
				#principal ul li .icono-usuario:hover,
				#principal ul li .icono-clave:hover{
					opacity: 0.8;
				}
			#principal ul li input[type="submit"]{
				width: 300px;
				height: 40px;
				font-size: 21px;
				color: #FFF;
				text-transform: uppercase;
				border: none;
				background-color: #0C5165;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				cursor: pointer;
				-webkit-appearance: none;
			}
				#principal ul li input[type="submit"]:hover{
					background-color: #0a4455;
				}
			.mostrar_en_bloque{
				display: block;
			}
			.no_mostrar{
				display: none !important;
			}
			#principal p{
				position: relative;
				margin-top: 5px;
				float: left;
				width: 100%;
				text-align: center;
			}
			#principal p:before,
			#principal p:after{
				position: absolute;
				top: 7px;
				display: block;
				width: 70px;
				content: "";
				border-bottom: 1px solid rgba(255,255,255,0.5);
			}
			#principal p:before{
				left: 0;
			}
			#principal p:after{
				right: 0;
			}
				#principal p a{
					color: #FFF;
					text-decoration: none;
					opacity: 0.8;
				}
				#principal p a:hover{
					opacity: 1;
				}
	
#inferior{
	height: 225px;
}

#texto{
	float: left;
	width: 100%;
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #00B1C0;
}
	#texto p{
		font-style: italic;
		font-size: 17px;
		line-height: 24px;
		color: #FFF;
		text-align: center;
		margin-bottom: 20px;
	}
	#texto p:last-child{
		margin-bottom: 0;
	}
		#texto p a{
			display: block;
			width: 300px;
			height: 40px;
			font-style: normal;
			font-size: 21px;
			line-height: 40px;
			color: #00B1C0;
			text-decoration: none;
			text-transform: uppercase;
			background-color: #FFF;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			transition: all 0.5s ease;
		}
			#texto p a:hover{
				color: #FFF;
				background-color: #0C5165;
				transition: all 0.5s ease;
			}

footer{
	float: left;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	font-style: italic;
	background-color: #F1F1F1;
}
	footer .centrado{
		text-align: center;
	}
	footer img{
		position: relative;
		top: 2px;
		margin-left: 5px;
	}

#fondo{
	position: fixed;
	z-index: -1;
	top: 0;
	width: 100%;
	height: 363px;
	background-color: #00929F;
	background-image: url('../imagenes/layout/fondo.svg');
	background-position: bottom center;
	background-repeat: no-repeat;
}