#wrapper {color:#6cc3e7;width:100%;max-width:1200px;margin:0 auto;text-align:center;}

.thumbs {padding:1px;border:solid thin #6cc3e7;margin:2px;}

@media(max-width:700px){
	.thumbs {max-height:100px;width:auto;}
}

#title {}
#info {margin-bottom:0.8em;}
#back_photo {text-align:center;}
#back_photo span {border:outset 3px black;margin-top:0.5em;border-radius:0.5em;padding:0.1em 0.4em 0.2em 0.4em;}
#wrapper {}
#gallery-wrapper {min-width:300px;max-width:1000px;margin:auto;
		background-color:transparent;border-radius:1rem;padding:0.5rem ;}
#gallery-thumbs {width:100%;padding:1rem 0;
		display:flex;flex-direction:row;align-items:flex-start;
		flex-wrap:wrap;align-content:flex-start;border-radius:0.3rem;
		}

@media (max-width:500px)
{
	#gallery-thumbs {justify-content:space-around;}
}
@media (min-width:501px)
{
	#gallery-thumbs {justify-content:center;}
}

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

a.lightbox {display:block;margin:2px;}
a.lightbox img {height: 150px;width:auto;padding:1px;border: thin solid #6cc3e7;
	box-shadow: 0px 0px 8px rgba(0,0,0,.3);}

@media(max-width:700px){
	a.lightbox img {max-height:100px;width:auto;}
}

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

.lightbox-target {border:0.3rem solid #f5f5f5;border-radius:0.5rem;
position: absolute;
top: -100%;
width: 100%;
max-width:1000px;
margin:auto;margin-left:-2.25rem;
background:rgba(0,0,0,.8);
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;
}
*/
.image-frame img {margin-top:3rem;}
.image-frame .legend {margin:auto;max-width:600px;width:100%;
		text-align:center;font-weight:bold;position:relative;
		/*padding-top:2vw;*/}
.image-frame .credit {text-align:right;}

@media (max-width:400px)
{
	.lightbox-target img {cursor:url(close_image_20.png),cell;}
}
@media (min-width:600px)
{
	.lightbox-target img {cursor:url(close_image_30.png),cell;}
}
@media (min-width:700px)
{
	.lightbox-target img {cursor:url(close_image_40.png),cell;}
}

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

/*  END CSS LIGHTBOX */