﻿
#modal_suscripcion.modal {
    z-index: 99999;
}

.modal-backdrop.show {
    z-index: 9999;
}

#modal_suscripcion .modal-body {
    padding: 0px;
    min-height: 80vh;
    border-radius: 5%;
    height: 100%;
}

#modal_suscripcion div.modal-dialog {
    width: 80%;
    max-width: 80%;
    margin: 1.75rem 10%;
}

#modal_suscripcion div.modal-content {
    border-radius: 50px;
    border: none;
}

#modal_suscripcion div.modal-body {
    display: flex;
    flex-direction: row;
}

    #modal_suscripcion div.modal-body img {
        width: 45%;
        border-radius: 50px 0px 0px 50px;
        min-height: 80vh;
        object-fit: cover;
        object-position: left;
    }

    #modal_suscripcion div.modal-body > div {
        background: linear-gradient(0deg, #F5F5F5, #DCDBE9);
        border-radius: 0px 50px 50px 0px;
        width: 100%;
    }

        #modal_suscripcion div.modal-body > div > div {
            text-align: right;
            padding: 2.5%;
            font-size: xx-large;
        }

    #modal_suscripcion div.modal-body div i {
        cursor: pointer;
    }

        #modal_suscripcion div.modal-body div i:hover {
            color: black;
        }

    #modal_suscripcion div.modal-body section h1 {
        margin-bottom: 0px;
        line-height: 0.95;
        font-size: 2.5vw;
    }

    #modal_suscripcion div.modal-body > div > section {
        padding: 0px 20%;
    }

        #modal_suscripcion div.modal-body > div > section small {
            width: 100%;
            display: block;
            font-size: smaller;
        }

            #modal_suscripcion div.modal-body > div > section small:last-child {
                text-align: center;
            }

.btn_gradiant_blue {
    background: linear-gradient(90deg, #8C63FD, #333BF6);
    border: none;
    color: #ffffff;
}

#form_suscripcion section > input,
#form_suscripcion section > select {
    background-color: #ffffff45;
    border: none;
    color: #8A8EA1;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: small;
    width: 100%;
    margin-bottom: 10px;
}

#form_suscripcion button {
    width: 100%;
    padding: 5px;
    border-radius: 10px;
    margin: 15px 0px;
}

/* -- Inicia menu mov -- */
@media (max-width: 820px) {
    #modal_suscripcion div.modal-dialog {
        width: 90%;
        max-width: 90%;
        margin: 1.75rem 5%;
    }

    #modal_suscripcion div.modal-body > div > div {
        font-size: larger;
    }

    #modal_suscripcion div.modal-body img {
        display: none;
    }

    #modal_suscripcion div.modal-body > div {
        border-radius: 15px;
    }

        #modal_suscripcion div.modal-body > div > section {
            padding: 0px 5%;
        }

    #modal_suscripcion div.modal-body div i {
        cursor: pointer;
        font-size: x-large;
    }

    #modal_suscripcion div.modal-body section h1 {
        font-size: 7vw;
        text-align: left;
        padding: 0;
    }

    #modal_suscripcion div.modal-body > div > section small {
        font-size: 2.5vw;
    }
}
