*{box-sizing: border-box;}


.clLoginSection{ width: 100%; max-width: var(--vMaxWidth); display: flex; flex-direction: column; align-items: center; min-height: 330px;



}

.clLoginForm input{ border-radius: 7px; line-height: 35px; height: 35px; font-size: 1.1em; text-align: left; vertical-align: middle; padding: 0px 5px;} 

.clLoginBox{ width: 100%; max-width: 900px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; position: relative; overflow: hidden; border-radius: 10px; min-height: 250px;
    
}

#dvRestoreBox{ width: 100%; max-width: 600px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; position: relative; overflow: hidden; border-radius: 10px; min-height: 250px; display: none;}


.clLoginContainer{width: 99%;display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: center;  border-radius: 10px; min-height: 300px; 
    background: #fff; padding: 10px;  position: relative; overflow: hidden; }



    .clBranch{width: 45%; max-width: 450px;  min-width: 382px; min-height: 200px; display: flex; flex-direction:column; align-items: center; justify-content: center;}

    .clLoginForm{width: 50%; max-width: 500px;  min-width: 382px; min-height: 200px;}
    
    .clLogoinLogo{width: 100%; max-width: 300px;}
    #dvRestorePassword{display: none;}
    
    .clFormText{width: 98%;
        border:0px solid transparent;
        border-radius: 2px;
        border-bottom: 1px solid #aaa;
        padding: 1em .5em .5em;
        padding-left: 2em;
        outline:none;
        margin:1.5em auto;
        transition: all .5s ease;}
    
    .clFormText:focus{border-bottom-color: #008080;
        box-shadow: 0 0 5px rgba(0,80,80,.4); 
        border-radius: 4px;
    }
    
    .clCenterRow{justify-content: center;}

    .clSignRow{flex-direction: row; flex-wrap: nowrap; display: flex;  flex-direction: row; justify-content: space-between;}
    .clRightRow{justify-content: flex-end;  flex-direction: row; display: flex;  }

    #dvRestoreLink{ width: 150px; text-decoration: underline;cursor: pointer; font-weight: bold; color: #2e99f0;}
    .clRestoreText{width: 100%; text-align: center; font-size: 1.3em; margin: 10px ; padding: 5px 10px 5px 5px;}
    .clInputRow{width: 100%; margin: 20px 10px;}
    
    .clInputRow >label{display: inline-block; width: 120px ;text-align: right; padding-right: 10px;}
    
    .clInputRow >label{display: inline-block; width: 120px ;text-align: right; padding-right: 10px;}
    #txMailto{ line-height: 35px; height: 35px; width:100%; min-width: 200px; max-width: 300px;}

#dvRestorePass {background: #4776f8; cursor: pointer; max-width: 150px; max-height: 40px; line-height: 40px ; text-align: center; border-radius: 7px; margin: 10px auto; color: #fff;}
    
/*-----------------------------------------slides-------------------------------------------------------------*/
.cSliderBox{ max-width: 1600px; margin: 70px auto 10px auto; 
    width: 100%;
    position: relative;
    
    overflow: hidden;}


    .c360Slider{ display:flex;  margin: 10px auto;
        width: 100%;
        max-width: 1600px; 
        position: relative;
        overflow: hidden;
        
       
       display:flex;
       flex-direction:row;flex-wrap:nowrap;
       
       background: #ffffff;
       
    }


    .sllogin{
        
    }


    .c360SliderString {
        width:200%; display: flex; flex-direction: row; flex-wrap: nowrap;
        height: auto;
        margin: 1%;
        
        
        padding: 5px;
        
        overflow: hidden;
    }




    #dvHdSlider {
        max-width: 1600px;
        width: 100%;
        overflow-x: visible; /* Para permitir ver las cajas que se desbordan */
        margin: auto;
        position: relative;
    }
    
    #dvSliderString {
        display: flex;
    }
    
    .cItem {
        flex: 0 0 calc((100% - 80px) / 4); /* Ajusta el ancho para que 4 cajas ocupen el contenedor */
        margin: 0 10px; /* Margen de 10px entre cajas (5px a cada lado) */
        box-sizing: border-box;
        border-radius: 12px;
        overflow: hidden;
        background: #fafafa;

        aspect-ratio: 1 / 1.2 !important;

        box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    }
    
    .cItem img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    





    @media (max-width: 768px) {
        
        .clLoginContainer{margin: 10px;}
        .clBranch{ width: 100%; max-width: 1000px;}
        .clLoginForm{ width: 100%; max-width: 1000px; }
        .clFormRow{}
    
    }