/* ==> Scroll Animation */

.not-show-odd {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(-50%);
}

.not-show-even {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(50%);
}

.not-show-pop {
    opacity: 0;
    transition: all 0.5s;
    filter: blur(5px);
    transform: translateX(-50%);
    
    transform: scale(0.4);
}

.not-show-pop-slow {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(-50%);
    
    transform: scale(0.4);
}

.not-show-top {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateY(-200%);
}

.not-show-bottom {
    opacity: 0;
    transition: all 1s;
    filter: blur(5px);
    transform: translateY(200%);
}

.not-show-left {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(-30%);
}

.not-show-right {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(30%);
}

.not-show-left-special {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(-15%);
}

.not-show-right-special {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(15%);
}

.not-show-left-high {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(-50%);
}

.not-show-right-high {
    opacity: 0;
    transition: all 1.5s;
    filter: blur(5px);
    transform: translateX(50%);
}

@media (min-width: 992px) {
    
}

@media (max-width: 1286px) {
    .not-show-odd {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(-50%); */
    }
    
    .not-show-even {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(50%); */
    }
    
    .not-show-pop {
        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
    
    .not-show-pop-slow {
        opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
    
    .not-show-top {
        opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateY(-200%);
    }
    
    .not-show-bottom {
        opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateY(200%);
    }
    
    .not-show-left {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(-30%); */
    
        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
    
    .not-show-right {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(30%); */
    
        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
    
    .not-show-left-special {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(-15%); */
    
        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
    
    .not-show-right-special {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(15%); */
    
        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
    
    .not-show-left-high {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(-50%); */
    
        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
    
    .not-show-right-high {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(50%); */
    
        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }

    .not-show-left-high {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(-50%); */

        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
    
    .not-show-right-high {
        /* opacity: 0;
        transition: all 1.5s;
        filter: blur(5px);
        transform: translateX(50%); */

        opacity: 0;
        transition: all 0.5s;
        filter: blur(5px);
        transform: translateX(-50%);
        
        transform: scale(0.4);
    }
}

.show-animation {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);

    transform: scale(1);
}


/* ==> New version animation */

.blur-mode {
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

.move-from-left-sm {
    /* display: none; */
    /* animation: moving .5s ease; */

    transform: translateX(-50px);
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

.move-from-right-sm {
    transform: translateX(50px);
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

.move-from-top-sm {
    transform: translateY(-50px);
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

.move-from-bottom-sm {
    transform: translateY(50px);
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

.move-from-left-md {
    transform: translateX(-100px);
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

.move-from-right-md {
    transform: translateX(100px);
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

.move-from-top-md {
    transform: translateY(-100px);
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

.move-from-bottom-md {
    transform: translateY(100px);
    filter: blur(5px);
    opacity: 0;
    transition: all 1.5s;
}

/* @keyframes moving {
    from {
        transform: translateX(50px); 
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
} */

@media (max-width: 750px) {

    .move-from-left-sm {
        transform: translateX(-50px);
    }

    .move-from-right-sm {
        transform: translateY(50px);
    }

    .move-from-top-sm {
        transform: translateY(50px);
    }

    .move-from-bottom-sm {
        transform: translateY(50px);
    }

    .move-from-left-md {
        transform: translateY(50px);
    }

    .move-from-right-md {
        transform: translateY(50px);
    }

    .move-from-top-md {
        transform: translateY(50px);
    }

    .move-from-bottom-md {
        transform: translateY(50px);
    }
}

.show-move {
    transform: translateX(0px);
    transform: translateY(0px);
    opacity: 1;
    filter: blur(0);
}