 @-webkit-keyframes slide-in-left {
     0% {
         -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
         opacity: 0;
     }

     100% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
         opacity: 1;
     }
 }

 @keyframes slide-in-left {
     0% {
         -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
         opacity: 0;
     }

     100% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
         opacity: 1;
     }
 }

 .slide-in-left {
     animation-name: slide-in-left;
     animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
     animation-fill-mode: both;
     /* animation-iteration-count:3; */
     /* animation-duration:2s; */
 }

 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 19:36:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
 @-webkit-keyframes slide-out-left {
     0% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
         opacity: 1;
     }

     100% {
         -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
         opacity: 0;
     }
 }

 @keyframes slide-out-left {
     0% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
         opacity: 1;
     }

     100% {
         -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
         opacity: 0;
     }
 }

 .slide-out-left {
     animation-name: slide-out-left;
     animation-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
     animation-fill-mode: both;

 }


 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:14:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation blink-2
 * ----------------------------------------
 */
 @-webkit-keyframes blink-2 {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0.2;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes blink-2 {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0.2;
     }

     100% {
         opacity: 1;
     }
 }

 .blink-2 {
     animation-name: blink-2;
     animation-fill-mode: both;
 }

 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:16:53
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation bounce-left
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-left {
     0% {
         -webkit-transform: translateX(-48px);
         transform: translateX(-48px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 1;
     }

     24% {
         opacity: 1;
     }

     40% {
         -webkit-transform: translateX(-26px);
         transform: translateX(-26px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     65% {
         -webkit-transform: translateX(-13px);
         transform: translateX(-13px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     82% {
         -webkit-transform: translateX(-6.5px);
         transform: translateX(-6.5px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     93% {
         -webkit-transform: translateX(-4px);
         transform: translateX(-4px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     25%,
     55%,
     75%,
     87%,
     98% {
         -webkit-transform: translateX(0px);
         transform: translateX(0px);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     100% {
         -webkit-transform: translateX(0px);
         transform: translateX(0px);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
         opacity: 1;
     }
 }

 @keyframes bounce-left {
     0% {
         -webkit-transform: translateX(-48px);
         transform: translateX(-48px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 1;
     }

     24% {
         opacity: 1;
     }

     40% {
         -webkit-transform: translateX(-26px);
         transform: translateX(-26px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     65% {
         -webkit-transform: translateX(-13px);
         transform: translateX(-13px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     82% {
         -webkit-transform: translateX(-6.5px);
         transform: translateX(-6.5px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     93% {
         -webkit-transform: translateX(-4px);
         transform: translateX(-4px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     25%,
     55%,
     75%,
     87%,
     98% {
         -webkit-transform: translateX(0px);
         transform: translateX(0px);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     100% {
         -webkit-transform: translateX(0px);
         transform: translateX(0px);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
         opacity: 1;
     }
 }

 .bounce-left {
     animation-name: bounce-left;
     animation-fill-mode: both;
 }




 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:19:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */

 @keyframes shake-horizontal {

     0%,
     100% {
         transform: translateX(0);
     }

     10%,
     30%,
     50%,
     70% {
         transform: translateX(-50%);
     }

     20%,
     40%,
     60% {
         transform: translateX(50%);
     }

     80% {
         transform: translateX(50%);
     }

     90% {
         transform: translateX(-50%);
     }
 }


 .shake-horizontal {
     animation-name: shake-horizontal;
     animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
     animation-fill-mode: both;
 }


 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:26:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
 @-webkit-keyframes shake-horizontal1 {

     0%,
     100% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
     }

     10%,
     30%,
     50%,
     70% {
         -webkit-transform: translateX(-10px);
         transform: translateX(-10px);
     }

     20%,
     40%,
     60% {
         -webkit-transform: translateX(10px);
         transform: translateX(10px);
     }

     80% {
         -webkit-transform: translateX(8px);
         transform: translateX(8px);
     }

     90% {
         -webkit-transform: translateX(-8px);
         transform: translateX(-8px);
     }
 }

 @keyframes shake-horizontal1 {

     0%,
     100% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
     }

     10%,
     30%,
     50%,
     70% {
         -webkit-transform: translateX(-10px);
         transform: translateX(-10px);
     }

     20%,
     40%,
     60% {
         -webkit-transform: translateX(10px);
         transform: translateX(10px);
     }

     80% {
         -webkit-transform: translateX(8px);
         transform: translateX(8px);
     }

     90% {
         -webkit-transform: translateX(-8px);
         transform: translateX(-8px);
     }
 }

 .shake-horizontal1 {
     animation-name: shake-horizontal1;
     animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
     animation-fill-mode: both;
 }

 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:27:46
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-top {
     0% {
         -webkit-transform: translateY(-45%);
         transform: translateY(-45%);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 1;
     }

     24% {
         opacity: 1;
     }

     40% {
         -webkit-transform: translateY(-25%);
         transform: translateY(-25%);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     65% {
         -webkit-transform: translateY(-15%);
         transform: translateY(-15%);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     82% {
         -webkit-transform: translateY(-6%);
         transform: translateY(-6%);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     93% {
         -webkit-transform: translateY(-4%);
         transform: translateY(-4%);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     25%,
     55%,
     75%,
     87% {
         -webkit-transform: translateY(0px);
         transform: translateY(0px);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     100% {
         -webkit-transform: translateY(0px);
         transform: translateY(0px);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
         opacity: 1;
     }
 }

 @keyframes bounce-top {
     0% {
         -webkit-transform: translateY(-45px);
         transform: translateY(-45px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
         opacity: 1;
     }

     24% {
         opacity: 1;
     }

     40% {
         -webkit-transform: translateY(-24px);
         transform: translateY(-24px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     65% {
         -webkit-transform: translateY(-12px);
         transform: translateY(-12px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     82% {
         -webkit-transform: translateY(-6px);
         transform: translateY(-6px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     93% {
         -webkit-transform: translateY(-4px);
         transform: translateY(-4px);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     25%,
     55%,
     75%,
     87% {
         -webkit-transform: translateY(0px);
         transform: translateY(0px);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     100% {
         -webkit-transform: translateY(0px);
         transform: translateY(0px);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
         opacity: 1;
     }
 }

 .bounce-top {
     animation-name: bounce-top;
     animation-fill-mode: both;
 }


 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:30:43
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
 @-webkit-keyframes heartbeat {
     from {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transform-origin: center center;
         transform-origin: center center;
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     10% {
         -webkit-transform: scale(0.91);
         transform: scale(0.91);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     17% {
         -webkit-transform: scale(0.98);
         transform: scale(0.98);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     33% {
         -webkit-transform: scale(0.87);
         transform: scale(0.87);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     45% {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }
 }

 @keyframes heartbeat {
     from {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transform-origin: center center;
         transform-origin: center center;
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     10% {
         -webkit-transform: scale(0.91);
         transform: scale(0.91);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     17% {
         -webkit-transform: scale(0.98);
         transform: scale(0.98);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }

     33% {
         -webkit-transform: scale(0.87);
         transform: scale(0.87);
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;
     }

     45% {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-animation-timing-function: ease-out;
         animation-timing-function: ease-out;
     }
 }


 .heartbeat {
     animation-name: heartbeat;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
 }

 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:33:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation pulsate-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes pulsate-fwd {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }

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

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }
 }

 @keyframes pulsate-fwd {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }

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

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }
 }


 .pulsate-fwd {
     animation-name: pulsate-fwd;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
 }

 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:34:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
 @-webkit-keyframes jello-horizontal {
     0% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
     }

     30% {
         -webkit-transform: scale3d(1.25, 0.75, 1);
         transform: scale3d(1.25, 0.75, 1);
     }

     40% {
         -webkit-transform: scale3d(0.75, 1.25, 1);
         transform: scale3d(0.75, 1.25, 1);
     }

     50% {
         -webkit-transform: scale3d(1.15, 0.85, 1);
         transform: scale3d(1.15, 0.85, 1);
     }

     65% {
         -webkit-transform: scale3d(0.95, 1.05, 1);
         transform: scale3d(0.95, 1.05, 1);
     }

     75% {
         -webkit-transform: scale3d(1.05, 0.95, 1);
         transform: scale3d(1.05, 0.95, 1);
     }

     100% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
     }
 }

 @keyframes jello-horizontal {
     0% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
     }

     30% {
         -webkit-transform: scale3d(1.25, 0.75, 1);
         transform: scale3d(1.25, 0.75, 1);
     }

     40% {
         -webkit-transform: scale3d(0.75, 1.25, 1);
         transform: scale3d(0.75, 1.25, 1);
     }

     50% {
         -webkit-transform: scale3d(1.15, 0.85, 1);
         transform: scale3d(1.15, 0.85, 1);
     }

     65% {
         -webkit-transform: scale3d(0.95, 1.05, 1);
         transform: scale3d(0.95, 1.05, 1);
     }

     75% {
         -webkit-transform: scale3d(1.05, 0.95, 1);
         transform: scale3d(1.05, 0.95, 1);
     }

     100% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
     }
 }


 .jello-horizontal {

     animation-name: jello-horizontal;
     animation-fill-mode: both;
 }

 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:35:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation jello-diagonal-1
 * ----------------------------------------
 */
 @-webkit-keyframes jello-diagonal-1 {
     0% {
         -webkit-transform: skew(0deg 0deg);
         transform: skew(0deg 0deg);
     }

     30% {
         -webkit-transform: skew(25deg 25deg);
         transform: skew(25deg 25deg);
     }

     40% {
         -webkit-transform: skew(-15deg, -15deg);
         transform: skew(-15deg, -15deg);
     }

     50% {
         -webkit-transform: skew(15deg, 15deg);
         transform: skew(15deg, 15deg);
     }

     65% {
         -webkit-transform: skew(-5deg, -5deg);
         transform: skew(-5deg, -5deg);
     }

     75% {
         -webkit-transform: skew(5deg, 5deg);
         transform: skew(5deg, 5deg);
     }

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

 @keyframes jello-diagonal-1 {
     0% {
         -webkit-transform: skew(0deg 0deg);
         transform: skew(0deg 0deg);
     }

     30% {
         -webkit-transform: skew(25deg 25deg);
         transform: skew(25deg 25deg);
     }

     40% {
         -webkit-transform: skew(-15deg, -15deg);
         transform: skew(-15deg, -15deg);
     }

     50% {
         -webkit-transform: skew(15deg, 15deg);
         transform: skew(15deg, 15deg);
     }

     65% {
         -webkit-transform: skew(-5deg, -5deg);
         transform: skew(-5deg, -5deg);
     }

     75% {
         -webkit-transform: skew(5deg, 5deg);
         transform: skew(5deg, 5deg);
     }

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

 .jello-diagonal-1 {

     animation-name: jello-diagonal-1;
     animation-fill-mode: both;
 }



 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:37:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation scale-up-center
 * ----------------------------------------
 */

 @keyframes scale-up-center {
     0% {
         transform: scale(1);
         opacity: 1;
     }

     100% {
         transform: scale(1.5);
         opacity: 0;
     }
 }

 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:38:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in-center {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }

     100% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
         opacity: 0;
     }
 }

 @keyframes scale-in-center {
     0% {
         -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 1;
     }

     100% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
         opacity: 0;
     }
 }

 .scale-in-center {
     animation-name: scale-in-center;
     animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
     animation-fill-mode: both;
 }


 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:50:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */
 @-webkit-keyframes slide-right {
     0% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
     }

     100% {
         -webkit-transform: translateX(100px);
         transform: translateX(100px);
     }
 }

 @keyframes slide-right {
     0% {
         -webkit-transform: translateX(-100px);
         transform: translateX(-100px);
     }

     100% {
         -webkit-transform: translateX(0px);
         transform: translateX(0px);
     }
 }


 .slide-right {

     animation-name: slide-right;
     animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
     animation-fill-mode: both;
 }



 /* ----------------------------------------------
 * Generated by Animista on 2022-11-23 20:52:5
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation scale-down-center
 * ----------------------------------------
 */
 @-webkit-keyframes scale-down-center {
     0% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
     }

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }
 }

 @keyframes scale-down-center {
     0% {
         -webkit-transform: scale(1.5);
         transform: scale(1.5);
     }

     100% {
         -webkit-transform: scale(1);
         transform: scale(1);
     }
 }


 .scale-down-center {

     animation-name: scale-down-center;
     animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
     animation-fill-mode: both;
 }


 /* ----------------------------------------------
 * Generated by Animista on 2022-11-24 9:51:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
 @-webkit-keyframes rotate-center {
     0% {
         -webkit-transform: rotate(-45deg);
         transform: rotate(-45deg);
     }

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

 @keyframes rotate-center {
     0% {
         -webkit-transform: rotate(-45deg);
         transform: rotate(-45deg);
     }

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


 .rotate-center {
     animation-name: rotate-center;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
 }


 @-webkit-keyframes fade-in {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 1;

     }
 }

 @keyframes fade-in {
     0% {
         opacity: 0;

     }

     100% {
         opacity: 1;

     }
 }


 .fade-in {
     animation-name: fade-in;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
 }


 @-webkit-keyframes fade-out {
     0% {
         opacity: 1;
     }

     100% {
         opacity: 0;

     }
 }

 @keyframes fade-out {
     0% {
         opacity: 1;

     }

     100% {
         opacity: 0;

     }
 }


 .fade-out {
     animation-name: fade-out;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
 }


 @-webkit-keyframes hidden {
     0% {
         opacity: 0;
     }

     100% {
         opacity: 0;

     }
 }

 @keyframes hidden {
     0% {
         opacity: 0;

     }

     100% {
         opacity: 0;

     }
 }


 .hidden {
     animation-name: hidden;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
 }

 .ilogo {
     position: relative;
     width: 100%;
     height: 100%;
 }

 .ilogo:before {
     content: "";
     position: absolute;
     width: 200%;
     height: 20%;
     background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5), transparent);
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-animation: searchLights 3s ease-in 1s infinite;
     -o-animation: searchLights 3s ease-in 1s infinite;
     animation: searchLights 3s ease-in 1s infinite;
     /**第一个数字参数控制扫光速度，数字越大越慢**/
 }

 @keyframes searchLights {
     0% {
         left: -50%;
         top: -50%;
     }

     100% {
         left: 50%;
         top: 100%;
     }
 }


 /* 打印效果 */
 @keyframes typing {
     from {
         width: 0;
     }

     to {
         width: 18.5em;
     }
 }

 /* 光标闪啊闪 */
 @keyframes blink-caret {

     from,
     to {
         border-color: transparent;
     }

     50% {
         border-color: currentColor;
     }
 }

 .typing {
     border-right: 1px solid transparent;
     animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite;
     word-break: break-all;
     overflow: hidden;
 }

 /* ----------------------------------------------
 * Generated by Animista on 2022-11-28 10:48:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 /**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
 @-webkit-keyframes tracking-in-expand {
     0% {
         letter-spacing: -0.5em;
         opacity: 0;
     }

     40% {
         opacity: 0.6;
     }

     100% {
         opacity: 1;
     }
 }

 @keyframes tracking-in-expand {
     0% {
         letter-spacing: -0.5em;
         opacity: 0;
     }

     40% {
         opacity: 0.6;
     }

     100% {
         opacity: 1;
     }
 }


 .tracking-in-expand {
     animation-name: tracking-in-expand;
     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
     animation-fill-mode: both;
 }
/* ----------------------------------------------
 * Generated by Animista on 2022-11-28 11:21:41
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
 @-webkit-keyframes text-pop-up-top {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: none;
    }
    100% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
  }
  @keyframes text-pop-up-top {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: none;
    }
    100% {
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
  }
  
  
  .text-pop-up-top {
	-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}