@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
 body {
	 display: flex;
	 justify-content: flex-start;
	 align-items: center;
	 min-height: 100vh;
	 margin: 0;
}
 .carousel {
	 position: relative;
	 display: flex;
}
 .carousel .slides {
	 position: relative;
	 top: -4em;
	 left: 10em;
}
 .carousel .slides img {
	 position: absolute;
	 width: 450px;
	 height: 450px;
	 opacity: 0;
	 z-index: 9999;
}
 .carousel .slides img.active {
	 opacity: 1;
}
 .carousel .overlays {
	 position: relative;
	 width: 36em;
	 height: 18em;
}
 .carousel .overlays .bar {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background: var(--bar-color);
	 transform-origin: left;
}
 .carousel .nav-links {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: flex-start;
	 margin: 0;
	 padding: 0 0 0 6em;
	 list-style-type: none;
}
 .carousel .nav-links .nav-link {
	 font-size: 2rem;
	 font-family: Lora, serif;
	 line-height: 2;
	 text-decoration: none;
	 color: #7f8c8d;
	 transition: 0.3s;
}
 .carousel .nav-links .nav-link:hover {
	 color: #1c1e1f;
}
 .carousel .nav-links .nav-link.active {
	 color: black;
	 pointer-events: none;
}
 

var navLinks = document.querySelectorAll(".carousel .nav-link");
var slides = document.querySelectorAll(".carousel .slides img");
var overlays = document.querySelectorAll(".carousel .bar");
var maxZIndex = navLinks.length;
var easeInOutQuart = "cubic-bezier(0.77, 0, 0.175, 1)";
slides[0].classList.add("active");
navLinks[0].classList.add("active");
navLinks.forEach(function (navLink, activeIndex) {
    overlays[activeIndex].style.zIndex = "".concat(navLinks.length -
        activeIndex);
    navLink.addEventListener("click", function () {
        // nav-link
        navLinks.forEach(function (navLink) { return navLink.classList.remove("active"); });
        navLink.classList.add("active");
        // slide
        var currentSlide = document.querySelector(".carousel .slides img.active");
        var slideFadeOut = currentSlide.animate([
            { transform: "translateX(0)", opacity: 1 },
            { transform: "translateX(5%)", opacity: 0 }
        ], {
            duration: 600,
            easing: "ease-in",
            fill: "forwards"
        });
        slideFadeOut.onfinish = function () {
            slides.forEach(function (slide) { return slide.classList.remove("active"); });
            var activeSlide = slides[activeIndex];
            activeSlide.classList.add("active");
            activeSlide.animate([
                {
                    transform: "translateX(-5%)",
                    opacity: 0
                },
                {
                    transform: "translateX(0)",
                    opacity: 1
                }
            ], { duration: 600, easing: "ease-out", fill: "forwards" });
        };
        // overlay
        maxZIndex += 1;
        var activeOverlay = overlays[activeIndex];
        activeOverlay.style.zIndex = "".concat(maxZIndex);
        activeOverlay.animate([{ transform: "scaleX(0)" }, { transform: "scaleX(1)" }], { duration: 1200, fill: "forwards", easing: easeInOutQuart });
    });
});