.cc--hero-angle .swiper-button-prev,
.cc--hero-angle .swiper-button-next {
  background: none;
}
.cc--hero-angle .swiper-button-prev {
  left: 5px;
}
.cc--hero-angle .swiper-button-next {
  right: 5px;
}

.cc--hero-angle .swiper-pagination {
  left: var(--hero-angle-overlay-left-padding);
  top: calc(var(--hero-angle-overlay-top-padding) - 20px);
}
.cc--hero-angle .swiper-pagination-bullet {
  background: transparent;
  border: 1px solid white;
  opacity: 1;
  height: 20px;
  width: 20px;
  margin-right: 0.5rem;
}
.cc--hero-angle .swiper-pagination-bullet-active {
  background: white;
}

.cc--hero-angle .overlay-content {
  transition-duration: 400ms;
  transform: translate3d(0px, 0px, 0px);
}
.cc--hero-angle .swiper-slide-active .overlay-content {
  transform: translate3d(0px, 0px, 0px);
}
.cc--hero-angle .swiper-slide-next .overlay-content {
  transform: translate3d(-100vw, 0px, 0px);
}
.cc--hero-angle .swiper-slide-prev .overlay-content {
  transform: translate3d(100vw, 0px, 0px);
}

@media screen and (min-width: 1024px) {
  .cc--hero-angle .swiper-button-prev {
    left: 25px;
  }
  .cc--hero-angle .swiper-button-next {
    right: 25px;
  }
  .cc--hero-angle .swiper-pagination {
    top: calc(var(--hero-angle-overlay-top-padding) - 50px);
  }
}