.inkrender {
}
.inkrender p {
	margin: 0 0 1.2em 0;
}
.inkrender p:last-child {
	margin-bottom: 0;
}

.inkrender .component {
	display: block; position: relative;
	background: #0003;
}
.inkrender .component.below {
}
.inkrender .component.solo {
	border-top: none !important;
}

.inkrender .component .items {
	display: block; position: relative;
	padding: 0.75rem;
}
.inkrender .component .item {
	background: #0003; box-shadow: 0 0 1px #fff2 inset;
}

.inkrender .component.quote {
	padding: 1rem;
	background: #0003;
}

.inkrender .component.text {
	background: none;
}

.inkrender .component.links .items {
	padding-top: 0;
}
.inkrender .component.links .item.link {
	display: flex; position: relative; align-items: center;
	margin-top: 0.75rem; padding: 0.75rem;
	border-top: 1px solid #fff1;
}
.inkrender .component.links .item.link .thumbnail {
	flex: 0 0 7rem; position: relative;
	width: 7rem; height: 5.25rem; margin-right: 1rem;
	background: #000;
	font-size: 1.75rem; color: #fff5;
}
.inkrender .component.links.q2 .item.link .thumbnail {
	width: 9rem; height: 6.75rem;
}
.inkrender .component.links .item.link .thumbnail i,
.inkrender .component.links .item.link .thumbnail img {
	display: block; position: absolute;
	left: 50%; top: 50%; width: auto; height: auto; max-width: 100%; max-height: 100%; transform: translate(-50%, -50%);
}
.inkrender .component.links .item.link .info {
	flex: 1 1 auto; position: relative;
	vertical-align: top;
	white-space: normal;
}
.inkrender .component.links .item.link .title {
	font-weight: bold; color: #fff;
}
.inkrender .component.links .item.link .url {
	margin-top: 0.5rem;
}
.inkrender .component.links .item.link .url a {
	color: #7bf; text-decoration: underline;
}
.inkrender .component.links .item.link .url a:hover {
	color: #fff;
}
.inkrender .component.links .item.link .description {
	margin-top: 0.5rem;
	font-size: 0.875rem; color: #fff7;
}

.inkrender .component.links .item.youtube {
	display: block;
	width: auto; max-width: 100%; margin: 0.75rem 0 0 0;
}
.inkrender .component.links .item.youtube .video {
	display: block; position: relative; overflow: hidden; clear: both;
	height: 0; padding: 0 0 56.25% 0;
	background: #000; box-shadow: 0 0 1px #fff2;
}
.inkrender .component.links .item.youtube .video iframe {
	position: absolute;
	left: 0; top: 0; width: 100%; height: 100%;
}

.inkrender .component.media .inkviewer {
	display: flex;
}
.inkrender .component.media .full {
	flex: 1 1 auto; position: relative;
	border-right: 1px solid #fff1;
}
.inkrender .component.media.qty1 .full {
	margin: 0 auto;
}
.inkrender .component.media .full .zoom {
	display: block; position: absolute; z-index: 999;
	right: 0; top: 0.75rem; width: 2rem; height: 2rem;
	background: #000a; box-shadow: 0 0 1px #fff3;
	text-align: center; line-height: 2rem; color: #fff;
}
.inkrender .component.media .full .wrap {
	display: block; position: relative;
	width: 100%; padding: 0 0 75% 0; height: 100%;
}
.inkrender .component.media .full .wrap img,
.inkrender .component.media .full .wrap video {
	position: absolute;
	left: 0; top: 0; width: 100%; height: 100%;
	-o-object-fit: contain; object-fit: contain;
}
.inkrender .component.media .thumbs {
	flex: 0 0 6.5rem;
	background: #0003;
	overflow-y: auto;
}
.inkrender .component.media.qty1 .thumbs { display: none; }
.inkrender .component.media.qty5 .thumbs,
.inkrender .component.media.qty6 .thumbs,
.inkrender .component.media.qty7 .thumbs,
.inkrender .component.media.qty8 .thumbs { flex-basis: 12.25rem; }
.inkrender .component.media.qty9 .thumbs,
.inkrender .component.media.qty10 .thumbs,
.inkrender .component.media.qty11 .thumbs,
.inkrender .component.media.qty12 .thumbs { flex-basis: 18rem; }

.inkrender .component.media .items {
	display: flex; flex-wrap: wrap; align-content: flex-start;
	padding: 0.75rem;
	gap: 0.75rem;
}
.inkrender .component.media .item {
	display: block; position: relative;
	width: 5rem;
	cursor: pointer;
}
.inkrender .component.media .item.current {
	box-shadow: 0 0 2px 1px #fffc;
}
.inkrender .component.media .item img {
	display: block;
	width: auto; height: 100%;
}
.inkrender .component.media .item.current img {
	opacity: 0.5;
}
.inkrender .component.media .item.image::after {
	content: "\f03e";
	display: block; position: absolute;
	right: 3px; bottom: 3px; width: 1.5rem; height: 1.5rem;
	background: #000a; box-shadow: 0 0 1px #fff3;
	font-family: "Font Awesome 7 Pro"; font-weight: 300; line-height: 1.5rem; text-align: center; color: #fff;
}
.inkrender .component.media .item.video::after {
	content: "\f008";
	display: block; position: absolute;
	right: 3px; bottom: 3px; width: 1.5rem; height: 1.5rem;
	background: #000a;
	font-family: "Font Awesome 7 Pro"; font-weight: 300; line-height: 1.5rem; text-align: center; color: #fff;
}

.inkrender .component.files .items {
	padding-top: 0; padding-right: 0;
}
.inkrender .component.files .item {
	display: inline-block; position: relative;
	margin: 0.75rem 0.75rem 0 0; padding: 0.75rem 0.75rem 0.75rem 3.25rem;
	color: #eee; text-decoration: none;
}
.inkrender .component.files .item .icon {
	display: block; position: absolute;
	left: 0; top: 0; width: 3.5rem; height: 3.5rem;
	margin-right: 0.5rem;
	font-size: 2rem; text-align: center; line-height: 3.5rem; color: #fff9;
}
.inkrender .component.files .item .info {
	flex: 1 1 auto;
}
.inkrender .component.files .item .info .name {
	display: block;
	font-weight: bold; color: #fff; white-space: nowrap;
}
.inkrender .component.files .item .info .details {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem; color: #fff7;
}

.inkrender .banner {
	display: block; position: relative;
	width: 100%; padding: 0 0 33.3333% 0;
}
.inkrender .banner img {
	display: block; position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	-o-object-fit: contain; object-fit: cover;
}

#zoomer {
	display: none; position: fixed; z-index: 9999;
	left: 0; top: 0; right: 0; bottom: 0;
	background: #000c;
}
#zoomer .media {
	display: block; position: absolute;
	left: 0; top: 0;
	background: #fff0;
}
#zoomer .media img,
#zoomer .media video {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	-o-object-fit: contain; object-fit: contain;
}
#zoomer .close {
	display: block; position: absolute;
	right: 0.75rem; top: 0.75rem; width: 2rem; height: 2rem;
	background: #0003;
	font-size: 1.5rem; color: #fff; text-align: center; text-shadow: 0 0 3px #000; line-height: 2rem;
}