button {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: 0; }

.paginate {
  position: relative;
  margin: 10px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -20px;
  -webkit-filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2)); }
  .paginate i {
    position: absolute;
    top: 40%;
    left: 0;
    width: 50px;
    height: 5px;
    border-radius: 2.5px;
    background: #fff;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease; }
  .paginate.left {
    /*right: 58%;*/ }
    .paginate.left i {
      -webkit-transform-origin: 0% 50%;
      -moz-transform-origin: 0% 50%;
      -ms-transform-origin: 0% 50%;
      transform-origin: 0% 50%; }
    .paginate.left i:first-child {
      -webkit-transform: translate(0, -1px) rotate(40deg);
      -moz-transform: translate(0, -1px) rotate(40deg);
      -ms-transform: translate(0, -1px) rotate(40deg);
      transform: translate(0, -1px) rotate(40deg); }
    .paginate.left i:last-child {
      -webkit-transform: translate(0, 1px) rotate(-40deg);
      -moz-transform: translate(0, 1px) rotate(-40deg);
      -ms-transform: translate(0, 1px) rotate(-40deg);
      transform: translate(0, 1px) rotate(-40deg); }
    .paginate.left:hover i:first-child {
      -webkit-transform: translate(0, -1px) rotate(30deg);
      -moz-transform: translate(0, -1px) rotate(30deg);
      -ms-transform: translate(0, -1px) rotate(30deg);
      transform: translate(0, -1px) rotate(30deg); }
    .paginate.left:hover i:last-child {
      -webkit-transform: translate(0, 1px) rotate(-30deg);
      -moz-transform: translate(0, 1px) rotate(-30deg);
      -ms-transform: translate(0, 1px) rotate(-30deg);
      transform: translate(0, 1px) rotate(-30deg); }
    .paginate.left:active i:first-child {
      -webkit-transform: translate(1px, -1px) rotate(25deg);
      -moz-transform: translate(1px, -1px) rotate(25deg);
      -ms-transform: translate(1px, -1px) rotate(25deg);
      transform: translate(1px, -1px) rotate(25deg); }
    .paginate.left:active i:last-child {
      -webkit-transform: translate(1px, 1px) rotate(-25deg);
      -moz-transform: translate(1px, 1px) rotate(-25deg);
      -ms-transform: translate(1px, 1px) rotate(-25deg);
      transform: translate(1px, 1px) rotate(-25deg); }
    .paginate.left[data-state=disabled] i:first-child {
      -webkit-transform: translate(-5px, 0) rotate(0deg);
      -moz-transform: translate(-5px, 0) rotate(0deg);
      -ms-transform: translate(-5px, 0) rotate(0deg);
      transform: translate(-5px, 0) rotate(0deg); }
    .paginate.left[data-state=disabled] i:last-child {
      -webkit-transform: translate(-5px, 0) rotate(0deg);
      -moz-transform: translate(-5px, 0) rotate(0deg);
      -ms-transform: translate(-5px, 0) rotate(0deg);
      transform: translate(-5px, 0) rotate(0deg); }
    .paginate.left[data-state=disabled]:hover i:first-child {
      -webkit-transform: translate(-5px, 0) rotate(0deg);
      -moz-transform: translate(-5px, 0) rotate(0deg);
      -ms-transform: translate(-5px, 0) rotate(0deg);
      transform: translate(-5px, 0) rotate(0deg); }
    .paginate.left[data-state=disabled]:hover i:last-child {
      -webkit-transform: translate(-5px, 0) rotate(0deg);
      -moz-transform: translate(-5px, 0) rotate(0deg);
      -ms-transform: translate(-5px, 0) rotate(0deg);
      transform: translate(-5px, 0) rotate(0deg); }
  .paginate.right {
    left: 94%; }
    .paginate.right i {
      -webkit-transform-origin: 100% 50%;
      -moz-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
      transform-origin: 100% 50%; }
    .paginate.right i:first-child {
      -webkit-transform: translate(0, 1px) rotate(40deg);
      -moz-transform: translate(0, 1px) rotate(40deg);
      -ms-transform: translate(0, 1px) rotate(40deg);
      transform: translate(0, 1px) rotate(40deg); }
    .paginate.right i:last-child {
      -webkit-transform: translate(0, -1px) rotate(-40deg);
      -moz-transform: translate(0, -1px) rotate(-40deg);
      -ms-transform: translate(0, -1px) rotate(-40deg);
      transform: translate(0, -1px) rotate(-40deg); }
    .paginate.right:hover i:first-child {
      -webkit-transform: translate(0, 1px) rotate(30deg);
      -moz-transform: translate(0, 1px) rotate(30deg);
      -ms-transform: translate(0, 1px) rotate(30deg);
      transform: translate(0, 1px) rotate(30deg); }
    .paginate.right:hover i:last-child {
      -webkit-transform: translate(0, -1px) rotate(-30deg);
      -moz-transform: translate(0, -1px) rotate(-30deg);
      -ms-transform: translate(0, -1px) rotate(-30deg);
      transform: translate(0, -1px) rotate(-30deg); }
    .paginate.right:active i:first-child {
      -webkit-transform: translate(1px, 1px) rotate(25deg);
      -moz-transform: translate(1px, 1px) rotate(25deg);
      -ms-transform: translate(1px, 1px) rotate(25deg);
      transform: translate(1px, 1px) rotate(25deg); }
    .paginate.right:active i:last-child {
      -webkit-transform: translate(1px, -1px) rotate(-25deg);
      -moz-transform: translate(1px, -1px) rotate(-25deg);
      -ms-transform: translate(1px, -1px) rotate(-25deg);
      transform: translate(1px, -1px) rotate(-25deg); }
    .paginate.right[data-state=disabled] i:first-child {
      -webkit-transform: translate(5px, 0) rotate(0deg);
      -moz-transform: translate(5px, 0) rotate(0deg);
      -ms-transform: translate(5px, 0) rotate(0deg);
      transform: translate(5px, 0) rotate(0deg); }
    .paginate.right[data-state=disabled] i:last-child {
      -webkit-transform: translate(5px, 0) rotate(0deg);
      -moz-transform: translate(5px, 0) rotate(0deg);
      -ms-transform: translate(5px, 0) rotate(0deg);
      transform: translate(5px, 0) rotate(0deg); }
    .paginate.right[data-state=disabled]:hover i:first-child {
      -webkit-transform: translate(5px, 0) rotate(0deg);
      -moz-transform: translate(5px, 0) rotate(0deg);
      -ms-transform: translate(5px, 0) rotate(0deg);
      transform: translate(5px, 0) rotate(0deg); }
    .paginate.right[data-state=disabled]:hover i:last-child {
      -webkit-transform: translate(5px, 0) rotate(0deg);
      -moz-transform: translate(5px, 0) rotate(0deg);
      -ms-transform: translate(5px, 0) rotate(0deg);
      transform: translate(5px, 0) rotate(0deg); }
  .paginate[data-state=disabled] {
    opacity: 0.3;
    cursor: default; }

.counter {
  text-align: center;
  position: absolute;
  width: 100%;
  /*top: 50%;*/
  margin-top: -15px;
  font-size: 30px;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
  color: #fff; }