.pet-slide-btn{
  width:670px;
  max-width:100%;
  height:96px;
  border-radius:999px;
  position:relative;
  display:block;
  text-decoration:none;
  overflow:hidden;
  transition:all .65s cubic-bezier(.22,.61,.36,1);
  box-sizing:border-box;
}

.pet-slide-left{
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:290px;
  height:80px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:700;
  line-height:1;
  transition:left .7s cubic-bezier(.22,.61,.36,1),
             opacity .45s ease,
             transform .7s cubic-bezier(.22,.61,.36,1),
             visibility .45s ease;
  z-index:3;
}

.pet-slide-desc{
  position:absolute;
  left:320px;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  line-height:1.35;
  max-width:300px;
  transition:opacity .45s ease, transform .55s ease, visibility .45s ease;
  z-index:1;
}

.pet-slide-hover-text{
  position:absolute;
  left:40px;
  top:50%;
  transform:translateY(-50%) translateX(-16px);
  font-size:26px;
  font-weight:700;
  line-height:1.1;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease .12s,
             transform .65s cubic-bezier(.22,.61,.36,1) .12s,
             visibility 0s linear .12s;
  z-index:2;
}

.mobile-hover-text{
  display:none;
}

.pet-slide-icon{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%) scale(.78);
  width:68px;
  height:68px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease .18s,
             transform .65s cubic-bezier(.22,.61,.36,1) .18s,
             visibility 0s linear .18s;
  z-index:5;
}

.pet-slide-icon i,
.pet-slide-icon svg{
  font-size:26px;
  width:26px;
  height:26px;
  line-height:1;
}

.pet-slide-btn:hover .pet-slide-left{
  left:calc(100% - 320px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-50%) scale(.96);
}

.pet-slide-btn:hover .pet-slide-desc{
  opacity:0;
  visibility:hidden;
  transform:translateY(-50%) translateX(14px);
}

.pet-slide-btn:hover .desktop-hover-text{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}

.pet-slide-btn:hover .pet-slide-icon{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) scale(1);
}

@media (max-width:991px){
  .pet-slide-btn{
    height:88px;
  }

  .pet-slide-left{
    width:240px;
    height:72px;
    font-size:22px;
  }

  .pet-slide-desc{
    left:275px;
    right:24px;
    max-width:260px;
    font-size:13px;
  }

  .pet-slide-hover-text{
    font-size:22px;
  }

  .pet-slide-icon{
    width:60px;
    height:60px;
  }

  .pet-slide-icon i,
  .pet-slide-icon svg{
    font-size:22px;
    width:22px;
    height:22px;
  }

  .pet-slide-btn:hover .pet-slide-left{
    left:calc(100% - 268px);
  }
}

@media (max-width:767px){

  .pet-slide-btn{
    width:100%;
    height:64px;
  }

  .pet-slide-left{
    width:240px;
    height:42px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:14px;
    padding:0 8px;
  }

  .pet-slide-desc{
    display:none;
  }

  .desktop-hover-text{
    display:none;
  }

  .mobile-hover-text{
    display:block;
    left:16px;
    right:58px;
    top:50%;
    transform:translateY(-50%) translateX(-8px);
    font-size:13px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .pet-slide-icon{
    width:36px;
    height:36px;
    right:8px;
  }

  .pet-slide-icon i,
  .pet-slide-icon svg{
    font-size:16px;
    width:16px;
    height:16px;
  }

  .pet-slide-btn:hover .pet-slide-left{
    opacity:0;
    visibility:hidden;
    left:50%;
    transform:translate(-50%,-50%) scale(.96);
  }

  .pet-slide-btn:hover .mobile-hover-text{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
  }

  .pet-slide-btn:hover .pet-slide-icon{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) scale(1);
  }
}