@keyframes fadingAnimation{
    0% {opacity: 0;}
    30% {opacity: 1;}
    70% {opacity: 1;}
    90% {opacity: 0;}
}
@keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes inputInvalid{
  25%{transform: translateX(3px);}
  50%{transform: translateX(-3px);}
  75%{transform: translateX(3px);}
}
@keyframes scaleUp{
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes slowScaleUp{
    0% {transform: scale(0.9);}
    100% {transform: scale(1.2);}
}
@keyframes leftToRight{
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}
@keyframes rightToLeft{
    0% {transform: translateX(100%);}
    100% {transform: translateX(0);}
}
@keyframes topToBottom{
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0);}
}
@keyframes bottomToTop{
    0% {transform: translateY(100%);}
    100% {transform: translateY(0);}
}
@keyframes topToBottomSlight{
    0% {transform: translateY(-20%);}
    100% {transform: translateY(0);}
}
@keyframes bottomToTopSlight{
    0% {transform: translateY(20%);}
    100% {transform: translateY(0);}
}
@keyframes rotateRight{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes rotateLeft{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
@keyframes focus-in-expand {
    0% {
        letter-spacing:-.5em;
        filter:blur(12px);
        /* opacity:0; */
    }
    100% {
        filter:blur(0);
        /* opacity:1; */
    }
}
@keyframes focus-in-contract {
    0% {
        letter-spacing:0.5em;
        filter:blur(12px);
        /* opacity:0; */
    }
    100% {
        filter:blur(0);
        /* opacity:1; */
    }
}
@keyframes blur-in {
    0% {
        /* opacity: 0; */
        filter:blur(12px) opacity(0%);
    }
    100% {
        /* opacity: 1; */
        filter:blur(0);
    }
}
@keyframes blur-out {
    0% {
        filter:blur(0);
    }
    100% {
        filter:blur(12px) opacity(0%);
    }
}
@keyframes slide-top {
    0% {
        /* opacity: 0; */
        transform:translateY(100px);
    }
    100% {
        /* opacity: 1; */
        transform:translateY(0px);
    }
}
@keyframes slide-bottom {
    0% {
        /* opacity: 0; */
        transform:translateY(-100px);
    }
    100% {
        /* opacity: 1; */
        transform:translateY(0px);
    }
}
@keyframes slide-left {
    0% {
        /* opacity: 0; */
        transform:translateX(100px);
    }
    100% {
        /* opacity: 1; */
        transform:translateX(0px);
    }
}
@keyframes slide-right {
    0% {
        /* opacity: 0; */
        transform:translateX(-100px);
    }
    100% {
        /* opacity: 1; */
        transform:translateX(0px);
    }
}
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}
@-webkit-keyframes text-shadow-drop-bl {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: -6px 6px 18px rgba(0, 0, 0, 0.35);
  }
}
@keyframes text-shadow-drop-bl {
  0% {
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: -6px 6px 18px rgba(0, 0, 0, 0.35);
  }
}

@keyframes changeColor1 {
    0%{color: white}
    100%{color: #d1798d}
}

@keyframes scale-in-ver-top {
  0% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-ver-bottom {
  0% {
    transform: scaleY(0);
    transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-hor-left {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-hor-right {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

.fading{
    animation: fadingAnimation 10s linear infinite;
}