.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1072; display: none; overflow: hidden; outline: 0; }

.modal .modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; }

@media (min-width: 576px) { .modal .modal-dialog { max-width: 500px; margin: 1.75rem auto; } }

.modal .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: .3rem; outline: 0; }

.fade { opacity: 0; transition: opacity .15s linear; }

.show { opacity: 1; }

[tabindex="-1"]:focus { outline: 0 !important; }

.modal-backdrop.fade { opacity: 0; }

.modal-backdrop.fade.show { opacity: .5; display: block; }

.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1071; background-color: #000; display: none; }

.modal { position: relative; }

.modal .modal-dialog { margin: 2% auto 1.75rem; max-width: 818px; }

@media (max-width: 768px) { .modal .modal-dialog {margin: 10% 3%;}
  .modal .modal-content { width: 95%; margin: auto; } }