body.dialoging{overflow:hidden}dialog{position:fixed;top:100%;left:0;z-index:12;width:100%;height:100%;padding:20px;background:#fff;background:rgba(255,255,255,0.98);border:none}dialog.animation{transition:top 0.2s ease-in-out}dialog.open{top:0%}dialog::backdrop,dialog+.backdrop{top:100%;background:#fff;opacity:0.9;transition:top 0.2s ease-in-out}dialog.open::backdrop,dialog.open+.backdrop{top:0%}dialog .close{outline:none;width:18px;display:block;position:absolute;top:30px;left:30px}dialog img{max-height:100%;max-width:100%}dialog .container{height:100%;padding:50px 60px}dialog .container .next,dialog .container .prev{position:absolute;top:50%;top:calc(50% - 20px);font-size:72px;padding:0;background:transparent;border:none;cursor:pointer;transition:opacity 0.1s linear;outline:none}dialog .container .next{right:30px}dialog .container .next:hover{opacity:0.3}dialog .container .prev{left:30px}dialog .container .prev:hover{opacity:0.3}.modal-content{overflow-y:scroll;height:100%;text-align:center}.modal-content figure{margin:0}@supports (display: flex){.modal-content{display:flex;align-items:center;justify-content:center}}@media screen and (max-width: 640px){dialog .close{top:20px;left:20px}dialog .container{padding:50px}dialog .container .next{right:20px}dialog .container .prev{left:20px}}