// Home styles

// HOME CONTENT
#home-about {
	text-align: center;

	h2 {
		color: $red;
		font-size: 40px;
	}
}

#new-products-slider {
	background-image: url(../img/home/new-products-bg.jpg);

	.new-products-slide {
		color: $red;

		.white-label-text {
			align-items: start;

			span {
				background-color: $red;
				color: $white;
			}
		}
		img {
			margin-top: 84px;
			max-width: 100%;
		}
	}
}

#home-products-pre {

	h3 {
		color: $red;
		font-size: 32px;
		font-weight: $extra;
		text-transform: uppercase;

		span {
			display: block;
			opacity: 0.6;

			&:after {
				content: '';
				display: block;
				background-color: $gray-200;
				border-radius: 2px;
				margin: 16px auto;
				width: 60%; height: 3px;
			}
		}
	}
}

#home-products {
	color: $white;

	#home-products-text {
		background-image: url(../img/home/products-bg-mobile.jpg);
		background-position: center center;
		padding: 64px 12px 48px;

		img {
			margin-bottom: 24px;
			max-width: 120px;
		}
		h1 {
			font-weight: $extra;

			&:after {
				display: none;
			}
		}
	}
	#home-products-boxes {
		padding: 24px 32px;
		position: relative;
		width: 100%;

		.home-products-box {
			box-shadow: 0 1px 4px rgba(0,0,0,0.15);
			color: $white;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 8px 4px;
			padding: 12px;
			text-decoration: none;
			height: 40vw;

			h2 {
				font-size: 16px;
				font-weight: $bold;
				letter-spacing: 0.1em;
				text-align: center;
				text-shadow: 0 0 12px rgba(0,0,0,0.3);
				text-transform: uppercase;
			}
		}
	}
	#home-products-next, #home-products-prev {
		color: $gray-500;
		cursor: pointer;
		font-size: 20px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
	}
	#home-products-prev {
		left: 10px;
	}
	#home-products-next {
		right: 10px;
	}
}

.home-block {
	color: $white;
	padding-top: 48px;
	padding-bottom: 48px;

	h1 {
		font-size: 32px;
	}
	&.bg-fade-white {
		color: $black;
	}
	&.bg-fade-right {
		text-align: right;
	}
}
#home-our-founders {
	background-image: url(../img/home/our-founders-bg.jpg);
	background-position: center right;
}
#home-affiliate-opportunities {
	background-image: url(../img/home/affiliate-opportunity-bg.jpg);
}