#modal-overlay { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(0,0,0,0.45); z-index: 998; display: none; top: 0; left: 0;}.modal, .modal:before, .modal:after, .modal * { -moz-box-sizing: border-box;}.modal { font-size: 16px; display: none; visibility: hidden; top: 100px; left: 50%; margin-left: -40%; width: 80%; height: auto; background-color: white; border: solid 1px #666; overflow:visible; position: absolute; z-index: 999; padding: 1.25em; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); transform: scale(1, 1); transform-origin: 0;}.modal .close-modal { text-decoration: none; text-align: center; font-size: 1.375em; line-height: 1; position: absolute; top: .5em; right: .6875em; color: #aaa; text-shadow: 0 -1px 1px rbga(0, 0, 0, .6); font-weight: bold; cursor: pointer;}.modal .title { display: block;}.modal-placeholder { z-index: 100; left: 50%; position: absolute;} @media only screen and (min-width: 768px){.modal { padding: 1.875em; top: 6.25em;}.modal.tiny { margin-left: -15%; width: 30%;}.modal.small { margin-left: -20%; width: 40%;}.modal.medium { margin-left: -30%; width: 60%;}.modal.large { margin-left: -35%; width: 70%;}.modal.xlarge { margin-left: -47.5%; width: 95%;}.modal>:first-child { margin-top: 0;}.modal>:last-child { margin-bottom: 0;}} @media print{.modal { background: white!important;}}