/* FontFamily  */
@font-face{
    font-family: MontserratExtraLight;
    src:url(font/Montserrat-ExtraLight.ttf);
}
@font-face{
    font-family: MontserratLight;
    src:url(font/Montserrat-Light.ttf);
}
@font-face{
    font-family: MontserratBlack;
    src:url(font/Montserrat-Black.ttf);
}
@font-face{
    font-family: MontserratBold;
    src:url(font/Montserrat-Bold.ttf);
}
@font-face{
    font-family: MontserratItalic;
    src:url(font/Montserrat-Italic.ttf);
}



/* ---------- */

/* Reset CSS */
*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}
body{
    font-family: MontserratExtraLight;
    background-color: #ECF1F4;
}

textarea:focus, input:focus, select:focus, button:focus{
    outline: 0;
} 
[data-anime]{
    transition: all 0.5s ease;
}
/* ----------- */

/* Login */ 
body{
    width: 100vw;
    height: 100vh;
}

#cont-login {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    background-image: radial-gradient(#000 30%, transparent),url("../img/Background/Fundo2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#logo-mbr{
    width: 10vw;
    height: 5vw;
    margin-bottom: 10%;
}

#orienta-tela {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10%;
}

#orienta-tela button {
    width: 10vw;
    height: 3vw;
    background-color: transparent;
    border: none;
    color: #3A3A3A;
    border-bottom: 5px solid #3A3A3A;
    margin: 0;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 1vw;
    font-weight: bolder;
    font-family: MontserratLight;
}

#orienta-tela button.selecionado{
    color: #00b2ea;
    border-bottom: 5px solid #00b2ea;
}

#modal-login {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: max-content;
    background-color: #fff;
    padding: 5%;
    padding-bottom: 1%;
    padding-top: 2%;
    border-radius: 15px;
}
#flip-container{
    width: 20vw;
    height: 20vw;
    margin-bottom: 10%;
}

#flip-box{
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.5s ease-in-out;
    transform-style: preserve-3d;
}

.faces {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
#box-login-form{
    transform: rotateY(0deg) translateZ(10vw);
}

#box-cadastro-form{
    transform: rotateY(180deg) translateZ(10vw);
}

#box-recover-pass {
    transform: rotateX(-90deg) translateZ(5vw);
}

.frontal {
    transform:  rotateX(0deg) rotateY(0deg);
}
.superior {
    transform:  rotateX(0deg) rotateX(90deg);
}
.atras {
    transform:  rotateX(0deg) rotateY(180deg);
}

#form_login {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#form_cadastro{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.info-login {
    margin: auto;
    color: #000;
    font-size: 1vw;
    font-weight: bolder;
    font-family: MontserratLight;
}
.nome_user {
    width: 100%;
    font-size: 0.75vw;
    font-family: MontserratLight;
    font-weight: bolder;
    height: 2.5vw;
    background-color: #fff;
    padding-left: 10%;
    border: 1px solid #000;
    border-radius: 5vw;
}
.email_user {
    width: 100%;
    font-size: 0.75vw;
    font-family: MontserratLight;
    font-weight: bolder;
    height: 2.5vw;
    background-color: #fff;
    padding-left: 10%;
    border: 1px solid #000;
    border-radius: 5vw;
}
.pass_user {
    width: 100%;
    font-size: 0.75vw;
    font-family: MontserratLight;
    font-weight: bolder;
    height: 2.5vw;
    background-color: #fff;
    padding-left: 10%;
    border: 1px solid #000;
    border-radius: 5vw;
}
.pass_user2 {
    width: 100%;
    font-size: 0.75vw;
    font-family: MontserratLight;
    font-weight: bolder;
    height: 2.5vw;
    background-color: #fff;
    padding-left: 10%;
    border: 1px solid #000;
    border-radius: 5vw;
}

.nome_user:placeholder-shown{

}
.email_user:placeholder-shown{
    background-image: url("../img/icons/Icon_email.png");
    background-repeat: no-repeat;
    background-position: 95% center;
}
.pass_user:placeholder-shown,.pass_user2:placeholder-shown{
    background-image: url("../img/icons/icon_senha.png");
    background-repeat: no-repeat;
    background-position: 95% center;
}

#remember-pass {
    text-decoration: none;
    color: #000;
    font-size: 1vw;
    font-weight: bolder;
    font-family: MontserratLight;
}
.button-submit {
    cursor: pointer;
    width: 50%;
    font-size: 0.75vw;
    font-family: MontserratLight;
    font-weight: bolder;
    height: auto;
    background-color: #00b2ea;
    border: 1px solid #00b2ea;
    color: #FFFFFF;
    padding: 5%;
    border-radius: 5vw;
}

#form_recupera_senha {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#info-recover {
    margin: 0 auto;
    color: #000;
    font-size: 1vw;
    font-weight: bolder;
    font-family: MontserratLight;
    text-align: center;
}

#link-mbr-contato {
    color: #000;
    text-decoration: none;
}
#link-mbr-contato:hover {
    color: #000;
    text-decoration: underline;
}

#contato-mbr{
    color: #000;
    font-size: 1vw;
    font-weight: bolder;
    font-family: MontserratLight;
}