.modal-content {
  background: #0d6efd;
  border-style: none;
  position: relative;
}
.modal-content-adornos {
  bottom: -20%;
  display: flex;
  left: -13%;
  position: absolute;
  width: 125%;
  height: 151%;
}

.modal-header {
  border-bottom: #0d6efd;
  display: flex;
  justify-content: right;
}

.modal-header img {
  cursor: pointer;
  margin: 5px 5px;
  width: 30px;
  z-index: 2;
}

.modal-body-ganaste {
  padding: 6%;
}

.modal-title {
  color: #efc945;
  font-family: codec;
  src: url(font/Codec-Warm-ExtraBold-trial.ttf);
  font-size: 300%;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: -5px;
}

.modal-ganaste-main-text {
  color: #fff;
  font-size: 120%;
  padding: 2% 14%;
  text-align: center;
}

/* .footer {
  margin-bottom: 5%;
} */

@media only screen and (min-width: 300px) and (max-width: 400px) {
  .modal-title {
    font-size: 126%;
  }

  .modal-ganaste-main-text {
    color: #fff;
    font-size: 71%; /*70%*/
    padding: 2% 4%; /*2% 14%*/
    text-align: center;
  }

  .modal-content-adornos {
    bottom: 2%; /*-24%*/
    display: flex;
    left: -10%;
    position: absolute;
    width: 118%; /*125%*/
    height: 104%; /*151%*/
  }

  
}

@media only screen and (min-width: 401px) and (max-width: 768px) {
  .modal-title {
    font-size: 166%; /*126%*/
  }

  .modal-ganaste-main-text {
    color: #fff;
    font-size: 78%; /*70%*/
    padding: 2% 14%; /*2% 14%*/
    text-align: center;
  }

  .modal-content-adornos {
    bottom: -24%; /*-24%*/
    display: flex;
    left: -12%;
    position: absolute;
    width: 125%; /*125%*/
    height: 151%; /*151%*/
  }

  .modal-header img {
    width: 30px;
  }
}

@media (min-width: 769px) and (max-width: 990px) {
  .modal-title {
    font-size: 200%;
  }

  .modal-ganaste-main-text {
    color: #fff;
    font-size: 76%;
    padding: 2% 11%;
    text-align: center;
  }

  .modal-content-adornos {
    bottom: -24%;
    display: flex;
    left: -12%;
    position: absolute;
    width: 125%;
    height: 151%;
  }

  .modal-header img {
    width: 6%;
  }
}
