.modal{
    background-color: var(--color-fondo-modal);
}


.image-modal-callie{
    width: 60%;
    transform: translate(-30%,-45%);
}
.image-modal-logo{
    margin-top: 5%;
    width: 30%;
}

.modal-content{
    border-bottom-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 25px;
    box-shadow: 0px 4px 40px var(--color-sombra-oscuro);
}

.modal-header{
    border-bottom: none;
}

.titulo-modal{
    color: var(--color-principal-oscuro);
}

.buton-modal{
    text-decoration: none;
    background-color: var(--color-principal-oscuro);
    padding-left: 5%;
    padding-top: 2%;
    padding-bottom: 1%;
    padding-right: 5%;
    border-radius: 10px;
}

.footer-h6-modal{
    text-decoration: none;
    color: var(--color-principal-blanco);
}

.buton-modal:hover{
    background-color: var(--color-principal-claro);
}

.modal-circle-1{
    width: 80px;
    height: 80px;
    transform: translate(550%,50%);
    border-radius: 50%;
    background-color: var(--color-principal-claro);
    z-index: 50;
    box-shadow: 0 0 40px var(--color-sombra-oscuro);
    transition: var(--tran-0-4)
}

#carga .modal-content{
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50%;
    background-image: url("../../static/img/backGround-3.webp");
}

.title-modal-login{
    font-weight:900;
    font-size:900%;
    color: var( --color-principal-oscuro);
    text-align: center;
}

.title-body-modal-login{
    color: var( --color-principal-oscuro);
    text-align: center;
    font-size:190%;
    justify-content: center;
}

.modal-body .row .col-md .row{
    text-align: center;
    justify-content: center;
    vertical-align: center;
    align-items: center;
}

.image-modal-login{
    width: 20%;
    animation-duration: 3s;
    animation-name: image-modal-login;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.modal-body{
    margin: auto;
    align-content: center;
}

#btn-modal-login{
    margin: 1%;
    width: 30%;
    border: none;
    padding: 1%;
    background-color: var(--color-principal-oscuro);
    transition: var(--tran-0-2);
    text-align: center;
    justify-content: center;
    vertical-align: center;
    align-items: center;
}
#btn-modal-login:hover{
    width: 32%;
    background-color:  var(--color-principal-claro);
}

@keyframes image-modal-login {
  from {
      transform: rotate(-30deg);
  }

  to {
      transform: rotate(30deg);
  }
}

@media (max-width: 1000px) {
    .image-modal-login{
        width: 50%;
    }
}