.modal{background-color:#000;background-color:rgba(0,0,0,.4);display:none;height:100%;left:0;overflow:auto;padding-top:100px;position:fixed;top:0;width:100%;z-index:999}.modal-content{-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-name:animatetop;animation-name:animatetop;background-color:#fff;border:0;border-radius:10px;margin:auto;padding:2rem;position:relative;width:600px}.modal-header{align-items:center;display:flex;justify-content:space-between}@-webkit-keyframes animatetop{0%{opacity:0;top:-300px}to{opacity:1;top:0}}@keyframes animatetop{0%{opacity:0;top:-300px}to{opacity:1;top:0}}.close{color:#ccc;font-size:28px;font-weight:700;position:absolute;right:20px}.close:focus,.close:hover{cursor:pointer;text-decoration:none;transform:scale(1.25)}@media only screen and (max-width:500px){.modal-content{width:100%!important}}