*{
    font-family: 'Roboto', sans-serif;  
    padding: 0;
    margin: 0;
    
    
}



/**         FONT         **/

h1{
    font-variant-caps: all-petite-caps;
    font-size: 1em!important;
    color: #E6E6E6;
}

h2{
    font-size: 1.7em!important;
    color: #117FCA;
    font-weight: 900;
    font-variant-caps: all-petite-caps;
    padding: 0;
    margin: 0;
}


h3{
    font-size: 1.1em!important;
    padding: 0!important;
    margin: 0!important;
}




p{
    font-size: 1.4em
    
}



a:hover{
    text-decoration: none;
}




            /*  TAMAÑO  XS  Phone | V  */

@media only screen and (min-width:0px) and (max-width:576px){
    .movil-m{
        padding-bottom: 15px;
    }
    
    #secciones-menu{
        display: flex!important;
        flex-direction: row!important;
    }
    
       
    .nav-link{
        width: 33.33%!important;
        text-align: center;           
    }
    
   
    .color{
        flex-direction: row;
        justify-content: center;
        
    }    
    
    a.contacto-tipo{
                
    }
    
    
    footer{
        flex-direction: row!important;
        align-items: ;
        flex-wrap: wrap;
    }
    
    .empresa-footer{
        flex-direction: column!important;
        width: 100%!important;
        margin: auto;
        padding: 0!important;
        
        
    }
    
    .empresa-footer h1{
        text-align: center;
        margin-top: 10px!important;  
        padding: 0!important;
        
    }
    .raiz-footer{
        min-width: 100%;
        margin-top: 30px;
    }
    .sobreempresa-foter, .obras-footer{
        padding:0!important;
        margin: 0 25px!important;
    }
        
    .contacto-footer{
        min-width: 100%;
        margin-top: 30px;
        align-items: center;
    }
    
    .contacto-footer row;{
        justify-content: center!important;
        
    }
    
    #info-intro{

    padding: 2rem 2rem 2rem 2rem!important;
    text-align: center
    }
    
    #banner, #banner2{
        height: 85vh;
    }
    
    #banner2 img{
        height: 100%;

    }
    
    
    
    
    
    
    /* Home - LAVECO */
    
    #info-intro{
        padding: 0!important;
    }
    
    #info-intro a{
        width: 100%!important;
    }
    
    
    
    
    
    
    /* Home - Obr Destacadas */
    
    
    .destacada{
        width: 90%!important;
        
    }
    
         
    .t-dest{
        display: flex;
        
        justify-content: space-between;
        
    }
    
    .etq-banner-dest{
        font-size: .92em
    }
    
    
    
       /* OBRAS */
    
    .nav-ubi{
        padding: 1px 0px!important;
        text-align: center;
    }
    
    
    #odestacadas{
        padding: 15px 20px!important
        
    }
    
    
    #odestacadas .destacada{
        width: 32%!important;
    }
    
    
    
    
    #odestacadas .destacada .etq-banner-dest{
        flex-direction: column;
    }

    #odestacadas .destacada .etq-banner-dest h4{
        width: 100%;
        text-align: center;
        margin-bottom: 10px
    }
    
    #odestacadas .destacada .etq-banner-dest p{
        width: 100%;
        text-align: center;
        margin: 0!important;
    }
    
    
    
    
    #otodas{
        padding: 30px 28px!important
    }
    
    #filtro{
        padding: 0!important
    }
    
    
    #posts .post{
        width: 48%;
    }
    
    
    
    
    
          /*  LA EMPRESA */
    
    #banner-empresa{
        padding: 25px 50px!important;
        flex-direction: column!important;
        
    }
    
    #banner-empresa img{
        margin-bottom: 15px;
    }
    
    #banner-empresa h1{
        display: inline-flex!important;
        max-width: 100%!important;
        margin: 0!important;
        text-align: center
    }
    
    
    
    #historia{
        padding: 20px 50px!important;
        margin-top: 25px
            
    }
    
    .texto-empresa{
        width: 100%!important;
    }
    
    
    
    
    
    #visionmision{
        padding: 10px 50px!important
    }
    
    
    
    #mision, #vision{
        width: 100%!important;
    }
    
    
    #mision{
        margin-bottom: 15px;
    }
    
    
    #valores{
        padding: 10px 50px!important
    }
    
    #cont-valores .valor{
    width: 50%!important;
    
    
    }
    
              /*  CONTACTO */
    
    #contacto-sec{
        padding: 20px 80px!important
    } 
    
    
    #mensaje{
        height: 250px!important;
        margin-bottom: 0px!important;
    }
    
    #info-contacto #todo-contacto h3, #info-contacto #ubi-contacto h3{
        font-size: 1.2em!important;
    }
    
    #maps-contacto{
        width: 100%!important;
        height: 265px!important
    }
    
    
    
    #formulario, #info-contacto{
        width: 100%!important;
    }
    
    
    #info-contacto{
        text-align: center;
    }
    
    
    .linea-info-contacto{
        justify-content: center
    }
    
    
    #todo-contacto{
        margin-top: 30px
    }
    
    #ubi-contacto{
        margin-top: 50px!important;
    }
    
            
    
    
    
    
                /*  GALERIA */
    

    #defebrero, #bajoberazategui, #bajovarela, #bajoquilmes, #rn226, #donmario, #laspiedras, #finochietto, #soto, #torres{
        padding:20px 50px!important;
        width: 100%;
        
    }
    
    #defebrero h2, #bajoberazategui h2, #bajovarela h2, #bajoquilmes h2, #rn226 h2, #donmario h2, #laspiedras h2, #finochietto h2, #soto h2, #torres h2{
        line-height: .8em!important;
        width: 100%!important;
        text-align: center;
    }
    
    .gps-galeria-tit{
        align-items: center;
        margin-top: 15px!important;
    }
    
    
    
    
                /* Obra DESTACADA  */
    
    
    
        #detalles-dest, #descripcion-dest{
        padding: 20px 30px 15px 30px!important
    }
    
    
    #detalles-dest{
        margin-top: 45px;
        margin-bottom: 15px
    }
    
    
    .info-dest{
        width: 22%!important
    }
    
    
    .info-dest a{
        text-align: center;
    }
    
    
    
    .texto-desc-dest{
        width: 90%!important
    }
    
    
    article#titulo-galeria-dest{
        padding: 20px 120px 15px 120px!important;
    }
    
        #vermas-obras{
        padding: 25px 50px!important
    }
    
    
    #vermas-obras .destacada{
        max-width: 100%!important;
    }
    
    
    #posts{
        justify-content: center!important;
    }
    
    
    .vermas-o{
        
        width: 80%!important;
    }
    
    
}



            /*  TAMAÑO  SM  Phone -- H */

@media only screen and (min-width:576px) and (max-width:768px){  
     .movil-m{
        padding-bottom: 15px;
    }
    
    #secciones-menu{
        display: flex!important;
        flex-direction: row!important;
    }
    
       
    .nav-link{
        width: 33.33%!important;
        text-align: center;           
    }
    
   
    .color{
        flex-direction: row;
        justify-content: center;
        
    }     
    
    
    footer{
        flex-direction: row!important;
        align-items: ;
        flex-wrap: wrap;
    }
    
    .empresa-footer{
        flex-direction: column!important;
        width: 80%!important;
        margin: auto;
        padding: 0!important;
        
        
    }
    
     .empresa-footer h1{
        text-align: center;
        margin-top: 10px!important;  
        padding: 0!important;
        
    }
    .raiz-footer{
        margin: 30px auto auto auto;
        
    }
        
    .contacto-footer{
        flex-direction: row!important;
        margin: 30px auto auto auto;
        text-align: center;
    }
    
    .contacto-footer h1{
        margin: auto;
    }
    
    
    
    
     /* Home - LAVECO */
    
    #info-intro{
        padding: 0!important;
    }
    
    #info-intro a{
        width: 100%!important;
    }
    
    
    
    
    
    
    /* Home - Obr Destacadas */
    
    
    .destacada{
        width: 90%!important;
        
    }
    
         
    .t-dest{
        display: flex;
        
        justify-content: space-between;
        
    }
    
    .etq-banner-dest{
        font-size: .92em
    }
    
      
    
    
    
    
    
    /* OBRAS */
    
    
    #odestacadas{
        padding: 15px 30px!important
        
    }
    
    
    #odestacadas .destacada{
        width: 32%!important;
    }
    
    
    
    
    #odestacadas .destacada .etq-banner-dest{
        flex-direction: column;
    }

    #odestacadas .destacada .etq-banner-dest h4{
        width: 100%;
        text-align: center;
        margin-bottom: 10px
    }
    
    #odestacadas .destacada .etq-banner-dest p{
        width: 100%;
        text-align: center;
        margin: 0!important;
    }
    
    
    
    
    #otodas{
        padding: 30px 50px!important
    }
    
    #filtro{
        padding: 0!important
    }
    
    
    #posts .post{
        width: 45%;
    }
    
    
    
    
    
    
          /*  LA EMPRESA */
    
    #banner-empresa{
        padding: 25px 50px!important
    }
    
    #historia{
        padding: 20px 50px!important;
        margin-top: 25px
            
    }
    
    #visionmision{
        padding: 10px 50px!important
    }
    
    #valores{
        padding: 10px 50px!important
    }
    
    
    
    
          /*  CONTACTO */
    
    #contacto-sec{
        padding: 20px 80px!important
    } 
    
    
    #mensaje{
        height: 250px!important;
        margin-bottom: 0px!important;
    }
    
    #info-contacto #todo-contacto h3, #info-contacto #ubi-contacto h3{
        font-size: 1.2em!important;
    }
    
    #maps-contacto{
        width: 100%!important;
        height: 265px!important
    }
    
    
    
    #formulario, #info-contacto{
        width: 100%!important;
    }
    
    
    #info-contacto{
        text-align: center;
    }
    
    
    .linea-info-contacto{
        justify-content: center
    }
    
    
    #todo-contacto{
        margin-top: 30px
    }
    
    #ubi-contacto{
        margin-top: 50px!important;
    }
    
    
    
    
    
                    /*  GALERIA */
    

    #defebrero, #bajoberazategui, #bajovarela, #bajoquilmes, #rn226, #donmario, #laspiedras, #finochietto, #soto, #torres{
        padding:20px 50px!important;
        width: 100%;
        
    }
    
    #defebrero h2, #bajoberazategui h2, #bajovarela h2, #bajoquilmes h2, #rn226 h2, #donmario h2, #laspiedras h2, #finochietto h2, #soto h2, #torres h2{
        line-height: .8em!important;
        width: 100%!important;
        text-align: center;
    }
    
    .gps-galeria-tit{
        align-items: center;
        margin-top: 15px!important;
    }
    
    
    
                /* Obra DESTACADA  */
    
    
    
        #detalles-dest, #descripcion-dest{
        padding: 20px 120px 15px 120px!important
    }
    
    
    #detalles-dest{
        margin-top: 45px;
        margin-bottom: 15px
    }
    
    
    .info-dest{
        width: 23%!important
    }
    
    .texto-desc-dest{
        width: 90%!important
    }
    
    
    article#titulo-galeria-dest{
        padding: 20px 120px 15px 120px!important;
    }
    
        #vermas-obras{
        padding: 25px 50px!important
    }
    
    
    #vermas-obras .destacada{
        max-width: 45%!important;
    }
    
    
    
    
}























            /*  TAMAÑO  MD  Tablets */

@media only screen and (min-width:768px) and (max-width:992px){
      .empresa-footer h1{
         
    }
    
    .empresa-footer{
        max-width: 40%;
        
    }   
    
    #flota{
    margin-left: 0px!important;
    }
    
    footer{
        padding: 20px 60px!important 
    }
    
    footer .empresa-footer h1{
        font-size: .82em!important;
        line-height: 1.1em;
        padding-right: 0;
        text-align: center;
        padding-left: 15px
         
    }
    
    .sobreempresa-foter{
        margin: 0 5px 0 38px!important;
    }
    
    .obras-footer{
        margin: 0 30px 0 5px!important;
    }
    
    
    
    
    
    /* Home - LAVECO */
    
    #info-intro{
        padding: 0!important;
    }
    
    #info-intro a{
        width: 100%!important;
    }
    
    
    
    
    
    
    /* Home - Obr Destacadas */
    
    
    .destacada{
        width: 40%!important;
        
    }
    
         
    .t-dest{
        display: flex;
        min-height: 180px;
        justify-content: space-between;
        
    }
    
    .etq-banner-dest{
        font-size: .92em
    }
    
    
    
    /*  OBRAS */
    
    #odestacadas{
        padding: 20px 100px 20px 100px!important;
        width: 100%!important;
    }
    
    
    #odestacadas .destacada{
        width: 30%!important;
    }
    
    
    #odestacadas .destacada .etq-banner-dest{
        flex-direction: column;
        display: flex;
        
    }
    
    #odestacadas .etq-banner-dest h4{
        justify-self: center!important;
        align-self: center!important;
        width: 100%;
        text-align: center;
        margin-bottom: 5px!important
        
    }
    
    #odestacadas .t-dest .etq-banner-dest p{
        margin: 0!important;
        line-height: .9em!important;
        padding: 2px 0 5px 0;
    }
    
    
    
    
    
    #otodas{
        padding: 25px 50px 25px 50px!important;
    }
    
    #filtro{
        padding: 0!important;
    }
    
    
    #posts  .ubicacion-o p{
        font-size: .68em!important
        
    }
    
    
     #posts  .inicio-o p{
        font-size: .9em!important
        
    }
    
    #posts  .finalizacion p{
        font-size: .9em!important;       
            
        
    }
    
    #posts  .finalizacion{
        padding: 4px 6px 4px 6px!important;
        
    }
    
    
    
       /*  LA EMPRESA */
    
    #banner-empresa{
        padding: 25px 100px!important
    }
    
    #historia{
        padding: 20px 100px!important;
        margin-top: 25px
            
    }
    
    #visionmision{
        padding: 10px 100px!important
    }
    
    #valores{
        padding: 10px 100px!important
    }
    
    
    
      /*  CONTACTO */
    
    #contacto-sec{
        padding: 20px 80px!important
    } 
    
    
    #mensaje{
        height: 250px!important;
        margin-bottom: 0px!important;
    }
    
    #info-contacto #todo-contacto h3, #info-contacto #ubi-contacto h3{
        font-size: 1.2em!important;
    }
    
    #maps-contacto{
        width: 100%!important;
        height: 265px!important
    }
    
    
    
    
                    /*  GALERIA */
    

    #defebrero, #bajoberazategui, #bajovarela, #bajoquilmes, #rn226, #donmario, #laspiedras, #finochietto, #soto, #torres{
        padding:20px 50px!important;
        width: 100%;
        
    }
    
    #defebrero h2, #bajoberazategui h2, #bajovarela h2, #bajoquilmes h2, #rn226 h2, #donmario h2, #laspiedras h2, #finochietto h2, #soto h2, #torres h2{
        line-height: .8em!important;
        width: 100%!important;
        text-align: center;
    }
    
    .gps-galeria-tit{
        align-items: center;
        margin-top: 15px!important;
    }
    
    
    
    
    
                    /*  Obra DESTACADA */
    
    #detalles-dest, #descripcion-dest{
        padding: 20px 120px 15px 120px!important
    }
    
    
    #detalles-dest{
        margin-top: 45px;
        margin-bottom: 15px
    }
    
    
    .info-dest{
        width: 23%!important
    }
    
    .texto-desc-dest{
        width: 90%!important
    }
    
    
    article#titulo-galeria-dest{
        padding: 20px 120px 15px 120px!important;
    }
    
    #vermas-obras{
        padding: 25px 100px!important
    }
    
    
    #vermas-obras .destacada{
        width: 50%!important;
    }
    
    .vermas-o{
        width: 30%!important
        
    }
    
    
}










            /*  TAMAÑO  LG  PC */

@media only screen and (min-width:992px) and (max-width:1200px){
    .empresa-footer h1{
         
    }
    
    .empresa-footer{
        max-width: 49%;
    }
    
    .sobreempresa-foter{
        margin: 0 12px 0 35px!important;
    }
    
    
    .obras-footer{
        margin: 0 35px 0 12px!important;
    }
    
    #flota{
    margin-left: 0px!important;
    }

    
    
    /* Home - Obr Destacadas */
    
    
    .destacada{
        
    }
    
    .t-dest{
        display: flex;
        min-height: 180px;
        justify-content: space-between;
        
    }
    
    .t-dest h3{
        font-size: .9em!important;
    }
    
    .t-dest p{
        font-size: .8em!important;
    }
    
    .destacada .etq-banner-dest{
        flex-direction: column;
        display: flex;
        
    }
    
    .etq-banner-dest h4{
        justify-self: center!important;
        align-self: center!important;
        width: 100%;
        text-align: center;
        margin-bottom: 5px!important
        
    }
    
    .t-dest .etq-banner-dest p{
        margin: 0!important;
        line-height: .9em!important;
        padding: 2px 0 5px 0;
    }
    
    
    
    /*  OBRAS */
    
    
    
    #filtro{
        padding: 0!important;
    }
    
    
    
     /*  LA EMPRESA */
    
    #banner-empresa{
        padding: 25px 150px!important
    }
    
    #historia{
        padding: 20px 150px!important;
        margin-top: 25px
            
    }
    
    #visionmision{
        padding: 10px 150px!important
    }
    
    #valores{
        padding: 10px 150px!important
    }
    
    
    
     /*  CONTACTO */
    
    #contacto-sec{
        padding: 20px 150px!important
    } 
    
    
    #mensaje{
        height: 250px!important;
        margin-bottom: 0px!important;
    }
    
    #info-contacto #todo-contacto h3, #info-contacto #ubi-contacto h3{
        font-size: 1.2em!important;
    }
    
    #maps-contacto{
        width: 100%!important;
        height: 265px!important
    }
    
    
    
    
    
                    /*  GALERIA */
    

    #defebrero, #bajoberazategui, #bajovarela, #bajoquilmes, #rn226, #donmario, #laspiedras, #finochietto, #soto, #torres{
        padding:20px 50px!important;
        width: 100%;
        
    }
    
    #defebrero h2, #bajoberazategui h2, #bajovarela h2, #bajoquilmes h2, #rn226 h2, #donmario h2, #laspiedras h2, #finochietto h2, #soto h2, #torres h2{
        line-height: .8em!important;
        width: 100%!important;
        text-align: center;
    }
    
    .gps-galeria-tit{
        align-items: center;
        margin-top: 15px!important;
    }
    
    
    
    
    
                    /*  Obra DESTACADA */
    
    .info-dest{
        width: 23%!important
    }
    
    
    
    
    
    
    
}

















            /*  TAMAÑO  XL  Pc Grande */

@media only screen and (min-width:1200px){
    
    /* Secciones */
#secciones-menu{
    margin-right: 28px;
    
}
    
    
    
    
    
    footer{
        padding:32px 190px 27px 190px!important; 
    }
    
    .empresa-footer h1{
         padding-right: 0!important;
        
    }
    
    
    .empresa-footer{
        max-width: 43%;
    }
    
    
    #banner, #banner2{
        height: 75vh;
    }
    
    
    .sobreempresa-foter{
        margin: 0 15px 0 35px!important;
    }
    
    
    .obras-footer{
        margin: 0 35px 0 15px!important;
    }
    
    
    
    /* Home - Obr Destacadas */
    
    .t-dest{
        display: flex;
        min-height: 152px;
        justify-content: space-between
        
    }
    
    
    
    
    
}





















        /**   Menú        **/   
/* nav */
#menu{
    padding: 1px 85px 2px 85px;
    background-color: #333333;
    
    display: flex;
    margin: 0;
}


/* Logo */
#a-logo{
    box-sizing: border-box;
    margin-right: .5rem;
    padding: 0;
    transition: .3s ease-in-out;
    
    
}

#logo{
    height:23px!important;  
    
}


#a-logo:hover{
    transform: scale(1.05);
    
    transition: .3s ease-in-out;       
        
}




/**/

#a-tipo:hover {
    text-shadow: 0px 0px 2.2px #fff;
    
    
    transition: .2s ease-in-out;
}



#a-tipo{
    box-sizing: border-box;
    transform-origin: center left;
    transition: .2s ease-in-out;
    
}

#a-tipo h1{
    font-variant-caps: all-petite-caps;
    font-size: 1.2em!important;
    line-height: 1.1em;
    margin: auto;
    
    
}







/* Secciones */
#secciones-menu{
    
}

.secciones-tipo{
    font-variant-caps: all-petite-caps;
    font-size: 1.em!important;
    color: #E6E6E6;
    font-weight: 700;
    
}

#secciones-menu:hover  {
    color: #117FCA;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{
    color: #117FCA;
}





/**/

.color{    
    background-color: #117FCA;
    padding: 0px 8px 2px 8px;    
    transition: .4s ease-out;
    
}

.color:hover{    
    background-color: #E6E6E6;
    padding: 1px 8px 2px 8px;
    transform: scale(1.01);
    box-shadow: 0px 0px 8px 0px rgba(17,127,202,1);
    text-decoration: none;
    color: #117FCA;
    
    transition: .4s ease-in-out;
    
    
    
}




.contacto-tipo{
    color: #E6E6E6;
    font-variant-caps: all-petite-caps;
    font-size: 1.1em!important;
    line-height: normal;
    font-weight: 700;
    transition: .4s ease-out;
}



.color:hover > .contacto-tipo{    
text-decoration: none;
    color: #117FCA;
    font-variant-caps: all-petite-caps;
    font-size: 1.1em!important;
    line-height: normal;
    font-weight: 900;
    
    transition: .4s ease-in-out;
    
    
    
}

    
    
    
















/*        BODY         */



    /*    Banner     */

section{
    height: auto;
    width: 100%;
    padding-top: 42.5px;
    
}

#banner, #banner2{
   height:  85vh ;
    
}

.carousel-item{
    height: 100%;
}


#banner2 img{
    
}

.fondo-banner{
    
    background-color: rgba(0, 0, 0, .55)
}



    /*    Info cuerpo    */



article{
    position: relative;
    display: flex!important;
    flex-direction: column;
    align-items: center;    
    margin: auto;
    width: 60%;
    
    overflow:hidden;
}


#info-intro{
    height: 80vh;
    width: 100%;
    padding:0 25%;
    text-align: center;
    background-color: #333333;
    border-top: solid 4px #117FCA;
    
}


#info-intro a {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
    height: 100%;
    justify-content: center;
    
    
    
}


#info-intro a:hover > #logo-intro{
    transform: scale(1.05);
    transition: .5s ease-in-out;
}



#logo-intro{
    display: flex;    
    align-self: center;
    width: 300px;
    padding-top: 0px;
    padding-bottom: 25px;
    transition: .5s ease-out;
    
}

article#info-intro a p spam{
    color: #117FCA;
    font-weight: 900;
    line-height: 1.3em;
}

article#info-intro a p {
    line-height: 1.3em;
    color: #e3e3e3;
}

#info-intro a h3:hover{
    color: #117FCA;
    
}








article#info-intro a :hover, article#info-intro :hover {
    text-decoration: none;
}


    /*    Obras destacadas    */

#obra-destacada{
    padding: 30px 100px 35px 100px;
    width: 100%!important;
    background-color: #117FCA;
    margin-top: 40px
}

#obra-destacada .titulo-article{
    color: #e3e3e3;
}

#obra-destacada .vertodas-home{
    font-size: .95em!important;
    font-weight: 500;
    padding: 6px 10px!important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 30px 0 0 0;
    background-color: #333333;
    color: #e3e3e3;
    transition: .1s ease-out;
}

#obra-destacada .vertodas-home:hover{
    color: #117FCA;
    background-color: #e3e3e3;
    transition: .2s ease-in-out;
}




.vertodas-home{
    font-size: 1em!important;
    font-weight: 500;
    margin-top: 20px!important;
}

#obras-cards a.destacada{
    margin-bottom: 10px;
    box-shadow: 0px 0px 7px 0px 
                rgba(0,0,0,.3);
}

#obras-cards a h3:hover, #obras-cards a:hover {
    color: #117FCA!important;
}





.obra-destacada{
    padding: 50px 42px 20px 42px;
    width: 100%!important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 50px 0 0 0;
    transition: .4s ease-out;
    
}

.destacada:hover{
    text-decoration: none;    
    box-shadow: 0px 0px 7px 0px 
                rgba(17, 127, 202, .9);
    transform: scale(1.05);
    transition: .4s ease-in-out;
}

.tit-gal-home{
    width: 100%;
}

#obra-destacada .destacada{
    display: flex;
    width: 22%;
    margin:25px 8px 0 8px;;
}



#obras-cards{
    display: flex;
    flex-direction: row!important;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 5px
    
}


.obra-destacada img{
    width: 100%;
    padding-bottom: 10px
}

.obra-destacada h3{
    padding: 0 10px 0 10px!important;
    color: #333333;
    
}


.obra-destacada p{
    font-size: .75em;
    line-height: 1.32em;
    padding: 2px 10px 0 10px;
    color: #333333;
}






    /*    Galería    */


#galeria{
    text-align: center;
    padding: 0;
    width: 100%;
    
    margin-top: 120px;
}

.galeria-homee{
    padding-top: 25px!important;
    padding-right: 100px!important;
    padding-left: 100px!important
}

#carta-galeria { 
    display: flex;
    flex-direction: row!important;
    flex-wrap: wrap;
    
        
}


.galeria-home{  
    width: 25%;
    padding: 2px 5px 8px 5px;
    z-index: 0;
     
}


a.galeria-home img{
   
    width: 100%;
}

.vertodo-galeria{
    width: 100%;
    padding: 0!important;
    margin-top: 10px!important;
}     


 .vertodo-galeria h3 {
    font-size: 1em!important;
    font-weight: 500;
    padding: 7px 11px!important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 30px 0 0 0;
    background-color: #333333;
    color: #e3e3e3;
    transition: .1s ease-out;
}


 .vertodo-galeria h3:hover {
    color:#e3e3e3;
    background-color: #117FCA;
    transition: .2s ease-in-out;
}


    /*    Contacto    */

#contacto{
    width: 100%;
    padding:  120px 100px 20px 100px;
    display: flex;
    justify-content: center;
    
    
}


#card-contacto{
    border: ;
    display: flex;
    flex-direction: column;
    padding: 50px 100px;
    box-shadow: 0px 0px 12px 2px 
                rgba(0,0,0,.5);
    transition: .2s ease-out;
    background-color: #117FCA;
    
}




#card-contacto:hover{
     box-shadow: 0px 0px 16px 3px 
                rgba(0, 0, 0, .6)!important;
     transform: scale(1.02);
        transition: .3s ease-in-out;
}

#card-contacto:hover > .btn-contacto-body{
     
    
    
    background-color: #333333;
    padding: 7px 10px 10px 10px;
    box-shadow: 0px 0px 5px 0px 
                rgba(17, 127, 202, .5)!important;
     
}

#card-contacto:hover > .btn-contacto-body h1{
     
    color: #e3e3e3!important;
    padding: 0!important;
    margin: 0!important;
    font-size: 1.5em!important;
    line-height: .6em!important;
    font-weight: 800!important;   
    transform-origin: ;
    
    
     
}



#card-contacto:hover{
    box-shadow: 0px 0px 7px 0px 
                rgba(0,0,0,.3);
}



.btn-contacto-body {
    padding: 7px 10px 10px 10px;
    background-color: #e3e3e3;
    border: 2px ;
    transform-origin: ;
    transition: .4s ease-out;

}

/*
.btn-contacto-body:hover{
     padding: 7px 10px 10px 10px;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3),
    0 2px 2px 0 rgba(0, 0, 0, 0.19),
    0 1px 7px 0 rgba(0, 0, 0, 0.25);
    transform: scale(1.01);
    transform-origin: center center;
    transition: .4s ease-in-out;
    
}
*/


button.btn-contacto-body h1{
    padding: 0!important;
    margin: 0!important;
    font-size: 1.5em!important;
    line-height: .6em!important;
    font-weight: 500!important;   
    transform-origin: ;
    color: #117FCA;
    
}


    

.titulo-article{
    margin-bottom: 5px;
    color: #e3e3e3
}




    /******   LA EMPRESA - Sección  ******/

.nav-ubi{
    width: 100%;
    padding: 1px 230px 1px 230px;
    flex-direction: row!important;
    background-color: #117FCA;
    
}

.nav-ubi a h2{
    display: inline-flex;
    color: #e2e2e2;
    font-weight: 400
}

.nav-ubi h2{
    display: inline-flex;
    color: #e2e2e2;
    font-size: .7em!important;
    font-variant-caps: normal;
}


#separador-n{
    font-size: 1em!important;
    color: #333333;
    font-weight: 900;
}



#banner-empresa{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #333333;
    padding: 40px 200px;
    z-index: 0;
    box-shadow: 0px 3px 9px 2px rgba(0,0,0,.6);
                
}

#banner-empresa img{
    height: 140px;
}

#banner-empresa h1{
    max-width: 50%;
    margin: 0 0 0 40px;
    font-size: 1.4em!important;
}

#historia{
    width: 100%;
    padding: 55px 200px 0 200px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    
}

#historia h2{
    
    margin-bottom: 25px;
    width: 100%;
}


#historia p{
    font-size: .88em;
    text-align: ;
    margin-bottom: 7px;
}

.texto-empresa{
    width: 47%;
    flex-direction: row;    
}





#visionmision{
    width: 100%;
    padding: 55px 200px 10px 200px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 35px;
    
}

#visionmision row {
    width: 46%;
    flex-direction: row;
}

#visionmision row h2{    
    display: inline-flex;
    font-size: 1.4em!important;
    line-height: 1em!important;
    
}


#visionmision row p{
    font-size: .74em;        
    
}

.t-mv{
    display: flex;
    width: 100%;
    margin-bottom: 15px;
}


img .flecha-t{
    display: flex;        
}

.flecha-t{
    height: 22px;
    margin-right: 8px
}



row#vision, row#mision{
    min-height: 190px;
    padding: 28px 20px 20px 20px!important;
    box-shadow: 0px 0px 6px -1px 
                rgba(0,0,0,.4);
}

row#vision:hover, row#mision:hover, #cont-valores:hover{
    box-shadow: 0px 0px 6px -1px 
                rgba(17,127,202,.8);
}


#valores{
    width: 100%;
    padding: 10px 200px 10px 200px;    
    margin-top: 35px;
    
}


 #cont-valores{
     display: flex!important;
     flex-direction: row!important;    
    padding: 28px 18px 25px 18px!important;
    box-shadow: 0px 0px 6px -1px 
                rgba(0,0,0,.4);
    width: 100%;
    flex-wrap: wrap;    
    }

#cont-valores row h2{    
    display: inline-flex;
    font-size: 1.4em!important;
    line-height: 1em!important;
    
}

.valor{
    width: 25%!important;
    padding: 10px 20px;
    text-align: center;
    display: flex!important;
    flex-direction: column;    
    align-items: center;
        
}


.valor:hover{
    box-shadow: 0px 0px 4px -1px 
                rgba(0,0,0,.3);
    transform: scale(1.02)
}


.valor img{
    width: 45%;
    margin-bottom: 12px;
    
}


.valor h3{
    margin-top: 10px;
    color: #5B9CFF;

}




.valor p{
    margin: 5px 0 0 0;
    font-size: .6em;
    line-height: normal;
}


#segu-img{
    width: 36%; 
}


   /***   OBRAS Destacadas - Sección   ***/

#odestacadas{
    width: 100%;
    padding: 15px 230px 20px 230px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #117FCA;
    box-shadow: 0px 3px 9px 2px rgba(0,0,0,.6);
    
}

#odestacadas h2{  
    width: 100%;
    color: #e3e3e3;
    text-align: center;
    
}




.destacada{
    display: flex;
    width: 32%;
    flex-direction: column;
    transition: .3s ease-in-out;
}

.destacada:hover{
    
}

.bkimg, .bkimg1, .bkimg2, .bkimg3, .bkimg4, .bkimg5, .bkimg6{
    display: flex!important;
    width: 100%;
    height: 18vh;
    
    background-position: center;
    background-size: cover;
}

.bkimg{
  background-image: url(img/dest1.png);  
}

.bkimg1{
  background-image: url(img/Galeria/3de-Febrero/2.jpg);  
}

.bkimg2{
  background-image: url(img/Galeria/Ruta226/1.jpg);  
}

.bkimg3{
  background-image: url(img/Galeria/Bajo-Vias-Berzategui/18.jpg);  
}

.bkimg4{
  background-image: url(img/Galeria/Bajo-vias-Varela/1.jpg);  
}

.bkimg5{
  background-image: url(img/Galeria/Bajo-Nivel-Quilmes/1.jpg);  
}

.bkimg6{
  background-image: url(img/dest1.png);  
}




.t-dest{
    display: flex;
    width: 100%;
    padding: 15px 12px 15px 15px;
    background-color: #ffffff;
    flex-direction: column;
}

.t-dest h3{
    
}






.etq-banner-dest{
    display: flex;
    margin: 8px 0 0 0;
    
}


.etq-banner-dest h4{
    font-variant-caps:all-small-caps;
    font-size: .86em!important;
    line-height: 1em;
    font-weight: 500;
    color: #e3e3e3!important;    
    align-self: flex-start;
    background-color: #333333;
    padding: 6px 9px!important;
    margin: 0;
}




.etq-banner-dest p{
    font-variant-caps:all-small-caps;
    border: 2px solid #117FCA;
    padding: 3px 10px 0 10px;
    text-align: center;
    color: #117FCA!important;
    font-size: 1em!important;
    line-height: .9em!important;
    max-height: 25px;
    margin: 0 0 0 12px!important;
    
}


.t-dest p{
    color: #333333;
    font-size: 1em;
    line-height: normal;
    margin: 6px 0 2px 0
}



/***   OBRAS Todas - Sección   ***/

#otodas{
    width: 100%;
    padding: 20px 230px 20px 230px;
    margin-top: 15px;
    
}

ol {
  list-style: none;
}

#filtro{
    display: flex;
    width: 100%;
    padding: 5px 150px 5px 150px ;
    justify-content: space-around;
    margin: 10px 0 0 0;
    
}

#filtro label{
    padding: 4px 9px;
    background-color: #117FCA;
    color: #e3e3e3;
    line-height: normal;
    transition: .2s ease-out;
    
}

#filtro label:hover{
    background-color: #ffffff;
    color: #117FCA;
    font-weight: 600;
    box-shadow: 0 0 5px 0px;
    transition: .3s ease-out;
}



[value="todo"]:checked ~ #filtro [for="todo"], 
[value="hidraulica"]:checked ~ #filtro [for="hidraulica"], 
[value="bajovias"]:checked ~ #filtro [for="bajovias"], 
[value="pavimentacion"]:checked ~ #filtro [for="pavimentacion"], 
[value="destacadas"]:checked ~ #filtro [for="destacadas"]{
    background-color: #ffffff;
    color: #117FCA;
    font-weight: 600;
    box-shadow: 0 0 5px 0px;
    transition: .3s ease-in-out;
        
}


input[type="radio"] {
  position: absolute;
  left: -9999px;
}

#posts{
    width: 100%;
    display: flex;
    flex-direction: row!important;
    justify-content: space-between;
    flex-wrap: wrap;
}

.post{
    width: 30%;
    box-shadow: 0px 0px 7px 0px 
                rgba(0,0,0,.3);
    padding: 0;
    display: flex;
    flex-direction: column;
    margin-top: 35px;
    transition: .2s ease-out;
}

.post:hover{
    box-shadow: 0px 0px 7px 0px
                rgba(0,0, 0,.8);
    transform: scale(1.05);
    transition: .3s ease-in-out;
    
}

.destt{
    
    box-shadow:0px 0px 7px 0px
            rgba(17, 127, 202, .8)!important;    
    transition: .2s ease-out;
}


.destt:hover{
    
    box-shadow: 0px 0px 7px 0px
                rgba(17,127,202,.8);
    transform: scale(1.05);
    transition: .3s ease-in-out;
    
    
}

a .vermasdest{
    position: absolute;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 10;
    background-color: rgba(17, 127, 202, 0.7);
    opacity: 0;
    transition: .3s ease-in-out;
}

.vermasdest h1{
    background-color: #333333!important;
    font-weight: 600;
    padding: 2px 18px 4px 18px;
    color: #e3e3e3;
    line-height: 1em;
    margin: 0;
}

.vermasdest h1:hover{
    background-color: #e3e3e3!important;
    font-weight: 600;
    padding: 2px 18px 4px 18px;
    color: #117FCA;
    line-height: 1em;
    margin: 0;
}

.post a{
   transition: .2s ease-out; 
    
}

.destt:hover > a .vermasdest{
    display: flex;
    opacity: 1;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    transition: .4s ease-in-out;
    transition-delay: 5s!important;
}




.post a{
    display: flex;
    flex-direction: column;
}

#cortito{
    display: flex;
    padding-top: 18px
}



.t-obra{
    background-color: #333333;
    color: #e3e3e3;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    padding: 12px 20px 15px 15px;
    justify-content: ;
}


.t-obra h3{
    font-variant-caps: normal;
    font-size: .9em!important;
    line-height: 1.25em;
    font-weight: 800;
    width: 100%;
    color: #e3e3e3!important;
     
    
}

.t-obra  h3 spawn{
    font-size: .85em;
    font-weight: 300!important;
    line-height: 0.5em!important;
}




.fila-para-galeria{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between!important;
    
}


.t-obra h4.btn-ir-galeria{
    display: inline-flex;
    background-color: rgba(0,0,0,0)!important;
    line-height: 1.2em;
    align-self: center;
    font-size: 1.1em!important;
    
    border: 1px solid #117FCA;
    padding: 2px 6px 4px 6px!important;
    
    
}

.t-obra h4.btn-ir-galeria:hover{
    color:#e3e3e3!important;
    border: px solid #e3e3e3;
    box-shadow: 0 0 7px 1px rgba(17, 127, 202, 0.7);
}


.t-obra h4{
    font-variant-caps:all-small-caps;
    font-size: .82em!important;
    line-height: .9em;
    font-weight: 500;
    color: #117FCA!important;
    margin: 8px 0 0 0;
    align-self: flex-end;
    background-color: #e3e3e3;
    padding: 4px 6px!important;
    
    
}

 .desc-obra{
    display: flex;
    background-color: #fff;
    height: 100%!important;
    padding: 9px 15px 15px 10px;
    flex-direction: row!important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    
}

.desc-obra{
    display: flex;
    background-color: #fff;
    height: 100%!important;
    padding: 9px 25px 15px 10px;
    flex-direction: column!important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}


.desc-obra row{
    display: flex;
    flex-direction: row;
    margin-top: 0px;
    align-items: flex-end;
    width: 48%;
    align-items: center;  
    justify-content: ;
}



.desc-obra row p{
    display: inline-flex;
    font-size: .75em;
    margin: 0;
    margin-left: 2px;
    line-height: normal;
    color: #333333;
    
}



.desc-obra row img{
    height: 18px; 
    margin-right: 2px
}

.ubicacion-o{
    height: 100%;
    justify-content: center;
    margin-right: 10px
}



.inicio-o{
    padding: 5px 5px 5px 4px!important;
    justify-content: center;
    
    
}

.inicio-o p{
    color: #333333!important;
    font-variant-caps: all-petite-caps;
    font-size: 1em!important;
    line-height: 1em!important;
    
    
    
}




.finalizacion{
    background-color: #117FCA!important;
    padding: 5px 5px 5px 4px!important;
    justify-content: center;
    
    
}

.finalizacion p{
    color: #e3e3e3!important;
    font-variant-caps: all-petite-caps;
    font-size: 1em!important;
    line-height: 1em!important;
}



.dest{
    background-color: #117FCA;
    
}

.dest h3{
    font-variant-caps: normal;
    font-size: .9em!important;
    line-height: 1.2em;
    font-weight: 800;
    width: 100%;
    color: #e3e3e3!important;
     
    
}

.dest h3 spawn{
    font-size: .85em;
    font-weight: 500!important;
    line-height: 0.5em!important;
}

.dest h4{
    font-variant-caps:all-small-caps;
    font-size: .85em!important;
    line-height: .87em;
    font-weight: 600;
    color: #333333!important;
    margin: 7px 0 0 0;
    align-self: flex-end;
    padding: 4px 0px;
    
    
}



h4.et-dest{
    background-color: #e3e3e3;
    padding: 4px 5px;
    color: #333333;
    font-weight: 700!important;
    margin-right: 10px;
    font-size: .85em!important;
    line-height: .85em!important;
    
}



[value="hidraulica"]:checked ~ #posts .post:not([data-category~="hidraulica"]),
[value="bajovias"]:checked ~ #posts .post:not([data-category~="bajovias"]),
[value="pavimentacion"]:checked ~ #posts .post:not([data-category~="pavimentacion"]),
[value="destacadas"]:checked ~ #posts .post:not([data-category~="destacadas"]){
  display: none;
}

[value="todo"]:checked ~ .posts [data-category] {
  display: block;
}


.ir-arriba{
    box-shadow: 0px 0px 3px 0px 
                rgba(0,0,0,.7);
    color: #117FCA;
    padding: 6px;
    font-size: .7em;
    font-weight: 600 ;
    transition: .2s ease-out;
    background:#333333!important;
    
	cursor:pointer;
	position: fixed;
    
	bottom: 20px!important;
	right:60px!important;
    z-index: 100;
    
}


.ir-arriba:hover{
    background-color: #ffffff!important;
    color: #117FCA;
    font-weight: ;
    box-shadow: 0 0 1px 0px;
    transition: .3s ease-in-out;
    
}











  /***   OBRAS #1 - Sección   ***/



#foto-obradest{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    background-color: ;
    background-image: url(img/dest1.png);
    padding: 40px 0px 0px ;
    z-index: 0;
    box-shadow: 0px 3px 9px 2px rgba(0,0,0,.6);
    height: 60vh;
    background-position: center;
    background-size: cover;
                  
}

#foto-obradest2{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    background-color: ;
    background-image: url(img/Galeria/3de-Febrero/2.jpg);
    padding: 40px 0px 0px ;
    z-index: 0;
    box-shadow: 0px 3px 9px 2px rgba(0,0,0,.6);
    height: 60vh;
    background-position: 2% 60%;
    background-size: cover;
                  
}

#foto-obradest3{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    background-color: ;
    background-image: url(img/Galeria/Bajo-Vias-Berzategui/18.jpg);
    padding: 40px 0px 0px ;
    z-index: 0;
    box-shadow: 0px 3px 9px 2px rgba(0,0,0,.6);
    height: 60vh;
    background-position: center;
    background-size: cover;
                  
}

#foto-obradest4{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    background-color: ;
    background-image: url(img/Galeria/Bajo-vias-Varela/1.jpg);
    padding: 40px 0px 0px ;
    z-index: 0;
    box-shadow: 0px 3px 9px 2px rgba(0,0,0,.6);
    height: 60vh;
    background-position: center;
    background-size: cover;
                  
}

#foto-obradest5{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    background-color: ;
    background-image: url(img/Galeria/Bajo-Nivel-Quilmes/1.jpg);
    padding: 40px 0px 0px ;
    z-index: 0;
    box-shadow: 0px 3px 9px 2px rgba(0,0,0,.6);
    height: 60vh;
    background-position: center;
    background-size: cover;
                  
}

#foto-obradest6{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    background-color: ;
    background-image: url(img/Galeria/Ruta226/1.jpg);
    padding: 40px 0px 0px ;
    z-index: 0;
    box-shadow: 0px 3px 9px 2px rgba(0,0,0,.6);
    height: 60vh;
    background-position: center;
    background-size: cover;
                  
}






#foto-obradest h1, #foto-obradest2 h1, #foto-obradest3 h1, #foto-obradest4 h1, #foto-obradest5 h1, #foto-obradest6 h1{
   font-size: 1.4em!important;
    line-height: .9em;
    font-weight: 900;
    background-color: rgba(51,51,51, .85);
    padding: 18px 0px 20px;
    height: ;
    margin: 0;
    width: 100%;
    text-align: center;   
    
}

#foto-obradest h1 spawn, #foto-obradest2 h1 spawn, #foto-obradest3 h1 spawn, #foto-obradest4 h1 spawn, #foto-obradest5 h1 spawn, #foto-obradest6 h1 spawn{
   font-size: .8em!important;
    line-height: .8em;
    font-weight: 100;
   
   
    text-align: center;   
    
}


#detalles-dest{
    padding: 55px 200px 20px 200px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}


.info-dest{
    width: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 3px 0px 
                rgba(0,0,0,.7);
    padding: 15px !important;
    
}

.info-dest a{
    display: flex;
    flex-direction: column;
    align-items: center;
    
    
    
}



.info-dest h2, .info-dest a h2{
    display: inline-flex;
   font-size: .8em!important;
    font-variant-caps: normal;
    font-weight: 500;
       
}

.info-dest h3, .info-dest a h3{
    display: inline-flex;
   font-size: .8em!important;
    font-variant-caps: normal;
    margin-top: 3px!important;
    color: #333333
       
}


#descripcion-dest{
    padding: 55px 200px 20px 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}

.texto-desc-dest{
    width: 50%;
    display: flex;
    margin-top: 5px;
}

.texto-desc-dest p{
    font-size: .9em
}

#galeria-dest{
    padding: 10px 42px 20px 42px;
    width: 100%;
    display: grid!important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 12px;
    margin: auto;
}

#galeria-dest > a {
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    transition: transform 0.2s ease-out;
    
}  

#galeria-dest a img{
    width: 100%;
    vertical-align: top;
    height: 180px;
    object-fit: cover;
    box-shadow: 0 0 6px rgba(0, 0, 0, .6);
    transition: transform 0.2s ease-out;
}  

#galeria-dest a:hover {
    
    transform: scale(1.05);
    box-shadow: 0 0 7px rgba(17, 127, 202, 1);
    transition: transform 0.3s ease-in-out;
    
    
}


.light-box{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0, .72);
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none!important;
    flex-direction: row!important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 8vh 1vw;
    transform: scale(1)!important;
    transition: .2s ease-out;
}

a.sig, a.ant{
    display: flex;
    width: 10%;
    height: 85%;
    
    align-items: center;
    justify-content: center;
    transition: .2s ease-out
  
}


a.sig:hover, a.ant:hover{
    background-color: rgba(0,0,0,0.6);
    transition: .2s ease-in-out
}

a.sig:hover > img, 
a.ant:hover > img{
    transform: scale(1.15);
    transition: .2s ease-in-out
}




a.cerrar{
   display: flex; 
    width: 100%;
    justify-content: flex-end;
    padding: 0 30px 0 0;
    transition: .2s ease-out
    
}

a.cerrar img:hover{
    transform: scale(1.15);
    transition: .2s ease-in-out
    
}



a.sig img, a.ant img{
    display: flex;
    height: 28px;
    width: auto;
    transition: .2s ease-out
    
    
}

a.cerrar img{
    display: flex;
    height: 20px;
    width: 20px;
    transition: .2s ease-out
    
    
}




.light-box img{
    max-width: 75vw;
    max-height: 70vh;
    
}


.light-box:target{
    display: flex!important;
    transform: scale(1)!important;
    transition: transform .2s ease-in-out;
}

#titulo-galeria-dest{
    padding: 50px 42px 10px 200px!important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}



#vermas-obras{
    background-color: #333333;
}



#vermas-obras .destacada{
    box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
    max-width: 250px
    
        
}


#vermas-obras .vermas-obr h3{
    display: inline-flex;
    background-color: #e3e3e3;
    padding: 4px 10px!important;
    transition: .2s ease-out
}

#vermas-obras .vermas-obr h3:hover{
    color: #e3e3e3;
    background-color: #117FCA;
    padding: 4px 10px!important;
    transition: .15s ease-in-out
}




#vermas-obras{
    padding: 30px 42px 27px 42px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 140px 0 0 0;
}

#vermas-obras-comun{
    padding: 30px 42px 27px 42px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin: 30px 0 0 0;
    background-color: #117FCA;
}

#vermas-obras h2, #vermas-obras-comun h2{
    color: #e3e3e3
}

#vermas-obras .destacada{
    display: flex;
    width: 22%;
    margin:25px 8px 0 8px;
}

.titulo-dest-art {
    width: 100%;
   
}

.vermas-obr{
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.cuerpo-dest-art {
    display: flex;
    flex-direction: row!important;
    justify-content: space-between;  
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 10px;
    
}

.titulo-dest-art h3{
    display:inline-flex;
    text-align: center;
    
}

.vermas-o{
    width: 22%;
    margin:25px 8px 0 8px;
}

#vermas-obras-comun .vermas-obr h3{
    display: inline-flex;
    background-color: #e3e3e3;
    padding: 4px 10px!important;
    transition: .2s ease-out
}

#vermas-obras-comun .vermas-obr h3:hover{
    color: #e3e3e3;
    background-color: #117FCA;
    padding: 4px 10px!important;
    transition: .15s ease-in-out
}

#vermas-obras-comun .hover-comun h3{
    display: inline-flex;
    background-color: #e3e3e3;
    padding: 4px 10px!important;
    transition: .2s ease-out
}

#vermas-obras-comun .hover-comun h3:hover{
    color: #e3e3e3;
    background-color: #333333;
    padding: 4px 10px!important;
    transition: .15s ease-in-out
}


        /*** GALERIA ****/
.gps-galeria-tit{
    display: flex;
    flex-direction: row;
    margin-top: 3px
    
}

.gps-galeria-tit img{
    height: 18px;
    margin-left: 20px
}

.gps-galeria-tit h4{
    font-size: .96em;
    line-height: normal;
    margin: 0;
    align-self: center;
    margin-left: 5px;
    font-weight: 400
}


                /*  GALERIA */
    

    #defebrero, #bajoberazategui, #bajovarela, #bajoquilmes, #rn226, #donmario, #laspiedras, #finochietto, #soto, #torres{
        padding:20px 50px 0 50px!important;
        width: 100%;
        margin: 40px 0 15px 0;
        
    }
    
    #defebrero h2, #bajoberazategui h2, #bajovarela h2, #bajoquilmes h2, #rn226 h2, #donmario h2, #laspiedras h2, #finochietto h2, #soto h2, #torres h2{
        line-height: .8em!important;
        width: 100%!important;
        text-align: center;
    }
    
    .gps-galeria-tit{
        align-items: center;
        margin-top: 15px!important;
    }




        /***** Contacto ******/


#contacto-sec{
   width: 100%;
    padding: 40px 200px;
    display: flex;
    flex-direction: row!important;
    flex-wrap:wrap;
    justify-content: space-between;
    
}

#contacto-sec h2{
    width: 100%;
}
 
#formulario, #info-contacto{
    display: flex;
    width: 48%;
    align-self: flex-start;
    padding: 25px 10px 10px 10px!important;
    flex-direction: column;
}

#formulario form{
    display: flex;
    flex-direction: column;
    width: 100%;
}

#formulario label{
    ;
    margin-bottom: 5px;
    font-weight: 600;
    
}

#nombre, #email, #mensaje{
    border: 0px solid #117FCA;
    background-color: #e3e3e3;
    padding: 5px 10px;
    margin-bottom: 20px;
}



#mensaje{
    height: 272px;
}



#nombre:focus, #email:focus, #mensaje:focus{
    border: 1px solid #117FCA!important;
    background-color: #e3e3e3;
    padding: 5px 10px;
}

#submit{
    margin-top: 20px;
    background-color: #117FCA;
    border: none;
    color: #e3e3e3;
    padding: 6px
}

#submit:hover{
    box-shadow: 0 0 6px 2px rgba(17, 127, 202, .7)!important;
    background-color: #e3e3e3;
    color: #117FCA;
    font-weight: 600
    
    
}







#todo-contacto, #ubi-contacto{
    display: flex;
    flex-direction: column;
}


#info-contacto h3{
    font-size: 1.5em!important;
    font-weight: 400;
    margin-bottom: 20px!important;
}



.linea-info-contacto{
    display: flex;
    flex-direction: row!important;
    margin: 0px 0 15px 0;
}

.linea-info-contacto img{
    width: 25px;
    align-self: center!important;
}

#mail-c{
    height: 18px;
    align-self: center;
    margin-right: 2px
}



.linea-info-contacto h4{
    margin: 0 0 0 5px!important;
    padding: 0 0 0 0!important;
    font-size: 1em;
    font-weight: 600;
    align-self: center!important;
}


#ubi-contacto{
    margin-top: 30px;
}



#maps-contacto{
    width: 100%;
    height: 300px;
    border: 0;
    box-shadow: 0 0 16px 2px rgba(0,0,0, .5)
}



#maps-contacto:hover{
     box-shadow:  0 0 16px 2px rgba(17, 127, 202, .6)!important
}














    /*        FOOTER        */

footer{
    display: flex!important;
    flex-direction: row;
    margin-top: 5rem;
    height: ;
    background-color: #333333;
    padding:32px 120px 27px 120px;
    justify-content: space-between;
}

footer p{
    font-variant-caps: all-petite-caps;
    font-size: .84em!important;
    color: #E6E6E6;
    margin: 0;
    padding: 0;
    line-height: 1.25em
    
}

footer h1{
    font-variant-caps: all-petite-caps;
    font-size: .9em!important;
    color: #E6E6E6;
    font-weight: 900;
    margin: 0;
    padding: 0;
    padding-bottom: 2px;
    
}




.empresa-footer{
    display: flex;
    flex-direction: row;
    padding: 0 0 0 0px;
    align-items: center;
}

.empresa-footer a{
    margin: 0;
    padding: 0;
    display: flex!important;
    justify-content: ;
    height: ;  
    
}


.empresa-footer img{
    display: flex!important;
    height: 105px;
}


.empresa-footer h1{
      
    margin: 0;
    padding: 0 15px 0 25px;
    font-weight: 600;
    font-size: 1.1em!important;
    
    
}


.raiz-footer{
    width: ;
    display: flex;
    flex-direction: row!important;
    justify-content: center;
    padding-top: px;
   
    
}

.sobreempresa-foter, .obras-footer{
    margin: 0px 30px;
}



.contacto-footer{
    width: ;
    display: flex;
    flex-direction: column!important;
    
    padding: 0 0px 0px 10px;
    
    
}


.contacto-footer h1{
    margin-bottom: 2px;
        display: inline-flex;
}


#gps-footer{
    display: flex;
}


.linea-info-footer{
    
    display: inline-flex;    
    flex-direction: row;    
    margin-top: 1px;
    
}

.linea-info-footer p{
    
    display: inline-flex;    
    flex-direction: row;
    margin-top: 0px;
    
}

#mail-f{
    margin: 0;
    padding: 0;
    line-height: .7em
}




row{
    margin: 0px 0 0 0;
    padding: 0!important;
     
    
}


#flota{
    margin-left: 8px;
}

.gps-f{
    height: 15px;
    width: auto;
    margin-right: 4px
   
}

.tel-f{
    height: 15px;
    width: auto;
    margin-right: 4px;
 
}

.mail-f{
    height: 10px;
    width: auto;
    margin-right: 4px;

}


            /* Animaciones */