//Blog Pagination

.blog-pagination {

  display: block;
  width: 100%;
  margin-top: 60px;

  &.event-five {
    margin-top: 30px;
  }

  &.issues-three {
    margin-top: 30px;
  }

  &.style-01 {
    ul {
      li {
        &:first-child {
          margin-right: 10px;
        }

        &:last-child {
          margin-left: 10px;
        }

        a {
          width: 50px;
          height: 50px;
          border-radius: 0;
          color: #6B6B6B;
          font-size: 18px;
          line-height: 35px;
          font-family: var(--body-font);
          font-weight: 500;
        }

        div {
          display: inline-block;
          width: 6px;
          height: 6px;
          background: #CCCCCC;
          border-radius: 50%;

          +div {
            margin-left: 5px;
          }
        }

        i {
          font-size: 20px;
          color: var(--main-color-one);
        }
      }
    }
  }

  ul {
    li {
      display: inline-block;
      padding-left: 0;

      + {
        li {
          margin: 0 5px;
        }
      }

      &:before {
        display: none;
      }

      a {
        padding: 7px 0px;
        width: 64px;
        height: 64px;
        line-height: 64px;
        border-radius: 50%;
        color: #B5B5B5;
        font-size: 22px;
        line-height: 47px;
        font-family: var(--body-font);
        font-weight: 700;

        &.current {
          background-color: var(--main-color-one);
          color: #fff;
          border-color: var(--main-color-one);
        }

        &:hover {
          background-color: var(--main-color-one);
          color: #fff;
        }
      }

      span {
        display: block;
        padding: 3px 25px;
        border: none;
        line-height: 40px;
        border-radius: 30px;
        text-align: center;
        font-size: 16px;
        line-height: 47px;
        font-family: var(--body-font);
        font-weight: 700;
        color: #CBCBCB;
        cursor: pointer;
        -webkit-transition: .3s ease-in;
        -o-transition: .3s ease-in;
        transition: .3s ease-in;

        &:hover {
          color: var(--main-color-one);
        }

        &.next {
          border: none;
        }
      }

      span.active {
        // background-color: #ff7575;
        color: var(--main-color-one);
      }
    }

    margin: 0;
    padding: 0;
    list-style: none;
  }
}