
/* --- MOBILE STYLES ---*/
@media only screen and (max-width: 800px)
{
	/*--- Greeting ---*/
	#greeting
	{
		padding-bottom: 80%;
	}

	/*-- Health and Wellness --*/
	#greeting.healthAndWellnessGreeting
	{
		margin-bottom: 130px;
	}
	#greeting.healthAndWellnessGreeting #greetingContent
	{
		top: 299px;
		bottom: auto;
		left: 0px;
		max-width: 100%;
		background-color: rgba(240, 246, 246, 0.4);
		padding: 8px;
	}
	#greeting.healthAndWellnessGreeting #greetingContent h1
	{
		font-size: 3rem;
	}
	#greetingMessage 
	{
		padding-top: 180px;
	}
	#greetingMessage h2
	{
		font-size: 2.2rem;
	}
	/*-- Biote --*/
	#greeting.bioteGreeting #greetingContent
	{
		bottom: auto;
		top: 300px;
		left: 0px;
		max-width: 100%;
		padding: 8px;
	}
	#greetingContent
	{
		bottom: -420px;
		left: 0px;
	}
	.spacer 
	{
		height: 400px;
	}
	#whatHandW
	{		
		padding: 280px 12px 0;
	}
	#whatHandW .content .textBlock
	{
		display: inline-block;
		vertical-align: middle;
		position: relative;
		max-width: 600px;
		min-width: 398px;
	}
	.sideBy
	{
		flex-direction: column;
		align-items: flex-start;
		padding-left: 0px;
	}
	.textBlock
	{
		padding-left: 20px;
	}
	#whoHandW .content .sideBy .imageBlock
	{
		max-width: 90%;
		margin: auto;
	}
	#whoHandW .content .sideBy .imageBlock img
	{
		max-width: 100%;
		margin: auto;
	}
	#whoHandW .content .sideBy .textBlock h3
	{
		font-size: clamp(3.0rem, 6vw, 4.0rem);
	}
	#whoHandW .content .sideBy .textBlock ul li
	{	
		padding: 6px 0px;
		text-align: left;
		list-style: disc;
	}
	.centerImage 
	{
		max-width: 100%;
	}
	.question p 
	{
		max-width: 310px;
	}
	#bioteSeal
	{
		max-width: 160px;
		margin: auto;
	}
	.content
	{
		display: block;
		max-width: 1400px;
		margin-inline: auto;
		padding: 6rem 0;
		color: #374b66;
		line-height: 1.612;
	}
	.content h2
	{
		display: inline-block;
		font-family: kiona;
		font-size: 8vw;
		letter-spacing: 2px;
		background: linear-gradient(135deg, #374b66, #f3d5d7);
		background-clip: border-box;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-bottom: 10px;
	}	
	
	#nutraceuticals .textBlock
	{
		padding: 12px;
	}
	/*--- Product Adjacent Styles ---*/
	#productsWrapper
	{
		position: Relative; 
		display: block;
		max-width: 100%;
		margin: 80px auto 100px auto;
	}
	#productsWrapper .products
	{
		position: relative;
		display: block;
		margin-bottom: 60px;
		text-align: left;
	}
	#productsWrapper .products:nth-child(even)
	{
		background-color: #717684;
		color: #fff;
		padding: 40px 0;
	}
	.productLogo
	{
		max-width: 140px;
		text-align: left;
		margin: 0 0 0 10px;
	}
	.productLogo img
	{
		max-width: 100%;;
	}
	.productsBlurb
	{
		max-width: 100%;
		padding: 12px;
	}
	.productsBlurb p
	{
		font-size: 2rem;
		text-align: left;
	}
	.productsLinks
	{
		max-width: 100%;
		margin: 0;
	}
	.productsLinks .buttonPush
	{
		display: block;
	}

	.products:nth-child(odd) .productsLinks:hover .collage
	{
		filter: drop-shadow( 3px 3px 10px rgba(113, 118, 132, 0.6) );
	}
	.products:nth-child(even) .productsLinks:hover .collage
	{
		filter: drop-shadow( 3px 3px 10px rgba(243, 213, 215, 0.6) );
	}
	.collage
	{
		max-width: 100%;
		max-height: 300px;
		display: inline-block;
		vertical-align: middle;
		
		margin: 0 0px;
		
		border-top-right-radius: 80px;
		border-bottom-left-radius: 80px;
		transition: all .5s ease;
	}
	.products:nth-child(even) .collage 
	{	
		border-top-right-radius: 0px;
		border-bottom-left-radius: 0px;
		border-top-left-radius: 80px;
		border-bottom-right-radius: 80px;
	}



}/*--- up to 800px ---*/
/* --- MOBILE STYLES ---*/
@media only screen and (min-width: 801px) and (max-width: 1600px)
{
	nav img
	{
		min-width: 200px;
	}
	#greetingContent
	{
		bottom: -200px;
		z-index: 12;
	}
	#greetingMessage
	{
		padding-top: 220px;
	}
	.content
	{
		padding-top: 320px;
	}
	.content h2
	{
		font-size: 4rem;
	}
	.content .centerImage
	{
		max-width: 100%;
	}
	#whoHandW .content .sideBy .textBlock h3
	{
		font-size: 4rem;
	}
	.textBlock ul
	{
		padding-left: 16px;
	}
}