@keyframes fly-in-1 {
    0%{
        -webkit-transform: translateY(-500%) scale(2) rotateY(0);
        -moz-transform: translateY(-500%) scale(2) rotateY(0);
        -ms-transform: translateY(-500%) scale(2) rotateY(0);
        -o-transform: translateY(-500%) scale(2) rotateY(0);
        transform: translateY(-500%) scale(2) rotateY(0);
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    20%{
        -webkit-transform: translateY(0) scale(1) rotateY(360deg);
        -moz-transform: translateY(0) scale(1) rotateY(360deg);
        -ms-transform: translateY(0) scale(1) rotateY(360deg);
        -o-transform: translateY(0) scale(1) rotateY(360deg);
        transform: translateY(0) scale(1) rotateY(360deg);
    }
    80%{
        opacity: 1;
        -webkit-transform: scale(1) rotateX(0);
        -moz-transform: scale(1) rotateX(0);
        -ms-transform: scale(1) rotateX(0);
        -o-transform: scale(1) rotateX(0);
        transform: scale(1) rotateX(0);
    }
    100%{
        -webkit-transform: scale(0) rotateX(80deg);
        -moz-transform: scale(0) rotateX(80deg);
        -ms-transform: scale(0) rotateX(80deg);
        -o-transform: scale(0) rotateX(80deg);
        transform: scale(0) rotateX(80deg);
        opacity: 0;
    }
}
@keyframes fly-in-2 {
    0%{
        -webkit-transform: translateY(500%) scale(2) rotateY(0);
        -moz-transform: translateY(500%) scale(2) rotateY(0);
        -ms-transform: translateY(500%) scale(2) rotateY(0);
        -o-transform: translateY(500%) scale(2) rotateY(0);
        transform: translateY(500%) scale(2) rotateY(0);
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    20%{
        -webkit-transform: translateY(0) scale(1) rotateY(-360deg);
        -moz-transform: translateY(0) scale(1) rotateY(-360deg);
        -ms-transform: translateY(0) scale(1) rotateY(-360deg);
        -o-transform: translateY(0) scale(1) rotateY(-360deg);
        transform: translateY(0) scale(1) rotateY(-360deg);
    }
    80%{
        opacity: 1;
        -webkit-transform: scale(1) rotateX(0);
        -moz-transform: scale(1) rotateX(0);
        -ms-transform: scale(1) rotateX(0);
        -o-transform: scale(1) rotateX(0);
        transform: scale(1) rotateX(0);
    }
    100%{
        -webkit-transform: scale(0) rotateX(80deg);
        -moz-transform: scale(0) rotateX(80deg);
        -ms-transform: scale(0) rotateX(80deg);
        -o-transform: scale(0) rotateX(80deg);
        transform: scale(0) rotateX(80deg);
        opacity: 0;
    }
}
@keyframes fly-in-3 {
    0%{
        -webkit-transform: translateX(-300%) scale(2) rotateZ(0);
        -moz-transform: translateX(-300%) scale(2) rotateZ(0);
        -ms-transform: translateX(-300%) scale(2) rotateZ(0);
        -o-transform: translateX(-300%) scale(2) rotateZ(0);
        transform: translateX(-300%) scale(2) rotateZ(0);
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    20%{
        -webkit-transform: translateX(0) scale(1) rotateZ(360deg);
        -moz-transform: translateX(0) scale(1) rotateZ(360deg);
        -ms-transform: translateX(0) scale(1) rotateZ(360deg);
        -o-transform: translateX(0) scale(1) rotateZ(360deg);
        transform: translateX(0) scale(1) rotateZ(360deg);
    }
    80%{
        opacity: 1;
        -webkit-transform: scale(1) rotateX(0);
        -moz-transform: scale(1) rotateX(0);
        -ms-transform: scale(1) rotateX(0);
        -o-transform: scale(1) rotateX(0);
        transform: scale(1) rotateX(0);
    }
    100%{
        -webkit-transform: scale(0) rotateX(80deg);
        -moz-transform: scale(0) rotateX(80deg);
        -ms-transform: scale(0) rotateX(80deg);
        -o-transform: scale(0) rotateX(80deg);
        transform: scale(0) rotateX(80deg);
        opacity: 0;
    }
}
@keyframes fly-in-4 {
    0%{
        -webkit-transform: translateX(300%) scale(2) rotateZ(0);
        -moz-transform: translateX(300%) scale(2) rotateZ(0);
        -ms-transform: translateX(300%) scale(2) rotateZ(0);
        -o-transform: translateX(300%) scale(2) rotateZ(0);
        transform: translateX(300%) scale(2) rotateZ(0);
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    20%{
        -webkit-transform: translateX(0) scale(1) rotateZ(-360deg);
        -moz-transform: translateX(0) scale(1) rotateZ(-360deg);
        -ms-transform: translateX(0) scale(1) rotateZ(-360deg);
        -o-transform: translateX(0) scale(1) rotateZ(-360deg);
        transform: translateX(0) scale(1) rotateZ(-360deg);
    }
    80%{
        opacity: 1;
        -webkit-transform: scale(1) rotateX(0);
        -moz-transform: scale(1) rotateX(0);
        -ms-transform: scale(1) rotateX(0);
        -o-transform: scale(1) rotateX(0);
        transform: scale(1) rotateX(0);
    }
    100%{
        -webkit-transform: scale(0) rotateX(80deg);
        -moz-transform: scale(0) rotateX(80deg);
        -ms-transform: scale(0) rotateX(80deg);
        -o-transform: scale(0) rotateX(80deg);
        transform: scale(0) rotateX(80deg);
        opacity: 0;
    }
}