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

html,
body {
	height: 100vh;
}

body {
	background: var(--primary);
	font-family: Roboto, Arial, sans-serif;
	background-image: url(../images/banner.jpg);
	background-repeat: no-repeat;
  	background-size: cover;
}

section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

form {
	/*margin: 20px 0;*/
	/*background-color: #d1d1f033;*/
	background-color: #d1d1f087;
	padding: 50px 100px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 57px -37px rgb(19 19 22);
	-moz-box-shadow: 0px 0px 57px -37px rgb(19 19 22);
	box-shadow: 0px 0px 57px -37px rgb(19 19 22);
}

/* Centalizar ao meio */
.form-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

div .logo img {
	width: 150px;
	/*height: 100%;*/
	display: block;
	margin: 0 auto;
	align-items: center;
 /*-webkit-box-shadow: 0px 0px 56px -33px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 0px 56px -33px rgba(0,0,0,0.75);
 box-shadow: 0px 0px 56px -33px rgba(0,0,0,0.75);*/

}

div .finger-print-box {
	padding: 80px;
	width: 250px;
	height: 250px;
	border: 1px solid transparent;
	border-color: #fff;
	filter: brightness(160%);
	border-radius: 10px;
	/*background: #000;*/
	/*box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);*/
}

.finger-print-box img {
	width: 100%;
}

.mt-20{
	margin-top: 20px;
}

.version-info{
	background: #bababa;
	font-size: 13px;
	padding: 5px 10px;
	border-radius: 5px;
	color: var(--primary);
}

.logo{
	background: #fff;
	padding: 10px;
	border-radius: 10px;
	width: 170px;
	/*max-height: 150px;*/
}

.logo-h3 h3 {
	display: block;
	font-size: 23px;
	margin: 30px;
	text-align: center;
	font-weight: 300;
	color: #fff;
}

form {
	background-color: #d1d1f087;
	/*background: #d1d1f033;*/
	position: relative;
	z-index: 5;
}

form .input-field {
	margin-bottom: 15px;
}

form .input-field {
	width: 350PX;
	height: 40PX;
	margin-top: 8px;
	font-weight: bold;
	color: var(--primary);
	border-radius: 5px;
	border: 1px solid var(--primary);
	outline: #9e9e9e;
	transition: 250ms;
	display: flex;
	align-items: center;
	/*filter: brightness(80%);*/
}

form input{
	height: 100%;
	width: 100%;
	border: 0;
	padding-left: 10px;
	background: var(--primary);
	color: whitesmoke;
	border-radius: 0px 5px 5px 0px;
}
form i{
	padding: 1rem;
	font-size: 1.2rem;
}
form .input-field:hover {
	filter: brightness(140%);
}
/*form .input-field:hover {
	border: 1px solid #607d8b;
	color: #607d8b;
}
input:focus, input:hover {
	background: #607d8b;
}*/
.forgot-pass{
	text-align: right;
}
.forgot-pass a{
	text-decoration: none;
	/*color: lightblue;*/
	color: #ddd;
}
::placeholder {
	color: #c8c6c6;
}

.alert {
	padding: 15px;
	/*margin-top: 20px;*/
	margin-bottom: 10px;
	border: 1px solid transparent;
	border-radius: 4px;
	max-width: 550px;
}

.alert-success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

.alert-danger {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
}

.alert-primary {
	color: #004085;
	background-color: #cce5ff;
	border-color: #b8daff;
}

.alert-info {
	color: #0c5460;
	background-color: #d1ecf1;
	border-color: #bee5eb;
}

form .btn-login {
	display: block;
	min-width: 120px;
	font-size: 16px;
	font-weight: 500;
	border: none;
	background-color: var(--primary);
	color: white;
	border-radius: 5px;
	margin: auto;
	width: 200px;
	height: 50px;
	margin-top: 25px;
	box-shadow: 3px 6px 15px -6px #23292c;
	transition: 250ms;
	cursor: pointer;
}

.btn-link{
	color: var(--primary);
}

form .btn-login:hover {
	filter: brightness(80%);
}

form p .span {
	color: #685efd;
	text-decoration: none;
}

form p .span:hover {
	transition: 200ms;
	filter: brightness(70%);
}
form p {
	font-size: 16px;
	text-align: center;
	padding-top: 15px;
}

/*=== APARIÇÃO DO FORM ===*/
form {
	overflow: hidden;
	animation: fade 0.2s;
}

form .input-field:nth-child(2) {
	animation: move 500ms;
}

form .input-field:nth-child(3) {
	animation: move 400ms;
	animation-delay: 150ms;
	animation-fill-mode: backwards;
}

form .btn-login {
	animation: move 400ms;
	animation-delay: 250ms;
	animation-fill-mode: backwards;
}

@keyframes move {
	from {
		opacity: 0;
		transform: translate(-35%);
		}to {
			opacity: 1;
			transform: translate(0);
		}
	}

	@keyframes fade {
		from {
			opacity: 0;
			transform: scale(0.9);
			}to {
				opacity: 1;
				transform: scale(1);
			}
		}

		/* Quando clicar no botão, sumir com o form */
		.form-hide {
			animation: down 500ms;
			animation-fill-mode: 1.2s forwards;
			animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
		}

		@keyframes down {
			from {
				transform: translateY(0);
				}to {
					transform: translateY(100vh);
				}
			}

			/*=== FORM NO-NO ===*/
			form.validate-error {
				animation: nono 200ms linear, fade paused;
				animation-iteration-count: 2;
			}
			@keyframes nono {
				0%, 
				100% {
					transform: translateX(0);
				}
				35% {
					transform: translateX(-15%);
				}
				70% {
					transform: translateX(15%);
				}
			}

			/*=== SQUARES ===*/
			body {
				overflow: hidden;
			}
			.squire-container {
				position: fixed;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				overflow: hidden;
			}

			.squares li {
				display: block;
				position: absolute;
				bottom: -40px;
				animation: up 2s infinite, alternate;
			}

			.squares li i{
				font-size: 3rem;
				color: var(--primary);
			}

			@keyframes up {
				from {
					opacity: 0;
					transform: translateY(0);
				}
				50% {
					opacity: 1;

				}
				to {
					opacity: 0;
					transform: translateY(-800px) rotate(960deg);
				}
			}
			input:focus{
				outline: none;
			}

			@media (min-width: 320px) and (max-width: 424px) {
				form .input-field input {
					width: 100%;
				}
				form{
					width: 96%;
					margin: 0 auto;
					padding: 1rem;
					border-radius: 5px;
				}
				form .input-field {
					width: 100%;
				}
			}
			@media (min-width: 425px) and (max-width: 600px) {
				form .input-field input {
					width: 100%;
				}
				form{
					width: 96%;
					margin: 0 auto;
					padding: 1rem;
					border-radius: 5px;
				}
				form .input-field {
					width: 100%;
				}
			}