html,
body {
	min-height: 100vh;
}
body {
	display: flex;
	flex-direction: column;
	background-color: #f8f9fa;
}
body .main {
	flex-grow: 1;
}

/* banner de home */
.banner-container {
	min-height: 1rem;
	font-family: "Montserrat", sans-serif;
}
.banner-container .bg-img {
	background-color: rgba(60, 60, 60, 0.7);
	background-blend-mode: multiply;
	background-size: cover;
	background-position: center;
	height: calc(100vh - 86px);
}
.banner-container .content {
	color: #f4f4f4;
}
.banner-container .content:hover {
	color: #a5c334;
	text-decoration: none;
}
.banner-container .content img {
	max-width: 200px;
}
.banner-container .content:hover img {
	max-width: 215px;
}

/* login */
.card-login {
	overflow: hidden;
	margin: 0 auto;
	border-radius: 10px;
	max-width: 500px;
	width: 100%;
	height: 100%;
	box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
}

.card-login .card-login-body {
	width: 100%;
	height: 100%;
	transform: translate(0%, 0%);
	-webkit-transition: -webkit-transform 300ms, box-shadow 300ms;
	-moz-transition: -moz-transform 300ms, box-shadow 300ms;
	transition: transform 300ms, box-shadow 300ms;
}
.card-login .card-login-body::after,
.card-login .card-login-body::before {
	content: "";
	position: absolute;
	width: 600px;
	height: 600px;
	border-top-left-radius: 40%;
	border-top-right-radius: 45%;
	border-bottom-left-radius: 35%;
	border-bottom-right-radius: 40%;
	z-index: -1;
}

.card-login .card-login-body::before {
	left: 40%;
	bottom: -130%;
	background-color: rgba(69, 105, 144, 0.15);
	-webkit-animation: wawes 6s infinite linear;
	-moz-animation: wawes 6s infinite linear;
	animation: wawes 6s infinite linear;
}
.card-login .card-login-body::after {
	left: 35%;
	bottom: -125%;
	background-color: rgba(2, 128, 144, 0.2);
	-webkit-animation: wawes 7s infinite;
	-moz-animation: wawes 7s infinite;
	animation: wawes 7s infinite;
}
.card-login .form-login input {
	border: 0;
	/* text-transform: uppercase; */
}
.card-login .form-login div > button[name="login"] {
	/* padding: 10px 0; */
	width: 80px;
	background-color: #adc53b;
	border-color: #adc53b;
	color: #f4f4f4;
	font-size: 16px;
	text-transform: uppercase;
}
.card-login .form-login div > button[name="login"]:hover {
	background-color: #bdd40b;
	border-color: #bdd40b;
}

@-webkit-keyframes wawes {
	from {
		-webkit-transform: rotate(0);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes wawes {
	from {
		-moz-transform: rotate(0);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes wawes {
	from {
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		-ms-transform: rotate(0);
		-o-transform: rotate(0);
		transform: rotate(0);
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@media (min-width: 700px) {
	.banner-container .bg-img {
		min-height: calc(100vh - 130px);
	}
}