/*** Remote carousel nav **/
.remote-carousel-controls button {
  background: transparent;           
  border: none;
  padding: 0.5em;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.remote-carousel-controls .js-prev:focus,
.remote-carousel-controls .js-next:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: inherit;
    color: inherit;
}

.remote-carousel-controls .js-next:hover {
  transform: translateX(4px);
}

.remote-carousel-controls .js-prev:hover {
  transform: translateX(-4px);
}

.remote-carousel-controls button:active {
  transform: translateY(1px);
}

.remote-carousel-controls .js-prev,
.remote-carousel-controls .js-next {
  background-color: transparent;
  border: none;
  font-size: inherit;
  cursor: pointer;
  transition:
  color 0.2s ease,
  background-color 0.3s ease;
  padding: 0;
  line-height: 1;
}

.remote-carousel-controls .js-prev {
  margin-right: 10px;
}

.remote-carousel-controls {
  display: flex;
  align-items: center;
}

.remote-carousel-controls .slide-counter {
  display: inline-block;
  margin-right: 10px;
  white-space: nowrap;
  user-select: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.remote-carousel-controls .slide-counter.hidden {
  opacity: 0;
  visibility: hidden;
}