/*--------------SHOWCASE APLICACIONES-------------*/
.showCase__container >div:first-of-type{
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.showCase__container__buttons__title{
  font-size: 48px !important;
  margin-bottom: 40px !important;
}
.showCase__container__buttons{
  justify-content: center;
  display: flex;
  flex-flow: column;
}
.btnBorderAnimate{
  width: max-content;
  position: relative;
  height: 52px;
}
.btnBorderAnimate__content i svg{
  width: 22px;
  height: 22px;
  margin-top: 2px;
  margin-right:10px;
}
.btnBorderAnimate__content{ 
  position: absolute;
  left: 0;
  width: max-content;
  right: 0;
  z-index: 4;
  top: 0;
  display: flex;
  color: #494949;
  bottom: 0;
  margin: auto;
  font-weight: 800;
  height: max-content;
}
.showCase__container__slider__img img{
  opacity: 0;
  transform: translateX(220px) translateY(-70px);

  position: absolute;
  height: auto !important;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100% !important;
  transition-duration: 0.5s;
}
.showCase__container__slider__img{
  min-height: 574px;
}
.showCase__container__slider__img .slider__img--active{
  opacity: 1 !important;
  transform: translateX(0px) !important;
}

.showCase__container__slider{
  overflow: hidden;
}
.btnBorderAnimate{
  margin-bottom: 20px;
  cursor: pointer;
  fill: #e5e7eb;
}
.btnBorderAnimate .btnBorderAnimateSvg__main{
	stroke-dasharray: 0 9000;
	stroke: #000;
	stroke-width: 2px;

}
.btnBorderAnimate:hover .btnBorderAnimateSvg__main{
  animation-play-state: paused !important;
  animation-fill-mode: forwards;
}
.btnBorderAnimate span{
  color: #494949;
}
.btnBorderAnimate i svg{
  fill: #494949;
}
.btnBorderAnimate--active svg{
  fill: #fff !important;
}
.btnBorderAnimate--animate .btnBorderAnimateSvg__main{
  animation: fillRect 10s alternate;
}

@keyframes fillRect{
  from{
    stroke-dasharray: 0 9000;
  }
  to{
     stroke-dasharray: 990 9000;
  }
}

.btnBorderAnimate--active .btnBorderAnimateSvg__main path{
  fill: #e51111;
}
.btnBorderAnimate--active span, .btnBorderAnimate--active i{
  color: #fff;
}

.btnBorderAnimate:hover .btnBorderAnimateSvg__main path:not(.btnBorderAnimate--active .btnBorderAnimateSvg__main path, .btnBorderAnimate--animate){
  fill: #bdc2ca;
}

.btnBorderAnimateSvg__main{
  position: relative;
  z-index: 2;
  transform: scale(101%);
}
.btnBorderAnimate--active .btnBorderAnimateSvg__main{
  transition-duration: 0 !important;
  transition: none !important;
}
.btnBorderAnimateSvg__outline{
  stroke: #bdc2ca;
}
.btnBorderAnimateSvg__outline{
  position: absolute;
  z-index: 0;
  left: 0;
  transform: scale(102%);
}

@media screen and (max-width:1024px){
  @media screen and (
    .elementor-loop-containe(
    column-fapp)
    elemento {
      /* column-gap: 27px; */
      /* column-gap: 40px; */
      flex-wrap: unset;
    }
  )
  .elementor-loop-container{
    mmargin:auto;
  }
  .elementor-loopj {
    justify-content: center;
  }
  .showCase__container__buttons__title{
    line-height: 1.1em !important;
  }
  .showCase__container__slider__img img{
    width: 100% !important;
    max-width: calc(100% - 30px);
  }
  .showCase__container__buttons__title{
    text-align: center;
  }
  .showCase__container__buttons{
    flex-flow: row;
    overflow: scroll hidden;
    justify-content: left !important;
    scrollbar-width: none;
  }
  .showCase__container {
    display: flex;
    flex-flow: column;
  }
  .showCase__container>div{
    flex: 1;
  }
  .type-productos {
    column-gap: 120px !important;;
  }
  .showCase__container__buttons{
    display: initial !important;

  }

  .showCase__container__buttons>div{
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 10px;
    margin-top: 10px;

  }
  .showCase__container__buttons__title{
    margin-bottom: 10px !important;
  }
  .showCase__container__slider__img img{
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }
  .showCase__container__slider__img{
    min-height: 350px;
  }
  .showCase__container__buttons{
    /*! justify-content: center !important; */
    justify-items: center !important;
    /*! align-content: center; */
  }

}

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

  .btnBorderAnimate svg{
    top: 1px !important;
    transform: scaleX(90%);
  }
}