navlink { opacity:.5; }

div { transition: .6s opacity; }

.gallery {
	display: -ms-flexbox; display: -webkit-flex; display: flex;         
	
	overflow:hidden;
	
    -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto;
    -webkit-box-orient: horizontal; -webkit-box-direction: normal;
    -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
	
    position: relative;	width:90%; margin:auto;	text-align:center;	justify-content: center; align-content: center;
	}

@media screen and (max-width: 500px) {
	
	.gallery {
		overflow:hidden;
	    position: relative;
/*		width:80%;*/
		margin:auto; text-align:center;
		justify-content: center; align-content: center;
		}
	}

@media screen and (min-width: 2400px) {
	
	.gallery { width:2160px; }
	}

.gallery-container {
	width:100%;
	background-color:#000000;
	text-align:center;
	padding-top:20px; padding-bottom:20px;
	overflow:hidden;
	}

.gallery-header {
	width:85%; max-width:1600px;
	margin:auto; padding-bottom:5px;
	text-align:left;
	font-size: 25px; font-size: calc(1vw + 15px); 
	font-family: Montserrat, sans-serif; font-weight: 800;
	}

.year {
	font-size: 20px; font-size: calc(.5vw + 15px);	
	font-family: Montserrat, sans-serif; font-weight: 500;
	color: gray; opacity: .8;
	margin-left: .6vw;
	white-space: nowrap;
	}
	
.gallery-morebox {
	width:85%; max-width:1600px;
	margin:auto; padding:5px; padding-top:15px;
	text-align:right;	
	}

.gallery-text {
	color:#ccc;
	font-size:15px; font-size: calc(0.3vw + 12px);
	width:85%; max-width:1600px;
	margin:auto; padding:5px;
	text-align:left;	
	}

p.note {max-width: 90%; margin-left: auto; margin-right: auto; font-style: italic; opacity: .7;}
p.note em {font-weight: bold;}

p.quote {
	max-width: 80%; margin-left: auto; margin-right: auto;
	font-size: 120%; font-style: italic; font-weight: bold;
	letter-spacing: .7px; word-spacing: 2px;
	}


@media screen and (min-width: 2000px) {
	.gallery-text { font-size:18px; }
	.gallery-header { font-size: 35px; }
	.year { font-size: 25px; }
	}

div.gallery-text p.short {margin-top:-5px;}

div.gallery-text a { color: #aaa; }
div.gallery-text a:hover { color: white; }

div.caption a {	color: #aaa; }
div.caption a:hover { color: white; }

/*
div#masonry:hover div.image-container { opacity: 0.4; }
div#masonry:hover div.image-container:hover { transition: .2s opacity; opacity: 1; }
*/




/* Container holding the image and caption */

.image-container {
	display:block; position: relative; text-align: center;
	color: white;
	flex-shrink:0;
	margin: 5px;
	transition: .2s opacity;
	justify-content: center;
	}

div.image-container:hover div {
	transition-timing-function: ease; transition: 1s opacity; opacity: 1;
	}

div.image-container:hover div.datestamp {
	transition-timing-function: ease; transition: .2s opacity; opacity: 0;
	}


div.image-container img { width:auto; max-height:25vw; border-radius:5px}
div.image-container.short img { max-height:20vw; }
div.image-container.thumbs30 img { width:auto; max-height:30vw; }
div.image-container.single img,
div.image-container img.single { max-height:none; max-width:75vw; max-height:none;}


@media screen and (min-width: 1600px) {
	div.image-container img { max-height:320px; }
	div.image-container.short img { max-height:320px; }
	}

/*
@media screen and (min-width: 2000px) {
	div.image-container img { max-height:20vw; }
	}
*/

@media screen and (max-width: 1000px) {
	div.image-container img { max-height:250px; }
	div.image-container.short img { max-height:200px; }
	div.image-container.short {min-width: 100px;}
	}

@media screen and (max-width: 800px) {
	div.image-container img,
	div.image-container img.single { max-width:80vw; max-height:none;}
	div.image-container.thumbs30 img { width:auto; max-height:none; }

	}





/* captions */

.caption {
	position: absolute; bottom: 0px; left: 0px;
	width: 100%; width: calc(100% - 19px);
	padding: 10px; padding-top: 25px;
	
	background-color: rgba(0,0,0,.5); /* for pre-gradient browsers */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8) 25% );
	opacity: 0; transition: .2s opacity;
	
	text-align: left; font-size: 12px; font-size: calc(.3vw + 9px); 
	}

div.caption span.subtitle {	
	font-size: 15px; font-size: calc(.5vw + 10px);
	}

.caption-note {
	font-size: 10px; font-size: calc(.3vw + 7px);
	font-style: italic; opacity: .6;
	}

@media screen and (min-width: 2000px) {
	.caption {font-size: 15px;}
	div.caption span.subtitle {font-size: 20px;}
	.caption-note {font-size: 13px;}
	
	}

/* magic datestamps */

.datestamp{
	position: absolute; bottom: 0px; left: 0px;
	width: 100%; width: calc(100% - 19px);
	padding: 25px 10px 0px;
	
/*
	background-color: rgba(0,0,0,.5);  for pre-gradient browsers 
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8) 25% );
*/
	opacity: 1; transition: .2s opacity;
	
	text-align: right;
	font-size: 12px;
/*	font-size: calc(.5vw + 15px);	*/
	font-family: Montserrat, sans-serif;
/*	font-weight: 500;	*/
	
	}

.datestamp span {background-color: black; background-color: rgba(0,0,0,.8);
	padding: 5px 10px; border-radius: 5px;}

/*
@media screen and (min-width: 1600px) {
		.datestamp{font-size: 23px;}
	}
*/


/* morebox */

.moregradient {
	position: absolute; height: 20px; line-height:20px; bottom: 0px; left: 0px;
	
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, .2) 20%,
		rgba(0, 0, 0, .7) 50%,
		rgba(0, 0, 0, 1)
		);
	
	width: 95%; width: calc(100% - 9px);
	padding: 10px; text-align: right;	
	}

.morebox { padding: 10px; }



/* whiteboxes */

.whitebox { color: #333; background-color: white; }

div.whitebox div.caption {
	color: #333;
	background-color: rgba(255,255,255,.5); /* for pre-gradient browsers */
	background: linear-gradient(to bottom,
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, .7) 20%,
		rgba(255, 255, 255, .9) 30% );
}

div.whitebox div.moregradient {
	color: black;
	background: linear-gradient(to bottom,
		rgba(255, 255, 255, 0),
		rgba(255, 255, 255, .2) 20%,
		rgba(255, 255, 255, .7) 50%,
		rgba(255, 255, 255, 1)
		);
}

div.whitebox a { color: #333; }