.card-translate {
    animation-name: card-translate;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-2 {
    animation-name: card-translate-2;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-3 {
    animation-name: card-translate-3;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-4 {
    animation-name: card-translate-4;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-5 {
    animation-name: card-translate-5;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-6 {
    animation-name: card-translate-6;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-7 {
    animation-name: card-translate-7;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-8 {
    animation-name: card-translate-8;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-9 {
    animation-name: card-translate-9;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-10 {
    animation-name: card-translate-10;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.card-translate-11 {
    animation-name: card-translate-11;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes card-translate {
    0% {
        transform: translate(500px, 250px) rotate(40deg);
        
    }
    100% {transform: translate(0px)}
}

@keyframes card-translate-2 {
    0% {
        transform: translate(100px, 400px) rotate(-25deg);
    }

    100% {
        transform: translate(0px)
    }
}

@keyframes card-translate-3 {
    0% {
        transform: translate(-600px, 200px) rotate(45deg);
    }

    100% {
        transform: translate(0px)
    }
}

@keyframes card-translate-4 {
    0% {
        transform: translate(500px, -400px) rotate(-15deg);
    }

    100% {
        transform: translate(0px)
    }
}

@keyframes card-translate-5 {
    0% {
        transform: translate(100px, -330px) rotate(35deg);
    }

    100% {
        transform: translate(0px)
    }
}

@keyframes card-translate-6 {
    0% {
        transform: translate(-530px, -130px) rotate(-50deg);
    }

    100% {
        transform: translate(0px)
    }
}

@keyframes card-translate-7 {
    0% {
        transform: translate(330px, -430px) rotate(-20deg);
    }

    100% {
        transform: translate(0px)
    }
}

@keyframes card-translate-8 {
    0% {
        transform: translate(20px, -330px) rotate(20deg);
    }

    100% {
        transform: translate(0px)
    }
}

@keyframes card-translate-9 {
    0% {
        transform: translate(-380px, -630px) rotate(35deg);
    }

    100% {
        transform: translate(0px)
    }
}

@keyframes card-translate-10 {
    0% {
        transform: translate(380px, -830px) rotate(-35deg);
    }

    100% {
        transform: translate(0px)
    }
}
@keyframes card-translate-11 {
    0% {
        transform: translate(380px, -830px) rotate(-35deg);
    }

    100% {
        transform: translate(0px)
    }
}