/*     ###################################
       #      Configurações Iniciais     #
       ###################################    */

@import "https://fonts.googleapis.com/css?family=Open+Sans";

html, body {
    height: 100%;
    }

body {
    font-family: 'Open Sans', sans-serif;;
    background-color: #ECEFF4;
    font-size: 16px;
    color: #303030;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 50%, #E0E0E0 100%), #FFFFFF;
    background-size: 100% 100%;
    margin: 0px;
    padding: 0px;
    }

    h1 {
        font-size: 36px !important;
        font-weight: bolder !important;
        margin-top: 40px !important;
        margin-bottom: 10px !important;
    }

    h3 {
        font-size: 24px !important;
        margin-bottom: 40px !important;
    }

    h6 {
        font-size: 14px !important;
    }

.container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#logomarca {
    margin-top: 20px !important;
    width: 200px;
}

.input-group {
    border-radius: 10px !important;
    border: 0px  !important;
    background-color: #F2F2F2  !important;
    height: 50px !important;
    transition: all 0.2s ease-in-out !important;
}

.input-group:hover, .input-group:focus {
    background-color: #E0E0E0  !important;
}

input {
    border-radius: 0px 10px 10px 0px !important;
    border: 0px  !important;
    background-color: transparent  !important;
    color: #000  !important;
    font-size: 16px;
    font-weight: bold;
    height: 50px !important;
}

input::placeholder{
    color: #C0C0C0 !important;
}

.input-group-text {
    border: 0px  !important;
    background-color: transparent  !important;
    color: #000  !important;
    font-size: 16px;
    font-weight: bold;
    height: 50px !important;
}

#entrar {
    border-radius: 10px !important;
    font-size: 16px;
    font-weight: bold;
    height: 50px !important;
}

#div-background{
    height: 350px;
    background: radial-gradient(50% 150% at 50% 150%, #bbf1c4 0%, #2F9E41 100%), #2F9E41;
}

#div-aviso{
    color: #FFF;
}

#form-2 {
    display: none;
}

.mostra-recupera-senha {
    transition: all 0.2s ease-in-out !important;
    transform: translateX(0px);
}

.mostra-login {
    transition: all 0.2s ease-in-out !important;
    transform: translateX(0px);
}

.mostra-login-inicial {
    transform: translateY(-5px);
    animation-name: animafadein;
    animation-duration: 1s;
}

@keyframes animafadein {
    from {opacity:0}
    to {opacity:1}
}

#div-login {
    border-radius: 10px !important;
    height: 480px;
    padding: 5%;
    background-color: #FFF;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    transition: all 1s ease-in-out !important;
}

.rodape {
    font-size: 14px;
    color: #6C757D;
    letter-spacing: 0.2em;
    margin-bottom: 50px;
}

/*

#div-login:hover{
    transform: translateY(-5px);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08);
}

*/


/*     ###################################
       #      Tamanho máximo: 575px     #
       ###################################    */

       @media (min-width: 576px) {
        #div-login{
            width: 500px;
        }

        #form-login {
            width: 300px;
        }

    }


/*     ###################################
       #      Tamanho máximo: 575px     #
       ###################################    */

       @media (max-width: 575px) {
            h1 {
                font-size: 24px !important;
                font-weight: bolder !important;
                margin-bottom: 15px;
            }

            h3 {
                font-size: 17px !important;
                margin-bottom: 40px;
            }

            #logomarca {
                margin-top: 40px !important;
            }

            #div-login{
                height: 440px;
                transition: all 0s ease-in-out !important;
            }

            #div-aviso{
                padding-left: 2%;
                padding-right: 2%;
            }

            #div-background{
                background: radial-gradient(50% 168% at 50% 150%, #9effae 0%, #2F9E41 100%);
            }
            .rodape {
                margin-top: 10px !important;
                font-size: 11px;
                letter-spacing: 0.1em;
            }
       }