:root {
	--primary-font: 'Arial', sans-serif;
	--secondary-font: 'Times', serif;
	--text-color: #2f2929;
	--primary-color: rgb(0, 38, 255);
	--secondary-color: #834a00;
	--grey: rgb(177, 177, 177);
	color: var(--text-color);
	font-family: var(--primary-font);
	cursor: default;
	font-size: 16px;
	letter-spacing: 0.0025em;
	-webkit-animation: var(--fade-in-effect);
	-moz-animation: var(--fade-in-effect);
	-ms-animation: var(--fade-in-effect);
	-o-animation: var(--fade-in-effect);
	animation: var(--fade-in-effect);
}

::selection {
	background: var(--text-color);
	color: #fff;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

html,
body,
ul {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
}

body {
	height: 100vh;
	width: 100vw;
	margin: 0 auto;
}

/* ------------------------------------------ */
/* STYLING FOR TOP & BOTTOM 1616 TITLE HEADER */
/* ------------------------------------------ */

header,
nav,
main,
footer {
	width: 50%;
	min-width: 800px;
	margin: 0 auto;
}

header,
footer {
	text-align: center;
	font-family: var(--secondary-font);
}

header h3 {
	margin-bottom: 0.5rem;
}

.header__container {
	margin: 1rem 0;
}

.header__container p {
	margin: 0.25em 0 0 0;
	font-size: 10px;
}

.header__container img {
	min-width: 20%;
	height: 64px;
	width: auto;
}

.header__container + div {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nav-dropdown select,
.tab__container {
	padding: 0;
}

.nav-dropdown {
	color: var(--text-color);
	background: white;
	display: grid;
	align-items: center;
	grid-template-areas: 'select';
	padding: 0;
	font-family: var(--primary-font);
	width: 100%;
}

.nav-dropdown::after {
	content: '';
	width: 0.85rem;
	height: 0.5em;
	background-color: var(--text-color);
	clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
	grid-area: select;
	justify-self: end;
	margin-right: 1rem;
}

.nav-dropdown select {
	width: 100%;
	border: 1px solid var(--text-color);
	grid-area: select;
	/* border-radius: 0.5rem; */
}

.nav-dropdown select,
.tab--item {
	color: var(--text-color);
	background: white;
	font-weight: normal;
	font-size: 0.85rem;
	text-transform: capitalize;
	text-align: center;
	cursor: pointer;
	font-family: var(--primary-font);
	margin: 0;
	padding: 0.15rem 0;
	line-height: inherit;
	appearance: none;
	outline: none;
}

.nav-dropdown select {
	-webkit-appearance: none;
	-moz-appearance: none;
	text-align: -moz-center;
	text-align: -webkit-center;
	border-radius: 0;
	text-indent: 0.5rem hanging;
}

.nav-dropdown select::-ms-expand {
	display: none;
}

.tab__container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid var(--text-color);
	margin-top: -1px;
	/* border-radius: 0.5rem; */
}

.tab--item {
	width: inherit;
	border: none;
	height: min-content;
}

.tab--item:not(:last-of-type) {
	border-right: 1px solid var(--text-color);
}

.active {
	background: var(--primary-color);
	color: white;
}

.op1 button,
.op2 button,
.op3 button {
	width: calc(100% / 2);
}

.op4 button {
	width: calc(100% / 3);
}

.about {
	font-size: 0.85rem;
	color: var(--secondary-color);
	margin: 2rem auto;
	padding-top: 1rem;
	border-top: 1px solid var(--secondary-color);
}

.about p {
	margin: 0 0 0.25rem 0;
}

/* GENERAL WEBSITE STYLING */

.page-section {
	display: none;
	text-align: center;
}

.exhibition,
.archive,
.printed,
.artists {
	display: block;
	min-height: 65vh;
}

h5 {
	color: var(--primary-color);
}

h2,
h5 {
	font-weight: normal;
}

h2 {
	margin: 0;
	font-size: 2rem;
}

h5 {
	text-transform: uppercase;
	font-size: 0.85rem;
}

a {
	text-decoration: none;
	color: var(--text-color);
}

img {
	width: inherit;
}

.placeholder {
	text-align: center;
	font-family: var(--secondary-font);
	margin: 0 auto;
	/* font-style: italic; */
	line-height: 1.55ch;
	/* text-transform: capitalize; */
}

.exhibition__container,
.archive__container,
.printed__container,
.artists__container {
	text-decoration: none;
}

.exhibition--details h2,
.printed--item,
.artists__container a {
	font-family: var(--secondary-font);
}

.exhibition--details,
.printed--item,
.artists__container a {
	text-decoration: none;
}

.exhibition--img,
.exhibition--content {
	width: 100%;
}

.exhibition__container,
.archive__container,
.artists__container,
.printed__container {
	margin: 2rem 0;
}

.printed--item,
.artists__container a {
	color: var(--text-color);
}

/* --> exhibition page */
.exhibition .exhibition--details,
.page-exhibition .exhibition__header,
.page-exhibition .exhibition__content {
	word-break: keep-all;
}

.exhibition .exhibition--details {
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	width: 100%;
	align-items: baseline;
	margin-bottom: 0.5rem;
}

.exhibition .exhibition--details h2 {
	color: var(--text-color);
	grid-column: 2;
	grid-row: 1;
	line-height: 1.55ch;
}

.exhibition .exhibition--details p {
	margin: 0;
	padding: 0 0.25rem;
}

.exhibition .exhibition--details p:first-child {
	grid-column: 1;
	grid-row: 1;
	text-align: left;
}
.exhibition .exhibition--details p:nth-of-type(2) {
	grid-column: 3;
	grid-row: 1;
	text-align: right;
}

.exhibition .exhibition--details p:nth-of-type(3) {
	color: var(--grey);
	grid-row: 2;
	grid-column: 2;
	font-family: var(--secondary-font);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 2ch;
	margin-top: 0.5rem;
}

.exhibition .exhibition--details .exhibition--img img {
	width: 100%;
	height: auto;
}

/* --> archive page */
.archive .archive__container section {
	display: flex;
	flex-direction: column;
}

.archive .archive__container .exhibition--details:not(:first-of-type) {
	margin: 0.5rem 0;
}

.archive .archive__container .exhibition--details p {
	margin: 0 0 0.25rem 0;
}

.archive .archive__container .exhibition--details p:nth-of-type(2) {
	font-family: var(--secondary-font);
	font-style: italic;
	color: var(--grey);
}

/* --> printed page */
.printed__container p {
	margin: 0 0 0.25rem 0;
}

.printed .printed__container section {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.printed .printed__container .printed--item {
	width: calc(100% / 3);
	height: fit-content;
	margin-bottom: 4rem;
	min-width: 225px;
}

.printed .printed__container .printed--item img {
	height: auto;
	min-width: 70%;
}

.printed .printed__container .printed--item p {
	font-family: var(--primary-font);
}

.printed .printed__container .printed--item p:nth-of-type(2)::before {
	content: '';
}

/* --> artist page */
.artists .artists__container a {
	font-size: 2rem;
	line-height: 1.72ch;
}

.artists .artists__container a:hover {
	color: var(--primary-color);
}

.artists .artists__container a:not(:last-of-type)::after {
	content: ', ';
}

/* ---------------------------- */
/* STYLING FOR EXHIBITION PAGES */
/* ---------------------------- */

.page-exhibition nav,
.page-printed nav {
	width: 100%;
	margin: 1rem auto;
}

.page-exhibition nav span,
.page-printed nav span {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: inherit;
}

.page-exhibition header nav span,
.page-printed header nav span {
	border-bottom: 1px solid var(--text-color);
}

.page-exhibition header nav span p,
.page-printed header nav span p {
	padding-bottom: 0.25rem;
}

.page-exhibition footer {
	padding: 1rem;
}

.page-exhibition footer nav span,
.page-printed footer nav span {
	border-top: 1px solid var(--text-color);
}

.page-exhibition footer nav span p,
.page-printed footer nav span p {
	padding-top: 0.25rem;
}

.page-exhibition nav span p,
.page-printed nav span p {
	font-size: 0.85rem;
	text-transform: uppercase;
	font-family: var(--primary-font);
	margin: 0;
}

.page-exhibition .exhibition__header {
	margin: 4rem 0 2rem 0;
	text-align: center;
}

.page-exhibition .exhibition__header h2:first-of-type {
	margin-bottom: 1rem;
	font-size: 1rem;
}

.page-exhibition .exhibition__header h2 + h2 {
	font-family: var(--secondary-font);
}

.page-exhibition .exhibition__header h2:nth-of-type(3) {
	color: var(--grey);
	font-style: italic;
	font-size: 1.5rem;
}

.page-exhibition .exhibition__content {
	width: 100%;
	margin-bottom: 3rem;
}

.page-exhibition .exhibition__content p {
	line-height: 1.24rem;
	text-align: justify;
}

.page-exhibition .exhibition__content .para--title {
	font-style: normal;
	text-transform: uppercase;
}

.page-exhibition .exhibition__content .link--primary {
	color: var(--primary-color);
}

.page-exhibition .exhibition__content .link--secondary {
	text-decoration: underline;
}

.page-exhibition .exhibition__content img {
	width: 100%;
}

/* ------------------------- */
/* STYLING FOR PRINTED PAGES */
/* ------------------------- */

.page-printed .main__wrapper {
	margin-top: 4rem;
	margin-bottom: 4rem;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
}

.page-printed .main__wrapper .printed__imgs {
	display: flex;
	width: 100%;
	margin-bottom: 1rem;
	overflow-x: auto;
	justify-content: smart center;
	-webkit-justify-content: smart center;
}

.page-printed .main__wrapper .printed__imgs span {
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	width: 100%;
	justify-content: center;
}

.page-printed .main__wrapper img {
	height: 40vh;
	width: auto;
	max-width: -moz-available;
	max-width: -webkit-fill-available;
	max-width: fill-available;
	margin: 0 1rem 0 0;
}

.page-printed .main__wrapper .printed__txtcontent {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.page-printed .main__wrapper .printed__txtcontent > * {
	margin-bottom: 1rem;
	text-align: center;
}

.page-printed .main__wrapper .printed__txtcontent p {
	margin: 0;
}

.page-printed
	.main__wrapper
	.printed__txtcontent
	.printed--titles
	h2:first-of-type {
	color: var(--primary-color);
}

.page-printed
	.main__wrapper
	.printed__txtcontent
	.printed--titles
	h2:nth-of-type(3) {
	display: flex;
	justify-content: center;
}

.page-printed .main__wrapper .printed__txtcontent button {
	background: none;
	font-family: var(--primary-font);
	font-size: 0.85rem;
	padding: 0.25rem 2rem;
	width: fit-content;
	margin: 0 auto 1rem auto;
	cursor: pointer;
	border: 1px outset var(--grey);
	-webkit-border: 1px outset var(--grey);
	color: var(--text-color);
}

.page-printed .main__wrapper .printed__txtcontent button:hover {
	background: #f4f4f4;
}

.page-printed .main__wrapper .printed__txtcontent button:active {
	background: #f4f4f4;
	color: var(--primary-color);
}

.page-printed .main__wrapper .printed__txtcontent .printed--details {
	font-size: 0.85rem;
}

.page-printed .main__wrapper .printed__txtcontent .printed--details li {
	list-style: none;
}

.page-printed .main__wrapper .printed__txtcontent .printed--order details {
	border-top: 1px dotted var(--grey);
	padding: 0.25rem 0;
	cursor: pointer;
}

.page-printed .main__wrapper .printed__txtcontent .printed--order p {
	margin: 1rem 0;
}

.page-printed .main__wrapper .printed__txtcontent .printed--order form {
	padding: 0 0 1rem 0;
	font-family: var(--secondary-font);
	display: flex;
	flex-direction: column;
}

.page-printed
	.main__wrapper
	.printed__txtcontent
	.printed--order
	form .printed-item__hidden {
	opacity: 0;
}

.page-printed
	.main__wrapper
	.printed__txtcontent
	.printed--order
	form .printed-item__hidden input {
		margin: 0;
	}
.page-printed .main__wrapper .printed__txtcontent .printed--order form div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.page-printed
	.main__wrapper
	.printed__txtcontent
	.printed--order
	form
	div
	span {
	text-align: left;
}

.page-printed .main__wrapper .printed__txtcontent .printed--order form pre {
	font-family: var(--primary-font);
	color: var(--grey);
	font-size: 0.65rem;
}

.page-printed
	.main__wrapper
	.printed__txtcontent
	.printed--order
	form
	label:not(.local-pickup label) {
	display: none;
}

.page-printed .main__wrapper .printed__txtcontent .printed--order form input {
	text-align: left;
		margin: 0 0 1rem 0;
	border-bottom: 1px solid var(--grey);
	border-style: none none solid none;
	background: #f4f4f4;
}

.page-printed .main__wrapper .printed__txtcontent .printed--order form input,
.page-printed .main__wrapper .printed__txtcontent .printed--order p,
.page-printed .main__wrapper .local-pickup {
	font-size: 0.85rem;
	font-family: var(--secondary-font);
}

.page-printed
	.main__wrapper
	.printed__txtcontent
	.printed--order
	form
	input:focus {
	outline-style: none;
	background: white;
}

.page-printed .main__wrapper .printed__txtcontent .printed--order form span {
	align-self: flex-start;
}

/* Break points for smaller Screens  */
@media (max-width: 1024px) {
	header,
	nav,
	main,
	footer {
		width: 95%;
		min-width: 95%;
		margin: 0 auto;
	}
}

@media (max-width: 780px) {
	.printed--flex .printed--item {
		width: 50%;
	}

	.printed .printed__container section {
		justify-content: space-around;
	}

	.page-printed .main__wrapper .printed__txtcontent {
		padding: 0;
		margin: 1rem 0;
	}
	.page-printed .main__wrapper .printed__txtcontent > * {
		text-align: center;
	}

	.page-printed .main__wrapper .printed__txtcontent h2 {
		font-size: 1.5rem;
	}
}

@media (max-width: 560px) {
	.page-printed .main__wrapper img {
		width: auto;
		height: 40vh;
	}
}