.modal-box {display: none; position: fixed; z-index: 1000; width: 98%; background: white; border-bottom: 1px solid #aaa; border-radius: 4px; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.1); background-clip: padding-box;top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.modal-box header, .modal-box .modal-header {padding: 1.25em 1.5em; border-bottom: 1px solid #ddd; }
.modal-box header h3, .modal-box header h4, .modal-box .modal-header h3, .modal-box .modal-header h4 { margin: 0; }
 .modal-box .modal-body { padding: 2em 1.5em; }
.modal-box footer, .modal-box .modal-footer {padding: 1em; border-top: 1px solid #ddd; background: rgba(0, 0, 0, 0.02); text-align: right; }
.modal-overlay {opacity: 0; filter: alpha(opacity=0); position: fixed; top: 0; left: 0; z-index: 900; width: 100%; height: 100%; background: rgba(0, 0, 0, 1) !important; }
.modal-box a.close {line-height: 1; font-size: 1.5em; position: absolute; top: 5%; right: 2%; text-decoration: none; color: #bbb; }
.modal-box a.close:hover {color: #222; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; transition: color 1s ease; }
@media (min-width: 32em) {
  .modal-box { width: 70%; }
}