.modal1 {
    width: 80%;
    background: white;
    border: 1px solid #ccc;
    transition: 1.1s ease-out;
    box-shadow: -2rem 2rem 2rem rgba(0, 0, 0, 0.2);
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    top: 50px;
    position: absolute;
    top: 50px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.modal1sm {
    width: auto;
}

.modal1.off {
    opacity: 0;
    visibility: hidden;
    filter: blur(8px);
    transform: scale(0.33);
    box-shadow: 1rem 0 0 rgba(0, 0, 0, 0.2);
}

@supports (offset-rotate: 0deg) {
    offset-rotate: 0deg;
    offset-path: path("M 250,100 S -300,500 -700,-200");

    .modal1.off {
        offset-distance: 100%;
    }
}

@media (prefers-reduced-motion) {
    .modal1 {
        offset-path: none;
    }
}

.modal1 h5 {
    border-bottom: 1px solid #ccc;
    padding: 1rem;
    margin: 0;
}

.modal1 .content {
    padding: 1rem;
}

.modal1 .actions {
    border-top: 1px solid #ccc;
    background: #eee;
    padding: 0.5rem 1rem;
}

.modalBtn {
    margin-right: 10px;
}