.flickity-viewport {
  overflow: visible;
  position: relative;
  height: 100%;
}

.carousel .item {
  height: 75vh;
  width: 27.5vw;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

#carouselUniverse.carousel .item {
  height: 75vh;
  width: 40vw;
}

.carousel .item .bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}


.carousel .item .bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.carousel .item .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1
}

.carousel .item .imgZoom {
  position: absolute;
  z-index: -2;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
}

.carousel .item .content {
  position: absolute;
  z-index: 2;
  left: 3%;
  bottom: -2rem;
  transform: rotate(-3.17deg);
  min-width: 40%;
  max-width: 50%;
  mix-blend-mode: multiply;
  overflow: hidden;
}

.carousel .item .content:before {
  content: '';
  background-color: #452D6E;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.carousel .item .sliderText {
  position: absolute;
  z-index: 3;
  left: 3%;
  bottom: -2rem;
  transform: rotate(-3.17deg);
  max-width: 40%;
  margin: 2.5rem 2rem;
}

.carousel .item .sliderText h1 {
  font-size: 2.5rem;
  color: #FFF;
  font-family: 'Supersonic Rocketship', Helvetica, Arial, sans-serif !important;
  line-height: normal;
  text-align: left !important;
  text-transform: uppercase;
  margin-bottom: 0
}

.carousel .item .sliderText p {
  font-family: 'Nunito Regular', Helvetica, Arial, sans-serif !important;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #FFFFFF;
  margin: 1rem 0px;
}

.carousel .item.is-selected .content {
  transform: translateX(0px);
}

.carousel .item.is-before-selected .content {
  transform: translateX(calc(((100vw - 100%)/2 + 5vw)));
}

.carousel .item.is-after-selected .content {
  transform: translateX(calc(((100vw - 100%)/2 + 5vw)*-1));
}

.carousel .nextPreviousFlickity {
  width: 80vw;
  position: relative;
  height: 90vh;
  position: absolute;
  display: flex;
  align-items: center;
  margin: 0 5px;
  top: 0;
  max-width: 80vw;
  min-width: auto;
}

.carousel .flickity-prev-next-button.previous {
  margin-left: 7.5rem;
}

.carousel .flickity-prev-next-button.next {
  margin-right: 7.5rem;
}

.flickity-button-icon {
  display: none;
}

.flickity-button {
  position: absolute;
  background: transparent;
  border: none;
  color: transparent;
  width: fit-content;
  height: fit-content;
  opacity: 0.9
}

.flickity-button:hover {
  background: transparent;
  opacity: 1
}

/* position dots in carousel */
.flickity-page-dots {
  bottom: 25px;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

.sliderUrl {
  width: 100%;
  height: 100%;
}

/* white circles */
.flickity-page-dots .dot {
  width: 20px;
  height: 20px;
  opacity: 1;
  background: transparent;
  border: 2px solid white;
  margin: 0 7.5px;
  -webkit-transition: .4s opacity, .4s transform;
  -o-transition: .4s opacity, .4s transform;
  transition: .4s opacity, .4s transform;
  -webkit-transform: scale(.75);
  -ms-transform: scale(.75);
  transform: scale(.75);
}

/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: #FFCB00;
  border: 1px solid #FFCB00;
}

.buttonPlay {
  position: absolute;
  bottom: 1rem;
  right: 1rem
}

.buttonPlay img {
  width: 75%;
  opacity: 1
}

/*-------- responsive styles ------------*/
@media (max-width:767px) {
  .carousel .item {
    height: 85vh;
    width: 85vw;
  }

  #carouselUniverse.carousel .item {
    height: 85vh;
    width: 85vw;
  }

  .carousel .item .content h1 {
    font-size: 2.5em;
    width: 75%;
    margin-left: 20px;
  }

  .carousel .item .content {
    max-width: 95%;
    left: .5rem;
    bottom: -7.5rem;
  }

  .carousel .item .sliderText {
    bottom: -7.5rem;
    max-width: 90%;
    margin: 1rem;
  }

  .carousel .item .sliderText h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    width: 75%;
  }

  .carousel .item .sliderText p {
    font-size: .8rem;
    line-height: 1.2rem;
    margin: 1rem 0px;
  }

  .buttonPlay {
    bottom: 1rem;
    right: 1rem;
    z-index: 10;
  }

  .buttonPlay img {
    width: 50%;
  }

  .carousel .flickity-prev-next-button.previous {
    margin-left: .5rem;
  }

  .carousel .flickity-prev-next-button.next {
    margin-right: .5rem;
  }

  .flickity-prev-next-button.previous:before {
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
  }

  .flickity-prev-next-button.next:before {
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
  }
}

@media (min-width:1600px) {
  .carousel .flickity-prev-next-button.previous {
    margin-left: 12rem;
  }

  .carousel .flickity-prev-next-button.next {
    margin-right: 12rem;
  }
}