/*--------------------------------------------------------------
   Pagination
--------------------------------------------------------------*/

.johannes-pagination {
 position: relative;
 clear: both;
 text-align: center;
 width: 100%;
 line-height: 27px;
 margin: get-gutter-width('xs') auto get-gutter-width('xs');
 @include mq('sm') {
   margin: get-gutter-width('md') auto get-gutter-width('md');
   min-height: 46px;
  }
 @include mq('md') {
  margin: get-gutter-width('md') auto get-gutter-width('md');
  min-height: 46px;
 }
 @include mq('lg') {
  margin: 60px auto 0;
 }
}

.johannes-pagination a {
 margin-top: 0;
}

.nav-links {
 position: relative;
 font-size: 0;
 padding-top: 50px;
 @include mq('md') {
    padding-top: 0;
 }
}

.prev-next.nav-links {
 display: flex;
 justify-content: space-between;
}

.johannes-pagination .page-numbers,
.johannes-pagination .page-numbers.current {
 padding: 0;
}

.johannes-load-more a,
.johannes-pagination a.next,
.johannes-pagination a.prev,
.johannes-infinite-scroll a {
 margin: 0;
 position: relative;
}

.johannes-pagination .page-numbers,
.johannes-link-pages a,
.johannes-link-pages span {
 height: 46px;
 width: 46px;
 line-height: 46px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin: 0 5px;
}

.page-numbers.dots {
   padding-top: 5px;
   font-size: 1.2rem;
   max-width: 30px;
   font-family: initial;
}

.johannes-pagination a.next {
 right: 0;
}

.johannes-pagination a.prev {
 left: 0;
}

.johannes-pagination a.prev,
.johannes-pagination a.next {
 position: absolute;
 top: 0;
 width: auto;
 min-width: 135px;
 @include mq('lg') {
 min-width: 200px;
 }
}

.johannes-pagination .next a,
.johannes-pagination .prev a,
.johannes-pagination a.next,
.johannes-pagination a.prev{
   display: flex;
   align-items: center;
   line-height: 1;
}
.johannes-pagination .next a:after,
.johannes-pagination .prev a:before,
.johannes-pagination a.next:after,
.johannes-pagination a.prev:before{
   font-size: 1.8rem;
   font-family: "johannes-font";
}

.johannes-pagination .next a:after,
.johannes-pagination a.next:after{
   content: "\e909";
   margin-left: 2px;
   margin-right: -9px;
}

.johannes-pagination .prev a:before,
.johannes-pagination a.prev:before{
   content: "\e908";
   margin-right: 2px;
   margin-left: -9px;
}

.johannes-loader {
 width: 64px;
 height: 47px;
 position: absolute;
 margin-left: -33px;
 top: 0;
 left: 50%;
 opacity: 0;
 z-index: 0;
 pointer-events: none;
}

.johannes-loader-active .johannes-loader {
 opacity: 1;
 z-index: 1;
}

.johannes-loader-active a {
 opacity: 0;
}

.johannes-pagination .load-more a {
 position: relative;
 z-index: 2;
}

.johannes-ellipsis {
 display: inline-block;
 position: relative;
 width: 64px;
 height: 47px;
}

.johannes-ellipsis div {
 position: absolute;
 top: 19px;
 width: 11px;
 height: 11px;
 border-radius: 50%;
 animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.johannes-ellipsis div:nth-child(1) {
 left: 6px;
 animation: johannes-ellipsis1 0.4s infinite;
}

.johannes-ellipsis div:nth-child(2) {
 left: 6px;
 animation: johannes-ellipsis2 0.4s infinite;
}

.johannes-ellipsis div:nth-child(3) {
 left: 26px;
 animation: johannes-ellipsis2 0.4s infinite;
}

.johannes-ellipsis div:nth-child(4) {
 left: 45px;
 animation: johannes-ellipsis3 0.4s infinite;
}

@keyframes johannes-ellipsis1 {
 0% {
  transform: scale(0);
 }
 100% {
  transform: scale(1);
 }
}

@keyframes johannes-ellipsis3 {
 0% {
  transform: scale(1);
 }
 100% {
  transform: scale(0);
 }
}

@keyframes johannes-ellipsis2 {
 0% {
  transform: translate(0, 0);
 }
 100% {
  transform: translate(19px, 0);
 }
}

.johannes-link-pages {
 text-align: left;
 margin-bottom: 30px;
}

.johannes-link-pages a,
.johannes-link-pages span {
 height: 30px;
 width: 30px;
 display: inline-block;
 vertical-align: top;
 border-radius: 50%;
 line-height: 30px;
 font-size: 14px;
 text-align: center;
}

.johannes-front-page {
 .johannes-pagination {
  margin: 0 auto 40px;
  border-top: none;
  padding-top: 10px;
 }
}