@charset "UTF-8";

@media screen and (min-width: 680px) and (max-width: 1024px) {
    html, body {
        background-image: linear-gradient(45deg, #534C49, #80736d);
    }

    section#login {
        width: 70vw;
        min-height: 300px;
        background-image: linear-gradient(45deg, #331C13, #5c3d30);
    }

    section#login > div#imagem {
        float: left;
        width: 45%;
        height: 100%;
        background: #331C13 url(../imagens/login.jpg) no-repeat;
        background-size: cover;
        background-position: center center
    }

    section#login > div#formulario {
        padding-top: 20%;
        width: 70vw;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1400px) {
    html, body {
        background-image: linear-gradient(45deg, #534C49, #80736d);
    }

    section#login {
        width: 850px;
        height: 600px;
        background-image: linear-gradient(45deg, #331C13, #5c3d30);

    }

    section#login > div#imagem {
        background: #331C13 url(../imagens/login.jpg) no-repeat;
        background-size: cover;
        background-position: center center;
        float: left;
        width: 45%;
        height: 100%;
    }

    section#login > div#formulario {
        padding-top: 20%;
        width: 100%;
    }
}

@media screen and (min-width: 1401px) {
    html, body {
        background-image: linear-gradient(45deg, #534C49, #80736d);
    }

    section#login {
        max-width: 1224px;
        max-height: 800px;
        background-image: linear-gradient(45deg, #331C13, #5c3d30);

    }

    section#login > div#imagem {
        float: right;
        background: #331C13 url(../imagens/login.jpg) no-repeat;
        background-size: cover;
        background-position: bottom center;
        width: 45%;
        height: 100%;
    }

        section#login > div#formulario {
        padding-top: 12%;
        width: 100%;
}