.modal.fade {
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1);
}

.modal:not(.show) {
    pointer-events: none;
}

.modal.fade.show {
    opacity: 1;
    transition: opacity 200ms ease-out;
}

.modal.fade .modal-box {
    transform: scale(.95)
}

.modal.fade.show .modal-box {
    transform: scale(1);
}

.modal .modal-box.modal-md {
    max-width: 60vw;
    height: 60vh;
}

.modal .modal-box.modal-lg {
    max-width: 80vw;
    height: 80vh;
}

.modal .modal-box.modal-full {
    max-width: 95vw;
}

@media screen and (max-width: 576px) {
    .modal .modal-box.modal-lg,
    .modal .modal-box.modal-md {
        max-width: 95vw;
        height: 95vh;
    }
}