.hmpagination { margin: 0; display: flex; gap: 10px; align-items: center; justify-content: center; }
.hmpagination a { color: #FEFEFE; display: flex; background: #121212BF; border: 1px solid #121212BF; border-radius: 50%; font-size: 12px; width: 40px; height: 40px; line-height: 40px; text-align: center; justify-content: center; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; }
.hmpagination ol { list-style-type: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.hmpagination li { display: flex; gap: 8px; }
.hmpagination li.active a { background: transparent; border-color: #fff; }
.hmpagination li.active a:hover { text-decoration: none; cursor: default; }
.hmpagination .prev.disabled,.hmpagination  .next.disabled { cursor: default; background: #ccc; color: #888; border-color: #888; }
.hmpagination .prev.disabled:hover,.hmpagination  .next.disabled:hover { cursor: default; text-decoration: none; }

.hmpagination.dark a { color: #1A1A1A; background: #fff; border-color: #fff; }
.hmpagination.dark li:hover a { border-color: #ccc; }
.hmpagination.dark li.active a { border-color: #2A2A2A; background: #2A2A2A; color: #fff; }
.hmpagination.dark .prev.disabled,.hmpagination.dark .next.disabled { background: #ccc; color: #888; border-color: #888; }

/*@media (max-width: 767px) {
  .hmpagination li:first-child, li.active, 
  .hmpagination li.active-sibling:nth-last-child(2), li:last-child {
    display: flex !important;
  }
  .hmpagination li:first-child:nth-last-child(n+6) ~ li {
    display: none;
  }
  .hmpagination li:first-child:nth-last-child(n+6) ~ li:nth-last-child(-n+3) {
    display: flex;
  }
  .hmpagination li:first-child:nth-last-child(n+6) ~ li:nth-last-child(3):before {
    content: "…";
    font-size: 24px;
    display: flex; gap: 8px; color: #fff; font-weight: 100;
  }
  .hmpagination li:first-child:nth-last-child(n+6).active:before, 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active:before {
    content: "…";
    font-size: 24px;
    display: flex; gap: 8px; color: #fff; font-weight: 100;
  }
  .hmpagination li:first-child:nth-last-child(n+6).active:after, 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active:after {
    content: "…";
    font-size: 24px;
    display: flex; gap: 8px; color: #fff; font-weight: 100;
  }
  .hmpagination li:first-child:nth-last-child(n+6).active:nth-child(-n+2):before, 
  .hmpagination li:first-child:nth-last-child(n+6).active:nth-child(-n+2):after,
  .hmpagination li:first-child:nth-last-child(n+6).active:nth-last-child(-n+2):before, 
  .hmpagination li:first-child:nth-last-child(n+6).active:nth-last-child(-n+2):after, 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active:nth-child(-n+2):before, 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active:nth-child(-n+2):after, 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active:nth-last-child(-n+2):before, 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active:nth-last-child(-n+2):after {
    display: none;
  }
  .hmpagination li:first-child:nth-last-child(n+6).active ~ li:nth-last-child(-n+3), 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active ~ li:nth-last-child(-n+3) {
    display: none;
  }
  .hmpagination li:first-child:nth-last-child(n+6).active ~ li:nth-child(-n+3), 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active ~ li:nth-child(-n+3) {
    display: flex;
  }
  .hmpagination li:first-child:nth-last-child(n+6).active ~ li:nth-child(-n+2):after, 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active ~ li:nth-child(-n+2):after {
    display: none;
  }
  .hmpagination li:first-child:nth-last-child(n+6).active ~ li:nth-child(3):after, 
  .hmpagination li:first-child:nth-last-child(n+6) ~ li.active ~ li:nth-child(3):after {
    content: "…";
    font-size: 24px;
    display: flex; gap: 8px; color: #fff; font-weight: 100;
  }
}*/
@media (min-width: 0px) {
  .hmpagination li:first-child,
  .hmpagination li.active-sibling,
  .hmpagination li.active,
  .hmpagination li.active + li,
  .hmpagination li:last-child {
    display: flex !important;
  }
  .hmpagination li:first-child:nth-last-child(n+8) ~ li {
    display: none;
  }
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active-sibling:before {
    content: "…";
    font-size: 24px;
    display: flex; gap: 8px; color: #fff; font-weight: 100;

  }
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active + li:after {
    content: "…";
    font-size: 24px;
    display: flex; gap: 8px; color: #fff; font-weight: 100;

  }
  .hmpagination li:first-child:nth-last-child(n+8) ~ li:nth-last-child(-n+5) {
    display: flex;
  }
  .hmpagination li:first-child:nth-last-child(n+8) ~ li:nth-last-child(5):before {
    content: "…";
    font-size: 24px;
    display: flex; gap: 8px; color: #fff; font-weight: 100;
  }
  .hmpagination li:first-child:nth-last-child(n+8) ~ li:nth-child(-n+2):before,
  .hmpagination li:first-child:nth-last-child(n+8) ~ li:nth-child(-n+2):after,
  .hmpagination li:first-child:nth-last-child(n+8) ~ li:nth-last-child(-n+2):before, 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li:nth-last-child(-n+2):after, 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active-sibling:nth-last-child(-n+4):before, 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active-sibling:nth-last-child(-n+4):after {
    display: none !important;
  }
  .hmpagination li:first-child:nth-last-child(n+8).active ~ li:nth-last-child(-n+5), 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active ~ li:nth-last-child(-n+5) {
    display: none;
  }
  .hmpagination li:first-child:nth-last-child(n+8).active ~ li:nth-last-child(-n+5):before, 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active ~ li:nth-last-child(-n+5):before {
    display: none;
  }
  .hmpagination li:first-child:nth-last-child(n+8).active ~ li:nth-child(-n+5), 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active ~ li:nth-child(-n+5) {
    display: flex;
  }
  .hmpagination li:first-child:nth-last-child(n+8).active ~ li:nth-child(-n+4):after, 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active ~ li:nth-child(-n+4):after {
    display: none;
  }
  .hmpagination li:first-child:nth-last-child(n+8).active ~ li:nth-child(5):after, 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active ~ li:nth-child(5):after {
    content: "…";
    font-size: 24px;
    display: flex; gap: 8px; color: #fff; font-weight: 100;
  }
  .hmpagination li:first-child:nth-last-child(n+8).active:before, 
  .hmpagination li:first-child:nth-last-child(n+8).active:after, 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active:before, 
  .hmpagination li:first-child:nth-last-child(n+8) ~ li.active:after {
    display: none;
  }
}