#small-title {text-align:center;font-size:2rem;padding:0;}
#play-title {text-align:center;font-size:2.5rem;padding-bottom:1rem;font-style:italic;}
#back {position:fixed;top:0;left:0;z-index:500;}
#back img {max-width:25%;width:100%;}

#gallery-thumbs {width:100%;padding:1rem 0;text-align:center;}

.thumb {display:inline-block;}
.thumb img {width:auto;height:auto;max-height:150px;height:auto;
	padding:1px;border:solid thin #188847;}

/**********************************************************************/
#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;
		}
*/

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

a.lightbox {display:block;padding:0.1rem;}
a.lightbox img {height: 100px;width:auto;border: thin solid red;
	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 {border:0.3rem solid #f5f5f5;border-radius:0.5rem;
position: absolute;z-index:1000;
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;
		color:white;font-size:smaller;
		/*padding-top:2vw;*/}
.image-frame .credit {text-align:right;}

/*  END CSS LIGHTBOX */