#photo_page.page_wrapper {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	z-index: 3;
}


#pic_page, #pic_page header, #pic_page h1, #pic_page h2  {
	-webkit-animation:BGfadeIn ease-in 1;
			animation:BGfadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
	-webkit-animation-duration:1.5s;
			animation-duration:1.5s;
}

@-webkit-keyframes BGfadeIn { 
	from { 
		background-color: rgba(255,255,255,1);
		color: #2a2a2a; 
	} 
	to { 
		background-color: rgba(0,0,0,1); 
		color: #666;
	} 
}

@keyframes BGfadeIn { 
	from { 
		background-color: rgba(255,255,255,1);
		color: #2a2a2a; 
	} 
	to { 
		background-color: rgba(0,0,0,1); 
		color: #999;
	} 
}

#pic_page h2 {
	-webkit-animation:DeckChange ease-in 1;
			animation:DeckChange ease-in 1;
	-webkit-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
	-webkit-animation-duration:1.5s;
			animation-duration:1.5s;
}

@-webkit-keyframes DeckChange { 
	from { 
		background-color: rgba(255,230,0,1);
	} 
	to { 
		background-color: rgba(42,42,42,1); 
	} 
}

@keyframes DeckChange { 
	from { 
		background-color: rgba(255,230,0,1);
	} 
	to { 
		background-color: rgba(42,42,42,1); 
	} 
}

header img {
	-webkit-animation:GrayOut ease-in 1;
			animation:GrayOut ease-in 1;
	-webkit-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
	-webkit-animation-duration:1.5s;
			animation-duration:1.5s;
	-webkit-filter: grayscale(0);
			filter: grayscale(0);
}

@-webkit-keyframes GrayOut {
	from { -webkit-filter: grayscale(0); filter: grayscale(0); }
	to { -webkit-filter: grayscale(.6); filter: grayscale(.6); }
}

@keyframes GrayOut {
	from { -webkit-filter: grayscale(0); filter: grayscale(0); }
	to { -webkit-filter: grayscale(.6); filter: grayscale(.6); }
}

.nav_elements ul { 
	width: initial; 
	position: relative;
}

.nav_elements ul li, .blinky { padding: 12px 15px; }

.nav_elements { overflow-x: scroll; overflow-y: hidden; }

#photo_page h3 {
	color: #808080;
	font-weight: 900;
	font-size: 130%;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: center;
	margin: 15px 0 30px 0;
}

#photo_page h3:first-of-type { margin-top: 10px; }

#photo_page p {
	color: #eee;
	font-weight: 300;
	text-align: left;
	line-height: 1.3;
	font-size: 1.3rem;
	text-align: center;
	padding: 0 5px;
}

#photo_page p span { color: #808080; }

#photo_page img {
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	margin-bottom: 5px;
	background-color: #000;
	aspect-ratio: 3/2;
}

.photo_subject {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
		-ms-flex-direction: row;
			flex-direction: row;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	margin-bottom: 20px;
}

.photo_holder {
	-webkit-box-flex: 1;
		-ms-flex: 1 0 0%;
			flex: 1 0 0%;
	margin-bottom: 20px;
}

.photo_holder:first-of-type, .photo_holder:nth-of-type(3n+1) {
	-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
			flex: 0 0 100%;
	margin: 20px 0;
}

.photo_holder:first-of-type { margin-top: 0; }

.photo_holder:nth-of-type(3n+2) { 
	margin: 0 15px 0 0; 
	-webkit-box-flex: 2; 
		-ms-flex: 2 0 0%; 
			flex: 2 0 0%;
}
.photo_holder:nth-of-type(3n+3) { margin: 0 0 0 15px; }

.blinky {
	position: fixed;
	right: 0;
	color: #eee;
	padding: 0 10px 0 25px;
	opacity: 1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2a2a2a+0,2a2a2a+100&0+0,1+50,1+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear,  left top, right top,  from(rgba(42,42,42,0)),color-stop(50%, rgba(42,42,42,1)),to(rgba(42,42,42,1)));
background: -o-linear-gradient(left,  rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%);
background: linear-gradient(to right,  rgba(42,42,42,0) 0%,rgba(42,42,42,1) 50%,rgba(42,42,42,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002a2a2a', endColorstr='#2a2a2a',GradientType=1 ); /* IE6-9 */

}

.blinky, .nav_elements ul .blinky, .nav_elements ul:hover .blinky { -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }

.blinky, .nav_elements ul .blinky { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; }

.nav_elements ul:hover .blinky { 
	opacity: 0; 
	-webkit-animation-play-state: paused; 
			animation-play-state: paused;
}

.blinky:after {
	content: '\f101';
	font-family: FontAwesome;
	color: #FFE600;
	/*color: #eee;*/
	text-align: right;
	font-size: 200%;
	/*text-shadow: 0px 0px 10px #000000;*/
	-webkit-animation-name: blinkguy;
			animation-name: blinkguy;
	-webkit-animation-duration: 1.5s;
			animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
			animation-timing-function: ease-in-out;
	-webkit-animation-play-state: running;
			animation-play-state: running;
	opacity: 0;
}

@-webkit-keyframes blinkguy {
	0% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes blinkguy {
	0% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}

/* Hide scrollbar for Chrome, Safari and Opera */
#photo_nav.nav_elements::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#photo_nav.nav_elements {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

.photo_subject img {
	opacity: 0;
	-webkit-animation:PicFade ease-in 1;
			animation:PicFade ease-in 1;
	-webkit-animation-fill-mode:forwards;
			animation-fill-mode:forwards;
	-webkit-animation-duration:1.5s;
			animation-duration:1.5s;
	-webkit-animation-delay: 1.25s;
			animation-delay: 1.25s;
}

@-webkit-keyframes PicFade { 
	from { opacity: 0; } 
	to { opacity: 1; } 
}

@keyframes PicFade { 
	from { opacity: 0; } 
	to { opacity: 1; } 
}

@media only screen and (max-width: 900px) {
	.photo_holder:nth-of-type(3n+2) { -webkit-box-flex: 1; -ms-flex: 1 0 0%; flex: 1 0 0%; }
}

@media only screen and (max-width: 768px) {
	.photo_holder:nth-of-type(3n+1) img {
		width: 125% !important;
		margin-left: -12.5%;
	}
}

@media only screen and (max-width: 600px) {
	.nav_elements ul li:nth-of-type(n+5) { display: initial; }
	.photo_holder:nth-of-type(3n+2), .photo_holder:nth-of-type(3n+3) { display: none; }
	.blinky:after { 
		content: '\00a0'; 
		font-family: Open Sans;
	}
	.blinky { margin-left: 10px; }
}