/* LETTERHEAD CAROUSEL ANIMATIONS CSS - APPEND THIS TO style.css */

/* Slide-out / Slide-in animation used when changing the preview image */
@keyframes _ccf_slide-out-left {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes _ccf_slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

#ccf-isolated-container ._ccf_slide-out {
    animation: _ccf_slide-out-left 0.38s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

#ccf-isolated-container ._ccf_slide-in {
    animation: _ccf_slide-in-right 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Pop-out / Pop-in animations for text below the carousel image */
@keyframes _ccf_pop-out {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.85);
        opacity: 0;
    }
}

@keyframes _ccf_pop-in {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#ccf-isolated-container ._ccf_pop-out {
    animation: _ccf_pop-out 0.38s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

#ccf-isolated-container ._ccf_pop-in {
    animation: _ccf_pop-in 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Small transform while clicking size to give feedback */
#ccf-isolated-container .ccf-size-clicked {
    transform: scale(1.02);
    transition: transform 0.25s ease;
}