/* 
	EVENT.PHP STYLES
*/	

.event-content {
	grid-area: sections;
	display: grid;
	grid-template-columns: minmax(15em, 75em);
	grid-template-rows: 40em auto;
	grid-template-areas:
		"calender"
		"prevents";
	justify-content: center;
}
	.event-content .event-info {
		grid-area: events;
	}

	.event-content .event-calender {
		grid-area: calender;
		margin-top: 1em;
	}
		.event-content .event-calender iframe {
			width: 100%;
			height: 100%;
			border: 1px solid #777;
		}

	.event-content .events-prev {
		grid-area: prevents;
		width: 100%;
		margin-top: 4em;
	}
		.event-content .events-prev h4 { margin-bottom: 0.5em; }
		.event-content .events-prev .event-group {
			background: white;
			padding: 1em;
			margin: 0.5em 0;
			border: 1px solid black;
			cursor: pointer;
		}
			.event-content .events-prev .event-group:hover {
				background: rgb(43, 59, 86);
				color: white;
			}
			.event-content .events-prev .event-images {
				width: 100%;
			}
				.event-content .events-prev .event-images > div {
					display: flex;
					flex-flow: row wrap;
					justify-content: center;
					width: 100%;
				}

					.event-content .events-prev .event-images > div > img {
						max-width: 12em;
					max-height: 12em;
					margin: 0.3em;
						cursor: pointer;
						border: 1px solid black;
					}
					.event-content .events-prev .event-images > div > img:hover {
						opacity: 0.6;
					}

#eventModal { width: 100%; }
#eventModal h3 { text-align: center; background: white;}
.imgGallery {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	min-width: 320px;
	height: auto;
}
	.imgGallery .imgSigns {
		color:white;
		align-self: center;
		z-index: 5;
		height: 5em;
	}
	.imgGallery .imgSigns:hover { cursor:pointer; color:darkgray; }
		.imgGallery #imgLeft {
			width: 5em;
		}
		.imgGallery #imgRight {
			width: 5em;
		}
.img-content { background: white; width: 100%; height: auto; max-width: 56em; justify-self: center;}
.img-content #eventShow {

	padding-top: 0.3em;
}
	#eventShow #e-main-img {
		width:100%;
		height: auto;
		/* min-height:30em; */
		
	}
		#eventShow #e-main-img p {
			padding:0;
			margin:0;
			text-align: center;
			height: 1em;
		}
		#eventShow #e-main-img #e-main-title {
			margin-bottom:0.2em;
		}
		#eventShow #e-main-img #e-main-img-src {
			display: flex;
		    justify-content: center;
		    align-items: center;
		    align-content: center;
		    overflow: hidden;
			width: 100%;
			min-width: 25em;
			max-width: 56em;
			height: auto;
		    min-height: 6em;
		   	max-height: 45em;
		}	
			#eventShow #e-main-img #e-main-img-src img {
				width: 100%;
				height: auto;
				min-height: 6em;
		   		max-height: 45em;
		   		min-width: 25em;
				max-width: 56em;
				object-fit: contain;
			}
		#eventShow #e-main-img #e-main-desc {
			margin:0.2em 0;
			height: auto;
		}

	#eventShow #e-img {
		width:100%;
		height:5em;
		display: flex;
		margin: 0.2em 0;
		justify-content: center;
		overflow: hidden;
	}
		#eventShow #e-img img{
			height: 100%;
			width: 5em;
			margin: 0 0.1em;
			cursor: pointer;
		}
		#eventShow #e-img img:hover{
			transform: scale(1.1);
		}
		#eventShow #e-img .imgSelect {
    		border:3px solid blue;
		}
/* pagination */
		.event-content .pagination a {
			border: 1px solid black;
			text-decoration: none;
			background: white;
			padding: 0.2em 0.4em;
			margin: 0.3em auto;
			color: black;
		}
		.event-content .pagination a:hover {
			background: lightgray;
		}
	/* selected link cnt */
	.event-content .pagination a.active {
		background: lightgray;
	}	
	.event-content .page_count {
		margin-top: 0.5em;
	}