/* Layout: every page is the original 1024px Readymag canvas, scaled to the window width (like Readymag does). */
html, body { margin: 0; padding: 0; background: #fff; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

.bg { position: fixed; inset: 0; z-index: -1; }
.bg .rmwidget { position: absolute; inset: 0; }

.stage { position: relative; width: 100%; height: calc((var(--h) * var(--s, 1) + var(--pad, 0) * 2) * 1px); overflow: hidden; }
.stage .page-content-container {
  position: absolute; left: 0; top: calc(var(--pad, 0) * 1px / var(--s, 1));
  width: 1024px; height: calc(var(--h) * 1px); zoom: var(--s, 1);
}
.fixed-layer { position: fixed; top: 0; left: 0; width: 1024px; height: calc(100vh / var(--s, 1)); zoom: var(--s, 1); z-index: 1000; pointer-events: none; }
.fixed-layer .fixed-position-container { position: absolute; inset: 0; }
.fixed-layer .rmwidget, .fixed-layer .animation-container .rmwidget { pointer-events: all; }

a.maglink { text-decoration: none; }

/* slideshows */
.ss { position: absolute; inset: 0; overflow: hidden; background: var(--ss-bg, transparent); }
.ss-img { position: absolute; inset: 0; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; transition: opacity var(--ss-fade, .5s) ease; }
.ss.fill .ss-img { background-size: cover; }
.ss.fit .ss-img { background-size: contain; }
.ss-img.on { opacity: 1; }
.ss[data-type="slider"] .ss-img { opacity: 1; transition: transform var(--ss-fade, .5s) ease; }
.ss-prev, .ss-next { position: absolute; top: 0; bottom: 0; width: 40px; border: 0; background: none; cursor: pointer; z-index: 2; }
.ss-prev { left: 0; } .ss-next { right: 0; }
.ss-prev::after, .ss-next::after {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border: solid #fff; border-width: 0 0 2px 2px;
}
.ss-prev::after { left: 14px; transform: rotate(45deg); }
.ss-next::after { right: 14px; transform: rotate(-135deg); }

.rmwidget.video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the original had drag enabled on some widgets; disabled on purpose */
.rmwidget.draggable { cursor: inherit; }

.text-viewer p { margin: 0; }