@-webkit-keyframes pix_rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pix_rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.pix-rotating {
  -webkit-animation: pix_rotating 50s linear infinite;
          animation: pix_rotating 50s linear infinite;
}
.pix-rotating {
  -webkit-animation-name: pix_rotating;
          animation-name: pix_rotating;
  -webkit-animation-duration: 50s;
          animation-duration: 50s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  will-change: transform;
}

@-webkit-keyframes pix_rotating_inverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes pix_rotating_inverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.pix-rotating-inverse {
    will-change: transform;
  -webkit-animation-name: pix_rotating_inverse;
          animation-name: pix_rotating_inverse;
  -webkit-animation-duration: 50s;
          animation-duration: 50s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.pix-rotating-inverse, .pix-rotating {
    &.pix-duration-fast {
        -webkit-animation-duration: 20s;
                animation-duration: 20s;
    }
    &.pix-duration-md {
        -webkit-animation-duration: 50s;
                animation-duration: 50s;
    }
    &.pix-duration-slow {
        -webkit-animation-duration: 80s;
                animation-duration: 80s;
    }
}

@-webkit-keyframes pix_bounce_sm {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(10%);
  }
  100% {
      transform: translateY(0);
  }
}

@keyframes pix_bounce_sm {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(10%);
  }
  100% {
      transform: translateY(0);
  }
}
@-webkit-keyframes pix_bounce_md {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(20%);
  }
  100% {
      transform: translateY(0);
  }
}
@keyframes pix_bounce_md {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(20%);
  }
  100% {
      transform: translateY(0);
  }
}
@-webkit-keyframes pix_bounce_lg {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(40%);
  }
  100% {
      transform: translateY(0);
  }
}
@keyframes pix_bounce_lg {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(40%);
  }
  100% {
      transform: translateY(0);
  }
}

.pix-bounce-fast {
    will-change: transform;
  -webkit-animation: pix_bounce 6s ease infinite;
          animation: pix_bounce 6s ease infinite;
}

.pix-bounce {
    will-change: transform;
  -webkit-animation: pix_bounce 3s ease-in-out infinite;
          animation: pix_bounce 3s ease-in-out infinite;
}

.pix-bounce-sm {
    will-change: transform;
  -webkit-animation-name: pix_bounce_sm;
          animation-name: pix_bounce_sm;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.pix-bounce-md {
    will-change: transform;
  -webkit-animation-name: pix_bounce_md;
          animation-name: pix_bounce_md;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.pix-bounce-lg {
    will-change: transform;
  -webkit-animation-name: pix_bounce_lg;
          animation-name: pix_bounce_lg;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}


@-webkit-keyframes pix_fade {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.6;
  }
  100% {
      opacity: 1;
  }
}


@keyframes pix_fade {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.6;
  }
  100% {
      opacity: 1;
  }
}
@-webkit-keyframes pix_scale_sm {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}
@keyframes pix_scale_sm {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}
@-webkit-keyframes pix_scale_md {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.4);
  }
  100% {
      transform: scale(1);
  }
}
@keyframes pix_scale_md {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.4);
  }
  100% {
      transform: scale(1);
  }
}
@-webkit-keyframes pix_scale_lg {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.8);
  }
  100% {
      transform: scale(1);
  }
}
@keyframes pix_scale_lg {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.8);
  }
  100% {
      transform: scale(1);
  }
}
.pix-scale-sm {
    will-change: transform;
  -webkit-animation-name: pix_scale_sm;
          animation-name: pix_scale_sm;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.pix-scale-md {
    will-change: transform;
  -webkit-animation-name: pix_scale_md;
          animation-name: pix_scale_md;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.pix-scale-lg {
    will-change: transform;
  -webkit-animation-name: pix_scale_lg;
          animation-name: pix_scale_lg;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.pix-fade {
    will-change: transform;
  -webkit-animation-name: pix_fade;
          animation-name: pix_fade;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}


.pix-bounce-sm, .pix-bounce-md, .pix-bounce-lg,
.pix-scale-sm, .pix-scale-md, .pix-scale-lg, .pix-fade {
    &.pix-duration-fast {
        -webkit-animation-duration: 2s;
                animation-duration: 2s;
    }
    &.pix-duration-md {
        -webkit-animation-duration: 5s;
                animation-duration: 5s;
    }
    &.pix-duration-slow {
        -webkit-animation-duration: 10s;
                animation-duration: 10s;
    }
}

.pix-bg-slide-left {
    -webkit-animation-name: pix_scroll_left;
            animation-name: pix_scroll_left;
}
.pix-bg-slide-right {
    -webkit-animation-name: pix_scroll_right;
            animation-name: pix_scroll_right;
}
.pix-bg-slide-up {
    -webkit-animation-name: pix_scroll_up;
            animation-name: pix_scroll_up;
}
.pix-bg-slide-down {
    -webkit-animation-name: pix_scroll_down;
            animation-name: pix_scroll_down;
}
.pix-bg-slide-left , .pix-bg-slide-right,
.pix-bg-slide-up, .pix-bg-slide-down {
    background-repeat: repeat;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    background-size: cover;
    will-change: transform;
    &.pix-duration-fast {
        -webkit-animation-duration: 15s;
                animation-duration: 15s;
    }
    &.pix-duration-md {
        -webkit-animation-duration: 30s;
                animation-duration: 30s;
    }
    &.pix-duration-slow {
        -webkit-animation-duration: 60s;
                animation-duration: 60s;
    }
}
@-webkit-keyframes pix_scroll_left {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: -300vw 0;
    }
}
@keyframes pix_scroll_left {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: -300vw 0;
    }
}
@-webkit-keyframes pix_scroll_right {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 300vw 0;
    }
}
@keyframes pix_scroll_right {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 300vw 0;
    }
}
@-webkit-keyframes pix_scroll_up {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 0 -300vw;
    }
}
@keyframes pix_scroll_up {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 0 -300vw;
    }
}
@-webkit-keyframes pix_scroll_down {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 0 300vw;
    }
}
@keyframes pix_scroll_down {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 0 300vw;
    }
}
