/* ----------------------------------------------
 * Generated by Animista on 2021-6-3 11:7:52
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */


.kenburns-top {
  -webkit-animation: kenburns-top 5s ease-out both;
          animation: kenburns-top 5s ease-out both;
}


@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}

/**
 * ----------------------------------------
 * animation kenburns-bottom
 * ----------------------------------------
 */


.kenburns-bottom {
  -webkit-animation: kenburns-bottom 5s ease-out both;
          animation: kenburns-bottom 5s ease-out both;
}


@-webkit-keyframes kenburns-bottom {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 84%;
            transform-origin: 50% 84%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(15px);
            transform: scale(1.25) translateY(15px);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
@keyframes kenburns-bottom {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 84%;
            transform-origin: 50% 84%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(15px);
            transform: scale(1.25) translateY(15px);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}



/*Color Change*/


/* ----------------------------------------------
 * Generated by Animista on 2021-6-3 11:17:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation color-change-2x
 * ----------------------------------------
 */

.color-change-2x {
  -webkit-animation: color-change-2x 2s linear infinite alternate both;
          animation: color-change-2x 2s linear infinite alternate both;
}

@-webkit-keyframes color-change-2x {
  0% {
    background: #19dcea;
  }
  100% {
    background: #b22cff;
  }
}
@keyframes color-change-2x {
  0% {
    background: #19dcea;
  }
  100% {
    background: #b22cff;
  }
}

/**
 * ----------------------------------------
 * animation color-change-3x
 * ----------------------------------------
 */

.color-change-3x {
  -webkit-animation: color-change-3x 4s linear infinite alternate both;
          animation: color-change-3x 4s linear infinite alternate both;
}

@-webkit-keyframes color-change-3x {
  0% {
    background: #19dcea;
  }
  50% {
    background: #b22cff;
  }
  100% {
    background: #ea2222;
  }
}
@keyframes color-change-3x {
  0% {
    background: #19dcea;
  }
  50% {
    background: #b22cff;
  }
  100% {
    background: #ea2222;
  }
}

/**
 * ----------------------------------------
 * animation color-change-4x
 * ----------------------------------------
 */

.color-change-4x {
  -webkit-animation: color-change-4x 6s linear infinite alternate both;
          animation: color-change-4x 6s linear infinite alternate both;
}

@-webkit-keyframes color-change-4x {
  0% {
    background: #19dcea;
  }
  33.3333% {
    background: #b22cff;
  }
  66.666% {
    background: #ea2222;
  }
  100% {
    background: #f5be10;
  }
}
@keyframes color-change-4x {
  0% {
    background: #19dcea;
  }
  33.3333% {
    background: #b22cff;
  }
  66.666% {
    background: #ea2222;
  }
  100% {
    background: #f5be10;
  }
}

/**
 * ----------------------------------------
 * animation color-change-5x
 * ----------------------------------------
 */


.color-change-5x {
  -webkit-animation: color-change-5x 8s linear infinite alternate both;
          animation: color-change-5x 8s linear infinite alternate both;
}

@-webkit-keyframes color-change-5x {
  0% {
    background: #19dcea;
  }
  25% {
    background: #b22cff;
  }
  50% {
    background: #ea2222;
  }
  75% {
    background: #f5be10;
  }
  100% {
    background: #3bd80d;
  }
}
@keyframes color-change-5x {
  0% {
    background: #19dcea;
  }
  25% {
    background: #b22cff;
  }
  50% {
    background: #ea2222;
  }
  75% {
    background: #f5be10;
  }
  100% {
    background: #3bd80d;
  }
}



/*BG pan*/

/* ----------------------------------------------
 * Generated by Animista on 2021-6-3 11:44:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bg-pan-left
 * ----------------------------------------
 */

.bg-pan-left {
  -webkit-animation: bg-pan-left 8s both;
          animation: bg-pan-left 8s both;
}


@-webkit-keyframes bg-pan-left {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bg-pan-left {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/**
 * ----------------------------------------
 * animation bg-pan-right
 * ----------------------------------------
 */

.bg-pan-right {
  -webkit-animation: bg-pan-right 8s both;
          animation: bg-pan-right 8s both;
}

@-webkit-keyframes bg-pan-right {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes bg-pan-right {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/**
 * ----------------------------------------
 * animation bg-pan-top
 * ----------------------------------------
 */

.bg-pan-top {
  -webkit-animation: bg-pan-top 8s both;
          animation: bg-pan-top 8s both;
}

@-webkit-keyframes bg-pan-top {
  0% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}
@keyframes bg-pan-top {
  0% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}

/**
 * ----------------------------------------
 * animation bg-pan-bottom
 * ----------------------------------------
 */


.bg-pan-bottom {
  -webkit-animation: bg-pan-bottom 8s both;
          animation: bg-pan-bottom 8s both;
}

@-webkit-keyframes bg-pan-bottom {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 100%;
  }
}
@keyframes bg-pan-bottom {
  0% {
    background-position: 50% 0%;
  }
  100% {
    background-position: 50% 100%;
  }
}

/** The ones with image
 * ----------------------------------------
 * animation bg-pan-tr 
 * ----------------------------------------
 */

.bg-pan-tr {
  -webkit-animation: bg-pan-tr 8s both;
          animation: bg-pan-tr 8s both;
}

@-webkit-keyframes bg-pan-tr {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}
@keyframes bg-pan-tr {
  0% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 100% 0%;
  }
}

/**
 * ----------------------------------------
 * animation bg-pan-br
 * ----------------------------------------
 */


.bg-pan-br {
  -webkit-animation: bg-pan-br 8s both;
          animation: bg-pan-br 8s both;
}

@-webkit-keyframes bg-pan-br {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
@keyframes bg-pan-br {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/**
 * ----------------------------------------
 * animation bg-pan-bl
 * ----------------------------------------
 */


.bg-pan-bl {
  -webkit-animation: bg-pan-bl 8s both;
          animation: bg-pan-bl 8s both;
}

@-webkit-keyframes bg-pan-bl {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}
@keyframes bg-pan-bl {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

/**
 * ----------------------------------------
 * animation bg-pan-tl
 * ----------------------------------------
 */

.bg-pan-tl {
  -webkit-animation: bg-pan-tl 8s both;
          animation: bg-pan-tl 8s both;
}
 
@-webkit-keyframes bg-pan-tl {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes bg-pan-tl {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}