@charset 'iso-8859-1';
/* CSS Document */

body {
	font-family: "Livvic", sans-serif;
}
table{
	    --bs-table-bg: transparent !important;
}
#header {
	background-image: url('images/fondoHeader.jpg');
	height: 490px;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (max-width: 747px) {
	#header {
	height: 450px;
	}
}
@media (max-width: 449px) {
	#header {
	height: 250px;
	}
}
.foto1Header{
	margin-top: 80px;
}
.menuHeader {
	color: #ffde00;
	padding: 15px 0px;
	background: #0b0e21;
	position: fixed;
	width: 100%;
	z-index: 300;
	transition: all 0.3s ease;
	height: 85px;
	z-index: 1;
	top: 0px;
}
.menuHeaderTop {
	top: 0px;
	transition: all 0.3s ease;
}
/* @media (max-width: 747px) {
	.menuHeaderTop {
	padding: 0px 0;
}
} */

@media (max-width: 747px) {
	.menuHeaderTop .navHeader {
    right: 0px;
	}
}
h2{
	font-size: 2.3rem;
	color: #FF4500;
}
.navHeader {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  top: 20px;
  right: 10px;
  font-size: 19px;
  transition: all 0.3s ease;
}
.navHeader li {
  float: left;
}
@media (max-width: 747px) {
	.navHeader {
	  top: 15px;
	  right: 0px;
	  font-size: 19px;
	  text-align: center;
	  transition: all 0.3s ease;
	}
	.navHeader li {
	  float: none;
	  display: inline-block;
	  transition: all 0.3s ease;
	}
}
@media (max-width: 449px) {
	.navHeader {
	  font-size: 17px;
	}
}
.navHeader li a {
  display: block;
  color: #9bcaff;
  text-align: center;
  padding: 5px 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}
@media (max-width: 521px) {
	.navHeader li a {
	  padding: 5px 6px;
	  font-size: 16px;
	}
}
@media (max-width: 398px) {
	.navHeader li a {
	  padding: 5px;
	  font-size: 15px;
	}
}
.navHeader li a:hover {
	color: #ff4500;
	transition: all 0.3s ease;
}
.navHeader2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 15px;
  right: 0px;
  font-size: 15px;
  transition: all 0.3s ease;
  margin-bottom: 50px;
}
.navHeader2 li {
  float: left;
}
@media (max-width: 991px) {
	.navHeader2 {
	  position: relative;
	  top: 15px;
	  right: 0px;
	  font-size: 19px;
	  text-align: center;
	  transition: all 0.3s ease;
	  margin-top: 20px;
	  margin-bottom: 40px;
	}
	.navHeader2 li {
	  float: none;
	  display: inline-block;
	  transition: all 0.3s ease;
	}
}
.navHeader2 li a {
  display: block;
  color: #9bcaff !important;
  text-align: center;
  padding: 5px 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
  font-family: "Livvic", sans-serif;
  font-size: 17px;
}
@media (max-width: 449px) {
	.navHeader2 li a {
	  padding: 5px 5px;
	}
}
.navHeader2 li a:hover {
	color: #FF4500 !important;
	transition: all 0.3s ease;
}
.logoHeader {
	max-width: 190px;
	transition: all 0.3s ease;
	z-index: 3;
	position: relative;
	margin-left: 30px;
}
@media (max-width: 747px) {
	.logoHeader {
	transition: all 0.3s ease;
	z-index: 0;
	max-width: 150px;
}
}
@media (max-width: 747px) {
	.logoHeader {
	transition: all 0.3s ease;
	z-index: 0;
}
}
@media (max-width: 434px) {
	.logoHeader {
	transition: all 0.3s ease;
	z-index: 0;
	max-width: 120px;
}
}
@media (max-width: 398px) {
	.logoHeader {
	transition: all 0.3s ease;
	z-index: 0;
	margin-left: 10px;
	}
}
.logoMobile {
	display: none;
}
@media (max-width: 449px) {
	.logoMobile {
	display: block;
	}
}
#especialistas{
	background-color: #0b0e21;
	padding-top: 100px;
	padding-bottom: 100px;
	color: #fff;
	 position: relative;
  overflow: hidden;
  padding-bottom: 150px;
}
#especialistas h2{
	margin-bottom: 40px;
	color: #fff;
}
@media (max-width: 449px) {
	#especialistas h2{
		font-size: 2.0rem;
	}
}
.logoEspecialistas{
	width: 210px;
	display: block;
	margin-left: auto;
	margin-right: 10px;
}
#mantenimiento{
	color: #020129;
	padding-top: 100px;
	padding-bottom: 100px;
}
#mantenimiento svg{
	color: #FF4500;
	font-size: 23px;
	margin-right: 20px;
}
#mantenimiento h2{
	margin-bottom: 40px;
}
.techito {
  position: absolute;
  height: auto; /* mantiene proporción de la imagen */
  transform: rotate(var(--rotation));
  pointer-events: none; /* para que no interfiera con el contenido */
  transition: transform 0.1s linear;
}
#acerca {
	padding-top: 60px;
	color: #626262;
	font-size: 18px;
	line-height: 24px;
}
#hechoMexico{
	padding-bottom: 40px;
	padding-top: 40px;
}
@media (max-width: 449px) {
	#acerca {
	font-size: 16px;
}
}
.acerca {
	margin-top: 20px;
}
/*  estilos para esconder o mostrar un div y ponerles animación   */
.HighElement, .HighIcon, .NumeraliaItem, .HighElement2, .HighElement3 {
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  /* IE 5-7 */
  filter: alpha(opacity=0);

  /* Netscape */
  -moz-opacity: 0;

  /* Safari 1.x */
  -khtml-opacity: 0;

  /* Good browsers */
  opacity: 0;
}

.DivAnimShow {
	opacity: 1;
}
#acerca ul{
	color: #000;
	font-size: 20px;
}
#acerca li{
	margin-bottom: 20px;
}
@media (max-width: 449px) {
	#acerca li {
	font-size: 16px;
}
}
#metodo {
	background-color: #e5e5e5;
	margin-top: 90px;
	padding:  80px 0;
}
#metodo p {
	text-align: center;
	font-size: 20px;
}
@media (max-width: 449px) {
	#metodo p {
	font-size: 28px;
    font-weight: 800;
	}
}
#contacto {
	background-color: #dcdcdc;
}
@media (max-width: 991px) {
	#contacto {
	scroll-margin-top:530px;
	}
 }
   @media (max-width: 414px) {
	#contacto {
	scroll-margin-top:430px;
	}
 }
.logoWhatsContacto {
	max-width: 230px;
	margin-bottom: 35px;
}
@media (max-width: 449px) { 
	.logoWhatsContacto {
		max-width: 115px;
	}

}
#marcas{
	padding-top: 50px;
	padding-bottom: 50px;
}
#marcas h2{
	color: #002daa;
}
.contactoTel {
	color: #4dca5b;
	font-size: 50px;
	font-weight: 500;
	margin-bottom: 30px;
}
a.contactoTel{
	text-decoration: none;
}
.logosContacto img {
	max-width: 100px;
	margin-right: 50px;
	margin-bottom: 30px;
}
@media (max-width: 449px) { 
	.logosContacto img {
		max-width: 80px;
		margin-right: 30px;
	}
}
.logosContacto img:last-child {
	max-width: 80px;
	margin-right: 0px;
}
.contactoForma {
	background: rgb(31,212,255);
	background: linear-gradient(180deg, rgba(31,212,255,1) 0%, rgba(35,193,243,1) 35%, rgba(38,180,236,1) 50%, rgba(40,170,230,1) 70%);
	padding-bottom: 50px;
	color: #fff;
	font-size: 22px;
	padding-top: 60px;
}
.contactoWhats {
	padding-bottom: 50px;
	padding-top: 60px;
}
.contactoForma form {
	color: #000;
	font-size: 20px;
}
@media (max-width: 449px) { 
	.contactoForma form {
	font-size: 16px;
	}
}
.botContacto {
	background-color: #f4e187;
	margin: 0 auto;
	color: #375f71;
	display: block;
	padding:  5px 20px;
	font-size: 20px;
}
.obligatorio {
	color: #ff0000;
}
.expe1 {
	color: #FF4500;
	font-size: 33px;
	text-align: center;
	font-weight: 600;
	padding-top: 50px;
	padding-bottom: 50px;
}
@media (max-width: 991px) {
	.expe1 {
		font-size: 23px;
	}
}
@media (max-width: 767px) {
	.expe1 {
		font-size: 33px;
	}
}
.expe2 {
	background-color: #bd0303;
	color: #fff;
	padding-top: 20px;
	padding-bottom: 25px;
	font-size: 25px;
}
.expe2 img {
	max-width: 250px;
}
#servicios {
	color: #626262;
	scroll-margin-top: 1200px;
	padding-bottom: 50px;
}
@media (max-width: 1399px) {
	#servicios {
	scroll-margin-top:1000px;
	}
 }
 @media (max-width: 1199px) {
	#servicios {
	scroll-margin-top:800px;
	}
 }
@media (max-width: 991px) {
	#servicios {
	scroll-margin-top:690px;
	}
 }
 @media (max-width: 767px) {
	#servicios {
	scroll-margin-top:1390px;
	}
 }
  @media (max-width: 447px) {
	#servicios {
	scroll-margin-top:990px;
	}
 }
   @media (max-width: 414px) {
	#servicios {
	scroll-margin-top:1090px;
	}
 }
#servicios img {
	margin-bottom: 10px;
}
.textoServicios p {
	font-size: 22px;
	margin-bottom: 10px;
}
.textoServicios span {
	font-size: 15px;
	color: #002daa;
}
@media (max-width: 449px) {
	.textoServicios span {
		line-height: 16px;
		display: block;
	}
}
.serviciosFotos {
	padding: 40px;
}
@media (max-width: 449px) {
	.serviciosFotos {
	padding: 15px;
	}
	.textoServicios p {
    font-size: 17px;
}
}
.contratista {
	background-color: #002daa;
	padding: 30px;
	color: #fff;
	font-size: 35px;
}
.contratista img{
	width: 350px;
}
.filtraciones {
	padding: 90px 0px;
	font-size: 35px;
	text-align: center;
	color: #626262;
	font-weight: 500;
}
@media (max-width: 449px) {
	.filtraciones {
		font-size: 30px;
		padding: 70px 0px;
	}
} 
.membrana {
	background-color: #e5e5e5;
	padding: 50px 0;
	font-size: 35px;
	font-weight: 600;
}
.membrana h1 {
	color: #ad0000;
}
.membrana img {
	width: 350px;
}
.hacemos {
	color: #fff;
	background-color: #c01616;
	text-align: center;
	padding: 30px 0;
}
.hacemos h1{
	font-size: 50px;
	font-weight: 600;
}
@media (max-width: 449px) {
	.hacemos h1{
		font-size: 40px;
	}
}
.garantia {
	font-size: 45px;
	font-weight: 600;
}
@media (max-width: 449px) {
	.garantia {
		font-size: 40px;
		line-height: 55px;
	}
	.maxGarantia {
	padding: 20px 0;
	}
} 
#footer {
	font-family: "Rubik", sans-serif;
	background-color: #020129;
	padding: 30px 0 70px;
	color: #ce683a;
	font-size: 17px;
	font-weight: 500;
}
#footer table{
	color: #fff !important;
} 
#footer .table>:not(caption)>*>* {
	color: #ce683a !important;
}
#footer a {
	color: #ce683a;
}
.logoFooter {
	text-align: right;
	max-width: 250px;
	margin: auto 0 auto auto;
	display: block;
}
.telWhats {
	color: #45c656;
	font-size: 20px;
}
.telWhats a{
	color: #45c656 !important;
}
.clear {
	clear: both;
}
.logoWhatsFloat {
	position: fixed;
	bottom: 20px;
	right: 20px;
	max-width: 70px;
	z-index: 3;
}
@media (max-width: 449px) {
	.form-control-lg {
	font-size: 16px;
	}
}
/* .textoHeader {
	padding-top: 90px;
	color: white;
	font-size: 40px;
}
.textoHeader h1{
	color: #07adfa;
	font-size: 40px;
}
@media (max-width: 747px) {
	.textoHeader {
	margin-top: 50px;
	font-size: 25px;
	}
	.textoHeader h1{
	color: #07adfa;
	font-size: 25px;
	}
}
@media (max-width: 449px) {
	.textoHeader {
	margin-top: 0px;
	padding-top: 110px;
	font-size: 22px;
	}
	.textoHeader h1{
	font-size: 22px;
	}
} */
.sello10 {
	width: 210px;
}
.acercaImper {
	text-align: center;
	font-size: 20px;
}
@media (max-width: 449px) {
	.acercaImper {
	font-size: 28px;
	font-weight: 800;
	}
}







.FormaInputRequerido {
  border: 1px solid #FF0004 !important;
}