@-webkit-keyframes caseStudyConveyorBeltAnimation {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-33.3333333333%, 0, 0);
            transform: translate3d(-33.3333333333%, 0, 0);
  }
}
@keyframes caseStudyConveyorBeltAnimation {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-33.3333333333%, 0, 0);
            transform: translate3d(-33.3333333333%, 0, 0);
  }
}
.case-study-conveyor-belt {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 1270px;
  pointer-events: none;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt {
    height: 720px;
  }
}
.case-study-conveyor-belt__cards-instance, .case-study-conveyor-belt__dots-instance {
  position: relative;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards-instance, .case-study-conveyor-belt__dots-instance {
    width: 2980px;
  }
}
.case-study-conveyor-belt__cards-instance-02, .case-study-conveyor-belt__cards-instance-03, .case-study-conveyor-belt__dots-instance-02, .case-study-conveyor-belt__dots-instance-03 {
  display: none;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards-instance-02, .case-study-conveyor-belt__cards-instance-03, .case-study-conveyor-belt__dots-instance-02, .case-study-conveyor-belt__dots-instance-03 {
    display: block;
  }
}
.case-study-conveyor-belt__cards {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards {
    -webkit-animation: caseStudyConveyorBeltAnimation 50s linear infinite;
            animation: caseStudyConveyorBeltAnimation 50s linear infinite;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 8940px;
    position: absolute;
    top: 65px;
    z-index: 1;
  }
}
.case-study-conveyor-belt__cards img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  position: absolute;
  aspect-ratio: 400/293;
}
.case-study-conveyor-belt__cards img.base {
  -o-object-position: bottom;
     object-position: bottom;
  opacity: 0;
  -webkit-transition: 0.3s opacity ease;
  transition: 0.3s opacity ease;
}
.case-study-conveyor-belt__cards .hover-text {
  position: absolute;
  padding: 0px 20px;
  background: rgba(253, 113, 34, 0.75);
  color: #FFFFFF;
  bottom: 0;
  opacity: 0;
  -webkit-transition: 0.3s opacity ease;
  transition: 0.3s opacity ease;
}
@media only screen and (max-width: 767px) {
  .case-study-conveyor-belt__cards .hover-text {
    font-size: 14px;
    line-height: 1.3;
  }
}
.case-study-conveyor-belt__cards--01, .case-study-conveyor-belt__cards--02, .case-study-conveyor-belt__cards--03, .case-study-conveyor-belt__cards--04, .case-study-conveyor-belt__cards--05, .case-study-conveyor-belt__cards--06, .case-study-conveyor-belt__cards--07, .case-study-conveyor-belt__cards--08 {
  position: absolute;
  overflow: hidden;
  outline: 4px solid black;
  aspect-ratio: 400/293;
  width: 320px;
  top: 0px;
  left: 0px;
  pointer-events: auto;
}
.case-study-conveyor-belt__cards--01:hover .base,
.case-study-conveyor-belt__cards--01:hover .hover-text, .case-study-conveyor-belt__cards--02:hover .base,
.case-study-conveyor-belt__cards--02:hover .hover-text, .case-study-conveyor-belt__cards--03:hover .base,
.case-study-conveyor-belt__cards--03:hover .hover-text, .case-study-conveyor-belt__cards--04:hover .base,
.case-study-conveyor-belt__cards--04:hover .hover-text, .case-study-conveyor-belt__cards--05:hover .base,
.case-study-conveyor-belt__cards--05:hover .hover-text, .case-study-conveyor-belt__cards--06:hover .base,
.case-study-conveyor-belt__cards--06:hover .hover-text, .case-study-conveyor-belt__cards--07:hover .base,
.case-study-conveyor-belt__cards--07:hover .hover-text, .case-study-conveyor-belt__cards--08:hover .base,
.case-study-conveyor-belt__cards--08:hover .hover-text {
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .case-study-conveyor-belt__cards--01 img.base,
.case-study-conveyor-belt__cards--01 .hover-text, .case-study-conveyor-belt__cards--02 img.base,
.case-study-conveyor-belt__cards--02 .hover-text, .case-study-conveyor-belt__cards--03 img.base,
.case-study-conveyor-belt__cards--03 .hover-text, .case-study-conveyor-belt__cards--04 img.base,
.case-study-conveyor-belt__cards--04 .hover-text, .case-study-conveyor-belt__cards--05 img.base,
.case-study-conveyor-belt__cards--05 .hover-text, .case-study-conveyor-belt__cards--06 img.base,
.case-study-conveyor-belt__cards--06 .hover-text, .case-study-conveyor-belt__cards--07 img.base,
.case-study-conveyor-belt__cards--07 .hover-text, .case-study-conveyor-belt__cards--08 img.base,
.case-study-conveyor-belt__cards--08 .hover-text {
    display: none;
  }
}
.case-study-conveyor-belt__cards--01 {
  top: 20px;
  left: 20px;
  width: 270px;
}
.case-study-conveyor-belt__cards--01 .hover-text {
  background: rgba(36, 172, 242, 0.85);
  color: #FFFFFF;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--01 {
    top: 40px;
    left: 120px;
    width: 400px;
  }
}
.case-study-conveyor-belt__cards--02 {
  top: 245px;
  left: auto;
  right: 20px;
}
@media only screen and (max-width: 767px) {
  .case-study-conveyor-belt__cards--02 img.base,
.case-study-conveyor-belt__cards--02 .hover-text {
    opacity: 1;
    display: block;
  }
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--02 {
    top: 360px;
    left: 410px;
    width: 400px;
  }
}
.case-study-conveyor-belt__cards--03 {
  top: 505px;
  left: auto;
  right: 20px;
  width: 230px;
}
.case-study-conveyor-belt__cards--03 .hover-text {
  background: rgba(242, 36, 242, 0.85);
  color: #FFFFFF;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--03 {
    top: 25px;
    left: 835px;
    width: 400px;
  }
}
.case-study-conveyor-belt__cards--04 {
  top: 590px;
  left: 20px;
}
.case-study-conveyor-belt__cards--04 .hover-text {
  background: rgba(123, 89, 251, 0.9);
}
@media only screen and (max-width: 767px) {
  .case-study-conveyor-belt__cards--04 img.base,
.case-study-conveyor-belt__cards--04 .hover-text {
    opacity: 1;
    display: block;
  }
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--04 {
    top: 130px;
    left: 1295px;
    width: 400px;
  }
}
.case-study-conveyor-belt__cards--05 {
  left: 95px;
  top: 855px;
  width: 184px;
}
.case-study-conveyor-belt__cards--05 .hover-text {
  background: rgba(255, 218, 36, 0.85);
  color: #000000;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--05 {
    top: -60px;
    left: 1790px;
    width: 400px;
  }
}
.case-study-conveyor-belt__cards--06 {
  top: 1020px;
  left: auto;
  right: 20px;
}
.case-study-conveyor-belt__cards--06 .hover-text {
  background: rgba(36, 242, 140, 0.85);
  color: #000000;
}
@media only screen and (max-width: 767px) {
  .case-study-conveyor-belt__cards--06 img.base,
.case-study-conveyor-belt__cards--06 .hover-text {
    opacity: 1;
    display: block;
  }
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--06 {
    top: 275px;
    left: 2050px;
    width: 400px;
  }
}
.case-study-conveyor-belt__cards--07 {
  top: 305px;
  left: 2550px;
}
.case-study-conveyor-belt__cards--07 .hover-text {
  background: rgba(242, 36, 70, 0.85);
  color: #FFFFFF;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--07 {
    top: 305px;
    left: 2550px;
    width: 400px;
  }
}
.case-study-conveyor-belt__cards--08 {
  top: -25px;
  left: 2950px;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--08 {
    top: -25px;
    left: 2950px;
    width: 400px;
  }
}
.case-study-conveyor-belt__cards--07, .case-study-conveyor-belt__cards--08 {
  display: none;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__cards--07, .case-study-conveyor-belt__cards--08 {
    display: block;
  }
}
.case-study-conveyor-belt__dots {
  position: relative;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__dots {
    -webkit-animation: caseStudyConveyorBeltAnimation 60s linear infinite;
            animation: caseStudyConveyorBeltAnimation 60s linear infinite;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 8940px;
    position: absolute;
    top: 85px;
  }
}
.case-study-conveyor-belt__dots--01, .case-study-conveyor-belt__dots--02, .case-study-conveyor-belt__dots--03, .case-study-conveyor-belt__dots--04, .case-study-conveyor-belt__dots--05 {
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  top: 0px;
  left: 0px;
}
.case-study-conveyor-belt__dots--01 {
  width: 180px;
  height: 260px;
  top: 910px;
  left: 20px;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__dots--01 {
    width: 180px;
    height: 260px;
    top: 280px;
    left: 160px;
  }
}
.case-study-conveyor-belt__dots--02 {
  width: 165px;
  height: 165px;
  top: 360px;
  left: 40px;
  background-size: 425px;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__dots--02 {
    width: 410px;
    height: 260px;
    top: 150px;
    left: 620px;
  }
}
.case-study-conveyor-belt__dots--03 {
  width: 410px;
  height: 260px;
  top: 0px;
  left: 0px;
  display: none;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__dots--03 {
    display: block;
    width: 410px;
    height: 260px;
    top: 200px;
    left: 1520px;
  }
}
.case-study-conveyor-belt__dots--04 {
  width: 175px;
  height: 165px;
  top: 65px;
  left: 260px;
  background-size: 395px;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__dots--04 {
    width: 410px;
    height: 260px;
    top: 40px;
    left: 2100px;
  }
}
.case-study-conveyor-belt__dots--05 {
  width: 175px;
  height: 165px;
  top: 725px;
  left: 260px;
  background-size: 300px;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__dots--05 {
    width: 290px;
    height: 260px;
    top: 75px;
    left: 2740px;
  }
}
.case-study-conveyor-belt__background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('data:image/svg+xml;utf8,<svg width="1729" height="526" viewBox="0 0 1729 526" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><polygon class="st0" points="1137.6,17.8 785.9,8.4 311.6,27.2 0,5.2 0,524.6 426.7,514 1601.3,514 1729,525.9 1729,0" fill="%232E2E2E"/></svg>');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  z-index: -1;
  height: 1270px;
}
@media only screen and (min-width: 767px) {
  .case-study-conveyor-belt__background {
    height: 720px;
    background-size: 100% 530px;
  }
}
.case-study-conveyor-belt:hover .case-study-conveyor-belt__cards,
.case-study-conveyor-belt:hover .case-study-conveyor-belt__dots {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}