.animateOnScroll {
    transition: all ease 2s;
}

.border-left-animation.animateOnScroll {
    height: 0;
    opacity: 0;
}

.border-left-animation.animateOnScroll.animate {
    height: 100%;
    opacity: 1;
}

.opacity-animation {
    opacity: 0;
    transition: all ease 1s;
}

.opacity-animation.animate {
    opacity: 1;
    transition: all ease 1s;
}

.opacity-animation.low-opacity.animate {
    opacity: 0.5;
    transition: all ease 1s;
}

.opacity-animation.animateOnload {
    animation: lowOpacityAnimation 1.5s forwards;
}

.opacity-animation.low-opacity.animateOnload {
    animation: lowOpacityAnimation 1.5s forwards;
}

.bottom-to-top-animation.animateOnScroll {
    transform: translateY(50px);
    opacity: 0;
}

.bottom-to-top-animation.animate {
    transform: translateY(0);
    opacity: 1;
}

.cards .slide-in-left.animateOnHover,
.slide-in-left.animateOnHover {
    transform: translateX(-20%);
    transition: all ease 2s;
}

.recent-accolades .subtexts.slide-in-left {
    transform: translateX(-100%);
    transition: all ease 2s;
}

.recent-accolades:hover .slide-in-left.animateOnHover,
.slide-in-left.animateOnHover,
.recent-accolades:hover .subtexts.slide-in-left {
    transform: translateX(0);
    transition: all ease 2s;
}

.zoom-in-animation.animateOnScroll {
    transform: scale(0.7);
}

.zoom-in-animation.animate {
    transform: scale(1);
}

.slide-in-top.animateOnScroll {
    opacity: 0;
}

.slide-in-top.animateOnScroll.animate {
    animation: slideInTop 1s forwards;
}

.slide-in-bottom.animateOnScroll {
    opacity: 0;
}

.slide-in-bottom.animate {
    animation: slideInBottom 1s forwards;
}

.rotate-in-zoom-in-animation {
    transform: scale(0.8) rotate(-40deg);
    opacity: 0.3;
    transition: all ease 2s;
}

.rotate-in-zoom-in-animation.animate {
    opacity: 1;
    transform: scale(1.1) rotateX(0);
    transition: all ease-out 2s;
}

.ease-in-5s {
    transition: all ease 5s;
}

.ease-in-4s {
    transition: all ease-in 4s;
}

.ease-in-3s {
    transition: all ease-in 3s;
}

.ease-in-2s {
    transition: all ease-in 2s;
}

.ease-in-1s {
    transition: all ease-in 1s;
}

.animation-delay-1s {
    animation-delay: 1s;
}

.animation-delay-2s {
    animation-delay: 2s;
}

.animation-delay-3s {
    animation-delay: 3s;
}

.animation-delay-4s {
    animation-delay: 4s;
}

.animation-delay-5s {
    animation-delay: 5s;
}

section.specialize .left .description.animate::before {
    height: 100%;
    width: 2px;
}

@keyframes sliderBottom {
    from {
        top: -100%;
    }

    to {
        top: 0;
    }
}

@keyframes sliderTop {
    from {
        top: 0;
    }

    to {
        top: -100%;
    }
}
@keyframes sliderLeft {
    from {
        left: -100%;
    }

    to {
        left: 0;
    }
}

@keyframes sliderRight {
    from {
        left: 0;
    }

    to {
        left: -100%;
    }
}

@keyframes slideInTop {
    from {
        transform: translateY(-50%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    from {
        transform: translateY(50%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50%);
        opacity: 0;
    }

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

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-50%);
        opacity: 0;
        display: none;
    }
}

@keyframes heightAnimation {
    from {
        height: 0;
        opacity: 0;
    }

    to {
        height: 100%;
        opacity: 1;
    }
}

@keyframes opacityAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes lowOpacityAnimation {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

@keyframes zeroOpacityAnimation {
    to {
        opacity: 0;
    }
}

@keyframes animateWidth {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}