.pagination {
  display: block;
  margin: 50px 0;
  text-align: center;
  ul {
    display: inline-block;
    li {
      display: inline-block;
      margin: 0 -3px;
      border-top: 1px solid #E2E2E2;
      border-bottom: 1px solid #E2E2E2;
      padding: 15px 3px;
      &:first-child {
        border-radius: 3px 0 0 3px;
        border: 1px solid #E2E2E2;
        .icon-arrow {
          &:before {
            transform: rotate(-180deg);
            margin-right: -8px;
          }
        }
      }
      &:last-child {
        border-radius: 0 3px 3px 0;
        border: 1px solid #E2E2E2;
        .icon-arrow {
          &:before {
            margin-left: -8px;
          }
        }
      }
      &.active {
        a {
          position: relative;
          color: $yellow;
          &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 35px;
            height: 35px;
            border: 1px solid $yellow;
            border-radius: 50%;
          }
        }
      }
      &:first-child{
        a{
          i{
            margin-right: 5px;
          }
        }
      }
      &:last-child{
        a{
          i{
            margin-left: 5px;
          }
        }
      }
      a {
        color: $black;
        text-decoration: none;
        padding: 15px;
        font-size: 1.3rem;
        font-family: 'Roboto', sans-serif;
        i{
          font-size: 1.2rem
        }
      }
    }
  }
}