.cnt_step_progress {
  position: relative;
}

.cnt-baloon {
  position: absolute;
  z-index: 40;
  width: 21%;
  left: 0%;
  top: -47%;
}

/* .cnt-baloon {
  position: absolute;
  top: -2rem;
  display: flex;
  right: 0;
  left: auto;
  width: 11%;
}
.bg-giallo {
  background-color: #F7A600;
}
.cnt-baloon p {
  padding: 15px 15px;
  font-size: 12px;
  line-height: 1.4;
} */

.cnt-baloon p {
  transform: translatey(0px);
  -webkit-animation: float 5s ease-in-out infinite;
  animation: float 5s ease-in-out infinite;
  text-align: left;
  line-height: 1.4;
  font-size: 13px;
  background-color: #f5a800;
  background-color: #293e68;
  padding: 30px;
  border-radius: 11px;
  position: relative;
  /* box-shadow: 20px 20px #83af9b; */
}

.cnt-baloon p:after {
  transform: translatey(0px);
  -webkit-animation: float2 5s ease-in-out infinite;
  animation: float2 5s ease-in-out infinite;
  content: ".";
  font-weight: bold;
  -webkit-text-fill-color: #f5a800;
  -webkit-text-fill-color: #293e68;
  /* text-shadow: 22px 22px #83af9b; */
  text-align: left;
  font-size: 55px;
  width: 55px;
  height: 11px;
  line-height: 30px;
  border-radius: 11px;
  background-color: #f5a800;
  background-color: #293e68;
  position: absolute;
  display: block;
  bottom: -30px;
  left: 0;
  /* box-shadow: 22px 22px #83af9b; */
  z-index: -2;
}

@media screen and (max-width: 660px) {
  .cnt-baloon {
    position: absolute;
    z-index: 40;
    left: 2%;
    top: -12%;
    width: auto;
  }

  .cnt-baloon p {
    padding: 20px;
  }

  .step_progress {
    padding-top: 7rem;
  }
}

@-webkit-keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

@-webkit-keyframes float2 {
  0% {
    line-height: 30px;
    transform: translatey(0px);
  }

  55% {
    transform: translatey(-20px);
  }

  60% {
    line-height: 10px;
  }

  100% {
    line-height: 30px;
    transform: translatey(0px);
  }
}

@keyframes float2 {
  0% {
    line-height: 30px;
    transform: translatey(0px);
  }

  55% {
    transform: translatey(-20px);
  }

  60% {
    line-height: 10px;
  }

  100% {
    line-height: 30px;
    transform: translatey(0px);
  }
}