@keyframes iconZoom {
    0% {
        font-size: 21px;
    }
    30% {
        font-size: 27px;
    }
    75% {
        font-size: 27px;
    }
    100% {
        font-size: 21px;
    }
}

@keyframes imageZoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.24);
    }
    100% {
        transform: scale(1);
    }
}

%animation-zoom {
    animation: imageZoom linear 50s;
    animation-iteration-count: infinite;
}

.animation-zoom {
    @extend %animation-zoom;
}

%animation-img-hover {
    img {
        transition: width 1s ease-in-out;
    }
    @include hover() {
        img {
            width: 150% !important;
        }
    }
}

.animation-img-hover {
    @extend %animation-img-hover;
}

.cube-up, .cube-down {
    transition: transform .5s ease-in-out;
    transform-style: preserve-3d;
}

.cube-up {
    transform: rotateY(0deg) rotateX(-90deg) translateZ(-25px);
}

.cube-down {
    transform: rotateY(0deg) rotateX(90deg) translateZ(-25px);
}

.cube-show {
    transform: rotateY(0deg) rotateX(0deg) translateZ(-25px);
}

.cube-clear {
    transform: none !important;
    transform-style: flat !important;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

%img-loading {
    position: relative;
    &:before {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transition: transform .5s ease-in-out;
        transform: translateY(-50%) translateX(-50%);
        animation: rotate 1s infinite steps(8);
        color: $color-bg;
        @extend %icon;
        content: $icon-refresh;
    }
    &:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: "";
        opacity: .6;
        background: $color;
    }
}