@import url('https://fonts.googleapis.com/css?family=Syncopate');

html {
	color: #666666;
	font-family: 'RobotoDraft', 'Roboto', sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	width: 100%;
	height: 100%;

	background: #56A144;
	background: -moz-linear-gradient(-45deg, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144);
	background: -webkit-linear-gradient(-45deg, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144);
	background: linear-gradient(-45deg, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #56A144, #4E79BF, #7F4D73, #F97F4A, #E5CD57, #F97F4A, #7F4D73, #4E79BF, #E5CD57);
	background-size: 10000% 10000%;
	-webkit-animation: Gradient 240s linear infinite alternate;
	-moz-animation: Gradient 240s linear infinite alternate;
	animation: Gradient 240s linear infinite alternate;

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56A144', endColorstr='#4E79BF',GradientType=1 );
}
body {
	height: 100%;
	background: transparent;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	100% {
		background-position: 100% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	100% {
		background-position: 100% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	100% {
		background-position: 100% 50%
	}
}

/* Container */
.container {
	max-width: 460px;
	width: 100%;
	position: fixed; /* or absolute */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.container .logo {
	font-family: 'Syncopate', sans-serif;
	color: #FFF;
	font-size: 40px;
	text-decoration: none;
	text-align: center;
	padding-bottom: 15px;
	display: block;
}

/* Card */
.card {
	position: relative;
	background: #ffffff;
	border-radius: 5px;
	padding: 50px 0 40px 0;
	margin: 0 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

.card .input-container {
	position: relative;
	margin: 0 40px 35px;
}

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus,
:-webkit-autofill:active {
	-webkit-animation: autofill 0s forwards;
	animation: autofill 0s forwards;
}
@keyframes autofill { 100% { background: transparent; color: inherit; } }
@-webkit-keyframes autofill { 100% { background: transparent; color: inherit; } }

.card .input-container input {
	outline: none;
	z-index: 1;
	position: relative;
	background: none;
	width: 100%;
	height: 60px;
	border: 0;
	color: #212121;
	font-size: 24px;
	font-weight: 400;
}

.card .input-container input:focus ~ label {
	color: #9d9d9d;
	-webkit-transform: translate(-12%, -50%) scale(0.75);
	transform: translate(-12%, -50%) scale(0.75);
}

.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after {
	width: 50%;
}

.card .input-container input:valid ~ label {
	color: #9d9d9d;
	-webkit-transform: translate(-12%, -50%) scale(0.75);
	transform: translate(-12%, -50%) scale(0.75);
}

.card .input-container label {
	position: absolute;
	top: 0;
	left: 0;
	color: #757575;
	font-size: 24px;
	font-weight: 300;
	line-height: 60px;
	-webkit-transition: 0.2s ease;
	transition: 0.2s ease;
}

.card .input-container .bar {
	position: absolute;
	left: 0;
	bottom: 0;
	background: #757575;
	width: 100%;
	height: 1px;
}

.card .input-container .bar:before, .card .input-container .bar:after {
	content: '';
	position: absolute;
	background: #7F4D73;
	width: 0;
	height: 2px;
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

.card .input-container .bar:before {
	left: 50%;
}

.card .input-container .bar:after {
	right: 50%;
}

.card .button-container {
	margin: 0 40px;
	text-align: center;
}

.card .button-container button {
	outline: 0;
	cursor: pointer;
	position: relative;
	display: inline-block;
	background: 0;
	width: 100%;
	border: 2px solid #7F4D73;
	padding: 20px 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	overflow: hidden;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

.card .button-container button span {
	position: relative;
	z-index: 1;
	color: #7F4D73;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

.card .button-container button:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	background: #7F4D73;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	margin: -15px 0 0 -15px;
	opacity: 0;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

.card .button-container button:hover, .card .button-container button:active, .card .button-container button:focus {
	border-color: #7F4D73;
}

.card .button-container button:hover span, .card .button-container button:active span, .card .button-container button:focus span {
	color: #ffffff;
}

.card .button-container button:active span, .card .button-container button:focus span {
	color: #ffffff;
}

.card .button-container button:active:before, .card .button-container button:focus:before {
	border-color: #68405F;
	background: #68405F;
}

.card .button-container button:hover:before, .card .button-container button:active:before, .card .button-container button:focus:before {
	opacity: 1;
	-webkit-transform: scale(13);
	transform: scale(13);
}

.card .footer {
	margin: 40px 0 0;
	color: #d3d3d3;
	font-size: 24px;
	font-weight: 300;
	text-align: center;
}

.card .footer a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

.card .footer a:hover {
	color: #bababa;
}

/* Keyframes */
@-webkit-keyframes buttonFadeInUp {
	0% {
		bottom: 30px;
		opacity: 0;
	}
}

@keyframes buttonFadeInUp {
	0% {
		bottom: 30px;
		opacity: 0;
	}
}

.erro_login, .alert {
	margin-bottom: 25px;
	margin-top: -50px;
}

@media screen and (max-width: 425px) {
	.card {
		padding: 40px 0 30px 0;
	}
	.card .input-container {
		margin: 0 25px 35px;
	}
	.card .button-container {
		margin: 0 25px;
	}
}