/*==============================================
    LOGIN PAGE     
    =============================================*/

body{
	margin: 0 auto;
}
@media (min-width:768px){
	body{
		background-image: url('imagens/login.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100vh;
	}
	.div-login{
		max-width: 500px;
		text-align: center;
		margin: 0 auto;
		background-color: rgba(226, 226, 226,0.6);
		margin-top: 190px;
		border-radius: 5px;
		box-shadow: 3px 3px 10px #888888;
	}
	.div-login img{
		max-width:  120px;
		max-height: 120px;
		margin-top: -60px;
		margin-bottom: 30px;
		border-radius: 90px;
		border: 3px solid #e2e2e2;
		background-color: #fff;
	}
	input{
		height: 35px;
		width: 300px;
		font-size: 16px;
		padding-left: 30px;
		border: 0px;
		border-radius: 2px;
	}
	.form-login::before{
		content: "\f007";
		position: absolute;
		font-family: "FontAwesome";
		padding-left: 8px;
		padding-top: 3px;
		color: #a2a2a2;
		font-size: 20px;
	}
	.form-password::before{
		content: "\f023";
		position: absolute;
		font-family: "FontAwesome";
		padding-left: 8px;
		padding-top: 3px;
		color: #a2a2a2;
		font-size: 20px;
	}
	.forgot-password{
		padding-left: 165px;	
		margin-top: 10px;
	}
	.button{
		margin-bottom: 15px; 
		margin-top: 15px; 
		width: 300px;
	}
}
@media (max-width:767px){
	body{
		background-image: url('imagens/login.jpg');
		background-repeat: no-repeat;
		background-position: center;
	}
	.div-login{
		max-width: 500px;
		text-align: center;
		margin: 0 auto;
		background-color: rgba(226, 226, 226,0.6);
		margin-top: 150px;
		border-radius: 5px;
		box-shadow: 3px 3px 10px #888888;
		margin-right: 20px;
		margin-left: 20px;
	}
	.div-login img{
		max-width:  120px;
		max-height: 120px;
		margin-top: -60px;
		margin-bottom: 30px;
		border-radius: 90px;
		border: 3px solid #e2e2e2;
		background-color: #fff;
	}
	input{
		height: 35px;
		font-size: 16px;
		padding-left: 30px;
		border: 0px;
		border-radius: 2px;
		width: 80%;
	}
	.form-login::before{
		content: "\f007";
		position: absolute;
		font-family: "FontAwesome";
		padding-left: 8px;
		padding-top: 3px;
		color: #a2a2a2;
		font-size: 20px;
	}
	.form-password::before{
		content: "\f023";
		position: absolute;
		font-family: "FontAwesome";
		padding-left: 8px;
		padding-top: 3px;
		color: #a2a2a2;
		font-size: 20px;
	}
	.forgot-password{
		padding-left: 165px;	
		margin-top: 10px;
	}
	.button{
		margin-bottom: 15px; 
		margin-top: 15px; 
		width: 80%;
	}
}
.display{
	display: none;
}
.error{
	position: relative;
	animation: shake 0.3s;
}
@keyframes shake{
	0% , 100%{
		left: 0px;
	}
	20% , 80%{
		left: -15px;
	}
	40% , 60%{
		left: 15px;
	}
}