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

@media screen and (min-width: 768px) {
    @-webkit-keyframes cartanimation {
        0% {
            width: 100px;
            height: auto;
            top: 0px;
            left: 0px;
            display: block;
            font-size: 0px;
            border-radius: 50%;
        }

        15% {
            width: 75px;
            height: 75px;
            top: 0px;
            left: 0px;
            display: block;
            font-size: 0px;
            border-radius: 75px;
        }

        25% {
            width: 50px;
            height: 50px;
            top: 100px;
            left: 20%;
            display: block;
            font-size: 0px;
        }

        50% {
            width: 20px;
            height: 20px;
            top: -200px;
            left: 100%;
            display: block;
            font-size: 0px;
        }

        100% {
            width: 20px;
            height: 20px;
            top: -700px;
            left: 160%;
            display: block;
            font-size: 0px;
        }
    }

    @keyframes cartanimation {
        /*modifica alla forma del pulsante*/
        0% {
            width: 100px;
            height: auto;
            top: 0px;
            left: 0px;
            display: block;
            font-size: 0px;
        }

        15% {
            width: 75px;
            height: 75px;
            top: 0px;
            left: 0px;
            display: block;
            font-size: 0px;
            border-radius: 25%;
        }

        25% {
            width: 50px;
            height: 50px;
            top: 0px;
            left: -20%;
            display: block;
            font-size: 0px;
            border-radius: 50%;
        }

        50% {
            width: 20px;
            height: 20px;
            top: -100px;
            left: -300%;
            display: block;
            font-size: 0px;
            border-radius: 50%;
        }

        100% {
            width: 20px;
            height: 20px;
            bottom: 1000%;
            left: -700px;
            display: block;
            font-size: 0px;
            border-radius: 50%;
        }
    }
}


/*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);
}

@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);
    }
}