html {
	background-color: #1f1c1a;
	--scrollbarBG: #1f1c1a;
	--thumbBG: #666;
}

#outerframe {
	background-color: #1f1c1a;
	color: #fff;
	padding: 8vh 5vw 2vh 5vw;
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 300;
}

#header {
	grid-area: header;
	background-color: #1f1c1a;
}

#galleries {
	grid-area: main;
	position: relative;
}

#gallery {
	position: relative;
	transform-origin: center top;
	min-height: 90vh;
	box-sizing: border-box;
}

#gallery .nodice {
	height: 75vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

#gallery .nodice:not(pending) img {
	animation: popZoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#galleries .loading-box {
	position: absolute;
	top: calc(45vh - 150px);
	left: calc(50% - 150px);
	width: 300px;
	height: 300px;
	mix-blend-mode: screen;
	transition: opacity 0.25s ease-in;
	pointer-events: none;
}

#galleries .loading-box .loading-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#galleries #gallery:not(.loading) ~ .loading-box {
	opacity: 0;
}

#galleries .loading-box:before {
	content: 'loading…';
	position: absolute;
	top: calc(50% - 0.5em);
	left: 0;
	width: 100%;
	text-align: center;
	font-family: azo-sans-uber, sans-serif;
	font-size: 13px;
	color: #868686;
	text-transform: uppercase;
	animation: pulse 2s ease-in-out infinite;
}

#galleries .scrollMarker {
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 160px;
}

#galleries .scrollToTop {
	opacity: 0.5;
	position: fixed;
	right: 4vw;
	bottom: 40px;
	text-indent: -999vw;
	overflow: hidden;
	width: 3em;
	height: 3em;
	background-image: url('data:image/svg+xml;utf8,<svg fill="none" height="7" viewBox="0 0 11 7" width="11" xmlns="http://www.w3.org/2000/svg"><path d="m.997594 6.24271 4.242636-4.24264 4.24265 4.24264" stroke="white" stroke-linecap="round" stroke-width="1.5"/></svg>');
	background-repeat: no-repeat;
	background-position: 55% 40%;
	background-size: 2em;
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid #7c7c7c;
	border-radius: 2em;
	z-index: 1;
	transition: 0.2s transform cubic-bezier(0.34, 1.56, 0.64, 1), 0.2s opacity linear, 0.2s background-color ease;
}

#galleries .scrollToTop:hover {
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.1);
	transform: scale(1.1);
}

#galleries .scrollToTop:not(.show) {
	opacity: 0;
	pointer-events: none;
}

#filters {
	grid-area: aside;
	position: fixed;
	top: 100px;
	left: 5vw;
	width: 300px;
	height: calc(100vh - 100px);
}

#foot {
	grid-area: footer;
}

#layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		'header header'
		'aside main'
		'footer footer';
}
/* 

#gallery.loading {
	background-image: url(../img/Crayoncircle_red.png);
	background-repeat: no-repeat;
	background-size: 321px;
	background-position: center calc(50vh - 160px);
}
 */

#gallery .gallerybox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 15px 45px;
	transition: opacity 0.125s ease-in, transform 0.125s ease-in;
	position: relative;
	z-index: 1;
}

/* 
#gallery .gallerybox.remove {
	position: absolute;
	transform: scale(0.9);
}

#gallery .gallerybox.remove .framecontainer {
	opacity: 0;
	transform: scale(0.1);
}
 */

#gallery .gallerybox .framecontainer {
	/* 	max-width: 300px; */
	box-sizing: border-box;
	transition: opacity 0.5s ease-in, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#gallery[data-thumb-size='large'] .gallerybox .framecontainer {
	padding: 20px 10px;
}

#gallery[data-thumb-size='small'] .gallerybox .framecontainer {
	width: 50%; /* Overridden for larger numbers of columns */
	padding: 15px 7.5px;
}

#gallery .gallerybox .framecontainer .apeframe {
	box-sizing: border-box;
	padding: 10.5% 6.5% 6.5% 7%;
	background-image: url(../images/Final_Frame-0.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	cursor: pointer;
}

#gallery .gallerybox .framecontainer.for-trait .traitframe {
	min-height: 100%; /* Forces trait frames to be uniform heights if the text wraps */
	cursor: default;
}

#gallery .gallerybox .framecontainer .apeframe[data-frame-type='0'] {
	background-image: url(../images/Final_Frame-0.png);
}

#gallery .gallerybox .framecontainer .apeframe[data-frame-type='1'] {
	background-image: url(../images/Final_Frame-1.png);
}

#gallery .gallerybox .framecontainer .apeframe[data-frame-type='2'] {
	background-image: url(../images/Final_Frame-2.png);
}

#gallery .gallerybox .framecontainer .apeframe[data-frame-type='3'] {
	background-image: url(../images/Final_Frame-3.png);
}

#gallery .gallerybox .framecontainer .apeframe img {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

#gallery .gallerybox .framecontainer .apeframe.BG-Yellow img {
	background-color: #a8630a;
	background-image: url(../images/traits/Background/THM_Background_Common_Yellow.jpg);
}

#gallery .gallerybox .framecontainer .apeframe.BG-Green img {
	background-color: #064635;
	background-image: url(../images/traits/Background/THM_Background_Common_Green.jpg);
}

#gallery .gallerybox .framecontainer .apeframe.BG-Black img {
	background-color: #202d41;
	background-image: url(../images/traits/Background/THM_Background_Common_Black.jpg);
}

#gallery .gallerybox .framecontainer .apeframe.BG-Blue img {
	background-color: #0b2772;
	background-image: url(../images/traits/Background/THM_Background_Common_Blue.jpg);
}

#gallery .gallerybox .framecontainer .apeframe.BG-Teal img {
	background-color: #0e7076;
	background-image: url(../images/traits/Background/THM_Background_Common_Teal.jpg);
}

#gallery .gallerybox .framecontainer .apeframe.BG-Red img {
	background-color: #7b0b0a;
	background-image: url(../images/traits/Background/THM_Background_Common_Red.jpg);
}

#gallery .gallerybox .framecontainer .apeframe.BG-Purple img {
	background-color: #41116e;
	background-image: url(../images/traits/Background/THM_Background_Common_Purple.jpg);
}

#gallery .gallerybox .framecontainer.pending {
	opacity: 0;
	transform: translateY(67%) scale(0.9) rotate(15deg);
}

#gallery .gallerybox .framecontainer .apeframe img {
	position: relative;
	width: 100%;
	height: auto;
	z-index: -1;
}

#gallery .gallerybox .framecontainer.for-dape figcaption {
	background-image: url(../img/plaque-small.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	/*   background-size: contain; */
	background-size: 45%;
	padding: 3% 0;
	/*   margin-top: 0.25em; */
}

#gallery .gallerybox .framecontainer.for-dape figcaption .caption-ape {
	text-align: center;
	text-transform: uppercase;
	text-shadow: -1px -1px 2px #7e5635, 1px 1px 2px #bd9f4e;
	font-family: azo-sans-uber, sans-serif;
	color: #221d1a;
}

#gallery[data-thumb-size='large'] .gallerybox .framecontainer figcaption .caption-ape {
	font-size: 2vw; /* Overridden by media queries as column numbers increase */
}

#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption {
	background-size: 60%;
}

#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption .caption-ape {
	font-size: 1.1vw; /* Overridden by media queries as column numbers increase */
	line-height: 0.75;
}

#gallery .gallerybox .framecontainer .traitframe {
	box-sizing: border-box;
	padding: 6.5% 6.5% 5.5% 6.5%;
	background: linear-gradient(180deg, #a8916e 0%, #3e3a37 100%);
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 6px;
	cursor: pointer;
	height: 100%;
}

#gallery .gallerybox .framecontainer .traitframe img {
	/* 	position: relative; */
	height: auto;
	/* 	z-index: -1; */
}

#gallery .gallerybox .framecontainer .traitframe figcaption {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 0.25em;
}

#gallery[data-thumb-size='small'] .gallerybox .framecontainer .traitframe figcaption {
	flex-direction: column;
}

#gallery .gallerybox .framecontainer .traitframe figcaption .primary-caption {
	width: 60%;
}

#gallery .gallerybox .framecontainer .traitframe figcaption .secondary-caption {
	width: 40%;
	display: flex;
	flex-direction: column;
	align-items: end;
}

#gallery[data-thumb-size='small'] .gallerybox .framecontainer .traitframe figcaption .primary-caption,
#gallery[data-thumb-size='small'] .gallerybox .framecontainer .traitframe figcaption .secondary-caption {
	width: 100%;
}

#gallery[data-thumb-size='small'] .gallerybox .framecontainer .traitframe figcaption .secondary-caption {
	margin-top: 0.5em;
	text-align: left;
}

#gallery .gallerybox .framecontainer .traitframe figcaption .caption-head {
	font-family: azo-sans-uber, sans-serif;
	font-size: 14px;
	color: #fff;
}

#gallery .gallerybox .framecontainer .traitframe figcaption .caption-rarity,
#gallery .gallerybox .framecontainer .traitframe figcaption .caption-perc {
	font-size: 13px;
	color: #fff;
}

.tabs-box {
	height: 75px;
	margin: 0 20px;
}

.tabs-box .tabs {
	display: flex;
	flex-direction: row;
	border-bottom: 2px solid #e0b23d;
	margin-bottom: 0.5em;
}

.tabs-box .tabs .tab {
	text-transform: uppercase;
	padding: 0.25em;
	width: 50%;
	text-align: center;
	font-family: azo-sans-uber, sans-serif;
	color: #b2b2b2;
	letter-spacing: 0.07em;
	cursor: pointer;
}

.tabs-box .tabs .tab[data-selected] {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	text-transform: uppercase;
	background-color: #e0b23d;
	/* 
	background: linear-gradient(180deg, #FFD540 0%, #C47001 100%);
	box-shadow: inset 0px 4px 4px #E1CD7E;
 */
	border-radius: 6px 6px 0 0;
	color: #2c2c2c;
}

.tabpanels {
	overflow-y: auto;
	height: calc(98vh - 176px);
}

.tabpanels::-webkit-scrollbar {
	width: 11px;
}
.tabpanels {
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.tabpanels::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
.tabpanels::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 6px;
	border: 3px solid var(--scrollbarBG);
}

.tabpanels .panel:not([data-active]) {
	display: none;
}

.tabpanels .panel {
	padding: 0 20px;
}

.button-group {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.clear-filters {
	background-color: transparent;
	border: none;
	color: #999;
	font-style: italic;
	text-transform: uppercase;
	font-size: 14px;
}

.button-group:not(.filters-active) .clear-filters {
	opacity: 0;
}

.set-thumbs {
	/* 	background-color: transparent; */
	padding: 0;
	border: none;
	overflow: hidden;
	text-indent: -999vw;
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	margin-right: 8px;
	background-color: white;
}

.set-thumbs.large {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="white"><path d="m0 0h6.85714v6.85714h-6.85714z"/><path d="m0 9.14282h6.85714v6.85714h-6.85714z"/><path d="m9.14258 0h6.85714v6.85714h-6.85714z"/><path d="m9.14258 9.14282h6.85714v6.85714h-6.85714z"/></g></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="white"><path d="m0 0h6.85714v6.85714h-6.85714z"/><path d="m0 9.14282h6.85714v6.85714h-6.85714z"/><path d="m9.14258 0h6.85714v6.85714h-6.85714z"/><path d="m9.14258 9.14282h6.85714v6.85714h-6.85714z"/></g></svg>');
}

.set-thumbs.small {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="white"><path d="m0 0h4.21053v4.21053h-4.21053z"/><path d="m0 11.7894h4.21053v4.21053h-4.21053z"/><path d="m11.7891 0h4.21053v4.21053h-4.21053z"/><path d="m11.7891 11.7896h4.21053v4.21053h-4.21053z"/><path d="m0 5.89478h4.21053v4.21053h-4.21053z"/><path d="m11.7891 5.89453h4.21053v4.21053h-4.21053z"/><path d="m5.89453 0h4.21053v4.21053h-4.21053z"/><path d="m5.89453 11.7896h4.21053v4.21053h-4.21053z"/><path d="m5.89453 5.89453h4.21053v4.21053h-4.21053z"/></g></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="white"><path d="m0 0h4.21053v4.21053h-4.21053z"/><path d="m0 11.7894h4.21053v4.21053h-4.21053z"/><path d="m11.7891 0h4.21053v4.21053h-4.21053z"/><path d="m11.7891 11.7896h4.21053v4.21053h-4.21053z"/><path d="m0 5.89478h4.21053v4.21053h-4.21053z"/><path d="m11.7891 5.89453h4.21053v4.21053h-4.21053z"/><path d="m5.89453 0h4.21053v4.21053h-4.21053z"/><path d="m5.89453 11.7896h4.21053v4.21053h-4.21053z"/><path d="m5.89453 5.89453h4.21053v4.21053h-4.21053z"/></g></svg>');
}

.set-thumbs[data-selected] {
	background-color: #e0b23d;
}

.search,
details.category > summary {
	font-family: azo-sans-uber, sans-serif;
}

.search,
details {
	margin-top: 2.5em;
}

summary {
	list-style: none;
	padding-bottom: 1.5em;
	position: relative;
	cursor: pointer;
	outline: none;
	display: flex;
	flex-direction: row;
	align-items: center;
}

summary:before {
	content: '';
	position: absolute;
	top: 1.5em;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #7c7c7c;
}

summary:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 1em;
	width: 1em;
	background-image: url('data:image/svg+xml;utf8,<svg fill="none" height="7" viewBox="0 0 11 7" width="11" xmlns="http://www.w3.org/2000/svg"><path d="m.997594 6.24271 4.242636-4.24264 4.24265 4.24264" stroke="white" stroke-linecap="round" stroke-width="1.5"/></svg>');
	background-repeat: no-repeat;
	background-position: center center;
	transition: transform 0.125s ease-in-out;
	cursor: pointer;
}

summary .filter-tag {
	background-color: #e0b23d;
	border: none;
	margin-left: 0.5em;
	display: inline-block;
	/* 
	font-family: 'Montserrat', sans-serif;
	border-radius: 1em;
	font-size: 12px;
	padding: 0.1em 0.5em;
	text-transform: uppercase;
 */
	border-radius: 50%;
	overflow: hidden;
	text-indent: -999vw;
	height: 7px;
	width: 7px;
}

summary .filter-close {
	position: absolute;
	left: -1.5em;
	top: 0.25em;
	overflow: hidden;
	text-indent: -999vw;
	border: none;
	background-color: transparent;
	height: 1em;
	width: 1em;
	background-image: url('data:image/svg+xml;utf8,<svg fill="none" height="21" viewBox="0 0 22 21" width="22" xmlns="http://www.w3.org/2000/svg"><g stroke="gold"><path d="m1.35355.646447 19.79895 19.798953"/><path d="m.646447 20.6465 19.798953-19.798982"/></g></svg>');
	background-repeat: no-repeat;
	background-position: center center;
}

details:not([open]) summary:after {
	transform: rotate(180deg);
}

summary::-webkit-details-marker {
	display: none;
}

details > summary ~ ul > li {
	-webkit-user-select: none;
	user-select: none;
}

details:not([open]) > summary ~ ul > li {
	/* 	opacity: 0; */
	/* 	transform: translateY(-2em); */
}

details[open] > summary ~ ul > li {
	opacity: 0;
	transform: translateY(-2em);
	animation-name: slideDown;
	animation-duration: 0.125s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-fill-mode: forwards;
}

details > summary ~ ul > li:nth-last-child(1) {
	animation-delay: 0.25s;
}

details > summary ~ ul > li:nth-last-child(2) {
	animation-delay: 0.2s;
}

details > summary ~ ul > li:nth-last-child(3) {
	animation-delay: 0.15s;
}

details > summary ~ ul > li:nth-last-child(4) {
	animation-delay: 0.1s;
}

details > summary ~ ul > li:nth-last-child(5) {
	animation-delay: 0.05s;
}

details > summary ~ ul > li:nth-last-child(n + 6) {
	animation-delay: 0s;
}

.search label {
	display: flex;
	flex-direction: row;
}

.search input[type='number'] {
	width: 8em;
	border: none;
	border-bottom: 1px solid #7c7c7c;
	background-color: transparent;
	color: #fff;
	margin-left: 0.75em;
	text-align: center;
	width: 100%;
}

.search input[type='number']::placeholder {
	font-family: 'Montserrat', sans-serif;
}

.search input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.traitlist {
	margin-top: 0;
	padding-left: 1.5em;
}

.traitlist .filters {
	padding-bottom: 2.5em;
}

.tab-apes .filters .filter + .filter,
.tab-traits .traits .trait + .trait {
	margin-top: 0.85em;
}

.filters .filter label,
.traits .trait label {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
}

.filters .filter label input[type='checkbox'] ~ .check,
.filters .filter label input[type='radio'] ~ .radio,
.traits .trait label input[type='checkbox'] ~ .check,
.traits .trait label input[type='radio'] ~ .radio {
	display: block;
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
	border: 1px solid #fff;
	border-radius: 4px;
	/* 	box-sizing: border-box; */
	background-repeat: no-repeat;
	background-position: 67% 67%;
}

.filters .filter label input[type='radio'] ~ .radio,
.traits .trait label input[type='radio'] ~ .radio {
	border-radius: 1em;
	background-position: center center;
}

.filters .filter input[type='checkbox'],
.filters .filter input[type='radio'],
.traits .trait input[type='checkbox'],
.traits .trait input[type='radio'] {
	display: none;
}

.filters .filter label input[type='checkbox']:checked ~ .check,
.traits .trait label input[type='checkbox']:checked ~ .check {
	background-image: url('data:image/svg+xml;utf8,<svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m11.6995 1.28526-7.31726 7.31735-2.97691-2.97691" stroke="gold" stroke-width="2"/></svg>');
	animation: checkit 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) none;
}

.filters .filter label input[type='checkbox']:not(:checked) ~ .check,
.traits .trait label input[type='checkbox']:not(:checked) ~ .check {
	animation: uncheckit 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) none;
}

.filters .filter label input[type='radio']:checked ~ .radio,
.traits .trait label input[type='radio']:checked ~ .radio {
	background-image: url('data:image/svg+xml;utf8,<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="7" y="7" width="7" height="7" rx="3.5" transform="rotate(-180 7 7)" fill="gold"/></svg>');
	background-size: 0.5em;
	animation: checkit 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) none;
}

.filters .filter label input[type='radio']:not(:checked) ~ .radio,
.traits .trait label input[type='radio']:not(:checked) ~ .radio {
	animation: uncheckit 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) none;
}

#viewer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #1f1c1a;
	transition: opacity 0.25s linear;
}

#viewer:not(.open) {
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}

#viewer.open {
	opacity: 1;
	z-index: 2;
}

#viewerbox .viewercontainer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	transition: opacity 0.2s ease-out, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#viewerbox .viewer-apeframe .image-frame {
	width: 37vw;
	box-sizing: border-box;
	padding: 10.5% 6.5% 6.5% 7%;
	background-image: url(../images/Final_Frame-0.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: relative;
}

#viewerbox .viewer-apeframe[data-frame-type='0'] .image-frame {
	background-image: url(../images/Final_Frame-0.png);
}

#viewerbox .viewer-apeframe[data-frame-type='1'] .image-frame {
	background-image: url(../images/Final_Frame-1.png);
}

#viewerbox .viewer-apeframe[data-frame-type='2'] .image-frame {
	background-image: url(../images/Final_Frame-2.png);
}

#viewerbox .viewer-apeframe[data-frame-type='3'] .image-frame {
	background-image: url(../images/Final_Frame-3.png);
}

#viewer:not(.open) #viewerbox .viewercontainer {
	transform: scale(0.95);
	opacity: 0;
}

#viewerbox .viewer-apeframe img {
	width: 100%;
	height: auto;
	position: relative;
	z-index: -1;
}

#viewerbox .viewer-apeframe figcaption {
	background-image: url(../img/plaque-large.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 33.33%;
	padding: 4% 0;
	/*   margin-top: 0.75em; */
}

#viewerbox .viewer-caption-ape {
	font-size: 2em;
	font-family: azo-sans-uber, sans-serif;
	color: #221d1a;
	text-transform: uppercase;
	text-align: center;
	text-shadow: -1px -1px 3px #7e5635, 1px 1px 3px #bd9f4e;
}

#viewerbox .viewer-specs {
	width: 33vw;
	margin-left: 125px;
}

#viewerbox .viewer-specs .viewer-title {
	font-family: azo-sans-uber, sans-serif;
	font-size: 30px;
	text-transform: uppercase;
	color: #e0b23d;
	margin-bottom: 1em;
}

#viewerbox .viewer-specs .viewer-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 1em;
}

#viewerbox .viewer-specs .viewer-info .attribute-title {
	width: 50%;
	text-transform: capitalize;
	font-family: azo-sans-uber, sans-serif;
}

#viewerbox .viewer-specs .viewer-info .attribute-info {
	width: 50%;
}

.btn-rarible {
	margin-top: 10px;
	font-family: azo-sans-uber, sans-serif;
	height: 50px;
	width: 80%;
	background: rgb(220,169,53);
	border-radius: 47px;
	font-style: normal;
	font-weight: lighter;
	font-size: 22px;
	text-transform: uppercase;
	color: rgb(29,26,25);
	letter-spacing: 0.02em;
	margin: 0 auto;
}

.btn-ape-download {
	margin-top: 10px;
	font-family: azo-sans-uber, sans-serif;
	height: 50px;
	width: 15%;
	background: rgb(220,169,53);
	border-radius: 47px;
	font-style: normal;
	font-weight: lighter;
	font-size: 22px;
	text-transform: uppercase;
	color: rgb(29,26,25);
	letter-spacing: 0.02em;
	margin: 0 auto;
}

.rarible-btn-container {
	padding-top: 30px;
}

@media only screen and (min-width: 768px) {
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer {
		width: 50%;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer {
		width: 25%;
	}
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 1.5vw;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 1.6vw;
	}
}

@media only screen and (min-width: 1101px) {
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer {
		width: 33.333%;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer {
		width: 16.666%;
	}
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 1.67vw;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 1.2vw;
	}
}

@media only screen and (min-width: 1441px) {
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer {
		width: 25%;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer {
		width: 12.5%;
	}
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 1.4vw;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 1.1vw;
	}
}

@media only screen and (min-width: 1768px) {
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer {
		width: 20%;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer {
		width: 10%;
	}
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 1.1vw;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 0.9vw;
	}
}

@media only screen and (min-width: 2101px) {
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer {
		width: 16.666%;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer {
		width: 8.333%;
	}
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 0.9vw;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 0.8vw;
	}
}

@media only screen and (min-width: 2441px) {
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer {
		width: 14.285%;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer {
		width: 7.142%;
	}
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 0.6vw;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 0.72vw;
	}
}

@media only screen and (min-width: 2768px) {
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer {
		width: 12.5%;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer {
		width: 6.25%;
	}
	#gallery[data-thumb-size='large'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 0.55vw;
	}
	#gallery[data-thumb-size='small'] .gallerybox .framecontainer figcaption .caption-ape {
		font-size: 0.67vw;
	}
}

@keyframes checkit {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.25);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes uncheckit {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.8);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-2em);
	}
	100% {
		opacity: 1;
		transform: translateY(0em);
	}
}

@keyframes pulse {
	0% {
		opacity: 0.25;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.25;
	}
}

@keyframes popZoom {
	0% {
		transform: scale(1) rotate(0deg);
	}
	50% {
		transform: scale(1.5) rotate(7.5deg);
	}
	100% {
		transform: scale(1) rotate(0deg);
	}
}