*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body{
  font-family: 'Open Sans', sans-serif;
  background: #e5e7e7;
}


/*CABECERA*/

nav{
  height: 100px;
  background-color: white;
}

.menumatriz{
  background-color: #0b5fa2;
  width: 100%;
  height: 103px;
  position: fixed;
  z-index: 1;
  top: 0;
  box-shadow: 0px 5px 10px #000000;
}

nav img{
  width: 340px;
  position: absolute;
  top: 17px;
  left: 6%;
}

nav ul{
  float: right;
  margin-right: 35px;
}

nav ul li{
  display: inline-block;
  line-height: 100px;
  margin: 0 15px;
}

nav ul li a{
  position: relative;
  color: #0b5fa2;
  font-size: 16px;
  padding: 5px 0;
  text-transform: uppercase;
}

nav ul li a:before{
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: #0b5fa2;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s linear;
}

nav ul li a:hover:before{
  transform: scaleX(1);
  transform-origin: left;
}

label #btn,
label #cancel{
  color: #0b5fa2;
  font-size: 30px;
  float: right;
  line-height: 103px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check{
  display: none;
}

@media (max-width: 1118px) {
  nav img{
    left: 6%;
  }
}

@media (max-width: 944px) {
  nav img{
    left: 6%;
    top: 23px;
    width: 230px;
  }
  nav ul li a{
    font-size: 17px;
  }
}

@media (max-width: 1060px) {
  label #btn{
    display: block;
  }

  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(132, 134, 136, 0.95);
    top: 104px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }

  nav ul li a{
    font-size: 20px;
  }

  #check:checked ~ ul{
    left: 0;
  }

  #check:checked ~ label #btn{
    display: none;
  }

  #check:checked ~ label #cancel{
    display: block;
  }

  nav ul li a{
    color: white;
  }
}

/*FIN DE CABECERA*/





/*TITULO*/

.titulo{
  width: 100%;
  background-color: #033f87;
  font-size: 18px;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
  }

  .titulo h2{
  padding-top: 130px;
}

/*FIN TITULO EQUIPO - JUNIO 2022*/



/*SUB TITULO*/

.subtitulo{
  width: 100%;
  background-color: #9BA7D4;
  font-size: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
  }


.subtitulo p{
  color: white;
  }

/*FIN DE SUB TITULO*/


/*SECCION SUB MENUS*/

.sub-menu{
  width: 100%;
  background-color: #BCC2E2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;

}

.categoria{
  background-color: #7AB992;
  text-align: center;
  color: white;
  padding: 10px 20px;
  margin: 5px;
  box-shadow: 0px 3px 0px #7b8181;
  border-radius: 50px;
}

.categoria a{
  font-size: 16px;
  color: white;
}

.categoria:active{
  background-color: #ffffff;
}

.categoria:hover{
  background-color: #033F87;
  box-shadow: 0px 0px 0px;
  padding-top: 7px;
}

/*FIN SECCION SUB MENUS*/




/*SECCION CONTENIDO SERVICIOS*/

.bienvenida{
  width: 100%;
  background-color: #A2A6A8;
  margin-top: 2px;
  text-align: center;
}


.bienvenida img{
  padding-top: 25px;
}





.bienvenida2{
  width: 100%;
  background-color: #A2A6A8;
  text-align: justify;
}


.bienvenida2 p{
  color: #ffffff;
  font-size: 16px;
  padding: 25px 20px;
  line-height: 1.7em;
  max-width: 570px;
  margin: 0 auto;
}


.bienvenida2 img{
  padding-top: 25px;
}





















/*FIN SECCION CONTENIDO SERVICIOS*/






/*servicios textos centrados

.bienvenida{
  width: 100%;
  background-color: #A2A6A8;
  margin-top: 2px;
  text-align: center;
}

.bienvenida h3{
  font-size: 16px;
  padding-top: 40px;
  padding-bottom: 35px;
}

.bienvenida p{
  color: #ffffff;
  font-size: 16px;
  padding: 25px 10px;
  line-height: 1.7em;
  max-width: 570px;
  margin: 0 auto;
}


.bienvenida img{
  padding-top: 25px;
}

*/






























/*Empresa - junio 2022*/

.business > .contenedor{
  padding-top: 40px;
  padding-bottom: 40px;
  }

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

  .foto-empresa{
    width: 100%;
    max-width: 400px;
    }

  .foto-empresa img{
    width: 100%;
  }





.valores{
  text-align: justify;
  padding: 15px 25px;
  max-width: 850px;
}


.valores h3{
  font-size: 20px;
  color: #003399;
  padding-bottom: 10px;
  border-bottom: 1px solid #003399;
}

.valores p{
  font-size: 16px;
  color: black;
  padding-top: 15px;
  padding-bottom: 15px;
  }

  @media all and (min-width: 769px){
    .valores{
      padding-left: 40px;
      text-align: justify;

      }
  }

  /*Fin Empresa - junio 2022*/








/*Menu Equipo - junio 2022*/

.team{
  padding-bottom: 25px;

  }

.team > .contenedor{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  background: #9FA1A4;
}

.foto-miluska{
  width: 100%;
  max-width: 350px;
  }

.foto-miluska img{
  width: 100%;
}

.foto-chicho{
  width: 100%;
  max-width: 350px;
  }

.foto-chicho img{
  width: 100%;
}

.perfil{
  text-align: justify;
  padding: 15px 25px;
  max-width: 850px;
  }

.perfil h3{
  text-align: left;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #003399;
  font-size: 22px;
}

.perfil h4{
  padding-top: 30px;
  padding-bottom: 10px;
  color: #003399;
  font-size: 18px;

}

.perfil p{
  font-size: 14px;
  color: #ffffff;
  padding-bottom: 15px;
  }


@media all and (min-width: 769px){
  .perfil{
    padding-left: 30px;
    text-align: justify;

    }
}

/*Fin Menu Equipo - junio 2022*/





/*banner Home*/

.banner{
  width: 100%;
  height: 900px;
  background-image: url(../img/banner-inicio.jpg);
  background-position: center;
  background-size: cover;
}

.banner > div{
  width: 100%;
  height: 100%;
  background-color: rgba(2, 29, 57, 0.15);
}

.llamada-accion{
  text-align: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
}


.llamada-accion h2{
  font-size: 20px;
  color: white;
  width: 100%;
  padding: 10px 5px;
  background-color: rgba(3, 63, 135, 0.7);
}

/*Fin de banner home*/







/*Sección Representadas*/

.representadas{
  width: 100%;
  background-color: #727373;
  padding: 20px;
  color: #b0b3b3;
  text-align: center;
}

.representadas h4{
  font-size: 19px;
  color: white;
  padding-bottom: 15px;
}

.representadas img{
  padding: 0 50px;
  margin-bottom: 20px;
}

/*Fin Sección Representadas*/








/*MENU SERVICIOS*/

/*Banner*/

.banner-servicios{
  width: 100%;
  height: 365px;
  margin-top: 103px;
  background-image: url(../img/banner-servicios.jpg);
  background-position: center;
  background-size: cover;
}

.contenedor-servicios{
  width: 100%;
  height: 365px;
  margin-top: 103px;
  background-color: rgba(2, 29, 57, 0.25);
  background-position: center;
  background-size: cover;
}

/*subtitulo*/

.subtitulo-servicios-contacto-noticias{
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;
  justify-content: center;
  align-items: center;
  background-color: #033f87;
  color: #ffffff;
  text-align: center;
}
/*Fin subtitulo*/



/*ista de servicios*/

.nosotros{
  padding-bottom: 30px;
}

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

.foto-servicio{
  width: 100%;
  max-width: 400px;
}

.foto-servicio img{
  width: 100%;
}

.linea-servicios{
  text-align: left;
  padding: 20px 20px;
  max-width: 370px;
}

.linea-servicios h3{
  font-size: 20px;
  color:#033f87;
  padding-bottom: 20px;
  border-bottom:1px solid #033f87;
}

.linea-servicios p{
  padding-top: 20px;
  color: #3c1c22;
  font-size: 15px;
}

/*Fin ista de servicios*/


/*presupuesto servicios*/

.ppto{
  width: 100%;
  background-color: #0082cf;
  color: #b0b3b3;
  text-align: center;
}

.ppto h3{
  padding: 25px;
  font-size: 20px;
  color: #ffffff;
}

/*FIN MENU SERVICIOS*/



/*MENU CONTACTOS*/

/*Banner*/

.banner-contacto{
  width: 100%;
  height: 365px;
  margin-top: 103px;
  background-image: url(../img/banner-contacto.jpg);
  background-position: center;
  background-size: cover;
}

.contenedor-contacto{
  width: 100%;
  height: 365px;
  margin-top: 103px;
  background-color: rgba(2, 29, 57, 0.25);
  background-position: center;
  background-size: cover;
}







/*SECCION DE IMAGEN PORTAFOLIO*/

.porta{
  padding-bottom: 80px;
}

.porta > .porta-contiene{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.porta-imagen{
  width: 100%;
  max-width: 970px;
}

.porta-imagen img{
  width: 100%;
}


@media all and (min-width:769px){
  .porta{
    padding-top: 80px;
  }
  .porta-imagen{
    margin-right: 30px;
  }
}

/*FIN DE DE IMAGEN PORTAFOLIO*/





.banner-portafolio{
  width: 100%;
  height: 365px;
  margin-top: 103px;
  background-image: url(../img/banner-portafolio.jpg);
  background-position: center;
  background-size: cover;
}

.contenedor-portafolio{
  width: 100%;
  height: 365px;
  margin-top: 103px;
  background-color: rgba(2, 29, 57, 0.25);
  background-position: center;
  background-size: cover;
}



/*formulario*/

.formulario{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.formulario2{
  background: #cdd2e5;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.mapa{
  width: 450px;
  margin: 10px;
  background: rgba(135, 160, 198, 0.4);
  padding: 10px 20px;
  margin-top: 20px;
  margin-bottom: 30px;
  border-radius: 7px;
}

form{
  width: 380px;
  background: rgba(135, 160, 198, 0.4);
  padding: 10px 20px;
  margin-top: 20px;
  margin-bottom: 30px;
  border-radius: 7px;
}

.formtitle{
  color: #033f87;
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
}

.formtitle2{
  color: #033f87;
  text-align: center;
  font-size: 20px;

}

.formsubtitle{
  color: #033f87;
  text-align: center;
  font-size: 16px;
  margin-bottom: 15px;

}


.campo{
  font-size: 14px;
}

input, textarea{
  width: 100%;
  margin-bottom: 20px;
  padding: 7px;
  font-size: 14px;
  border: none;
}

textarea{
  min-height: 100px;
  max-height: 200px;
  max-width: 100%;
}

#boton{
  background: #31384a;
  color: #fff;
  padding: 10px;
}

#boton:hover{
  cursor: pointer;
}

@media (max-width: 480px) {
  form{
    width: 100%;
  }
}



/*Agradecimiento*/
.graciastitle{
  color: #033f87;
  margin-top: 200px;
  text-align: center;
  margin-bottom: 200px;
}


/*FIN MENU CONTACTOS*/





/*BANNER ANIMADO*/

.banner{
  display: flex;
  height: 365px;
  margin-top: 104px;
}

.banneritem{
  flex: 1;
  color: #fff;
  font-weight: bold;
  font-size: 2em;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: flex-grow 0.5s;
}

.banneritem a{
  color: white;
}


.banneritem:hover .bannertitle{
  transform: rotate(0);
  transition: transform 0.5s 0.5s;
}

.banneritem:nth-child(1){
  width: 100%;
  height: 365px;
  background-image: url(../img/banner-1.jpg);
  background-position: center;
  background-size: cover;
}

.banneritem:nth-child(2){
  background-image: url(../img/banner-2.jpg);
  background-position: center;
  background-size: cover;

}

.banneritem:nth-child(3){
  background-image: url(../img/banner-3.jpg);
  background-position: center;
  background-size: cover;
}

.banneritem:nth-child(4){
  background-image: url(../img/banner-4.jpg);
  background-position: center;
  background-size: cover;
}

.bannertitle{
  margin: 0;
  transform: rotate(-90deg);
}

.banneritem:hover{
  flex-grow: 7;
}

/*FIN BANNER ANIMADO*/



/*REDES SOCIALES*/

.social{
  position: fixed;
  left: 0;
  top: 469px;
  z-index: 2000;
}

#whatsapp a{
  background: #00bb2d;
  padding: 10px 20px;
  font-size: 25px;
  color: #fff;
  text-decoration: none;
  width: 62px;
  transition: all 1s ease;
}

#whatsapp a:hover{
  background: #033f87;
  padding: 10px 80px;
  font-size: 35px;
}


#linkedin a{
  background: #3b5998;
  padding: 10px 20px;
  font-size: 25px;
  color: #fff;
  text-decoration: none;
  width: 62px;
  transition: all 1s ease;
}

#linkedin a:hover{
  background: #033f87;
  padding: 10px 80px;
  font-size: 35px;
}

#instagram a{
  background: #da1b60;
  padding: 10px 20px;
  font-size: 25px;
  color: #fff;
  text-decoration: none;
  width: 62px;
  transition: all 1s ease;
}

#instagram a:hover{
  background: #033f87;
  padding: 10px 80px;
  font-size: 35px;
}

#mail a{
  background: #ee8128;
  padding: 10px 20px;
  font-size: 25px;
  color: #fff;
  text-decoration: none;
  width: 62px;
  transition: all 1s ease;
}

#mail a:hover{
  background: #033f87;
  padding: 10px 80px;
  font-size: 35px;
}

@media (min-width: 300px) and (max-width: 1185px){
  .social{
    display: none;
  }
}

/*FIN DE REDES SOCIALES*/




/*LISTA DE PRODUCTOS*/

/*Menus agua corte y conexiones*/

.enlances-agua{
  width: 100%;
  background-color: #e5e7e7;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

/*Titulo menu Luz, Gas y Automatización

.subtitulo{
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  color: #555a66;
  text-align: center;
}
*/

/*Botones menus de agua*/

.categoria{
  background-color: #566792;
  text-align: center;
  color: white;
  padding: 10px 20px;
  margin: 5px;
  box-shadow: 0px 3px 0px #A9ABAE;
  border-radius: 50px;
}

.categoria a{
  font-size: 16px;
  color: white;
}

.categoria:active{
  background-color: #ffffff;
}

.categoria:hover{
  background-color: #009ed0;
  box-shadow: 0px 0px 0px;
  padding-top: 7px;
}


.lineaproductos{
  width: 100%;
  max-width: 1170px;
  background-color: #e5e7e7;
  margin-top: 20px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/*SERVICIO - PORTAFOLIO ITEMS*/

.producto{
  width: 250px;
  height: 330px;
  margin: 10px;

  color: #ffffff;
  display: flex;
  flex-direction: column;
}


.imagen{
  width: 250px;
  height: 210px;
  background-color: #ffffff;
  margin: auto;
  text-align: center;
}

/*Leyenda*/

.leyenda{
  width: 250px;
  height: 90px;
  background: #808080;
  padding: 10px;

  font-size: 1em;
  text-align: center;
  transition: all 0.5s linear;
}

.leyenda a{
  color: #dcddde;
}

.leyenda:hover{
  background-color: #033F87;
  height: 150px;
  padding: 25px;
}



@media (min-width: 300px) and (max-width: 849px){
  .enlances-agua{
    flex-direction: column;
    margin-top: 20px;
  }
}

/*FIN DE SERVICIO - PORTAFOLIO ITEMS*/






/*PIE DE PAGINA*/


.top-footer{
  width: 100%;
  background-color: #8793C9;
  height: 6px;
}

/*.................................*/


.logo-footer{
  margin: 20px 40px;


}


.center-footer{
  width: 100%;
  height: 350px;
  font-size: 16px;
  background-color: #003399;
  margin: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}



.info2{
  color: #b0b3b3;
  margin: 10px 40px;
  line-height: 195%;

}

/*.................................*/

.info3{
  color: #b0b3b3;
  margin: 10px 40px;
}

.info3 p a{
  font-weight: bold;
  font-size: 18px;
  color: #b0b3b3;
  line-height: 265%;
}

.info3 p a:hover{
  color: #fff;
}

/*.................................*/

.info4{
  color: #b0b3b3;
  margin: 10px 40px;
  line-height: 200%;
}

.info4 a{
  margin: 5px;
  font-weight: bold;
  font-size: 25px;
  color: #b0b3b3;
  line-height: 225%;
}

.info4 a:hover{
  color: #fff;
}

/*.................................*/

#footer-whatsapp a{
  font-size: 25px;
  color: #b0b3b3;
  transition: all 1s ease;
  width: 62px;
}

#footer-whatsapp a:hover{
  font-weight: bold;
  color: #fff;
}

#footer-facebook a{
  font-size: 25px;
  color: #b0b3b3;
  transition: all 1s ease;
  width: 62px;
}

#footer-facebook a:hover{
  font-weight: bold;
  color: #fff;
}

#footer-mail a{
  font-size: 25px;
  color: #b0b3b3;
  transition: all 1s ease;
  width: 62px;
}

#footer-mail a:hover{
  font-weight: bold;
  color: #fff;
}



@media (min-width: 300px) and (max-width: 760px){
  .center-footer{
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .info2{
    color: #b0b3b3;
    margin: 10px 40px;
    line-height: 195%;
    text-align: center;
    }

  .info3{
    display: none;
  }

  .logo-footer{
    margin: 20px 40px;
    text-align: center;
  }

}

/*.................................*/



.bottom-footer{
  width: 100%;
  height: 100px;
  font-size: 16px;
  background-color: #999999;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-footer p{
  color:white;
  font-size: 12px;
  margin: auto;

  text-align: center;
}

.bottom-footer a{
  color: white;
}

.bottom-footer a:hover{
  color: white;
}

/*FIN PIE DE PAGINA*/