@charset "utf-8";

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 *animation
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.comment-enter {
    opacity: 0;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: commentfadeInDown;
    animation-name: commentfadeInDown;
}

.comment-enter.comment-enter-active {
    opacity: 1;
}

.comment-leave {
    opacity: 1;
    -webkit-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in;
}

.comment-leave.comment-leave-active {
    opacity: 0;
}

@-webkit-keyframes commentfadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -1000px, 0);
    }

    100% {
        opacity:1;
        -webkit-transform: none;
    }
}

@keyframes commentfadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -1000px, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.animate-fade-in-out {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: animateFadeIO;
    animation-name: animateFadeIO;
}

@-webkit-keyframes animateFadeIO {
    0% {
        opacity: 0;
    }
    
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animateFadeIO {
    0% {
        opacity: 0;
    }
    
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.animate-fade-in {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: animateFadein;
    animation-name: animateFadein;
}

@-webkit-keyframes animateFadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes animateFadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate-fade-in-down {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-name: animatefadeInDown;
    animation-name: animatefadeInDown;
}

@-webkit-keyframes animatefadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -1000px, 0);
    }

    99% {
        -webkit-transform: translate3d(0, -1px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
    }
}

@keyframes animatefadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -1000px, 0);
    }

    99% {
        transform: translate3d(0, -1px, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.animate-fade-in-right {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(1000px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(1000px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.animate-fade-in-left {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-1000px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-1000px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}