*,*:before,*:after {
    box-sizing:border-box;
  }
  
  .page-wrapper {
    min-height:100%;
  /*   display:flex;
    align-items:center;
    justify-content:center; */
    button:hover {
    background-color: white; /* Nuevo color de fondo cuando se pasa el mouse */
    color: #292d48;
  }
    button {
      padding:10px;
      border:none;
      background:lighten(#292d48,65);
      position:relative;
      outline:none;
      border-radius:5px;
      /* color:#292d48; */
      font-size:15px;
      
      .cart-item {
        position:absolute;
        height:24px;
        width:24px;
        top:-10px;
        right:-10px;
        &:before {
          content:'1';
          display:block;
          line-height:24px;
          height:24px;
          width:24px;
          font-size:12px;
          font-weight:600;
          background:#2bd156;
          color:white;
          border-radius:20px;
          text-align:center;
        }
      }
      &.sendtocart {
        .cart-item {
          display:block;
          animation: xAxis 1s forwards cubic-bezier(1.000,0.440,0.840,0.165);
          &:before {
            animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
          }
        }
      }
    }
  }
  
  .cart {
    position:relative;
    top:0px;
    right:0px;
    width:40px;
    height:40px;
    background:#292d48;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    i {
      font-size:25px;
      color:white !important;
      margin-left: -25px;   
    }
    &:before {
      content:attr(data-totalitems);
      font-size:12px;
      font-weight:600;
      position:relative;
      top:-20px;
      right:-25px;
      background:#2bd156;
      line-height:24px;
      padding:0 5px;
      height:24px;
      min-width:24px;
      color:white;
      text-align:center;
      border-radius:24px;
    }
    &.shake {
      animation: shakeCart .4s ease-in-out forwards;
    }
  }
  
  @keyframes xAxis {
    100% {
      transform: translateX(calc(50vw - 105px));
    }
  }
  
  @keyframes yAxis {
    100% {
      transform: translateY(calc(-50vh + 75px));
    }
  }
  
  @keyframes shakeCart {
    25% {
      transform:translateX(6px)
    }
    50% {
      transform:translateX(-4px);
    }
    75% {
      transform:translateX(2px);
    }
    100% {
      transform:translateX(0);
    }
  }
  
  
  @media (max-width: 877px){
  *,*:before,*:after {
    box-sizing:border-box;
  }
  
  
  .cart {
    position:fixed;
    bottom: 120px;
    top: unset;
    right:20px;
    width:50px;
    height:50px;
    display:flex;
    
    i {
      position:relative;
      margin-left: 0px;  
    }
    &:before {
      position:absolute;
      top:-12px;
      right:-12px;
    }
    &.shake {
      animation: shakeCart .4s ease-in-out forwards;
    }
  }  
  }