.animation_fadein_bottom {
        opacity: 0;
        animation-name: animation_fadein_bottom;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_fadein_top {
        opacity: 0;
        animation-name: animation_fadein_top;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_fadein_left {
        opacity: 0;
        animation-name: animation_fadein_left;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_fadein_right {
        opacity: 0;
        animation-name: animation_fadein_right;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_zoom_in {
        opacity: 0;
        // transform: scale(0.5);
        transform: scale(0.75);
        animation-name: animation_zoom_in;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_zoom_in {
        0% {
            opacity: 0;
            // transform: scale(0.5);
            transform: scale(0.75);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_zoom_out {
        opacity: 0;
        transform: scale(1.5);
        animation-name: animation_zoom_out;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_zoom_out {
        0% {
            opacity: 0;
            transform: scale(1.5);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_rotate_in {
        opacity: 0;
        transform: rotate(-180deg);
        animation-name: animation_rotate_in;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_rotate_in {
        0% {
            opacity: 0;
            transform: rotate(-180deg);
        }
        100% {
            opacity: 1;
            transform: rotate(0);
        }
    }

    .animation_bounce_in {
        opacity: 0;
        animation-name: animation_bounce_in;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_bounce_in {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
        }
    }

    .animation_zoom_in_small {
        opacity: 0;
        transform: scale(0.75);
        animation-name: animation_zoom_in_small;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_zoom_in_small {
        0% {
            opacity: 0;
            transform: scale(0.75);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_fadein_fadein {
        opacity: 0;
        transform: scale(1.0);
        animation-name: animation_fadein_fadein;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_fadein_fadein {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }


@media screen and (min-width: 769px) {

    .animation_fadein_bottom_pc {
        opacity: 0;
        animation-name: animation_fadein_bottom_pc;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_fadein_top_pc {
        opacity: 0;
        animation-name: animation_fadein_top_pc;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_fadein_left_pc {
        opacity: 0;
        animation-name: animation_fadein_left_pc;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_fadein_right_pc {
        opacity: 0;
        animation-name: animation_fadein_right_pc;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_zoom_in_pc {
        opacity: 0;
        // transform: scale(0.5);
        transform: scale(0.75);
        animation-name: animation_zoom_in_pc;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_zoom_in_pc {
        0% {
            opacity: 0;
            // transform: scale(0.5);
            transform: scale(0.75);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_zoom_out_pc {
        opacity: 0;
        transform: scale(1.5);
        animation-name: animation_zoom_out_pc;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_zoom_out_pc {
        0% {
            opacity: 0;
            transform: scale(1.5);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_rotate_in_pc {
        opacity: 0;
        transform: rotate(-180deg);
        animation-name: animation_rotate_in_pc;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_rotate_in_pc {
        0% {
            opacity: 0;
            transform: rotate(-180deg);
        }
        100% {
            opacity: 1;
            transform: rotate(0);
        }
    }

    .animation_bounce_in_pc {
        opacity: 0;
        animation-name: animation_bounce_in_pc;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_bounce_in_pc {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
        }
    }

    .animation_zoom_in_small_pc {
        opacity: 0;
        transform: scale(0.75);
        animation-name: animation_zoom_in_small_pc;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_zoom_in_small_pc {
        0% {
            opacity: 0;
            transform: scale(0.75);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_fadein_fadein_pc {
        opacity: 0;
        transform: scale(1.0);
        animation-name: animation_fadein_fadein_pc;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_fadein_fadein_pc {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}


@media screen and (max-width: 768px) {

    .animation_fadein_bottom_smp {
        opacity: 0;
        animation-name: animation_fadein_bottom_smp;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes animation_fadein_bottom_smp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animation_fadein_top_smp {
        opacity: 0;
        animation-name: animation_fadein_top_smp;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes animation_fadein_top_smp {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animation_fadein_left_smp {
        opacity: 0;
        animation-name: animation_fadein_left_smp;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes animation_fadein_left_smp {
        0% {
            opacity: 0;
            transform: translateX(-20px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animation_fadein_right_smp {
        opacity: 0;
        animation-name: animation_fadein_right_smp;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

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

    .animation_zoom_in_smp {
        opacity: 0;
        // transform: scale(0.5);
        transform: scale(0.75);
        animation-name: animation_zoom_in_smp;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes animation_zoom_in_smp {
        0% {
            opacity: 0;
            // transform: scale(0.5);
            transform: scale(0.75);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_zoom_out_smp {
        opacity: 0;
        transform: scale(1.5);
        animation-name: animation_zoom_out_smp;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes animation_zoom_out_smp {
        0% {
            opacity: 0;
            transform: scale(1.5);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_rotate_in_smp {
        opacity: 0;
        transform: rotate(-180deg);
        animation-name: animation_rotate_in_smp;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes animation_rotate_in_smp {
        0% {
            opacity: 0;
            transform: rotate(-180deg);
        }
        100% {
            opacity: 1;
            transform: rotate(0);
        }
    }

    .animation_bounce_in_smp {
        opacity: 0;
        animation-name: animation_bounce_in_smp;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }

    @keyframes animation_bounce_in_smp {
        0% {
            opacity: 0;
            transform: scale(0.3);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
        }
    }

    .animation_zoom_in_small_smp {
        opacity: 0;
        transform: scale(0.75);
        animation-name: animation_zoom_in_small_smp;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes animation_zoom_in_small_smp {
        0% {
            opacity: 0;
            transform: scale(0.75);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animation_fadein_fadein_smp {
        opacity: 0;
        transform: scale(1.0);
        animation-name: animation_fadein_fadein_smp;
        animation-duration: 1s;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes animation_fadein_fadein_smp {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}