#evntsCal h4 {
	margin: 0 0 1rem;
}

#evntsCal.outreach-events h4 {
	margin: 2rem 0 1rem;
}

#evntsCal .date {
	width: 10%;
}

#evntsCal .evnt {
	width: 45%;
}

#evntsCal .location {
	width: 20%;
}

#evntsCal .flex .location p {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#evntsCal .flex .location i {
	font-size: 1.4rem;
	line-height: 1.4rem;
	margin-right: 7px;
}

/* BEGIN: KHEAA Events-Calendar Event 'Location' Icon styling ########################################################################## 

	>  This class is applied to events that do not have icons provided by 
	  PrimeFaces ... essentially a backup class.
*/
#evntsCal .flex .location img.eventsCal-location-icon {
	width: 1.65rem;
	height: 1.65rem;
	margin-right: 7px;
	display: inline-block;
	object-fit: contain;
}

/* Targets `backupIcons` images when an entire event row (`a.event`) is hovered */
#evntsCal #evntList a.event.flex:hover .location img.eventsCal-location-icon
	{
	filter: drop-shadow(0 0 2px white);
}

/* END: KHEAA Events-Calendar Event 'Location' Icon styling ######################################################### */
#evntsCal .flex .location span {
	text-transform: capitalize;
}

#evntsCal .audience {
	width: 25%;
}

#evntsCal #evntTitles {
	justify-content: flex-start;
	align-items: flex-end;
	margin: 0 0 1rem;
}

#evntsCal #evntTitles h3 {
	font-size: 1.6rem;
	padding: 0 .5rem;
}

#evntsCal #evntList .flex {
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0;
	text-decoration: none;
}

#evntsCal #evntList .flex>div, #evntsCal #evntList .flex>p {
	margin: 0;
	padding: .5rem;
}

#evntsCal #evntList .flex h3 {
	font-size: 1.6rem;
}

#evntsCal #evntList .flex p {
	font-size: 1.4rem;
	margin: 0;
}

#evntsCal #evntList .date p {
	margin: 0;
}

#evntsCal #evntList .flex:nth-child(even) {
	background: var(--white);
}

#evntsCal #evntList .flex:nth-child(odd) {
	background: var(--off_white);
}

#evntsCal #evntList .flex:hover, #evntsCal.outreach-events #evntList .flex:hover
	{
	background: var(--primary);
}

#evntList .flex:hover * {
	color: var(--white);
}

#evntsCal #evntList>.flex:nth-child(1) {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

#evntsCal #evntList>.flex:nth-child(10) {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#evntsCal #evntList.show-more>.flex:nth-child(10) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

#moreEvnts .flex:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/************************************

      CALENDAR MOBILE STYLES

************************************/
@media screen and (max-width: 980px) {
	#evntsCal .date {
		width: 12%;
	}
	#evntsCal .evnt {
		width: 43%;
	}
	#evntsCal .location {
		width: 20%;
	}
	#evntsCal .audience {
		width: 25%;
	}
}

@media screen and (max-width: 640px) {
	#evntsCal #evntList .flex {
		flex-wrap: wrap;
	}
	#evntsCal .date {
		width: 25%;
	}
	#evntsCal .evnt {
		width: 75%;
	}
	#evntsCal .location {
		width: 25%;
	}
	#evntsCal .audience {
		width: 75%;
	}
}