.cardHover {
  width: 100%;
  height: 90vh;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cardHover #varejo, .cardHover #suply {
  width: 100%;
  height: 100%;
  margin: 50px;
  border-radius: 5px;
  position: relative;
  margin-bottom: 200px;
  bottom: 15%;
}
.cardHover #varejoTxt, .cardHover #suplyTxt {
  position: absolute;
  pointer-events: none;
  font-weight: bold;
  font-size: 38px;
  top: 95%;
  transition: 1s all;
  color: black;
  right: 10%;
  font-family: "Oswald Bolder";
}
.cardHover #varejo {
  right: 100%;
  background-image: url(../images/newHover.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  transition: 1s all;
}
.cardHover #varejo .varejoInfo {
  width: 100%;
  height: 40%;
  background: transparent linear-gradient(90deg, #E6E6E6 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  position: absolute;
  bottom: -100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: 1s all;
  pointer-events: none;
}
.cardHover #varejo .varejoInfo .txtHover {
  width: 90%;
  margin: 20px;
  font-size: 13px;
}
.cardHover #varejo .varejoInfo .txtHover span {
  font-weight: bold;
}
.cardHover #varejo .varejoInfo .complemento {
  position: relative;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}
.cardHover #varejo .varejoInfo .complemento .boxPercent {
  min-width: 40%;
  height: 50%;
  background-color: var(--theme-dark);
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardHover #varejo .varejoInfo .complemento .boxPercent p {
  font-size: 12px;
  position: static;
  color: white;
  margin: 10px;
  font-family: "Poppins Bold";
}
.cardHover #varejo .varejoInfo .complemento .boxPercent #percents {
  font-size: 40px;
}
.cardHover #varejo .varejoInfo .complemento .textHoverTwo {
  display: inline-flex;
  width: 40%;
}
.cardHover #varejo .varejoInfo .complemento .textHoverTwo p {
  font-size: 14px;
  position: static;
  margin-left: 20px;
  display: inline;
  font-weight: bold;
  font-family: "Poppins Bold";
}
.cardHover #varejo:hover {
  background-image: url(../images/newHoverBlack.png);
}
.cardHover #varejo:hover #varejoTxt {
  top: 45%;
}
.cardHover #varejo:hover .varejoInfo {
  bottom: 0%;
}
.cardHover #suply {
  left: 100%;
  background-image: url(../images/newHover2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  transition: 1s all;
}
.cardHover #suply .logInfo {
  width: 100%;
  height: 40%;
  background: transparent linear-gradient(90deg, #E6E6E6 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
  position: absolute;
  bottom: -100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  transition: 1s all;
}
.cardHover #suply .logInfo .txtHover {
  width: 90%;
  margin: 20px;
  font-size: 13px;
}
.cardHover #suply .logInfo .txtHover span {
  font-weight: bold;
}
.cardHover #suply .logInfo .complemento {
  position: relative;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}
.cardHover #suply .logInfo .complemento .boxPercent {
  min-width: 40%;
  height: 50%;
  background-color: var(--theme-dark);
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardHover #suply .logInfo .complemento .boxPercent p {
  font-size: 12px;
  position: static;
  color: white;
  margin: 10px;
  font-family: "Poppins Bold";
}
.cardHover #suply .logInfo .complemento .boxPercent #percents {
  font-size: 40px;
}
.cardHover #suply .logInfo .complemento .boxPercent .list p {
  height: 10px;
}
.cardHover #suply .logInfo .complemento .textHoverTwo {
  display: inline-flex;
  width: 40%;
}
.cardHover #suply .logInfo .complemento .textHoverTwo p {
  font-size: 14px;
  position: static;
  margin-left: 20px;
  display: inline;
  font-weight: bold;
  font-family: "Poppins Bold";
}
.cardHover #suply:hover {
  background-image: url(../images/newHover2Black.png);
}
.cardHover #suply:hover #suplyTxt {
  top: 45%;
}
.cardHover #suply:hover .logInfo {
  bottom: 0%;
}

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