.modal{display:none;position:fixed;z-index:12;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(36,37,104,.4);z-index:100}.modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:30%;position:relative;animation:slideDown .5s ease-in-out}@media screen and (max-width:500px){.modal-content{margin:1rem auto}}.animate-out{animation:slideUp .5s ease-in-out}.close-button{color:#aaa;float:right;font-size:28px;font-weight:700}.close-button:focus,.close-button:hover{color:#000;text-decoration:none;cursor:pointer}@keyframes slideDown{0%{transform:translateY(-100%)}100%{transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}