@charset "utf-8";
/* CSS Document */

body {
	background-color: #fff;
	color: #000;
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.0em;
}

#container img {
 /* max-width: 100%;*/
  width: 94%;
  display: block;
}

figure {
	margin: 0;
	display: grid;
	grid-template-rows: 1fr auto;
	margin-bottom: 10%;
	break-inside: avoid;

}

figure > img {
	grid-row: 1 / -1;
	grid-column: 1;
	padding-top: 3%;
	padding-right: 3%;
	padding-bottom: 10%;
	padding-left: 3%;
}

figure a {
	color: #666;
	text-decoration: none;
}
figure a:visited {
	color: #666;
}
figure a:hover {
	color: #000;
}

figcaption {
	grid-row: 2;
	grid-column: 1;
	background-color: rgba(255,255,255,.5);
	justify-self: start;
	padding-top: 0.2em;
	padding-right: 0.5em;
	padding-bottom: 0em;
	padding-left: 0.5em;
}

#container {
	column-count: 3;
	column-gap: 10px;
	padding-bottom: 7%;
}
#galleryNav {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.5vw;
	color: #000;
	float: right;
	width: 50%;
	margin-top: -3%;
	text-align: right;
	margin-right: 2%;
}
#galleryNav a{
	color: #666;
	text-decoration: none;
}
#galleryNav a:hover {
	color: #000;
	text-decoration: underline;
}


@media only screen and (max-width: 769px) {
#container {
	column-count: 2;
	column-gap: 10px;
	padding-bottom: 7%;
}
#galleryNav {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 2.0vw;
	color: #000;
	float: right;
	width: 80%;
	margin-top: -3%;
	text-align: right;
	margin-right: 2%;
}
}

@media only screen and (max-width: 481px) {
#container {
  column-count: 1;
  column-gap: 10px;
  padding-bottom: 10%;
}
#galleryNav {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 2.5vw;
	color: #000;
	float: right;
	width: 80%;
	margin-top: -3%;
	text-align: right;
	margin-right: 2%;
}	
}
