/* a {
	text-decoration:none;
	color:white;
	}

a:hover {
	text-decoration:none;
	transition: 0s opacity;
	opacity:1;
	} */

navlink {
	opacity:.5;
	}

div { 
	transition: .6s opacity;
	/* transition: .3s font-size; */
	}

/* span { 
	transition: .3s font-size;
	} */


.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:80%;
	margin:auto;
	text-align:center;
	justify-content: center;
	align-content: center;
	}

@media screen and (max-width: 500px) {
/* start of phone styles */
/* using 500 wide images*/
.gallery {
	/*display: block;  */
	
	overflow:hidden;
	
    position: relative;
	width:80%;
	margin:auto;
	text-align:center;
	justify-content: center;
	align-content: center;
	}
	
}

@media screen and (min-width: 2500px) {
.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:80%;
	margin:auto;
	text-align:center;
	}
	
}
.gallery-container {
	width:100%;
	background-color:#000000;
	text-align:center;
	padding-top:20px;
	padding-bottom:20px;
	overflow:hidden;
	}

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

.year {
	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%;
	margin:auto;
	text-align:right;
	padding:5px;
	padding-top:15px;
	}

.gallery-text {
	color:#ccc;
	width:85%;
	max-width:1000px;
	margin:auto;
	text-align:left;
	padding: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;
	}

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

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

/* Container holding the image and the text */
.image-container {
	display:block;
	position: relative;
	text-align: center;
	color: white;
	/*padding: 5px;*/
	flex-shrink:0;
	margin: 5px;
	/* float: left; */
	transition: .2s opacity;
	justify-content: center;
}



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

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

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

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;}
/* 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: calc(100% - 9px);
	padding: 10px;
	/*opacity: 0;*/
	text-align: right;
	}

.morebox {
	padding: 10px;
	}





/* whitebox selectors */

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


div.image-container img {
	 width:auto; max-height:25vw; }

div.gallery.timeline {width:100%}
div.timeline div.image-container {max-height:15vw;}
div.timeline div.image-container img {width:auto; max-height:15vw; }
div.timeline div.caption {
	opacity: 1; padding-top:5px; padding-bottom:0px; padding-left:0px; padding-right:0px; width:100%;
	text-align:center; font-size: 30px; font-size: calc(1.5vw + 5px);
	font-family: Montserrat, sans-serif; font-weight: 800;}
/*div.timeline div.caption a {color:white;}*/

div.image-container img.single {
	 width:auto; max-height:40vw; }

@media screen and (max-width: 800px) {
	div.image-container img,
	div.image-container img.single{
		max-width:70vw; max-height:none;}
	div.timeline div.image-container {max-height:15vw;}
	div.timeline div.image-container img {width:auto; max-height:15vw;} 
	div.timeline div.caption {font-size: 16px;}
}

@media screen and (max-width: 500px) {
	div.timeline div.image-container {max-height:75px;}
	div.timeline div.image-container img {max-height:75px;} 
}


@media screen and (min-width: 1800px) {
	div.timeline {max-width:1600px;}
	div.timeline div.image-container {max-height:270px;}
	div.timeline div.image-container img {max-height:270px;} 
	div.timeline div.caption {font-size: 32px;}
}