#upcoming-events{
	position: relative; /*required for left/right buttons' absolute positioning*/
	margin: 40px 0;
}
/* Containers */
.pages-container {
	display: flex;
	/*enable hidden when done testing:*/
	/* overflow:hidden;  */
	justify-content: center;
	overflow: hidden;
}

#upcoming-title{
	margin-left: 10px;
	font-size: 40px;
	color: var(--text-on-dark);
	text-shadow: 3px 3px 2px #4774a2;
}

/* Event items */
.event-item {
	display: inline-block;
	margin: 0 2em 0 2em;
	width: 300px;
	height: 300px;
}

.event-item *{
	margin-left: 10px;
}

/* each page */
.page {
	display: flex;
	flex-wrap: wrap;
	min-width: 100%;
	justify-content: center;
}
/* Class applied via javascript to 
           page elements before translating pos */
.event-page-sliding-r {
	/* sliding animation */
	transition: transform 0.5s ease-in-out;
	transform: translateX(-100%);
}
.event-page-sliding-l {
	/* sliding animation */
	transition: transform 0.5s ease-in-out;
	transform: translateX(100%);
}
.slide-btn {
	position: absolute;
	top: 50%;
	background: none;
	border: none;

}

.slide-btn i{
	font-size: 50px;
	color: var(--text-on-dark);
}

.btn-right {
	right: 5px;
	transition: 0.5s;
}

.btn-right:hover{
	right: 0;
	transition: 0.5s;
}

.btn-left {
	left: 5px;
	transition: 0.5s;
}

.btn-left:hover{
	left: 0;
	transition: 0.5s;
}

/* events section */
#hero-container {
	width: 100%;
	height: 500px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

#hero-container h1 {
	font-size: 50px;
	grid-row: 2 / 3;
	grid-column: 2 / 3;
	z-index: 2;
	color: white;
	text-shadow: 0px 0px 12px black;
}

#hero {
	width: 100%;
	grid-row: 1/4;
	grid-column: 1/4;
}

#map{
	display: block; 
	border:0; 
	margin: 0 auto; 
	border-radius: 20px; 	
	border: 4px solid var(--text-on-dark); 
	background-color: white;
	width: 600px;
	height: 318px;
}

#event-hero {
	width: 100%;
	grid-row: 1/4;
	grid-column: 1/4;
	overflow: hidden;
}

/* Event times */
#upcoming-events .event-item {
	display: inline-block;
	margin: 0 1em 0 1em;
}

#weekly-run{
	margin: 0 auto;
	width: 40%;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.item-box{
	background-color: white;
	border: 4px solid var(--text-on-dark);
	border-radius: 20px;
	color: var(--text-on-light);
}

#weekly-run-wrapper{
	display: flex;
	flex-direction: row;
	margin-top: 30px;
	align-items: center;
	padding: 20px;
	gap: 10px;
}



#weekly-run *{
	margin-left: 20px;
}

#weekly-run a{
	color: var(--secondary-color);
	text-decoration: underline;
}

@media (max-width: 1000px) {

	#hero-container{
		grid-template-columns: 1fr;
		height: auto;
		text-align: center;
	}

	#hero-container h1{
		grid-row: 1/2;
		grid-column: 1/2;
	}

	#event-hero{
		grid-row: 1/2;
		grid-column: 1/2;
	}

	#weekly-run-wrapper{
		flex-direction: column;
	}

	#weekly-run{
		width: 100%;
	}

	#map{
		width: 100%;
	}
}