/* ===================================
    Cover
====================================== */
.title-cover {font-size: 6rem;}
.text-cover {font-size: 1.1rem; line-height: 1.6rem;}
.title-cover2 {font-size: 2.8rem; line-height: 1}
/* sm  */ @media (min-width: 576px) {
  .title-cover2 {font-size: 3.4rem; line-height: 1}
}
/* md  */ @media (min-width: 768px) {
  .title-cover2 {font-size: 3.8rem; line-height: 1}
}
/* .title-cover2 {font-size: 4rem; line-height: 1;} */

/* .bd-masthead {
  --bs-body-bg-rgb: 255,255,255;
  --bs-primary-rgb: 13,110,253;
  --bd-accent-rgb: 255,228,132;
  --bd-violet-rgb: 112.520718,44.062154,249.437846;
  --bd-pink-rgb: 214,51,132;
  padding: 3rem 0;
  background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.01), rgba(var(--bs-body-bg-rgb), 1) 85%),radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), 0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), 0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), 0.5), transparent 50%);
} */
.bd-masthead {
  --bs-body-bg-rgb: 255,255,255;
  --bs-primary-rgb: 13,110,253;
  --bd-accent-rgb: 255,228,132;
  --bd-violet-rgb: 112.520718,44.062154,249.437846;
  --bd-pink-rgb: 214,51,132;
  padding: 3rem 0;
  /* background-image: linear-gradient(180deg, rgba(255,255,255, 0.01), rgba(255,255,255, 1) 85%),radial-gradient(ellipse at top left, rgba(13,110,253, 0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(255,228,132, 0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(112,44,249, 0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(214,51,132, 0.5), transparent 50%); */
  background-image: linear-gradient(180deg, rgba(255,255,255, 0.01), rgba(255,255,255, 1) 85%),radial-gradient(ellipse at top left, rgb(13 110 253 / 70%), transparent 50%),radial-gradient(ellipse at top right, rgb(255 105 0 / 78%), transparent 50%),radial-gradient(ellipse at center right, #e40e0e85, transparent 50%),radial-gradient(ellipse at center left, #3b00ff73, transparent 50%);
}

/* https://stackoverflow.com/questions/65630238/infinite-stream-text-animation-css */
/* https://www.w3schools.com/cssref/css3_pr_animation-timing-function.php */


          /* OPCIÓN A */

/* .stream-text {
     position: absolute;
     padding-left: 120%;
     white-space: nowrap;
     text-transform: uppercase;
     animation: stream 12s ease-in-out infinite;
}

.stream-text-delay {
  color: transparent !important;
  animation-delay: 4s;
}
@media (min-width: 1200px) {
  .stream-text-delay {
    color: #123686 !important;
    animation-delay: 6s;
  }
}

@keyframes stream {
     0% {
       transform: translateX(0%);
     }
     100% {
       transform: translateX(-120%);
     }
} */

          /* OPCIÓN B */

.stream-text {
  position: absolute;
  padding-left: 110%;
  white-space: nowrap;
  text-transform: uppercase;
  animation: stream 9s linear infinite; /* alternate */
}


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


/* .stream-text-delay {
color: transparent !important;
animation-delay: 4s;
} */
/* @media (min-width: 1200px) { */
.stream-text-delay {
 color: #123686 !important;
 animation-delay: 4.5s;
}
.stream-text-delay2 {
  position: absolute;
  top: 0px;
  color: #123686 !important;

  /* font-size: 12rem;
  position: relative;
  padding-left: 100%;
  white-space: nowrap;
  text-transform: uppercase;
  animation: stream 6s linear infinite; */
  animation-delay: 4.5s;
 }
/* } */

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

/* ===================================
    Cover
====================================== */



/* ===================================
    Cintas alta calidad
====================================== */

.cinta-empaque {

    z-index: -2;
    right: 0;

}

.square-type {
  /* background-color: rgba(255, 145, 0, 0.5); */
  /* background-color: #DFE2EA; */
  background-color: rgba(223, 226, 234, 0.1);
  height: 10rem;
  width: auto;
  /* border: 1px solid #242424; */
  border: 1px solid rgba(36, 36, 36, 0.1);
  border-radius: 0.5rem;

}

/* ===================================
    Banner - Dispensador
====================================== */

  .dispensador-blue {
    position: absolute;
    z-index: 2;
    right: -800px;
    height: 250px;
    margin-top: 5px;
    display: none;
  }
  .bg-banner-dispensador-blue {
    position: relative;
    height: 255px;
    background: transparent;
  }

  .bg-products-inicio {
    padding-top: 40px;
    margin: 0 5px;
    /* background: linear-gradient(180deg, #ffffff 15%, #F8F9FB 15%, #F8F9FB 85%, #ffffff 85%); */
    background: #F8F9FB;
  }

/* xs */ @media (max-width: 575px) {

.bg-banner-dispensador-blue {
  height: auto !important;
  background: #123686 !important;
}

}

/* sm  */ @media (min-width: 576px) {
  .dispensador-blue {
    position: absolute;
    z-index: 2;
    right: -800px;
    height: 250px;
    margin-top: 5px;
    display: none;
  }
  .bg-banner-dispensador-blue {
    height: 190px;
    background: #123686;
  }
}
/* md  */ @media (min-width: 768px) {
  .dispensador-blue {
    position: absolute;
    z-index: 2;
    right: -800px;
    height: 250px;
    margin-top: 5px;
    display: block;
  }
  .bg-banner-dispensador-blue {
    height: 265px;
    background: linear-gradient(180deg, #ffffff 20%, #123686 20%, #123686 80%, #ffffff 80%);
  }
}
/* lg  */ @media (min-width: 992px) {
  .dispensador-blue {
    position: absolute;
    z-index: 2;
    left: 80%;
    height: 220px;
    margin-top: 5px;
  }
  .bg-banner-dispensador-blue {
    height: 235px;
    background: transparent;
  }
  .bg-products-inicio {
    padding-top: 0px;
    margin: 0px;
    background: linear-gradient(180deg, #ffffff 15%, #F8F9FB 15%, #F8F9FB 85%, #ffffff 85%);
  }
}
/* xl  */ @media (min-width: 1200px) {
  .dispensador-blue {
    position: absolute;
    z-index: 2;
    left: 85%;
    height: 200px;
    margin-top: 5px;
  }
  .bg-banner-dispensador-blue {
    height: 215px;
    background: transparent;
  }
}



/* ===================================
    Carousel productos
====================================== */
#cinta-empaques-carousel .splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  right: auto;
  padding: 1em 0;
  left: 0.5em;
  top: 0;
}