diff --git a/index.html b/index.html
index 50b8d73..664ef21 100644
--- a/index.html
+++ b/index.html
@@ -200,7 +200,7 @@
                 align-items: center;
                 background-size: cover;
                 background-position: center;
-                transform: translateX(100%);
+                transform: translateY(-100%);
                 opacity: 0;
                 transition:
                     transform 0.5s ease,
@@ -208,12 +208,12 @@
                 z-index: 1;
             }
             .hero-slide.active {
-                transform: translateX(0);
+                transform: translateY(0);
                 opacity: 1;
                 z-index: 2;
             }
             .hero-slide.prev {
-                transform: translateX(-100%);
+                transform: translateY(100%);
                 opacity: 0;
                 z-index: 1;
             }
@@ -1549,30 +1549,30 @@
                 var current = slides[si];
                 var next = slides[i];
                 if (direction === 1) {
-                    current.style.transform = "translateX(-100%)";
+                    current.style.transform = "translateY(100%)";
                     current.style.opacity = "0";
                     current.style.zIndex = "1";
-                    next.style.transform = "translateX(100%)";
+                    next.style.transform = "translateY(-100%)";
                     next.style.opacity = "0";
                     next.style.zIndex = "1";
                     requestAnimationFrame(function () {
                         next.style.transition =
                             "transform 0.5s ease, opacity 0.5s ease";
-                        next.style.transform = "translateX(0)";
+                        next.style.transform = "translateY(0)";
                         next.style.opacity = "1";
                         next.style.zIndex = "2";
                     });
                 } else {
-                    current.style.transform = "translateX(100%)";
+                    current.style.transform = "translateY(-100%)";
                     current.style.opacity = "0";
                     current.style.zIndex = "1";
-                    next.style.transform = "translateX(-100%)";
+                    next.style.transform = "translateY(100%)";
                     next.style.opacity = "0";
                     next.style.zIndex = "1";
                     requestAnimationFrame(function () {
                         next.style.transition =
                             "transform 0.5s ease, opacity 0.5s ease";
-                        next.style.transform = "translateX(0)";
+                        next.style.transform = "translateY(0)";
                         next.style.opacity = "1";
                         next.style.zIndex = "2";
                     });