@keyframes zbtnRotate {
    0% { transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -all-transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -all-transform: rotateZ(360deg); }
}
@-webkit-keyframes zbtnRotate {
    0% { transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -all-transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -all-transform: rotateZ(360deg); }
}
@-moz-keyframes zbtnRotate {
    0% { transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); -all-transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -all-transform: rotateZ(360deg); }
}



@keyframes zfadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

@-webkit-keyframes zfadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes zfadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

@-webkit-keyframes zfadeInUp {
    0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}




@-webkit-keyframes zfadeInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); }
    100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}

@keyframes zfadeInLeft {
    0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
    100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}


@-webkit-keyframes zfadeInRight {
    0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); }
    100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}

@keyframes zfadeInRight {
    0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
    100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}




@-webkit-keyframes zrotateIn {
    0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; }
    
    100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; }
}

@keyframes zrotateIn {
    0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; }

    100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; }
}