/*IN*/
/* ----------------------------------------------
 * Generated by Animista on 2022-9-5 17:42:3 AND animate css
 * Licensed under FreeBSD License.
 * w: http://animista.net, t: @cssanimista
 * https://animate.style/
 * modifify by Hamaziel for perso project
 * ---------------------------------------------- */

@-webkit-keyframes slide-in-elliptic-right-fwd {
  0% {
    -webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
            transform: translateX(800px) rotateY(-30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: -1800px 50%;
            transform-origin: -1800px 50%;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-right-fwd {
  0% {
    -webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
            transform: translateX(800px) rotateY(-30deg) scale(0);
    -webkit-transform-origin: -100% 50%;
            transform-origin: -100% 50%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0) scale(1);
            transform: translateX(0) rotateY(0) scale(1);
    -webkit-transform-origin: -1800px 50%;
            transform-origin: -1800px 50%;
    opacity: 1;
  }
}


@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
            transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
            transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}


@-webkit-keyframes backInTop {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInTop {
   0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 1;
  }

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

@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from{opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
  to{opacity: 1;filter: opacity(1);-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
}
/*Bounce*/
@-webkit-keyframes gelatine {
  from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
  50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
  75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
@keyframes gelatine {
  from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
  50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
  75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
/* ----------------------------------------------
 * Generated by Animista on 2022-9-8 20:5:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation color-change-5x
 * ----------------------------------------
 */
@-webkit-keyframes color-change {
  0%{
background-size:100% 100%;
  }
  50%
  {
background-size:110% 110%;
  }
  100%
  {
   background-size:100% 100%;
  }
}
@keyframes color-change {
  0%{
background-size:100% 100%;
  }
  50%
  {
background-size:110% 110%;
  }
  100%
  {
   background-size:100% 100%;
  }
}

/*IN */
.backInDown {
  -webkit-animation: 1s backInDown 1;
  animation: 1s backInDown 1;
}
.backOutTop {
  -webkit-animation: 1s backInTop 1 reverse;
  animation: 1s backInTop 1 reverse;
}
.rollInleft {
	-webkit-animation: roll-in-left 1s ease-out;
	  animation: roll-in-left 1s ease-out;
}
.fadeInLeft {
   -webkit-animation: 1s fadeInLeft 1;
  animation: 1s fadeInLeft 1;
}
.fadeInRight {
   -webkit-animation: 1s fadeInRight 1;
  animation: 1s fadeInRight 1;
}
.slideInRight {
	-webkit-animation: slide-in-elliptic-right-fwd 1s;
	        animation: slide-in-elliptic-right-fwd 1s;
}
/*OUT*/
.backOutDown {
  -webkit-animation: 1s backInDown 1 reverse;
  animation: 1s backInDown 1 reverse;
}
.rollOutleft
{
  -webkit-animation: roll-in-left 1s reverse;
  animation: roll-in-left 1s reverse;
}
.fadeOutLeft {
   -webkit-animation: 1s fadeInLeft 1 reverse;
  animation: 1s fadeInLeft 1 reverse;
}
.fadeOutRight {
   -webkit-animation: 1s fadeInRight 1 reverse;
  animation: 1s fadeInRight 1 reverse;
}
.slideOutRight {
	-webkit-animation: slide-in-elliptic-right-fwd 1s reverse;
	        animation: slide-in-elliptic-right-fwd 1s reverse;
}

/*other*/
.color-change {
	-webkit-animation: color-change 4s linear infinite alternate both;
	        animation: color-change 4s linear infinite alternate both;
}
.bounce{
   -webkit-animation: 1.5s gelatine infinite;
  animation: 1.5s gelatine infinite;
}
.no-animation
{
  	-webkit-animation: none;-moz-animation:none;-ms-animation:none;-o-animation:none;animation: none;
}