.modal *{
    color: var(--color-navy);
}

.modal{
    display: none;
}

.modal h2{
    margin-bottom: 30px;
}

.modal .button *{
    color: white;
}
.modal-header, .modal-footer{
    border-top: none;
    border-bottom: none;
}

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

.modal button span {
    font-size: 28px;
    color: white;
    text-shadow: none;
}

.modal-content{
    border: 0px solid transparent;
    border-radius: 0 36px 0 0;
    -webkit-border-radius: 0 36px 0 0;
    -moz-border-radius: 0 36px 0 0;
    -ms-border-radius: 0 36px 0 0;
    -o-border-radius: 0 36px 0 0;
}

.modal button.close{
    opacity: 1;
    position: absolute;
    background-color: #6f3a0c;
    top: 10px;
    right: 10px;
    height: 53px;
    width: 53px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;   


}


.modal .form-field__input, 
.modal .form-field__textarea, 
.modal .form-field__label{
    color: var(--color-navy);
}

.modal form .form-field input[type="checkbox"]:checked:after{
    color: var(--color-navy);
}
.modal-body{
    padding: 40px;
} 


.modal.show{
    display: flex!important;
    align-items: center;
}