*{margin:0;padding:0;box-sizing:border-box;font-family:Arial, sans-serif;}
body,html{height:100%;}

.container{
    display:flex;
    height:100vh;
    width:100%;
}

/* box de login */
.login-box{
    width:30%;
    min-width:320px;
    background:#f8f8f8;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px;
    box-shadow:2px 0 10px rgba(0,0,0,0.1);
}
.login-box img{width:180px;margin-bottom:20px;}
.login-box h2{margin-bottom:20px;color:#333;}

.login-box form{width:100%;max-width:300px;}
.login-box input{
    width:100%;
    padding:12px;
    margin:10px 0;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:14px;
}
.login-box button{
    width:100%;
    padding:12px;
    background:#2c4bdb;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:16px;
    cursor:pointer;
}
.login-box button:hover{background:#1a36a5;}

.alert{
    color:red;
    font-size:12px;
    margin-bottom:10px;
    text-align:center;
}
.alert ul{list-style:none;padding:0;}

/* banners */
.banner-box{
    flex:1;
    position:relative;
    overflow:hidden;
}
.banner{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity 1s ease-in-out;
}
.banner.active{opacity:1;}

/* responsivo */
@media(max-width:800px){
    .banner-box{display:none;}
    .login-box{width:100%;box-shadow:none;
}