/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/styles/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************/
.mm-personalization-like-box {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 999;
}
.mm-personalization-like-box #mm-personalization-like-button {
  width: 6rem;
  padding: 0.5rem;
  border: 2px solid #307a83;
  border-right-color: transparent;
  border-radius: 1rem 0 0 1rem;
  background-color: white;
}
.mm-personalization-like-box #mm-personalization-like-button span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  font-size: 0.8rem;
  color: #307a83;
  text-transform: uppercase;
  font-weight: bold;
}
.mm-personalization-like-box #mm-personalization-like-button svg {
  stroke: #307a83;
  stroke-width: 5px;
  fill: transparent;
  transition: all 0.25s ease-in-out;
  pointer-events: none;
}
.mm-personalization-like-box #mm-personalization-like-button.liked svg {
  transform: scale(1.3);
  fill: #307a83;
}
.mm-personalization-like-box #mm-personalization-like-button .animate {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: float 0.75s linear forwards;
}

@media screen and (max-width: 776px) {
  #mm-personalization-like-button {
    width: 4rem;
  }
  #mm-personalization-like-button span {
    font-size: 0.75rem;
  }
  #mm-personalization-like-button svg {
    width: 25px;
    height: 25px;
  }
}
@keyframes float {
  0% {
    opacity: 0.7;
    top: -15px;
    transform: rotateZ(0deg) translateX(-50%);
  }
  12% {
    transform: rotateZ(-20deg) scale(0.9) translateX(-50%);
  }
  24% {
    transform: rotateZ(20deg) scale(0.7) translateX(-50%);
    left: 55%;
    opacity: 0.5;
  }
  40% {
    transform: rotateZ(-11deg) scale(0.6) translateX(-50%);
    left: 45%;
  }
  70% {
    transform: rotateZ(10deg) scale(0.4) translateX(-50%);
    left: 55%;
    opacity: 0.3;
  }
  90% {
    transform: scale(0.2) translateX(-50%);
    left: 45%;
  }
  100% {
    opacity: 0;
    top: -90px;
    transform: rotateZ(-5deg) scale(0.1) translateX(-50%);
  }
}

/*# sourceMappingURL=style-front.css.map*/