.modal{
	display: block;
	position: fixed;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: -1;
	opacity: 0;
	transition: opacity 0.2s, z-index 0s 0.2s;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	cursor: pointer;
}

.modal > * {
	display: inline-block;
	white-space: normal;
	vertical-align: middle;
	text-align: left;
}

.modal:before {
	display: inline-block;
	overflow: hidden;
	width: 0;
	height: 100%;
	vertical-align: middle;
	content: "";
}

.modal-visible .modal {
	z-index: 9999;
	opacity: 1;
	transition: opacity 0.2s;
}

.modal-inner {
    position: relative;
    overflow: hidden;
    max-width: calc(90% - 16px);
    max-height: calc(100% - 16px);
    background: #fff;
    z-index: -1;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;
    border-radius: 6px;
}
.modal-visible .modal-inner {
    z-index: 100;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s, transform 0.2s;
	cursor: auto;
}

#modal-content {
    padding: 16px;
}

#modal-content img {
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
  .modal-inner {
    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
  }
  #modal-content #modal-poster img {
    width: auto;
    height: 90vh;
  }
}