/*gestione animazione per inserimento nel carrello*/
.animate-cart {
    position: relative;
    -webkit-animation: cartanimation;
    animation: cartanimation;
    -webkit-animation-duration: 0.50s;
    animation-duration: 0.50s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@media screen and (min-width: 768px) {
    @-webkit-keyframes cartanimation {
        0% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            background-color: #4c9890;
            border: 1px solid #4c9890;
            padding: 15px;
        }

        25% {
            -webkit-transform: translate3d(-10px,0,0);
            transform: translate3d(-10px,0,0);
            background-color: #333;
            border: 1px solid #333;
            padding: 15px;
        }

        50% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            background-color: #333;
            border: 1px solid #333;
            padding: 15px;
        }

        75% {
            -webkit-transform: translate3d(10px,0,0);
            transform: translate3d(10px,0,0);
            background-color: #333;
            border: 1px solid #333;
            padding: 15px;
        }

        100% {
            -webkit-transform: translate3d(0px,0,0);
            transform: translate3d(0px,0,0);
            background-color: #4c9890;
            border: 1px solid #4c9890;
            padding: 15px;
        }
    }

    @keyframes cartanimation {
        0% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            background-color: #4c9890;
            border: 1px solid #4c9890;
            padding: 15px;
        }

        25% {
            -webkit-transform: translate3d(-10px,0,0);
            transform: translate3d(-10px,0,0);
            background-color: #333;
            border: 1px solid #333;
            padding: 15px;
        }

        50% {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            background-color: #333;
            border: 1px solid #333;
            padding: 15px;
        }

        75% {
            -webkit-transform: translate3d(10px,0,0);
            transform: translate3d(10px,0,0);
            background-color: #333;
            border: 1px solid #333;
            padding: 15px;
        }

        100% {
            -webkit-transform: translate3d(0px,0,0);
            transform: translate3d(0px,0,0);
            background-color: #4c9890;
            border: 1px solid #4c9890;
            padding: 15px;
        }
    }
}


/*animate the icon*/
.animate-icon {
    -webkit-animation: iconanimation;
    animation: iconanimation;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    transform: translate3d(0, 0, 0);
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

@keyframes iconanimation {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@-webkit-keyframes iconanimation {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}