.box-login .box-default,
.box-login:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999
}

.box-login {
    width: 100%;
    height: 100vh;
    position: relative
}

.box-login:before {
    content: '';
    /* background: #32c2c2; */
    background: -webkit-linear-gradient(0deg, #32c2c2 0, #9a77e8 100%);
    /* background: linear-gradient(0deg, #32c2c2 0, #390fa4 100%); */
    background-size: 400% 400%;
    animation: 15s infinite gradient;
    width: 100%;
    height: 100%
}

.box-login .box-default {
    overflow: auto;
    width: 350px;
    padding: 25px 25px 15px;
    border-radius: 7px
}

.box-login .box-default img.logo {
    filter: brightness(0) invert(1);
    width: 150px
}

.box-login .box-default .box-content {
    padding: 25px 0 0
}

.box-login .box-default input[type=password],
.box-login .box-default input[type=text] {
    background-color: #fff
}

.box-login .box-default .box-footer a {
    color: #fff
}

#step-cadastro,
#step-logar,
#step-recuperar-senha {
    display: none
}

@keyframes gradient {

    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

@media screen and (max-width: 768px) {
	.box-login .box-default {
		width: 90%;
	}
}