/**
    Efeito entrada Imagem e Form (Login e Esqueceu senha)
**/
.entradaImg{
    -webkit-animation-name: entradaImg;
    animation-name: entradaImg;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes entradaImg {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes entradaImg {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}


.entradaForm {
    -webkit-animation-name: entradaForm;
    animation-name: entradaForm;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes entradaForm {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes entradaForm {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.iconesSociais {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: iconesSociais;
    animation-name: iconesSociais;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes iconesSociais {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes iconesSociais {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
} 

/**
    CSS do Cursor e escrita.
 **/
span#cursor {
    display: inline-block;
    background-color: #ccc;
    margin-left: 0.1rem;
    width: 3px;
    height: 25px;
    animation: blink 1s infinite;
}

    span#cursor.typing {
        animation: none;
    }

@keyframes blink {
    0% {
        background-color: #ccc;
    }

    49% {
        background-color: #ccc;
    }

    50% {
        background-color: transparent;
    }

    99% {
        background-color: transparent;
    }

    100% {
        background-color: #ccc;
    }
}

/**
    Login
*/

#barraSuperior {
    background-color: transparent;
}

#logomarcaBarraSuperior > img {
    height: 85%;
}

#logomarcaBarraSuperior > #Soft {
    color: #FFF;
    display: flex;
    color: #2a507c;
    font-size: 25pt;

    
}

#logomarcaBarraSuperior > #Line {
    color: #107400;
    font-size: 25pt;
}

.efeitoEscritaLogo {
    text-align: center;
}

    .efeitoEscritaLogo > #msgBemVindo {
        font-size: 25pt;
        color: #737475;
    }

#tipo-mensagem {
    /*@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap';*/
    font-size: 20pt;
    font-family: 'Montserrat', sans-serif;
}

#redeSocial {
    margin-top: 7%;
}

#redeSocial-icones {
    text-align: center;
    margin-left: 15%;
}


#esqueciSenha{
    display: none;
}

#loginEmailLabel {
    color: #737475;
    margin-bottom: 3%;
    margin-left: 3%;
}

#loginSenhaLabel {
    color: #737475;
    margin-bottom: 3%;
    margin-left: 3%;
}

#esqueciSenhaImg{
    display: none;
}
/**
    esqueciSenha
*/
.textoForm {
    text-align: center;
}

    .textoForm  > h2 {
        font-size: 15pt;
        color: #737475;
    }

    .textoForm > span {
        font-size: 13pt;
        font-family: 'Montserrat', sans-serif;
        margin-top: 15%;
    }

    .textoForm > #mensagem{
        margin-top: 3%;
    }

/*/#esqueceuSenhaLabel {
    color: #737475;
    margin-bottom: 3%;
    margin-left: 3%;
}*/

.msgSenha {
    text-align: center;
}

    .msgSenha > #msgEsqueciSenha {
        font-size: 20pt;
        color: #737475;
    }

#escritaSenha {
    display: none;
}

.receberSenha{
    display: none;
}

.inputEsqueciSenha{
    display: none;
}