*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

html{
	width: 100%;
	font-family: sans-serif;
}

body{
	display: flex;
	min-width: 100vw;
	min-height: 100vh;
	flex-direction: column;
	justify-content: center;
}

	header{
		text-align: center;
	}

		header img{
			display: block;
			width: 100vw;
		}

	#main{
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		justify-content: center;
		background-color: #ECEAE7;
	}

		#login{
			width: 25%;
			height: auto;
			align-self: center;
			border-radius: 15px;
			background-color: white;
		}

			fieldset{
				border:none;
				margin-top: 1.2em;
				margin-left: 1.2em;
				padding-top: .75em;
				margin-right: 1.2em;
			}

				fieldset > p{
					text-align: center;
				}

				input:not([type="radio"]), select{
					width: 100%;
					height: 2em;
					border: none;
					font-size: 1em;
					color: #3A5684;
					border-bottom: 1px solid #ECEAE7;
				}

					input:hover, select:hover{
						background-color: #ECEAE7;
					}

				#btnIngresar{
					width: 10em;
					height: 2em;
					color:white;
					border: none;
					font-size: 1em;
					cursor: pointer;
					margin-top: 1.2em;
					text-align: center;	
					border-radius: 3px;
					margin-bottom: 1.2em;
					background-color: rgb(58,86,132);
				}

					#btnIngresar:hover{
						background-color: #596B89;
					}		

	footer{
		display: flex;
		font-size: .75em;
		min-height: 1.5em;
		align-items: center;
		font-weight: lighter;
		justify-content: center;
	}

.fazul{
	color: white;
	background-color: #3A5684;
}

@media (max-width: 1440px){
	#login{
		width: 40%;
	}
}

@media (max-width: 1366px){
	#login{
		width: 42%;
	}
}

@media (max-width: 1024px){
	#login{
		width: 55%;
	}
}

@media (max-width: 800px){
	#login{
		width: 70%;
	}
}

@media (max-width: 640px){
	#login{
		width: 90%;
	}
}