/********************** DEFAULT STYLES **********************/

* { margin:0; padding:0; }

.carousel-control-prev-icon {
	background-image: url('../images/arrowLeft.svg') !important;
}

.carousel-control-next-icon {
	background-image: url('../images/arrowRight.svg') !important;
}

.carouselbox {
	background-color: #000;
}

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

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

	.container-carousel {
		z-index: 500;
		width: 100%;
		margin: 0px auto auto auto !important;
		padding-top: 0px;
	}

		.carousel {
			height: 100vh !important;
		}

			.carousel-item {
				height: 100vh !important;
			}

			.carousel-control-prev,
			.carousel-control-next {
				width: auto !important;
				opacity: 1 !important;
			}

			.carousel-control-prev-icon,
			.carousel-control-next-icon {
				width: 40px !important;
				height: 80px !important;
			}

			.slidelink {
				display: block;
				width: 100%;
				height: 100%;
			}


			#slideA {
				background-image: url(../images/learningcurve_carousel_mobile.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}



			#slideB {
				background-image: url(../images/bruins_carousel_mobile.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

				#slideB img {
					position: absolute;
					width: 70px;
					height: auto;
					top: 15px;
					left: 15px;
				}


			#slideD {
				background-image: url(../images/weekendpkgs_carousel_mobile.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			#slideC {
				background-image: url(../images/carousel_Family-Cup_mobile.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			#slideE {
				background-image: url(../images/themask_carousel_mobile.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			#slideF {
				background-image: url(../images/LegendsWall_Homepage_moblie.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			#slideG {
				background-image: url(../images/index_cuponblack_mobile.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			

			


				.slideBox {
					position: relative;
					width: 85vw;
					height: auto;
					border-left: 3px solid #0468B0;
					padding: 10px 0 0px 30px;
					top: -40vh;
					left: 30px;
				}

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

					.slideBox h1 {
						font-family: 'Poppins', sans-serif;
						font-weight: 900;
						color: #fff;
						font-size: 2em;
						line-height: 0.8em;
						text-transform: uppercase;
						margin: 10px 0 0 0;
					}

						#slideB h1 {
							font-size: 2em;
						}

						#slideC h1 {
							font-size: 2em;
						}

					.slideBox h2 {
						font-family: 'Poppins', sans-serif;
						font-weight: 500;
						color: #fff;
						font-size: 1em;
						line-height: 0.9em;
						text-transform: uppercase;
						margin: 5px 0 0 0;
					}

					.slideBox a {
						font-family: 'Poppins', sans-serif;
						font-weight: 500;
						margin: 0;
						color: #0468B0;
						font-size: 0.75em;
					}

	.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: 1.5em;
				text-transform: uppercase;
				letter-spacing: 1px;
				padding: 0 0 0 20px;
				margin: 0 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: 400px;
				margin: 0 10px 0 0;
				white-space: normal;
			}

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

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

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

					#imageForfaits {
						background-image: url(../les_images/index_decouvrez_forfaits.jpg);
					}

					#imageGroupes {
						background-image: url(../les_images/index_decouvrez_groupes.jpg);
					}
					
					#imageLegendes {
						background-image: url(../les_images/index_decouvrez_HM.jpg);
					}
					



					

				.cardContent {
					width: 100%;
					height: 34%;
					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.22em;
						margin: 5px 0 0 0;
						width: 90%;
					}

				.cardLinks {
					width: 100%;
					height: 8%;
					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;
					}

	.container-HHOFWindow {
		width: 100%;
		padding-top: 74.88%;
	}

		#Window01 {
			background-image: url('../images_ads/HHOF_LegendsLine_Mobile_FR.jpg');
			background-size: 100% auto;
			background-position: 50% 50%;
		}

		#Window02 {
			/*background-image: url('../images_ads/HHOF_ventueRentals_ad_mobile_828x620_V01.jpg');*/
			background-image: url('../images_ads/HHOF_Venue_FR_Mobile_alt.jpg');
			background-size: auto 100%;
			background-position: 60% 100%;
		}

		#Window03 {
			background-image: url('../images_ads/LC21_HHOF_600x500.jpg');
			background-size: auto 100%;
			background-position: 60% 100%;
		}


	.container-news {
		width: 100%;
		height: auto;
		background-color: #fff;
	}

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

			.newsHeading {
				color: #000;
				font-family: 'Poppins', sans-serif;
				font-weight: 900;
				font-size: 1.5em;
				text-transform: uppercase;
				letter-spacing: 1px;
				padding: 0 0 0 20px;
				margin: 0 0 30px 10px;
				border-left: 10px solid #E11D37;
			}

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

				.wrapper02::-webkit-scrollbar-track {
					background-color: none;
					border: 1px solid lightgrey;

				}

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

				.wrapper02::-webkit-scrollbar-thumb {
					background-color: lightgrey;
				}

			.item02 {
				display: inline-block;
			}

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

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

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

				.cardBox02:hover > .cardImage02 {
					background-size: auto 110%;
				}

					#image05 {
						background-image: url(../images/index_news_01_induction.jpg);
					}

					#image06 {
						background-image: url(../images/index_bruins_news.jpg);
					}

					#image07 {
						background-image: url(../images/index_news_03_preserveOurGame.jpg);
					}

					#image08 {
						background-image: url(../images/arenazone_news.jpg);
					}
					
					#image09 {
						background-image: url(../images/index_avsring_news.jpg);
					}

					#image10 {
						background-image: url(../images/news_exhibitrentals.png);
					}

					#image12 {
						background-image: url(../images/sweepstakes_index_news.jpg);
					}
					
					#image14 {
						background-image: url(../images/index_news_hockeytreasures.jpg);
					}

					#image17 {
						background-image: url(../images/learningcurve_news.jpg);
					}
					#image18 {
						background-image: url(../images/index_spotlight_Bucket_Spotlight.jpg);
					}

					#image21 {
						background-image: url(../images/obit_oneill_news.jpg);
					}
					
					#image25 {
						background-image: url(../images/woho_index_news.jpg);
					}
					#image37 {
						background-image: url(../images/index_news_induction2024.jpg);
					}

					#image38 {
						background-image: url(../images/Spotlight_Hockey-Card-Day-24.jpg);
					}




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

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

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

					.cardContent02 p {
						font-family: 'Poppins', sans-serif;
						font-weight: 500;
						color: #000;
						font-size: 0.70em;
						margin: 5px 0 0 0;
						width: 90%;
					}

				.cardLinks02 {
					width: 100%;
					height: 8%;
					background-color: #fff;
					padding: 5px 0 8px 0;
					border-bottom: 2px solid #E11D37;
				}

					.readMoreLink02 {
						float: left;
						color: #E11D37;
						text-transform: uppercase;
						font-size: 0.55em;
					}

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

	.container-Gallery {
		width: 100%;
		height: auto;
		background-color: #fff;
	}

		.galleryBox {
			width: 100%;
			height: auto;
			padding: 30px 20px 30px 20px;
		}

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

			.photoGallery {
				height: 40vh !important;
			}

				#photo01 {
					height: 40vh !important;
					background-image: url(../images/index_gallery_sportscentre.jpg);
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 40vh !important;
					background-image: url(../images/index_gallery_02_dressingRoom.jpg);
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 40vh !important;
					background-image: url(../images/index_gallery_02_worldOfHockey.jpg);
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 40vh !important;
					background-image: url(../images/index_gallery_legends.jpg);
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				

				.photoCredit {
					opacity: 0;
					font-family: 'Lato', sans-serif;
					text-align: center;
					color: white;
					transition: 0.5s;
					width: 100%;
					height: 100%;
					background-color: rgba(0,0,0,0.8);
					padding: 40px;
					font-size: 1em;
					line-height: 1.125em;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
							opacity: 1;
					}

	.container-newsletter {
		width: 100%;
		height: auto;
		padding: 6% 4%;
		background-image: url('../images_general/banner_newsletter.jpg');
		background-size: auto 100%;
		background-position: 0% 50%;
		text-align: center;
		text-shadow: 0px 0px 7px rgba(0,0,0,0.76);
	}

		.container-newsletter h2 {
			color: #fff;
			font-family: 'Poppins', sans-serif;
			font-weight: 900;
			font-size: 1.125em;
			letter-spacing: 1px;
			padding: 0;
			margin: 5px auto 10px auto;
			width: 90%;
		}

		.container-newsletter h4 {
			color: #fff;
			font-family: 'Poppins', sans-serif;
			font-weight: 500;
			font-size: 0.7em;
			letter-spacing: 1px;
			padding: 0;
			margin: 0 auto 15px auto;
			width: 90%;
		}

		.container-newsletter p {
			color: #fff;
			font-family: 'Poppins', sans-serif;
			font-weight: 500;
			font-size: 0.5em;
			letter-spacing: 1px;
			padding: 0;
			margin: 0 auto 5px auto;
			width: 90%;
		}

		.container-newsletter form {
			width: 100%;
			margin: auto auto 15px auto; 
		}

			.emailinput {
				width: 70%;
				height: 30px;
				float: left;
				border: 0px;
				padding: 5px;
				font-size: 0.8em;
			}

			.newsletterbutton {
				width: 30%;
				height: 30px;
				float: left;
				border: 0px;
				padding: 5px;
				font-size: 0.8em;
				background-color: #0468B0;
				color: #fff;
			}

			.signupthankyou {
				position: absolute;
				width: 100%;
				height: 100vh;
				background-color: rgba(69,69,69,0.5);
				z-index: 10000;
			}

}

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

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

	.container-carousel {
	}

		.carousel {
		}

			.carousel-item {
			}

			#slideB {
			}

				#slideB img {
					width: 80px;
					height: auto;
					top: 25px;
					left: 25px;
				}


			#slideA {
			}

			#slideC {
			}

			#slideE {
			}
			
			#slideF {
			}


				.slideBox {
					top: -43vh;
					left: 30px;
				}

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

					.slideBox h1 {
						font-size: 2.75em;
						line-height: 0.8em;
						margin: 15px 0 0 0;
					}

						#slideB h1 {
							font-size: 2.75em;
						}

						#slideC h1 {
							font-size: 2.75em;
						}

					.slideBox h2 {
						font-size: 1.25em;
						line-height: 0.9em;
						margin: 8px 0 0 0;
					}

					.slideBox a {
						font-size: 0.8em;
					}

	.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;
						}

	.container-HHOFWindow {
		width: 100%;
	}

		/*#Window01 {
			background-size: 100% auto;
			background-position: 0% 50%;
		}

		#Window02 {
			background-size: auto 105%;
			background-position: 60% 100%;
		}*/

	.container-news {
	}

		.newsBox {
		}

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

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

				.item02 {
				}

				.cardBox02 {
					width: 280px;
					height: 420px;
					margin: 0 10px 0 0;
				}

					.cardImage02 {
					}

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
					}

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

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

						.cardContent02 p {
							font-size: 0.70em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks02 {
						padding: 10px;
					}

						.readMoreLink02 {
							font-size: 0.7em;
						}

						.shareLink02 {
							font-size: 0.7em;
						}

	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 265px !important;
			}

				#photo01 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}


				
				.photoCredit {
					padding: 60px;
					font-size: 1em;
					line-height: 1.125em;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
							opacity: 1;
					}

}

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

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

    .container-carousel {
	}

		.carousel {
			height: 90vh !important;
		}

			.carousel-item {
				height: 90vh !important;
			}

			#slideB {
			}

				#slideB img {
					width: 80px;
					height: auto;
					top: 20px;
					left: 20px;
				}

			#slideA {
			}

			#slideC {
			}

			#slideE {
			}

			#slideF {
			}
				.slideBox {
					top: -35vh;
					left: 30px;
				}

	.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;
						}

	.container-HHOFWindow {
		width: 100%;
		padding-top: 74.88%;
	}

		/*#Window01 {
			background-size: 100% auto;
			background-position: 0% 50%;
		}

		#Window02 {
			background-size: auto 105%;
			background-position: 60% 100%;
		}*/

	.container-new {
	}

		.newsBox {
		}

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

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

				.item02 {
				}

				.cardBox02 {
					width: 300px;
					height: 470px;
					margin: 0 10px 0 0;
				}

					.cardImage02 {
					}

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 15px 0px;
					}

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

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

						.cardContent02 p {
							font-size: 0.8em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks02 {
						padding: 5px 0px;
					}

						.readMoreLink02 {
							font-size: 0.8em;
						}

						.shareLink02 {
							font-size: 0.8em;
						}


	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 265px !important;
			}

				#photo01 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				

}

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

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

	.container-carousel {
		margin: 0px auto auto auto !important;
	}

		.carousel {
		}

			.carousel-item {
			}

			#slideA {
			}

			#slideB {
			}

			#slideC {
			}

			#slideE {
			}

			#slideF {
			}
				.slideBox {
				}

					.sliderTag {
					}

					.slideBox h1 {
						font-size: 3.2em;
					}

						#slideB h1 {
							font-size: 3.2em;
						}

						#slideC h1 {
							font-size: 3.2em;
						}

					.slideBox h2 {
					}

					.slideBox a {
					}


	.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;
						}

	.container-HHOFWindow {
		width: 100%;
	}

		/*#Window01 {
			background-size: 100% auto;
			background-position: 0% 50%;
		}

		#Window02 {
			background-size: auto 105%;
			background-position: 60% 100%;
		}*/

	.container-news {
	}

		.newsBox {
		}

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

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

				.item02 {
				}

				.cardBox02 {
					width: 320px;
					height: 420px;
					margin: 0 10px 0 0;
				}

					.cardImage02 {
					}

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 15px 0px;
					}

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

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

						.cardContent02 p {
							font-size: 0.8em;
							margin: 5px 0 0 0;
							width: 90%;
						}

					.cardLinks02 {
						padding: 0px 0px;
					}

						.readMoreLink02 {
							font-size: 0.8em;
						}

						.shareLink02 {
							font-size: 0.8em;
						}

	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 265px !important;
			}

				#photo01 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 265px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}
				

				
				

				.photoCredit {
					padding: 85px;
					font-size: 1em;
					line-height: 1.125em;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}

	.container-newsletter {
	}

		.container-newsletter h2 {
			font-size: 1.25em;
			padding: 0;
			margin: 5px auto 10px auto;
			width: 90%;
		}

		.container-newsletter h4 {
			font-size: 0.8em;
			padding: 0;
			margin: 0 auto 15px auto;
			width: 90%;
		}

		.container-newsletter p {
			font-size: 0.6em;
			padding: 0;
			margin: 0 auto 5px auto;
			width: 85%;
		}

		

}

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

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

	.container-carousel {
		margin: 0px auto auto auto !important;
	}

		.carousel {
			height: 853px !important
		}

			.carousel-item {
				height: 853px !important
			}

			#slideA {
			}

			#slideB {
			}

			#slideC {
			}

			#slideE {
			}

			#slideF {
			}


				.slideBox {
				}




					.sliderTag {
					}

					.slideBox h1 {
						font-size: 4em;
					}

				#slideA h1 {
							font-size: 3.5em;
						}


				#slideB h1 {
							font-size: 3.5em;
						}

				#slideC h1 {
							font-size: 3.5em;
						}

				#slideE h1 {
							font-size: 3.5em;
						}

				#slideF h1 {
							font-size: 3.5em;
						}


					.slideBox h2 {
					}

					.slideBox a {
					}

	.container-HHOFWindow {
		width: 100%;
	}

		/*#Window01 {
			background-size: 100% auto;
			background-position: 0% 0%;
		}

		#Window02 {
			background-size: auto 105%;
			background-position: 50% 100%;
		}*/

	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 300px !important;
			}

				#photo01 {
					height: 300px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 300px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 300px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 300px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				

}

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

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

	.container-carousel {
		margin: auto auto auto auto !important;
	}

		.carousel {
			height: 320px !important;
		}

			.carousel-item {
				height: 320px !important;
			}

			#slideB {
				background-image: url(../images/bruins_carousel_desktop.jpg);
				background-size: 100% auto;
				background-position: 50% 50%;
			}

				#slideB img {
					width: 170px;
					height: auto;
					top: 25px;
					left: 90px;
				}
			#slideA {
				background-image: url(../images/learningcurve_carousel_desktop.jpg);
				background-size: 100% auto;
				background-position: 50% 50%;
			}

				

			#slideD {
				background-image: url(../images/weekendpkgs_carousel_desktop.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			#slideC {
				background-image: url(../images/carousel_Family-Cup_desktop.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			#slideE {
				background-image: url(../images/themask_carousel_desktop.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			#slideF {
				background-image: url(../images/LegendsWall_Homepage_desktop.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}

			#slideG {
				background-image: url(../images/index_cuponblack_desktop.jpg);
				background-size: auto 100%;
				background-position: 50% 50%;
			}


			

				.slideBox {
					width: 90vw;
					height: auto;
					padding: 7px 0 0px 20px;
					top: -48vh;
					left: 50px;
				}

					.sliderTag {
						padding: 3px 5px;
						margin: 0px;
						font-size: 0.75em;
					}

					.slideBox h1 {
						font-size: 2em;
						line-height: 0.8em;
						margin: 10px 0 0 0;
					}

						#slideB h1 {
							font-size: 1.75em;
						}

						#slideC h1 {
							font-size: 1.75em;
						}

					.slideBox h2 {
						font-size: 1em;
						line-height: 0.8em;
						text-transform: uppercase;
						margin: 5px 0 0 0;
					}

					.slideBox a {
						margin: 0;
						font-size: 0.75em;
					}

	.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: 180px;
					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.7em;
							letter-spacing: 1px;
							padding: 0px 5px;
						}

						.cardContent h1 {
							font-size: 1em;
							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;
						}

	.container-HHOFWindow {
		width: 100%;
		padding-top: 26.26%;
	}

		#Window01 {
			background-image: url('../images_ads/HHOF_LegendsLine_Desktop_FR.jpg');
			background-size: 100% auto;
			background-position: 50% 50%;
		}

		#Window02 {
			background-image: url('../images_ads/HHOF_Venue_FR_Desk_alt.jpg');
			background-size: auto 101%;
			background-position: 50% 0%;
		}

		#Window03 {
			background-image: url('../images_ads/LC21_HHOF_1940x500.jpg');
			background-size: auto 101%;
			background-position: 50% 0%;
		}
 

	.container-news {
	}

		.newsBox {
		}

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

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

				.item02 {
				}

				.cardBox02 {
					width: 300px;
					height: 180px;
					margin: 0 10px 10px 0;
				}

					.cardImage02 {
						float: left;
						width: 45%;
						height: 80%;
					}

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 0 0 0 10px;
						float: left;
						width: 55%;
						height: 80%;
					}

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

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

						.cardContent02 p {
							font-size: 0.8em;
							margin: 5px 0 0 0;
							width: 90%;

							display: none;
						}

					.cardLinks02 {
						height: 20%;
						padding: 9px 0px;
					}

						.readMoreLink02 {
							font-size: 0.7em;
						}

						.shareLink02 {
							font-size: 0.7em;
						}

	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 270px !important;
			}

				#photo01 {
					height: 270px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 270px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 270px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 270px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}


				

				.photoCredit {
					padding: 105px;
					font-size: 1em;
					line-height: 1.125em;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}

	.container-newsletter {
	}

		.container-newsletter h2 {
			font-size: 1.5em;
			padding: 0;
			margin: 5px auto 10px auto;
			width: 95%;
		}

		.container-newsletter h4 {
			font-size: 0.9em;
			padding: 0;
			margin: 0 auto 15px auto;
			width: 70%;
		}

		.container-newsletter p {
			font-size: 0.6em;
			padding: 0;
			margin: 0 auto 5px auto;
			width: 85%;
		}

		.container-newsletter form {
			width: 90%;
			margin: auto auto 15px auto; 
		}

			.emailinput {
				width: 80%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

			.newsletterbutton {
				width: 20%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

}

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

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

	.container-carousel {
	}

		.carousel {
			height: 375px !important;
		}

			.carousel-item {
				height: 375px !important;
			}

			#slideA {
				background-size: 100% auto;
			}

				#slideB img {
					width: 180px;
					height: auto;
					top: 35px;
					left: 110px;
				}

				#slideC h1 {
					font-size: 2em;
				}

	.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;
						}

	.container-HHOFWindow {
		width: 100%;
		padding-top: 26.26%;
	}

		/*#Window01 {
			background-size: auto 100%;
			background-position: 0% 0%;
		}*/

		#Window02 {
			background-size: 100% auto;
			background-position: 50% 50%;
		}

	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 320px !important;
			}

				#photo01 {
					height: 320px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 320px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 320px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 320px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}


				

				.photoCredit {
					padding: 125px;
					font-size: 1em;
					line-height: 1.125em;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}

}

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

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

	.container-carousel {
		margin: auto auto auto auto !important;
	}

		.carousel {
			height: 414px !important;
		}

			.carousel-item {
				height: 414px !important;
			}

			#slideB {
			}

				#slideB img {
					width: 200px;
					height: auto;
					top: 40px;
					left: 120px;
				}

			#slideA {
				background-size: 100% auto;

			}

			#slideC {
			}

				.slideBox {
					width: 90vw;
					height: auto;
					padding: 7px 0 0px 20px;
					top: -45vh;
					left: 60px;
				}

					.sliderTag {
						font-size: 0.75em;
						padding: 3px 5px;
						margin: 0px;
					}

					.slideBox h1 {
						font-size: 3em;
						line-height: 0.8em;
						margin: 10px 0 0 0;
					}

						#slideB h1 {
							font-size: 3em;
						}

						#slideC h1 {
							font-size: 2.4em;
						}

					.slideBox h2 {
						font-size: 1.25em;
						line-height: 0.8em;
						text-transform: uppercase;
						margin: 5px 0 0 0;
					}

					.slideBox a {
						margin: 0;
						font-size: 0.75em;
					}

	.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;
						}

	.container-HHOFWindow {
		width: 100%;
		padding-top: 26.26%;
	}

		/*#Window01 {
			background-size: auto 100%;
			background-position: 0% 0%;
		}

		#Window02 {
			background-size: 100% auto;
			background-position: 50% 50%;
			height: 185px;
		}*/

	.container-news {
	}

		.newsBox {
		}

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

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

				.item02 {
				}

				.cardBox02 {
					width: 400px;
					height: 200px;
					margin: 0 10px 10px 0;
				}

					.cardImage02 {
						float: left;
						width: 45%;
						height: 85%;
					}

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 0 0 0 15px;
						float: left;
						width: 55%;
						height: 85%;
					}

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

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

					.cardLinks02 {
						height: 20%;
						padding: 10px 0 0 0;
					}

						.readMoreLink02 {
							font-size: 0.75em;
						}

						.shareLink02 {
							font-size: 0.75em;
						}

	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 360px !important;
			}

				#photo01 {
					height: 360px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 360px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 360px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 360px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}


				

				.photoCredit {
					padding: 155px;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}

	.container-newsletter {
	}

		.container-newsletter h2 {
			font-size: 1.75em;
			padding: 0;
			margin: 5px auto 10px auto;
			width: 85%;
		}

		.container-newsletter h4 {
			font-size: 0.9em;
			padding: 0;
			margin: 0 auto 15px auto;
			width: 90%;
		}

		.container-newsletter p {
			font-size: 0.6em;
			padding: 0;
			margin: 0 auto 5px auto;
			width: 80%;
		}

		.container-newsletter form {
			width: 60%;
			margin: auto auto 15px auto; 
		}

			.emailinput {
				width: 75%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

			.newsletterbutton {
				width: 25%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

}

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

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

	.container-carousel {
		z-index: 500;
		width: 100%;
		margin: auto auto auto auto !important;
	}

		.carousel {
			height: 500px !important;
		}

			.carousel-item {
				height: 500px !important;
			}

			.carousel-control-prev-icon,
			.carousel-control-next-icon {
				width: 20px !important;
				height: 40px !important;
			}

			#slideA {
				 background-size: auto 100%;

			}

			#slideB {
				background-size: auto 100%;
				background-position: 50% 50%;
			}

				#slideB img {
					width: 250px;
					height: auto;
					top: 50px;
					left: 120px;
				}

			#slideD {
			}

			#slideC {
			}

			#slideE {
			}

			#slideF {
			}

				.slideBox {
					width: 90vw;
					height: auto;
					padding: 7px 0 0px 20px;
					top: -200px;
					left: 60px;
				}

						.sliderTag {
							font-size: 1em;
							padding: 3px 5px;
							margin: 0px;
						}

						.slideBox h1 {
							font-size: 3.75em;
							line-height: 0.8em;
							margin: 10px 0 0 0;
						}

							#slideC h1 {
								font-size: 2.55em;
							}

						.slideBox h2 {
							font-size: 1.5em;
							line-height: 0.8em;
							text-transform: uppercase;
							margin: 5px 0 8px 0;
						}

						.slideBox a {
							margin: 0;
							font-size: 1em;
						}

	.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: 300px;
					margin: 0 15px 0 0;
				}

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

					.cardBox:hover > .cardImage {
					}

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

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

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

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

						.readMoreLink {
							font-size: 0.6em;
						}

						.shareLink {
							font-size: 0.6em;
						}
	.container-HHOFWindow {
		width: 100%;
		padding-top: 26.26%;
	}

	.container-news {
	}

		.newsBox {
		}

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

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

				.item02 {
					width: 32.2%;
					margin: 0 1% 0 0;
				}

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

					.cardImage02 {
						float: none;
						width: 100%;
						height: 45%;
					}

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 2px 0 10px 0;
						float: none;
						width: 100%;
						height: 47%;
					}

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

						.cardContent02 h1 {
							font-size: 1em;
							margin: 5px 0 0 0;
							width: 85%;
						}

						.cardContent02 p {
							display: inline-block;
							font-size: 0.7em;
						}

					.cardLinks02 {
						padding: 0px 0px 10px 0;
						height: 8%;
					}

						.readMoreLink02 {
							font-size: 0.6em;
						}

						.shareLink02 {
							font-size: 0.6em;
						}

	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 420px !important;
			}

				#photo01 {
					height: 420px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 420px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 420px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 420px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}


				

				.photoCredit {
					width: 350px;
					height: auto;
					padding: 25px;
					text-align: left;
					font-size: 0.75em;
					line-height: 1em;
					float: left;
					margin: 275px auto auto 30px;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}

	.container-newsletter {
	}

		.container-newsletter h2 {
			font-size: 1.75em;
			padding: 0;
			margin: 5px auto 10px auto;
			width: 85%;
		}

		.container-newsletter h4 {
			font-size: 0.9em;
			padding: 0;
			margin: 0 auto 15px auto;
			width: 90%;
		}

		.container-newsletter p {
			font-size: 0.6em;
			padding: 0;
			margin: 0 auto 5px auto;
			width: 70%;
		}

		.container-newsletter form {
			width: 60%;
			margin: auto auto 15px auto; 
		}

			.emailinput {
				width: 75%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

			.newsletterbutton {
				width: 25%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

}

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

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


    	.container-carousel {
			margin: auto auto auto auto !important;
		}

			.carousel {
				height: 100vh !important;
			}

				.carousel-item {
					height: 100vh !important;
				}

				#slideB {
					background-size: 100% auto;
					background-position: 50% 50%;
				}

					#slideB img {
						width: 200px;
						height: auto;
						top: 30px;
						left: 170px;
					}

				#slideA {
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#slideC {
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#slideD {
				}

				#slideE {
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#slideF {
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#slideG {
					background-size: 100% auto;
					background-position: 50% 50%;
				}


					.slideBox {
						width: 90vw;
						height: auto;
						padding: 7px 0 0px 20px;
						top: -46vh;
						left: 55px;
					}

						.sliderTag {
							font-size: 0.75em;
							padding: 3px 5px;
							margin: 0px;
						}

						.slideBox h1 {
							font-size: 3em;
							line-height: 0.8em;
							margin: 10px 0 0 0;
						}

							#slideB h1 {
								font-size: 3em;
							}

							#slideC h1 {
								font-size: 2.75em;
							}

						.slideBox h2 {
							font-size: 1.25em;
							line-height: 0.8em;
							text-transform: uppercase;
							margin: 5px 0 0 0;
						}

						.slideBox a {
							margin: 0;
							font-size: 0.75em;
						}

	.container-HHOFWindow {
		width: 100%;
		padding-top: 26.26%;
	}

	.container-Gallery {
	}

		.galleryBox {
		}

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

			.photoGallery {
				height: 420px !important;
			}

				#photo01 {
					height: 420px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 420px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 420px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}


				#photo04 {
					height: 420px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				

				.photoCredit {
					padding: 155px;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}
}

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

/*ipad pro portrait*/
@media screen and (min-width: 820px)   {

    #slideA {
        background-size: auto 100%;
    }

    #photo01 {
        background-size: 100% auto;
    }
    #photo02 {
        background-size: 100% auto;
    }
    #photo03 {
        background-size: 100% auto;
    }
    #photo04 {
        background-size: 100% auto;
    }

}

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


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

	.container-carousel {
		z-index: 500;
		width: 100%;
		margin: 6px auto auto auto !important;
		/* setting if alert bar used > padding-top: 230px !important;*/
		padding-top: 173px;

	}

		.carousel {
			height: 500px !important;
		}

			.carousel-item {
				height: 500px !important;
			}

			#slideB {
				background-size: 100% auto;
				background-position: 50% 50%;
			}

				#slideB img {
					width: 250px;
					height: auto;
					top: 50px;
					left: 170px;
				}

			#slideA {
				background-size: 100% auto;
				background-position: 50% 50%;
			}

				#slideB h1 {
					font-size: 3.75em;
				}

			#slideC {
				background-size: 100% auto;
				background-position: 50% 50%;
			}

				#slideC h1 {
					font-size: 3.25em;
				}

			#slideE {
				background-size: 100% auto;
				background-position: 50% 50%;
			}

			#slideF {
				background-size: 100% auto;
				background-position: 50% 50%;
			}


	.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: 350px;
					margin: 0 15px 0 0;
				}

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

					.cardBox:hover > .cardImage {
					}

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

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

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

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

						.readMoreLink {
							font-size: 0.6em;
						}

						.shareLink {
							font-size: 0.6em;
						}

	.container-HHOFWindow {
		width: 100%;
		padding-top: 26.26%;
	}

	.container-news {
	}

		.newsBox {
		}

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

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

				.item02 {
					/*width: 23.8%;*/
					margin: 0 1% 0 0;
				}

				.cardBox02 {
					width: 100%;
					height: 350px;
					margin: 0 15px 0 0;
				}

					.cardImage02 {
						float: none;
						width: 100%;
						height: 50%;
					}

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 3px 0 10px 0;
						float: none;
						width: 100%;
						height: 40%;
					}

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

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

						.cardContent02 p {
							font-size: 0.7em;
						}

					.cardLinks02 {
						padding: 8px 0px;
						height: 10%;
					}

						.readMoreLink02 {
							font-size: 0.6em;
						}

						.shareLink02 {
							font-size: 0.6em;
						}

	.container-Gallery {
	}

		.galleryBox {
			padding: 4%;
		}

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

			.photoGallery {
				height: 550px !important;
			}

				#photo01 {
					height: 550px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 550px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 550px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 550px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}


				

				.photoCredit {
					width: 400px;
					height: auto;
					padding: 25px;
					text-align: left;
					font-size: 0.8em;
					line-height: 1em;
					float: left;
					margin: 400px auto auto 30px;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}


	.container-newsletter {
	}

		.container-newsletter h2 {
			font-size: 2em;
			padding: 0;
			margin: 5px auto 10px auto;
			width: 640px;
		}

		.container-newsletter h4 {
			font-size: 0.9em;
			padding: 0;
			margin: 0 auto 15px auto;
			width: 640px;
		}

		.container-newsletter p {
			font-size: 0.6em;
			padding: 0;
			margin: 0 auto 5px auto;
			width: 500px;
		}

		.container-newsletter form {
			width: 400px;
			margin: auto auto 15px auto; 
		}

			.emailinput {
				width: 75%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

			.newsletterbutton {
				width: 25%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

}

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

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

	.carousel-control-prev-icon,
	.carousel-control-next-icon {
		width: 40px !important;
		height: 80px !important;
	}

	.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;
						}

	.container-HHOFWindow {
		width: 100%;
		padding-top: 26.26%;
	}

	.container-news {
	}

		.newsBox {
		}

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

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

				.item02 {
					margin: 0 1% 0 0;
				}

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

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

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 10px 0px 10px 0px;
						float: none;
						width: 100%;
						height: 35%;
					}

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

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

						.cardContent02 p {
							font-size: 0.7em;
						}

					.cardLinks02 {
						padding: 12px 0px;
						height: 10%;
					}

						.readMoreLink02 {
							font-size: 0.7em;
						}

						.shareLink {
							font-size: 0.7em;
						}

	.container-Gallery {
	}

		.galleryBox {
			padding: 4%;
		}

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

			.photoGallery {
				height: 550px !important;
			}

				#photo01 {
					height: 550px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 550px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 550px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}
				
				#photo04 {
					height: 550px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				

}

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

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

	.container-carousel {
		/* setting if alert bar used > padding-top: 216px !important;*/
		padding-top: 173px;
	}
				
}

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

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

}

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

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

	.container-carousel {
		width: 1280px !important;
		margin: 11px auto auto auto !important;
		/* setting if alert bar not used > padding-top: 173px !important;*/
		padding-top: 212px;
	}

		.carousel {
			height: 600px !important;
		}

			.carousel-item {
				height: 600px !important;
			}

			/*.carousel-control-prev-icon,
			.carousel-control-next-icon {
				width: 60px !important;
				height: 80px !important;
			}*/

			#slideB {
				background-image: url(../images/bruins_carousel_desktop.jpg);
				background-size: 100% auto;
				background-position: 50% 50%;
			}

				#slideB img {
					width: 350px;
					height: auto;
					top: 40px;
					left: 220px;
				}

			#slideA {
				background-size: 100% auto;
				background-position: 50% 50%;
			}

			#slideC {
				background-image: url(../images/carousel_Family-Cup_desktop.jpg);
				background-size: 100% auto;
				background-position: 50% 50%;
			}

			#slideE {
				background-size: 100% auto;
				background-position: 50% 50%;
			}

			#slideF {
				background-size: 100% auto;
				background-position: 50% 50%;
			}
	
			#slideG {
				background-image: url(../images/index_cuponblack_desktop.jpg);
				background-size: 100% auto;
				background-position: 50% 50%;
			}


				.slideBox {
					position: relative;
					width: 1200px;
					height: auto;
					border-left: 3px solid #0468B0;
					padding: 10px 0 0px 30px;
					top: -230px;
					left: 100px;
					margin: 0;
				}

					.sliderTag {
						padding: 3px 8px;
						margin: 0px;
						font-size: 1em;
						letter-spacing: 1px;
					}

					.slideBox h1 {
						font-size: 4em;
						line-height: 0.8em;
						margin: 15px 0 0 0;
					}

						#slideB h1 {
							font-size: 3.5em;
						}

						#slideC h1 {
							font-size: 3.5em;
						}

					.slideBox h2 {
						font-size: 1.5em;
						line-height: 0.85em;
						margin: 5px 0 10px 0;
					}

					.slideBox a {
						margin: 0;
						font-size: 1em;
					}

	.container-HHOFWindow {
		width: 1280px;
		padding-top: 26.26%;
	}

		.spotlightBox {
			width: 1280px;
			margin: auto;
			padding-left: 48px;
			padding-right: 36px;
		}

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

			.wrapper {
				width: 100%;
				margin: auto;
				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: 500px;
					margin: 0 15px 0 0;
				}

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

					.cardBox:hover > .cardImage {
					}

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

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

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

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

						.readMoreLink {
							font-size: 0.7em;
						}

						.shareLink {
							font-size: 0.7em;
						}

	.container-HHOFWindow {
		width: 1280px;
		height: 336px;
		padding-top: 0;
		margin: auto;
	}

	.container-news {
		width: 1280px;
		margin: auto;
	}

		.newsBox {
			padding: 50px 10px 60px 10px;
		}

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

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

				.item02 {
					margin: 0 1% 0 0;
				}

				.cardBox02 {
					width: 100%;
					height: 450px;
					margin: 0 15px 0 0;
				}

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

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 10px 0px 15px 0px;
						float: none;
						width: 100%;
						height: 35%;
					}

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

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

						.cardContent02 p {
							font-size: 0.75em;
						}

					.cardLinks02 {
						padding: 12px 0px;
						height: 10%;
					}

						.readMoreLink02 {
							font-size: 0.7em;
						}

						.shareLink02 {
							font-size: 0.7em;
						}

	.container-Gallery {
	}

		.galleryBox {
			padding: 4%;
		}

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

			.photoGallery {
				height: 700px !important;
			}

				#photo01 {
					height: 700px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 700px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 700px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 700px !important;
					background-size: auto 100%;
					background-position: 50% 50%;
				}


				

				.photoCredit {
					width: 450px;
					height: auto;
					padding: 25px;
					text-align: left;
					font-size: 1em;
					line-height: 1.125em;
					float: left;
					margin: 525px auto auto 60px;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}

	.container-newsletter {
		width: 1280px;
		height: auto;
		padding: 50px;
		margin: auto;
	}

		.container-newsletter h2 {
			font-size: 2em;
			padding: 0;
			margin: 5px auto 10px auto;
			width: 640px;
		}

		.container-newsletter h4 {
			font-size: 0.9em;
			padding: 0;
			margin: 0 auto 15px auto;
			width: 640px;
		}

		.container-newsletter p {
			font-size: 0.6em;
			padding: 0;
			margin: 0 auto 5px auto;
			width: 500px;
		}

		.container-newsletter form {
			width: 400px;
			margin: auto auto 15px auto; 
		}

			.emailinput {
				width: 75%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

			.newsletterbutton {
				width: 25%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

}

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

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

	#Window01, #Window02, #Window03 {
		margin-top: 24px;
	}

	.spotlightBox {
		padding-left: 0;
		padding-right: 0;
	}

	.container-news {
	}

		.newsBox {
			padding: 50px 0px 60px 0px;
		}

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

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

				.item02 {
					width: 32.4%;
					margin: 0 1% 0 0;
				}

				.cardBox02 {
					width: 100%;
					height: 450px;
					margin: 0 15px 0 0;
				}

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

					.cardBox02:hover > .cardImage02 {
					}

					.cardContent02 {
						padding: 10px 0px 15px 0px;
						float: none;
						width: 100%;
						height: 35%;
					}

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

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

						.cardContent02 p {
							font-size: 0.75em;
						}

					.cardLinks02 {
						padding: 12px 0px;
						height: 10%;
					}

						.readMoreLink02 {
							font-size: 0.7em;
						}

						.shareLink02 {
							font-size: 0.7em;
						}

	.container-Gallery {
	}

		.galleryBox {
			width: 1280px;
			margin: auto;
			padding: 50px 0;
		}

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

			.photoGallery {
				height: 700px !important;
			}

				#photo01 {
					height: 700px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo02 {
					height: 700px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo03 {
					height: 700px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}

				#photo04 {
					height: 700px !important;
					background-size: 100% auto;
					background-position: 50% 50%;
				}


				

				.photoCredit {
					width: 450px;
					height: auto;
					padding: 25px;
					text-align: left;
					font-size: 1em;
					line-height: 1.125em;
					float: left;
					margin: 525px auto auto 60px;
				}

					.photoGallery .carousel-inner .carousel-item:hover > .photoCredit {
					}

	.container-newsletter {
		width: 1280px;
		height: auto;
		padding: 50px;
		margin: auto;
	}

		.container-newsletter h2 {
			font-size: 2em;
			padding: 0;
			margin: 5px auto 10px auto;
			width: 640px;
		}

		.container-newsletter h4 {
			font-size: 0.9em;
			padding: 0;
			margin: 0 auto 15px auto;
			width: 640px;
		}

		.container-newsletter p {
			font-size: 0.6em;
			padding: 0;
			margin: 0 auto 5px auto;
			width: 500px;
		}

		.container-newsletter form {
			width: 400px;
			margin: auto auto 15px auto; 
		}

			.emailinput {
				width: 75%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

			.newsletterbutton {
				width: 25%;
				height: 30px;
				padding: 5px;
				font-size: 0.8em;
			}

}

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

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

}

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


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

}

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

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

}

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