.js-modal {
  display: none;
}
.js-modal.is-open {
  display: block;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.modal-contents {
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  position: relative;
  max-width: 100%;
  max-height: 100vh;
  margin: 20px;
}
.modal-btn-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  color: #4d4d4d;
}
.modal-btn-close:hover {
  color: #11bdbd;
}
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.js-modal[aria-hidden="false"] .modal-overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.js-modal[aria-hidden="false"] .modal-contents {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.js-modal[aria-hidden="true"] .modal-overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.js-modal[aria-hidden="true"] .modal-contents {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}
.js-modal .modal-contents, .modal .modal-overlay {
  will-change: transform;
}