@charset "UTF-8";
/* -----
 * JuwinS.Controls > Based on Animate (Version - 4.1.1)
 * Copyright 2025 Juwin-S BV
 * -----
 */
:root {
    --animate-duration: 1s;
    --animate-delay: 0s;
    --animate-repeat: 1;
    --animate-direction: normal;
}

.animation-animated {
    animation-duration: var(--animate-duration);
    animation-delay: var(--animate-delay);
    animation-iteration-count: var(--animate-repeat);
    animation-fill-mode: both;
    animation-direction: var(--animate-direction);

}

    .animation-animated.animation-infinite { --animate-repeat: infinite; }
    .animation-animated.animation-repeat-1 { --animate-repeat: 1; }
    .animation-animated.animation-repeat-2 { --animate-repeat: 2; }
    .animation-animated.animation-repeat-3 { --animate-repeat: 3; }
    .animation-animated.animation-repeat-4 { --animate-repeat: 4; }
    .animation-animated.animation-repeat-5 { --animate-repeat: 5; }

    .animation-animated.animation-delay-05 { --animate-delay: 0.5s; }
    .animation-animated.animation-delay-10 { --animate-delay: 1s; }
    .animation-animated.animation-delay-15 { --animate-delay: 1.5s; }
    .animation-animated.animation-delay-20 { --animate-delay: 2s; }
    .animation-animated.animation-delay-25 { --animate-delay: 2.5s; }
    .animation-animated.animation-delay-30 { --animate-delay: 3s; }
    .animation-animated.animation-delay-35 { --animate-delay: 3.5s; }
    .animation-animated.animation-delay-40 { --animate-delay: 4s; }
    .animation-animated.animation-delay-45 { --animate-delay: 4.5s; }
    .animation-animated.animation-delay-50 { --animate-delay: 5s; }

    .animation-animated.animation-speed-05 { --animate-duration: 0.5s; }
    .animation-animated.animation-speed-10 { --animate-duration: 1s; }
    .animation-animated.animation-speed-15 { --animate-duration: 1.5s; }
    .animation-animated.animation-speed-20 { --animate-duration: 2s; }
    .animation-animated.animation-speed-25 { --animate-duration: 2.5s; }
    .animation-animated.animation-speed-30 { --animate-duration: 3s; }
    .animation-animated.animation-speed-35 { --animate-duration: 3.5s; }
    .animation-animated.animation-speed-40 { --animate-duration: 4s; }
    .animation-animated.animation-speed-45 { --animate-duration: 4.5s; }
    .animation-animated.animation-speed-50 { --animate-duration: 5s; }

    .animation-animated.animation-reverse  { --animate-direction: reverse; }

/*#region Attention seekers*/
/*#endregion*/
/*#region -  Bounce > See Bounces*/
/*#endregion*/
/*#region -  Flash*/
@keyframes appFlash {
    from { opacity: 1; }
    25%  { opacity: 0; }
    50%  { opacity: 1; }
    75%  { opacity: 0; }
    to   { opacity: 1; }
}
.animation-flash { animation-name: appFlash; }
/*#endregion*/
/*#region -  Pulse*/
@keyframes appPulse {
    from { transform: scale3d(1, 1, 1);          animation-timing-function: ease-in-out; }
    50%  { transform: scale3d(1.05, 1.05, 1.05); animation-timing-function: ease-in-out; }
    to   { transform: scale3d(1, 1, 1);          animation-timing-function: ease-in-out; }
}
.animation-pulse { animation-name: appPulse; }
/*#endregion*/
/*#region -  Rubberband*/
@keyframes appRubberBand {
    from { transform: scale3d(1, 1, 1); }
    30%  { transform: scale3d(1.25, 0.75, 1); }
    40%  { transform: scale3d(0.75, 1.25, 1); }
    50%  { transform: scale3d(1.15, 0.85, 1); }
    65%  { transform: scale3d(0.95, 1.05, 1); }
    75%  { transform: scale3d(1.05, 0.95, 1); }
    to   { transform: scale3d(1, 1, 1); }
}
.animation-rubberband { animation-name: appRubberBand; }
/*#endregion*/
/*#region -  Shake: X-As*/
@keyframes appShakeX {
    from { transform: translate3d(0, 0, 0); }
    10%  { transform: translate3d(-10px, 0, 0); }
    20%  { transform: translate3d(10px, 0, 0); }
    30%  { transform: translate3d(-10px, 0, 0); }
    40%  { transform: translate3d(10px, 0, 0); }
    50%  { transform: translate3d(-10px, 0, 0); }
    60%  { transform: translate3d(10px, 0, 0); }
    70%  { transform: translate3d(-10px, 0, 0); }
    80%  { transform: translate3d(10px, 0, 0); }
    90%  { transform: translate3d(-10px, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}
.animation-shakex { animation-name: appShakeX; }
/*#endregion*/
/*#region -  Shake: Y-As*/
@keyframes appShakeY {
    from { transform: translate3d(0, 0, 0); }
    10%  { transform: translate3d(0, -10px, 0); }
    20%  { transform: translate3d(0, 10px, 0); }
    30%  { transform: translate3d(0, -10px, 0); }
    40%  { transform: translate3d(0, 10px, 0); }
    50%  { transform: translate3d(0, -10px, 0); }
    60%  { transform: translate3d(0, 10px, 0); }
    70%  { transform: translate3d(0, -10px, 0); }
    80%  { transform: translate3d(0, 10px, 0); }
    90%  { transform: translate3d(0, -10px, 0); }
    to   { transform: translate3d(0, 0, 0); }
}
.animation-shakey { animation-name: appShakeY; }
/*#endregion*/
/*#region -  Headshake*/
@keyframes appHeadshake {
    from { transform: translateX(0);                   animation-timing-function: ease-in-out; }
    13%  { transform: translateX(-6px) rotateY(-9deg); animation-timing-function: ease-in-out; }
    37%  { transform: translateX(5px) rotateY(7deg);   animation-timing-function: ease-in-out; }
    63%  { transform: translateX(-3px) rotateY(-5deg); animation-timing-function: ease-in-out; }
    87%  { transform: translateX(2px) rotateY(3deg);   animation-timing-function: ease-in-out; }
    to   { transform: translateX(0);                   animation-timing-function: ease-in-out; }
}
.animation-headshake { animation-name: appHeadshake; }
/*#endregion*/
/*#region -  Swing*/
@keyframes appSwing {
    20%  { transform: rotate3d(0, 0, 1, 15deg); }
    40%  { transform: rotate3d(0, 0, 1, -10deg); }
    60%  { transform: rotate3d(0, 0, 1, 5deg); }
    80%  { transform: rotate3d(0, 0, 1, -5deg); }
    to   { transform: rotate3d(0, 0, 1, 0deg); }
}
.animation-swing { animation-name: appSwing; transform-origin: top center; }
/*#endregion*/
/*#region -  Tada*/
@keyframes appTada {
    from { transform: scale3d(1, 1, 1); }
    10%  { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    20%  { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    30%  { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    40%  { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    50%  { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    60%  { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    70%  { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    80%  { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    90%  { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    to   { transform: scale3d(1, 1, 1); }
}
.animation-tada { animation-name: appTada; }
/*#endregion*/
/*#region -  Wobble*/
@keyframes appWobble {
    from { transform: translate3d(0, 0, 0); }
    15%  { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
    30%  { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
    45%  { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
    60%  { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
    75%  { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
    to   { transform: translate3d(0, 0, 0); }
}
.animation-wobble { animation-name: appWobble; }
/*#endregion*/
/*#region -  Jello*/
@keyframes appJello {
    from  { transform: translate3d(0, 0, 0); }
    11.1% { transform: translate3d(0, 0, 0); }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
    to    { transform: translate3d(0, 0, 0); }
}
.animation-jello { animation-name: appJello; transform-origin: center; }
/*#endregion*/
/*#region -  Heartbeat*/
@keyframes appHeartbeat {
    from { transform: scale(1);   animation-timing-function: ease-in-out; }
    25%  { transform: scale(1.3); animation-timing-function: ease-in-out; }
    50%  { transform: scale(1);   animation-timing-function: ease-in-out; }
    75%  { transform: scale(1.3); animation-timing-function: ease-in-out; }
    to   { transform: scale(1);   animation-timing-function: ease-in-out; }
}
.animation-heartbeat { animation-name: appHeartbeat; }
/*#endregion*/


/*#region Backs*/
/*#endregion*/
/*#region -  Back > In  > Up*/
@keyframes appBackInUp {
    from { opacity: 0.7; transform: translateY(2000px) scale(0.7); }
    80%  { opacity: 0.7; transform: translateY(0px) scale(0.7); }
    to   { opacity: 1;   transform: scale(1); }
}
.animation-backinup { animation-name: appBackInUp; }
/*#endregion*/
/*#region -  Back > In  > Right*/
@keyframes appBackInRight {
    from { opacity: 0.7; transform: translateX(2000px) scale(0.7); }
    80%  { opacity: 0.7; transform: translateX(0px) scale(0.7); }
    to   { opacity: 1;   transform: scale(1); }
}
.animation-backinright { animation-name: appBackInRight; }
/*#endregion*/
/*#region -  Back > In  > Down*/
@keyframes appBackInDown {
    from { opacity: 0.7; transform: translateY(-2000px) scale(0.7); }
    80%  { opacity: 0.7; transform: translateY(0px) scale(0.7); }
    to   { opacity: 1;   transform: scale(1); }
}
.animation-backindown { animation-name: appBackInDown; }
/*#endregion*/
/*#region -  Back > In  > Left*/
@keyframes appBackInLeft {
    from { opacity: 0.7; transform: translateX(-2000px) scale(0.7); }
    80%  { opacity: 0.7; transform: translateX(0px) scale(0.7); }
    to   { opacity: 1;   transform: scale(1); }
}
.animation-backinleft { animation-name: appBackInLeft; }
/*#endregion*/
/*#region -  Back > Out > Up*/
@keyframes appBackOutUp {
    from { opacity: 1;   transform: scale(1); }
    20%  { opacity: 0.7; transform: translateY(0px) scale(0.7); }
    to   { opacity: 0.7; transform: translateY(-2000px) scale(0.7); }
}
.animation-backoutup { animation-name: appBackOutUp; }
/*#endregion*/
/*#region -  Back > Out > Right*/
@keyframes appBackOutRight {
    from { opacity: 1;   transform: scale(1); }
    20%  { opacity: 0.7; transform: translateX(0px) scale(0.7); }
    to   { opacity: 0.7; transform: translateX(2000px) scale(0.7); }
}
.animation-backoutright { animation-name: appBackOutRight; }
/*#endregion*/
/*#region -  Back > Out > Down*/
@keyframes appBackOutDown {
    from { opacity: 1;   transform: scale(1); }
    20%  { opacity: 0.7; transform: translateY(0px) scale(0.7); }
    to   { opacity: 0.7; transform: translateY(2000px) scale(0.7); }
}
.animation-backoutdown { animation-name: appBackOutDown; }
/*#endregion*/
/*#region -  Back > Out > Left*/
@keyframes appBackOutLeft {
    from { opacity: 1;   transform: scale(1); }
    20%  { opacity: 0.7; transform: translateX(0px) scale(0.7); }
    to   { opacity: 0.7; transform: translateX(-2000px) scale(0.7); }
}
.animation-backoutleft { animation-name: appBackOutLeft; }
/*#endregion*/


/*#region Fronts*/
/*#endregion*/
/*#region -  Front > In  > Up*/
@keyframes appFrontInUp {
    from { opacity: 0.7; transform: translateY(2000px) scale(1.3); }
    80%  { opacity: 0.7; transform: translateY(0px) scale(1.3); }
    to   { opacity: 1;   transform: scale(1); }
}
.animation-frontinup { animation-name: appFrontInUp; }
/*#endregion*/
/*#region -  Front > In  > Right*/
@keyframes appFrontInRight {
    from { opacity: 0.7; transform: translateX(2000px) scale(1.3); }
    80%  { opacity: 0.7; transform: translateX(0px) scale(1.3); }
    to   { opacity: 1;   transform: scale(1); }
}
.animation-frontinright { animation-name: appFrontInRight; }
/*#endregion*/
/*#region -  Front > In  > Down*/
@keyframes appFrontInDown {
    from { opacity: 0.7; transform: translateY(-2000px) scale(1.3); }
    80%  { opacity: 0.7; transform: translateY(0px) scale(1.3); }
    to   { opacity: 1;   transform: scale(1); }
}
.animation-frontindown { animation-name: appFrontInDown; }
/*#endregion*/
/*#region -  Front > In  > Left*/
@keyframes appFrontInLeft {
    from { opacity: 0.7; transform: translateX(-2000px) scale(1.3); }
    80%  { opacity: 0.7; transform: translateX(0px) scale(1.3); }
    to   { opacity: 1;   transform: scale(1); }
}
.animation-frontinleft { animation-name: appFrontInLeft; }
/*#endregion*/
/*#region -  Front > Out > Up*/
@keyframes appFrontOutUp {
    from { opacity: 1;   transform: scale(1); }
    20%  { opacity: 0.7; transform: translateY(0px) scale(1.3); }
    to   { opacity: 0.7; transform: translateY(-2000px) scale(1.3); }
}
.animation-frontoutup { animation-name: appFrontOutUp; }
/*#endregion*/
/*#region -  Front > Out > Right*/
@keyframes appFrontOutRight {
    from { opacity: 1;   transform: scale(1); }
    20%  { opacity: 0.7; transform: translateX(0px) scale(1.3); }
    to   { opacity: 0.7; transform: translateX(2000px) scale(1.3); }
}
.animation-frontoutright { animation-name: appFrontOutRight; }
/*#endregion*/
/*#region -  Front > Out > Down*/
@keyframes appFrontOutDown {
    from { opacity: 1;   transform: scale(1); }
    20%  { opacity: 0.7; transform: translateY(0px) scale(1.3); }
    to   { opacity: 0.7; transform: translateY(2000px) scale(1.3); }
}
.animation-frontoutdown { animation-name: appFrontOutDown; }
/*#endregion*/
/*#region -  Front > Out > Left*/
@keyframes appFrontOutLeft {
    from { opacity: 1;   transform: scale(1); }
    20%  { opacity: 0.7; transform: translateX(0px) scale(1.3); }
    to   { opacity: 0.7; transform: translateX(-2000px) scale(1.3); }
}
.animation-frontoutleft { animation-name: appFrontOutLeft; }
/*#endregion*/


/*#region Bounces*/
/*#endregion*/
/*#region -  Bounce*/
@keyframes appBounce {
    from { transform: translate3d(0, 0, 0);                  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    20%  { transform: translate3d(0, 0, 0);                  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    40%  { transform: translate3d(0, -30px, 0) scaleY(1.1);  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
    43%  { transform: translate3d(0, -30px, 0) scaleY(1.1);  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
    53%  { transform: translate3d(0, 0, 0);                  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    70%  { transform: translate3d(0, -15px, 0) scaleY(1.05); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); }
    80%  { transform: translate3d(0, 0, 0) scaleY(0.95);     animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    90%  { transform: translate3d(0, -4px, 0) scaleY(1.02);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to   { transform: translate3d(0, 0, 0);                  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounce { animation-name: appBounce; transform-origin: center bottom; }
/*#endregion*/
/*#region -  Bounce > In*/
@keyframes appBounceIn {
    from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3);    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    20%  {             transform: scale3d(1.1, 1.1, 1.1);    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    40%  {             transform: scale3d(0.9, 0.9, 0.9);    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    60%  { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    80%  {             transform: scale3d(0.97, 0.97, 0.97); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to   {             transform: scale3d(1, 1, 1);          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bouncein { animation-name: appBounceIn; }
/*#endregion*/
/*#region -  Bounce > In  > Up*/
@keyframes appBounceInUp {
    from { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(3);   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    60%  { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    75%  {             transform: translate3d(0, 10px, 0) scaleY(0.95);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    90%  {             transform: translate3d(0, -5px, 0) scaleY(0.985); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to   {             transform: translate3d(0, 0, 0);                  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounceinup { animation-name: appBounceInUp; }
/*#endregion*/
/*#region -  Bounce > In  > Right*/
@keyframes appBounceInRight {
    from { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3);   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    60%  { opacity: 1; transform: translate3d(-20px, 0, 0) scaleX(0.9);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    75%  {             transform: translate3d(10px, 0, 0) scaleX(0.95);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    90%  {             transform: translate3d(-5px, 0, 0) scaleX(0.985); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to   {             transform: translate3d(0, 0, 0);                  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounceinright { animation-name: appBounceInRight; }
/*#endregion*/
/*#region -  Bounce > In  > Down*/
@keyframes appBounceInDown {
    from { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    60%  { opacity: 1; transform: translate3d(0, 20px, 0) scaleY(0.9);   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    75%  {             transform: translate3d(0, -10px, 0) scaleY(0.95); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    90%  {             transform: translate3d(0, 5px, 0) scaleY(0.985);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to   {             transform: translate3d(0, 0, 0);                  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounceindown { animation-name: appBounceInDown; }
/*#endregion*/
/*#region -  Bounce > In  > Left*/
@keyframes appBounceInLeft {
    from { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    60%  { opacity: 1; transform: translate3d(20px, 0, 0) scaleX(0.9);   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    75%  {             transform: translate3d(-10px, 0, 0) scaleX(0.95); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    90%  {             transform: translate3d(5px, 0, 0) scaleX(0.985);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to   {             transform: translate3d(0, 0, 0);                  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounceinleft { animation-name: appBounceInLeft; }
/*#endregion*/
/*#region -  Bounce > Out*/
@keyframes appBounceOut {
    20% {             transform: scale3d(0.9, 0.9, 0.9); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
    50% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
    55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
    to  { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
}
.animation-bounceout { animation-name: appBounceOut; }
/*#endregion*/
/*#region -  Bounde > Out > Up*/
@keyframes appBounceOutUp {
    20% {             transform: translate3d(0, -10px, 0) scaleY(0.985); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    40% { opacity: 1; transform: translate3d(0, 20px, 0) scaleY(0.9);    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    45% { opacity: 1; transform: translate3d(0, 20px, 0) scaleY(0.9);    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to  { opacity: 0; transform: translate3d(0, -2000px, 0) scaleY(3);   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounceoutup { animation-name: appBounceOutUp; }
/*#endregion*/
/*#region -  Bounde > Out > Right*/
@keyframes appBounceOutRight {
    20% {             transform: translate3d(-10px, 0, 0) scaleY(0.985); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    40% { opacity: 1; transform: translate3d(20px, 0, 0) scaleY(0.9);    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    45% { opacity: 1; transform: translate3d(20px, 0, 0) scaleY(0.9);    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to  { opacity: 0; transform: translate3d(-2000px, 0, 0) scaleY(3);   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounceoutright { animation-name: appBounceOutRight; }
/*#endregion*/
/*#region -  Bounce > Out > Down*/
@keyframes appBounceOutDown {
    20% {             transform: translate3d(0, 10px, 0) scaleY(0.985); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    40% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    45% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(0.9);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to  { opacity: 0; transform: translate3d(0, 2000px, 0) scaleY(3);   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounceoutdown { animation-name: appBounceOutDown; }
/*#endregion*/
/*#region -  Bounce > Out > Left*/
@keyframes appBounceOutLeft {
    20% {             transform: translate3d(10px, 0, 0) scaleY(0.985); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    40% { opacity: 1; transform: translate3d(-20px, 0, 0) scaleY(0.9);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    45% { opacity: 1; transform: translate3d(-20px, 0, 0) scaleY(0.9);  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
    to  { opacity: 0; transform: translate3d(2000px, 0, 0) scaleY(3);   animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.animation-bounceoutleft { animation-name: appBounceOutLeft; }
/*#endregion*/


/*#region Fades*/
/*#endregion*/
/*#region -  Fade > In*/
@keyframes appFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.animation-fadein { animation-name: appFadeIn; }
/*#endregion*/
/*#region -  Fade > In  > Up*/
@keyframes appFadeInUp {
    from { opacity: 0; transform: translate3d(0, 250%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-fadeinup { animation-name: appFadeInUp; }
/*#endregion*/
/*#region -  Fade > In  > Right*/
@keyframes appFadeInRight {
    from { opacity: 0; transform: translate3d(250%, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-fadeinright { animation-name: appFadeInRight; }
/*#endregion*/
/*#region -  Fade > In  > Down*/
@keyframes appFadeInDown {
    from { opacity: 0; transform: translate3d(0, -250%, 0); } 
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-fadeindown { animation-name: appFadeInDown; }
/*#endregion*/
/*#region -  Fade > In  > Left*/
@keyframes appFadeInLeft {
    from { opacity: 0; transform: translate3d(-250%, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-fadeinleft { animation-name: appFadeInLeft; }
/*#endregion*/
/*#region -  Fade > In  > Corner1 (Up+Left)*/
@keyframes appFadeInUpLeft {
    from { opacity: 0; transform: translate3d(-250%, -250%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-fadeinupleft { animation-name: appFadeInUpLeft; }
/*#endregion*/
/*#region -  Fade > In  > Corner2 (Up+Right)*/
@keyframes appFadeInUpRight {
    from { opacity: 0; transform: translate3d(250%, -250%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-fadeinupright { animation-name: appFadeInUpRight; }
/*#endregion*/
/*#region -  Fade > In  > Corner3 (Down+Right)*/
@keyframes appFadeInDownRight {
    from { opacity: 0; transform: translate3d(250%, 250%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-fadeindownright { animation-name: appFadeInDownRight; }
/*#endregion*/
/*#region -  Fade > In  > Corner4 (Down+Left)*/
@keyframes appFadeInDownLeft {
    from { opacity: 0; transform: translate3d(-250%, 250%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-fadeindownleft { animation-name: appFadeInDownLeft; }
/*#endregion*/
/*#region -  Fade > Out*/
@keyframes appFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.animation-fadeout { animation-name: appFadeOut; }
/*#endregion*/
/*#region -  Fade > Out > Up*/
@keyframes appFadeOutUp {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, -250%, 0); }
}
.animation-fadeoutup { animation-name: appFadeOutUp; }
/*#endregion*/
/*#region -  Fade > Out > Right*/
@keyframes appFadeOutRight {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(250%, 0, 0); }
}
.animation-fadeoutright { animation-name: appFadeOutRight; }
/*#endregion*/
/*#region -  Fade > Out > Down*/
@keyframes appFadeOutDown {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, 250%, 0); }
}
.animation-fadeoutdown { animation-name: appFadeOutDown; }
/*#endregion*/
/*#region -  Fade > Out > Left*/
@keyframes appFadeOutLeft {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(-250%, 0, 0); }
}
.animation-fadeoutleft { animation-name: appFadeOutLeft; }
/*#endregion*/
/*#region -  Fade > Out > Corner1 (Up+Left)*/
@keyframes appFadeOutUpLeft {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(-250%, -250%, 0); }
}
.animation-fadeoutupleft { animation-name: appFadeOutUpLeft; }
/*#endregion*/
/*#region -  Fade > Out > Corner2 (Up+Right)*/
@keyframes appFadeOutUpRight {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(250%, -250%, 0); }
}
.animation-fadeoutupright { animation-name: appFadeOutUpRight; }
/*#endregion*/
/*#region -  Fade > Out > Corner3 (Down+Right)*/
@keyframes appFadeOutDownRight {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(250%, 250%, 0); }
}
.animation-fadeoutdownright { animation-name: appFadeOutDownRight; }
/*#endregion*/
/*#region -  Fade > Out > Corner4 (Down+Left)*/
@keyframes appFadeOutDownLeft {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(-250%, 250%, 0); }
}
.animation-fadeoutdownleft { animation-name: appFadeOutDownLeft; }
/*#endregion*/


/*#region Flips */
/*#endregion*/
/*#region -  Flip*/
@keyframes appFlip {
    from { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);       animation-timing-function: ease-out; }
    40%  { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);   animation-timing-function: ease-out; }
    50%  { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);   animation-timing-function: ease-in; }
    80%  { transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; }
    to   { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);          animation-timing-function: ease-in; }
}
animation-flip { backface-visibility: visible; animation-name: appFlip; }
/*#endregion*/
/*#region -  Flip > In > X-As*/
@keyframes appFlipInX {
    from { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 90deg);  animation-timing-function: ease-in; } 
    40%  {             transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
    60%  { opacity: 1; transform: perspective(400px) rotate3d(1, 0, 0, 10deg); }
    80%  {             transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
    to   {             transform: perspective(400px); }
}
.animation-flipinx { backface-visibility: visible !important; animation-name: appFlipInX; }
/*#endregion*/
/*#region -  Flip > In > Y-As*/
@keyframes appFlipInY {
    from { opacity: 0; transform: perspective(400px) rotate3d(0, 1, 0, 90deg);  animation-timing-function: ease-in; }
    40%  {             transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; }
    60%  { opacity: 1; transform: perspective(400px) rotate3d(0, 1, 0, 10deg); }
    80%  {             transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
    to   {             transform: perspective(400px); }
}
.animation-flipiny { backface-visibility: visible !important; animation-name: appFlipInY; }
/*#endregion*/
/*#region -  Flip > Out > X-As*/
@keyframes appFlipOutX {
    from {             transform: perspective(400px); }
    30%  { opacity: 1; transform: perspective(400px) rotate3d(1, 0, 0, -20deg); }
    to   { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 90deg); }
}
.animation-flipoutx { backface-visibility: visible !important; animation-name: appFlipOutX; }
/*#endregion*/
/*#region -  Flip > Out > Y-As*/
@keyframes appFlipOutY {
    from {             transform: perspective(400px); }
    30%  { opacity: 1; transform: perspective(400px) rotate3d(0, 1, 0, -20deg); }
    to   { opacity: 0; transform: perspective(400px) rotate3d(0, 1, 0, 90deg); }
}
.animation-flipouty { backface-visibility: visible !important; animation-name: appFlipOutY; }
/*#endregion*/


/*#region Lightspeed*/
/*#endregion*/
/*#region -  Lightspeed > In > Right*/
@keyframes appLightspeedInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0) skewX(-30deg); }
    60%  { opacity: 1; transform: skewX(20deg); }
    80%  {             transform: skewX(-5deg); }
    to   {             transform: translate3d(0, 0, 0); }
}
.animation-lightspeedinright { animation-name: appLightspeedInRight; animation-timing-function: ease-out; }
/*#endregion*/
/*#region -  Lightspeed > In > Left*/
@keyframes appLightspeedInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0) skewX(30deg); }
    60%  { opacity: 1; transform: skewX(-20deg); }
    80%  {             transform: skewX(5deg); }
    to   {             transform: translate3d(0, 0, 0); }
}
.animation-lightspeedinleft { animation-name: appLightspeedInLeft; animation-timing-function: ease-out; }
/*#endregion*/
/*#region -  Lightspeed > Out > Right*/
@keyframes appLightspeedOutRight {
    from { opacity: 1; }
    to   { opacity: 0; transform: translate3d(100%, 0, 0) skewX(30deg); }
}
.animation-lightSpeedOutRight { animation-name: appLightspeedOutRight; animation-timing-function: ease-in; }
/*#endregion*/
/*#region -  Lightspeed > Out > Left*/
@keyframes appLightspeedOutLeft {
    from { opacity: 1; }
    to   { opacity: 0; transform: translate3d(-100%, 0, 0) skewX(-30deg); }
}
.animation-lightSpeedOutLeft { animation-name: appLightspeedOutLeft; animation-timing-function: ease-in; }
/*#endregion*/


/*#region Rotates*/
/*#endregion*/
/*#region -  Rotate > In*/
@keyframes appRotateIn {
    from { opacity: 0; transform: rotate3d(0, 0, 1, -360deg); }
    50%  { opacity: 0.25; }
    to   { opacity: 1; transform: rotate3d(0, 0, 1, 0deg); }
}
.animation-rotatein { animation-name: appRotateIn; transform-origin: center; }
/*#endregion*/
/*#region -  Rotate > In  > Corner1 (Up+Left)*/
@keyframes appRotateInUpLeft {
    from { opacity: 0; transform: rotate3d(0, 0, 1, 90deg); }
    50%  { opacity: 0.25; }
    to   { opacity: 1; transform: rotate3d(0, 0, 1, 0deg);}
}
.animation-rotateinupleft { animation-name: appRotateInUpLeft; transform-origin: left bottom; }
/*#endregion*/
/*#region -  Rotate > In  > Corner2 (Up+Right)*/
@keyframes appRotateInUpRight {
    from { opacity: 0; transform: rotate3d(0, 0, 1, -90deg); }
    50%  { opacity: 0.25; }
    to   { opacity: 1; transform: rotate3d(0, 0, 1, 0deg);}
}
.animation-rotateinupright { animation-name: appRotateInUpRight; transform-origin: right bottom; }
/*#endregion*/
/*#region -  Rotate > In  > Corner3 (Down+Right)*/
@keyframes appRotateInDownRight {
    from { opacity: 0; transform: rotate3d(0, 0, 1, 90deg); }
    50%  { opacity: 0.25; }
    to   { opacity: 1; transform: rotate3d(0, 0, 1, 0deg);}
}
.animation-rotateindownright { animation-name: appRotateInDownRight; transform-origin: right bottom; }
/*#endregion*/
/*#region -  Rotate > In  > Corner4 (Down+Left*/
@keyframes appRotateInDownLeft {
    from { opacity: 0; transform: rotate3d(0, 0, 1, -90deg); }
    50%  { opacity: 0.25; }
    to   { opacity: 1; transform: rotate3d(0, 0, 1, 0deg); }
}
.animation-rotateindownleft { animation-name: appRotateInDownLeft; transform-origin: left bottom; }
/*#endregion*/
/*#region -  Rotate > Out*/
@keyframes appRotateOut {
    from { opacity: 1; }
    50%  { opacity: 0.25; }
    to   { opacity: 0; transform: rotate3d(0, 0, 1, 360deg); }
}
.animation-rotateOut { animation-name: appRotateOut; transform-origin: center; }
/*#endregion*/
/*#region -  Rotate > Out > Corner1 (Up+Left)*/
@keyframes appRotateOutUpLeft {
    from { opacity: 1; transform: rotate3d(0, 0, 1, 0deg);}
    50%  { opacity: 0.25; }
    to   { opacity: 0; transform: rotate3d(0, 0, 1, -90deg); }
}
.animation-rotateoutupleft { animation-name: appRotateOutUpLeft; transform-origin: left bottom; }
/*#endregion*/
/*#region -  Rotate > Out > Corner2 (Up+Right)*/
@keyframes appRotateOutUpRight {
    from { opacity: 1; transform: rotate3d(0, 0, 1, 0deg);}
    50%  { opacity: 0.25; }
    to   { opacity: 0; transform: rotate3d(0, 0, 1, 90deg); }
}
.animation-rotateoutupright { animation-name: appRotateOutUpRight; transform-origin: right bottom; }
/*#endregion*/
/*#region -  Rotate > Out > Corner3 (Down+Right)*/
@keyframes appRotateOutDownRight {
    from { opacity: 1; transform: rotate3d(0, 0, 1, 0deg);}
    50%  { opacity: 0.25; }
    to   { opacity: 0; transform: rotate3d(0, 0, 1, -90deg); }
}
.animation-rotateoutdownright { animation-name: appRotateOutDownRight; transform-origin: right bottom; }
/*#endregion*/
/*#region -  Rotate > Out > Corner4 (Down+Left)*/
@keyframes appRotateOutDownLeft {
    from { opacity: 1; transform: rotate3d(0, 0, 1, 0deg);}
    50%  { opacity: 0.25; }
    to   { opacity: 0; transform: rotate3d(0, 0, 1, 90deg); }
}
.animation-rotateoutdownleft { animation-name: appRotateOutDownLeft; transform-origin: left bottom; }
/*#endregion*/


/*#region Specials*/
/*#endregion*/
/*#region -  Hinge*/
@keyframes appHinge {
    0%  {                                                  animation-timing-function: ease-in-out; }
    20% {             transform: rotate3d(0, 0, 1, 80deg); animation-timing-function: ease-in-out; }
    40% { opacity: 1; transform: rotate3d(0, 0, 1, 60deg); animation-timing-function: ease-in-out; }
    60% {             transform: rotate3d(0, 0, 1, 80deg); animation-timing-function: ease-in-out; }
    80% {             transform: rotate3d(0, 0, 1, 80deg); animation-timing-function: ease-in-out; }
    to  { opacity: 0; transform: translate3d(0, 700px, 0); animation-timing-function: ease; }
}
.animation-hinge            { animation-name: appHinge; animation-duration: calc(var(--animate-duration) * 2); transform-origin: top left; }
.animation-hingetopleft     { animation-name: appHinge; animation-duration: calc(var(--animate-duration) * 2); transform-origin: top left; }
.animation-hingetopright    { animation-name: appHinge; animation-duration: calc(var(--animate-duration) * 2); transform-origin: top right; }
.animation-hingebottomright { animation-name: appHinge; animation-duration: calc(var(--animate-duration) * 2); transform-origin: bottom right; }
.animation-hingebottomleft  { animation-name: appHinge; animation-duration: calc(var(--animate-duration) * 2); transform-origin: bottom left; }
/*#endregion*/
/*#region -  Jack In The Box*/
@keyframes appJackInTheBox {
    from { opacity: 0; transform: scale(0.1) rotate(30deg); }
    50%  {             transform: rotate(-10deg); }
    70%  {             transform: rotate(3deg); }
    to   { opacity: 1; transform: scale(1); }
}
.animation-jackinthebox { animation-name: appJackInTheBox; transform-origin: center bottom; }
/*#endregion*/
/*#region -  Roll > In*/
@keyframes appRollIn {
    from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animation-rollin { animation-name: appRollIn; }
/*#endregion*/
/*#region -  Roll > Out*/
@keyframes appRollOut {
    from { opacity: 1; }
    to   { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); }
}
.animation-rollout { animation-name: appRollOut; }
/*#endregion*/


/*#region Zooms*/
/*#endregion*/
/*#region -  Zoom > In*/
@keyframes appZoomIn {
    from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50%  { opacity: 1; }
}
.animation-zoomin { animation-name: appZoomIn; }
/*#endregion*/
/*#region -  Zoom > In  > Up*/
@keyframes appZoomInUp {
    from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    60%  { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animation-zoominup { animation-name: appZoomInUp;transform-origin: center bottom; }
/*#endregion*/
/*#region -  Zoom > In  > Right*/
@keyframes appZoomInRight {
    from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(2000px, 0, 0);      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    60%  { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animation-zoominright { animation-name: appZoomInRight; transform-origin: right center;}
/*#endregion*/
/*#region -  Zoom > In  > Down*/
@keyframes appZoomInDown {
    from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    60%  { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animation-zoomindown { animation-name: appZoomInDown; transform-origin: center bottom;}
/*#endregion*/
/*#region -  Zoom > In  > Left*/
@keyframes appZoomInLeft {
    from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-2000px, 0, 0);    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    60%  { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animation-zoominleft { animation-name: appZoomInLeft; transform-origin: left center; }
/*#endregion*/
/*#region -  Zoom > Out*/
@keyframes appZoomOut {
    from { opacity: 1; } 
    50%  { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
}
.animation-zoomout { animation-name: appZoomOut; }
/*#endregion*/
/*#region -  Zoom > Out > Up*/
@keyframes appZoomOutUp {
    40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    to  { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animation-zoomoutup { animation-name: appZoomOutUp; transform-origin: center bottom; }
/*#endregion*/
/*#region -  Zoom > Out > Right*/
@keyframes appZoomOutRight {
    40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    to  { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(2000px, 0, 0);      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animation-zoomoutright { animation-name: appZoomOutRight; transform-origin: right center; }
/*#endregion*/
/*#region -  Zoom > Out > Down*/
@keyframes appZoomOutDown {
    40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
    to  { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.animation-zoomoutdown { animation-name: appZoomOutDown; transform-origin: center bottom; }
/*#endregion*/
/*#region -  Zoom > Out > Left*/
@keyframes appZoomOutLeft {
    40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}
    to  { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-2000px, 0, 0);    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);  }
}
.animation-zoomoutleft { animation-name: appZoomOutLeft; transform-origin: left center; }
/*#endregion*/


/*#region Slides*/
/*#endregion*/
/*#region -  Slide > In  > Up*/
@keyframes appSlideInUp {
    from { transform: translate3d(0, 100%, 0); visibility: visible; }
    to   { transform: translate3d(0, 0, 0); }
}
.animation-slideinup { animation-name: appSlideInUp; }
/*#endregion*/
/*#region -  Slide > In  > Right*/
@keyframes appSlideInRight {
    from { transform: translate3d(100%, 0, 0); visibility: visible; }
    to   { transform: translate3d(0, 0, 0); }
}
.animation-slideinright { animation-name: appSlideInRight; }
/*#endregion*/
/*#region -  Slide > In  > Down*/
@keyframes appSlideInDown {
    from { transform: translate3d(0, -100%, 0); visibility: visible; }
    to   { transform: translate3d(0, 0, 0); }
}
.animation-slideindown { animation-name: appSlideInDown; }
/*#endregion*/
/*#region -  Slide > In  > Left*/
@keyframes appSlideInLeft {
    from { transform: translate3d(-100%, 0, 0); visibility: visible; }
    to   { transform: translate3d(0, 0, 0); }
}
.animation-slideinleft { animation-name: appSlideInLeft; }
/*#endregion*/
/*#region -  Slide > Out > Up */
@keyframes appSlideOutUp {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -100%, 0); visibility: hidden; }
}
.animation-slideoutup { animation-name: appSlideOutUp; }
/*#endregion*/
/*#region -  Slide > Out > Right */
@keyframes appSlideOutRight {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(100%, 0, 0); visibility: hidden; }
}
.animation-slideoutright { animation-name: appSlideOutRight; }
/*#endregion*/
/*#region -  Slide > Out > Down */
@keyframes appSlideOutDown {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 100%, 0); visibility: hidden; }
}
.animation-slideoutdown { animation-name: appSlideOutDown; }
/*#endregion*/
/*#region -  Slide > Out > Left */
@keyframes appSlideOutLeft {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); visibility: hidden; }
}
.animation-slideoutleft { animation-name: appSlideOutLeft; }
/*#endregion*/