@-webkit-keyframes selfFadeInRight {
    0%{
        opacity: 0;
        transform: translateX(20%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes selfFadeInRight {
    0%{
        opacity: 0;
        transform: translateX(20%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@-webkit-keyframes selfFadeInLeft {
    0%{
        opacity: 0;
        transform: translateX(-20%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes selfFadeInLeft {
    0%{
        opacity: 0;
        transform: translateX(-20%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@-webkit-keyframes selfFadeOutLeft {
    0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(-20%);
    }
}
@keyframes selfFadeOutLeft {
    0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(-20%);
    }
}
@-webkit-keyframes selfFadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes selfFadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes selfFadeInUp {
    0%{
        opacity: 0;
        transform: translateY(2rem);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes selfFadeInUp {
    0%{
        opacity: 0;
        transform: translateY(2rem);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@-webkit-keyframes selfFadeOutBottom {
    0%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(2rem);
    }
}
@keyframes selfFadeOutBottom {
    0%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(2rem);
    }
}
@-webkit-keyframes changeRotate{       
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
}
@keyframes changeRotate{       
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
}
@-webkit-keyframes changeRotateReverse{       
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(-360deg);
    }
}
@keyframes changeRotateReverse{       
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(-360deg);
    }
}
@-webkit-keyframes selfFadeIn{       
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes selfFadeIn{       
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes caseFadeOutLeft {
    0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(-100%);
    }
}
@keyframes caseFadeOutLeft {
    0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(-100%);
    }
}
.fadeInUpSelf{
    -webkit-animation-name: selfFadeInUp;
            animation-name: selfFadeInUp;
    -webkit-animation-duration:0.5s;
            animation-duration:0.5s;
}
.fadeOutBottomSelf{
    -webkit-animation-name: selfFadeOutBottom;
            animation-name: selfFadeOutBottom;
    -webkit-animation-duration:0.5s;
            animation-duration:0.5s;
}
.characterFadeInRight{
    -webkit-animation-name: selfFadeInRight ;
            animation-name: selfFadeInRight ;
    -webkit-animation-duration:0.5s;
            animation-duration:0.5s;
}
.characterFadeInLeft{
    -webkit-animation-name: selfFadeInLeft ;
            animation-name: selfFadeInLeft ;
    -webkit-animation-duration:0.5s;
            animation-duration:0.5s;
}
.characterFadeOutLeft{
    -webkit-animation-name: selfFadeOutLeft ;
            animation-name: selfFadeOutLeft ;
    -webkit-animation-duration:0.5s;
            animation-duration:0.5s;
}
.characterFadeOut{
    -webkit-animation-name: selfFadeOut;
            animation-name: selfFadeOut;
    -webkit-animation-duration:0.8s;
            animation-duration:0.8s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    
}
.characterFadeOut{
    -webkit-animation-name: selfFadeOut;
            animation-name: selfFadeOut;
    -webkit-animation-duration:0.8s;
            animation-duration:0.8s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    
}
.characterFadeIn{
    -webkit-animation-name: selfFadeIn;
            animation-name: selfFadeIn;
    -webkit-animation-duration:0.9s;
            animation-duration:0.9s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    
}
.music-rotate{
    -webkit-animation:changeRotate infinite 60s linear;
            animation:changeRotate infinite 60s linear;
}
.mobileFadeIn{
    -webkit-animation-name: selfFadeIn ;
            animation-name: selfFadeIn ;
    -webkit-animation-duration:0.5s;
            animation-duration:0.5s;
}
.mobileFadeInDelay{
    -webkit-animation-name: selfFadeIn ;
            animation-name: selfFadeIn ;
    -webkit-animation-duration:0.5s;
            animation-duration:0.5s;
}
.caseFadeOutLeft{
    -webkit-animation: caseFadeOutLeft ;
            animation: caseFadeOutLeft ;
    -webkit-animation-duration:0.7s;
            animation-duration:0.7s;
}