.xisnUDd {
    display: block;
    visibility: hidden;
    height: 20px;
    width: 20px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='16' viewBox='0 0 18 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.012 14.905a19.999 19.999 0 0 1-3.885-2.388C2.528 10.466 1.002 8.095 1 5.442c-.002-2.45 1.922-4.43 4.283-4.432 1.128 0 2.209.453 3 1.258l.715.728.714-.73A4.199 4.199 0 0 1 12.707 1h-.001C15.069.998 16.996 2.97 17 5.421c.004 2.656-1.519 5.032-4.115 7.091a20.008 20.008 0 0 1-3.873 2.393z' stroke='%23ff0000' stroke-width='2' fill='%23ff0000'/%3E%3C/svg%3E");
    background-position: 50%;
    background-size: 15px;
    background-repeat: no-repeat;
    position: absolute;
    top: 20%;
}

.product-image-container .xisnUDd {
    width: 40px;
    height: 40px;
    background-size: 25px;
    top: 30%;
}

.toggle-favorites.animate {
    animation: translating_heart 0.6s linear 0s;
}

@keyframes translating_heart {
    0%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(1.5,1.5);
    }
    100%{
        transform: scale(1,1);
    }
}

.xisnUDd.animate00 {
    animation: translating_a00 1s linear 0s;
}

.xisnUDd.animate10 {
    animation: translating_a10 800ms linear 0s;
}

.xisnUDd.animate20 {
    animation: translating_a20 1200ms linear 0s;
}

.xisnUDd.animate01 {
    animation: translating_a01 1s linear 0s;
}

.xisnUDd.animate11 {
    animation: translating_a11 800ms linear 0s;
}

.xisnUDd.animate21 {
    animation: translating_a21 1200ms linear 0s;
}

.product-image-container .xisnUDd.animate00 {
    animation: translating2_a00 1s linear 0s;
}

.product-image-container .xisnUDd.animate10 {
    animation: translating2_a10 800ms linear 0s;
}

.product-image-container .xisnUDd.animate20 {
    animation: translating2_a20 1200ms linear 0s;
}
.product-image-container .xisnUDd.animate01 {
    animation: translating2_a01 1s linear 0s;
}

.product-image-container .xisnUDd.animate10 {
    animation: translating2_a11 800ms linear 0s;
}

.product-image-container .xisnUDd.animate20 {
    animation: translating2_a21 1200ms linear 0s;
}

@keyframes translating_a00 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(10px, -10px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating_a01 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-40px, -40px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating_a10 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-10px, -10px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating_a11 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-60px, -40px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating_a20 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-10px, 10px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating_a21 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-60px, -20px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating2_a00 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(20px, -20px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating2_a01 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-40px, -60px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating2_a10 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-20px, -20px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating2_a11 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-80px, -60px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating2_a20 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-20px, 20px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes translating2_a21 {
    0%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0;
        visibility: hidden;
    }
    10%{
        transform: translate(0, 0) scale(0.5,0.5);
        opacity: 0.3;
        visibility: visible;
    }
    100%{
        transform: translate(-80px, -20px) scale(0.3,0.3);
        opacity: 0;
        visibility: hidden;
    }
}