.focused::before
{
    animation: pop 0.5s ease forwards;
}

@keyframes pop {
    50%
    {
        transform: scale(1.2);
    }
}

.m25, .m50, .m75
{
    animation: left 0.5s linear forwards;
}
.m25
{
    animation-name: left-25;
}
@keyframes left-25
{
    0%
    {
        background-color: rgb(61,144,227);
        width: 0%;
    }
    100%
    {

        background-color: rgb(61,144,227);
        width: 25%;

    }
}
.m50
{
    animation-name: left-50;
}
@keyframes left-50
{
    0%
    {
        background-color: rgb(61,144,227);
        width: 25%;
    }
    100%
    {

        background-color: rgb(61,144,227);
        width: 50%;

    }
}
.m75
{
    animation-name: left-75;
}
@keyframes left-75
{
    0%
    {
        background-color: rgb(61,144,227);
        width: 50%;
    }
    100%
    {

        background-color: rgb(61,144,227);
        width: 75%;

    }
}
.submit:hover
{
    animation: ring 0.5s ease forwards;
}
@keyframes ring {
    0%
    {
        transform: translateX(-3px) rotate(-2deg);
    }
    50%
    {
        transform: translateX(3px) rotate(2deg);
    }
    100%
    {
        transform: none;
    }
}
.thankyou-page
{
    animation: reveal 1s linear forwards;
}
@keyframes reveal {
    0%
    {
        clip-path: circle(0%);
    }
    100%
    {
        clip-path: circle(100%);
    }
}
.thumb-image
{
    animation: ring 1.5s ease forwards;
}
@keyframes ring {
    0%
    {
        transform: translateX(-10px) rotate(-9deg);
    }
    50%
    {
        transform: translateX(10px) rotate(9deg);
    }
    100%
    {
        transform: none;
    }
}
.partical-appear
{
    animation: appear 0.3s linear forwards;
}
@keyframes appear
{
    0%
    {
       visibility: hidden;
        
    }
    50%
    {
       visibility: visible;
        transform: scale(1.5);
    }
    100%
    {
        visibility: visible;
        transform: scale(1.0);
    }    
}
.delay-20ms
{
    animation-delay: 20ms;
}
.delay-40ms
{
    animation-delay: 40ms;
}
.delay-60ms
{
    animation-delay: 60ms;
}
.delay-80ms
{
    animation-delay: 80ms;
}
.delay-10ms
{
    animation-delay: 100ms;
}
.pop-slide
{
    animation: pop-slide 0.5s ease forwards;
}
@keyframes pop-slide
{
    0%
    {
        transform: translateX(500px) scale(0.5);
    }
    70%
    {
        transform: translate(0px) scale(0.5);
    }
    100%
    {
        transform: translate(0px) scale(1);
    }
}