body{
	display: flex;
	flex-flow: column;
	text-align: center;
	min-height: 100vh;
}

section{
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

a{
	transition: 0.3s;
}

.contain{
	margin: auto;
	max-width: 1120px;
}


/*=====================================*/


header, footer{
	padding: 30px 20px;
}

header{
	background-color: #006cb5;
	color: white;
}

footer{
	height: auto;
	padding: 20px;
}


/*=================== LOGIN STYLES ==================*/



.login-section{
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background-image: linear-gradient(rgba(255, 255, 255, 0.88),rgba(50, 139, 176, 0.52)),url(https://waterfreedomsystem.s3.amazonaws.com/images/bg-3.jpg);
    background-size: cover;
}

.login-section .contain{
	width: 100%;
}

.login-form{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: 400px;
	background-color: white;
	border-radius: 10px;
	box-shadow: rgba(0,0,0,0.2) 0 0 30px;
	padding: 30px;
	margin: auto;
}


.login-form h1,
.login-form h2,
.login-form h3{
	text-align: center;
	font-size: 23px;
}

.login-form input{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
    padding: 15px 20px;
    border-radius: 5px;
    background-color: #ededed;
    border: 1px solid rgba(0,0,0,0);
    transition: 0.3s;
    margin: auto;
    margin-bottom: 10px;
    width: 100%;
    max-width: 300px;
}

.login-form input[type=submit]{
	background-color: #ce1c1c;
	color: white;
	font-weight: 700;
	cursor: pointer;
}

.login-form input[type=submit]:hover{
	opacity: .8;
}

@media (max-width: 768px){
	.login-form{
		padding-left: 20px;
		padding-right: 20px;
	}
	.login-form h1,
	.login-form h2,
	.login-form h3{
		font-size: 21px;
	}
}