ul.galleryFlex {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding:0;
}

ul.galleryFlex li {
	height: 35vh;
	flex-grow: 1;
	transition: max-width 0.5s ease-in-out, padding-right 0.5s linear, padding-left 0.5s linear;
    max-width: 0;
	margin: auto;
	padding:0;
}
div li.eventPhoto,
div:not(.hideWarriors) li.warriors,
div:not(.hideCivilians) li.civilians,
div:not(.hideWychurst) li.wychurst,
div:not(.hideBoats) li.boats,
div:not(.hideArchers) li.archers,
div:not(.hideCavalry) li.cavalry {
	padding:3px;
	transition: max-width 0.5s ease-in-out;
    max-width:100%;
}

@media (max-aspect-ratio: 1/1) {
	ul.galleryFlex li {
		height: 30vh;
	}
}
@media (max-height: 480px) {
	ul.galleryFlex li {
		height: 80vh;
	}
}

ul.galleryFlex li.emptySpacer {
	flex-grow: 10;
    max-width:100%;
}

ul.galleryFlex img {
	height: 100%;
	min-width: 100%;
	object-fit: cover;
	vertical-align: bottom;
}
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
	ul.galleryFlex {
		flex-direction: column;
	}

	ul.galleryFlex li {
		height: auto;
		width: 100%;
	}

	ul.galleryFlex img {
		width: 100%;
		max-height: 75vh;
		min-width: 0;
	}
}

.photoGallery {
	text-align:center;
	text-align: center;
	line-height: 3;
}

.photoGallery img{
	cursor: pointer;
	transition: filter 0.5s, transform 0.5s, border-radius 0.5s;
}
.photoGallery img:hover{
	filter: brightness(1.1);
    z-index: 25;
    position: relative;
    box-shadow: 0 0 12px 5px var(--link-colour), 0 0 4px 1px var(--link-colour) inset;
	transition: filter 0.5s, transform 0.5s, border-radius 0.5s, box-shadow 0.5s cubic-bezier(0.45, 0.47, 0.84, 1.13);
}





.noScriptGallery .galleryMenuItem {
	width: 400px;
	background: no-repeat center;
	padding:0;
	margin: 25px;
	display:inline-block;
	overflow:hidden;
	max-width: calc(100% - 50px);
	
	-moz-border-radius: 25px;
	-khtml-border-radius: 25px;
    -webkit-border-radius: 25px;
	-o-border-radius: 25px;
    border-radius: 25px;
}

.noScriptGallery .galleryMenuItem div {
	color:rgb(255,255,213);
	padding:20px 0;
	width:100%;
	text-align:center;
	font-size: 29px;
	background: rgba(18,18,18,0.6);
}

.noScriptGallery .galleryMenuItem div:hover {
	background:none;
	color:rgba(255,255,213,0);
}

.noScriptGallery .gallery {
	margin: 0 auto;
	padding: 5px;
	text-align:center;
}

.noScriptGallery .gallery img{
	padding:3px 5px;
	display:inline;
	border-radius: 20px;
    filter: brightness(0.7) blur(0.2px);
	cursor: pointer;
	transition: filter 0.5s, transform 0.5s, border-radius 0.5s;
}
.noScriptGallery .gallery img:hover{
	filter: unset;
  	padding: 3px;
    margin: 0 2px;
    transform: scale(1.1);
    z-index: 25;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 12px 5px var(--link-colour), 0 0 4px 1px var(--link-colour) inset;
	transition: filter 0.5s, transform 0.5s, border-radius 0.5s, box-shadow 0.5s cubic-bezier(0.45, 0.47, 0.84, 1.13);
}

/* The Close Button */
.close, 
#modalImageLink.download {
	position: absolute;
	right: 35px;
	color: var(--link-colour);
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}
.close {
	top: 15px;
}
#modalImageLink.download {
	top:35px;
    font-size: 33px;
	border-bottom: 3px solid;
	left: 50%;
	transform: translate(-50%,-30%);
	width: 1em;
	text-align: center;
	font-weight: bold;
}

/*next and previous buttons*/
span.previous{
    transform: rotate(225deg);
    left: 35px;
}
span.next {
    right: 35px;
    transform: rotate(45deg);
}
span.previous,
span.next {
    position: absolute;
    top: 40%;
    color: var(--link-colour);
    border: solid;
    width: 30px;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    border-width: 6px 6px 0 0;
    height: 30px;
}

@media screen and (max-width:585px) {
	span.previous,
	span.next{
		top:35px;
	}
	span.previous{
		left:30%;
	}
	span.next {
		right:30%;
	}
}

#modalImageLink.download:hover,
span.previous:hover,
span.next:hover,
span.previous:focus,
span.next:focus,
.close:hover,
.close:focus {
	color: var(--link-colour-hover);
	text-decoration: none;
	cursor: pointer;
}

img#modalImage {
	filter:grayscale(1);
	width:100%;
    height: 80vh;
	object-fit: contain;
}

img#modalImageFullResolution {
	position:absolute;
	margin: 0 auto;
	top:0;
    left: 0;
    right: 0;
    width: 100%;
	height: 80vh;
    object-fit: contain;
}