pagination.less

.pagination{
    // display: fixed;
    -webkit-transform: translateZ(0);
    position: fixed;
    // background-color: red;
    top: 40%;
    // width: 100px;
    // height: 100px;
   right: 0;
   z-index: 10;
   // float: right;
    // display: none;
}
.pagination li{
    list-style-type: none;
}
.pagination__link{
    width: 15px;
    height: 15px;
    background-color: #ccc;
    display: block;
    border-radius: 8px;
    margin: 0 40px 18px 0;
    box-shadow: 0 0 4px #222;
    transition: .4s;
    &:hover{
        background-color: #aaa;
    }
}
// Pagination Hover states:
.no-touch .pagination li{
  position: relative;
  .pagination__link{
    position: relative;
    z-index: 20;
  }
  &:before{
    content: attr(data-cpage);
    position: absolute;
    top: -4px;
    right: 34px;
    white-space: nowrap;
    background-color: #dd1036;
    border-radius: 15px;
    font-size: 12px;
    line-height: 1;

    padding: 6px 36px 5px 16px;

    opacity: 0;
    transition: opacity 0.4s ease-in;

  }
  &:hover:before{
    opacity: 1;
    transition: opacity 0.4s ease-in;
  }
}
// .pagination ul:nth-child(1){
    // background-color: red;
// }
.pagination.hide {
    display: none;
}