#gallery-header img {display:block;max-width:100%;height:auto;margin:auto;
		border-radius:1rem;padding:0;}
#gallery-header  {font-size:2rem;}

#gallery-wrapper {min-width:300px;max-width:1000px;margin:auto;
		background-color:black;border-radius:1rem;padding:0.5rem ;}

#gallery-thumbs,#gallery-hires {width:100%;display:flex;flex-direction:row;
		align-items:flex-start;
		flex-wrap:wrap;align-content:flex-start;margin-bottom:1rem;
		padding:0.3rem;border-radius:0.3rem;}

@media (max-width:500px)
{
	#gallery-thumbs,#gallery-hires {justify-content:space-around;}
}
@media (min-width:501px)
{
	#gallery-thumbs,#gallery-hires {justify-content:center;}
}
#gallery-hires img {display:block;padding:0.1rem;}

.subtitle {width:100%;text-align:center;}

/*  CSS LIGHTBOX */
/* Styles the thumbnail */

a.lightbox {display:block;padding:0.1rem;}
a.lightbox img {height: 100px;width:auto;border: 3px solid white;
	box-shadow: 0px 0px 8px rgba(0,0,0,.3);}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
max-width:1000px;
margin:auto;
background: rgba(0,0,0,.7);
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
cursor:cell;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:3rem;
height:4rem;
overflow: hidden;
box-sizing: border-box;
background: transparent;
color: red;
font-size:2.5rem;font-weight:bold;
position: absolute;top:0;/*right:0;*/
margin-left:5rem;
padding-top:0.75rem;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}


.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
/*
.lightbox-target:target a.lightbox-close {
top: 0px;
}
*/
@media (max-width:400px)
{
	.lightbox-target img {cursor:url(close_image_20.png),cell;}
	.lightbox-target-hr img {cursor:url(download_image_20.png),s-resize;}
}
@media (min-width:600px)
{
	.lightbox-target img {cursor:url(close_image_30.png),cell;}
	.lightbox-target-hr img {cursor:url(download_image_30.png),s-resize;}
}
@media (min-width:700px)
{
	.lightbox-target img {cursor:url(close_image_40.png),cell;}
	.lightbox-target-hr img {cursor:url(download_image_40.png),s-resize;}
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

/*  END CSS LIGHTBOX */