.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(0.7);
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes backInLeft {
    0% {
        -webkit-transform: translateX(-2000px) scale(0.7);
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
    80% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.animate__backInLeft {
    -webkit-animation-name: backInLeft;
    animation-name: backInLeft;
}
@-webkit-keyframes backOutLeft {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateX(-2000px) scale(0.7);
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
}
@keyframes backOutLeft {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(0) scale(0.7);
        transform: translateX(0) scale(0.7);
        opacity: 0.7;
    }
    to {
        -webkit-transform: translateX(-2000px) scale(0.7);
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
}
.animate__backOutLeft {
    -webkit-animation-name: backOutLeft;
    animation-name: backOutLeft;
}

.custom-animation-1 {
    opacity: 0;
    transform: scale(1.2);
}



@media (prefers-reduced-motion: no-preference) {
    .custom-animation-1 {
        transition: opacity 1.5s ease, transform 1.5s ease;
    }
}

.custom-animation-1-transition {
    opacity: 1;
    transform: none;
}

@keyframes wipe-enter {
    0% {
        opacity: 0;
        transform: scale(0, 1);
    }
    50% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

.custom-animation-2 {
    opacity:0;
    transition: opacity 0s ease;
}

.custom-animation-2-transition {
    opacity: 1;
    animation: wipe-enter 1.5s 1;

}


.custom-fadeout {
    opacity: 1;
    display: block;
}

@media (prefers-reduced-motion: no-preference) {
    .custom-fadeout {
    }
}

.custom-fadeout-transition {
    opacity: 0;
    transition: opacity 1.5s ease;
}

@keyframes expand-translate {
    0% {
    }
    to {
        height:auto;
        top:50%;
        transform: translate(0%, -50%);
    }
}