.fila
{ position:relative; margin:auto; width:100%; height:auto; }

.fila
{  display:table; clear:both; }



#lblMenu
{display:none; }

main
{ padding: 0px; }

footer
{ padding-left:20px; }

header 
{position:relative; margin:0; padding:0;}

header h1
{position:absolute !important;}

#lblLogin
{ /*display:block;*/ font-size:20px; margin:8.5px; margin:0px;} /*-b*/

#principal
{ background:#FFF; }

.contenedor
{ display:flex; overflow:hidden; }

.imagenes
{ width:60%; /*height:539pt;*/ height:100%; overflow-y:hidden;/*position:relative;*/ position:absolute;  }  /*100%  -b*/

.img
{ width:100%; height:100%; display:block; position:absolute; z-index:0; }

figure, figure img 
{ width:100%; height:100%; /*position:relative;*/ }

.informacion
{ min-height:500px; height:auto; width:calc(100% / 5); background:#FFF; margin:50px auto 10px auto; display:block; box-shadow:1px 1px 10px rgba(0,0,0,0.5); border-radius:3px; }

.informacion p
{ width:100%; margin:0px 0px 0px auto; text-align:justify; line-height:15pt; font-style:italic; padding:0px 20px; }

.imgRound
{  width:100%; height:40%; margin:auto;   }

/*.imgRound img 
{ border-radius:50%; }*/

/* LOGIN */
.modal {padding:0px;}

#modalLogin {
min-height:580px !important;
}

#div1 /*#div2 -*/ /*-b -*/
{ width:40%; min-height:350px !important; /*height:50%; -*/ height:100%; /*position:relative; -*/ background:#000; margin:0px; background:rgba(150,10,10,1); background: rgba(16, 115, 167,1); background:#1b1c1e; float: right;/*background: rgb(20,168,137);   100%*/}

#div2 
{ background:#9999FF; background:#8585E0; background:linear-gradient(#4A66E3,#030F49); background:#FFF; }

#div1 #lbl1,#div1 #lbl2
{ width:100%; margin:auto; color:#FFF; text-align:center; font-size:20pt; font-style:italic; }

#div1 #lbl1
{ padding-top:150px; }

#div1 #lbl2
{ color:#DDD; font-weight:bolder; }

#power 
{ color:#333; font-weight:bold; text-align: center !important; margin: 0px auto;
    flex-wrap: wrap;
    width: 100%;
    float: right;}

#form0 
{ /*position:fixed;*/ z-index:2000; top:calc(100%/3); /*margin-left:calc(100%/2.7); -*/ /*margin-left:calc(50%/3.5);*/ }

#login 
{ width:330px; height:200px; border-radius:10px; background:rgba(0,0,0,0.85);  background:rgb(21, 91, 153); background:rgba(35, 71, 130, 0.90);  margin:auto; margin-top:40px; display:block;}

#login div, #login button
{ width:100%; height:calc(100%/3); overflow:hidden; outline:none; margin:auto;}

#login button
{ border-radius:8px; border:none; font-size:14px; color:#FFF; width:120px; height:30px; margin:15px; border-radius:3px; background:#FCA901; float:initial; }

#login div span,#login div input ,#login div label
{ color:#AAA; min-height:100%; display:block; margin:0px; float:left; position:relative; color:#FFF; }

#login div span
{ padding:9% 10px; font-size:2em; width:50px; }

#login div input,#login div label
{ color:#555; width:250px; min-height:45%; padding:5px 20px; font-size:15px; border:none; background:!important #FFF; }

#login div label
{ color:#AAA; padding:20px 0px 0px 8px; font-size:14px; color:#FFF; }


#divLogo {
    height: 100%;
    width: 40%;
    /*text-align: center !important;*/
    position:absolute;
    background:#1b1c1e;
    /*top:50px;*/ /*-b*/
    margin: auto;  
    display: block;
    flex-wrap: wrap;
}

#divLogo > figure {
    /*margin-left:calc(100%/ 3.5);*/
    width: 250px;
    height:170px;
    margin: 100px auto;
}

#msgAlert{ margin:auto !important;}
/* FIN LOGIN */

@media only screen and (max-width:800px) {
    #divLogo > figure 
    { width: 330px; height: 200px; top:20px; }
    
    /*#divLogo > figure, #form0 
    { margin-left:15%;  }*/

    #div1 
    { width: 100%; }

    .imagenes
    { width: 0%; }

.banner
{
    display:block;
    width:40%;
    background-color:rgba(0,0,0,0.5);
    height:70px;
    z-index: 2;
    position: absolute;
    /*top: 75%;*/
    bottom:0%;
    border-top-right-radius: 20px;
    padding:1%;
}

.banner > label{
    color:white;
    width:90% !important;
    float:left;
    text-align:center!important;
    font-size:14pt !important;
    margin:0 auto;
    padding:5px;
}
}

@media only screen and (min-width: 720px) {
       #divLogo > figure {
        top:25px;
        width: 330px;
        height: 200px;
        /*margin-left:calc(100%/2.7);*/}
       .banner
{
    display:block;
    width:40%;
    background-color:rgba(0,0,0,0.5);
    height:70px;
    z-index: 2;
    position: absolute;
    /*top: 75%;*/
    bottom:0%;
    border-top-right-radius: 20px;
    padding:1%;
}

.banner > label{
    color:white;
    width:90% !important;
    float:left;
    text-align:center!important;
    font-size:18pt !important;
    margin:0 auto;
    padding:5px;
}
}

@media (max-width:1024px), only screen and (max-device-width:1024px), (orientation:portrait) and (orientation:landscape)
{
    .contenedor
    { display:block; overflow:hidden; }

    .imgRound
    {  height:100%;  }

    .informacion
    { min-height:0 !important; height:auto; min-width:90%; width:95%; display:flex; }

    .informacion p
    { height:90%; width:90%; margin:0px 10px; padding:20px; position:relative !important; padding:5px 5px; line-height:10pt;  }
}

 /*ESTILO CON 800px DE ANCHO COMO TAMANIO MINIMO  */
/*@media only screen and /*(min-device-width:1024px)*/ /*and (max-width: 800px)*/
/*{   
    #login { margin-top:40px;}
}*/

.informacion > .divTexto > .lblTitulo {

    width:100% !important;
    float:left;
    text-align:center!important;
    font-size:15pt !important;
    padding:5px;
}

/*-------------------------------------*/
@media (max-width: 800px), /*only screen and (max-device-width:500px),*/ (orientation:portrait) and (orientation:landscape)
{
    #divLogo{
    height: 100%;
    width: 100%;
    }
}

@media (min-width: 801px) and (max-width: 1024px), /*only screen and (max-device-width:500px),*/ (orientation:portrait) and (orientation:landscape)
{
    #divLogo{
        height: 100%;
        width: 50%;
    }
    .imagenes{
        height: 100%;
        width: 50%;
    }
    #div1{
        height: 100%;
        width: 50%;
    }
}

@media (max-width: 350px), /*only screen and (max-device-width:500px),*/ (orientation:portrait) and (orientation:landscape)
{
    #divLogo{
    height: 100%;
    width: 100%;
    }
    #divLogo > figure 
    { width: 220px; height: 150px; top:20px; }
}
