/*
* NOTE: timing functions are not necessary to account for if the animation is short.
* e.g. ease-in, ease-out, ease-in-out, etc.
*
*/


/* animate keyframes (style transitions) */
.anim-opacity {
  -webkit-transition-property: opacity;
  -webkit-transition-duration: var(--anim-opacity-duration, 300ms);
  -webkit-transition-timing-function: var(--anim-opacity-timing-function, ease-out);

  -moz-transition-property: opacity;
  -moz-transition-duration: var(--anim-opacity-duration, 300ms);
  -moz-transition-timing-function: var(--anim-opacity-timing-function, ease-out);

  transition-property: opacity;
  transition-duration: var(--anim-opacity-duration, 300ms);
  transition-timing-function: var(--anim-opacity-timing-function, ease-out);
}

.anim-width {
  -webkit-transition-property: width;
  -webkit-transition-duration: var(--anim-width-duration, 300ms);
  -webkit-transition-timing-function: var(--anim-width-timing-function, ease-out);

  -moz-transition-property: width;
  -moz-transition-duration: var(--anim-width-duration, 300ms);
  -moz-transition-timing-function: var(--anim-width-timing-function, ease-out);

  transition-property: width;
  transition-duration: var(--anim-width-duration, 300ms);
  transition-timing-function: var(--anim-width-timing-function, ease-out);
}

.anim-height {
  -webkit-transition-property: height;
  -webkit-transition-duration: var(--anim-height-duration, 300ms);
  -webkit-transition-timing-function: var(--anim-height-timing-function, ease-out);

  -moz-transition-property: height;
  -moz-transition-duration: var(--anim-height-duration, 300ms);
  -moz-transition-timing-function: var(--anim-height-timing-function, ease-out);

  transition-property: height;
  transition-duration: var(--anim-height-duration, 300ms);
  transition-timing-function: var(--anim-height-timing-function, ease-out);
}

.anim-color {
  -webkit-transition-property: color;
  -webkit-transition-duration: var(--anim-color-duration, 300ms);
  -webkit-transition-timing-function: var(--anim-color-timing-function, ease-out);

  -moz-transition-property: color;
  -moz-transition-duration: var(--anim-color-duration, 300ms);
  -moz-transition-timing-function: var(--anim-color-timing-function, ease-out);

  transition-property: color;
  transition-duration: var(--anim-color-duration, 300ms);
  transition-timing-function: var(--anim-color-timing-function, ease-out);
}

.anim-background-color {
  -webkit-transition-property: background-color;
  -webkit-transition-duration: var(--anim-background-color-duration, 300ms);
  -webkit-transition-timing-function: var(--anim-background-color-timing-function, ease-out);

  -moz-transition-property: background-color;
  -moz-transition-duration: var(--anim-background-color-duration, 300ms);
  -moz-transition-timing-function: var(--anim-background-color-timing-function, ease-out);

  transition-property: background-color;
  transition-duration: var(--anim-background-color-duration, 300ms);
  transition-timing-function: var(--anim-background-color-timing-function, ease-out);
}

.anim-background-color-pulse
{
    background: linear-gradient(
      var(--anim-gradient-angle, 90deg), 
      var(--anim-gradient-color-1, #aaaaaa), 
      var(--anim-gradient-color-2, #dddddd),
      var(--anim-gradient-color-3, #aaaaaa));
    background-size: 200% 200%;
    animation-name: keyframes-background-color-pulse;
    animation-duration: var(--anim-duration, 1200ms);
    animation-iteration-count: var(--animation-iteration-count, infinite);
}

.anim-torque-clockwise {
  -webkit-transition: all 0.9s cubic-bezier(0, 0, 0, 3.105);
  -moz-transition: all 0.9s cubic-bezier(0, 0, 0, 3.105);
  transition: all 0.9s cubic-bezier(0, 0, 0, 3.105);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}

/* hover */
.hover-circle-fill.hovered-all,
.hover-circle-fill.hovered-circle-fill,
.hover-circle-fill {
  background-image: radial-gradient(circle, #3498db 100%,transparent 1%);
  background-repeat: no-repeat;
  background-position: center;
  background-clip: border-box;
}

.hover-darken.hovered-all,
.hover-darken.hovered-darken,
.hover-darken:hover {
  filter: brightness(var(--darken-amount, -50%));
}

.hover-bold.hovered-all,
.hover-bold.hovered-bold,
.hover-bold:hover {
  font-weight: bold;
}

.hover-underline.hovered-all,
.hover-underline.hovered-underline,
.hover-underline:hover {
  text-decoration: underline;
}

.hover-opacity.hovered-all,
.hover-opacity.hovered-opacity,
.hover-opacity:hover {
  opacity: var(--hover-opacity, 0.6);
  transition-duration: var(--hover-opacity-duration, 300ms);
}

.hover-background-color.hovered-all,
.hover-background-color.hovered-background-color,
.hover-background-color:hover {
  background-color: var(--hover-background-color-color, #ddd) !important;
  transition-duration: var(--hover-background-color-duration, 300ms);
}

.hover-color.hovered-all,
.hover-color.hovered-background-color,
.hover-color:hover {
  color: var(--hover-color, #ddd) !important; /* colors are set on-the-fly a lot, via the style attribute */
  transition-duration: var(--hover-color-duration, 300ms);
  transition-timing-function: ease-out;
}

.hover-saturate.hovered-all,
.hover-saturate.hovered-saturate,
.hover-saturate:hover {
  filter: saturate(var(--hover-saturate, 5));
  transition-duration: var(--hover-saturate-duration, 300ms);
  transition-timing-function: ease-out;
}

.hover-children-background-color > div:not([class~="noanim"]):hover,
.hover-children-background-color > span:not([class~="noanim"]):hover,
.hover-children-background-color > a:not([class~="noanim"]):hover,
.hover-children-background-color > p:not([class~="noanim"]):hover {
  background-color: var(--hover-background-color, #ddd);
  transition-duration: var(--hover-background-color-duration, 300ms);
}

.hover-anim.hovered-all,
.hover-anim.hovered-anim,
.hover-anim:hover {
  animation-name: --keyframe-name;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-rotate.hovered-all,
.hover-rotate.hovered-rotate,
.hover-rotate:hover {
  animation-name: keyframes-rotate;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-background-color-to-color.hovered-all,
.hover-background-color-to-color.hovered-background-color-to-color,
.hover-background-color-to-color:hover {
  animation-name: keyframes-background-color-to-color;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-duration: 500ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-torque.hovered-all,
.hover-torque.hovered-torque,
.hover-torque:hover {
  -webkit-transition: all 0.9s cubic-bezier(0, 0, 0, 3.105);
  -moz-transition: all 0.9s cubic-bezier(0, 0, 0, 3.105);
  transition: all 0.9s cubic-bezier(0, 0, 0, 3.105);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}

.hover-opacity-pulse.hovered-all,
.hover-opacity-pulse.hovered-opacity-pulse,
.hover-opacity-pulse:hover {
  animation-name: keyframes-opacity-pulse;
  animation-direction: normal;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-zoom.hovered-all,
.hover-zoom.hovered-zoom,
.hover-zoom:hover {
  -webkit-transform: scale(var(--zoom-scale-x-to, 1.1), var(--zoom-scale-y-to, 1.1));
  -moz-transform: scale(var(--zoom-scale-x-to, 1.1), var(--zoom-scale-y-to, 1.1));
  transform: scale(var(--zoom-scale-x-to, 1.1), var(--zoom-scale-y-to, 1.1));
}

.hover-rotate-x.hovered-all,
.hover-rotate-x.hovered-rotate-x,
.hover-rotate-x:hover {
  transform: rotateX(var(--rotate-x,90deg));
}

.hover-rotate-y.hovered-all,
.hover-rotate-y.hovered-rotate-y,
.hover-rotate-y:hover {
  transform: rotateY(var(--hover-rotate-y,90deg));
}

.hover-rotate-z.hovered-all,
.hover-rotate-z.hovered-rotate-z,
.hover-rotate-z:hover {
  transform: rotateZ(var(--hover-rotate-z,90deg));
}

.hover-size-pulse.hovered-all,
.hover-size-pulse.hovered-size-pulse,
.hover-size-pulse:hover {
  animation-name: keyframes-size-pulse;
  animation-direction: normal;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-pulse.hovered-all,
.hover-pulse.hovered-pulse,
.hover-pulse:hover {
  animation-name: keyframes-size-pulse;
  animation-direction: normal;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-size-wobble.hovered-all,
.hover-size-wobble.hovered-size-wobble,
.hover-size-wobble:hover {
  animation-name: keyframes-size-wobble;
  animation-direction: normal;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-wobble.hovered-all,
.hover-wobble.hovered-wobble,
.hover-wobble:hover {
  animation-name: keyframes-size-wobble;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

.hover-font-wobble.hovered-all,
.hover-font-wobble.hovered-font-wobble,
.hover-font-wobble:hover {
  animation-name: keyframes-font-wobble;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

.hover-bounce-y.hovered-all,
.hover-bounce-y.hovered-bounce-y,
.hover-bounce-y:hover {
  animation-name: keyframes-bounce-y;
  animation-direction: normal;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-bounce-x.hovered-all,
.hover-bounce-x.hovered-bounce-x,
.hover-bounce-x:hover {
  animation-name: keyframes-bounce-x;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.hover-slide-x.hovered-all,
.hover-slide-x.hovered-slide-x,
.hover-slide-x:hover {
  animation-name: keyframes-slide-x;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
}

.hover-slide-y.hovered-all,
.hover-slide-y.hovered-slide-y,
.hover-slide-y:hover {
  animation-name: keyframes-slide-y;
  animation-direction: normal;
  animation-duration: 1.5s;
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
}

.hover-circle-fill.hovered-all,
.hover-circle-fill.hovered-circle-fill,
.hover-circle-fill:hover {
  animation-name: keyframes-circle-fill;
  animation-fill-mode: forwards;
  animation-direction: normal;
  animation-duration: 0.125s;
  animation-iteration-count: 1;
  animation-delay: 0.0s;
  -animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
  /* background-image: radial-gradient(circle, #3498db 99%,transparent 100%); */
}

.hover-border.hovered-all,
.hover-border.hovered-border,
.hover-border:hover {
  border-top-color: var(--hover-border-color, var(--hover-border-top-color,#ddd)) !important;
  border-bottom-color: var(--hover-border-color, var(--hover-border-bottom-color,#ddd)) !important;
  border-left-color: var(--hover-border-color, var(--hover-border-left-color,#ddd)) !important;
  border-right-color: var(--hover-border-color, var(--hover-border-right-color,#ddd)) !important;
  border-top-width: var(--hover-border-width, var(--hover-border-top-width, 2px)) !important;
  border-bottom-width: var(--hover-border-width, var(--hover-border-bottom-width, 2px)) !important;
  border-left-width: var(--hover-border-width, var(--hover-border-left-width, 2px)) !important;
  border-right-width: var(--hover-border-width, var(--hover-border-right-width, 2px)) !important;
  border-top-style: var(--hover-border-style, var(--hover-border-top-style, solid)) !important;
  border-bottom-style: var(--hover-border-style, var(--hover-border-bottom-style, solid)) !important;
  border-left-style: var(--hover-border-style, var(--hover-border-left-style, solid)) !important;
  border-right-style: var(--hover-border-style, var(--hover-border-right-style, solid)) !important;
  transition-duration: var(--hover-border-duration, 300ms);
  transition-timing-function: ease-out;
}

.hover-outline.hovered-all,
.hover-outline.hovered-outline,
.hover-outline:hover {
  outline-color: var(--hover-outline-color, var(--hover-outline-default-color,#ddd)) !important;
  outline-width: var(--hover-outline-width, var(--hover-outline-default-width, 2px)) !important;
  outline-style: var(--hover-outline-style, var(--hover-outline-default-style, solid)) !important;
  transition-duration: var(--hover-outline-duration, 300ms);
  transition-timing-function: ease-out;
}

/* animation */
.anim-width.run,
.anim-width.run-anim-width {
  animation-name: keyframes-width;
  animation-direction: normal;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-delay: 0.0s;
  animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
}

.anim-width-reverse.run,
.anim-width-reverse.run-width-reverse {
  animation-name: keyframes-width;
  animation-direction: alternate;
  animation-duration: 5.5s;
  animation-fill-mode: backwards;
  animation-iteration-count: 2;
  animation-delay: -1.5s;
  animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
}

.anim.run,
.anim.run-anim {
  --animation-name: keyframes-slide-x;
  animation-name: --animation-name;
  animation-direction: normal;
  animation-duration: 0.25s;
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
}

.anim-rotate.run,
.anim-rotate.run-anim-rotate {
  animation-name: keyframes-rotate;
  animation-direction: normal;
  animation-duration: 750ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}

.anim-background-color-to-color.run,
.anim-background-color-to-color.run-anim-background-color-to-color {
  animation-name: keyframes-background-color-to-color;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-background-color-to-color-duration, 750ms);
  animation-timing-function: var(--anim-background-color-to-color-timing-function, ease-out);
  animation-iteration-count: 1;
}

.anim-background-color.run,
.anim-background-color.run-anim-background-color {
  background-color: var(--anim-background-color-color, #ddd);
  transition-duration: var(--anim-background-color-duration, 300ms);
}

.anim-background-color-important.run,
.anim-background-color-important.run-anim-background-color {
  background-color: var(--anim-background-color-color, #ddd) !important;
  transition-duration: var(--anim-background-color-duration, 300ms);
}

.anim-torque.run,
.anim-torque.run-anim-torque {
  -webkit-transform: rotate(540deg);
  -moz-transform: rotate(540deg);
  transform: rotate(540deg);
}

.anim-fidget-rotate.run,
.anim-fidget-rotate.run-anim-fidget-rotate {
  animation-name: keyframes-fidget-rotate;
  animation-direction: normal;
  animation-duration: 7.5s;
  animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
  animation-delay: 7s;
  animation-iteration-count: infinite;
}

.anim-opacity-in.run,
.anim-opacity-in.run-anim-opacity-in {
  animation-name: keyframes-opacity-in;
  animation-direction: normal;
  animation-duration: 1s;
}

.anim-opacity-out.run,
.anim-opacity-out.run-anim-opacity-out {
  animation-name: keyframes-opacity-out;
  animation-direction: normal;
  animation-duration: 1s;
}

.anim-opacity-pulse.run,
.anim-opacity-pulse.run-anim-opacity-pulse {
  animation-name: keyframes-opacity-pulse;
  animation-direction: normal;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.anim-opacity-in-out.run,
.anim-opacity-in-out.run-anim-opacity-in-out {
  animation-name: keyframes-opacity-in-out;
  animation-direction: normal;
  animation-duration: var(--anim-duration, 5000ms);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.anim-size-pulse.run {
  animation-name: keyframes-size-pulse;
  animation-direction: normal;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.anim-fade-in.run {
  --opacity-start: 0;
  animation-name: keyframes-opacity;
  animation-direction: normal;
  animation-duration: var(--anim-fade-in-duration, var(--anim-duration, 1s));
}

.anim-fade-out.run {
  animation-name: keyframes-opacity-out;
  animation-direction: normal;
  animation-duration: var(--anim-fade-out-duration, var(--anim-duration, 1s));
}

.anim-pulse.run {
  animation-name: keyframes-size-pulse;
  animation-direction: normal;
  animation-duration: var(--anim-pulse-duration, var(--anim-duration, 0.75s));
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}

.anim-size-opacity-pulse.run {
  animation-name: keyframes-size-opacity-pulse;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-size-opacity-pulse-duration, var(--anim-duration, 0.7s));
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
}

.anim-bounce-y.run {
  animation-name: keyframes-bounce-y;
  animation-direction: normal;
  animation-duration: var(--anim-bounce-y-duration, var(--anim-duration, 3s));
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
}

.anim-bounce-x.run {
  animation-name: keyframes-bounce-x;
  animation-direction: normal;
  animation-duration: var(--anim-bounce-x-duration, var(--anim-duration, 3s));
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
}

.anim-bounce-down.run {
  --bounce-y-direction: 1;
  animation-name: keyframes-bounce-y;
  animation-direction: normal;
  animation-duration: var(--anim-bounce-down-duration, var(--anim-duration, 3s));
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-timing-function: ease-out;
}

.anim-bounce-up.run {
  --bounce-y-direction: -1;
  animation-name: keyframes-bounce-y;
  animation-direction: normal;
  animation-duration: var(--anim-bounce-up-duration, var(--anim-duration, 3s));
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
}

.anim-bounce-left.run {
  --bounce-x-direction: -1;
  animation-name: keyframes-bounce-x;
  animation-direction: normal;
  animation-duration: var(--anim-bounce-left-duration, var(--anim-duration, 3s));
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
}

.anim-bounce-right.run {
  --bounce-x-direction: 1;
  animation-name: keyframes-bounce-x;
  animation-direction: normal;
  animation-duration: var(--anim-bounce-right-duration, var(--anim-duration, 3s));
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
}

.anim-dart-y.run {
  margin-top: 0rem !important;
}

.anim-dart-x.run {
  margin-left: 0rem !important;
}

.anim-slide-down.run {
  --slide-y-direction: 1;
  animation-name: keyframes-slide-y;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-slide-down-duration, var(--anim-duration, 0.25s));
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: ease-out;
}

.anim-slide-up.run {
  --slide-y-direction: -1;
  animation-name: keyframes-slide-y;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-slide-up-duration, var(--anim-duration, 0.25s));
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
}

.anim-slide-left.run {
  --slide-x-direction: 1;
  animation-name: keyframes-slide-x;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-slide-left-duration, var(--anim-duration, 0.25s));
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
  -animation-timing-function: ease-in-out;
}

.anim-slide-right.run {
  --slide-x-direction: -1;
  animation-name: keyframes-slide-x;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-slide-right, var(--anim-duration, 0.25s));
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
  -animation-timing-function: ease-in-out;
}

.anim-slide-left-fade-in.run {
  --slide-x-direction: 1;
  animation: keyframes-slide-x var(--anim-slide-left-duration, var(--anim-duration, 0.25s)) forwards, keyframes-opacity-in var(--anim-opacity-duration, var(--anim-duration, 1s)) forwards;
  /* -webkit-animation: keyframes-slide-x-opacity-in 5s forwards, keyframes-opacity-out 5s forwards; */
  /* animation-name: keyframes-slide-x-opacity-in; */
  /* animation-direction: normal;
  /* animation-fill-mode: forwards;
  animation-duration: var(--anim-slide-left-duration, var(--anim-duration, 0.25s)); */
  /* animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: cubic-bezier(0.8,-0.27,0.025,1.105);
  -animation-timing-function: ease-in-out; */
}

.anim-slide-right-fade-in.run {
  --slide-x-direction: -1;
  animation: keyframes-slide-x var(--anim-slide-right-duration, var(--anim-duration, 0.25s)) forwards, keyframes-opacity-in var(--anim-opacity-duration, var(--anim-duration, 1s)) forwards;
}

.anim-expand.run {
  animation-name: keyframes-expand;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
}

.anim-flip-and-back-x.run {
  animation-name: keyframes-flip-and-back-x;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-duration, 1200ms);
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
}

.anim-flip-and-back-y.run {
  animation-name: keyframes-flip-and-back-y;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-duration, 1200ms);
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
} 

.anim-flip-and-back-z.run {
  animation-name: keyframes-flip-and-back-z;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-duration: var(--anim-duration, 1200ms);
  animation-iteration-count: 1;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
} 

/* animate keyframes */

@keyframes keyframes-rotate {
  0% {
    -ms-transform: rotate(var(--rotate-start, 0deg));
    -webkit-transform: rotate(var(--rotate-start, 0deg));
    transform: rotate(var(--rotate-start, 0deg));
  }

  100% {
    -ms-transform: rotate(var(--rotate-end, 360deg));
    -webkit-transform: rotate(var(--rotate-end, 360deg));
    transform: rotate(var(--rotate-end, 360deg));
  }
}

@keyframes keyframes-background-color-to-color {
  0% {
    background-color: var(--background-color-start, #ccc);
  }

  100% {
    background-color: var(--background-color-end, initial);
  }
}

@keyframes keyframes-bounce-y {
  30% {
    -webkit-transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * 1.8));
    -moz-transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * 1.8));
    transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * 1.8));
  }

  40% {
    -webkit-transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * -0.8));
    -moz-transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * -0.8));
    transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * -0.8));
  }

  45% {
    -webkit-transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * 0.1));
    -moz-transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * 0.1));
    transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * 0.1));
  }

  50% {
    -webkit-transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * -0.1));
    -moz-transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * -0.1));
    transform: translate(0px, calc(var(--bounce-y-start, var(--default-bounce-y-start, 30px)) * var(--bounce-y-direction, 1) * -0.1));
  }

  55% {
    -webkit-transform: translate(0px, calc(var(--bounce-y-start, 0px) * 0));
    -moz-transform: translate(0px, calc(var(--bounce-y-start, 0px) * 0));
    transform: translate(0px, calc(var(--bounce-y-start, 0px) * 0));
  }
}

@keyframes keyframes-bounce-x {
  30% {
    -webkit-transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * 1.8), 0px);
    -moz-transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * 1.8), 0px);
    transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * 1.8), 0px);
  }

  40% {
    -webkit-transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * -0.8), 0px);
    -moz-transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * -0.8), 0px);
    transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * -0.8), 0px);
  }

  45% {
    -webkit-transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * 0.1), 0px);
    -moz-transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * 0.1), 0px);
    transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * 0.1), 0px);
  }

  50% {
    -webkit-transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * -0.1), 0px);
    -moz-transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * -0.1), 0px);
    transform: translate(calc(var(--bounce-x-start, var(--default-bounce-x-start, 30px)) * var(--bounce-x-direction, 1) * -0.1), 0px);
  }

  55% {
    -webkit-transform: translate(calc(var(--bounce-x-start, 0px) * 0), 0px);
    -moz-transform: translate(calc(var(--bounce-x-start, 0px) * 0), 0px);
    transform: translate(calc(var(--bounce-x-start, 0px) * 0), 0px);
  }
}

@keyframes keyframes-slide-x {
  0% {
    -webkit-transform: translate(calc(var(--slide-x-start, var(--default-slide-x-start, 0px)) * var(--slide-x-direction, 1) * 1.8), 0px);
    -moz-transform: translate(calc(var(--slide-x-start, var(--default-slide-x-start, 0px)) * var(--slide-x-direction, 1) * 1.8), 0px);
    transform: translate(calc(var(--slide-x-start, var(--default-slide-x-start, 0px)) * var(--slide-x-direction, 1) * 1.8), 0px);
  }

  100% {
    -webkit-transform: translate(calc(var(--slide-x-end, 60px) * var(--slide-x-direction, 1)), 0px);
    -moz-transform: translate(calc(var(--slide-x-end, 60px) * var(--slide-x-direction, 1)), 0px);
    transform: translate(calc(var(--slide-x-end, 60px) * var(--slide-x-direction, 1)), 0px);
  }
}

@keyframes keyframes-slide-y {
  0% {
    -webkit-transform: translate(0px, calc(var(--slide-y-start, var(--default-slide-y-start, 0px)) * var(--slide-y-direction, 1) * 1.8));
    -moz-transform: translate(0px, calc(var(--slide-y-start, var(--default-slide-y-start, 0px)) * var(--slide-y-direction, 1) * 1.8));
    transform: translate(0px, calc(var(--slide-y-start, var(--default-slide-y-start, 0px)) * var(--slide-y-direction, 1) * 1.8));
  }

  100% {
    -webkit-transform: translate(0px, calc(var(--slide-y-end, 60px) * var(--slide-y-direction, 1)));
    -moz-transform: translate(0px, calc(var(--slide-y-end, 60px) * var(--slide-y-direction, 1)));
    transform: translate(0px, calc(var(--slide-y-end, 60px) * var(--slide-y-direction, 1)));
  }
}

@keyframes keyframes-width {
  from {
    width: var(--width-start, 0rem);
  }

  to {
    width: var(--width-end, 5rem);
  }
}

@keyframes keyframes-opacity {
  from {
    opacity: var(--opacity-start, 0);
  }

  to {
    opacity: var(--opacity-end, 1);
  }
}

@keyframes keyframes-opacity-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes keyframes-opacity-out {
  from {
    opacity: 1;
    visibility: visible;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes keyframes-opacity-pulse {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 0.25;
  }

  75% {
    opacity: 0.75;
  }

  100% {
    opacity: 0.75;
  }
}

@keyframes keyframes-opacity-in-out {
  0% {
    opacity: var(--anim-opacity-start, 0);
  }

  50% {
    opacity: var(--anim-opacity-end, 1);
  }

  100% {
    opacity: var(--anim-opacity-start, 0);
  }
}

@keyframes keyframes-size-pulse {
  0% {
    -webkit-transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
    -moz-transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
    transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
  }

  25% {
    -webkit-transform: scale(1.0, 1.0);
    -moz-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }

  50% {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  100% {
    -webkit-transform: scale(1.0, 1.0);
    -moz-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
}

@keyframes keyframes-size-opacity-pulse {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
    -moz-transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
    transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
  }

  25% {
    opacity: 0.75;
    -webkit-transform: scale(1.0, 1.0);
    -moz-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }

  75% {
    opacity: 0.50;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  100% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(1.0, 1.0);
    -moz-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
}

@keyframes keyframes-size-wobble {
  0% {
    -webkit-transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
    -moz-transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
    transform: scale(calc(1.5 * var(--size-factor, 1)), calc(1.5 * var(--size-factor, 1)));
  }

  25% {
    -webkit-transform: scale(1.0, 1.0);
    -moz-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }

  50% {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  100% {
    -webkit-transform: scale(1.0, 1.0);
    -moz-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
}

@keyframes keyframes-font-wobble {
  0% {
    font-size: calc(1.5em * var(--size-factor, 1));
  }

  25% {
    font-size: 1em;
  }

  50% {
    font-size: 1.1em;
  }

  100% {
    font-size: 1em;
  }
}

@keyframes keyframes-circle-fill {
  0% {
    background-size: 0%;
  }

  100% {
    background-size: 100%;
  }
}

@keyframes keyframes-width {
  from {
      height: var(--anim-width-from, initial);
  }
  
  to {
      height: var(--anim-width-to, 90%);
  }
}

@keyframes keyframes-height {
  from {
      height: var(--anim-height-from, initial);
  }
  
  to {
      height: var(--anim-height-to, 16rem);
  }
}

@keyframes keyframes-expand {
  0% {
      -top: var(--anim-expand-top-from, initial);
      -bottom: var(--anim-expand-bottom-from, 250px);

      -left: var(--anim-expand-left-from, 10%);
      -right: var(--anim-expand-right-from, 100px);
  }
  
  100% {
      -top: var(--anim-expand-top-to, 250px);
      -bottom: var(--anim-expand-bottom-to, 250px);

      -left: var(--anim-expand-left-to, 90%);
      -right: var(--anim-expand-right-to, 90%);
  }
}

@keyframes keyframes-zoom {
  0% {
    -webkit-transform: scale(var(--zoom-scale-x-from, 1.0), var(--zoom-scale-y-from, 1.0));
    -moz-transform: scale(var(--zoom-scale-x-from, 1.0), var(--zoom-scale-y-from, 1.0));
    transform: scale(var(--zoom-scale-x-from, 1.0), var(--zoom-scale-y-from, 1.0));
  }

  100% {
    -webkit-transform: scale(var(--zoom-scale-x-to, 1.1), var(--zoom-scale-y-to, 1.1));
    -moz-transform: scale(var(--zoom-scale-x-to, 1.1), var(--zoom-scale-y-to, 1.1));
    transform: scale(var(--zoom-scale-x-to, 1.1), var(--zoom-scale-y-to, 1.1));
  }
}

@keyframes keyframes-fidget-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  33% {
    -webkit-transform: rotate(320deg);
    -moz-transform: rotate(320deg);
    transform: rotate(320deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes keyframes-flip-and-back-x {
  0% {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }

  50% {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }

  100% {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}

@keyframes keyframes-flip-and-back-y {
  0% {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  50% {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  100% {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes keyframes-flip-and-back-z {
  0% {
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  50% {
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@keyframes keyframes-background-color-pulse { 
  0%{background-position:91% 100%}
  100%{background-position:10% 0%}
}

@-webkit-keyframes keyframes-background-color-pulse {
  0%{background-position:91% 100%}
  100%{background-position:10% 0%}
}

@-moz-keyframes keyframes-background-color-pulse {
  0%{background-position:91% 100%}
  100%{background-position:10% 0%}
}