
/* Sports Warehouse USA : Home Page: SFNT */

.t-home {
	padding-top: 1rem;
}

/* Home Random Hero Banners */
.hero_home_mobile {
	margin-bottom:24px;
}
.hero_home_desktop {
	display: none;
}
@media screen and (min-width: 768px) {
	.hero_home_mobile {
		display: none;
	}
	.hero_home_desktop {
		display: block;
	}
}

/* Home Header Promo Banners */
.t-home-header {
	margin-bottom:24px;
}
.t-home-header--padding {
	padding-bottom: 1rem;
}
.t-home-header--image-hit {
	flex-grow: 1;
	margin: 0;
	padding: 0;
}
.t-home-header--image-hit:hover {
	background-color:rgba(255,255,255,0.3);
}
.t-home-header--image-bg {
	height: 100%;
	min-height: 222px;
	border-radius: 4px;
	overflow: hidden;
}
.t-home-header--image {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 220px;
}
.t-home-header--content-bg {
	justify-content: flex-start;
	align-items: center;
}
.t-home-header--content {
	background-color:#f1f1f1;
	padding: 1rem 2rem 1rem 2rem;
}



/* Home Brands Slider */
.t-home-brands-bg {
	background: #072661 url('/mm5/themes/shadows/ui/theme-images/bg-stress--2.jpg') center center repeat-y;
}
.t-home-brands {
	padding-bottom:2rem;
	justify-content: center;
}
.t-home-brands--item-container {
	margin-bottom:24px;
}
.t-home-brands--item  {
	text-align: center;
	justify-content: center;
}
.t-home-brands--item a {
	border-bottom:3px solid rgba(255,255,255,0);
}
.t-home-brands--item a:hover {
	border-bottom:3px solid #f76c00;
}
.t-home-brands--item a img {
	width:100%;
	max-width: none;
}
.t-home-brands--item a:hover img {
	opacity: 1;
}


/* Home Inspiration Section - expanded on Mobile. Rollovers for desktop */
.t-home-inspiration {
	padding-bottom:1rem;
}
.t-home-inspiration--item-container {
	margin-bottom:24px;
}
.t-home-inspiration--item {
	position: relative;
	z-index: 1;
	flex-direction: column;
}
.t-home-inspiration--overlay {
	position: relative;
	z-index: 3;
	flex-grow: 1;
	flex-direction: column;
	margin: 0;
	padding: 1rem;
	justify-content: center;
	align-items: center;
	align-content: center;
	color: #ffffff;
	text-decoration: none;
	background-color:#072661;
}
.t-home-inspiration--item:hover .t-home-inspiration--overlay {
	-webkit-opacity: 0.9;
	-ms-opacity: 0.9;
	-o-opacity: 0.9;
	-moz-opacity: 0.9;
	opacity: 0.9;
	text-decoration: none;
	color: #ffffff;
}
.t-home-inspiration--overlay .h2 {
	font-weight: 400;
}
.t-home-inspiration--image-container {
	position: relative;
	z-index: 2;
	flex-grow: 1;
}
.t-home-inspiration--image-container img {
	width:100%;
	max-width:none;
}
@media screen and (min-width: 960px) {
	.t-home-inspiration--overlay {
		-webkit-opacity: 0;
		-ms-opacity: 0;
		-o-opacity: 0;
		-moz-opacity: 0;
		opacity: 0;
		position: absolute;
		height: 100%;
		min-height: 100%;
		top:0;
		left:0;
		z-index: 3;
		flex-grow: 1;
		background-color: rgba(0,0,0,0.5);
	}
}



/* Home Store Reviews / Testimonials */
.t-home-reviews.slick-initialized {
	margin-left:0;
}
.t-home-reviews--item-container {
	margin-bottom:24px;
}
.t-home-reviews--item {
	flex-direction: column;
	justify-content: flex-start;
	line-height: 1.5;
}
/* NOTE: I made this section have cascading tag-based programming so the clients just need to enter the tag and not a bunch of css classes. Making it easy on them. GDCP */
/*  date */
.t-home-reviews h5 {
	/*  date */
	margin: 0;
	font-size: 12px;
	color:#666666;
}
.t-home-reviews h4 {
	/*  title */
	font-size: 20px;
	font-family: 'Roboto Slab', 'Times New Roman', times, serif;
}
.t-home-reviews p {
	/*  content */
	padding-right:1rem;
	hyphens: auto;
}



/* Home Footer */
.t-home-footer {
	padding-top:2rem;
}
.t-home-footer--catalog{
	margin-bottom:24px;
}
.t-home-footer--catalog-pic {
	position: relative;
	z-index: 1;
	max-width: none;
	width:100%;
	height: auto;
}
.t-home-footer--catalog--buttons-area {
}
.t-home-footer--catalog-bg {
	width: 100%;
	flex-direction: column;
	justify-content: flex-end;
	padding-left:1rem;
	padding-right:1rem;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 4px;
	overflow: hidden;
	min-height: 330px;
}
.t-home-footer--catalog-bg p {
	flex-grow: 0;
	flex-basis: auto; 
	font-size: 0.813rem;
}

.t-home-footer--right {
	margin-bottom:24px;
}
.t-home-footer--right--image{
	position: relative;
	z-index: 1;
	max-width: none;
	width:100%;
	height: auto;
}
.t-home-footer--right-bg {
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 4px;
	overflow: hidden;
	min-height: 330px;
}
.t-home-footer--right-gradbg {
	justify-content: flex-end;
	align-items: center;
	padding:1rem;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+25,0069a5+100&0+0,1+100 */
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 25%, rgba(0,105,165,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.18) 25%,rgba(0,105,165,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.18) 25%,rgba(0,105,165,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#0069a5',GradientType=1 ); /* IE6-9 */
}
.t-home-footer--right-text { 
}
.t-home-footer--right-pushpin {
	flex-grow:0; 
	font-size:32px; 
	padding-right:1rem;
}




