/*Index*/











/*Animacion Banner*/

.roller {
  animation: animate-roller 6s;
  z-index: 3;
  /*animation-delay: 3s;¨*/
}

.banner-animation{
  animation-name: left-to-right;
  animation-duration: 6s;
}


/* lg  */ @media (min-width: 992px) {

.bg-banner-dispensador-blue-2{
  width: 100%;
  position: absolute;
  height: 235px;
  background: linear-gradient(180deg, #ffffff 20%, #123686 20%, #123686 80%, #ffffff 80%);
  margin: 0px;
  padding: 0px;
}

}

/* xl  */ @media (min-width: 1200px) {

.roller {
  animation: animate-roller1200 6s;
  z-index: 3;
}

.bg-banner-dispensador-blue-2{
  width: 100%;
  position: absolute;
  height: 215px;
  background: linear-gradient(180deg, #ffffff 20%, #123686 20%, #123686 80%, #ffffff 80%);
  margin: 0px;
  padding: 0px;
}

}


/* lg  */ @media (max-width: 992px) {

.animation-btn-banner {
  animation: none;
}

}


/* Animacion Boton */

.animation-btn-banner {
  animation: anima-btn 6s;
}

@keyframes anima-btn {
  0% {opacity: 0;}
  50% {opacity: 0;}
  100% {opacity: 1;}

}


/*---------------------------------*/

/*Productos*/

.content-title-banner{
  width: 100%;
  height: 100%;
  z-index: 3;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top:50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.roller-product {
  animation: animate-roller 6s;
  z-index: 3;
}

.animation-banner-item-product  {
  animation-name: left-to-right;
  animation-duration: 6s;
}

/* lg  */ @media (min-width: 992px) {

.bg-banner-item-product {
  width: 100%;
  position: absolute;
  height: 300px;
  background: linear-gradient(180deg, #ffffff 30%, #F26522 30%, #F26522 70%, #ffffff 70%);
  margin: 0px;
  padding: 0px;
}

}

/* xl  */ @media (min-width: 1200px) {

.item {
     left: 85%;
}

.roller-product {
  animation: animate-roller1200 6s;
  z-index: 3;
}

.animation-banner-item-product {
  animation-name: left-to-right-1200;
  animation-duration: 6s;
}

}

/* lg  */ @media (max-width: 992px) {
  .content-title-banner{
    width: 100%;
    position: relative;
    top:0%;
    left:0%;
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }

}
/*---------------------------------*/

/*Animation Roller index y  Productos*/

@keyframes animate-roller { /*Animacion min-width 992*/
  0% { left: -10%; }
  100% { left: 80%; }
}

@keyframes animate-roller1200 { /*Animacion min-width 1200*/
  0% { left: -10%; }
  100% { left: 85%; }
}
/*---------------------------------*/

/*Animation Banner index y  Productos*/

@keyframes left-to-right {/*Animacion min-width 992*/
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes left-to-right-1200 { /*Animacion min-width 1200*/
  0% {
    width: 0%;
  }
  100% {
    width: 95%;
  }
}
/*------------------------------------*/


.ticker-tape-animation {
  display: flex;
  flex-direction: row;
    overflow:hide;
}

.ticker-wrapper {
  overflow-x: hide;
  width: auto;
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
}

.stream-text-3 {
    font-size: 12rem;
    position: relative;
    white-space: nowrap;
    text-transform: uppercase;
    padding-right: 4rem;
    /*animation: stream 6s linear infinite; alternate */
}

.ticker-wrapper-one {
   animation: ticker 20s linear infinite running;
}

.ticker-wrapper-two {
   animation: ticker 20s linear infinite running;
}

.ticker-tape-heading {
  padding-right: 4rem;
}


@keyframes ticker {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-110%);
  }
}


/* sm  */ @media (max-width: 576px) {

  .img-carrusel-index{
    width: 100%!important;
  }

}