.card:hover {
  box-shadow: 0px 0px 20px -3px rgba(143, 143, 143, 0.75);
}

.card-plano-home.card {
  transition: 0.5s ease;
  border-radius: 5px !important;
  transform: perspective(3em) rotateX(0deg) rotateY(-1.175deg) rotateZ(-1deg)
    scale(1);
  width: 262px;
  /* box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.card-plano-home.card:hover {
  transform: perspective(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scale(1.15);
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.card-plano-home.card.bloqueado {
  transform: perspective(3em) rotateX(0deg) rotateY(-1.175deg) rotateZ(-1deg)
    scale(1);
  width: 262px;
}

.card-plano-home.card.bloqueado:hover {
  transform: perspective(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg)
    scale(1.05);
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  .card-plano-home.card {
    transform: perspective(0) rotateX(0deg) rotateY(0) rotateZ(0);
    /* margin: auto auto !important; */
    /* width: 100% !important; */
  }
}

.card-plano-home.card.bloqueado {
  /* background-color: rgba(255, 255, 255, 0.09) */
  background-color: rgb(24, 24, 24);
}

.card-tag {
  background-color: #aaaaaa !important;
}

.lp-promo.lp-dark-blue .btn-acao.bloqueado {
  background: #1d060a;
  -webkit-box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.7) !important;
  width: 100%;
}

.promo.lp-dark-blue .btn-acao:hover {
  background: #1d060a !important;
}

.card-header {
  border-radius: 0;
}

.card-footer {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.card-header,
.card-footer {
  transition: 0.5s ease;
}

.card-plano-home.card:hover .card-header,
.card:hover .card-footer {
  color: #ba8b00;
  border-color: #ffc107;
  background-color: #ffeeba;
}

.card-body {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.card .btn {
  font-weight: bold;
}

.promotion-promo {
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffc107;
  font-family: "Montserrat", sans-serif;
  text-decoration: line-through;
  transition: 0.25s linear;
}

.promotion-price {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #ffc107;
  width: 92px;
  height: 92px;
  padding-bottom: 0rem;
  padding-top: 1.25rem;
  text-align: center;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  font-size: 1.1rem;
  border-radius: 5rem;
  color: #fff;
  z-index: -1;
  transform: translate(5px, 27.5px) rotate(-9deg);
  border: 1px dashed #fff;
  transition: 0.25s linear;
  line-height: 1.15;
}

.promotion-price-desc {
  padding: 0;
  margin: 0 auto;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: block;
}

.promotion-price-text {
  padding: 0;
  margin: 0 auto;
  font-weight: 900;
}

.card-animate {
  counter-reset: section;
}

.card-animate .card-body:before {
  transition: 0.5s ease;
  counter-increment: section;
  content: "" counter(section) "";
  display: block;
  font-size: 15rem;
  font-weight: 900;
  position: absolute;
  bottom: 5rem;
  line-height: 0;
  left: -0.85rem;
  padding: 0;
  margin: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: 0;
}

.card-animate .card:hover .card-body:before {
  transform: translate(10px, -10px);
}

.card-animate .card-text {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.card-animate .card-title {
  font-weight: 900;
  text-transform: uppercase;
}

.card-tag .texto-alerta {
  color: #e22d43;
}

.count-topo {
  color: black;
}

.count-topo.opacity-0 {
  opacity: 0;
}

.count-topo .texto-alerta {
  color: #c0c0c0;
}

.count-topo.fadeIn {
  -webkit-animation: fadein 0.5s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.5s;
  /* Firefox < 16 */
  -ms-animation: fadein 0.5s;
  /* Internet Explorer */
  -o-animation: fadein 0.5s;
  /* Opera < 12.1 */
  animation: fadein 0.5s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bg-promo-home {
  background-color: rgb(25 25 25);
}

.card-plano-home.card {
  background: #fff;
}

.preco-card {
  color: #ff0000;
  width: 100%;
  font-size: 32px;
  line-height: 34px;
  font-weight: 700;
  float: left;
}

.subtitulo-plano {
  font-size: 10px !important;
  text-transform: uppercase !important;
  font-weight: 700;
  line-height: 15px;
  color: rgb(0, 0, 0);
}

.head-plano {
  /* color: #091E42 !important; */
  font-weight: 700;
  font-size: 20px !important;
  text-transform: uppercase !important;
  color: rgb(0, 0, 0);
}

.lp-promo .btn-acao {
  color: white !important;
  background: #e22d43 !important;
}

.lp-promo .btn-acao:hover {
  color: white !important;
  background: #e22d43 !important;
}

.lp-promo .btn-acao.bloqueado {
  color: #fff !important;
  background: #ffffff3b !important;
}

.lp-promo .btn-acao.bloqueado:hover {
  color: #fff !important;
  background: #ffffff3b !important;
}

.lp-promo .card.bloqueado .card-tag {
  background: #ffffff2b !important;
}

.lp-promo .card.bloqueado .head-plano {
  color: #aaaaaa !important;
}

.lp-promo .card.bloqueado .subtitulo-plano {
  color: #aaaaaa !important;
}

.lp-promo .card.bloqueado .preco-card {
  color: #aaaaaa !important;
}

.lp-promo .card.bloqueado .countdown-card .icon {
  color: #aaaaaa !important;
}

.lp-promo .card.bloqueado .countdown-card .text {
  color: #aaaaaa !important;
}

.lp-promo .card.bloqueado .card-tag {
  color: #aaaaaa !important;
}

.lp-promo .countdown-clock {
  color: #000000 !important;
}

.card-plano-home .tag-data {
  color: white !important;
  background-color: #e22d43 !important;
}

.data.encerrado {
  color: #e22d43 !important;
}

.lote-ordem-1 {
  z-index: 3;
  transition: 0.5s ease;
}

.lote-ordem-1.encerrado {
  transform: translateX(-60px);
}

.lote-ordem-1.encerrado:hover {
  transform: translateX(0);
}

.lote-ordem-2 {
  z-index: 2;
  transform: translateX(-100px);
  transition: 0.5s ease;
}

.lote-ordem-2:hover {
  transform: translateX(0);
}

.lote-ordem-2.encerrado {
  transform: translateX(-160px);
}

.lote-ordem-2.encerrado:hover {
  transform: translateX(-60px);
}

.lote-ordem-2.ativo:hover {
  transform: translateX(-40px);
}

.lote-ordem-3 {
  z-index: 1;
  transform: translateX(-200px);
  transition: 0.5s ease;
}

.lote-ordem-3:hover {
  transform: translateX(-100px);
}

.lote-ordem-3.encerrado {
  transform: translateX(-260px);
}

.lote-ordem-3.encerrado:hover {
  transform: translateX(-160px);
}

.lote-ordem-3.ativo:hover {
  transform: translateX(-140px);
}

.lote-ordem-4 {
  transform: translateX(-300px);
  transition: 0.5s ease;
}

.lote-ordem-4:hover {
  transform: translateX(-200px);
}

.lote-ordem-4.encerrado {
  transform: translateX(-360px);
}

.lote-ordem-4.encerrado:hover {
  transform: translateX(-260px);
}

.lote-ordem-4.ativo:hover {
  transform: translateX(-240px);
}

@media (max-width: 1492px) {
  .lote-ordem-4:hover {
    transform: translateX(-245px);
  }
  .card-plano-home.card.bloqueado {
    width: 240px;
  }
}

@media (max-width: 1376px) {
  .lote-ordem-4:hover {
    transform: translateX(-200px);
  }
  .lote-ordem-2.ativo:hover {
    transform: translateX(-30px);
  }
}

@media (max-width: 1322px) {
  .lote-ordem-4:hover {
    transform: translateX(-235px);
  }
  .card-plano-home.card.bloqueado {
    width: 240px;
  }
}

@media (max-width: 1199px) {
  .lote-ordem-2.ativo {
    transform: translateX(0px);
  }
  .lote-ordem-2.ativo:hover {
    transform: translateX(0px);
  }
  .lote-ordem-3.ativo {
    transform: translateX(0px);
  }
  .lote-ordem-3.ativo:hover {
    transform: translateX(0px);
  }
  .lote-ordem-4.ativo {
    transform: translateX(0px);
  }
  .lote-ordem-4.ativo:hover {
    transform: translateX(0px);
  }
  .card-plano-home.card {
    margin: auto auto !important;
  }
}

.card.bloqueado .preco-card {
  font-size: 24px;
}