@media screen and (min-width:768px){
    .animatable {
        transition: 2s ease-out, transform 2s ease-out; 
    }
    
    .animatable.is-visible {
        transform: translate(0, 0) !important; 
    }
    
    
    .animate-from-left,
    .animate-out-to-left {
        transform: translateX(var(--x-pos, -400px)) !important; 
    }
    
    .animate-from-right,
    .animate-out-to-right {
        transform: translateX(var(--x-pos, 400px)) !important;
    }
    
    .animate-from-top,
    .animate-out-to-top {
        transform: translateY(var(--y-pos, -400px)) !important;
    }
    
    .animate-from-bottom,
    .animate-out-to-bottom {
        transform: translateY(var(--y-pos, 400px)) !important;
    }
    
    
    .delay-200 { transition-delay: 0.2s !important; }
    .delay-400 { transition-delay: 0.4s !important; }
    .delay-500 { transition-delay: 0.5s !important; }
    .delay-600 { transition-delay: 0.6s !important; }
    .delay-700 { transition-delay: 0.7s !important; }
    .delay-800 { transition-delay: 0.8s !important; }
}