body.open {
  overflow-y: hidden; }

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: auto; }

.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%; }

.close_bt {
  text-align: right;
  font-size: 1.5em;
  margin-top: -.5em;
  color: #333333; }
  .close_bt a {
    color: #333333; }

.modal__content {
  background: #fff;
  left: 50%;
  padding: 1em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto; }
  .modal__content img,
  .modal__content video {
    width: 100%;
    max-width: 450px;
    height: auto; }

p.ex {
  margin-top: .5em;
  text-align: center; }

@media (max-width: 520px) {
  .modal__content {
    width: 85%; }

  .md_video {
    width: 75%; } }

/*# sourceMappingURL=modal.css.map */