.fadedown
{
    animation: fadedown 0.5s linear forwards;

}
@keyframes fadedown
{
    0%
    {
        transform: translateY(-100%) scale(0.5);
    }
    80%
    {
        transform: translateY(0) scale(0.5);
    }

    100%
    {
        transform: translateY(0) scale(1);
    }
}
.fadeup
{
    animation: fadeup 0.5s linear forwards;

}
@keyframes fadeup
{
    100%
    {
        transform: translateY(-100%) scale(0.5);
    }
    80%
    {
        transform: translateY(0) scale(0.5);
    }

    0%
    {
        transform: translateY(0) scale(1);
    }
}


.reveal
{
    animation: reveal 3s linear 1;
}
@keyframes reveal {
    0%
    {
        opacity: 1;
        display: block;
    }
    30%
    {
        opacity: 1;
        display: block;
    }
    60%
    {
        opacity: 0.7;
        display: block;
    }
    90%
    {
        opacity: 0.3;
        display: block;
    }
    100%
    {
        opacity: 0;

    }
}


.lightSpeedIn
{
    animation: lightSpeedIn 0.7s ease-in forwards;
}
.lightSpeedOut
{
    animation: lightSpeedOut 0.7s ease-out forwards;
}



@keyframes lightSpeedIn {
    0% {
       -webkit-transform: translateX(100%) skewX(-30deg);
       opacity: 0;
    }
    60% {
       -webkit-transform: translateX(-20%) skewX(30deg);
       opacity: 1;
    }
    80% {
       -webkit-transform: translateX(0%) skewX(-15deg);
       opacity: 1;
    }
    100% {
       -webkit-transform: translateX(0%) skewX(0deg);
       opacity: 1;
    }
 }

 @keyframes lightSpeedOut {
    100% {
       -webkit-transform: translateX(100%) skewX(-30deg);
       opacity: 0;
    }
    80% {
       -webkit-transform: translateX(-20%) skewX(30deg);
       opacity: 1;
    }
    60% {
       -webkit-transform: translateX(0%) skewX(-15deg);
       opacity: 1;
    }
    0% {
       -webkit-transform: translateX(0%) skewX(0deg);
       opacity: 1;
    }
 }


 .revealfield
{
    animation: revealfield 0.5s linear forwards;
}
.delay-100ms
{
    animation-delay: 100ms;
}
.delay-200ms
{
    animation-delay: 200ms;
}
.delay-300ms
{
    animation-delay: 300ms;
}
.delay-400ms
{
    animation-delay: 400ms;
}
.delay-500ms
{
    animation-delay: 500ms;
}

.delay-600ms
{
    animation-delay: 600ms;
}
.delay-700ms
{
    animation-delay: 700ms;
}


@keyframes revealfield
{
    from
    {
        opacity: 0;
    }    
    to
    {
        opacity: 1;
    }  
}