@charset "utf-8";

/* ========================================================
//  MARK: CSS only
// ======================================================== */

.cssAnim-bg-moveTo-RightTop {
  animation: move_rt 180s infinite linear;
}
@keyframes move_rt {
  0% {
    background-position: left top;
  }
  100% {
    background-position: left 3200px top -3200px;
  }
}

.cssAnim-bg-sized {
  background-position: center;
  animation: bg_sized 10s infinite linear;
}
@keyframes bg_sized {
  0% {
    background-size: 25px 25px;
  }
  50% {
    background-size: 30px 30px;
  }
  100% {
    background-size: 25px 25px;
  }
}




/* ========================================================
//  MARK: Fired by JavaScript
// ======================================================== */

/**
 *
 * You must first add a class
 * to the part you want to animate.
 *
 * Only once: "with-obsAnimate-once"
 * Many times: "with-obsAnimate-toggle"
 *
**/

/* ------------------------------------------------------
 * Typical animations
** ------------------------------------------------------- */

/*** Appear bottom-to-top ***/
.appear-bottomToTop {
  opacity: 0;
  translate: 0 3rem;
  transition:
    opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    translate 1.2s cubic-bezier(0.25, 1, 0.5, 1)
    ;
}
.appear-bottomToTop.show {
  opacity: 1;
  translate: 0 0;
}

/*** Appear scale up ***/
.appear-scaleUp {
  opacity: 0;
  scale: 0;
  transition:
    opacity .4s cubic-bezier(0.25, 1, 0.5, 1),
    scale .8s cubic-bezier(0.25, 1, 0.5, 1)
    ;
}
.appear-scaleUp.show {
  opacity: 1;
  scale: 1;
}


/* ------------------------------------------------------
 * Special animations
** ------------------------------------------------------- */

/*** fuwafuwa ***/
.fuwafuwa {
  opacity: 0;
  translate: 0 40px;
  transition:
    opacity 2.4s cubic-bezier(0.25, 1, 0.5, 1),
    translate .8s cubic-bezier(0.25, 1, 0.5, 1)
    ;
  animation: none;
}
.fuwafuwa.show {
  opacity: 1;
  translate: 0 0;
  /* Move up and down over 3 seconds (repeated) */
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  /* Delay to start flapping around
     the end of the entrance animation */
  animation-delay: .75s;
}
@keyframes fuwafuwa {
  0% {
    translate: 0 0;
    rotate: 0deg;
  }
  100% {
    /* Adjust the values ​​to your liking */
    translate: 0 -15px;
    rotate: 2deg;
  }
}



/* ------------------------------------------------------
 * Add animation delay
** ------------------------------------------------------- */

/*** Transition delay ***/
.trans-delay-0100ms {
  transition-delay: 100ms;
}
.trans-delay-0200ms {
  transition-delay: 200ms;
}
.trans-delay-0300ms {
  transition-delay: 300ms;
}
.trans-delay-0400ms {
  transition-delay: 400ms;
}
.trans-delay-0500ms {
  transition-delay: 500ms;
}
.trans-delay-0600ms {
  transition-delay: 600ms;
}
.trans-delay-0700ms {
  transition-delay: 7700ms;
}
.trans-delay-0800ms {
  transition-delay: 800ms;
}
.trans-delay-0900ms {
  transition-delay: 900ms;
}
.trans-delay-1000ms {
  transition-delay: 1000ms;
}
.trans-delay-1100ms {
  transition-delay: 1100ms;
}
.trans-delay-1200ms {
  transition-delay: 1200ms;
}
.trans-delay-1300ms {
  transition-delay: 1300ms;
}
.trans-delay-1400ms {
  transition-delay: 1400ms;
}
.trans-delay-1500ms {
  transition-delay: 1500ms;
}
.trans-delay-1600ms {
  transition-delay: 1600ms;
}
.trans-delay-1700ms {
  transition-delay: 1700ms;
}
.trans-delay-1800ms {
  transition-delay: 1800ms;
}
.trans-delay-1900ms {
  transition-delay: 1900ms;
}
.trans-delay-2000ms {
  transition-delay: 2000ms;
}
.trans-delay-2100ms {
  transition-delay: 2100ms;
}
.trans-delay-2200ms {
  transition-delay: 2200ms;
}
.trans-delay-2300ms {
  transition-delay: 2300ms;
}
.trans-delay-2400ms {
  transition-delay: 2400ms;
}
.trans-delay-2500ms {
  transition-delay: 2500ms;
}
.trans-delay-2600ms {
  transition-delay: 2600ms;
}
.trans-delay-2700ms {
  transition-delay: 2700ms;
}
.trans-delay-2800ms {
  transition-delay: 2800ms;
}
.trans-delay-2900ms {
  transition-delay: 2900ms;
}
.trans-delay-3000ms {
  transition-delay: 3000ms;
}



/* ------------------------------------------------------
 * Important additionals
** ------------------------------------------------------- */

/**
 * Always show it in the WordPress editor.
**/
.editor-styles-wrapper .with-obsAnimate-once,
.editor-styles-wrapper .with-obsAnimate-toggle {
  opacity: 1 !important;
}

/**
 * When JavaScript is disabled.
**/
.disabled-js .with-obsAnimate-once,
.disabled-js .with-obsAnimate-toggle {
  opacity: 1 !important;
  animation: none !important;
  translate: 0 0 !important;
  rotate: 0deg !important;
  scale: 1 !important;
  transition: none !important;
}