.modal {
	position: fixed;
	top: 110%;
	left: 0;
	display: flex;
	width: 100%;
	height: 100%;
	z-index: 1100;
	align-items: center;
	justify-content: center;
	transition: top 0s .1s;
}

.modal .modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #000;
    opacity: .0001;
    z-index: 1;
    transition: opacity .1s .1s;
}

.modal .modal__main {
    position: relative;
    z-index: 1;
    max-width: 690px;
    background:#fff;
    border-radius: 1rem;
    width: 100%;
    transform: translate(0, 100px);
    opacity: .001;
    transition: transform .1s .1s, opacity .1s .1s;
}

.modal.modal--active {
    top: 0;
    transition-delay: 0s;
}

.modal.modal--active .modal__overlay {
    opacity: .7;
}

.modal.modal--active  .modal__main {
    opacity: 1;
    transform: translate(0, 0);
}

.modal__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    border:0;
    background:transparent; 
    cursor: pointer;
    
    svg *{        
        fill: #000;
    }
}

.modal__close svg {
    width: 60px;
    height: 60px;
}

.modal .modal__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

#contact-modal {
    padding:0 20px;
}
#contact-modal .modal__container {
    align-items:flex-start;  
}

.modal-video .modal__close svg *{
    fill:#fff !important;
}

.modal-video .modal__main {
    border-radius: 0;
    background:transparent;
    padding-top:50px;
}

.modal-video .wp-block-embed,
.modal-video .is-provider-jwplayer {
    margin-bottom:0 !important;
}

.modal .modal__title {
    color:var(--main-color);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 600;
    margin-bottom: 1rem;
    width: 100%;
    text-align:left;  
}

.modal .modal__text {
    margin-bottom: 1rem;
}

.modal .modal__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.modal .modal__error {
    font-size:.8rem;
    margin-top:-1rem;    
    color: #a20000;
    display: none;
}

.modal .modal__form-group {
    width: 100%;
}
.modal .modal__form-group input {
    width: 100%;
    padding: .75rem 1rem;
    margin:0.75rem 0;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: .5rem;
    font-size: 1rem;
}

#modal-unite .modal__container .gform_wrapper {
    width: 100%;
}

#modal-unite .modal__container .gfield {
    margin-top:5px;
    margin-bottom:5px;
}

#modal-unite .modal__container .gfield input {
    border:1px solid red;
    border-radius:.5rem;
    border-color:var(--main-color);
}

#modal-unite .modal__container .gform_button{
    display: block;
    width: 100%;
    margin-top:1rem;
    background:var(--main-color) !important;
    color:#fff !important;
}
#modal-unite .modal__container .gform_button:hover{
    background:var(--second-color) !important;
    color:var(--dark-color) !important;
}


#modal-donate .modal__title {
    color: var(--main-color);
    text-align:left;
    font-size:2rem;
}

#modal-donate .modal__container {
    align-items:flex-start;  
    padding:2rem 5rem;  
}

#modal-donate .modal__container .modal__text{
    color:var(--dark-color);
    font-size:1.2rem;
}


#modal-donate .buttons-donate {
    display: flex;
    flex-direction:row;
    align-items: center;
    gap:2rem;
    width: 100%;
    justify-content: center;
    margin:2rem 0;
}

#modal-donate .buttons-donate a {
    padding:.5rem 1rem;
    border-radius:.5rem;
    display: flex;
    border:1px solid #516ac35e;
    width: 100%;
}

#modal-donate .buttons-donate svg{
    width: 100%;
    max-height: 30px;    
    opacity:.5;
    transition: all .5s;
}
#modal-donate .buttons-donate svg:hover{
    opacity: 1;
}

@media screen and ( min-width: 728px ) {
    .modal .modal__close svg{
        width: 65px;
        height: 65px;
    }

    .modal .suscribe {
        padding: 35px 120px 0 35px;
        overflow: initial;
    }


    .modal .suscribe__form {
        padding: 0;
        max-width: 300px;        
    }

    .modal .suscribe__form-success p{
                max-width: 300px;
    }

    .modal .suscribe__title {
        max-width: initial;
    }

}