#modal-backdrop {display: none; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50;}
.modal {display: none; z-index: 60;}
.modal.open {display: block;}
.modal-header {position: fixed; width: 80%; max-width: 800px; top: 10%; left: 50%; transform: translateX(-50%); height: 100px; z-index: 62; background: #00b0ec; color: #ffffff; padding: 32px 56px;}
.alt-modal .modal-header {max-width: 640px; background: #ffffff; color: #333333; height: 64px;}
.modal-title {position: relative;}
.modal-title-small {font-size: 0.6em; text-transform: none;}
.modal-header .modal-close {position: absolute; right: 0; top: 0; font-size: 2.5em; cursor: pointer;}
.alt-modal .modal-header .modal-close {right: -48px; top: -24px; font-size: 2em; cursor: pointer; color: #a8a8a8;}
.modal-body {position: fixed; width: 80%; max-width: 800px; top: calc(10% + 100px); left: 50%; transform: translateX(-50%); max-height: calc(80% - 100px); z-index: 61; overflow-y: scroll; background: #ffffff; padding: 32px 56px;}
.alt-modal .modal-body {max-width: 640px; top: calc(10% + 64px); max-height: calc(80% - 64px);}
.modal-body.standalone {top: 10%; max-width: 1024px; max-height: none; overflow: auto;}
.modal-body.standalone .modal-close {position: absolute; top: 8px; left: calc(100% + 16px); font-size: 5em; cursor: pointer; color: #ffffff;}
.modal-body.full {padding: 0; overflow: visible;}
.modal-section:nth-child(n+2) {margin-top: 24px;}
.modal-content.standalone {width: 100%; overflow: hidden;}
.modal h2, .modal h3 {text-transform: uppercase; font-weight: bold; margin-bottom: 8px;}
.modal h2 {font-size: 18px;}
.modal h3 {font-size: 15px;}
.modal-body hr + .modal-section {margin-top: 0;}