@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;

  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}


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

  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0), skew(-9deg, 0deg);
  }
}

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

  }

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

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;

  animation-name: fadeInLeft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fadeGreen {
  from {
    background-color: rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
  }

  to {
    background-color: #23FF00;
    border: 2px solid rgb(14, 107, 0);
  }
}

@keyframes fadeGreen {
  from {

    background-color: rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
  }

  to {
    background-color: #23FF00;
    border: 2px solid rgb(14, 107, 0);

  }
}

.fadeGreen {
  -webkit-animation-name: fadeGreen;
  animation-name: fadeGreen;
  animation-duration: 2s;
  /* animation-timing-function: ease-in-out; */
  /* animation-fill-mode: both; */
}

@-webkit-keyframes fadeRed {
  from {
    border: 2px solid transparent;

  }

  to {
    border: 2px solid #ff5656;
  }
}

@keyframes fadeRed {
  from {
    border: 2px solid transparent;

  }

  to {
    border: 2px solid #ff5656;
  }
}

.fadeRed {
  -webkit-animation-name: fadeRed;
  animation-name: fadeRed;
  animation-duration: 2s;
  /* animation-timing-function: ease-in-out; */
  /* animation-fill-mode: both; */
}


@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation: fadeOut alternate infinite 2s;

}


@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

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

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

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

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
  animation-duration: 1s;
  animation-fill-mode: forwards
}


@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

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

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

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

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
  animation-duration: 1s;
  animation-fill-mode: forwards
}


@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

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

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}



.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;

  animation-name: fadeOutLeft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes shake {
  from {
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.4);


  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.4);
  }

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

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
    background-color: #e41e1ea6;
    border: 2px solid #ff5656;
  }
}

@keyframes shake {
  from {
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.4);


  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    background-color: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.4);
  }

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

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
    background-color: #e41e1ea6;
    border: 2px solid #ff5656;
  }
}


.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  animation-duration: 1s;
  /* animation-fill-mode: forwards; */
}

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

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

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

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

.fadeInUp {
  opacity: 0;

  animation-delay: 1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}


@-webkit-keyframes fadeInLeft2 {
  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 fadeInLeft2 {
  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);
  }
}

.fadeInLeft2 {
  -webkit-animation-name: fadeInLeft2;
  animation-name: fadeInLeft2;


  opacity: 0;

  animation-delay: 2s;

  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.fadeInLeft2fast {
  -webkit-animation-name: fadeInLeft2;
  animation-name: fadeInLeft2;


  opacity: 0;

  /* animation-delay: 2s; */

  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}



@-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;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;



  opacity: 0;

  animation-delay: 2s;

  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.fadeInRightfast {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;



  opacity: 0;


  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}