/* CSS Document */

div.lightBox{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	min-height: 300px;
	z-index: 5;
	color: #FFFFFF;
	font-size: 14;
	text-align: center;
	display: none;
	overflow: hidden;
}
.lightBoxImage{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
}

.lightBoxImageContainer{
	position: relative;
	overflow: hidden;
	height: 10em;
	margin: 2px 0 2px 0;
}

img.lightBoxToShow{
	position: absolute;
	width:max-content;
	left: 50%;
	top: 50%;
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
	padding-left: 5%;
	padding-right: 5%;
	transform: translate(-50%, -50%);
}

div.lightBoxNav{
	position: absolute;
	font-size: 80px;
	height: 100%;
	width: 30%;
	z-index: 4;
}

i.navMid{
	position: relative;
	top: 45%;
}

#lightBoxLeft{
	text-align: left;
	top: 0px;
	left: 0px;
}

#lightBoxRight{
	text-align: right;
	top: 0px;
	right: 0px;
}

#lightBoxClose{
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 40px;
	float: right;
	text-align: right;
	z-index: 5;
}

div.lightBox ul{
	position: absolute;
	bottom: 0px;
	width: 100%;
	list-style-type: none;
	text-align: left;
	line-height: 20px;
	margin: 0px;
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 1em;
	padding-top: 1em;
	white-space: nowrap;
	background: rgba(0,23,31,0.5);
}

#lightBoxTitle{
	letter-spacing: 2.5px;
	font-weight: bold;
	font-size: 12;
	max-width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
}

#lightBoxCount{
	font-weight: normal;
	font-size: 12;
	float: right;
}
#lightBoxGroup{
	font-weight: normal;
	font-size: 12;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* fadeIn Animation */
@-webkit-keyframes fadeOut{
	from{
		display: "block";
		opacity: 1;
	}
	to{
		opacity: 0;
		display: "none";
	}
}

@-moz-keyframes fadeOut{
	from{
		display: "block";
		opacity: 1;
	}
	to{
		opacity: 0;
		display: "none";
	}
}

@-o-keyframes fadeOut{
	from{
		display: "block";
		opacity: 1;
	}
	to{
		opacity: 0;
		display: "none";
	}
}
@keyframes fadeOut{
	from{
		display: "block";
		opacity: 1;
	}
	to{
		opacity: 0;
		display: "none";
	}
}

/* fadeIn Animation */
@-webkit-keyframes fadeIn{
	from{
		display: "none";
		opacity: 0;
	}
	to{
		opacity: 1.0;
		display: "block";
	}
}

@-moz-keyframes fadeIn{
	from{
		display: "none";
		opacity: 0;
	}
	to{
		opacity: 1.0;
		display: "block";
	}
}

@-o-keyframes fadeIn{
	from{
		display: "none";
		opacity: 0;
	}
	to{
		opacity: 1.0;
		display: "block";
	}
}

@keyframes fadeIn{
	from{
		display: "none";
		opacity: 0;
	}
	to{
		opacity: 1.0;
		display: "block";
	}
}

@keyframes fadeNavIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1.0;
	}
}
.anFadeIn{
	-webkit-animation: fadeIn 1s;
  	-moz-animation: fadeIn 1s;
  	-ms-animation: fadeIn 1s;
	-o-animation: fadeIn 1s;
	animation: fadeIn 1s;
}
.anFadeOut{
	-webkit-animation: fadeOut 0.75s;
  	-moz-animation: fadeOut 0.75s;
  	-ms-animation: fadeOut 0.75s;
	-o-animation: fadeOut 0.75s;
	animation: fadeOut 0.75s;
}

.hideSeek{
	opacity: 0;
}

.hideSeek:hover{
	opacity: 1;
	-webkit-animation: fadeNavIn 0.75s;
  	-moz-animation: fadeNavIn 0.75s;
  	-ms-animation: fadeNavIn 0.75s;
	-o-animation: fadeNavIn 0.75s;
	animation: fadeNavIn 0.75s;
}