/* ============================================
    Table of Contents:
    1. Animation for images
============================================ */

/* =========== [1. Animation for images] =========== */
[data-image-animation] .outer {
    position: relative;
    display: block;
    background-color: #c7c7c7;
    transition-delay: 1.2s;
    isolation: isolate;
    overflow: hidden;
}

[data-image-animation] .outer.after-animation {
    background-color: transparent;
}

[data-image-animation] picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translateX(-120%) scale(1.2);
    transition: transform 1.02s cubic-bezier(.2,.64,.24,.99);
    will-change: transform;
    transform-origin: left center;
    opacity: 0;
}

[data-image-animation] picture.visible {
    opacity: 1;
}

[data-image-animation] .uk-slideshow-items .outer {
    width: 100%;
    height: 100%;
}

[data-image-animation] picture .el-image {
    transition: transform 1.02s cubic-bezier(.2,.64,.24,.99);
    transform: translateX(100%) scale(1.2);
    will-change: transform;
    transform-origin: center center;
}

[data-image-animation] picture.after-animation,
[data-image-animation] picture .el-image.after-animation {
    transform: translateX(0) scale(1);
}