@keyframes animate {

    100% {
        transform: translate(-120%, 0);
    }
}


@keyframes pop {
    0% {
        width: 0%;
        height: 0%;
        opacity: 0;
    }

    100% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
}

@keyframes unpop {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;

    }

    100% {
        width: 0%;
        height: 0%;
        opacity: 0;
    }
}

@keyframes popslide {
    0% {
       top:50%;
       left: 110%;

    }

    20% {
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
    }

    50%{
        top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
    }
    80%{
        top: 50%;
       left: 110%;
       /* transform: translate(-50%,-50%0); */
    }
}