.pages li {
  list-style-type: none;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: white
}

.pages li:hover {
  box-shadow: 0 0 5px 2px white
}

.pages li.active {
    background: rgba(46, 58, 89, .6) !important;
    opacity: 1;
}

.pages {
  position: absolute;
  z-index: 999
}

.pages.horizontal {
  transform: translateX(0);
  left: 10% !important;
  bottom: 15.3vh !important;
  
}
@media screen and (max-width: 760px) {
  .pages.horizontal {
    transform: translateX(-50%);
    left: 50% !important;
    bottom: 9.3vh !important;
    
  }
}
.pages.horizontal li {
  width: 28px;
  height: 4px;
  border-radius: 30px;
  background: rgba(46, 58, 89, .15);
  opacity: 1;
  display: inline-block;
  margin-right: 10px
}

.pages.horizontal li:last-child {
  margin-right: 0
}

.pages.vertical {
  right: 5px;
  top: 50%;
  transform: translateY(-50%)
}

.pages.vertical li {
  margin-bottom: 10px
}

.pages.vertical li:last-child {
  margin-bottom: 0
}