/* =====================
    SECTION: Reavls
    ====================== */

.fade-right {
    opacity: 0;
    transform: translateX(-20px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.fade-right.in {
    opacity: 1;
    transform: none;
}

.fade-left {
    opacity: 0;
    transform: translateX(20px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.fade-left.in {
    opacity: 1;
    transform: none;
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.fade-up.in {
    opacity: 1;
    transform: none;
}

.fade-down {
    opacity: 0;
    transform: translateY(-20px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.fade-down.in {
    opacity: 1;
    transform: none;
}

.fade-up-right {
    opacity: 0;
    transform: translateX(-20px) translateY(20px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.fade-up-right.in {
    opacity: 1;
    transform: none;
}

.fade-up-left {
    opacity: 0;
    transform: translateX(20px) translateY(20px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.fade-up-left.in {
    opacity: 1;
    transform: none;
}

.fade-down-right {
    opacity: 0;
    transform: translateX(-20px) translateY(-20px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.fade-down-right.in {
    opacity: 1;
    transform: none;
}

.fade-down-left {
    opacity: 0;
    transform: translateX(20px) translateY(-20px);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.fade-down-left.in {
    opacity: 1;
    transform: none;
}

.flip-right {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(90deg);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: transform;
}

.flip-right.in {
    transform: perspective(1000px) rotateY(0);
}

.flip-left {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(-90deg);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: transform;
}

.flip-left.in {
    transform: perspective(1000px) rotateY(0);
}

.flip-up {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(-90deg);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: transform;
}

.flip-up.in {
    transform: perspective(1000px) rotateX(0);
}

.flip-down {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(90deg);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: transform;
}

.flip-down.in {
    transform: perspective(1000px) rotateX(0);
}

.zoom-in {
    opacity: 0;
    transform: scale(0.35);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.zoom-in.in {
    opacity: 1;
    transform: none;
}

.zoom-out {
    opacity: 0;
    transform: scale(1.75);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-property: opacity, transform;
}

.zoom-out.in {
    opacity: 1;
    transform: none;
}

/* =====================
    SECTION: Others
    ====================== */
    @keyframes carouselScale {
        0% {
            transform: scale(1);
        }
    
        100% {
            transform: scale(1.15);
        }
    }
    
    @keyframes captionSlideIn {
        100% {
            opacity: 1;
            transform: perspective(300px) rotateY(0deg) translateY(0);
        }
    }
    
    @keyframes captionSlideUp {
        100% {
            transform: translateY(0px);
        }
    }