/*============================================================================*/
/*                            GROUP BUTTONS SECTION                           */
/*============================================================================*/

#groupsWrapper {
	margin: var(--page-spacing);
	width: calc(100% - var(--page-spacing));
	margin-bottom: 0;
	margin-right: 0;
	user-select: none;
	-webkit-user-select: none;
}

.groupButton {
	box-shadow: 0px 0px 14px RGBA(0,0,0,0.1);
	background-color: var(--col-accent);
	color: var(--col-text);
	border-color: var(--col-accent);
	border-width: var(--border-width);
	border-style: solid;
	border-radius: var(--corner-radius);

	width: calc(100% / var(--buttons-per-row) - var(--page-spacing) - var(--border-width) - var(--border-width));
	height: var(--button-height);
	position: relative;
	display: inline-block;
	margin: var(--page-spacing);
	margin-left: 0;
	margin-top: 0;

	transition: color 0.1s, background-color 0.1s, border-color 0.1s, box-shadow 0.1s;
	cursor: pointer;

}

.groupButton:hover {
	box-shadow: 0px 0px 6px RGBA(0,0,0,0.2);
	background-color: var(--col-body);
	color: var(--col-accent);
	border-color: var(--col-accent);
}

.groupButton:active {
	filter: brightness(90%);
}

.groupButton p {
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-family: var(--font-big);
	font-size:   var(--font-btn-size);
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

/*============================================================================*/
/*                               ARTWORKS PANEL                               */
/*============================================================================*/

#artworksWrapper {
	margin: var(--page-spacing);
	width: calc(100% - var(--page-spacing));
	margin-bottom: 0;
	margin-right: 0;
	vertical-align: middle;
	user-select: none;
	-webkit-user-select: none;
}

.artwork {

	width: calc(100% / var(--artworks-per-row) - var(--page-spacing));
	padding-top: calc(100% / var(--artworks-per-row) - var(--page-spacing));
	height: 0;
	position: relative;
	display: inline-block;
	margin: var(--page-spacing);
	margin-left: 0;
	margin-top: 0;
	vertical-align: middle;
	transition: filter 0.1s;
	filter: none;
	cursor: pointer;
}

.artwork img {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: contain;
	box-shadow: var(--artwork-box-shadow);
	filter: var(--artwork-drop-shadow);
	transform: translate(-50%, -50%);
}

.artwork:hover {
	filter: brightness(90%);
}

.artwork:active {
	filter: brightness(80%);
}



a {
	color: inherit;
	text-decoration: underline;
	filter: brightness(100%);
	transition: filter 0.1s;
}

a:hover {
	filter: brightness(70%);
}


#paginationPages {
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
	text-align: center;
}

.paginationPageLink, .paginationArrow {
	display: inline-block;
	margin-left: 4px;
	margin-right: 4px;
	color: var(--col-highlight);
	text-decoration: none;
	transition: text-decoration 0.3s;
	cursor: pointer;
}

.paginationPageLink:hover, .paginationArrow:hover {
	text-decoration: underline;
}

.paginationPageSelected {
	color: var(--col-text);
	text-decoration: underline;
}


#paginationMoreTrigger {
	height: 0;
	width: 100%;
}