/* Todo el documento */
:root {
    --primary-color: #171a63;
    --secundary-color: #318ce7;
}

* {
    
    padding: 0px;
    margin: 0px;
}
body{
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');


body {
    box-sizing: border-box;
}

.montserrat-medium {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}


a:link,
a:visited,
a:active {
    text-decoration: none;
}

#fontebook {
    font-family: 'Australia Custom';
}



/* Barra de navegacion */
/* -- Elimina la barra de desplazamiento ---- */
::-webkit-scrollbar {
    display: none;
}

/* Colores Genericos para fuentes */
.azul_marino {
    color: #171a63;
}

.azul_celeste {
    color: #318ce7;
}

.azul_cielo {
    color: #318ce7;
}

/* Colores Genericos para fondos */
.bg-azul_marino {
    background-color: #171a63;
}

.bg-azul_celeste {
    background-color: #318ce7;
}

.bg-naranjaebook {
    background-color: #F0BB73;
}

.bg-gris {
    background-color: #E6E7E8;
}

.bg-gris-osc {
    background-image: linear-gradient(180deg, #6f8996, #728c99, #afc3ca, #b6cad1, #9cb4c0, #9cb4c0)
}

/* Estilos personalizados a la barra de navegacion */


.linkfocus {
    color: #287dfc !important;
    filter: drop-shadow(-.5px .5px .5px rgba(34, 33, 33, 0.918));
}

nav {
    background-image: linear-gradient(to right, rgba(47, 47, 48, 0.021), rgba(255, 255, 255, 0.096), transparent, #f3f3f32a, rgba(47, 47, 48, 0));
    background-size: 50%;
    animation: colorTransition 5s infinite ease;
    transition: background-color 2s ease;
}

.nav-link {
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 1.6vw;
    justify-content: center;
    transition: 0.2s ease-in-out;
}

.nav-link:hover {
    color: rgb(255, 255, 255);
    font-weight: bold;
}


#navbar.active {
    background-color: #08113ada;
}

.dropdown-item {
    color: #e9e8e8;
    transition: .2s ease-in-out;
    animation: fade 0.3s ease-in-out;
    animation-fill-mode: forwards;
}

.dropdown-item:hover {
    border: none;
    border-radius: 10px;
    padding: 7px;
    background-color: rgba(190, 190, 190, 0.363);
    color: #ffffff;
    transform: scale(1.01);
}

/* Idiomas */
#panel-lateral-izquierdoLabel>div.offcanvas-body>ul>div>a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}

div.dropdown-menu {
    background-color: transparent;
    border-color: transparent;
}

.dropdown-menu {
    animation: letout 0.3s ease-in-out;
    animation-fill-mode: forwards;
}

div#flags {
    border-radius: 5px;
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

img.item {
    margin: .5em;
    max-width: 3em;
    cursor: pointer;
    transition: .2s ease-in-out;
}

img.item:hover {
    transform: scale(1.1);
    filter: drop-shadow(2px 2px 2px rgba(134, 152, 250, 0.719));
}

/* Redes sociales */
.social-media,
.brand,
.login {
    font-size: 2.2rem;
    color: rgb(223, 223, 223);
    list-style: none;
}

.facebook,
.instagram,
.brand,
.login {
    transition: 0.1s ease-in;
    color: #dedcdc
}

.facebook:hover,
.instagram:hover,
.brand:hover,
.login:hover {
    transform: scale(1.05);
    color: rgb(255, 254, 254);
}

.toggler-menu {
    color: white;
}

.dropcss {
    background-image: linear-gradient(#1d2b6cd7, #2947cfee, #1d2b6cd7);
    padding: 0;
}

.toggler-menu>li {
    color: white;
}

/* Carrusel */
.card-text {
    left: 10%;
}

.rightcard {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
}

.text-animation {
    animation: fade 7s ease-in-out;
    animation-fill-mode: forwards;
}

.btn-light {
    filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.363));
}

#anafiltro {
    filter: drop-shadow(10px 10px 20px rgb(0, 0, 3));
}

.rightcard-img {
    width: 85%;
    margin-top: 40px;
    /* Lineas para animacion */
    position: relative;
    animation-name: slideInRight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

/* Edicion slider 2 Tipo Reel  */
div.slider2 {
    width: 50%;
    left: 0%;
    top: 20%;
}

.badge-slider2 {
    position: absolute;
    top: 75%;
    left: 15%;
    font-size: 1.5vw;
    animation: entrada 2s forwards;
    opacity: 0;
    animation: entrada-bange 2s forwards;
    animation-delay: 5.5s;
    filter: drop-shadow(2px 0px 5px white);
}

.badge:hover {
    transform: scale(1.05);
}

img.f1-slider2 {
    position: absolute;
    width: 60%;
    top: 20%;
    animation: entrada 2s forwards;
    opacity: 0;
    animation-delay: 1s;
}



div.leftcard.slider2>p.subtitulo2 {
    padding-top: 1%;
    width: 70%;
    left: 15%;
}

p.subtilo2 {
    animation: transition 1s forwards;
    animation-delay: 5s;
}

.leftcard {
    z-index: 1;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    top: 25%;
    left: 5%;
    width: 45%;
    height: 50%;
    text-align: center;
    translate: middle;
    margin-left: 5%;
    transform: translatex(-50);
}

.leftcard h1 {
    font-size: 4vw;
    font-weight: bold;
    color: whitesmoke;
    /* Lineas para animación */
    position: relative;
    opacity: 0;
    left: 0;
    animation-name: transition;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, 0.342));
}

p.subtitulo {
    font-size: 2vw;
    color: whitesmoke;
    /* Lineas para animación  */
    position: relative;
    margin-top: 20px;
    opacity: 0;
    animation-name: aparecerArriba;
    animation-delay: 2s;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

p.subtitulo2 {
    font-size: 2vw;
    color: whitesmoke;
    /* Lineas para animación  */
    position: relative;
    margin-top: 20px;
    opacity: 0;
    animation: aparecerArriba 2s forwards;
    animation-delay: 4s;
}

.leftcard a {
    font-size: 2vw;
    color: darkblue;
    transition: .2s ease-out;
    /* Animacion boton  */
    margin-top: -40px;
    opacity: 0;
    animation: latido 1.5s ease-in-out;
    animation-delay: 6s;
    animation-fill-mode: forwards;
    animation-iteration-count: 3;
}


/* Stilos al Slider 3  */
.none {
    display: none;
}

#designer3 {
    position: relative;
    height: 100%;

}

#designer2 {
    position: relative;
    height: 100%;

}

#designer3::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #15309e;
    z-index: 0;
    animation: desvanecer 4s ease-in forwards;
}



.leftcard-slider3 {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
    top: 0;
}

#titulo-card3 {
    position: absolute;
    left: 8%;
    width: 41%;
    text-align: center;
    font-size: 3.7vw;
    font-weight: bold;
    /* Lineas para animación */
    opacity: 1;
    color: #171a63;
    animation: transf-translate 2s ease-out forwards;
    top: 28%;
    z-index: 6;
}



#got {
    filter: drop-shadow(1px 0px 5px #1b1b1b);
    position: absolute;
    top: 35%;
    font-weight: bold;
    font-size: 16vw;
    left: 15%;
    z-index: 5;
    animation: entrada-izq 3s ease-out forwards;
    opacity: 0;
    animation-delay: .5s;
}

#-a {
    position: absolute;
    filter: drop-shadow(1px 0px 5px #1b1b1b);
    font-weight: bold;
    top: 35%;
    font-size: 16vw;
    right: 30%;
    animation: entrada-der 3s ease-out forwards;
    opacity: 0;
    animation-delay: .5s;
}


#boton-slider3 {
    position: absolute;
    font-size: 2vw;
    bottom: 10%;
    right: 20%;
    opacity: 0;
    animation: latido 1.5s infinite;
    animation-delay: 7s;
    color: #171a63;
    z-index: 10;
}

#sub3-card3 {
    position: absolute;
    bottom: 4%;
    color: #171a63;
    filter: drop-shadow(0px 1px 1px #c6e3ff);
    font-weight: bold;
    font-size: 2.5vw;
    width: 43%;
    text-align: center;
    left: 32%;
    z-index: 6;
    animation: subir 4s linear forwards;
    animation-delay: 3s;
    opacity: 0;
}

#card-slider3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

#foto-card-slider3 {
    filter: drop-shadow(15px 5px 20px #1b1b1b);
    position: absolute;
    width: 20%;
    margin-top: 10%;
    margin-left: 43%;
    animation: entrada-img 3s linear forwards;
    opacity: 0;
    animation-delay: .5;
}

/* Sección Medallas  */
#galardones {
    background-image: linear-gradient(180deg, #c9c9c9, #ffffff, #f4f4f4 20%, #c5c5c5, #ebebeb, #a0a0a0);
    overflow: hidden;
}

.contenedor-galardones {
    position: relative;
    text-align: center;
}

.contenedor-medallas {
    position: relative;
    display: flex;
    justify-content: center;
}

.cintas {
    filter: drop-shadow(1px 1px 20px #2b2a2a);
    transition: 0.2s ease-in-out;
}

.cintas.lg {
    position: absolute;
    max-width: 70%;
    top: -20px;
}

.medallas.lg {
    position: absolute;
    max-width: 100%;
    margin-top: 75%;
}

.cintas.sm {
    position: absolute;
    max-width: 60%;
    top: -30px;
}

.medallas.sm {
    position: absolute;
    max-width: 90%;
    margin-top: 40%;
}

.medallas {
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.contenedor-medallas {
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.contenedor-medallas:hover {
    transform: scale(1.1);
}

.contenedor-medallas:hover .cintas {
    filter: drop-shadow(1px 1px 70px #757575);
}

.certificaciones {
    margin-top: 30vw;
}

.certificacion {
    display: none;
}


@media screen and (max-width: 475px) {
    .cintas.lg {
        position: absolute;
        max-width: 100%;
        top: -15px;
    }

    .medallas.lg {
        position: absolute;
        max-width: 130%;
        margin-top: 75%;
    }

    .cintas.sm {
        position: absolute;
        max-width: 90%;
        top: -30px;
    }

    .medallas.sm {
        position: absolute;
        max-width: 120%;
        margin-top: 40%;
    }


    /* Screen max-475px Sección de beneficios osmosis inversa  */

    .contsvg {
        width: 18vw;
        font-size: 2.5vw;
    }

    .svgosmo {
        width: 10vw !important;
        height: 10vw !important;
        letter-spacing: 0px;
        margin: 8% 0 8% 0;
    }

    .bebas {
        margin-bottom: 6%;
        font-size: 2vw;
        filter: drop-shadow(-2px 2px 2px #161616);
    }

    .osmosisreflejo {
        position: absolute !important;
        width: 47%;
    }


}

/* seccion testimonio  */
.contenedor-comentarios {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url("/public/Images/Testimonios/Comilla.webp");
    background-repeat: no-repeat;
    background-size: 15%;
    background-position-y: 1vw;
    background-position-x: 1vw;
    width: 100%;
    padding: 0;
    position: relative;
}


.comentarios {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 100%;

}

.contenedor-testimonio {
    position: absolute;

    width: 82%;
    height: 100%;
}

.p-comentario {
    width: 85%;
    height: 100%;
}

.texto-comentario {
    position: absolute;
    width: 100%;
    height: 100%;
    align-self: center;
    font-size: 2.4vw;
    font-weight: 600;
    line-height: 1.1;
}

.caja-texto {
    /* border: solid; */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fotos-comentario {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.fotos-comentario li {
    flex: 0 0 auto;
    /* Evita que los elementos se estiren */
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 5vw;
    cursor: pointer;
}

#prev-comentario,
#next-comentario {
    background-color: transparent;
    border: none;
    color: white
}

.h3-nombre {
    position: relative;
    height: 3em;
}

.Nombre {
    overflow: hidden;
    font-weight: bold;
    text-transform: capitalize;
    position: absolute;
    width: 100%;
    height: 100%;


}

.Nombre::after {
    top: 3.2px;
    position: absolute;
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    z-index: 1;
    background-color: #0d6efd;
    transform: rotate(45deg);
    left: -14px;
}

.bcoment {
    position: relative;
    display: block;
    margin: 0;
}

/* Fin carrousel Testimonios  */
/* Sección Base de datos de la calidad del agua por zona  */
.aqua {
    position: relative;
    overflow: hidden;
    transition: .5s ease;
    /* box-shadow: 2px 2px 5px black; */
    border: none;
}

.aqua:hover {
    transform: scale(1.1);
}

.aqua::after {
    content: "";
    position: absolute;
    background-color: #070988;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    border-radius: 5px;
    border: none;
}

.aqua::before {
    content: "";
    position: absolute;
    background-color: #2963e2;
    width: 140%;
    height: 355px;
    border: none;
    border-radius: 40%;
    bottom: -150%;
    left: -22%;
    z-index: -1;
    transition: 1s;
}


.aqua:hover::before {
    animation: bxn-5 1.2s linear both;
}


/* Sección Nuestro Equipo   Vs. Web*/
#nuestro_equipo {

    background-image: url("/public/Images/Equipo/fondo\ web\ gris\ 2.webp");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

img.ms_s {
    margin-top: -20vw !important;
    filter: drop-shadow(0px 0px 18px rgb(253, 253, 253));
    width: 50%;
}




/* Sección Ebook  */
#fontebook {
    width: 100% !important;
    margin-top: -6%;
    font-size: 7vw;
    text-align: end;
    filter: drop-shadow(0px 0px 1.5px black);
}

#svg-pdfdownload {
    margin-top: -22%;
    width: 10%;
    max-width: 10%;
    margin-left: 3%;
}

#iphone-iphad {
    margin-top: -18%;
    width: 100% !important;
}


/* Sección Instalación Vs.Web  */
#instalacion {
    background-image: url("/public/Images/Instalación/FondoInstalacion.webp");
    background-size: contain;
    height: calc(100vw*.43);
    overflow: hidden;
    background-repeat: no-repeat;

}

#insth1,
#insth3,
#instp1,
#instp2,
#instp3,
#instbtn,
#imgsist,
#barrablanca {
    position: absolute;
    line-height: 1.4;

}

#barrablanca {
    background-color: rgb(255, 255, 255);
    bottom: 0px;
    width: 100vw;
    border-radius: 0 25% 0 0;
    height: 10vw;
    margin: 0;
}

#insth1 {
    top: 6.8%;
    left: 2%;
    width: 50%;
    font-size: 6vw;
    z-index: 5;
    color: white;
    font-weight: bold;
    text-align: right;
}


#insth3 {
    height: 4.5vw;
    top: 6vw;
    margin-right: -3vw;
}

#insth3>h3 {
    font-weight: bold;
    width: 30%;
    height: 100%;
    position: absolute;
    left: 49%;
    font-size: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: bold;
}

#instp1 {
    color: white;
    padding-left: 2.6vw;
    top: 14vw;
    font-size: 1.7vw;
    font-weight: 500;
}

#instp2 {
    width: 73%;
    color: white;
    padding-left: 2.6vw;
    top: 20vw;
    font-size: 1.7vw;
    font-weight: 500;
}

#instp3 {
    color: white;
    padding-left: 2.6vw;
    top: 28vw;
    font-size: 1.7vw;
    font-weight: 500;
}

#instbtn {
    left: 23%;
    bottom: 4vw;
}

.fsbtnebook {
    font-size: 2vw;

}

#imgsist {
    right: 1vw;
    bottom: 0;
    width: 29%;
}

/* FIN Sección Instalación Vs.Web  */

/* Sección pie de página */
.fredes {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logoWeb {
    width: 65%;
    filter: drop-shadow(3px 3px 1px #000000);
}

#derechos {
    display: flex;
    justify-content: center;
    height: 7vw;
    align-items: center;

}

/* Sección de Sistemas de Purificación */

/* Sombra de la casa  */
/* .sombra {
    position: relative;
}

.sombra::before {
    content: "";
    position: absolute;
    width: 262px;
    height: 50px;
    border-radius: 0% 0 0 100%;
    z-index: 0;
    bottom: 2%;
    transform: rotate(-2deg);
    background-image: linear-gradient(to right, #94adba, #2e5366cf);
    left: -95px;
    filter: blur(6px);
} */

#Casamas,
#Casamasp {
    filter: drop-shadow(20px 0px 29px white);
}

.topwatercity {
    line-height: 1.1;
    padding: 0 auto;
}


/* Carrousel Beneficios  */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: none;
    /* filter: drop-shadow(.2px .5px 1px rgb(2, 38, 68)); */
}

.card {
    border-radius: 15px;
}

.card {
    border: 2px solid hsl(0, 0%, 90%);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    transition: border-color 0.5s ease;
}

.card:hover {
    border-color: #007bff;
}

.card-body {
    height: 18em;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 0 0 15px 15px;
    line-height: 1.4;
    justify-content: start;
}

h5.card-title {
    color: #171a63;
}

.swiper-slide img {
    padding-top: 10px;
    display: block;
    width: 25%;
    height: 100%;
    object-fit: cover;
    align-self: center;
    background-color: #ffffff !important;
}

.autoplay-progress {
    /* top: 25px; */
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

.apsvg-pozo {
    /* border: solid 1px red; */
    top: 37px;
}

/* sección guardian  */
#guardian {
    position: relative;
    background-image: url("/public/Images/Guardian/Fondo\ Sistemas.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    height: calc(100vw*.43);
    overflow: hidden;
    background-repeat: no-repeat;
}

.container-guardian {
    position: relative;
    height: 80%;
}

#franjablanca {
    position: absolute;
    width: 88%;
    height: 8vw;
    margin-left: 12%;
    background-color: #fff;
    border-radius: 0 0 0 0;
    z-index: 1;
    bottom: -1px;
}

#franjablanca::before {
    position: absolute;
    content: "";
    width: 14%;
    bottom: 0;
    height: 100%;
    left: -13%;
    border-radius: 100% 0 0 0%;
    background-color: #fff;
    z-index: 2;
}

.bloque {
    position: relative;
    height: 70%;
    width: inherit;
    display: flex;
}

.guadianrow {
    position: relative;
    z-index: 10;
    height: 100%;
    width: 28%;
    bottom: -22%;
    border: o;
}

.guardiancontent {
    position: relative;
    display: flex;
    align-items: center;
    width: 57%;
    height: 100%;
    left: 6%;
    flex-direction: column;
    justify-content: center;
}

/* Sección guardián */

.botonfranja {
    position: absolute;
    display: flex;
    align-items: center;
    bottom: -0px;
    width: 57%;
    height: 8vw;
    z-index: 10;
    right: 0%;
}

.sombratext {
    filter: drop-shadow(0px 0px 0px #000);
}

/* Sección de Osmosis Inversa  */
.svgosmo {
    width: 5vw;
    height: 5vw;
    transition-duration: 0.3s;
    filter: drop-shadow(-2px 2px 2px #161616);
}

.contensvg {
    display: flex;
    color: white;
    flex-wrap: wrap;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    justify-content: center;
}

.contensvg-oivs {
    display: flex;
    color: white;
    flex-wrap: wrap;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    justify-content: center;
}

.contsvg {
    text-align: center;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

.contsvg:hover {
    transform: scale(1.08);
}

.contsvg:hover .svgosmo {
    filter: drop-shadow(-2px 2px 2px #161616);
    filter: drop-shadow(-2px 2px 20px #161616);
}

.contsvg:hover .bebas {
    filter: drop-shadow(-2px 2px 20px #161616);
}

.bebas {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 1px;
}

.centrohv {
    line-height: 1.2;
    padding-bottom: 10px;
}

.centrohv-oivs {
    line-height: 1.2;
    padding-bottom: 10px;
}


.contosmosisreflejo {
    width: 100%;
    position: relative;
    height: calc(81.6vw*0.15);
}

.osmosisreflejo {
    position: relative;
    bottom: 0;
}

.pureselect {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(180deg, #9393FF, #7575FF, #5151FE, #3333FF, #1414FF);
}



/* Etapas de filtrado  */
#filter-stages {
    position: relative;
    padding: 20px;
}

.stagesbg {
    background-image: linear-gradient(to right, #e1f7ff, #e3f9ff, #c0d9e2, #e7f6fc);
}

#cityfilter {
    position: relative;
    filter: drop-shadow(2px 2px 30px #a7bdc4);
}

#cityfilter-oivs {
    position: relative;
    filter: drop-shadow(2px 2px 30px #a7bdc4);
}

.stagebox {
    background-color: #171a63;
    border-radius: 0 10px 10px 0;
    color: #FCFEFD;
    text-align: center;
    position: relative;
    line-height: 1;
    padding: 7px 0;
}

.stagecontent {
    margin-top: 1.7rem;
    color: #171a63;
    line-height: 1.3;
    text-align: center;
}

/* Contenedor del sistema de purificación  */
#cont-sist {
    position: relative;
    text-align: center;
}

#cont-sist-oivs {
    position: relative;
    text-align: center;
}

#stage1 {
    position: absolute;
    top: 28.5%;
    height: 10.9%;
}


#numero1 {
    position: absolute;
    /* top: 0px; */
    width: 10em;
    display: none;
    transition: 2s;
    opacity: 0;
    /* right: 0; */
}

#stage2 {
    position: absolute;
    top: 39.3%;
    /* left: 35.9%; */
    /* width: 11.9%; */
    height: 5.5%;
}

#numero2 {
    position: absolute;
    width: 10em;
    /* right: 0; */
    display: none;
    transition: 2s;
    opacity: 0;
    /* bottom: 0; */
}

#stage3 {
    position: absolute;
    top: 45%;
    height: 14.1%;
    /* left: 35.9%; */
    width: 11.9%;
}

#flechas3 {
    position: absolute;
    top: 0px;
    width: 10em;
    right: 38%;
    display: none;
    transition: 2s;
    opacity: 0;
}


#stage4 {
    position: absolute;
    top: 59.6%;
    height: 16%;
    /* left: 35.9%; */
    width: 11.9%;
}

#flechas4 {
    position: absolute;
    top: 3%;
    width: 10em;
    right: 53.6%;
    display: none;
    transition: 2s;
    opacity: 0;
}

#stage5 {
    position: absolute;
    top: 28.9%;
    height: 46.1%;
    left: 55.3%;
    width: 11.9%;
}

#flechas5 {
    position: absolute;
    top: 28%;
    width: 10em;
    right: 9.6%;
    display: none;
    transition: 2s;
    opacity: 0;
}


.contenedor-stages {
    position: relative;
}

#siscontent {
    align-items: center;
    display: flex;
}

.etapa {
    position: absolute;
}

#stage1:hover,
#stage2:hover,
#stage3:hover,
#stage4:hover,
#stage5:hover {
    background-color: #ffffff27;
    cursor: pointer;
}


a.btn.aqua.btn-primary.fw-bold {
    font-size: 0.8rem;
}


/* Acordeon preguntas frecuentes  */
.accordion-button {
    font-weight: 600;
    color: #070988;
}

.accordion-item {
    margin-bottom: 20px;
    filter: drop-shadow(1px 1px 2px #757474);
}


.top-osmosisdesk {
    background-image: url("/public/Images/Sist-Osmosis/Top\ Osmosis\ fondo.webp");
    background-size: cover;
    background-position: right;
}

.top-osmosism {
    display: none;
    background-image: url("/public/Images/Sist-Osmosis/Top\ Osmosis\ fondo.webp");
    background-size: cover;
    background-position: right;
}



/* sección contactanos  */
.cont-contactanos {
    /* border: solid 1px red; */
    position: relative;
    background-image: url("/public/Images/Contactanos/contactanos.webp");
    background-size: cover;
    background-position: top;
    height: 40vw;
}

.text-contact {
    /* border: solid; */
    width: 40%;
    align-content: center;
    height: 100%;
    padding-left: 20px;
}

.infocontact {
    /* height:inherit; */
    align-content: center;
    text-align: center;
    font-size: 2vw;
}

.cont {
    font-size: 4vw;
}


#video_equipo {
    height: 90vh;
}

.card_lideres {
    padding: 0;
}

.nombre_lideres {
    height: 5rem;
}

.carrousel-item-lideres {
    width: 100%;
}


#lideres_web {
    max-width: 1140px;
}


.equipo_accion_h4 {
    padding-left: 3rem;
}

.equipo_accion_container_img {
    width: 100%;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.equipo_accion_img {
    max-width: 33%;
}


.rigth_top_corner {

    border-right: solid 1rem var(--primary-color);
    border-top: solid 1rem var(--primary-color);
    border-image: linear-gradient(37deg, #fff 23%, transparent 55%, var(--primary-color) 17%) 1;
}

.rigth_bottom_corner {

    border-right: solid 1rem #fff;
    border-bottom: solid 1rem #fff;
}

.left_top_corner {

    border-left: solid 1rem #fff;
    border-top: solid 1rem #fff;
}

.left_bottom_corner {

    border-left: solid 1rem var(--primary-color);
    border-bottom: solid 1rem var(--primary-color);
    border-image: linear-gradient(217deg, #fff 23%, transparent 55%, var(--primary-color) 17%) 1;
}

.card_equipo_testimonio_container {
    position: relative;
    background-color: #bebebe;
    display: flex;
    justify-content: center;
}

.card_equipo_testimonio_img {
    margin-top: 3rem;
    width: 60%;
    margin-bottom: 6rem;
    border-right: solid .8rem var(--primary-color);
    border-top: solid .8rem var(--primary-color);
    border-image: linear-gradient(42deg, transparent 14%, transparent 71%, var(--primary-color) 17%) 1;
    /* transform: translateX(13%); */
}


.card_equipo_testimonio {
    font-size: clamp(.8rem, 1.1vw, 1.5vw);
    left: 14%;
    bottom: 1.5rem;
    position: absolute;
    max-width: 25%;
    min-width: 20%;
    background-color: #fff;
    padding: .5rem;
    display: flex;
    gap: .5rem;
    flex-direction: column;
    text-align: left;
    border-left: solid 0.8rem var(--primary-color);
    border-image: linear-gradient(217deg, transparent 23%, transparent 55%, var(--primary-color) 17%) 1;
}

#equipo_testimonios h5 {
    font-size: clamp(1rem, 1.1vw, 1.8vw);
}

#equipo_testimonios span {
    font-size: clamp(0.8rem, 1.1vw, 1vw);
}


#equipo_testimonios p {
    line-height: 1.2;
}

.card_equipo_boton {
    background-color: var(--primary-color);
    display: block;
    width: fit-content;
    /* Para que el botón solo ocupe el espacio del texto */
    margin: 0 auto;
    /* Centrar horizontalmente */
}

.card_equipo_boton:hover{
    background-color: var(--secundary-color);

}

/* Asegura que el video nunca exceda el alto de la ventana gráfica */
/* Contenedor del modal */
.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 90vh;
    overflow: hidden;
}

/* Estilo general para videos */
#videoPlayer {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Estilo específico para videos verticales */
#videoPlayer[data-orientation="vertical"] {
    max-height: 90vh;
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* Screen max-width: 767px */
@media only screen and (max-width: 767px) {
    #panel-lateral-izquierdoLabel>div.offcanvas-body>ul {
        display: block;
        text-align: left;

    }

    a.nav-link {
        font-size: 3vw;
        left: 0px;
        align-items: flex-start;
        width: 20%;
    }

    #panel-lateral-izquierdoLabel>div.offcanvas-body>ul>li.login {
        margin-left: 1vw;
        width: 10%;
    }

    li.login:hover {
        transform: translate(x50)
    }

    img.ms_s {
        margin-top: 0vw !important;
        width: 70%;
    }

    #nuestro_equipo>div>div.row>div.col-7.col-s-7.ps-5.pe-.align-self-bottom.order-xxl-1.order-xl-1.order-lg-1.order-sm-1 {
        margin-top: 1vw;
        font-size: 2.6vw;
    }

    /* Sección guardían de Soluciones screen menor 768px */



    /* Sección Top del Programa de Agua Limpia  */
    #top-agualimpia {
        background-image: url('/public/Images/ProgAguaLimpia/FondoTopProgAguaLimp.webp');
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .fsizeh1 {
        font-size: 8vw;
    }

    .contenerdorTop {
        position: relative;
    }

    .topProgAguaLimp {
        text-align: center;
    }

    .topProgAguaLimp-Img {
        position: relative;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .progualimp {
        margin-top: -12%;
        padding: 0 20px;
    }

    .nubegota {
        margin-top: -12%;
        position: relative;
        width: 95%;
    }

    .nubes {
        position: absolute;
        width: 100vw;
        height: 100%;
        background-image: url('/public/Images/ProgAguaLimpia/NubesDGota.webp');
        background-position: top;
        background-size: contain;
        animation: nubes 10s infinite ease-in-out;
        background-repeat: no-repeat;
    }


    /* Sección ¿Cómo funciona? Para movil  */
    #comoFunciona {
        background-image: url('/public/Images/ComoFunciona/FondComoFuncMovil.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 90vh;

    }

    .comofunc {
        display: none;
    }

    .transparencia {
        background-image: linear-gradient(to right, #fff, #ffffff00);
        text-align: center;
        padding: 5px 20px;
    }

    .parrafarencia {
        margin-top: -8%;
        background-image: linear-gradient(0deg, #fff, #ffffff, #ffffff8a);

    }

    #lideres_web {
        display: none;
    }

    #carousel_lideres {
        display: block;
    }



    .rigth_top_corner {

        border-right: solid 0.5rem var(--primary-color);
        border-top: solid 0.5rem var(--primary-color);
        border-image: linear-gradient(47deg, #fff 38%, transparent 55%, var(--primary-color) 17%) 1;
    }

    .rigth_bottom_corner {

        border-right: solid 0.5rem #fff;
        border-bottom: solid 0.5rem #fff;
    }

    .left_top_corner {

        border-left: solid 0.5rem #fff;
        border-top: solid 0.5rem #fff;
    }

    .left_bottom_corner {

        border-left: solid 0.5rem var(--primary-color);
        border-bottom: solid 0.5rem var(--primary-color);
        border-image: linear-gradient(218deg, #fff 23%, transparent 55%, var(--primary-color) 17%) 1;
    }

    .equipo_accion_h4 {
        padding-left: 0;
        width: 100%;
        text-align: center;

    }

    .equipo_accion_img.left_top_corner,
    .equipo_accion_img.rigth_bottom_corner {
        display: none;
    }

    .equipo_accion_container_img {
        flex-direction: column;
    }

    .equipo_accion_img {
        max-width: 80%;
    }

    .card_equipo_testimonio_container {
        flex-direction: column;
        align-items: center;
        padding: auto;
        justify-content: center;
    }

    .card_equipo_testimonio_img {
        width: 110%;
        clip-path: inset(0 0 0 29%);
        overflow: hidden;
        text-align: center;
        transform: translateX(-14.5%);
        margin-bottom: auto;
    }

    .card_equipo_testimonio {
        height: 15rem;
        position: relative;
        max-width: 100vw;
        left: 0;
        bottom: auto;
        padding: 1rem;
        gap: 0;
        justify-content: center;

    }

    .card_equipo_testimonio p{
        font-size: 1rem;
    }
   

}



@media only screen and (min-width: 575px) and (max-width: 768px) {


    .guadianrow {
        position: relative;
        left: 2%;
        bottom: 0%;
    }

    #sistemas {
        position: relative;
        width: 120%;
        bottom: 20%;
    }


    .contraste {
        /* background-color: #ffffffbd; */
        margin-top: 3%;
    }

    .relleno {
        background-color: #008DBE;
        height: 7vw;
    }

    a.btn.aqua.btn-primary.fw-bold {
        font-size: 0.8em;
    }

    /* etapas de filtrado osmosis inversa  */
    .titulo-etapas-oivs {
        position: absolute;
        top: 6.9%;
        left: 0%;
        text-align: center;
        font-size: 3vw;
        width: 100%;
    }

    #cont-sist-oivs {
        position: relative;
        width: 40%;
        margin-right: 4%;
    }

    #stage-text-oivs {
        width: 47.1%;
        height: 40vw;
        position: relative;
        font-size: 1.7vw;
        right: 3%;
    }

    /* Seccion etapas de filtrado  */
    #filter-stages {
        padding: 1%;
    }

    .titulo-etapas {
        position: absolute;
        top: 13%;
        left: 6.1%;
        text-align: center;
        font-size: 3vw;
    }


    .stage-sist-content {
        display: flex;
        flex-direction: row-reverse;
    }

    #cont-sist {
        position: relative;
        width: 48%;
    }


    #stage-text {
        width: 44.1%;
        height: 59vw;
        position: relative;
        font-size: 2.3vw;
    }


    .stage {
        width: 12.3% !important;
        left: 37.3%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #stage5 {
        left: 60.3%;
    }

    .etapa {
        width: 118%;
        top: 38%;
    }

    .oivs {
        width: 104% !important;
        top: 22% !important;
    }

    #cityfilter {
        width: 48vw;
        right: 4%;
    }

    #cityfilter-oivs {
        width: 43vw;
        top: 17%;
    }

    .flechas {
        width: 70% !important;
    }

    .spozon {
        margin-top: 178% !important;
    }

    /* para agua de pozos  */
    .spozo {
        width: 16% !important;
        left: 25% !important;
    }

    .spozo1 {
        top: 23% !important;
        width: 18% !important;
        left: 52% !important;
        height: 68% !important;
    }

    .spozo4 {
        width: 16% !important;
        left: 25% !important;
        height: 17% !important;
    }

    .spozo5 {
        top: 62.7% !important;
        width: 16% !important;
        left: 25% !important;
        height: 17% !important;
    }


    /* Screen max-475px Sección de beneficios osmosis inversa  */


    #osmoselect {
        position: relative;
        background-color: #3F51B5;
        height: 12vw;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
    }

    #equip-adc {
        position: relative;
    }

    .contosmosisreflejo {
        width: 37%;
    }

    .contsvg {
        width: 11vw;
    }

    .svgosmo {
        width: 5vw !important;
        height: 5vw !important;
        letter-spacing: 0px;
        margin: 8% 0 8% 0;
    }

    .bebas {
        margin-bottom: 6%;
        font-size: 1.2vw;
    }

    .osmosisreflejo {
        position: relative !important;
        width: 127%;
        z-index: 10;
        left: 0%;
        top: -93%;
    }

    .contensvg {
        position: relative;
        width: 63%;
        bottom: 0%;
        right: 0%;
    }

    .contensvg-oivs {
        position: relative;
        width: 100%;
        bottom: 0%;
        right: 0%;
    }

    .tituosmosis {
        position: relative;
        width: 53%;
        left: 43%;
    }



    .purcontent {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .centrohv {
        position: relative;
        text-align: left;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 2vw;
        margin-top: 15%;
    }

    .centrohv-oivs {
        position: relative;
        text-align: left;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 2vw;
        margin-top: 4%;
    }

    .contimgcentrohv {
        position: relative;
        right: 0%;
        width: 37%;
        top: 0%;
        height: 16vw;
    }

    .imgcentrohv {
        position: absolute;
        width: 107%;
        top: -15%;
        left: -7.1%;
    }

    /* etapas sistema de osmosis inversa  */
    .oivs-1 {
        top: 46% !important;
        width: 14.6% !important;
        left: 16.5%;
        height: 36% !important;
        border-radius: 0px 0 32px 32px;
    }


    .oivs-2 {
        top: 44% !important;
        width: 14.6% !important;
        left: 31%;
        height: 36% !important;
        border-radius: 0px 0 32px 32px;
    }

    .oivs-3 {
        top: 43% !important;
        width: 14.6% !important;
        left: 45%;
        height: 36% !important;
        border-radius: 0px 0 32px 32px;
    }

    .oivs-4 {
        top: 25.9% !important;
        width: 46.6% !important;
        left: 15%;
        height: 10% !important;
        border-radius: 32px 32px;
    }

    .oivs-4n {
        height: 100% !important;
    }


    .oivs-5 {
        top: 18% !important;
        width: 36.6% !important;
        left: 19% !important;
        height: 8% !important;
        border-radius: 32px;
        transform: rotate(0deg);
    }

    .oivs-5n {
        height: 130% !important;
    }


    .oivs-6 {
        position: absolute;
        top: 75% !important;
        width: 53.6% !important;
        left: 16%;
        height: 11% !important;
        border-radius: 32px;
    }

    .oivs-6n {
        height: 100% !important;
    }


    .guarparraf {
        /* position: absolute; */
        top: 2%;
        /* padding: 0 10px; */
    }

    /* Sección Equipos Adicionales Agua de Pozos  */
    #equip-adc {
        width: 100%;
        left: 0%;
        position: relative;
        display: flex;
        padding: 5px 20px;
    }

    .equipadc-text {
        width: 40%;
    }

    .equipadcp {
        font-size: 1.7vw;
    }

    .equipadch3 {
        font-size: 1.5vw;
    }

    .fot-eqadc {
        width: 60%;
        display: flex;
    }

    .conten-trampa {
        width: 33%;
    }

    .tramprusco {
        width: 26%;
    }

    .conten-filtro {
        width: 33%;
    }

    .filtroazul {
        width: 30%;
    }

    .conten-luz {
        width: 33%;
    }

    .ultraviolet {
        width: 115%;
    }

    #jabonesPureSelect {
        position: relative;
    }

    .logyjabones {
        position: absolute;
        right: 0%;
        width: 35%;
        z-index: 10;
    }

}

@media only screen and (min-width: 667px) and (max-width: 768px) {

    #guardian {
        height: calc(100vw*.53);
    }

    .bloque {
        height: 85%;
    }

    .guardiancontent {
        height: 91%;
        width: 60%;
    }

    .nota {
        bottom: 1.3vw;
    }
}

@media only screen and (min-width: 575px) and (max-width: 666px) {

    #guardian {
        height: calc(100vw*.65);
    }

    .bloque {
        height: 85%;
    }

    #sistemas {
        position: relative;
        width: 120%;
        bottom: -5%;
    }

    .guardiancontent {
        height: 100%;
        width: 60%;
    }

    .nota {
        bottom: 1.3vw;
    }
}



@media only screen and (min-width: 1500px) and (max-width: 1920px) {

    .h3-nombre {
        /* border: solid yellow; */
        height: 5em !important;
    }


}



@media only screen and (min-width: 1921px) {

    .h3-nombre {
        /* border: solid yellow; */
        height: 6em !important;
    }

}



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

    /* sección contactanos  */
    .text-contact {
        /* border: solid red; */
        width: 46.4%;
    }

    .text-contact h3 {
        /* align-items: center; */
        /* border: solid; */
        padding-top: 10px;
        margin-bottom: 0px;
        padding-bottom: 10px !important;
    }

    .contmv {
        font-size: 4vw !important;
    }

    .contred {
        /* border: solid red; */
        font-size: 11vw;
    }

    .cont-contactanos {
        height: 55vw;
    }

    /* fin de la sección contactanos  */

    .card {
        border-radius: 15px;
        border: none !important;
        box-shadow: none !important;
    }

    .relleno {
        background-color: #008DBE;
        width: 100.6vw;
        height: 12vw;
        padding: 0px;
        border: none;
        margin-right: 0px !important;
    }

    /* Ajustes en la barra de navegacion  */
    #navbar {
        padding: 0;
    }

    a.brand {
        display: flex
    }

    #brand {
        max-width: 130px
    }


    /*Ajustes al carrousel hero */
    .carousel-item {
        height: calc(100vw * 1.4);
        position: relative;
        /* flex: none; */
        padding: 0px;
    }

    .carousel-item.carrousel-item-lideres {
        height: auto !important;
    }

    .leftcard {
        position: relative;
        width: 100%;
        display: block;
        height: 88%;

        margin-left: -5%;
        top: 55px;
    }

    img.ms_s {
        width: 70% !important;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider1.active.d-relative>img {
        position: absolute;
        right: -3.6px !important;
        height: 100%;
        width: 318% !important;
    }


    #Slider1p1 {
        font-size: 4vw;
    }

    #Slider1p2 {
        margin: 0vw 0vw 5vw 21vw;
        position: absolute;
        display: block;
        width: 57%;
        font-size: 3.9vw;
        bottom: 35.1px !important;
        background: #0a18b7a6;
        border-radius: 5px;
    }

    .Boton1Slider1 {
        position: absolute;
        width: 100%;
        bottom: 18px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider1.active.d-relative>div.leftcard>div>a {
        margin: 0;
        font-size: 3vw;
    }


    #carushero>div.carousel-inner>div.carousel-item.d-relative.active>div.leftcard>h1 {
        font-size: 8vw;
        padding: 0px 19vw;
        line-height: 0.9;
    }


    .rightcard {
        position: absolute;
        width: 100%;
        height: 92%;
        margin-top: 55px;
        padding: 0px;
    }

    #anafiltro {
        position: absolute;
        bottom: 0;
        max-width: 72% !important;
        margin-left: 77.1px;
    }


    #designer2 {
        position: absolute;
        right: -188px !important;

    }

    div.slider2 {

        margin: 0 0;
        width: 100%;
        padding: 0 0;
        top: 49px;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.rightcard>a>span {
        /* bottom: 28px; */
        margin: -16vw 0 0 14vw;
        left: 0;
        font-size: 3vw;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.leftcard.slider2>div.titulo-card2>h1 {
        font-size: 6vw;
        padding: 0px 11vw;
        line-height: 0.9;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.leftcard.slider2>p.subtitulo {
        width: 100%;
        font-size: 4vw;
        padding: 0 27vw;
        top: 14vw;
        position: absolute;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.leftcard.slider2 {
        width: 100%;
        height: 93.6%;
        position: relative;
        display: block;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.leftcard.slider2>div.areaboton {
        width: 100%;

        position: absolute;
        bottom: 0;
        height: 30%;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.leftcard.slider2>div.areaboton>a {
        width: 60%;
        font-size: 3vw;
        margin-top: 4vw;
    }


    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.leftcard.slider2>div.titulo-card2 {

        height: 100%;
    }


    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.leftcard.slider2>p.subtitulo2 {
        margin: -17vw 0;
        padding: 0 10vw;
        font-size: 4vw;
        width: 100%;
        margin-left: -14.9%;
        line-height: 1;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.rightcard>img.f1-slider2 {

        padding: 0;
        width: 73% !important;
        margin-left: 4%;
    }

    #carushero>div.carousel-inner>div.carousel-item.Slider2.d-relative.active>div.rightcard>img.f2-slider2 {
        width: 61% !important;
        transition: 1s;
    }

    #designer3 {
        position: absolute;
        right: -239px !important;
        height: 100%;
        width: 222% !important;
    }

    #titulo-card3 {
        position: absolute;
        top: 45px;
        left: 0;
        width: 100%;
        margin: 0 0 0 -8vw;
        font-size: 8vw;
        padding: 0 4vw;
    }


    #foto-card-slider3 {
        position: absolute;
        width: 54%;
        bottom: 0;
        left: -20vw;
    }


    #got {
        margin-left: -18vw;
        position: absolute;
        font-size: 26vw !important;
    }

    #-a {
        position: absolute;
        margin-right: -19vw;
        font-size: 26vw !important;
        right: 0vw;
    }

    #card-slider3 {
        position: absolute;
        width: 100%;
    }

    #boton-slider3 {
        font-size: 3vw;
        margin: 0vw 11vw 0vw -25vw;
        position: absolute;
    }

    #sub3-card3 {
        display: block;
        width: 100%;
        font-size: 3.5vw;
        top: 104vw;
        margin: 0vw 0vw 0vw -10vw;
        padding: 0px 18vw;
    }






    /* ajuste del tamaño de las medallas  */
    #galardones {
        .col-s-1 {
            width: 8.33%;
        }

        .col-s-2 {
            width: 16.66%;
        }
    }

    /* ajuste elemento del ebook  */
    #svg-pdfdownload {
        margin-top: -8%;
    }

    #iphone-iphad {
        margin-top: -10%;
    }

    #svg-pdfdownload {
        margin-top: 5%;
    }

    #formaparte {
        background-color: #a0a0a0f5;

        & h3,
        h1 {
            filter: drop-shadow(1px 1px 0px rgb(46, 83, 245));
        }
    }

    #nuestro_equipo {

        background-image: url("/public/Images/Equipo/fondo\ personal\ aquafeel\ gris.webp");
        background-size: cover;
        width: 100%;
        height: 100%;
        background-position: bottom;
        padding: 0;
    }



    #nuestro_equipo>div>div.row>div.col-6.col-s-6.align-self-center.order-xxl-3.order-xl-3.order-lg-3.order-sm-3 {
        margin-top: 4vw !important;
        background-color: darkgray;
        padding: 20px;
    }

    #nuestro_equipo>div>div.row>div.col-6.col-s-6.align-self-center.order-xxl-3.order-xl-3.order-lg-3.order-sm-3 {
        margin-top: -40vw !important;
    }

    /* Ajuste del formulario e-book  */
    #Download_form {
        margin-top: -8vw;
    }

    #e-book>div>div.row.m-0>div.col-5.col-s-6>div.col.cols-s.d-flex.justify-content-end {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #fontebook {
        width: 100% !important;
        margin-top: -6%;
        font-size: 11vw;
        text-align: end;
    }

    /* ajustes  a las fotos de los comentarios  */
    .fotos-comentario img {
        width: 28vw;
        height: auto;
    }

    .contenedor-comentarios {
        height: 70vw;
    }

    .texto-comentario {
        font-size: 5vw;
        /* font-weight: 500; */
        /* line-height: 1.1; */
    }

    /* Ajustes al indicador del comentario  */
    .Nombre::after {
        top: 38.2px;
        left: 66%;
    }


    #imgDesigner2D {
        display: none;
    }

    #imgDesigner2M {
        position: absolute;
    }

    #nuestro_equipo>div>div.row>div.col-6.col-s-6.align-self-end.order-xxl-3.order-xl-3.order-lg-3.order-sm-3 {
        margin-top: -50vw;
        background-color: darkgray;
        padding: 20px;
    }

    #nuestro_equipo>div>div.row>div.col-7.col-s-7.ps-5.pe-.align-self-bottom.order-xxl-1.order-xl-1.order-lg-1.order-sm-1 {
        margin-top: -19vw;
        background-color: gray;
        padding: 6px 0px;
        font-size: 3vw;
        z-index: 5;
        width: 100%;
        margin-left: -4vw;
    }

    #nuestro_equipo>div>div.row>div.col-5.col-s-5.text-righ.order-xxl-2.order-xl-2.order-lg-2.order-sm-2 {
        display: flex;
        justify-content: center;
    }

    #nuestro_equipo>div>div.row>div.col-7.col-s-7.align-self-bottom.order-xxl-1.order-xl-1.order-lg-1.order-sm-1 {
        background-color: #E6E7E8;
        margin-top: -21vw;
        z-index: 5;
        padding: 20px 30px;
    }


    /* Sección Instalación Vs.Movil  */
    #instalacion {
        background-image: url("/public/Images/Instalación/fondoIntalMovil.webp");
        background-size: cover;
        height: 136vw;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: left;
        line-height: 1;
    }



    #barrablanca {
        background-color: rgb(255, 255, 255);
        bottom: 0px;
        width: 100vw;
        border-radius: 0 25% 0 0;
        height: 47vw;
        margin: 0;
        z-index: 1;
    }

    #insth1 {
        top: 4%;
        left: 7%;
        width: 78%;
        font-size: 10vw;
    }


    #insth3 {
        height: 12vw;
        top: 15vw;
        margin-right: -3vw;

    }

    #insth3>h3 {

        width: 100%;
        height: 100%;
        position: absolute;
        left: 13%;
        font-size: 8vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-weight: bold;
    }

    #instp1 {
        top: 27.9vw;
        font-size: 4vw;
        width: 100vw;
        margin: 0;
        padding: 0px 0px 0px 3px;
    }



    #instp2 {
        color: white;
        margin-left: 0;
        padding: 0px 0px 0px 0px;
        width: 70.6%;
        top: 48.7vw;
        font-size: 4vw;
    }

    #instp3 {
        color: #171a63;
        top: 90vw;
        font-size: 4vw;
        width: 51.8%;
        z-index: 5;
        padding: 0px 0 0 11px;
    }

    #instbtn {
        left: 8%;
        bottom: 10vw;
        z-index: 5;
    }

    .fsbtnebook {
        font-size: 4vw;
    }

    #imgsist {
        right: 0vw;
        bottom: 1px;
        width: 61%;
        z-index: 4;
    }

    /* FIN Sección Instalación Vs.Movil  */



    /* Seccción de pie de página Vs.Movil */
    .logoWeb {
        display: none;
        filter: drop-shadow(0 2px 1px #e6e6e6);
    }

    #fTitulos {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gmap_canvas {
        width: 100%;
        height: 100%;
    }

    #gmap_canvas {
        width: 100%;
    }

    a.btn.aqua.btn-primary.fw-bold {
        font-size: 0.8em;
        margin-top: 20px;
    }



    /* Seccción de pie de página Vs.Movil */

    #derechos>p {
        font-size: 2.7vw;
    }

    /* Sección guardían de Soluciones screen menor 575px */




    /* Ajustes de la sección Guardian para pantallas menores a 475px  */

    #guardian {
        height: calc(100vw*1.3);
    }

    .container-guardian {
        height: inherit;
    }

    .guadianrow {
        position: absolute;
        width: 79%;
        bottom: -12%;
        left: -21%;
        left: 0;
    }

    .guardiancontent {
        position: absolute;
        width: 100%;
        left: 0%;
        font-size: 4vw;
    }

    #sistemas {
        position: relative;
        top: 6%;
        width: 90%;
    }

    .sistpozos {
        width: 90% !important;
    }

    .bloque {
        width: 100%;
    }

    .guarparraf {
        position: absolute;
        top: 2%;
        padding: 0 10px;
    }

    .guard2 {
        display: block;
        width: 59%;
        position: absolute;
        right: 0;
        margin-top: 1%;
    }

    .nota {
        display: block;
        width: 35%;
        position: absolute;
        right: 0;
        bottom: 12%;
        font-size: 3vw;

    }

    #franjablanca {
        height: 20%;
        bottom: -3px;
    }

    .botonfranja {
        width: 76%;
        right: 3%;
        padding-bottom: 26px;
    }

    /* Screen max-575px Sección de beneficios osmosis inversa  */

    .contsvg {
        width: 18vw;
        font-size: 2.5vw;
    }

    .svgosmo {
        width: 10vw !important;
        height: 10vw !important;
        letter-spacing: 0px;
        margin: 8% 0 8% 0;
    }

    .bebas {
        margin-bottom: 6%;
        font-size: 2vw;
    }

    .osmosisreflejo {
        position: absolute !important;
        width: 53%;
        left: 0%;
    }

    .tituosmosis {
        position: relative;
        width: 53%;
        left: 46%;
        font-size: 4vw;
    }

    .centrohv {
        text-align: center;
        padding: 10px 20px;
        margin-bottom: 0%;
    }

    .centrohv-oivs {
        text-align: center;
        padding: 10px 20px;
        margin-bottom: 0%;
    }

    .contimgcentrohv {
        position: relative;
        display: flex;
        justify-content: center;
        width: 89vw;
        left: 0%;
    }

    .imgcentrohv {
        position: relative;
        width: 80%;
        left: 14%;
    }

    /* top osmosis  */
    .top-osmosisdesk {
        background-image: url("/public/Images/Sist-Osmosis/Top\ Osmosis\ fondo.webp");
        background-size: cover;
        background-position: right;
    }

    .top-osmosism {
        display: none;
        background-image: url("/public/Images/Sist-Osmosis/Top\ Osmosis\ fondo.webp");
        background-size: cover;
        background-position: right;
    }


    /* Sección etapas de filtrado  */

    #filter-stages {
        padding: 1%;
    }

    .titulo-etapas {
        text-align: center;

    }

    .titulo-etapas-oivs {
        text-align: center;

    }

    #cont-sist {
        position: relative;
    }

    #cont-sist-oivs {
        position: relative;
    }

    #stage-text {
        width: 100%;
        height: 59vw;
        position: relative;
        font-size: 4vw;
    }

    #stage-text-oivs {
        width: 100%;
        height: 64vw;
        position: relative;
        font-size: 4vw;
    }

    .stage {
        width: 10.3% !important;
        left: 37.9%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .etapa {
        width: 100%;
    }

    #cityfilter {
        width: 75vw;
    }

    #cityfilter-oivs {
        width: 75vw;
    }

    .flechas {
        width: 70% !important;
    }

    .spozon {
        margin-top: 178% !important;
    }

    .contraste {
        /* background-color: #ffffffbd; */
        margin: 0px;
        padding: 0px;
        margin-top: 3%;
    }

    .top-osmosisdesk {
        background-image: none !important;
        background-size: cover;
        background-position: right;
        background-color: #008DBE;
    }

    .top-osmosism {
        width: 100%-webkit-fill-available;
        display: block;
        margin: 0px;
        padding: 0px;
        background-image: url("/public/Images/Sist-Osmosis/Top\ Osmosis\ fondo.webp");
        background-size: cover;
        background-position: right;
        height: 50vh;
    }

    .contraste {
        padding-left: 0px;
    }

    /* etapas sistema de osmosis inversa  */
    .oivs-1 {
        top: 40% !important;
        width: 10% !important;
        left: 23%;
        height: 50% !important;
        border-radius: 0px 0 32px 32px;
    }


    .oivs-2 {
        top: 38% !important;
        width: 10% !important;
        left: 33%;
        height: 49% !important;
        border-radius: 0px 0 32px 32px;
    }

    .oivs-3 {
        top: 37% !important;
        width: 10% !important;
        left: 43%;
        height: 50% !important;
        border-radius: 0px 0 32px 32px;
    }

    .oivs-4 {
        top: 12% !important;
        width: 32% !important;
        left: 22%;
        height: 14% !important;
        border-radius: 32px 32px;
    }


    .oivs-4n {
        height: 133% !important;
    }


    .oivs-5 {
        top: 3% !important;
        width: 25.6% !important;
        left: 24% !important;
        height: 10% !important;
        border-radius: 32px;
        transform: rotate(0deg);
    }

    .oivs-5n {
        height: 169% !important;
    }


    .oivs-6 {
        position: absolute;
        top: 81% !important;
        width: 35.6% !important;
        left: 23%;
        height: 17% !important;
        border-radius: 32px;
    }

    .oivs-6n {
        height: 100% !important;
    }

    /* Sección Equipos Adicionales Agua de Pozos  */
    #equip-adc {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 5px 20px;
    }

    .equipadc-text {
        width: 100%;
    }

    .equipadcp {
        text-align: center;
        font-size: 3.5vw;
    }

    .fot-eqadc {
        width: 100%;
        display: flex;
    }

    .conten-trampa {
        width: 33%;
    }

    .tramprusco {
        width: 37%;
    }

    .conten-filtro {
        width: 33%;
    }

    .filtroazul {
        width: 29%;
    }

    .conten-luz {
        width: 33%;
    }

    .ultraviolet {
        width: 108%;
    }


    /* etapas filtrado agua de pozo  */
    .spozo {
        width: 13% !important;
        left: 31.9% !important;
    }

    .spozo1 {
        top: 23% !important;
        width: 14% !important;
        left: 52% !important;
        height: 68% !important;
    }

    .spozo4 {
        width: 13% !important;
        left: 32% !important;
        height: 17% !important;
    }

    .spozo5 {
        top: 62.7% !important;
        width: 13% !important;
        left: 32% !important;
        height: 17% !important;
    }



    /* Sección de Jabones PureSelect Prog Agua Limpia   */

    #jabonesPureSelect {

        position: relative;
    }

    .setjabones {
        width: 100% !important;
    }

    .cont-logyjabones {
        display: flex;
        justify-content: center;
        position: relative;
        width: 100%;
    }

    .logyjabones {
        position: relative;
        width: 60%;
    }

    #contactanos>div.cont-contactanos>div>p {
        font-size: 3.5vw;
    }

    .logoMovil {
        width: 50%;
        margin-top: 3%;
    }

    #video_equipo {
        height: 75vh;
    }


    #equipo_testimonios .carousel-item {
        height: auto;
    }


}


/* media Query pantallas  */
[class*="col-"] {
    width: 100%;
}

/* For tablets: */
@media only screen and (min-width: 576px) {
    .col-s-1 {
        width: 8.33%;
    }

    .col-s-2 {
        width: 16.66%;
    }

    .col-s-3 {
        width: 25%;
    }

    .col-s-4 {
        width: 33.33%;
    }

    .col-s-5 {
        width: 41.66%;
    }

    .col-s-6 {
        width: 50%;
        /* padding-bottom: 2vw; */
    }

    .col-s-7 {
        width: 58.33%;
    }

    .col-s-8 {
        width: 66.66%;
    }

    .col-s-9 {
        width: 75%;
    }

    .col-s-10 {
        width: 83.33%;
    }

    .col-s-11 {
        width: 91.66%;
    }

    .col-s-12 {
        width: 100%;
    }

    /* ajuste al tamaña de la fotos de testimonio */
    .fotos-comentario img {
        width: 12vw;
        height: auto;
    }

    /* ajuste a la caja de comentarios  */
    .contenedor-comentarios {
        position: relative;

    }

    /* Ajuste del formulario e-book  */
    #Download_form {
        margin-top: -25vw;
    }

    #navbar {
        padding: 0;
    }

    #navbar>div {

        padding: 0 auto;
    }

    #brand {
        height: 44px;
    }

    /* Ajustes foto para slider version movil  */
    #imgDesigner2M {
        display: none;
    }


    /* Seccción de pie de página Vs.Web */

    #footer {
        position: relative;
        height: calc(100vw* 0.32);
    }

    #fTitulos {
        position: absolute;
        width: 55%;
        right: 0;
        top: 0;
        height: 24%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #fTitulos>h1 {
        font-size: 4vw;
    }

    #fTitulos>h5 {
        font-size: 2.5vw;
    }

    #fMaps {
        position: absolute;
        width: 55%;
        height: 76%;
        right: 0;
        top: 24%;
        overflow: hidden;
    }

    #fMaps>p {
        height: 10%;
        font-size: 2vw;
        margin-bottom: 20px;
    }

    .mapouter {
        height: 85%;
    }

    .gmap_canvas {
        width: 100%;
        height: 100%;
    }

    #gmap_canvas {
        width: 100%;
        height: 100%;
    }


    #fCiudades {
        height: 100%;
        position: absolute;
        width: 17%;
        left: 27.9%;
        top: 0;
        display: flex;
        align-content: center;
        font-size: 1.7vw;

    }

    #f1web {
        position: absolute;
        width: 28%;
        height: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
        display: flex;
        align-content: center;
        flex-direction: column;
        justify-content: center;

    }

    #select {
        border: none;
    }

    .logoMovil {
        display: none;
        margin: 6px 0;

    }

    /* FIN Sección pie de pagina Vs.Web  */


}

/* For desktop: */
@media only screen and (min-width: 768px) {
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }

    .fsizeh1 {
        font-size: 3.8vw;
        margin-top: 1vw;
    }

    .fsizeh3 {
        font-size: 3vw;
    }

    .fsizep {
        font-size: 2vw;
    }

    .fsizeli {
        font-size: 1.5vw;

    }

    .fsizpep- {
        font-size: 1.6vw;
    }

    /* ajute al barra de navegación escritorios */
    #brand {
        margin-left: 2vw;
    }

    img.ms_s {
        width: 88% !important;
    }


    /* Sección Equipos Adicionales Agua de Pozos  */
    #equip-adc {
        position: relative;
        display: flex;
        padding: 5px 20px;
    }

    .equipadc-text {
        width: 40%;
    }

    .equipadcp {
        font-size: 1.5vw;
    }

    .fot-eqadc {
        width: 60%;
        display: flex;
    }

    .conten-trampa {
        width: 33%;
    }

    .tramprusco {
        width: 20%;
    }

    .conten-filtro {
        width: 33%;
    }

    .filtroazul {
        width: 18%;
    }

    .conten-luz {
        width: 33%;
    }

    .ultraviolet {
        width: 70%;
    }

    /* Screen min-768px Sección de beneficios osmosis inversa  */
    #osmoselect {
        position: relative;
        height: 12vw;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
    }


    .posmosis {
        font-size: 1.6vw;
    }

    .contosmosisreflejo {
        width: 37%;
    }

    .contsvg {
        width: 11vw;
        margin: 0 3px;
    }

    .svgosmo {
        width: 5vw !important;
        height: 5vw !important;
        letter-spacing: 0px;
        margin: 8% 0 8% 0;
    }

    .bebas {
        margin-bottom: 6%;
        font-size: 1.3vw;
    }

    .osmosisreflejo {
        position: relative !important;
        width: 127%;
        z-index: 10;
        left: -3%;
        top: -93%;
    }

    .contensvg {
        position: relative;
        width: 63%;
        bottom: 0%;
        right: 0%;
    }

    .contensvg-oivs {
        position: relative;
        width: 100%;
        bottom: 0%;
        right: 0%;
    }

    .tituosmosis {
        position: relative;
        width: 53%;
        left: 43%;
        font-size: 2.7vw;
        font-weight: 500;
    }

    .purcontent {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .centrohv {
        position: relative;
        text-align: left;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 2vw;
        margin-top: 15%;
    }

    .centrohv-oivs {
        position: relative;
        text-align: left;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        width: 100%;
        font-size: 2vw;
        margin-top: 1%;
    }

    .contimgcentrohv {
        position: relative;
        right: 0%;
        width: 37%;
        top: 0%;
        height: 16vw;
    }

    .imgcentrohv {
        position: absolute;
        width: 95%;
        top: -11%;
        left: 8.2%;
    }

    .relleno {
        background-color: #008DBE;
        height: 4vw;
        margin: 0px;
        padding: 0px;
        border: none;
    }

    /* Seccion etapas de filtrado  */
    #filter-stages {
        padding: 1%;
    }

    .titulo-etapas {
        position: absolute;
        top: 6.9%;
        left: 4.5%;
        text-align: center;
        font-size: 3vw;
        width: 60%;
    }


    .stage-sist-content {
        display: flex;
        flex-direction: row-reverse;
    }

    #cont-sist {
        position: relative;
        width: 30%;
        margin-right: 9%;
    }



    #stage-text {
        width: 37.1%;
        height: 40vw;
        position: relative;
        font-size: 1.7vw;
        left: -11%;
    }

    .titulo-etapas-oivs {
        position: absolute;
        top: 6.9%;
        left: 0%;
        text-align: center;
        font-size: 3vw;
        width: 100%;
    }

    #cont-sist-oivs {
        position: relative;
        width: 40%;
        margin-right: 4%;
    }

    #stage-text-oivs {
        width: 47.1%;
        height: 40vw;
        position: relative;
        font-size: 1.7vw;
        right: 3%;
    }

    .stage {
        width: 12.3% !important;
        left: 37.3%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .spozo {
        width: 16% !important;
        left: 29% !important;
    }

    .spozo1 {
        top: 23% !important;
        width: 18% !important;
        left: 54% !important;
        height: 68% !important;
    }

    .spozo4 {
        width: 16% !important;
        left: 29% !important;
        height: 17% !important;
    }

    .spozo5 {
        top: 62.7% !important;
        width: 16% !important;
        left: 29% !important;
        height: 17% !important;
    }


    .oivs-1 {
        /* border: solid; */
        top: 50% !important;
        width: 14.6% !important;
        left: 6%;
        height: 36% !important;
        border-radius: 0px 0 32px 32px;
    }

    .oivs-2 {
        /* border: solid; */
        top: 48% !important;
        width: 14.6% !important;
        left: 21%;
        height: 32% !important;
        border-radius: 0px 0 32px 32px;
    }

    .oivs-3 {
        /* border: solid; */
        top: 47% !important;
        width: 14% !important;
        left: 35%;
        height: 34% !important;
        border-radius: 0px 0 32px 32px;
    }

    .oivs-4 {
        /* border: solid; */
        top: 32.6% !important;
        width: 46.6% !important;
        left: 5%;
        height: 9.5% !important;
        border-radius: 32px 32px;
    }

    .oivs-4n {
        height: 80% !important;
    }


    .oivs-5 {
        /* border: solid; */
        top: 25% !important;
        width: 36.6% !important;
        left: 10% !important;
        height: 8% !important;
        border-radius: 32px;
        transform: rotate(0deg);
    }

    .oivs-5n {
        height: 101% !important;
    }


    .oivs-6 {
        /* border: solid; */
        position: absolute;
        top: 79% !important;
        width: 49% !important;
        left: 9%;
        height: 11% !important;
        border-radius: 32px;
    }

    .oivs-6n {
        height: 80% !important;
    }

    #stage5 {
        left: 60.3%;
    }

    .etapa {
        width: 118%;
        top: 22%;
    }

    .oivs {
        width: 100% !important;
        top: 21% !important;
    }

    #cityfilter {
        width: 30vw;
    }

    #cityfilter-oivs {
        width: 41vw;
        left: -8%;
        top: 24%;
    }

    .flechas {
        width: 70% !important;
    }

    .spozon {
        margin-top: 178% !important;
    }

    .guadianrow {
        position: relative;
        left: 10%;
        bottom: 0%;
    }

    #sistemas {
        position: relative;
        width: 100%;
        bottom: 10%;
    }

    /* Sección Top del Programa de Agua Limpia  */
    #top-agualimpia {
        background-image: url('/public/Images/ProgAguaLimpia/FondoTopProgAguaLimp.webp');
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
    }

    .contenerdorTop {
        position: relative;
    }

    .topProgAguaLimp {
        position: relative;
        width: 60%;
        text-align: center;
        left: 3%;

    }

    .topProgAguaLimp-Img {
        position: absolute;
        width: 40%;
        height: 100%;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nubegota {
        position: absolute;
        width: 95%;
    }

    .nubes {
        width: 100%;
        height: 100%;
        background-image: url('/public/Images/ProgAguaLimpia/NubesDGota.webp');
        background-position: top;
        background-size: contain;
        animation: nubes 10s infinite ease-in-out;
        background-repeat: no-repeat;
    }


    /* Sección ¿Cómo funciona? Para escritorios  */
    #comoFunciona {
        background-image: url('');
    }

    .contenedor_funciona {
        position: relative;
        width: 100%;
    }

    .contenedor_funciona::after {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #e40a0a;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .comofunc {
        width: inherit;
        position: relative;
    }


    .transparencia {
        background-image: linear-gradient(to right, #fff, #ffffff00);
        text-align: center;
        padding: 5px 20px;
        position: absolute;
        bottom: 0;
        width: 70%;
    }

    .transparentoleft {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        background-image: linear-gradient(to left, #ffffffb0, #ffffff8e, #ffffff11, transparent);
    }

    .parrafarencia {
        position: absolute;
        top: 0%;
        padding-top: 2%;
        height: 100%;
        width: 30%;
        right: 0%;

    }

    .parrafarencia::before {
        width: 5px;
        background-color: #070988;
        content: "";
        top: 5%;
        height: 90%;
        position: absolute;
        left: -2%;

    }

    .parrafarencia p {
        font-size: 1.5vw;
    }


    .como {
        position: absolute;
        right: 105%;
        font-size: 3.5vw;
        top: 5%
    }

    .fsizep035 {
        font-size: 1.5vw;
        line-height: 1.3;
    }


    /* Sección de Jabones PureSelect Prog Agua Limpia   */

    #jabonesPureSelect {
        position: relative;
    }

    .cont-logyjabones {
        position: absolute;
        right: 0%;
        z-index: 10;
        top: 0%;
    }

    .logyjabones {
        right: 0%;

        width: 90%;

    }

    #equipotestimonio h5 {
        font-size: 1.5em;
    }

    #equipotestimonio h5 {
        font-size: 1em;
    }

}

.spin {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0px;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 6s linear infinite;
}



@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg)
    }

}

/* Fin spiner */

img.f2-slider2 {
    position: absolute;
    bottom: -37px;
    width: 50%;
    right: 0%;
    animation: right-left 2s forwards;
}


@keyframes entrada-bange {
    from {
        width: 0%;
        opacity: 0;
    }

    to {
        width: 30%;
        opacity: 1;
    }
}

@keyframes colorTransition {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes bxn-5 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        bottom: 100px;
        transform: rotate(360deg);
    }
}

@keyframes entrada-img {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes subir {
    0% {
        bottom: -10%;
        opacity: 0;
    }

    20% {
        bottom: 4%;
        left: 28%;
        opacity: 1;
        filter: drop-shadow(-2px 1px 1px #c6e3ff);
    }

    90% {
        bottom: 4%;
        opacity: 1;
        left: 28%;
        filter: drop-shadow(-2px 1px 1px #c6e3ff);
    }

    100% {
        bottom: 4%;
        opacity: 1;
        left: 10%;
        filter: drop-shadow(-2px 1px 1px #c6e3ff);
    }
}

@keyframes entrada-der {
    0% {
        opacity: 1;
        right: -50%;
        top: 45%;
        font-size: 16vw;
    }

    50% {
        opacity: 1;
        right: 30%;
        top: 45%;
        font-size: 16vw;
    }

    80% {
        opacity: 1;
        right: 30%;
        top: 45%;
        font-size: 16vw;
    }

    100% {
        opacity: 1;
        right: 30%;
        top: 40%;
        font-size: 14vw;
    }
}

@keyframes colorTransition {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes entrada-der {
    0% {
        opacity: 1;
        right: -50%;
        top: 45%;
        font-size: 16vw;
    }

    50% {
        opacity: 1;
        right: 30%;
        top: 45%;
        font-size: 16vw;
    }

    80% {
        opacity: 1;
        right: 30%;
        top: 45%;
        font-size: 16vw;
    }

    100% {
        opacity: 1;
        right: 30%;
        top: 40%;
        font-size: 14vw;
    }
}


@keyframes entrada-izq {
    0% {
        opacity: 1;
        left: -50%;
        top: 45%;
        font-size: 16vw;
    }

    50% {
        opacity: 1;
        left: 21%;
        top: 45%;
        font-size: 16vw;
    }

    80% {
        opacity: 1;
        left: 21%;
        top: 45%;
        font-size: 16vw;
    }

    100% {
        opacity: 1;
        left: 27%;
        top: 40%;
        font-size: 14vw;
    }
}

@keyframes desvanecer {
    from {
        opacity: .9;
    }

    to {
        opacity: 0;
    }
}

@keyframes transf-translate {
    0% {
        font-size: 5vw;
        left: 20%;
        width: 60%;
        color: #318ce7;
        filter: drop-shadow(-2px 1px 1px #171a63);
    }

    80% {
        font-size: 5vw;
        left: 20%;
        width: 60%;
        color: #318ce7;
        filter: drop-shadow(-2px 1px 1px #171a63);
    }

    100% {
        font-size: 3.5;
        left: 8%;
        color: #171a63;
        filter: drop-shadow(0px 1px 2px #c6e3ff);
    }
}

@keyframes latido {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

@keyframes aparecerArriba {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 20px;
        opacity: 1;
    }
}

@keyframes transition {
    from {
        left: 100%;
        opacity: 0;
    }

    to {
        right: 0%;
        opacity: 1;
    }
}

@keyframes entrada {
    from {
        left: -30%;
        width: 30%;
        opacity: 0;
    }

    to {
        left: 0%;
        width: 60%;
        opacity: 1;
    }
}

@keyframes right-left {
    from {
        right: -10%;
        opacity: 0;
    }

    to {
        right: 15%;
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        left: 100%;
        opacity: 0;
    }

    to {
        left: 0;
        opacity: 1;
    }
}

@keyframes letout {
    0% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}


@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes nubes {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(-4%);
    }

    100% {
        transform: translateX(0%);
    }


}

.js-scroll {
    opacity: 0;
    transition: opacity 10s;
}

.js-scroll.scrolled {
    opacity: 1;
}

.scrolled.fade-in {
    animation: fade-in 1s ease-in-out both;
}

.btn-xl,
.aqua {
    width: 300px;
}

.ciudad:hover {
    background-color: #11114123;
}