*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
  
body{
    font-family: 'Baloo Da 2', cursive;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.contenedor{
    width: 100%;
    max-width: 1170px;
    margin: auto;
}


.sticky-header {
  position: sticky;
  top: 0;
  background-color: #fff;
  /* padding: 10px 20px; */
  box-shadow: 0 5px 20px rgb(0, 124, 241);
  z-index: 1000;
}

.contenedor-head{
     width: 100%;
    max-width: 1170px;
    margin: auto;
}






/* INICIO - HEADER */

header{
    width: 100%;
    height: 130px;
    padding-top: 5px;
}

h1{
    line-height: 140%;
}

.menu-top{
    text-align: right;
    font-size: 18px;
}

.menu-top a{
    text-decoration: none;
    color: black;
}

.fabpage{
    color:rgb(0, 124, 241);
}
.twtpage{
    color:rgb(0, 124, 241);
}

.mailpage{
    color: rgb(0, 124, 241);
}

.icono{

    font-size: 60px;
    margin-bottom: 10px; 
    color: rgb(0, 124, 241);
}

.menu{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 900px;

  
    justify-content: space-between;
    margin: auto;
    text-align: center;
    line-height: 1; 
}


  .menu .item{
      padding-top: 20px;
      width: 130px;
      align-content: center;
      word-wrap: break-word;
      white-space: normal;
      
  }

  .menu a{
      text-decoration: none;
      /*color:#0075b0;*/
      /*color:rgb(0, 124, 241);*/
      color: #007cf1ff;
      font-size: 22px;
      font-weight: bold;
      text-transform: uppercase;

  }

  .menu a:hover{
    /*color:#a4281f;*/
    color: rgb(86, 86, 86);
  }


/* FIN - HEADER */


/* INICIO - BANNER */

.banner{
    width: 100%;
    height: 450px;
    /* background-image: url(../img/flota.jpg); */
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/

}

.banner-page{
    width: 100%;
    height: 200px;
    /*background-image: url(../img/nosotros.JPG);
    background-position: center;
    background-size: cover;*/
    margin-top: 10px;
}

.banner-page-nosotros{
    width: 100%;
    height: 200px;
    background-image: url(../img/banners/banner-nosotros.png);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/

}


.banner-page-servicio{
    width: 100%;
    height: 200px;
    background-image: url(../img/banners/banner-servicio.png);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/

}

.banner-page-flota{
    width: 100%;
    height: 200px;
    background-image: url(../img/banners/banner-flota.png);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/
}


.banner-page-servicio-agua{
    width: 100%;
    height: 200px;
    background-image: url(../img/banners/banner-servicio-agua.png);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/
}


.banner-page-servicio-carga{
    width: 100%;
    height: 200px;
    background-image: url(../img/banners/banner-servicio-carga.png);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/
}


.banner-page-cliente{
    width: 100%;
    height: 200px;
    background-image: url(../img/banner-clientes.jpg);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/
}

.banner-page-atencionalcliente{
    width: 100%;
    height: 200px;
    background-image: url(../img/banners/banner-quejas.jpg);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/
}


.banner-page-contactanos{
    width: 100%;
    height: 200px;
    background-image: url(../img/banners/banner-contactanos.jpg);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/
}


.banner-page-responsabilidadsocial{
    width: 100%;
    height: 200px;
    background-image: url(../img/banners/banner-rs.jpg);
    background-position: center;
    background-size: cover;
    /*margin-top: 10px;*/
}
/* FIN - BANNER */


/*  INICIO - BIEMVENIDA */
.bienvenida{
    width: 100%;
    height: 200px;
    /*background-color:  rgba(139, 139, 139, 0.1);*/
    /*background-color: rgb(0, 124, 241);*/
    background-color: #007cf1ff;

    
    
}


.bienvenida h1{
    max-width: 800px;
    margin:auto;
    text-align: center;
    padding-top: 45px;
    font-size: 30px;
    /*color: #0075b0;*/
    color:white;
}


.bienvenida h1{
    max-width: 800px;
    margin:auto;
    text-align: center;
    padding-top: 45px;
    font-size: 30px;
    /*color: #0075b0;*/
    color:white;
}

/*  FIN - BIEMVENIDA */



/*  INICIO CARRUSEL */
.carrusel .contenedor{   
    padding-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.carrusel .widget{
    width: 400px;  /*320*/
    text-align: center;
    margin-left: 3px;
    margin-right: 3px;
    margin: auto; 
    margin-top: 10px;  /*todos se alinean desde arriba*/
}

.carrusel .img{
    max-width: 100%;
}

.carrusel h1{
    text-align: center;
    font-size: 25px;
    font-family: 'Baloo Da 2', cursive;
    /*color: #0075b0;*/
    color:rgb(0, 124, 241);
}

.carrusel p{
    text-align: justify;
    color: rgb(86, 86, 86)
}

.carrusel p:nth-child(3){
    text-align: center;
}

/*  FIN CARRUSEL */


/* INICIO - SERVICIOS */

.servicio {
    background-color: rgba(139, 139, 139, 0.1) ;
}




.servicio .titulo-servicio{
    text-align: center;
    font-size: 30px;
    color: rgb(0, 124, 241);
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: bold;
    
}
.servicio .contenedor{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 20px;    
}

.servicio .tipo-servicio{
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 180px;
}

.servicio h1{
    width: 200px;
    text-align: center;
    /*color: #0075b0;*/
    color:rgb(0, 124, 241);
}

.servicio .text{
    font-weight: 500;
    color: rgb(86, 86, 86)
}


.clientes {
    background-color: white;
    margin-top: 5px;
    margin-bottom: 25px;
}


.clientes .titulo-cliente{
    text-align: center;
    font-size: 30px;
    color: rgb(0, 124, 241);
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: bold;
}

.clientes .contenedor{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 20px; 
}
.clientes .carrusel{
    width: 100%;
    padding-left: 40px;
}
/* FIN -SERVICIO */



/* INICIO -FOOTER */
footer{
    width: 100%;
    background-color: #6a6868;

    color:white;
    text-align: center;
}

footer .top-footer{
    padding-top: 20px;
    height: 40px;
}

footer .center-footer{
    padding-top: 20px;
    padding-bottom: 20px;
}

footer .center-footer a{
    text-decoration: none;
    color: white;
}

.fabpagefooter{
    color:white ;
}
.twtpagefooter{
   color:white ;
}
.mailpagefooter{
    color:white ;
}


.bottom-footer{
    font-size:14px;
    background-color: #696565;
}

.menu-footer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 800px;
    justify-content: space-between;
    margin: auto;
}

.menu-footer a{
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}

/* FIN - FOOTER */

/* INICIO - MEDIA QUERY  */

@media all and (max-width:520px){
    header{
     
         height: 100px;
    }

    /* .servicio-galeria .contenedor{
       background-color: red;
       
    } */

    header  .logo-web{
         margin: auto;
         margin-top: 20px;
         text-align: center;
         width: 100%;
    }

    header .navegacion{
        max-width: 100%;
        
        display: flex;
        flex-direction: row;

       

    }



    .logo{
         display: none;
    }
   
    .menu{
        padding-left: 2px;
        padding-right: 2px;
        display: none;

        
    }

    .menu .item{
        padding-top: 0px;
        margin-left: 3.5px;

    }


    .bienvenida h1 {
        padding-top: 10px;
        font-size: 27px;
    }

    .bienvenida h1 {
        padding-top: 10px;
        font-size: 27px;
    }

    /*
    .banner{
        margin-top: 55px;
    }
    */


    .banner-page{
        margin-top: 65px;
    }

    .top-footer{
        padding-left: 10px;
        padding-right: 10px;
    }
    

    .carrusel .contenedor img{
        width: 280px;
        
    }

     
    .body-rs .contenedor .evento .texto {
      
        width: 350px;
    }  
}

@media all and (min-width:520px){

    header  .logo-web{
        display: none;
   }

}

/*  FIN  - MEDIA QUERY  */

/* INICIO CONTENIDO - PAGE */

.body-a .contenedor{
    padding-top: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 900px;
    justify-content: space-between;
    margin: auto;
    
}

.body-a .contenedor-a{
   margin: auto;
   padding: 0px 10px;
}

.body-a .contenedor-b{
    margin: auto;
    margin-top: 5px;
    padding: 0px 10px;
   
 }

 .body-a .contenedor-b .rs-link div{
    margin-top: 15px;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 80px;
    font-weight: bold;
    font-size: 22px;
    background-color: rgba(139, 139, 139, 0.1);
   
 }
 .body-a .contenedor-b .rs-link a{
    text-decoration: none;
    /*color:  #0075b0;*/
    color: rgb(0, 124, 241);

 }


.body-a h1{
    /*color:#0075b0 ;*/
    color:rgb(0, 124, 241);
    font-size: 27px;
}

.body-a p{
    text-align: justify;
    color: #6a6868;
}

.body-a .contenedor-a{
    width: 400px;
    max-width: 100%;
}

.body-a .contenedor-b{
    width: 400px;
    max-width: 100%;
}

.body-a .contenedor .head{
    color: white;
}

.body-b .contenedor{
    padding-top: 20px;
    margin-top: 20px;
    width: 800px;
    max-width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #6a6868;
    padding: 0px 10px;

    
    letter-spacing: 2pt;
}


.body-c .contenedor {
    text-align: center;
    padding: 0px 10px;
}

.body-c .contenedor img {
    text-align: center;
    max-width: 100%;
}





/* FIN CONTENIDO - PAGE */

/* INICIO CLIENTE - PAGE */

.body-cliente  {
    width: 800px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    /*color: #0075b0;*/
    color:rgb(0, 124, 241);
    text-align: center;
    padding: 25px 10px;
    font-size: 25px;
    font-weight: bold;
}

@media all and (max-width:520px){

    .body-cliente img{
        padding: 0px 10px;
      width: 100%;
    }

    /* responsabilidad social */
    .body-rs  .contenedor p{
        max-width: 100%;
        padding-right: 30px;
        padding-left: 20px;
    }



    .sticky-header{
        height: 150px;
    }


 
    
    /* servicio */
                          
                            /* .body-servicio-agua .servicio-a .imagen{
                                max-width: 100%;
                                width: 330px;
                            }

                            .body-servicio-agua .servicio-b .lateral img{
                                width: 300px;
                            }

                            .body-servicio-carga .servicio-b{
                                width: 300px;
                                max-width: 100%;
                            }

                            .body-servicio-carga .servicio-b img{
                                width: 300px;
                                max-width: 100%;
                            } */

    /* SWIPER SLIDER(2) */
    .swiper-image-banner1 {
        height: 450px;
        content: url(../img/banners-main/banner1-movil.jpg);
    }

    .swiper-image-banner2 {
        height: 450px;
        content: url(../img/banners-main/banner2-movil.jpg);
    }

    .swiper-image-banner3 {
        height: 450px;
        content: url(../img/banners-main/banner3-movil.jpg);
    }


      .swiper-image-banner4 {
        height: 450px;
        content: url(../img/banners-main/banner4-movil.jpg);
    }

    .swiper-image-banner5 {
        height: 450px;
        content: url(../img/banners-main/banner5-movil.jpg);
    }

    .banner-page-nosotros{
        margin-top: 0px;
    }
    .banner-page-servicio{
        margin-top: 0px;
    }
    
    .banner-page-flota{
        margin-top: 0px;
    }
    
    .banner-page-cliente{
        margin-top: 0px;
        /*margin-top: 35px;*/
    }
    
    .banner-page-atencionalcliente{
        margin-top: 0px;
    }
        
    .banner-page-contactanos{
        margin-top: 0px;
    }

    .banner-page-responsabilidadsocial{
        margin-top: 0px;
    }




    /* menu 
    .menu .item a{
        background-color:red;
        display: none !important
    } */

    .menu-footer{
        display: none;
    }

    footer .top-footer{
        height: 10px;
    }

    footer .center-footer{
       padding-top: 5px;
    }

  

}



/* FIN CLIENTE - PAGE */


/* INICIO RESPONSABILIDAD SOCIAL  */

.body-mensaje {
    padding-top: 40px;
    color: #6a6868;
    padding-bottom: 20px;
}

.body-mensaje .contenedor {
  display: flex;
  justify-content: center;
}


.body-mensaje .contenedor .mensaje{
    max-width: 100%;
    width: 900px;
}

.body-mensaje .contenedor .mensaje2{
    
    max-width: 50%;
    width: 450px;
    
}

.body-mensaje .contenedor .mensaje3{
    max-width: 95%;
    width: 800px;
    

}



.body-mensaje h1{
    padding-left: 20px;
    font-size: 25px;
    /*color: #0075b0;*/
    color:rgb(0, 124, 241);
    text-align: left; 
}


.body-mensaje h3{
    padding-left: 20px;
    text-align: justify; 
}

.body-mensaje .fotocentrada{
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    text-align: center; 
}






.body-mensaje p{
    text-align: justify;
    padding-left: 25px;
    padding-right: 25px;

}

.body-rs{
    padding-top: 30px;
}

.body-rs .contenedor a{
    color:rgb(0, 124, 241);
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
}

.body-rs  .contenedor{
    width: 800px;
    max-width: 100%;
    display:  flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    text-align: center;
}

.body-rs .contenedor .evento {
    display:  flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 20px;
    max-width:  100%;
}

.body-rs .contenedor .evento image {
     width: 300px;
     max-width: 100%;
}

.body-rs .contenedor .evento .texto {
    padding: 0px 10px;
     width: 500px;
     max-width: 100%;
     text-align: justify;
}

.body-rs .contenedor .evento h1 {
    text-align: center;
    /* color: #0075b0; */
    color:rgb(0, 124, 241);
}

/* FIN RESPONSABILIDAD SOCIAL */


                                /* INICIO DE SERVICIO */
                                .servicio-galeria .contenedor .galeria{
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    justify-content: center; 
                                    text-align: center;
                                    padding-bottom: 15px;
                                }

                                .servicio-galeria .contenedor .galeria2{
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    justify-content: center; 
                                    text-align: center;
                                    padding-bottom: 15px;
                                }

                                .servicio-galeria .contenedor .imagen{
                               
                                   /* 
                                    width: 300px;
                                    
                                    */
                                    width: 420px;
                                    height: 250px;
                                    
                                    background-position: center;
                                    background-size: cover;   
                                    margin: 5px 5px;
                                }
                                
                                /* Se ejecuta cuando el hover lo ejecuta */
                                .servicio-galeria .contenedor .texto{
                                    top: 0;
                                    bottom: 0;
                                    left: 0;
                                    right: 0;
                                    height: 100%;
                                    width: 100%;
                                    opacity: 0; 
                                    transition: .5s ease;
                                    color:#FEF5DF ;
                                   

                                }


                              

                                .servicio-galeria .contenedor .texto .head{
                                    padding-top: 25px;
                                    font-size: 25px;
                                    font-weight: bold;  
                                    padding-bottom: 15px;
                                    text-align: center;
                               
                                }


                                .servicio-galeria .contenedor .texto .boton{
                                   
                                    background-color: rgb(4, 20, 68);
                                    font-size: 18px;
                                    font-weight: bold;  
                               
                                }

                                /* Ejecuta :hover .texto - dispara la clase .texto */
                                .servicio-galeria .contenedor  .imagen:hover .texto{
                                    /* background: rgba(77, 77, 77, .9); */
                                    /*background: #0075b0;*/
                                    background:rgb(0, 124, 241);
                                    opacity:0.9;
                                    filter:alpha(opacity=90); 
                                    cursor: pointer; 

                                }
                                
                                /*
                                .servicio-galeria .contenedor .imagen:nth-child(1){
                                    background-image: url(../img/servicios/servicio-agua1.JPG);
                                }
                                
                                
                                .servicio-galeria .contenedor .imagen:nth-child(2){
                                    background-image: url(../img/servicios/servicio-agua2.JPG);
                                }
                                
                              

                                .servicio-galeria .contenedor .imagen:nth-child(3){
                                    background-image: url(../img/servicios/servicio-agua3.JPG);
                                }

                                .servicio-galeria .contenedor .imagen:nth-child(4){
                                    background-image: url(../img/servicios/servicio-agua4.JPG);
                                }

                                .servicio-galeria .contenedor .imagen:nth-child(5){
                                    background-image: url(../img/servicios/servicio-agua5.JPG);
                                }

                                .servicio-galeria .contenedor .imagen:nth-child(6){
                                    background-image: url(../img/servicios/servicio-agua6.JPG);
                                }
                              

                                .servicio-galeria .contenedor .galeria2 .imagen:nth-child(1){
                                    background-image: url(../img/servicios/servicio-carga1.jpg);
                                }

                                .servicio-galeria .contenedor .galeria2 .imagen:nth-child(2){
                                    background-image: url(../img/servicios/servicio-carga2.jpg);
                                }

                                .servicio-galeria .contenedor .galeria2 .imagen:nth-child(3){
                                    background-image: url(../img/servicios/servicio-carga3.jpg);
                                }

                                .servicio-galeria .contenedor .galeria2 .imagen:nth-child(4){
                                    background-image: url(../img/servicios/servicio-carga4.jpg);
                                }

                                .servicio-galeria .contenedor .galeria2 .imagen:nth-child(5){
                                    background-image: url(../img/servicios/servicio-carga5.jpg);
                                }
                                  */
                                /* FIN DE SERVICIO */


                                .body-a .contenedor .contenedor-b .servicio-galeria .contenedor .galeria2 .servicio1{
                                    background-image: url(../img/servicios/servicio-agua6.JPG);
                                    width: 100%;
                                }

                                /*
                                .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .servicio1{
                                    background-image: url(../img/servicios/servicio-agua6.JPG);
                                }
                                */
                                .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .servicio2{
                                    background-image: url(../img/servicios/servicio-agua3.JPG);
                                }
                                .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .servicio3{
                                    background-image: url(../img/servicios/servicio-agua5.JPG);
                                }

                                .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .servicio4{
                                    background-image: url(../img/servicios/servicio-agua2.JPG);
                                }

                                .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .servicio5{
                                    background-image: url(../img/servicios/servicio-agua1.JPG);
                                }

                                .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .servicio6{
                                    background-image: url(../img/servicios/servicio-agua4.JPG);
                                }

                                .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .carga1{
                                    background-image: url(../img/servicios/servicio-carga1.jpg);
                                }

                                  .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .carga2{
                                    background-image: url(../img/servicios/servicio-carga2.jpg);
                                }

                                  .body-mensaje .contenedor .mensaje2 .servicio-galeria .contenedor .galeria2 .carga3{
                                    background-image: url(../img/servicios/servicio-carga3.jpg);
                                }





/* INICIO DE GALERIA */


.body-galeria .contenedor {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}

.body-galeria .contenedor .fotos {
    width: 310px;
   /* padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px; */
}

.body-galeria .contenedor .fotos img {
    width:  300px;
    height: 190px;
}

/* FIN DE GALERIA */

/* INICIO - SLIDER SWIPPER */

.swiper-container {
    width: 100%;
    height: 100%;
  }
  
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  /* FIN - SLIDER SWIPPER */

  /*  INICIO - CONTACTO */

.body-contacto .contenedor{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: center;
    margin: 0;
    max-width: 100%;
 
    padding-top: 25px;
    padding-bottom: 15px;

}

.body-contacto .contacto-texto{
    width: 400px;
    font-size: 17px;
    color:#6a6868;
    margin: 0;
    padding-bottom: 25px;
}

.body-contacto .contacto-texto .texto-d{
    margin-left: 20px;
    margin-right: 20px;
    /*color: #0075b0;*/
    color:rgb(0, 124, 241);
    background-color: rgba(139, 139, 139, 0.1);
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    
}

.body-contacto .contacto-texto .texto-d h1{
     /*color: #0075b0;*/
     color:rgb(0, 124, 241);
}

.body-contacto .contenedor-col{
   padding-left: 10px;
   padding-right: 10px;
 
}

.body-contacto .contenedor-col-texto{
   padding-left: 0px;
   padding-right: 0px;
 
}

  
.body-contacto .contenedor-col input{
    font-size: 17px;
    width: 100%;
    /* border: groove; */

}
  
.body-contacto .contenedor-col textarea{
    font-size: 17px;
    width: 100%;
    /* border: groove; */
}

.body-contacto .boton {
    max-width: 100%;
    align-items: center;
}


.body-contacto .boton div{
     width: 200px;
     margin: auto;

}
 
 .body-contacto input[type=submit] {
     padding:5px 15px;
     background:#ccc; 
     border:0 none;
     -webkit-border-radius: 5px;
     border-radius: 5px;
 
     margin-top: 10px;
     
 }
 
 .body-contacto .contenedor-col input[type=submit]:hover {
     /*background:#0075b0;*/
     background:rgb(0, 124, 241);
     color:white;
     font-weight: bold;
     cursor:pointer;
 }

 .body-contacto a{
    text-decoration: none;
    color:#6a6868;
    padding-left: 20px;    
}

/* INICIO - MAPA */

.mapa {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    
}

.mapa .contenedor{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.mapa .contenedor  iframe{
    width: 800px;
    max-width: 100%;
    height: 350px;

}

/* FIN - MAPA */

/* INICIO - FORMULARIO RECLAMO QUEJA */

.formulario {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;



}
.formulario .contenedor {
    width: 600px;
    max-width: 100%;
    padding-bottom: 25px;

}


.formulario .contenedor  p{
    color: #6a6868;
    font-weight: bold;
    font-size: 18px;
    padding-left: 20px;

}




.formulario .contenedor  input{
    color: #6a6868;
    font-size: 18px;
    width: 90%;
    height: 25px;
    margin-left: 20px;
    
}

.formulario .contenedor  select{
    color: #6a6868;
    /* font-size: 18px; */
    height: 25px;
    width: 90%;
    margin-left: 20px;
}

.formulario .contenedor  textarea{
    color: #6a6868;
    font-size: 18px;
    /* height: 25px; */
    width: 90%;
    margin-left: 20px;
}


.formulario .boton {
    max-width: 100%;
    align-items: center;
}


.formulario .boton div{
     width: 280px;
     margin: auto;

}


.formulario input[type=submit] {
    padding:5px 15px;
    font-weight: bold;
    background:#ccc; 
    border:0 none;
    -webkit-border-radius: 5px;
    border-radius: 5px;
     margin-top: 10px;
    
}

.formulario input[type=submit]:hover {
    /*background:#0075b0;*/
    background:rgb(0, 124, 241);
    color:white;
    font-weight: bold;
    cursor:pointer;
}

.formulario .contenedor .descripcion {
    font-size: 10px;
 
}

.formulario .contenedor .fail p {
    color: red !important;
    font-size: 13px !important;
    font-weight: bold !important;
}


.formulario .contenedor .boton input {
    background-color: rgb(0, 124, 241) !important;
    color: white !important;
}


.contenedor_formulario {
    padding-left: 10px;
    display: flex;
    justify-content: center;
}

.contenedor_formulario .items{
    
    width: 100%;
}

.contenedor_formulario select{
    height: 35px;
    font-size: 13px;
}

/* FIN - FORMULARIO RECLAMO QUEJA */


/* INICIO MENU HAMBURGUESA */
#menuToggle
{
  display: block;
  position: absolute;  /*relative*/
  top: 85px;
  left: 15px;
  z-index: 9995;
  
  -webkit-user-select: none;
  user-select: none;

  /*max-width: 10%;*/
  

}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  

  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}


#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}


#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}


#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}



#menu
{
  position: absolute;
  
  /*width: 350px;*/
  width: 500px;
  height: 900px;

  /*margin: -100px 0 0 -50px;*/

  margin: -125px 0 0 -50px;
  /* padding: 50px; */
   
  
  padding: 50px 100px;
  padding-top: 125px;
  
  background: rgba(253, 247, 247, 0.9);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 20px;
  font-weight: bold;
  /*color:#0075b0;*/
  color:rgb(0, 124, 241);
  text-transform: uppercase;
}


#menuToggle input:checked ~ ul
{
  transform: none;
}

/* FIN MENU HAMBURGUESA */

/* INICIO BTN WSP  */


.flotantetelefono{
	position:fixed;
    top: 150px;
    right:5px;
    z-index:1002;
}

.flotanteformulario{
	position:fixed;
    bottom:110px;
    right:5px;
    z-index:100;
}


.flotantewsp{
	position:fixed;
    bottom:20px;
    right:5px;
    z-index:100;
}

/*
.flotanteredesfb{
	position:fixed;
    top:8px;
    left:380px;
    color:rgb(0, 124, 241);
    z-index:2000;
    transform: translateX(-50%);
}

.flotanteredesld{
	position:fixed;
    top:8px;
    left:440px;
    color:rgb(0, 124, 241);
    z-index:2000;
}*/

.flotanteatencion24h{
	position:fixed;
    bottom:50px;
    left:5px;
    z-index:100;
}

.closeBtn24H {
  position:fixed;
  bottom:170px;
  left:200px;
  z-index: 200;
  font-size: 30px;
  color:black;
  cursor: pointer;
}




.wsp{
	position:fixed;
	width:150px;
	/*height:60px;*/
	bottom:20px;
	right:40px;
	/*background-color:#25d366;*/
	color:#FFF;
	/*border-radius:50px;*/
	text-align:center;
    font-size:30px;
	/*box-shadow: 2px 2px 3px #999;*/
    z-index:100;
}


.registro{
	position:fixed;
	width:150px;
	bottom:90px;
	right:40px;
	color:#FFF;
	text-align:center;
    font-size:30px;
   z-index:100;
}

.my-wsp{
	margin-top:16px;
}

/* FIN BTN WSP */

.enviarboton {
    width: 180px;
    border-color: rgb(0, 124, 241);
    background-color: rgb(0, 124, 241);
    color: white;
}


#owl-demo .carrusel{
  margin: 3px;
}

#owl-demo .carrusel img{
  display: block;
  /* width: 100%;*/
  /*height: auto;*/
    width: 150px;
    height: 150px;

}


/*--------------------------------------------*/
/* VIDEO YOUTUBE INDEX*/

#videoPopup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

.popupContent {
  position: relative;
  margin: 5% auto;
  padding: 0;
  width: 80%;
  max-width: 800px;
  background: transparent;
  text-align: center;
}


.closeBtn {
  position: absolute;
  top: -35px;
  /*right: 0;*/
  right: 95%;
  font-size: 30px;
  color: white;
  cursor: pointer;
}





/*--------------------------------------------*/

.listado{
    margin-left: 50px;
}

.lista  {
    list-style-type: none;
}


form {
    display: flex;
    flex-direction: column;
}
form label {
    margin-top: 10px;
}
form input, form textarea {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
form button {
    margin-top: 20px;
    padding: 10px;
    background: #0077cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
form button:hover {
    background: #005fa3;
}

/* CELULARES*/


@media all and (max-width:520px){

    .contenedor_formulario .items{
        width: 90%;
    }

   .flotanteatencion24h{
        bottom: 23px;

    }

    .closeBtn24H{
        bottom: 143px;

    }

    .flotantetelefono{
        top: 160px;
        height: 30px;
    }

    .flotanteformulario{
        bottom:300px;
        display: none;
    }

    .flotantewsp{
        /*bottom:200px;*/
     
        /*display: none;*/

    }

    .bienvenida .contenedor{
        width: 80%;
        padding-top: 17px;
    }

    .clientes .carrusel{
        width: 100%;
    }

    .popupContent {
        width: 400px;
        top: 50px;
    }

    .popupContent iframe {
        width: 350px;
        height: 280px;
        align-items: center;
          
    }

    .body-c .contenedor iframe{
        width: 350px;
        height: 200px;

    }

    .body-mensaje .contenedor .mensaje3 iframe{
        width: 350px;
        height: 200px;
    }

    .closeBtn {
        right: 90%;
    }

    

}