/* 2023 - Expo Specific CSS */ 

/* Homepage */ 
/* Homepage - KHK5k */
.khk5k {
	display: block; width: 100%; 
	font-size: 1.8rem; 
	text-align: center; 
	line-height: 110%;
}

	.khk5k span.khk5k-logo {
		display: inline-block; margin: 20px auto; 
		width: 100%; max-width: 350px; 
	}

		.khk5k-logo img {
			max-width: 100%; 
		}

	.khk5k a {
		display: block; width: 100%; 
		margin: 20px 0px; 
	}

/* Homepage - Gallery */ 
#homepage-gallery ul {
	display: block; width: 100%; clear: both; box-sizing: border-box; list-style-type: none; 
	margin: 0px; padding: 0px; white-space: nowrap; font-size: 0;
	overflow: auto;   
}
#homepage-gallery ul li {
	display: inline-block; 
}
#homepage-gallery ul li img {
	height: 250px; width: auto; 
}

#expo-about #headline h1 {font-size: 5rem;}
#expo-about #headline h2 {font-size: 4.2rem;}


.highlights-callout {
	font-size: 2rem;
	line-height: 120%; 
}


#yt-video-container {
	display: block; width: 100%; 
	text-align: center; 
	background-color: #292a2d;
	margin: 0px; margin-top: 20px; 
	text-align: center; 
}

	.yt-video {
		display: block; width: 100%; max-width: 840px; 
		padding: 0px;
		margin: 0px auto;  
	}

	.yt-video-wrapper {
		position: relative;
		width: 100%; 
		height: 0;
		padding-bottom: 56.25%;
		margin: 0px auto; 
	}
		.yt-video-wrapper iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}




#ggg {
	text-align: center; 
	width: 100%; clear: both; 
	box-sizing: border-box; 
	padding: 20px; 
	background-color: #179846;
}

#ggg img {
	margin: 0px auto; 
	max-width: 100%; 
}

#headline h1,
#headline h2 {
	color: #a41902 !important;
	display: block; width: 100%; 
	padding: 0px; margin: 0px; 
	line-height: 120%; 
	text-transform: uppercase;
}

#headline h1 {
	font-size: 4rem; 
}

.partner-logo {
	display: block; 
	width: 100%; text-align: center; 
}

	.partner-logo span {
		display: inline-block; 
		margin: 0px auto; 
	}

.sponsorExperiences {
	display: block; width: 100%; max-width: 800px; padding: 20px; box-sizing: border-box; 
	margin: 0px auto; 
}

.sponsorExperiences h2 {
	font-size: 4rem; 
}

.sponsorExperiences h4 {
	font-weight: bolder; display: block; width: 100%; 
	margin: 5px auto; padding: 0px; margin-top: 25px;
	font-size: 2rem;  
}

.sponsorExperiences ul {
	display: block; width: 100%; max-width: 450px; margin: 0px auto; 
	padding: 20px; text-align: left; 
	box-sizing: border-box; 
	margin-top: 25px; border-top: 1px solid #aaaaaa;
}
	.sponsorExperiences ul li {
		margin-top: 5px; 
	}


#free-classes,
#classes-signup {
	text-align: center; 
}





#free-classes a,
#classes-signup a {
	margin: 0px auto; font-size: 1.8rem; 
	padding: 10px 20px; 
	line-height: 120%; 
	position: relative; 	
}	

#free-classes a {
	padding-right: 60px; 
}

#free-classes a .icon {
	position: absolute; 
	top: 50%;
	right: 20px; 
	-webkit-transform: translateY(-50%); 
	transform: translateY(-50%); 
	
}


#expo-about .inner:nth-child(2){
	padding-top: 0px; 
}




#expo-about #classes-signup {
	margin-bottom: 40px; 
}


#lockup {
	display: block; width: 100%; clear: both; 
	box-sizing: border-box; 
	font-size: 3.5rem; 
	text-align: center;
	color: #000;  
	margin: 0px; padding: 0px; 
	margin-bottom: 60px; 
}

#lockup li {
	display: inline-block; vertical-align: top; 
	margin-left: 40px;
	position: relative; 
	text-transform: none; 
	text-shadow: 3px 3px 5px rgba(0,0,0,0.25);
	line-height: 150%; 
}

#lockup li::before {
	content: ""; 
	background-color: #ffff00; 
	display: block; 
	width: 20px; height: 20px; 
	border-radius: 20px; 
	position: absolute; 
	left: -35px; 
	top: 50%; 
	-webkit-transform: translateY(-50%); 
	transform: translateY(-50%);
	-webkit-box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.15);
	box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.15);	 
}

	#lockup li:first-child {
		margin-left: 0px; 
	}

	#lockup li:first-child::before {
		display: none; 
	}


#callouts {
	display: block; width: 100%; text-align: center; 
	list-style-type: none; margin: 0px; padding: 0px; 
	vertical-align: top; 
}

#callouts li {
	display: inline-block; 
	text-transform: uppercase; 
	text-align: center; 
	vertical-align: top; 
	margin-left: 10px; 
}
	#callouts li:first-child {
		margin-left: 0px; 
	}	
	
	#callouts span.hp-logo {
		width: 100%; 
	}
	
		#callouts span.hp-logo img {
			max-width: 180px; 
		}

#callouts li h3 {
	font-size: 2.8rem; 
}
#callouts li:nth-child(1) h3 {
	font-size: 2.2rem; 
}
	
#callouts li h3 sub {
	display: block; clear: both; 
	font-size: 1.5rem; 
	margin-top: 10px; 
	color: #000; 
}

#callouts-row {
	display: block; width: 100%; list-style-type: none; 
	margin: 0px; padding: 0px; 
	font-size: 0; 
	text-align: center;
	padding: 20px;  
	box-sizing: border-box; 
}

	#callouts-row li {
		margin: 0px; 
		padding: 0px; 
		margin-left: 40px; 
		display: inline-block;
		text-align: center; vertical-align: top; 
		box-sizing: border-box; 
		/*
		width: calc((100% - 20px) / 2);
		*/
		font-size: 1rem; 
	}

	#callouts-row li:first-child {
		margin-left: 0px; 
	}

	#callouts-row li h3 {
		text-transform: uppercase; 
		font-size: 1.75rem; 
	}

	#callouts-row li h3 sup {
		font-size: 0.65em; 
		position: relative; 
		vertical-align: top; 
	}
	#callouts-row li sub,
	#callouts-row li span {
		display: block; width: 100%; clear: both; 
		font-size: 1.25rem; 
	}
	#callouts-row li span.small {
		font-size: 1rem; 
	}


.ct-largest-hwlexpo {
	background-color: #fef200; 
	color: #000; 
	font-size: 1.8rem;
	line-height: 120%;  
	font-weight: bolder; 
}

	.ct-largest-hwlexpo .inner {
		padding: 15px !important; 
	}

#home .bbj-dio {
	width: 100%; 
	min-height: 450px; 
	background-position: center center; 
	background-size: cover; 
	background-repeat: no-repeat; 
	background-color: transparent; 
}

#ppfl-wrapper {
	text-align: center; 
}

#ppfl-wrapper .col:nth-child(1){
	width: 300px; 
	margin: 0px auto; 
	text-align: center; 
}
	#ppfl-wrapper .col:nth-child(1) img {
		max-width: 100%; 
	}



#schedule-container {

}
	.gggBanner {
		background-color: #e7e5e4;
		width: 100%; padding: 10px; 
	}
		.gggBanner img {
			max-width: 100%; 
		}
	.schedule-navigation {
		margin-bottom: 20px !important; 		
	}
	
	.schedule-navigation ul {
		display: block; width: 100%; list-style-type: none; 
		box-sizing: border-box; margin: 0px; padding: 0px; 
	}
	.schedule-navigation ul li {
		display: block; margin-top: 10px;
		width: 100%; box-sizing: border-box; 
		text-transform: uppercase; 
	}
		li.zone-schedule-heading {
			box-sizing: border-box; 
			padding: 15px 5px; 
			font-size: 1.2rem; 
		}

		li.zone-schedule-heading sub {
			font-size: 0.8rem; 
		}
		.schedule-navigation ul li:first-child {
			margin-top: 0px; 
		}
	.schedule-navigation ul li a {
		display: block; width: 100%; padding: 10px 10px; 
		color: #c22a3f; box-sizing: border-box; 
		background-color: #fff; 
		border: 1px solid #c22a3f;
		text-decoration: none; 
		font-weight: bolder; 
		text-transform: uppercase; 
	}
	.schedule-navigation ul li a.button_l {
		font-size: 2rem; 
		padding: 15px; 
		background-position: right 10px top 10px;
		line-height: 120%; 
	}

	.schedule-navigation ul li a sub {
		display: block; clear: both; 
		width: 100%; 
		font-size: 0.75rem; 
	}
	
	.schedule-navigation ul li#waiver a {
		background-color: #c22a3f;
		color: #fff; 
		margin-top: 20px; 
	}
	
	.schedule-navigation ul li a.active,
	.schedule-navigation ul li a:hover {
		background-color: #c22a3f; 
		border: 1px solid #c22a3f;
		color: #fff;
	}
	
	li.class-registry a,
	li.class-registry a:hover {
		background-color: #c22a3f !important; 
		color: #fff !important; 
	}

	#page-sat h2 {
		white-space: normal; font-size: 1.8rem; line-height: 120%;
	}

	#schedule-container .col:nth-child(1){
		width: 20vw; 
	}
	
	#schedule-container .col:nth-child(2){
		width: calc(100% - 20vw - 20px); 
		padding: 0px;
		margin-left: 20px; 
		overflow: hidden; white-space: nowrap; 
		font-size: 0; 
	}
	
	#schedule-container .col:nth-child(2) .page {
		display: inline-block; font-size: 1rem; 
		vertical-align: top; 
		width: 100%; box-sizing: border-box; 
	}
	
	#schedule-container .col table {
		outline: 0px; 
	}
	#schedule-container .col table ul {
		box-sizing: border-box; 
		padding: 20px; 
	}	
	
	#schedule-container .col table ul li {
		margin-top: 10px; 
	}
	
	#schedule-container .col table ul li:first-child {
		margin-top: 0px; 
	}
		
		td.date {
			color: #fff; 
			background-color: #169848;
			padding: 5px 10px; width: 100%; box-sizing: border-box; 
			
		}

		ol.schedule-zones {
			padding: 20px; 
		}
		ol.schedule-zones sub {
			display: block !important; clear: both; font-size: 0.8rem;
			width: auto !important; margin: 3px 0px; 
		}

	#schedule-pages .page td p:first-child {
		margin-top: 0px; 
	}

	#schedule-pages .underline {
		text-decoration: underline; 
	}

	#schedule-pages .small-text {
		font-size: 0.75rem; display: inline-block;  
		width: initial; clear: none; 
		margin-left: 5px; 
	}


	#schedule-pages tbody tr:first-child td {
		padding-top: 30px; 
	}


	.khk-5k-poster {
		display: inline-block; 
		width: 100%; max-width: 450px; 
		text-align: center; 
		padding: 40px; 
	}
		
/* RWD */ 
@media all and (max-width: 780px){


	
	#content-container {
		text-align: center !important; 
	}
	
	#sponsor-category-title_sponsors li.sponsor {
		min-width: 60% !important; 
	}
	
	#schedule-container .col {
		display: block; width: 100% !important; 
		clear: both; 
		margin: 0px !important; 
	}
	
	.schedule-navigation ul {
		width: 100%; max-width: 320px; margin: 0px auto; 
	}
	
	
	
	#schedule-container .col table {
		text-align: left; vertical-align: top; 
	}
	
	#schedule-container .col:first-child {
		margin-bottom: 20px !important; 		
	}	

	

}


@media all and (max-width: 640px){

	#callouts-row li {
		display: block; width: 100%; clear: both; 
		margin: 20px 0px; 
	}

}


@media all and (max-width: 480px){

	#lockup li {
		margin-left: 0px; 
		margin-top: 40px; 
	}
	#lockup li::before {
		display: block; 
		top: -30px; 
		left: 50%; 
		-webkit-transform: translate(-50%,0);
		transform: translate(-50%,0);
	}

}


@media all and (max-width: 480px){

	



}


@media all and (max-width: 450px){




}