.productButtonAddToCart {
    padding-left: 5px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 100%;
    color: white;
  /*  border: 3px solid yellow;*/
    text-align: center;
}

.buttonAddToCart {
    position: relative;
    background-color: hsl(220, 91%, 68%); /* blue -> #6394F8 */
    border: none;
    color: white;
    width: 100%;
    height: 50px;
    padding-top: 10px;
    padding-bottom: 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*margin: 4px 2px;*/
    cursor: pointer;
    /*  font: 14px/22px "Lato", Arial, sans-serif;*/
    font-size: 1.1rem;
    overflow: hidden;
    transition: .3s ease-in-out;
}

.buttonAddToCart:hover {
  background-color: hsl(0, 0%, 96%); /* White smoke -> #F5F5F5 */
  color: black;
}

.buttonAddToCart:active {
  /*background-color: #008CBA;
  color: white;
  box-shadow: 0 5px #666;
  transform: translateY(4px);*/
  transform: scale(.9);
}

.fa-shopping-cart2 {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -10%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    /*color: #000;*/ 
}

.fa-box {
    position: absolute;
    z-index: 3;
    top: -20%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    /* color: #000; */
}

.buttonAddToCart span {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
}

.addToCart {
    opacity: 1;
    width: 100%;
}

.added {
    opacity: 0;
}

.buttonAddToCart.clicked .fa-shopping-cart2 {
    animation: cart2 1.5s ease-in-out forwards;
}

.buttonAddToCart.clicked .fa-box {
    animation: box 1.5s ease-in-out forwards;
}

.buttonAddToCart.clicked .addToCart {
    animation: txt1 1.5s ease-in-out forwards;
}

.buttonAddToCart.clicked .added {
    animation: txt2 1.5s ease-in-out forwards;
}

@keyframes cart2 {
    0% {
        left: -10%;
    }

    40%, 60% {
        left: 50%;
    }

    100% {
        left: 110%;
    }
}

@keyframes box {
    0%, 40% {
        top: -20%;
    }

    60% {
        top: 40%;
        left: 52%;
    }

    100% {
        top: 40%;
        left: 112%;
    }
}

@keyframes txt1 {
    0% {
        opacity: 1;
    }

    20%, 100% {
        opacity: 0;
    }
}

@keyframes txt2 {
    0%, 80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1600px) {
    .buttonAddToCart {
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 1280px) {
    .buttonAddToCart {
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 992px) {
    .buttonAddToCart {
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 600px) {
    .buttonAddToCart {
        font-size: 1rem;
        height: 40px;
    }
}

@media screen and (max-width: 450px) {
    .buttonAddToCart {
        font-size: 1rem;
    }
}