@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;700&display=swap');   

/*all page*/
    body{
        font-family: 'Titillium Web', sans-serif;
        font-size: 13px;
        line-height: 1.42;
        color: #555555;
        background-color: #ffffff;
        margin:0;
        width: 100%;
        height: 100%;
    }
    
    li{
        list-style: none;
    }
    
    a{
        text-decoration: none;
        cursor: pointer;

    }

    .container{
        max-width: 1200px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 0px;
        padding-right: 0px;
        position:relative;
    }
 
    .container_banner{

        background-repeat: no-repeat;
        background-size: 100%;

    }

    .card{
        width: 90%; 
        height: 300px;
        margin: 0.5rem auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: cover;
        background-attachment: unset;
        background-repeat: no-repeat;
        background-position: center;
        transition: all .25s linear;
    }

    .card:hover{
            box-shadow: 0px 0px 3px 4px rgb(201 200 200);
            
    }



    .imagen1{
        background-image:url(../img/Imagen1.png);
    }

    .imagen2{
        background-image:url(../img/Imagen2.png);
    }

    .imagen3{
        background-image:url(../img/Imagen3.png);
    }

    .card_img_cont{
       width: 90%;
       display: flex;
       margin-top: 0;
       align-items: flex-start;
       height: 90%;
    }
    
    .card_img{
        width: 18%;
        /*position: absolute;*/
        image-rendering: -webkit-optimize-contrast;
    }

    .card_button{
        position: absolute;
        padding: 0 2rem;
        color: white;
        border-radius: 1rem;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 2px;
        border: 2px solid;
        max-width: 40%;
        text-align: center;
        transition: all .3s linear;
    }

    .card_button:hover{
        
        cursor: pointer;
    }

    .c_b_v{
        background:#00b050;
    }

    .c_b_w{
        background:white;
        color:gray;
    }

    .c_b_l{
        background:#91c73e;
    }

    /*header*/

    header {
        
    }
    .header_logo_p{
        height: 15vh;
        margin: 0.75rem 2.5rem;
    }

    .logo_img{
        height: 100%;
        image-rendering: -webkit-optimize-contrast;
        margin: auto;
        display: block;
    }

    .header_logos{
        display: flex;
        padding: 10px 0;
        justify-content: space-between;
        background-image:url(../img/CABECERA.JPG);
        background-size: cover;
        background-position:center;
       
    }

    .header_link{
        float:left;
    
    }
    
    .header_link_icon{
        height: 20px; 
        margin-right: 5px;
    }
    
    .header_link_text{
        color: #8e9ea5;
        font-size: 14px;
        display: inline;
    }

    .header_social{
        float:left;
        border-top: 4px solid #91c73e;
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header_social_img{
        height: 30px; 
        image-rendering: -webkit-optimize-contrast;
    }

    .mark{
        border-right: 2px solid #91c73e;
    }
    
    .logos_sec_card{
        display: inline-flex;
        height: fit-content;
        padding: 0 0.5rem;
    }
    
    .logos_sec{
        
    display: flex;
    margin: 0.25rem 0.5rem;
    justify-content: space-around;
    flex-wrap: wrap;
    }

    .img_log_link{
        cursor: default;

    }

    .img_log {
    height: 40px;
    padding: 10px 0px;
    image-rendering: -webkit-optimize-contrast;
    }
    
    .lista_header{
      margin: 0;
      padding: 0;
    }

    .menui{
        display:none;
    }
    
    .menu{
       display: flex;
       justify-content: space-between;
       padding: 0;
       align-items: center;
       margin: 0;
       text-align: center;
       flex-wrap: wrap;
       justify-content: center;
       padding: 10px 0;
       transition:all .2s linear;
       background: #91c73e;
       border-radius: 0 0 0.5rem 0.5rem;
    }
    
    .menu_li{
       margin: 0 15px;
   
    }

    .menu_li_a{
       font-size: 1rem;
       color: #ffffff;
       font-weight: 400;
       transition: all .25s cubic-bezier(0, 0, 0.2, 1);
      
    }
    
    .menu_li_a:hover{
       border-bottom: 2px solid;
      
    }

    /* INDEX  */

    .container_picture{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0px;
        grid-template-rows: 200px;
        height:800px;
        padding: 1.5rem 0;
        /*border: 1px solid #c5c5c5;*/
        transition: all .3s linear;
     }

    .picture_card{
        width: 400px;
        height: 200px;
        transition:all .3s linear;
        background-size: cover;
           
    }
    .picture_card:hover{
        filter: drop-shadow(1.5px 1.5px 3px #91c73e); 
    }

    .disable{

        cursor: default;
        filter: brightness(0.9);

    }
    .disable:hover{
        filter: brightness(0.9);

    }
    
    .p1{  
        grid-row: 1; background-image: url(../img/GRISES/01-PLATAFORMA.jpg);
    }
    .p1:hover{ background-image: url(../img/GRISES/01-PLATAFORMA.jpg);}
    .p2{
        grid-row: 1; background-image: url(../img/GRISES/02-PROGRAMA.jpg);
    }
    .p2:hover{ background-image: url(../img/COLOR/02-PROGRAMA-COLOR.jpg);}
    .p3{
        grid-row: 1; background-image: url(../img/GRISES/03-PROYECTOS.jpg);
    }
    .p3:hover{ background-image: url(../img/COLOR/03-PROYECTOS-COLOR.jpg);}
    .p4{
        grid-row: 2; background-image: url(../img/GRISES/04-EMPRESAS.jpg);
    }
    .p4:hover{ background-image: url(../img/COLOR/04-EMPRESAS-COLOR.jpg);}
    .p5{
        grid-row: 2; background-image: url(../img/GRISES/05-INFORMACION-TECNICA.jpg);
    }
    .p5:hover{ background-image: url(../img/COLOR/05-INFORMACION-TECNICA-COLOR.jpg);}
    .p6{
        grid-row: 2; background-image: url(../img/GRISES/06-SARAS.jpg);
    }
    .p6:hover{ background-image: url(../img/COLOR/06-SARAS-COLOR.jpg);}
    .p7{
        grid-row: 3; background-image: url(../img/GRISES/07-PROCEDIMIENTOS.jpg);
    }
    .p7:hover{ background-image: url(../img/COLOR/07-PROCEDIMIENTOS-COLOR.jpg);}
    .p8{
        grid-row: 3; background-image: url(../img/GRISES/08-NOTICIAS.jpg);
    }
    .p8:hover{ background-image: url(../img/COLOR/08-NOTICIAS-COLOR.jpg);}
    .p9{
        grid-row: 3; background-image: url(../img/GRISES/09-EVENTOS.jpg);
    }
    .p9:hover{ background-image: url(../img/COLOR/09-EVENTOS-COLOR.jpg);}
    .p10{
        grid-row: 4; background-image: url(../img/GRISES/10-ASISTENCIA-TECNICA.jpg);
    }
    .p10:hover{ background-image: url(../img/COLOR/10-ASISTENCIA-TECNICA-COLOR.jpg);}
    .p11{
        grid-row: 4; background-image: url(../img/GRISES/11-CONTACTOS.jpg);
    }
    .p11:hover{ background-image: url(../img/COLOR/11-CONTACTOS-COLOR.jpg);}
    .p12{
        grid-row: 4; background-image: url(../img/GRISES/12-NUEVO-CREDITO-MIVIVIENDA.jpg);
    }
    .p12:hover{ background-image: url(../img/COLOR/12-NUEVO-CREDITO-MIVIVIENDA-COLOR.jpg);}


    /*footer*/
    footer{
        background: #91c73e;
        padding: 2rem 0;
        color: #FFF;
        margin-top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: relative;
        text-align:center;
    }

    .img_footer{
        display: block;
        height: auto;
        max-width: 8rem;
        filter: drop-shadow(2px 4px 6px black);
    }

    .f_div{
        font-size: 0.9rem;
    }

    .f_ico{
        align-content: center;
        margin-top: 0.5rem;
        padding: 0.5rem 0 1rem;
    }

    .f_ico_i{
        color: white;
        font-size: 2rem;
        margin: auto .5rem;
    }

    .f_a{
        color:white;
    }
    
    /* principal*/
    .btn_carousel{
        font-size: 6rem;
        color: #8d8b8b;
    }
    
    .lu1{
        background-image: url(../img/bot-home2_off.jpg);
        width: 33.33%;
        height: 333px;  
    }
    
     .lu1:hover{
        background-image: url(../img/bot-home1_on.jpg);
    }

    .c_principal{
        display: flex;
        flex-wrap: wrap;
        
        
    }

    .socios_title{
        display: table;
        width: 100%;
        border: 2px solid #f2f2f2;
        background-color: #fff;
        border-radius: 5px;
        background-clip: padding-box;
        margin: 10px 0;
        padding: 20px;
        width: 95%
    }
    
    .socios_txt{
        width: 99%;
        color: #303641;
        font-size: 21px;
        margin: 0;
        font-weight: 500;
    }
    
   

    
    /***/
    
    ._conten_cards{
        align-items: center;
        width: 100%;
        margin: 10px 0;
        display: flex;
        justify-content: flex-start;  
    }
    
    ._img_cont{
        width: 100%;
        border-radius: 1em;
        min-height: 200px;
        object-fit: cover;
        transition: all 0.25s linear;
        cursor: pointer;
    }

    .button_con{
        
        padding: 0.5em 3EM;
        TEXT-SHADOW: 2px 2px 3px black;
        background: #00b050;
        color: white; 
        font-size: medium;
        font-weight: 700;
        transition: all 0.35s ease-in-out;
    }
    

     
     /* PROGRAMA */
	 
	 .pro_con{
		 display:flex; 
		 align-items: center;
		 justify-content: space-evenly; 
		 margin: 3rem auto;
		 flex-wrap:wrap;
	 }
	 
	 .pro_con_text{
		 width:48%; 
		 text-align: center;
	 }
	 
     .pro_text{
         text-align:justify; 
         letter-spacing: 0.5px;
         transition: all 0.05s linear;
         cursor:text;
         font-size: 0.85rem;
     }

     .pro_text_cap{
         color: #6bc048; 
         font-weight: 700;
     }
	 
	 .pro_enc{
         display: flex;
         justify-content: center;
         /*border-bottom: 4px solid #91c73e;*/
         border-radius: 0.5rem;
         color: #91c73e;
         /*border-top: 4px solid #91c73e*/;
         margin: 1rem 0;
         /*border-right: 1.5px solid;
         border-left: 1.5px solid;*/
         box-shadow: 0px 0px 4px 1px rgb(185 185 185);
 
	 }
	 
	 .pro_enc_con{
		 display: flex; 
		 align-items: center; 
         margin: 0.8rem 1rem;
	 }
	 
	 .pro_enc_text{
		 color:#91c73e;
		 font-weight: 700;
		 font-size: xx-large;
         text-align:center;
         margin:0;
	 }
	 
	 .pro_img_con{
		 width:48%; 
		 text-align: center;
	 }
	 
	 .pro_img_img{
		 width:70%;
	 }
	 
	 

     /* SISTEMA RES SOCIAL*/

           .modaltitle{
                background: #91c73e;
                color: white;
                padding: 1rem;
                text-align: center;
                border-radius: 1rem 0 0;
				margin-bottom: 0;
           }

           .modalDialog {
                position: fixed;
                font-family: Arial, Helvetica, sans-serif;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: rgb(112 135 77 / 57%);
                z-index: 99999;
                opacity: 0;
                transition: opacity 400ms ease-in;
                pointer-events: none;
            }

            .modalDialog:target {
                    opacity: 1;
                    pointer-events: auto;
            }

            .modalDialog > div {
                    width: 550px;
                    position: relative;
                    margin: auto;
                    background: #fff;
                    -moz-transition: opacity 400ms ease-in;
                    transition: opacity 400ms ease-in;
                    border-radius:1rem;
             }

            

            .modallink{
                   font-size:1.1em;  
                   color: #555555;       
            }

            .modallink_otros{
                   font-size:1em;  
                   color: #555555;       
            }

            .modallink_otros:hover{
                color: #91c73e;
                text-decoration:underline;      
            }

            .modallink:hover{
                color: #91c73e;
                text-decoration:underline;
            }

            .close {
                background: #91c73e;
                color: #FFFFFF;
                line-height: 25px;
                position: absolute;
                right: -12px;
                text-align: center;
                top: -10px;
                padding: 0.25rem;
                text-decoration: none;
                font-weight: bold;
                border-radius: 2rem;
                box-shadow: 1px 1px 3px #000;
                display: flex;
                align-items:center;
            }

                .close:hover {
                    background: #00d9ff;
            }

            .p_otros{
                margin:0.2;

            }

     /* PROCEDIMIENTOS */


     .proc_cont{
         display: flex;
         margin: 4em .5em;
     }

     .proc_contlogo{
         text-align: center;
         margin: auto;
         width: 33%;
     }

     .proc_contlogo_title{
         font-size: 1.8em;
     }

     .proc_contlogo_img{
         width: 60%;
     }

     .proc_contcert{
         display: flex;
         flex-wrap: wrap;
         align-content: center;
         width: 66%;
         justify-content: center;
     }

     .proc_contcert_title{
         text-align: center;
         width: 100%;
         font-weight: 700;
         font-size: 1.1em;
     }

     .proc_contcert_cert{
         width: 100%;
         display: flex;
         justify-content: space-evenly;
         align-items: end;
         padding: 1em;
     }

     .proc_contcert_cert_group{
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         margin: 0 0.8%;
     }

     .proc_contcert_cert_group_img{
         box-shadow: 0px 0px 3px 0px #cfcbcb;
         border-radius: 0.5em;
         width: 70%;
     }

     .proc_contcert_cert_group_button{
         background: #a7babb;
         border-radius: 1rem;
         margin: 0.8em auto;
         padding: 0.8em;
         text-align: center;
         color: white;
         font-size: 1.1em;
         filter: drop-shadow(1px 1px 2px black);
         transition: all .35s linear;
     }

     .proc_contcert_blink{
         background: cornflowerblue;
         color: white;
         padding: 1em;
         margin: 0.5em;
         border-radius: 1em;
         font-size: 1.1em;
         text-align: center;
         /*filter: drop-shadow(1px 1px 2px black);*/
         transition: all .35s linear;
     }

     .proc_contcert_cert_group_button:hover{
         background: #91c73e;
     }

     .proc_disable{
         background:#e3e3e3;
         color:#999999;
         cursor:default;
     }


     /*.proc_contcert_blink:hover{
         background: #91c73e;
     }*/

    
     
     /* CONTACTOS */

     .co_title{

     }

     .co_title_text{
         text-align: center;
         width: 30%;
         margin: auto;
         border-bottom: 2px solid #91c73e;
         padding: 0.5em;
         color: #91c73e;
         font-size: 1.5rem;
         letter-spacing: 1px;
     }

     .co_cont{
         display: flex;
         flex-wrap: wrap;
         justify-content: space-evenly;
     }

     .co_cont_card{
         width: 30%;
         margin: auto;
         box-shadow: 0px 1px 8px rgb(0 0 0 / 20%);
         padding: 2rem 0.5rem 1rem;
         margin: 1rem auto;
         border-radius: 1em;
         color: #4b6945;
         text-align:center;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .co_cont_card_t{
         display: flex;
         justify-content: center;
     }

     .co_cont_card_t_i{
         background: #91c73e;
         font-size: 3rem;
         color: white;
         border-radius: 3rem;
         padding: 1rem;
         border: 2px solid #91c73e;
         position: absolute;
     }


     .co_cont_card_t_back{
         padding: 1.5rem;
         border: 2px solid #91c73e;
         width: 80%;
         margin: 3.5rem auto 1rem;
         border-radius: 1em;
         overflow-wrap: break-word;
     }


     .co_cont_card_t_link{
         color: #91c73e;
         font-weight: 700;
         font-size: 1rem;
         
     }

     

     /* NOTICIAS Y EVENTOS*/

     .note_card{
         display: flex;
         padding: 1rem 0;
         margin: 1rem auto;
         width: 90%;
     }

     .note_card_fec{
         width: 20%;
         text-align: center;
         padding:.5rem

     }

     .note_card_fec_text{
         color:#91c73e;
     }

     .note_card_fec_ico{
         margin: 0 1rem;
     }

     .note_card_not{
         width: 80%;
         padding: 0 1rem;
         border-left: 1px dotted #91c73e;
     }

     .note_card_not_title{
         color:#91c73e;
     }

     .note_card_not_text{
         font-size: 1rem;
         text-align: justify;
     }

     .note_card_not_link{
         color: #91c73e;
         font-weight: 700;
     }


    
        
    .div_p {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-flow: wrap;
     margin: 0;
     position:relative;
   }

.show{
         opacity:1;
         max-height:inherit;
     }


@media screen and (max-width: 1250px) {


    /* INDEX*/

    .container_picture{
        width: 800px;
        height: 1200px;
        grid-template-columns: repeat(2, 1fr);
    }

    .p1{
        grid-row: 5;
    }
    .p4{
        grid-row: 5;
    }
    .p7{
        grid-row: 6;
    }
    .p10{
        grid-row: 6;
    }

/* footer*/
  .f_div,
  .f_ico{
          margin: 0 1rem;
  }

}


@media screen and (max-width: 1180px) {

    .logos_sec{
        align-items:center;
    }

    .logos_sec_card{
        padding: 0;
    }

    .img_log{
        padding: 0;
        border: solid 2px #f1f1f1;

    }

    .mark{
         border-bottom:0;
         border-right:0;
    }

    .menui{
        display: block;
        cursor: pointer;
        padding: 0 0.5rem;
        transition: all 0.4s linear;
        font-size: 3em;
        text-align: end;
        color: white;
        background: #91c73e;
        /*border-radius: .5rem .5rem 0 0;   
        box-shadow: inset 0PX 0PX 3PX 0PX white;*/  
    }

    .show{
         opacity:1;
         max-height:inherit;
     }

    .show_none{   
        opacity:0;
        max-height:0;
    }

    .show_index{
        z-index:1;
    }
    
    .menu{
        display:block;
        /*background: white;*/
        padding:0;
        background: #e9f3da;
        margin: auto;
        position: absolute;
        right: 0;
        left: 0;
        /*border: 2px solid #91c73e;*/
        border-radius: 0 0 0.5rem 0.5rem;
        box-shadow: inset 0PX 0PX 3PX 0PX white;
    }

    .menu_li{
        margin:0;
        
    }

    .menu_li_a{
        font-size: 1rem;
        font-weight: 700;
        display: block;
        padding: 10px 0px;
        color: #91c73e;
        letter-spacing: 0.5px;
        
    }

     .menu_li_a:hover{
         color:#91c73e;
         background:white;
         font-weight: 700;
         border-bottom: 0;
         box-shadow:  0px 0px 6px 3px rgb(173 173 173);

     }


    li a span{
        color: #91c73e;
    }

    .container{
        max-width: 1000px;
    }

}

@media screen and (max-width: 1000px) {

    .header_social{
        width: 30%;
    }


    /* CONTACTOS */

    .co_cont_card{
        width: 42%;
    }

}

@media screen and (max-width: 850px) {

  
    .header_logos{
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 150px 150px;

    }
    
    .header_logo_p{
            height: 100%;
            margin: auto 2.5rem;
    }

    .logos_sec{
       margin: 0.25rem 0.5rem;
       justify-content: center;
       flex-wrap: wrap;
       grid-row: 2;
       grid-column: 1/3;
       align-items: center;
    }

    .header_social{
        width:100%;
        grid-row: 1;
        grid-column: 2;
    }

    .header_social_img{
        height:40px;
    }

    .mark{
        /*border-right: 2px solid #91c73e;*/
        border-bottom: 0;
    }

    /* INDEX*/

    .container_picture {
        justify-content: center;
        grid-template-columns: none;
        grid-template-rows: none;
        height:auto;
        max-width:none;
    }

    .picture_card{
        width:20rem;
        height:10rem;
    }


    /* PROCEDIMIENTOS*/

    .proc_cont{
        flex-direction: column;
        align-items: center;
    }

    .proc_contlogo{
        width: 60%;
    }
    
    .proc_contcert{
        width: 90%;
    }

    
}

    

@media screen and (max-width: 800px) {

    .container {
        width: 98%;
    }

    /*footer*/
    footer{
        text-align: center;
    }

    .img_footer{
        margin:0 auto;
    }

    .f_div{
        width:90%;
        margin:auto;
    }

    .f_ico{
        justify-content:center;
    }
	
	/*  PROGRAMA */
	
	.pro_img_img{
		width: 85%;
    }
}
@media screen and (max-width: 700px) {

    .mark {
        border: 0;
    }


    /*  INDEX */

    .menu {
        width: 100%;
    }

    .menui {
        /*border-radius: 0.5rem 0.5rem 0 0;*/
    }


    /* INDEX*/


    .picture_card{
        width:15rem;
        height:7.5rem;
    }


	/* PROGRAMA*/
	
	.pro_img_con{
		width:70%;
    }
	
	.pro_con_text{
		width:80%;
	}

    /* CONTACTO */

    .co_cont_card{
        width:60%;

    }

    /* NOTICIAS Y EVENTOS */
    .note_card{
        flex-wrap: wrap;
       justify-content: center;
    }

    .note_card_fec{
        width: 85%;
        padding: 0;
        text-align:initial;
    }

    .note_card_fec_text{
        font-size:1.8rem;
        margin: 0;
    }

    .note_card_not{
        border-left:0;
        border-bottom: 2px dotted #91c73e;
    }


}

@media screen and (max-width: 600px) {

    .header_social_img{
        height: 30px;
    }

    /* SIS RES SOCIAL */
    .modalDialog > div {
       width: 90%;
                    
    }

    .modallink_otros{

        font-size:0.9em;
    }

    .modalDialog > div > p {
    
        margin:0;

    }

    .p_otros{
        margin:0;
    }

}

@media screen and (max-width: 500px) {

   .header_logos{
         grid-template-columns: 1fr ;
         grid-template-rows: 100px 150px 150px;
   }

   .header_logo_p{
       grid-row: 2; 
   }

   .logos_sec{
       grid-row: 3;
       grid-column: 1;
   }

   .header_social{
       grid-row: 1;
       grid-column: 1;

   }

   .header_social_img{
        height: 40px;
    }

   /* SISTEMA RES-SOCIAL */

   .card_button{
       font-size:.8rem;
   }


   
    /* INDEX*/


    .picture_card{
        width:11rem;
        height:5.5rem;
    }


   /* PROCEDIMIENTO*/

    .proc_contlogo{
        width: 70%;
    }

    .proc_contcert_cert {
        flex-direction: column;
    }

    .proc_contcert_cert_group {
        margin: 1em 0;
    }

    /* CONTACTO*/

    .co_title_text{
        width:40%;
    }

    .co_cont_card{
        width: 80%;
    }
    
   }




@media screen and (max-width: 380px) {


    /* * */

    .img_log{
        height: 30px;
    }

    /* INDEX*/
    .picture_card{
        width:10rem;
        height:5rem;
    }
}

@media screen and (max-width: 340px) {

    /* INDEX*/
    .picture_card{
        width:9rem;
        height:4.5rem;
    }

    /* HEADER*/

    .header_social_img{
        height:35px;
    }

}