/*Infinity Scroll*/
.infinityWrapper {
  max-width: 1170px;
  width: 90%;
  margin-inline: auto;
  position: relative;
  height: 250px;
  overflow-x: hidden;
  overflow-y: visible;
  mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
}

@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

.infinityItem {
  width: 130px;
  height: 100%;
  border-radius: 6px;
  position: absolute;
  left: max(calc(200px * 6), 100%);
  animation-name: scrollLeft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-x: center;
}
/*Duration  *  Delay  *  -1*/
/*30s / 6   * (6 - x) * -1*/
/*Delay staggered to compensate for the weidth change of Item 3*/
#infinityItem1{
  animation-delay: calc(30s / 6 * (6 - 1.2) * -1);
  background-image: url(../assets/Logos/FSC.png);
}
#infinityItem2{
  animation-delay: calc(30s / 6 * (6 - 2.1) * -1);
  background-image: url(../assets//Logos/PEFC.png);
}
#infinityItem3{
  animation-delay: calc(30s / 6 * (6 - 3) * -1);
  background-image: url(../assets//Logos/wcclogo.png);
  /*Increasing width so that it's not tiny compared to the others*/
  width: 270px;
}
#infinityItem4{
  animation-delay: calc(30s / 6 * (6 - 4.5) * -1);
  background-image: url(../assets//Logos/ISO-9001-v-dark.png);
}
#infinityItem5{
  animation-delay: calc(30s / 6 * (6 - 5.4) * -1);
  background-image: url(../assets//Logos/ISO-14001-v-dark.png);
}
#infinityItem6{
  animation-delay: calc(30s / 6 * (6 - 6.3) * -1);
  background-image: url(../assets//Logos/LivingWageLogo.png);
}