/* =CSS DIRECTORY=
		. =GLOBAL=
		. =GENERAL=
		. =HEADER=
		. =SLIDESHOW=
		. =CATEGORIES=
		. =GALLERY=
		. =GALLERY TABS=
		. =GALLERY MODAL=
		. =ANIMATIONS=
		. =MOBILE=
		. =ICON CLOSED=
		. =ICON OPEN=
		. =MOBILE CATEGORIES=
		. =MOBILE GALLERY=
*/

/* =COLORS=

*/

/* -^-^-^-^- =GLOBAL= -^-^-^-^- */

* {
  box-sizing: border-box;
  font-family: 'Open Sans', "Lucida Grande", sans-serif;
}

body {
  font-family: "Arial";
  margin: 0;
	width: 100%;
  color: #1a1a1a;
}

footer {
	position: absolute;
	bottom: 0;
	height: 2.5rem;
}

p {
	color: #1a1a1a;
}

h3 {
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	font-weight: normal;
	font-size: 1.4em;
	margin: 0;
}

/* -v-v-v-v- =GLOBAL= -v-v-v-v- */

/* -^-^-^-^- =GENERAL= -^-^-^-^- */

.canvas {
	position: relative;
	margin: 0 auto;
	max-width: 100%;
	min-height: 100vh;
	padding: 0 32px;
}

.content {
	padding-top: 32px;
	padding-bottom: 2.5rem;
}

/* -v-v-v-v- =GENERAL= -v-v-v-v- */

/* -^-^-^-^- =HEADER= -^-^-^-^- */

.header {
	text-transform: uppercase;
	margin: auto;
	padding: 48px 48px 32px 48px;
}

.navigation {
	display: grid;
	grid-template-columns: 1fr repeat(3, fit-content(50px));
	grid-gap: 12px;
	justify-content: center;
	align-items: end;
}

.navigation div {
	grid-column: 1 / 2;
	vertical-align: center;
}

.navigation a {
	color: #1a1a1a;
}

.title {
	font-size: 1.8em;
	letter-spacing: 2px;
	text-decoration: none;
	color: #1a1a1a;
}

.nav-icon {
	display: none;
	text-decoration: none;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.6em;
	color: #808080;
	padding: 22px 24px 16px 0;
}

.navigation a:not(.title):not(.nav-icon) {
	text-decoration: none;
	text-align: center;
	vertical-align: center;
	font-size: 1.1em;
}

.navigation a.active {
	color: #999999;
}

.navigation a:hover:not(.active):not(.title) {
	color: #bfbfbf;
}

/* -v-v-v-v- =HEADER= -v-v-v-v- */

/* -^-^-^-^- =SLIDESHOW= -^-^-^-^- */

.slideshow {
	position: relative;
	width: 100%;
	height: 800px;
	margin: auto;
}

.slide-img {
	visibility: hidden;
	position: absolute;
	margin: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	padding: 0 16px 16px 16px;
}

/* -v-v-v-v- =SLIDESHOW= -v-v-v-v- */

/* -^-^-^-^- =CATEGORIES= -^-^-^-^- */

.categories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-rows: auto;
	grid-gap: 1.5rem;
	justify-content: center;
	padding: 16px 48px;
}

.categories div {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr auto;
}

.categories a {
	text-decoration: none;
	width: 100%;
	height: 100%;
}

.categories img {
	margin: auto;
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.categories p {
	text-align: center;
}

.categories div:hover p {
	color: #bfbfbf;
}

/* -v-v-v-v- =CATEGORIES= -v-v-v-v- */

/* -^-^-^-^- =GALLERY= -^-^-^-^- */

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-auto-rows: 300px;
	grid-gap: 1.5rem;
	justify-content: center;
	padding: 48px 96px;
}

.gallery-img {
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
  cursor: pointer;
}

/* -v-v-v-v- =GALLERY= -v-v-v-v- */

/* -^-^-^-^- =GALLERY TABS= -^-^-^-^- */

.gallery-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 15%));
	/*grid-auto-flow: column;*/
	justify-content: center;
	align-content: center;
	gap: 16px;
	padding-top: 16px;
}

.gallery-tabs a {
	color: #1a1a1a;
	text-decoration: none;
	text-align: center;
	vertical-align: center;
	font-size: 1.3em;
}

.gallery-tabs a.active {
	color: #999999;
}

.gallery-tabs a:hover:not(.active) {
	color: #bfbfbf;
}

/* -v-v-v-v- =GALLERY TABS= -v-v-v-v- */

/* -^-^-^-^- =GALLERY MODAL= -^-^-^-^- */

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
}

.modal .close,
.modal .prev-img,
.modal .next-img {
	color: #bfbfbf;
}

.modal-content {
	position: absolute;
	margin: auto;
	display: flex;		/* for image centering */
	top: 4%;
	right: 4%;
	bottom: 4%;
	left: 4%;
	justify-content: center;
	align-items: center;
}

.close {
	position: absolute;
	z-index: 3;
  top: 10px;
  right: 25px;
  font-size: 3rem;
}

.close:hover,
.close:focus {
	color: #808080;
	text-decoration: none;
	cursor: pointer;
}

.modal-container {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
}

.modal-img {
	opacity: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  transition: opacity .2s ease-in;
  -webkit-transition: opacity .2s ease-in;
  will-change: auto;
}

.caption {
	position: absolute;
	bottom: 0;
	background: #000000;
	background: rgba(0, 0, 0, 0.5);
	color: #f1f1f1;
	transition: .2s ease-out;
	opacity: 0;
	width: 100%;
	padding: 16px 24px;
	font-size: 1.1em;
	line-height: 180%;
	/*text-align: center;*/
}

.modal-container:hover .caption {
	opacity: 1;
}

.prev-img,
.next-img {
	position: absolute;
	width: 4%;
	height: 100%;
}

.next-img {
	right: 0;
	text-align: right;
}

.prev-img div,
.next-img div {
	z-index: 2;
	cursor: pointer;
	position: absolute;
	top: 50%;
	padding: 0 16px;
	margin-top: -32px;
	transition: 0.3s ease;
	-webkit-transition: 0.4s ease;
	font-size: 3rem;
	user-select: none;
	-webkit-user-select: none;
}

.next-img div {
	right: 0;
}

.prev-img:hover div,
.next-img:hover div {
	color: #808080;
}

.prev-img:hover .modal-img,
.next-img:hover .modal-img,
.modal-container:hover .modal-img {
	will-change: opacity;
}

/* -v-v-v-v- =GALLERY MODAL= -v-v-v-v- */

/* -^-^-^-^- =ABOUT= -^-^-^-^- */

.about {
	width: 100%;
	max-width: 1080px;
	min-height: 800px;
	margin: auto;
}

.about p {
	line-height: 1.5;
}

.about p:last-of-type {
	padding-bottom: 24px;
}

.about img {
	display: inline-block;
	float: right;
	max-width: 100%;
	padding: 24px 0 24px 48px;
	image-orientation: from-image;
}

/* -v-v-v-v- =ABOUT= -v-v-v-v- */

/* -^-^-^-^- =CONTACT= -^-^-^-^- */

.contact {
	text-align: center;
	/*padding: 0 300px;*/
}

.contact a {
	/*float: left;*/
	font-size: 2em;
	color: #1a1a1a;
	text-decoration: none;
	margin: 6px;
}

.contact a:hover {
	color: #bfbfbf;
}

.contact img {
	display: block;
	width: 100%;
	max-width: 900px;
	padding-top: 24px;
	margin: auto;
}

/* -v-v-v-v- =CONTACT= -v-v-v-v- */

/* -^-^-^-^- =ANIMATIONS= -^-^-^-^- */

.fade-in {
	animation: fade-in .2s ease-in forwards;
	-webkit-animation: fade-in .2s ease-in forwards;
}

@keyframes fade-in {
	from {opacity: 0}
	to {opacity: 1.0}
}

.fade-out {
	animation: fade-out .2s ease-out forwards;
	-webkit-animation: fade-out .2s ease-out forwards;
}

@keyframes fade-out {
	from {opacity: 1.0}
	to {opacity: 0}
}

/* -v-v-v-v- =ANIMATIONS= -v-v-v-v- */

/* -^-^-^-^- =MOBILE= -^-^-^-^- */

@media screen and (max-width: 900px) {

	/* -^-^-^-^- =ICON CLOSED= -^-^-^-^- */

	.header {
		padding: 24px 16px;
	}

	.navigation {
		display: block;
		text-align: center;
	}

	.navigation div {
		padding-bottom: 16px;
	}

	.title {
		font-size: 1.5em;
	}

	.nav-icon {
		display: block;
	}

	.navigation a:not(.title):not(.nav-icon) {
		display: none;
		font-size: 1.3em;
	}

	/* -v-v-v-v- =ICON CLOSED= -v-v-v-v- */

	/* -^-^-^-^- =ICON OPEN= -^-^-^-^- */

	.responsive div {
		border-bottom: thin solid;
	}

	.responsive a:not(.title):not(.nav-icon) {
		display: inline-block;
		padding-top: 24px;
		margin: 0 16px;
	}

	/* -v-v-v-v- =ICON OPEN= -v-v-v-v- */

	/* -^-^-^-^- =MOBILE GENERAL= -^-^-^-^- */

	.canvas {
		padding: 0 16px;
	}

	/* -v-v-v-v- =MOBILE GENERAL= -v-v-v-v- */

	/* -^-^-^-^- =MOBILE SLIDESHOW= -^-^-^-^- */

	.slideshow {
		height: 500px;
	}

	/* -v-v-v-v- =MOBILE SLIDESHOW= -v-v-v-v- */

	/* -^-^-^-^- =MOBILE CATEGORIES= -^-^-^-^- */

	.categories {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		padding: 0;
	}

	.categories img {
		height: 250px;
	}

	/* -v-v-v-v- =MOBILE CATEGORIES= -v-v-v-v- */

	/* -^-^-^-^- =MOBILE GALLERY= -^-^-^-^- */

	.gallery {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		grid-auto-rows: 250px;
		padding: 32px 8px;
	}

	.prev-img div,
	.next-img div {
		padding: 0 8px;
	}

	/* -v-v-v-v- =MOBILE GALLERY= -v-v-v-v- */

	/* -^-^-^-^- =MOBILE MODAL= -^-^-^-^- */

	.caption {
		padding: 10px 12px;
		font-size: 1em;
	}

	/* -v-v-v-v- =MOBILE MODAL= -v-v-v-v- */

	/* -^-^-^-^- =MOBILE ABOUT= -^-^-^-^- */

	.about img {
		display: block;
		float: none;
		padding: 16px 0;
		margin: auto;
	}

	/* -v-v-v-v- =MOBILE ABOUT= -v-v-v-v- */


}

/* -^-^-^-^- =MOBILE SINGLE COLUMN= -^-^-^-^- */

@media screen and (max-width: 572px) {
	.categories img {
		height: 300px;
	}
}

@media screen and (max-width: 588px) {
	.gallery {
		grid-auto-rows: 300px;
	}
}

@media screen and (max-width: 450px) {
	.responsive a:not(.title):not(.nav-icon) {
		display: block;
	}
}

/* -v-v-v-v- =MOBILE SINGLE COLUMN= -v-v-v-v- */

/* -v-v-v-v- =MOBILE= -v-v-v-v- */