#content-viewer-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50px;
	bottom: 0;
	left: 0;
	right: 0;
	background: #0005;
	transition: var(--trans);
	z-index: 999;
}

#content-viewer {
	display: grid;
	grid-template-columns: 1fr 300px;
	position: relative;
	max-width: calc(100% - (var(--winspace) * 2));
	max-height: calc(100% - (var(--winspace) * 2));
	min-width: 600px;
	min-height: 400px;
	border-radius: var(--corl);
	background: var(--wincol);
	box-shadow: var(--winshadow);
	transition: var(--trans);
}

#viewer-gradient-top {
	position: absolute;
	top: 0;
	left: var(--winspace);
	right: var(--corl);
	height: var(--winspace);
	background: linear-gradient(var(--wincol) 37%, transparent 100%);
	pointer-events: none;
	z-index: 99;
}

#viewer-gradient-bottom {
	position: absolute;
	bottom: 0;
	left: var(--winspace);
	right: var(--corl);
	height: var(--winspace);
	background: linear-gradient(transparent 0%, var(--wincol) 63%);
	pointer-events: none;
	z-index: 99;
}

#viewer-close {
	display: block;
	position: absolute;
	padding: 7px;
	box-sizing: border-box;
	top: -12px;
	right: -12px;
	width: 36px;
	height: 36px;
	border-radius: var(--corf);
	background: var(--pricol);
	cursor: pointer;
	z-index: 999;
	transition: var(--trans-fast);
}

#viewer-close:hover {
	background: var(--pricol-hover);
	box-shadow: 0px 0px 10px var(--pricol);
}

#viewer-left {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: var(--winspace);
	min-width: 0;
	min-height: calc(100% - (var(--winspace)*2));
	max-width: calc(100vw - 300px - (var(--winspace) * 2));
	max-height: calc(100vh - 50px - (var(--winspace) * 2));
}

#viewer-left img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--cors);
}

#viewer-right {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	padding: var(--winspace) var(--winspace) var(--winspace) 5px;
	box-sizing: border-box;
	top: calc(var(--corl) / 2);
	right: 0;
	width: 300px;
	max-height: calc(100% - var(--corl));
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#viewer-right::-webkit-scrollbar {
	width: var(--corl);
	background: var(--wincol);
	border-top-right-radius: var(--corl);
	border-bottom-right-radius: var(--corl);
}

#viewer-right::-webkit-scrollbar-thumb {
	border: 5px solid var(--wincol);
	border-radius: var(--corf);
	background: var(--borcol);
	cursor: pointer;
}

#viewer-right::-webkit-scrollbar-thumb:hover {
	background: var(--borcol-strong);
}

#viewer-right h1 {
	font-size: 16pt;
	text-align: center;
	margin-bottom: 5px;
}

#viewer-right h3 {
	font-size: 12pt;
	font-style: italic;
	text-align: center;
	margin-bottom: 15px;
	color: var(--txtcol-subtle);
}

.content-info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0px 10px;
	margin: 30px 0px;
	width: 100%;
	max-width: 400px;
}

.info-location {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0px auto 0px auto;
}

.info-location img {
	max-height: 28px;
	margin-right: 5pt;
}

.info-location b {
	font-style: italic;
}

.info-tile {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.info-tile i {
	color: var(--txtcol-subtle);
}

.info-line {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 3px 0px;
	width: 100%;
	max-width: 400px;
}

.info-line b {
	margin-right: 5pt;
}

.info-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;
	margin: 30px 0px;
}

.info-tags p {
	display: block;
	padding: 4px 16px;
	border-radius: var(--corf);
	background: var(--wincol-light);
}

#download-btn {
	display: block;
	max-width: 300px;
	margin-bottom: 10px;
	padding: 8px 25px;
	border-radius: var(--corf);
	border: 2px solid var(--pricol-light);
	background: var(--pricol);
	font-weight: bold;
	font-size: 13pt;
	text-decoration: none !important;
	cursor: pointer;
	transition: var(--trans-fast);
}

#download-btn:hover {
	background: var(--pricol-hover);
	box-shadow: 0px 0px 10px var(--pricol);
}

#download-info {
	font-size: 11pt;
	color: var(--txtcol-subtle);
	text-align: center;
}

#download-info a {
	font-size: 11pt;
	color: var(--txtcol-link);
	text-wrap-mode: nowrap;
	cursor: pointer;
	transition: var(--trans-fast);
}

#download-info a:hover {
	text-decoration: underline;
	color: var(--txtcol-link-hover);
}

#portfolio-header {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: calc(100% + 40px);
	height: 30vh;
	min-height: 300px;
	margin: 0px -20px;
}

#ph-content {
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	width: 100%;
	max-width: 1000px;
	height: 100%;
	padding: 0px var(--winspace);
	box-sizing: border-box;
}

#ph-left, #ph-right {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 100%;
}

#ph-title h3 {
	display: block;
	color: var(--txtcol-muted);
	font-size: 14pt;
}

#ph-title h1 {
	display: block;
	color: var(--txtcol);
	font-size: 32pt;
}

#ph-links {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

#ph-links i {
	cursor: default;
}

#ph-link-list {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-top: 6px;
}

#ph-link-list a {
	display: block;
	padding: 6px 15px;
	border-radius: var(--cors);
	transition: var(--trans-fast);
}

#ph-link-list a:hover {
	transform: scale(1.2);
	filter: drop-shadow(0px 0px 4px #FFF5);
}

#ph-link-list a img {
	display: block;
	width: 32px;
	height: 32px;
}

#ph-right img {
	display: block;
	max-height: 80%;
	border-radius: var(--corl);
	box-shadow: 0px 0px 20px #000A;
	user-select: none;
}

#ph-right b {
	position: absolute;
	bottom: 18%;
	font-size: 15pt;
	color: var(--txtcol);
	text-shadow: 0px 0px 12px #000, 0px 0px 10px #000;
	text-align: center;
	cursor: default;
}

#ph-right i {
	position: absolute;
	bottom: 13%;
	font-size: 11pt;
	color: #fffa;
	text-shadow: 0px 0px 12px #000, 0px 0px 10px #000;
	text-align: center;
	cursor: default;
}

#portfolio-collections {
	display: block;
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
}

#collections-scroll-left {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: -3px;
	top: 0;
	bottom: 0;
	width: 30px;
	background: linear-gradient(to right, var(--bgcol), transparent);
	z-index: 50;
}

#collections-scroll-right {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: -3px;
	top: 0;
	bottom: 0;
	width: 30px;
	background: linear-gradient(to left, var(--bgcol), transparent);
	z-index: 50;
}

#collections-scroll-left img, #collections-scroll-right img {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	filter: drop-shadow(0px 0px 4px var(--bgcol)) drop-shadow(0px 0px 4px var(--bgcol));
	cursor: pointer;
	transition: var(--trans);
}

#collections-scroll-left img {
	justify-content: flex-start;
	padding: 5px 12px 5px 0px;
}

#collections-scroll-left img:hover {
	padding: 5px 5px 5px 5px;
	filter: drop-shadow(0px 0px 4px #fff);
}

#collections-scroll-right img {
	justify-content: flex-end;
	padding: 5px 0px 5px 12px;
}

#collections-scroll-right img:hover {
	padding: 5px 5px 5px 5px;
	filter: drop-shadow(0px 0px 4px #fff);
}

#portfolio-collections-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	position: relative;
	width: 100%;
	padding: 0px 30px;
	box-sizing: border-box;
	overflow: hidden;
}

#portfolio-collections-list a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px 15px;
	border-radius: var(--corf);
	color: var(--txtcol);
	background: var(--wincol);
	text-wrap-mode: nowrap;
	transition: var(--trans);
}

#portfolio-collections-list a:hover {
	text-decoration: none !important;
	color: var(--txtcol) !important;
	background: var(--wincol-light);
}

.viewing-collection {
	background: var(--pricol) !important;
}

#portfolio-content {
	display: grid;
	gap: 5px;
	position: relative;
}

.one-column {
	grid-template-columns: minmax(0, 1fr);
}

.two-column {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-column {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-column {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: stretch;
	gap: 5px;
	position: relative;
}

.content-photo {
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	transition: var(--trans);
}

.content-photo img {
	display: block;
	width: 100%;
	transition: var(--trans);
}
.item-hover {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: transparent;
	transition: var(--trans);
}

.content-photo:hover .item-hover {
}

.item-hover-border {
	display: block;
	width: 0;
	height: 3px;
	background: white;
	box-shadow: 0px 0px 25px 3px transparent;
	transition: var(--trans);
}

.content-photo:hover .item-hover-border {
	width: 100%;
	box-shadow: 0px 0px 25px 3px white;
}

@media screen and (max-width: 1100px) {
	#content-viewer {
		display: flex;
		flex-flow: column;
	}

	#viewer-left {
		min-width: auto !important;
		min-height: auto !important;
		max-width: none !important;
		max-height: none !important;
	}

	#viewer-left img {
		max-height: 55vh;
	}

	#viewer-right {
		position: relative;
		width: 100%;
		padding: var(--winspace);
		top: auto;
		bottom: calc(var(--corl) / 2);
	}
}

@media screen and (max-width: 700px) {
	#content-viewer {
		min-width: calc(100% - (var(--winspace) * 2));
		min-height: calc(100% - (var(--winspace) * 2));
	}
}

@media screen and (max-width: 500px) {
	#portfolio-header {
		height: auto;
	}

	#ph-content {
		flex-flow: column;
		gap: 30px;
		height: auto;
		margin: 50px 0px;
	}

	#ph-right {
		max-width: 70vw;
		height: auto;
	}

	#ph-right img {
		max-width: 100%;
	}

	#ph-right b {
		bottom: 10%;
	}

	#ph-right i {
		bottom: 6%;
	}
}