/*.pop
{
    animation: pop 0.3s linear forwards;

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

    100%
    {
        transform: scale(1.0);
    }
}
.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 {
    from {
       clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        transform: scale(0.9);
        clip-path: circle(0% at 50% 50%);
        transition: 0.5s sopacity 1s, transform 1s, clip-path 1s;
    }
    to {
        transform: scale(1);
        clip-path: circle(100% at 50% 50%);
    }   
 }

 @keyframes lightSpeedOut {
    from {
       clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        transform: scale(0.9);
        clip-path: circle(0% at 50% 50%);
        transition: 0.5s sopacity 1s, transform 1s, clip-path 1s;
    }
    to {
        transform: scale(1);
        clip-path: circle(100% at 50% 50%);
    }   
 }