body.no-scroll {
  overflow: hidden;
}



.my-modal {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow: auto;
  z-index:20000;  box-sizing:border-box;
 
}

.my-modal-content {
    
  position: absolute;
  box-sizing:border-box;

  padding: 2em;
  background-color: #fff;
  border:solid 2px black;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26), 0 26px 52px rgba(0, 0, 0, 0.26);
  margin-bottom:50px;
 bottom:10px;
 right:10px;
 left:10px;
 overflow-y:scroll;
}

button#js-close{
padding:10px;
margin:10px;
margin-bottom:20px;
margin-left:0;
}
@media only screen and (min-width: 700px) {
  .my-modal-content {
    left: 50%;
    margin-left: -350px;

  }
}
@media only screen and (min-height: 580px) {
  .my-modal-content {
    top: 50%;
    margin-top: -290px;
  
  }
}