@font-face {
  font-family: 'Gothapro Regular';
  src: url('../fonts/GothamProRegular/GothamPro.eot');
  src: url('../fonts/GothamProRegular/GothamPro.woff2') format('woff2'),
       url('../fonts/GothamProRegular/GothamPro.woff') format('woff'),
       url('../fonts/GothamProRegular/GothamPro.ttf') format('truetype'),
       url('../fonts/GothamProRegular/GothamPro.svg#GothamPro') format('svg'),
       url('../fonts/GothamProRegular/GothamPro.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

#pagination * {
  color: #031c3b;
  font-family: 'Gothapro Regular', sans-serif;
}
#pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


#pagination a {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    font-size: 16px;
}
#pagination a.page-item:hover {
  color: #dd2c2b;
}

#pagination a.next,
#pagination a.previous {
  position: relative;
  color: #afafaf;
}
#pagination a.next {
  padding-right: 30px;
}

#pagination a.previous {
  padding-left: 30px;
}

#pagination a.next:hover::after{
  -webkit-animation: next 0.5s 2 linear;
          animation: next 0.5s 2 linear;
}

#pagination a.previous:hover::before{
  -webkit-animation: prev 0.5s 2 linear;
          animation: prev 0.5s 2 linear;
}

#pagination a.next::after,
#pagination a.previous::before {
  position: absolute;
  content: '';
  width: 12px;
  height: 12px;
  top: 20%;
}

#pagination a.next::after{
  right: 10px;
  background: url(../images/right-page.png) no-repeat center center;
  background-size: contain;
}
#pagination a.previous::before{
  left: 10px;
  background: url(../images/left-page.png) no-repeat center center;
  background-size: contain;
}

#pagination a {
    
}
#pagination i {
    margin: 0 3px 0 3px;
}
#pagination a.current {
    color: #dd2c2b;
    font-size: 24px;
}

/*Key frames for animation*/

@-webkit-keyframes prev{
  0{
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50%{
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
  100%{
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes prev{
  0{
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50%{
    -webkit-transform: translateX(-5px);
            transform: translateX(-5px);
  }
  100%{
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@-webkit-keyframes next{
  0{
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50%{
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100%{
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes next{
  0{
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  50%{
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  100%{
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}