/********************* SPOTLIGHT STYLES *********************/


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

@media screen and (min-width: 320px)  {

	.container-spotlight {
		width: 100%;
		height: auto;
		background-color: #000;
	}

		.spotlightBox {
			width: 100%;
			height: auto;
			padding: 30px 10px 30px 10px;
		}

			.spotlightHeading {
				color: #fff;
				font-family: 'Poppins', sans-serif;
				font-weight: 900;
				font-size: 2em;
				line-height: 0.9em;
				text-transform: uppercase;
				letter-spacing: 1px;
				padding: 0 0 0 20px;
				margin: 10px 0 30px 10px;
				border-left: 10px solid #0468B0;
			}

			.wrapper {
				width: 93.5%;
				overflow-x: scroll;
				white-space: nowrap;
				float: left;
				position: relative;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
			}

				.wrapper::-webkit-scrollbar-track {
					background-color: none;
					border: 1px solid white;

				}

				.wrapper::-webkit-scrollbar {
					width: 6px;
					background-color: none;
					height: 8px !important;
				}

				.wrapper::-webkit-scrollbar-thumb {
					background-color: white;
				}

			.item {
				display: inline-block;
			}

			.cardBox {
				float: left;
				background-color: #fff;
				width: 255px;
				height: 300px;
				margin: 0 10px 0 0;
				white-space: normal;
			}

				.cardImage {
					width: 100%;
					height: 61%;
					background-position: 50% 50%;
					background-size: 100% auto;
					transition: 0.5s;
					float: none;
				}

					.cardImage a {
						display: block;
						width: 100%;
						height: 100%;
					}

				.cardBox:hover > .cardImage {
					background-size: 110% auto;
				}

					#image01 {
						background-image: url(../images_induction/inductionSpotlight2024_tickets3.jpg);
					}

					#image02 {
						background-image: url(../images_induction/inductionSpotlight2025_weekend.jpg);
					}

					#image03 {
						background-image: url(../images_induction/inductionSpotlight2024_vip.jpg);
					}

					#image04 {
						background-image: url(../images_induction/inductionSpotlight2024_classic.jpg);
					}

					#image05 {
						background-image: url(../images_induction/inductionSpotlight2025_class.jpg);
					}
						
					#image07 {
						background-image: url(../images_induction/inductionSpotlight2025_press-releases.jpg);
					}



				.cardContent {
					width: 100%;
					height: 27%;
					background-color: #fff;
					padding: 10px;
					position: relative;
					float: none;
				}

					.cardTag {
						color: #fff;
						display: inline;
						font-family: 'Poppins', sans-serif;
						font-weight: 500;
						text-transform: uppercase;
						letter-spacing: 1px;
						background-color: #0468B0;
						padding: 0px 5px;
						font-size: 0.8em;
					}

					.cardContent h1 {
						font-family: 'Poppins', sans-serif;
						font-weight: 900;
						color: #000;
						font-size: 1.25em;
						margin: 5px 0 0 0;
						width: 90%;
					}

				.cardLinks {
					width: 100%;
					height: 12%;
					background-color: #fff;
					padding: 10px;
					border-top: 1px solid lightgrey;
				}

					.readMoreLink {
						float: left;
						color: #0468B0;
						text-transform: uppercase;
						font-size: 0.55em;
					}

					.shareLink {
						float: right;
						color: #9d9d9d;
						text-transform: uppercase;
						font-size: 0.6em;
					}

}

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

@media screen and (min-width: 375px)  {

	/*.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 1.75em;
				padding: 0 0 0 20px;
				margin: 0 0 30px 10px;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
			}

				.item {
				}

				.cardBox {
					width: 260px;
					height: 480px;
					margin: 0 10px 0 0;
				}

					.cardImage {
					}

					.cardBox:hover > .cardImage {
					}

					.cardContent {
					}

						.cardTag {
							font-size: 0.8em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.25em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						padding: 10px;
						border-top: 1px solid lightgrey;
					}

						.readMoreLink {
							font-size: 0.7em;
						}

						.shareLink {
							font-size: 0.7em;
						}*/

}

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

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {

	/*.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 2em;
				padding: 0 0 0 20px;
				margin: 0 0 30px 10px;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
			}

				.item {
				}

				.cardBox {
					width: 300px;
					height: 550px;
					margin: 0 10px 0 0;
				}

					.cardImage {
					}

					.cardBox:hover > .cardImage {
					}

					.cardContent {
						padding: 15px;
					}

						.cardTag {
							font-size: 0.85em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.5em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						padding: 12px 15px;
						border-top: 1px solid lightgrey;
					}

						.readMoreLink {
							font-size: 0.8em;
						}

						.shareLink {
							font-size: 0.8em;
						}*/

}

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

@media screen and (min-width: 414px)  {

	.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 2em;
				padding: 0 0 0 20px;
				margin: 0 0 30px 10px;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
			}

				.item {
				}

				.cardBox {
					width: 300px;
					height: 400px;
					margin: 0 10px 0 0;
				}

					.cardImage {
					}

					.cardBox:hover > .cardImage {
					}

					.cardContent {
						padding: 15px;
					}

						.cardTag {
							font-size: 0.85em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.5em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						padding: 12px 15px;
						border-top: 1px solid lightgrey;
					}

						.readMoreLink {
							font-size: 0.8em;
						}

						.shareLink {
							font-size: 0.8em;
						}

}

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

@media screen and (min-width: 480px)  {

	

}

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

@media screen and (min-width: 568px) {

	.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 1.5em;
				padding: 0 0 0 20px;
				margin: 0 0 30px 18px;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
			}

				.item {
				}

				.cardBox {
					width: 300px;
					height: 170px;
					margin: 0 10px 10px 0;
				}

					.cardImage {
						float: left;
						width: 55%;
						height: 80%;
					}

					.cardBox:hover > .cardImage {
					}

					.cardContent {
						padding: 10px;
						float: left;
						width: 45%;
						height: 80%;
					}

						.cardTag {
							font-size: 0.7em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.25em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						height: 20%;
						padding: 9px 15px;
						border-top: 1px solid lightgrey;
					}

						.readMoreLink {
							font-size: 0.7em;
						}

						.shareLink {
							font-size: 0.7em;
						}

}

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

@media screen and (min-width: 667px) {

	/*.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 1.5em;
				padding: 0 0 0 20px;
				margin: 0 0 30px 18px;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
			}

				.item {
				}

				.cardBox {
					width: 350px;
					height: 200px;
					margin: 0 10px 10px 0;
				}

					.cardImage {
						float: left;
						width: 35%;
						height: 80%;
					}

					.cardBox:hover > .cardImage {
					}

					.cardContent {
						padding: 10px;
						float: left;
						width: 65%;
						height: 80%;
					}

						.cardTag {
							font-size: 0.75em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.125em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						height: 20%;
						padding: 10px 15px;
						border-top: 1px solid lightgrey;
					}

						.readMoreLink {
							font-size: 0.75em;
						}

						.shareLink {
							font-size: 0.75em;
						}*/

}

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

@media screen and (min-width: 736px)  {

	/*.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 1.75em;
				padding: 0 0 0 20px;
				margin: 0 0 30px 3.25%;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
			}

				.item {
				}

				.cardBox {
					width: 400px;
					height: 250px;
					margin: 0 10px 10px 0;
				}

					.cardImage {
						float: left;
						width: 35%;
						height: 85%;
					}

					.cardBox:hover > .cardImage {
					}

					.cardContent {
						padding: 15px;
						float: left;
						width: 65%;
						height: 85%;
					}

						.cardTag {
							font-size: 1em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.5em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						height: 15%;
						padding: 10px 15px;
						border-top: 1px solid lightgrey;
					}

						.readMoreLink {
							font-size: 0.75em;
						}

						.shareLink {
							font-size: 0.75em;
						}*/

}

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

@media screen and (min-width: 768px)  {

	.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 2em;
				padding: 0 0 0 20px;
				margin: 10px 0 30px 3.3%;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
				overflow-x: hidden;
				overflow-y: hidden;
				position: relative;
			}

				.item {
					width: 23.8%;
					margin: 0 1% 0 0;
				}

				.cardBox {
					width: 100%;
					height: 300px;
					margin: 0 15px 0 0;
				}

					.cardImage {
						float: none;
						width: 100%;
						height: 60%;
						background-size: auto 100%;
					}

					.cardBox:hover > .cardImage {
						background-size: auto 110%;
					}

					.cardContent {
						padding: 10px;
						float: none;
						width: 100%;
						height: 30%;
					}

						.cardTag {
							font-size: 0.5em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.125em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						padding: 8px 10px;
						border-top: 1px solid lightgrey;
						height: 10%;
					}

						.readMoreLink {
							font-size: 0.6em;
						}

						.shareLink {
							font-size: 0.6em;
						}

}

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

@media only screen 
    and (device-width : 812px) 
    and (device-height : 375px) 
    and (-webkit-device-pixel-ratio : 3) {


    	
}

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

@media screen and (min-width: 992px)  {

	.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 2em;
				padding: 0 0 0 20px;
				margin: 10px 0 30px 3.3%;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
				overflow-x: hidden;
				overflow-y: hidden;
				position: relative;
			}

				.item {
					width: 23.8%;
					margin: 0 1% 0 0;
				}

				.cardBox {
					width: 100%;
					height: 330px;
					margin: 0 15px 0 0;
				}

					.cardImage {
						float: none;
						width: 100%;
						height: 67%;
						background-size: auto 100%;
					}

					.cardBox:hover > .cardImage {
						background-size: auto 110%;
					}

					.cardContent {
						padding: 10px;
						float: none;
						width: 100%;
						height: 23%;
					}

						.cardTag {
							font-size: 0.5em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.125em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						padding: 8px 10px;
						border-top: 1px solid lightgrey;
						height: 10%;
					}

						.readMoreLink {
							font-size: 0.6em;
						}

						.shareLink {
							font-size: 0.6em;
						}

}

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

@media screen and (min-width: 1024px)  {

	/*.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 2em;
				padding: 0 0 0 20px;
				margin: 0 0 30px 3.3%;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
				overflow-x: hidden;
				overflow-y: hidden;
				position: relative;
			}

				.item {
					width: 23.8%;
					margin: 0 1% 0 0;
				}

				.cardBox {
					width: 100%;
					height: 400px;
					margin: 0 15px 0 0;
				}

					.cardImage {
						float: none;
						width: 100%;
						height: 55%;
					}

					.cardBox:hover > .cardImage {
					}

					.cardContent {
						padding: 5px 10px 10px 10px;
						float: none;
						width: 100%;
						height: 35%;
					}

						.cardTag {
							font-size: 0.7em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.1em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						padding: 12px 10px;
						border-top: 1px solid lightgrey;
						height: 5%;
					}

						.readMoreLink {
							font-size: 0.7em;
						}

						.shareLink {
							font-size: 0.7em;
						}*/

}

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

@media screen and (min-width: 1115px)  {

				
}

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

@media screen and (min-width: 1266px)  {

}

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

@media screen and (min-width: 1280px)  {

	.spotlightBox {
		width: 1280px;
		margin: auto;

	}

	.container-spotlight {
	}

		.spotlightBox {
		}

			.spotlightHeading {
				font-size: 2em;
				padding: 0 0 0 20px;
				margin: 10px 0 30px 3.3%;
			}

			.wrapper {
				width: 93.5%;
				margin: auto auto auto 3.3%;
				padding: 0px 0 10px 0;
				overflow-x: hidden;
				overflow-y: hidden;
				position: relative;
			}

				.item {
					width: 23.8%;
					margin: 0 1% 0 0;
				}

				.cardBox {
					width: 100%;
					height: 330px;
					margin: 0 15px 0 0;
				}

					.cardImage {
						float: none;
						width: 100%;
						height: 65%;
						background-size: 100% auto;
					}

					.cardBox:hover > .cardImage {
						background-size: 110% auto;
					}

					.cardContent {
						padding: 10px;
						float: none;
						width: 100%;
						height: 25%;
					}

						.cardTag {
							font-size: 0.5em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1.5em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks {
						padding: 8px 10px;
						border-top: 1px solid lightgrey;
						height: 10%;
					}

						.readMoreLink {
							font-size: 0.6em;
						}

						.shareLink {
							font-size: 0.6em;
						}
	
}

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

@media screen and (min-width: 1281px)  {


}

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

@media screen and (min-width: 1366px)  {

}

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


@media screen and (min-width: 1600px)  {

}

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

@media screen and (min-width: 1920px)  {

}

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