/*------------ CAMBIANDO EL ESTILO AL SCROLL DE LA PÀGINA ----------------*/



/*--------  ANCHO GENERAL PARA LAS CAJAS -------*/
.widthTotal{width:100%;max-width:1400px;height:auto;margin:auto;}

/*-------- TITULO + PRETITULO + RAYITA --------*/
.titleSection{
    display:flex;justify-self:center;text-align:center;flex-wrap:wrap;align-items:center;
    margin-top:50px;margin-bottom:20px;
}

.titleSection .preTitle{
    font-size:25px;color: rgb(94, 200, 246);width:100%;
}

.titleSection .title{
    font-size:30px;color:black;width:100%;font-weight:bold;
}

.titleSection .hairline{height:2px;width:60px;background-color: rgb(94, 200, 246);margin:auto;margin-top:8px;}



/*------ Primeros cuatro servicios (cards con efecto css) -------*/

.containerFlexCards{
    background-color:white;
    width:100%;display:flex;
    justify-content:center;
    align-items: center;
    flex-wrap: wrap;
    height: auto;
}       
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 250px;
    height:270px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    margin:30px;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(360deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow:hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: transparent;
    color: black;
  }

  .flip-card-front img{
    width:100%;height:160px;border-bottom-right-radius:100px;
  }

  .flip-card-front h2{
    font-size:18px;font-weight:lighter;padding:10px;
  }
  
  /* Style the back side */
  .flip-card-back {
    border-top:5px solid rgb(94, 200, 246);
    background-color:var(--blanco);
    color: var(--blanco);
    transform: rotateY(180deg);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-bottom-left-radius:50px;border-bottom-right-radius:50px;
  }

  .flip-card-back img{
    width:100px;margin-top:30px;margin-bottom:5px;
  }

  .flip-card-back p{
    color:var(--negro);font-size:18px;
    padding:10px;
  }


  .flip-card-front .containBtnSeeServiceSelected{
    background-color: transparent;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    cursor: pointer;

  }
  
  .flip-card-front .containBtnSeeServiceSelected .enlaceBtnSeeServiceSelected{
    color:var(--blanco);padding:10px 25px; background-color:var(--celeste);display:flex;justify-content:center;align-items:center;
    margin: auto;border-radius:20px;text-decoration:none;transition:all ease .3s;cursor:pointer;
    position:absolute;
  }

  .flip-card-front .containBtnSeeServiceSelected .enlaceBtnSeeServiceSelected i{
    padding-left:5px;font-size:14px;padding-top:4px;
  }


  .flip-card-front .containBtnSeeServiceSelected:hover .enlaceBtnSeeServiceSelected{background-color:var(--azul);transform:scale(1.05)}



  /*Boton ver todos los servicios*/
  .flexBtnCenter{
    display:flex;justify-content:center;align-items:center;
  }
  .widthTotal .btn_SeeAll{
   padding:10px 25px;background-color:transparent;color:var(--negro);border:1px solid var(--celeste);
   margin:20px 0px;transition: all ease 0.3s;
  }

  .widthTotal .btn_SeeAll:hover{
    background-color:var(--celeste);color:var(--blanco);border-radius:20px;letter-spacing:2px;
  }



  /*-- NOSOTROS - INICIO --*/
  .imgBackground{
    background-repeat:no-repeat;
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    width:100%;height:auto;
    display:flex;align-items:center;
  }

  .containOnBackgroundImage{
    width:100%;height:auto;
    z-index:1;
    max-width:1400px;
    display:flex;
    justify-content:space-between;
    margin: auto;
  }

  .backgroundDeg {width:100%;height:100%;background: rgb(255,255,255);background: linear-gradient(108deg, rgba(255,255,255,0) 65%, rgba(27,160,226,1) 67%);}
  .CjTextNosotros,.CjAutomaticSlider{padding:10px;height:auto;}
  .CjTextNosotros{width:60%;display:flex;justify-content:center;align-items:center;}
  .CjAutomaticSlider{width:40%;display: flex;
    justify-content: center;
    min-height: 600px;
    padding: 0px;
    align-items: center;}
  .TextNosotros{width:60%;height:auto;background-color:rgba(255, 255, 255, 0.772);padding:30px;border-bottom-right-radius:70px;padding-bottom:45px;}
  .TextNosotros h3{font-size:40px;font-weight:700;color:var(--celeste);}
  .TextNosotros p{font-size:20px;color:var(--negro);padding-bottom:20px;padding-top:20px;line-height:30px;}
  .TextNosotros .rayitaTxtNosotros{height:2px;width:60px;background-color: rgb(94, 200, 246);margin-top:8px;}
  .TextNosotros a{background-color: var(--celeste);padding: 10px 25px;border-radius:25px;color:var(--blanco);margin-bottom:20px;}
  .TextNosotros a i{padding-left:2px;font-size:14px;padding-top:4px;}
  .TextNosotros a:hover{background-color:var(--azul);}
  .containElementsSlider{width:100%;height:100%;-webkit-clip-path: polygon(100% 0%, 100% 48%, 100% 100%, 0 100%, 33% 0);clip-path: polygon(100% 0%, 100% 48%, 100% 100%, 0 100%, 33% 0);background: rgb(39,190,234);background: linear-gradient(90deg, rgba(39,190,234,1) 5%, rgba(27,160,226,1) 75%);}
  .slidePositionAbsolute{width:350px;height:350px;border-radius:50%;background-color:var(--azul);z-index:1;position: absolute;margin-top:-480px;margin-left:-50px;border:solid 10px var(--blanco);overflow: hidden;}


 /* Slider al costado del texto nosotros en inicio*/
 
.slider1{width:100%;height: 100%;display: none;overflow: hidden;}


.slider1 img{transform: scale(1.3, 1.3);object-fit: cover;width:100%;height:100%;-webkit-animation-name: zoomin;-webkit-animation-duration: 5s;animation-name: zoomin;animation-duration: 5s;}
@-webkit-keyframes zoomin {
from {margin-left:0%;transform: scale(1.3, 1.3);}
to {margin-left:20%;transform: scale(1.4, 1.4);}
}
@keyframes zoomin {
  from {margin-left:0%;}
  to {margin-left:20%;transform: scale(1.4, 1.4);}
}


/*---------------------     MARCAS      -----------------------*/
.slick-slider {margin:auto !important;}
.marca-slider{ max-width:1250px;margin:15px;padding:20px;}
.marca-slider .item{padding:15px;overflow:hidden;background-color:var(--blanco);}
.marca-slider .item img{width:100%;height:120px;}
.slick-dots li button:before{font-size:12px;}
.slick-track{max-height:170px;overflow:hidden;}
.slide-arrow{position: absolute;top:50%;margin-top:-30px;z-index:50;}
.prev-arrow{left:10px;width: 0;font-size:22px;height: 0;border-right: 0 solid transparent;border-left: 15px solid transparent;border-top: 10px solid transparent;border-bottom: 10px solid transparent;background-color:transparent;color:var(--celeste);cursor:pointer;}
.next-arrow{right:30px;width: 0;font-size:22px;height: 0;border-right: 0 solid transparent;border-left: 15px solid transparent;border-top: 10px solid transparent;border-bottom: 10px solid transparent;background-color:transparent;color:var(--celeste);cursor:pointer;}
.prev-arrow:hover{color:var(--azul);transition:all ease .3s;}
.next-arrow:hover{color:var(--azul);transition:all ease .3s;}





/* BANNER PARA CONTACTAR EN SECCIÓN INICIO INFERIORE ANTES DEL FOOTER */
.backgroundBanner{
background-color:#10afdfa1;
width:100%;height:100%;flex-wrap: wrap;
padding:150px 10px;color:var(--blanco);
}

.centeredTxtButton{width:100%;max-width:600px;margin:auto;text-align:center;}

.centeredTxtButton h3{font-size:50px;line-height:55px;}
.centeredTxtButton h4{font-size:50px;line-height:55px;font-weight:500;margin-bottom:50px;}
.centeredTxtButton  a{background-color: var(--blanco);padding: 15px 30px;border-radius:25px;color:var(--negro);margin:40px;font-size:20px;transition:all ease .3s;}
.centeredTxtButton a i{padding-left:2px;font-size:14px;padding-top:4px;}
.centeredTxtButton a:hover{ box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;letter-spacing:2px;font-weight:600;}


/*---footer ----*/
footer{background-color:var(--negro);width:100%;height:auto;display:flex;justify-content:center;}
.CjFlexFooterOne,.CjFlexFooterTwo,.CjFlexFooterThree{padding:20px;}

.CjFlexFooterOne{width:250px;}
.CjFlexFooterTwo{width:520px;}
.CjFlexFooterThree{width:250px;}


footer h5{font-size:20px;color:var(--celeste);font-weight:400;padding-bottom:15px;}

footer .aEnlace{font-size:16px;width:100%;text-decoration:none;list-style:none;color:silver;display:block;padding-bottom:15px;transition:all ease .3s;}

footer .aEnlace:hover{color:var(--blanco);}

footer p{font-size:16px;width:100%;text-decoration:none;list-style:none;color:silver;display:block;transition:all ease .3s;padding-bottom:5px;}

.flexTwoColumnsInFlexFooterTwo{display:flex;justify-content:space-between;}
.flexTwoColumnsInFlexFooterTwo .cjInsideOne{width:250px;margin-right:50px;}
.flexTwoColumnsInFlexFooterTwo .cjInsideOne .TextsInsider{margin-bottom:10px;}
.TextsInsider:hover p{color:var(--blanco);}
.flexTwoColumnsInFlexFooterTwo .cjInsideOne .smallLetters{font-size:13px;}

.flexTwoColumnsInFlexFooterTwo .cjInsideTwo{width:250px;margin-right:0px;}
.flexTwoColumnsInFlexFooterTwo .cjInsideTwo .TextsInsider{margin-bottom:10px;}
.flexTwoColumnsInFlexFooterTwo .cjInsideTwo .smallLetters{font-size:13px;}
/*Rds*/
.flexRds{
  display:flex;
  justify-content:left;
}
.flexRds .rdsGrupoLeader{
  width:40px;
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--azul);
  color:var(--negro);
  border-radius:50%;
  transition:all ease .3s; text-decoration:none;
}

.flexRds .rdsGrupoLeader:hover{
  transform:scale(1.2);background-color:var(--azul); color:var(--blanco);
}

.flexRds .rdsGrupoLeader:nth-child(2n) {
  margin-left:10px;margin-right:10px;
}
/*UnderFooter*/
.UnderFooter{padding:10px;background-color:#1b1b1e;color:silver;text-align:center;font-size:10px;}



    
/*BOTÓN ARRIBA*/
.irArriba {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: block;
  background-color: transparent;
  color: var(--celeste);
  width:40px;height:40px;
  transition: all ease .3s;
  cursor: pointer;
  border-radius:50%;
  border:2px solid var(--blanco);
}

  .irArriba:hover {
    background-color:var(--celeste);
    color:var(--blanco);
  }

  .irArriba i{
    padding-left:13px;
    padding-top:12px;
  }




/*--- Style para los banner de las diferentes secciones Web ---*/
.spaceXBannner{width:100%;background-color: transparent;height:110px;}
  .imgBackgroundBanner{
    background-repeat:no-repeat;
    position: relative;
    background-size: cover;
    width:100%;min-height:auto;
    display:flex;align-items:center;
    background-attachment: fixed;
  }

  .backgroundBannerB{
    background-color:#1ba0e2c6;
    width:100%;height:auto;flex-wrap: wrap;
    padding:200px 10px;color:var(--blanco);display: flex;
  }

  .flexMisionVision{
    display:flex;
    justify-content:center;
  }


  .flexMisionVision .misionVision{
    width:450px;padding:20px;
    margin:40px;
    transition:all ease .3s;
    text-align:center;border-radius:0px;color:var(--blanco);
  }

  .misionVision .contentI{font-size:50px;color:var(--celeste);width:60px;margin: 20px auto;height:60px;background-color:var(--blanco);display:flex;justify-content:center;align-items:center;border-radius:50%;padding:8px;}
  .misionVision h3{font-size:30px;font-weight:600;padding-bottom:15px;}
  .misionVision P{font-size:20px;font-weight:400;}

  .flexMisionVision .misionVision:hover{
    background-color:var(--blanco);color:var(--negro);border-radius:30px;box-shadow: 0 8px 32px -8px rgb(1 90 120 / 36%);
  }

  .misionVision:hover .contentI{
    background-color:var(--azul);color:var(--blanco);
  }


/* VALORES */


/*PORQUE NOSOTROS*/

.valorLeader{width:250px;height:150px;background-color:var(--blanco);text-align:center;overflow: hidden;border-radius:10px;margin:15px;box-shadow: 0 8px 32px -8px var(--colorshadow);transition:all ease .3s;}
.valorLeader:hover{box-shadow: 0 8px 32px -8px rgb(1 90 120 / 36%);border-bottom-left-radius:35px;border-bottom-right-radius:35px;border-top-left-radius:0px;border-top-right-radius:0px;}
.aMostrar{width:250px;height:150px;background-color:var(--blanco)}
.aMostrar i{padding-top:25px;color: var(--celeste);padding-bottom:15px;}
.sobrePuestoHover{width:250px;height:150px;background-color:var(--blanco);position:relative;margin-top:67px;opacity:0;transition:all ease .3s;color:var(--negro);border-top: solid 6px var(--azul)}
.valorLeader:hover .sobrePuestoHover{margin-top:-150px;opacity:1;transition:all ease .3s;}
.sobrePuestoHover h4{padding:25px 10px;padding-bottom:15px;color:var(--azul);font-weight:500;font-size:22px;line-height:20px;}
.sobrePuestoHover p{font-size:15px;font-weight:400;width:90%;margin:auto;}
/*FIN DE PORQUE NOSOTROS*/



/*--------------- btnSlideToLeftRightContact --------------*/
.btnSlideToLeftRightContact{
  width:40px;height:210px;
  background-color:#222222b1;
  position:fixed;top:30%;right:0px;
  z-index:10;cursor:pointer;overflow:hidden;
}

.btnSlideToLeftRightContact .rotateContents{
  transform:rotate(270deg);font-size:18px;
  display:flex;margin-top:150px;color:var(--blanco);
}


.btnSlideToLeftRightContact .rotateContents p{
  margin-top:30px;font-size:15px;letter-spacing:1px;margin-left:20px;
}
.btnSlideToLeftRightContact .rotateContents .ii{
  transform:rotate(90deg);background-color:var(--celeste);
  width:40px;height:40px;margin-bottom:20px;margin-top:20px;
  display:flex;justify-content:center;align-items:center;transition:all ease .3s;
}


.btnSlideToLeftRightContact:hover .rotateContents .ii{
  background-color:var(--azul);border-radius:50%;
  animation:pulse 0.5s infinite;
}

.btnSlideToLeftRightContact:hover{
  border-bottom-left-radius:20px;border-bottom-right-radius:20px;
}

@keyframes pulse{
  from{transform:scale(1.0);}
  to{transform:scale(1.1);}
}


.contentBtnContact{
  width:400px;z-index:10000;
  height:100vh;position:fixed;top:0%;right:0%;
  background-color:#373737;margin-right:-100%;
  transition:all ease-in-out .5s;
}

.contentBtnContactActive{margin-right:0%;transition:all ease-in-out .5s;}


.contentInsideFormContact{
  padding:20px;
}

.contentCloseContentInsideContact{width:100%;height:auto;display:flex;justify-content:right;margin-bottom:40px;}
.closeContentInsideContact{width:40px;height:40px;cursor:pointer;border-radius:50%;color: var(--blanco);background-color:var(--celeste);display:flex;justify-content:center;align-items:center;font-size:30px;color:#373737;}
.contentInsideFormContact strong{width:100%;color:var(--celeste);font-size:25px;font-weight:500;}
.contentInsideFormContact .rayita{height:2px;width:60px;background-color: rgb(94, 200, 246);margin-top:8px;margin-bottom:20px;}
.contentInsideFormContact form{overflow-y:auto;}
.contentInsideFormContact form input{
  width:100%;padding:12px;border-radius:10px;transition:all ease .3s;
  margin:10px 0px;outline:none;border:solid 1px var(--negro);
  background-color:var(--negro);color:var(--blanco);
}

.contentInsideFormContact form input:hover{border-color:var(--celeste);}
.contentInsideFormContact form input::placeholder{color:#a0a0a0;}
.contentInsideFormContact form select{width:100%;padding:12px;border-radius:10px;transition:all ease .3s;margin:10px 0px;outline:none;border:solid 1px var(--negro);background-color:var(--negro);color:var(--blanco);}
.contentInsideFormContact form select:hover{ border-color:var(--celeste);}
.contentInsideFormContact form textarea{width:100%;padding:12px;border-radius:10px;transition:all ease .3s;margin:10px 0px;outline:none;border:solid 1px var(--negro); background-color:var(--negro);color:var(--blanco);min-height:100px; max-width:360px;min-width:360px;}
.contentInsideFormContact form textarea:hover{border-color:var(--celeste);}


.contentInsideFormContact  button{background-color: var(--celeste);font-size:18px;padding:12px 40px;border-radius:25px;color:var(--blanco);margin-top:10px;border:none;cursor:pointer;}
.contentInsideFormContact  button i{padding-left:2px;font-size:14px;padding-top:4px;}
.contentInsideFormContact button:hover{background-color:var(--azul);}

/*overlayContentBtnContact*/
.overlayContentBtnContact{background-color:var(--negro);top:0px;opacity:0.6;height:100vh;width:100%;position:absolute;position:fixed;z-index:100;display:none;}
.displayOverlayContentBtnContact{display:block;}

/*Mensaje de error en el formulario*/
.msjerror{
  background-color:orangered;color:var(--blanco);
  padding:0px 15px; width:auto;border-radius:5px;
}

/*Estilos para los aviso de confirmación*/
.avisoConfirmacion{
  padding:15px 20px;
  max-width:350px;
  border-radius:15px;
  color:var(--blanco);
  background-color:rgb(0, 197, 66);
  font-size:15px;
  position: fixed;
  right: 20px;
  top: 80px;
  z-index:1000;
}

.avisoError{
  padding:15px 20px;
  max-width:350px;
  border-radius:15px;
  color:var(--blanco);
  background-color:rgb(248, 91, 63);
  font-size:15px;
  position: fixed;
    right: 20px;
    top: 50px;
    z-index:1000;
}

/*-----------------------------------
            CLIENTES
-------------------------------------*/
.flexLogos{display:flex;justify-content:center;flex-wrap:wrap;margin:50px 0px;}

.flexLogos .controlImgLogo{width:250px;height:250px;border:solid 1.5px var(--colorshadow);overflow:hidden;transition:all ease .5s;;margin:25px;}
.flexLogos .controlImgLogo:hover{border-color:transparent;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;border-radius:20px;}
.flexLogos .controlImgLogo img{width:100%;height:100%;transition:all ease .5s;cursor:pointer;}
.flexLogos .controlImgLogo img:hover{transform:scale(1.2)}

/*Modal logo cliente*/
.modalLogoCliente{
  width:100%;height:100%;
  background-color:#1b1b1bb5;
  position:fixed;top:0;
  z-index:100;
  display:flex;
  justify-content:center;
  align-items:center;
  display:none;
}

.CloseInfoLogo{
  width:100%;height:auto;
  display:flex;justify-content:right;
}

.CloseInfoLogo .iconClose{width:50px;height:50px;border:1px solid var(--colorshadow);font-size:30px;color:var(--colorshadow);display:flex;justify-content:center;align-items:center;border-radius:50%;cursor:pointer;}
.CloseInfoLogo .iconClose:hover{background-color:aliceblue;}
.LogoInfo{
  width:500px;height:auto;max-height:500px;border-radius:25px;
  padding:30px;padding-top:20px;padding-bottom:50px;margin:auto;text-align: center;
  background-color:var(--blanco);padding-bottom:50px;overflow: auto;
}
.LogoInfo img{margin-bottom:20px;}
.LogoInfo p{text-align:left;padding:10px;}




/*---------- SECCIÓN CONTACTO ---------*/
.widthIconContact{
  width:200px;
  height:auto;
  margin:30px;text-align:center;
}

.iconContact{
  width:50px;height:50px;
  background-color:var(--celeste);
  color:var(--blanco);border-radius:50%;
  margin:auto; margin-bottom:15px;font-size:20px;
  display:flex;justify-content:center;align-items:center;
}

.widthIconContact h3{font-size:18px;font-weight:450;padding-bottom:10px;}
.widthIconContact p{font-size:14px;font-weight:400;padding-bottom:10px;}


.formContact{
  width:600px;
  margin:20px;transition:all ease .3s;
}

.slideAutomaticInFormSection{
  width:400px;min-height: 400px;
  margin:20px;
}

.formContact strong{width:100%;color:var(--celeste);font-size:35px;font-weight:500;}
.formContact .rayita{height:2px;width:60px;background-color: rgb(94, 200, 246);margin-top:8px;margin-bottom:20px;}

.formContact form input{
  width:100%;padding:12px;border-radius:10px;transition:all ease .3s;
  margin:10px 0px;outline:none;border:solid 1px var(--colorshadow);
  background-color:var(--blanco);color:var(--negro);
}

.formContact form input:hover{border-color:var(--celeste);}
.formContact form input::placeholder{color:#a0a0a0;}
.formContact form select{width:100%;padding:12px;border-radius:10px;transition:all ease .3s;margin:10px 0px;outline:none;border:solid 1px var(--colorshadow);background-color:var(--blanco);color:var(--negro);}
.formContact form select:hover{ border-color:var(--celeste);}
.formContact form textarea{width:100%;padding:12px;border-radius:10px;transition:all ease .3s;margin:10px 0px;outline:none;border:solid 1px var(--colorshadow); background-color:var(--blanco);color:var(--n);min-height:150px;max-width:600px;min-width:600px;}
.formContact form textarea:hover{border-color:var(--celeste);}


.formContact  button{background-color: var(--celeste);font-size:18px;padding:12px 40px;border-radius:25px;color:var(--blanco);margin-top:10px;border:none;cursor:pointer;}
.formContact  button i{padding-left:2px;font-size:14px;padding-top:4px;}
.formContact button:hover{background-color:var(--azul);}





/*------------------------------------
    SECCIÓN SERVICIO EN ESPECÍFICO
-------------------------------------*/
.titleServiceInAbout{font-size:35px;padding-top:50px;color:var(--celeste);font-weight:450;}
.rayitaUnderTitleService{height:2px;width:60px;background-color: rgb(94, 200, 246);margin-top:8px;margin-bottom:30px;}
.square{width:100%;height:auto;position: relative;margin:50px 0px;}
.squareTextContent{background-color:var(--azul);color:var(--blanco);padding:50px;transition:all ease .3s;padding-top:75px;text-align:center;}
.squareTextContent:hover{background-color:var(--negro);}
.ContentCircleForSquare{width:100%;height:auto;display:flex;justify-content:center;position:absolute;margin-top:-30px;}
.ContentCircleForSquare .circleForSquare{width:70px;height:70px;border-radius:50%;background-color:var(--blanco);color:var(--celeste);border:3px solid var(--celeste);display:flex;justify-content:center;align-items:center;font-size:40px;}



/*---  GRID GALERIA EN SERVICIO EN ESPECÌFICO ----*/
.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  position:relative;
  background-color: #dfdfdf;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.grid-item:hover {transition: all 0.3s ease-in-out;transform: scale(1.04);}

.grid-container{
  max-width:1550px;margin:auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: 20px;
  grid-auto-flow:dense;
  margin:50px 0px;
}

.pgrid-grupoLeader{
  font-size: 1rem;
  text-align:center;
  display:flex;width:100%;height:100%;
  padding:10px;
  justify-content:center;
  color:#fff;
  position:absolute;align-items: flex-end;
  z-index:1; transition: all 0.4s ease-in-out;
}

.grid-item:hover .pgrid-grupoLeader{
  font-size:1.2rem; transition: all 0.4s ease-in-out;
  background-color: #005abb8d;
}


.grid-item{border-radius:0;}
.grid-item:hover{transform: scale(1.0)}
.pgrid-grupoLeader{transition: all ease 2s;opacity:0;display:flex;justify-content:center;align-items:center;}
.grid-item:hover .pgrid-grupoLeader{background-color: #0188d18d;opacity:1;}
.lg-outer .lg-thumb-outer{background-color:var(--blanco)!important;}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover{border-color:var(--celeste)!important;}
.lg-progress-bar .lg-progress{background-color: var(--celeste)!important;}
.lg-actions .lg-next, .lg-actions .lg-prev{background-color:#0188d18d !important;}









/*BOTON WHATSAPP FLOTANTE*/
.buttonWasp{position:fixed;bottom:15px;left:15px;width:55px;height:55px;background-color:#09c61c;border-radius:50%;border:2px solid var(--blanco);color:var(--blanco);display:flex;justify-content:center;align-items:center;}



/*Adiconales*/
.btnWhatsappGrupoLeader{
  padding:10px 15px;color:var(--blanco);background-color:#09c61c;border-radius:20px;margin-top:30px;transition:all ease .3s;
}

.btnWhatsappGrupoLeader:hover{
  background-color:#03a914;
}






/*Media querys*/

@media(max-width:1500px){
.backgroundDeg{background:transparent;}
}
@media(max-width:1160px){
  /*Footer*/
  footer{flex-wrap: wrap;}
  .CjFlexFooterThree{width:100%;}
  .CjFlexFooterOne{width:32%;}
  .CjFlexFooterTwo{width:60%;}
  /*Fin de footer*/

/*--- Style para los banner de las diferentes secciones Web ---*/
.spaceXBannner{height:60px;}
.backgroundBannerB{ padding:100px 10px;}
/*--- Fin de style para los banner de las diferentes secciones Web ---*/

}

@media(max-width:1080px){
/* Seccción contacto */
.formContact{
  width:400px;
}
.formContact form textarea{
  min-width:400px;max-width:400px;
}
/* Fin de Seccción contacto */
}



@media(max-width:1000px){
  /*Footer*/
  .CjFlexFooterOne{width:30%;}
  /*Fin de footer*/
}



@media(max-width:900px){
  /* Seccción contacto */
  .formContact{
    width:360px;
  }
  .formContact form textarea{
    min-width:360px;max-width:360px;
  }
  /* Fin de Seccción contacto */
  }
  

  @media(max-width:830px){
    /* Seccción contacto */
    .formContact{
      width:100%;
    }
    .formContact form textarea{
      min-width:100%;max-width:100%;
    }
    /* Fin de Seccción contacto */
   }


@media(max-width:800px){
  /*Nosotros info en sección inicio*/
  .containOnBackgroundImage{flex-wrap:wrap;}
  .CjTextNosotros,.CjAutomaticSlider{width:100%;}.TextNosotros{width:100%;margin:10px;}
  .containElementsSlider{background:transparent;height:auto;}
  .CjAutomaticSlider{min-height:380px;display:flex;justify-content:center;align-items:center;margin-bottom:10px;}
  .slidePositionAbsolute{margin:auto;}
  /* Fin de Nosotros info en sección inicio*/

  /*Marcas*/
  .marca-slider .item{width:150px;}
  .marca-slider .item img{width:100%;height:80px;}
  .marca-slider .slick-slide{margin: 10px;}
  .slick-track{max-height:120px;overflow:hidden;}
  /*Fin de Marcas*/

    /*Footer*/
    .CjFlexFooterOne,.CjFlexFooterTwo{width:100%;}
    /*Fin de footer*/

    /*Mision - Visión*/
    .flexMisionVision{flex-wrap:wrap;margin-top:50px;padding-top:50px;padding-bottom:50px;}
    .flexMisionVision .misionVision{width:100%;margin:10px;}

    /* FIN DE FLEX LOGOS CLIENTES */
  .flexLogos{margin:5px;}
  .flexLogos .controlImgLogo {width: 180px;height: 180px;margin:10px;}
  /* fLEX LOGOS CLIENTES */



}




@media(max-width:600px){
 /*Footer*/
.flexTwoColumnsInFlexFooterTwo{flex-wrap: wrap;}
/*Fin de footer*/

/*Banner para contacto en la sección inicio*/
.centeredTxtButton h3{font-size:45px;line-height:40px;font-size:30px;}
.centeredTxtButton h4{font-size:40px;line-height:45px;}
.centeredTxtButton  a{padding: 15px 25px;font-size:18px;}
/*Fin de Banner para contacto en la sección inicio**/

/*Sección Servicio en específico*/
.titleServiceInAbout{font-size:30px;}
.squareTextContent{padding:20px;padding-top:70px;}
/*Fin de Sección Servicio en específico*/


/*Content Btn Contact*/
.contentBtnContact{width:320px;}
.contentCloseContentInsideContact{margin-bottom:15px;}
.contentInsideFormContact form textarea{min-width:280px;max-width:280px;}
/*Fin de Content Btn Contact*/

/*Modal proyecto*/
.LogoInfo {
  width: 310px;}
/*Fin de Modal proyecto*/
}




@media(max-width:450px){
    /* FIN DE FLEX LOGOS CLIENTES */
    .flexLogos .controlImgLogo{width:135px;height:135px;margin:10px;}
    /* fLEX LOGOS CLIENTES */
}


@media(max-width:400px){
 /*Nosotros info en sección inicio*/
 .slidePositionAbsolute{
  width:300px;height:300px;}
 /* Fin de Nosotros info en sección inicio*/


 
/*Banner para contacto en la sección inicio*/
.centeredTxtButton  a{padding: 12px 20px;font-size:16px;}
.centeredTxtButton  a:hover{letter-spacing:0px;font-weight:normal;}
/*Fin de Banner para contacto en la sección inicio**/


/*Modal proyecto*/
.LogoInfo {
  width: 290px;}
/*Fin de Modal proyecto*/
}