@import "../../bootstrap_custum/pager.less";
.page-navigation {
  text-align: center;margin: 25px auto;min-height: 17px;
  @media(min-width: @screen-sm){overflow: hidden;}
  ul{
    display: inline-block;margin: 0;
    a, a:hover, a:focus{border: none;background: none;}
  }
  .previous, .next{
    a{
      position: relative;padding: 0; color: @pagination-color; text-decoration: none;
      &:hover,&:focus{background: none; text-decoration: underline}
    }
  }
  .pager{
    @media(min-width: @screen-sm){width: 50%;}
    .previous a{
      @media(min-width: @screen-sm){padding-right: 35px; text-align: left;}
      .pager{
        &-text{
          @media(min-width: @screen-sm){padding-left: 20px}
        }
        &-nav{
          @media(min-width: @screen-sm){padding-left: 20px;}
          .icoCharte-pager{left: 0}
        }
      }
    }
    &-text{font-size: @font-size-small; display: block}
    &-title{font-size: 16px; font-family: 'noto_serifregular';}
    &-nav{display: block;
      @media(min-width: @screen-sm){position: relative}
      .icoCharte-pager{position: absolute; top: 50%; margin-top: -3px;}
    }
    .next{float: right;
      a{
        text-align: right;padding-left: 35px;
        @media(max-width: @screen-xs-max){padding-right: 20px;}
      }
      .pager{
        &-text{
          @media(min-width: @screen-sm){padding-right: 20px;}
        }
        &-nav{padding-right: 20px;
          .icoCharte-pager{right: 0}
        }
      }
    }
    .previous a{
      @media(max-width: @screen-xs-max){padding-left: 20px;}
    }
    &.next{float: right;}
    &.previous{float: left;}
  }
  .pagination{
    a, a:hover, a:focus{color: @black1d;background-color: transparent}
    li{
      &:focus{background-color: transparent}
      &.active a{background: none;color: @brand-primary;border: 1px solid @brand-primary;}
      &:first-child > a, &:first-child > span, &:last-child > a, &:last-child > span{.border-radius(0)}
    }
  }
}