/*----------------------------
    SLIDE IN ELEMENT
-----------------------------*/
.slide-in-element {
    animation: slideIn 1s ease forwards;
}
@keyframes slideIn {
    from {
        transform: translate(-50%, -100%)
    }
    to {
        transform: translate(-50%, 0);
    }
}

/*----------------------------
    SLIDE IN FROM LEFT
-----------------------------*/
.slide-in-from-left {
    animation: slideInFromLeft 0.8s ease forwards;
}
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%)
    }
    to {
        transform: translateX(0%);
    }
}

/*----------------------------
    SLIDE IN FROM RIGHT
-----------------------------*/
.slide-in-from-right {
    animation: slideInFromRight 0.8s ease forwards;
}
@keyframes slideInFromRight {
    from {
        transform: translateX(100%)
    }
    to {
        transform: translateX(0%);
    }
}

/*----------------------------
    SLIDE OUT FROM RIGHT
-----------------------------*/
.slide-out-to-left {
    animation: slideOutToLeft 0.8s ease forwards;
}
@keyframes slideOutToLeft {
    from {
        transform: translateX(0%)
    }
    to {
        transform: translateX(-100%);
    }
}

/*----------------------------
    HIDE CONTENT TO LEFT
-----------------------------*/
.hide-content-to-left {
    animation: hideContentToLeft 0.8s ease forwards;
}
@keyframes hideContentToLeft {
    from {
        transform: translateX(0%)
    }
    to {
        transform: translateX(-200%);
    }
}

/*----------------------------
    HIDE CONTENT TO RIGHT
-----------------------------*/
.hide-content-to-right {
    animation: hideContentToRight 0.8s ease forwards;
}
@keyframes hideContentToRight {
    from {
        transform: translateX(0%)
    }
    to {
        transform: translateX(200%);
    }
}

/*----------------------------
    SHAKE
-----------------------------*/
.shake {
    animation: shake 500ms ease-out;
}
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    5% {
        transform: translateX(-4px);
    }
    15% {
        transform: translateX(4px);
    }
    25% {
        transform: translateX(-4px);
    }
    35% {
        transform: translateX(4px);
    }
    45% {
        transform: translateX(-4px);
    }
    55% {
        transform: translateX(4px);
    }
    65% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(3px);
    }
    85% {
        transform: translateX(-3px);
    }
    100% {
        transform: translateX(0);
    }
}

/*----------------------------
    FADE IN FROM BOTTOM
-----------------------------*/
.fade-in-from-bottom {
    animation: fade-in-from-bottom 0.6s ease forwards;
}
@keyframes fade-in-from-bottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/*----------------------------
    FADE IN FROM TOP
-----------------------------*/
.fade-in-from-top {
    animation: fade-in-from-top 0.6s ease forwards;
}
@keyframes fade-in-from-top {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/*----------------------------
    CUSTOM PLACEHOLDER WAVE
-----------------------------*/
.ms-placeholder-wave .placeholder {
    mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%) !important;
    mask-size: 200% 100% !important;
    animation: placeholder-wave 2s linear infinite !important;
    -webkit-mask-image: linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%) !important;
    -webkit-mask-size: 200% 100% !important;
}

@keyframes placeholder-wave {
    100% {
        mask-position: -200% 0%;
        -webkit-mask-position: -200% 0%;
    }
}