.weight {
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.weight.black {
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.article-xoxpets {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .article-xoxpets {
    margin-left: auto;
    margin-right: auto;
    width: 83.333333%;
  }
}

@media (min-width: 768px) {
  .article-xoxpets {
    width: 66.666667%;
  }
}

@media (min-width: 1024px) {
  .article-xoxpets {
    width: 83.333333%;
  }
}

@media (min-width: 1280px) {
  .article-xoxpets {
    margin-top: 0px;
    width: 100%;
    flex-direction: row;
  }
}
.article-xoxpets.orientation-left > div:first-child {
  display: grid;
  width: 100%;
  place-items: center;
}
@media (min-width: 1280px) {
  .article-xoxpets.orientation-left > div:first-child {
    width: 50%;
    padding-right: 2.5rem;
  }
}
.article-xoxpets.orientation-left > div:last-child {
  position: relative;
  width: 100%;
}
@media (min-width: 1280px) {
  .article-xoxpets.orientation-left > div:last-child {
    width: 50%;
  }
}
.article-xoxpets.orientation-right > div:first-child {
  display: grid;
  width: 100%;
  place-items: center;
}
@media (min-width: 1280px) {
  .article-xoxpets.orientation-right > div:first-child {
    order: 2;
    width: 50%;
    padding-left: 2.5rem;
  }
}
.article-xoxpets.orientation-right > div:last-child {
  position: relative;
  width: 100%;
}
@media (min-width: 1280px) {
  .article-xoxpets.orientation-right > div:last-child {
    order: 1;
    width: 50%;
  }
}
.article-xoxpets p {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  text-align: justify;
}
.article-xoxpets .icon {
  margin-right: 0.5rem;
  display: inline-block;
  height: 2.5rem;
  width: 2.5rem;
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.article-xoxpets img.share {
  position: absolute;
  top: 6rem;
  left: 3rem;
  display: block;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.article-xoxpets img.share:hover {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.article-xoxpets img:not(.icon):not(.share) {
  margin-top: 3.5rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 640px) {
  .article-xoxpets img:not(.icon):not(.share) {
    margin-bottom: 0px;
  }
}
.article-xoxpets img:not(.icon):not(.share) {
  height: 60rem;
}

.leading-none {
  margin-bottom: 4rem;
}

.article-extra {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.article-title {
  font-size: 4rem;
}

img.integrity {
  display: block;
  margin-top: 1rem !important;
  width: 55% !important;
  height: 8rem !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

.article-sub-title {
  display: block;
  font-size: 5rem;
  line-height: 5rem;
}

.card-xoxpets {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  width: 24rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  height: 55rem;
}
@media (min-width: 1024px) {
  .card-xoxpets.top-down {
    top: 5rem;
  }
  .card-xoxpets.top-up {
    top: -5rem;
  }
}
.card-xoxpets > dt {
  position: absolute;
  left: 50%;
  top: -4rem;
  z-index: 10;
  height: 20rem;
  width: 20rem;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.card-photo {
  height: 100%;
  width: 100%;
  border-radius: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-figure {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.card-figure > span {
  background-image: linear-gradient(to bottom, var(--xox-blue) 40%, var(--xox-light-blue) 95%);
  position: absolute;
  width: 250%;
  height: 100%;
  top: -35rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100%;
}

.card-size {
  height: 20rem;
  width: 20rem;
}

.card-body {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.card-body > h2 {
  text-align: center;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.card-body > p {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.card-footer {
  margin-top: 1.25rem;
  text-align: center;
}
.card-footer > button {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  display: inline-block;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  background-color: transparent;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.card-footer > button:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.card-footer > button {
  border-radius: 10rem;
}

.card-info {
  position: relative;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 3.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  width: 34rem;
  height: 30rem;
}

.prices {
  text-align: center;
}
.prices ul > li {
  list-style-type: none;
  text-align: center;
  font-size: 1.3rem;
}

.card-info-header {
  position: absolute;
  top: -4rem;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.75rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  display: grid;
  place-items: center;
  width: 11rem;
  height: 11rem;
  border-radius: 100%;
}
.card-info-header img {
  height: 6rem;
  width: 6rem;
}

.card-info-content {
  height: 5rem;
}

.card-info-text {
  margin-bottom: 0.75rem;
  text-align: center;
}
.card-info-text h3 {
  font-size: 2.5rem;
  line-height: 2.5rem;
}
.card-info-text h4 {
  font-size: 3rem;
}

.card-info-footer {
  margin-top: 1.5rem;
  text-align: center;
}
.card-info-footer > a {
  display: inline-block;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.card-info-footer > a:hover {
  --tw-rotate: 6deg;
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
.card-info-footer > a {
  font-size: 2.2rem;
}
.card-info-footer > a > span {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.box {
  perspective: 1000px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  width: 24rem;
  height: 24rem;
}
.box > .box-content {
  position: absolute;
  inset: 0px;
  transform-style: preserve-3d;
  transition: 200ms transform linear;
  transform: rotateY(180deg) rotateX(0deg) translateY(0rem);
}
.box > .box-content:hover {
  transform: rotateY(180deg) rotateX(90deg) translateY(7rem) translateZ(-12rem);
}
.box .box-face-before, .box .box-face-after {
  position: absolute;
  inset: 0px;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.box .box-face-before {
  transform: rotateY(-180deg);
  background-color: #000;
}
.box .box-face-after {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  background-color: rgb(42, 83, 137);
  transform: rotateX(-90deg) translateZ(-12rem) translateY(-119px);
}
.box .box-face-after > div {
  display: inline-block;
  padding: 1.5rem;
  transform: rotateY(180deg);
}
.box h3, .box h4 {
  text-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.box-img {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  animation: box-img-animation 3s linear var(--delay) alternate infinite;
  opacity: 0.15;
}
@keyframes box-img-animation {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 0.6;
  }
}

.box-care-face {
  position: absolute;
  inset: 0px;
  z-index: 20;
  height: 100%;
  width: 100%;
  background-color: transparent;
  border: 1rem solid #fff;
}

.box-title {
  @pply w-full h-full grid place-items-center relative p-5 text-center font-bold;
  z-index: 100;
}

.box-face-content {
  padding: 1.25rem;
  text-align: center;
}
.box-face-content > h3 {
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.box-face-content > figure {
  width: 50%;
  margin: 1rem auto;
  height: 1px;
  background-color: #fff;
  border-radius: 10rem;
}
.box-face-content > p {
  font-weight: 300;
}

.box h3, .box p {
  font-size: 1.6rem !important;
  font-family: "chewy" !important;
}
.box p {
  font-family: "quicksand" !important;
}
.box h4 {
  font-size: 4rem !important;
  font-family: "akaya" !important;
  animation: box-text-animation 3s linear var(--delay) alternate infinite;
}
@keyframes box-text-animation {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/*# sourceMappingURL=article.css.map */