/* una pequeña animación extra */
@keyframes modal{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}
/* estilo del contenedor padre */
.modal-noSign {
position: fixed;
/* max-width: 700px; */
top: 10%;
width: 70%;
/* left: 24vw; */
left: calc((100% - 130px) / 5);
z-index: 15;
color: #59629f;
padding: 10px;
font: 13px/140% var(--semibold);
text-align: center;
display: none;
}
/* estilo del fondo */
#modal-back {
position: fixed;
opacity: 0.8;z-index: 14;
background: #000000;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: none;
}
/* estilo de contenedor */
.modal {
top: 50%;
left: 50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* estilo de subcontenedor */
#modal-c {
height: 100%;
position: relative;
display: flex;
-webkit-animation: modal 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 250ms backwards;
animation: modal 500ms cubic-bezier(0.215, 0.61, 0.355, 1) 250ms backwards;
border-radius: 20px;
-webkit-box-shadow: 0 0px 7px rgba(0, 0, 0, 0.5);
box-shadow: 0 0px 7px rgba(0, 0, 0, 0.5);
height: fit-content;
}
/* estilo de títulos */
.modal-noSign h3 {
padding: 15px 0px;
text-align: center;
}
/* estilo de contenido */
.modal-noSign span {
display: block;padding: 0px 19px;
font-size: 1vw;
}
/* estilo de botones */
#buttons {
position: absolute;
right: 0;
bottom: 0;
padding: 3px 0px;
}
#buttons a{
height: 100%;padding: 7px 15px;
color: #3C6998;
display: inline-block;
text-decoration: none;}
.containerModal1{
background-color: #14052e;
width: 50%;
}
/* .containerModal2 h3{
    color: #fff;
    font-size: 18px;
    font-family: var(--bold);
    margin-bottom: 0;
} */

.containerModal2 h3{
    color: #fff;
    font-family: var(--bold);
    font-size: 2.3vw;
    line-height: 1.2;
    padding: 0;
    margin-top: 0;

}
.containerModal1{
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    width: 50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.containerModal1 h3{
    font-size: 1.9vw;
    line-height: 1.2;
    padding: 0px;
    margin-top: -6%;
    font-family: var(--semibold);
}
.containerModal2{
    background-color: #908cbe;
    width: 50%;
    padding: 3% 0;
    border-bottom-right-radius: inherit;
    border-top-right-radius: inherit;
    color: #fff;
}
.containerModal2 .fq{
    margin: 0 auto;
    width: 80%;
    
}
.containerModal2 .four-section-container{
    flex-direction: column;
}

.containerModal2 .fq input{
    border-radius: 4px;
    padding: 2% 3%;
    border: unset;
    margin-bottom: 3%;
}

.containerModal2 .fq input:focus{
    outline: none;
}

.containerModal2 .sq button{
    width: 90%;
    margin: 0 auto;
    font-family: var(--semibold);
}

@media(max-width:575px){
    #modal-c{
        flex-direction: column;
        width: 100%;
    }
    .containerModal1 {
        width: 100%;
        border-bottom-left-radius: unset;
        border-top-right-radius: inherit;
    }

    .containerModal2{
        width: 100%;
        border-bottom-left-radius: inherit;
        border-top-right-radius: unset;
    }
    .modal-noSign span{
        font-size: unset;
    }

}