#containerlogin1{
    width: 100vw;
    height: 100vh;
    filter: opacity(.80);
}

#login1{
    width: 30%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#form1Login1{
    width: 100%;
    box-shadow: 5px 5px 15px 2px #1b1b1ba1;
    border-radius: 12px;
    padding: 5px;
    background: #fff;
}

#logosLogin1{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 20px;
}

#logosLogin1 img{
    width: 70%;
    margin: 0 auto;
}

#rolLogin1{
    width: 100%;
    background: none;
    border-radius: 5px;
    padding: 5px;
}

#containerUsrLogin1{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 25px;
    align-items: center;
}

#containerUsrLogin1 input, #containerPassLogin1 input{
    padding: 5px;
    width: 85%;
}

#containerUsrLogin1 i, #containerPassLogin1 i{
    font-size: 25px;
}

#containerPassLogin1{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    align-items: center;
}

#containerBtn1Login1{
    width: 80%;
    margin: 0 auto;
    padding: 30px 0;
}

#btn1Login1{
    width: 100%;
    border-radius: 5px;
    background: #45a850;
    color: #fff;
    border: none;
    padding: 5px;
}

/* -------------------------------------------------------------------------- */
/*                                 Responsive                                 */
/* -------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px){
    #login1{width: 40%;}
}

@media only screen and (max-width: 900px){
    #login1{width: 50%;}
}

@media only screen and (max-width: 750px){
    #login1{width: 60%;}
}

@media only screen and (max-width: 650px){
    #login1{width: 80%;}
}

@media only screen and (max-width: 450px){
    #login1{width: 90%;}
}
/* -------------------------------------------------------------------------- */