@charset "UTF-8";

@media screen and (max-width: 767px) {
    /*Para celulares*/

    section#login-cadastro {
        width: 55vw;
        height: 80vh;
    }

    section#login {
        position: absolute;
        top: 45%;
        left: 50%;


        width: 55vw;
        height: 515px;
    }


    section#login #img {
        align-content: center;
        top: 0;
        margin: 5%;
        padding: auto;
        height: 30vh;
        width: 50vw;
        transition: transform 0.6s ease, top 0.6s ease, bottom 0.6s ease;
    }

    /*cadastro*/

    #form-cadas {
        left: 100%;
        opacity: 0;
        height: 40vh;
    }

    section#login.active #img {
        position: relative;
        top: 55%;
        /* antes 55% */
        right: 2%;
        bottom: 0;
        height: 35vh;
        /* antes 225px */
        width: 94%;
        /* antes 250px */
        background-size: cover;
        background-position: center;
        border-radius: 5px 0;
    }



    section#login.active #container-forms {
        margin-top: 0;
        transform: translateY(-235px);
    }

}




@media screen and (min-width: 768px) {
    /* para tablets*/

    body {
        background-image: url(imagens/imagem\ de\ fundo_telasMaiores.jpg);
    }

    section#login-cadastro {
        width: 75vw;
        height: 70vh;
    }

    section#login {
        display: flex;
        position: relative;
        padding: 5%;
        width: 80vw;
        height: 60vh;
        margin: auto;
        transform: none;
        top: 0;
        left: 0;
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.6s ease-in-out;
    }


    section#login #img {
        position: relative;
        width: 50%;
        height: 95%;
        border-radius: 5px;
        background: url(../Estilos/imagens/pexels-bao-dang-1259885-3700369.jpg) center/cover no-repeat;
        transition: all 0.6s ease-in-out;


        right: 2%;
        top: 3%;
    }




    #container-forms {
        position: relative;
        width: 50%;
        height: 100%;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color2);
        overflow: hidden;
        transition: all 0.6s ease-in-out;
        z-index: 2;
    }


    .form-box {
        display: flex;
        flex-direction: column;
        justify-content: center;

        align-items: center;
        padding: 0px;
        gap: 12px;


    }

    div.campo {
        display: flex;

        align-items: center;

        background-color: var(--color1);
        border-radius: 4px;
        padding: 6px 10px;
        margin-top: 8px;
        height: 40px;

    }

    div.campo i {
        color: white;
        font-size: 1em;
        margin-right: 8px;

    }

    div.campo input {
        flex: 1;

        height: 100%;

        color: white;
        font-size: 1em;
    }

    section#login.active #form-login {
        left: -100%;
        opacity: 0;
    }

    section#login.active #form-cadas {
        left: 0;
        opacity: 1;
    }



    section#login.active #img {
        right: 2%;
        top: 3%;
    }

}














@media screen and (min-width: 992px) {

    /*para desktop*/
    body {
        background-image: url(imagens/imagem\ de\ fundo_telasMaiores.jpg);
    }


    .forms {
    display: flex;             
    flex-direction: column;     
    justify-content: flex-start;
    align-items: flex-start;   
    width: 100%;               
    gap: 4px;                  
    
    box-sizing: border-box;
}

.forms .campo {
    display: flex;
    align-items: center;
    width: 100%;               
   
    border-radius: 4px;
    
}

.forms .campo i {
    color: white;
    margin-right: 8px;
    font-size: 1em;
}

.forms .campo input {
    flex: 1;                   
  
    color: white;
    font-size: 1em;
    padding: 5px;
}



    div#form-login>h1 {
        text-align: center;
        margin-bottom: 15px;
    }

    div#form-login>p {
        font-size: 1.2em;
    }

    div#form-cadas>h1 {
        text-align: center;
        margin-bottom: 10px;
    }

    div#form-cadas>p {
       font-size: 1.2em;
    }

    div.campo{
       
        width: 130%;
    }

     div.campo i {
        color: white;
        font-size: 1em;
        margin-right: 8px;

    }

    div.campo input {
        flex: 1;

        height: 100%;
        width: 70%;

        color: white;
        font-size: 1em;
    }

    #btn-entrar{
        margin-bottom: 0px;   
    }

    #btn-esqueci {
    margin-top: 0px;       
    margin-bottom: 3px;     
    width: 100%;
    height: 38px;
}



}