/*=========== FONT SIZE ==========*/  
h3 {
    font-size: 1.2em;
}
p {
    font-size: 1em;
}

/* PÁGINA DE LOGIN */
.espaco-login {
    width: 80%;
    margin-top: 10%;
    margin-left: 10%;
    padding: 6% 5%;
    background-color: #E7F6F0;
    text-align: left;
}
#topo-login {
    width: 100%;
    position: relative;
    margin-bottom: 20%;
}
.btn-voltar {
    position: absolute;
    background-color: #AFE1CE;
    font-size: 1.2em;
    padding: 3% 3.5%;
    text-align: center;
}
.titulo-login {
    text-align: center;
    padding: 3% 3.5%;
    font-size: 1.3em;
}
.campo_usuario, .campo_senha {
    width: 100%;
    padding: 5% 4%;
    margin-bottom: 10%;
}
.campo_senha {
    margin-bottom: 8%;
}
.texto {
    padding: 1%;
}
.rec-senha {
    color:dodgerblue;
}
.botoes-login {
    width: 100%;
    margin-top: 20%;
    background-color: #AFE1CE;
    cursor: pointer;
}
.btn_ir_login {
    width: 40%;
    margin-left: 30%;
    padding: 3%;
}

@media screen and (min-width: 720px) {
    .espaco-login {
        width: 70%;
        margin-left: 15%;
        padding: 4% 5%;
        margin-top: 0;
    }
    #topo-login {
        margin-bottom: 13%;
    }
    .btn-voltar {
        font-size: 1.3em;
        padding: 2.5% 3%;
    }
    .titulo-login {
        padding: 2.5% 3%;
        font-size: 1.5em;
    }
    .campo_usuario, .campo_senha {
        width: 100%;
        padding: 3.5% 4%;
        margin-bottom: 7%;
        font-size: 1em;
    }
    .texto, .rec-senha {
        padding: 0.5%;
        font-size: 1em;
    }
    .campo_senha {
        margin-bottom: 5.5%;
    }
    .botoes-login {
        margin-top: 18%;
    }
    .btn_ir_login {
        width: 35%;
        margin-left: 32.5%;
        padding: 3%;
    }
}

@media screen and (min-width: 960px) {
    .espaco-login {
        width: 50%;
        margin-left: 25%;
        padding: 3% 4%;
    }
    #topo-login {
        margin-bottom: 15%;
    }
    .btn-voltar {
        font-size: 1.4em;
        padding: 2% 2.5%;
    }
    .titulo-login {
        padding: 1% 2.5%;
        font-size: 1.7em;
    }
    .campo_usuario, .campo_senha {
        width: 100%;
        padding: 3.5% 4%;
        margin-bottom: 6.5%;
        font-size: 1.2em;
    }
    .texto, .rec-senha {
        font-size: 1.1em;
    }
    .campo_senha {
        margin-bottom: 5%;
    }
    .botoes-login {
        margin-top: 15%;
    }
    .btn_ir_login {
        width: 30%;
        margin-left: 35%;
        padding: 2.5% 3%;
    }
}


/* PÁGINA DE CADASTRO */
#formulario-cadastrar {
    z-index: 3;
}
.espaco-cadastro {
    width: 100%;
    background-color: #E7F6F0;
    padding: 6% 5%;
    margin-top: 10%;
}
.titulo-cadastro {
    margin-bottom: 6%;
    font-size: 1.2em;
}
#lado1, #lado2 {
    width: 100%;
    margin-top: 6%;
    text-align: left;
}
#lado1 label, #lado2 label {
    margin-left: 5px;
}
.nome, .genero, .email, .email2, .data, .usuario, .senha, .senha2 {
    width: 100%;
    margin-bottom: 5%;
    padding: 4% 4%
}
.genero, .data {
    padding: 4% 3%;
}
#confirmar-cadastro {
    text-align: left;
    padding: 0.75%;
}
.btn_ir_cadastrar {
    width: 50%;
    background-color: #AFE1CE;
    padding: 2%;
    margin: 6% 0 0 25%;
    cursor: pointer;
}

@media screen and (min-width: 720px) {
    .espaco-cadastro {
        width: 90%;
        margin-left: 5%;
        margin-top: 0;
    }
    .titulo-cadastro {
        font-size: 1.5em;
    }
    #lado1, #lado2 {
        font-size: 1.2em;
        margin-top: 4%;
    }
    .nome, .genero, .email, .email2, .data, .usuario, .senha, .senha2 {
        width: 100%;
        margin-bottom: 3%;
        padding: 3% 4%;
    }
    .genero, .data {
        padding: 3% 3%;
    }
    .btn_ir_cadastrar {width: 35%;
        margin: 6% 0 0 32.5%;
        font-size: 1.2em;
    }
}

@media screen and (min-width: 960px) {
    .espaco-cadastro {
        width: 80%;
        margin-left: 10%;
    }
    .titulo-cadastro {
        font-size: 1.7em;
    }
    #lado1, #lado2 {
        width: 49%;
        margin: 0 0 2% 0;
        float: left;
    }
    #lado1 {margin-right: 2%;}
    .nome, .genero, .email, .email2, .data, .usuario, .senha, .senha2 {
        width: 100%;
        margin-bottom: 6%;
        padding: 3% 4%;
    }
    .btn_ir_cadastrar {
        width: 30%;
        margin: 4% 0 0 35%;
        font-size: 1.2em;
    }
}