@charset "utf-8";
/* scott changes */

/* =================================
Desktop Styles: 769px and greater
=================================
*/
@media only screen and (min-width: 1024px) {
	* {
		padding: 0;
		padding: 0;
	}
	html {
		background-image: url("../SOAP_PICS/HTML_PICS/background.jpeg");
		background-position: center;
		background-position: center;
		display: flex;
		font-family: Verdana, Geneva, sans-serif;
		font-size: 15px;
		height: auto;
		width: 100%;
	}
	/* HI SCOTT */
	body {
		background-color: rgb(73, 58, 49, 0.8);
		background-size: cover;
		/* border: solid 10px rgb(0, 255, 242); */
		color: white;
		font-size: 1.5rem;
		min-height: 100vh;
		max-width: 1500px;
		min-width: 900px;
		position: relative;
		z-index: 1;
		background-attachment: fixed;
	}

	/* Navigation Menu aka Header Menus*/
	/* ---------------------------------------------------- */

	ul.horizontal-mainmenu {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	ul.horizontal-mainmenu li {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	ul.horizontal-mainmenu li a {
		box-shadow:
			rgba(50, 50, 93, 0.5) 0px 50px 100px -20px,
			rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
			rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
	}

	ul.horizontal-mainmenu li a {
		font-size: 3rem;
	}
	ul.horizontal-mainmenu li {
		box-shadow:
			rgba(11, 11, 11, 0.5) 0px 50px 100px -20px,
			rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
			rgba(31, 31, 32, 0.35) 0px -2px 6px 0px inset;
		padding: 2rem;
		padding: 0;
		line-height: normal;
		max-width: 100%;
		min-height: 100%;
	}

	a.horizontal-mainmenu-dropdown a:link {
		background-color: rgb(73, 58, 49, 0.5);
		color: white;
		font-size: 3rem;
		padding-bottom: 2rem;
		padding-top: 2rem;
		text-align: center;
		max-width: 100%;
		min-height: 100%;
	}

	ul.horizontal-mainmenu-dropdown-dropdown-contents {
		background-color: rgb(73, 58, 49);
		box-shadow: none;
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
		position: absolute;
		margin: 0;
	}

	ul.horizontal-mainmenu-dropdown-dropdown-contents li {
		background-color: rgb(73, 58, 49);
		border-radius: 0.5rem;
		display: block;
		max-width: 100%;
		min-height: 100%;
	}

	ul.horizontal-mainmenu-dropdown-dropdown-contents li a {
		background-color: rgb(73, 58, 49);
		display: block;
		max-width: 100%;
		min-height: 100%;
		position: relative;
		font-size: 3rem;
		padding: 1rem 0rem;
		box-shadow:
			rgba(50, 50, 93, 0.5) 0px 50px 100px -20px,
			rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
			rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
	}
	a.horizontal-mainmenu-dropdown:hover + ul.horizontal-mainmenu-dropdown-dropdown-contents {
		display: flex;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
		border: none;
		color: white;
		font-size: 3rem;
		line-height: normal;
	}
	a.horizontal-mainmenu-dropdown:hover + ul.horizontal-mainmenu-dropdown-dropdown-contents,
	ul.horizontal-mainmenu-dropdown-dropdown-contents:hover {
		display: flex;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
		border: none;
		color: white;
		font-size: 3rem;
		line-height: normal;
	}

	ul.horizontal-mainmenu li {
		display: block;
		z-index: 2;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
	}

	ul.horizontal-mainmenu li a.horizontal-mainmenu-dropdown {
		display: block;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
		font-size: 3rem;
		padding: 1rem 0rem;
		/* max-height: 100%; */
	}

	nav.horizontal {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		background-color: none;
		text-align: center;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
	}
	ul.horizontal-mainmenu {
		max-width: 100%;
		min-height: 100%;
	}
	nav.horizontal ul.horizontal-mainmenu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		flex-direction: row;
		max-width: 100%;
		min-height: 100%;
		text-align: center;
		min-width: 100%;
		padding: 0;
	}

	nav.horizontal ul.horizontal-mainmenu li {
		display: block;
		min-width: 20%;
		max-width: 20%;
		min-height: 100%;
		max-height: 100%;
		margin: 0;
		padding: 0;
	}
	a.horizontal-mainmenu-dropdown {
		text-align: center;
		font-size: 3vw;
		max-width: 100%;
		min-height: 100%;
	}

	nav.horizontal ul.horizontal-mainmenu ul.horizontal-mainmenu-dropdown-dropdown-contents li {
		display: block;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
	}
	ul.horizontal-mainmenu li {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		max-width: 100%;
		min-height: 100%;
	}

	ul.horizontal-mainmenu-dropdown a:hover {
		color: #b43b07;
		line-height: normal;
		max-width: 100%;
		min-height: 100%;
		padding: 2rem;
		text-align: center;
	}
	/* a#menuButton.horizontal-mainmenu-dropdown  */
	a.horizontal-mainmenu-dropdown:link {
		background-color: rgb(73, 58, 49, 0.5);
		color: white;
		font-size: 2.5vw;
		padding: 0;
		text-align: center;
		z-index: 2;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;

		display: block;
	}

	/* Web form webpage  */
	div.formGroup {
		width: 75%;
	}

	/* ---------------------------------------------------- */
	/* Bar Soap HTML PAGE */
	section.flexContainerBody-BarSoap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-grow: 0;
		padding: 0;
		padding: 0;
		line-height: normal;
	}
	section.flexContainerBody-BarSoap article {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	section.flexContainerBody-BarSoap article div a img {
		border-radius: 2.5rem;
		box-shadow:
			0 10px 15px 0 rgba(0, 0, 0, 0.2),
			0 6px 20px 0 rgba(0, 0, 0, 0.19);
		max-width: 100%;
		min-height: 100%;
	}

	section.flexContainerBody-BarSoap article div h2 {
		flex-grow: 0;
		font-size: 3vw;
		padding: 0;
		padding: 2rem;
		text-align: center;
		max-width: 100%;
		min-height: 100%;
	}

	div.flexContainerBody-BarSoap-Article h2 {
		font-size: 0.5rem;
	}
	div.flexContainerBody-BarSoap-Article h2 {
		font-size: 1rem;
	}

	/* Liquid Soap */

	section.flexContainerBody-LiquidSoap {
		align-items: center;
		display: flex;
		flex-direction: column;
		flex-grow: 0;
		flex-wrap: wrap;
		justify-content: center;
		line-height: normal;
		padding: 0;
		padding: 0;
	}

	section.flexContainerBody-LiquidSoap article {
		display: flex;
		flex-grow: 0;
		justify-content: center;
		text-align: center;
	}

	section.flexContainerBody-LiquidSoap article {
		display: block;
		flex-grow: 0;

		margin-top: 5rem;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		position: relative;
		text-align: center;
	}

	section.flexContainerBody-LiquidSoap article div a img {
		border-radius: 2.5rem;
		flex-grow: 0;
		min-height: 100%;
		margin-top: 5rem;
		max-width: 100%;
		text-align: center;
	}

	section.flexContainerBody-LiquidSoap article div h2 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 1.5px;
		color: #ffffff;
		font-family: TwoShotsCleanFull;
		font-size: 8rem;
		font-weight: normal;
		letter-spacing: 5px;
		line-height: normal;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}
	section.flexContainerBody-LiquidSoap article div {
		margin-top: 5rem;
	}

	/* HomePage */

	div.text-item > p {
		line-height: 5rem;
		margin-bottom: 0px;
		margin-top: 0px;
		font-size: 1.5rem;
	}

	section.flex-container-body-02 > div > h1 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 1.5px;
		color: #ffffff;
		font-family: TwoShotsCleanFull;
		font-size: 6rem;
		font-weight: normal;
		letter-spacing: 5px; /* Adjust the value as needed */
		line-height: normal;
		margin-bottom: 2rem;
		margin-top: 5rem;
		max-width: 100%;
		min-height: 100%;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}

	div.figure-container-01 {
		align-items: stretch;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	div.figure-container-01 > div.text-item {
		flex-grow: 1;
		text-align: left;
	}

	div.figure-container-01 div.text-item p {
		line-height: 5rem;
		margin: 1rem;
		max-width: 100%;
		min-height: 100%;
		text-align: left;
	}

	div.figure-container-01 div.image-item figure {
		display: inline-block;
		flex-shrink: 5;
		min-width: 40rem;
		max-width: 100%;
		min-height: 100%;
	}
	div.figure-container-01 div.image-item figure a img {
		border-radius: 1em;
		box-shadow:
			0px 50px 100px -20px rgba(50, 50, 93, 0.25),
			0px 30px 60px -30px rgba(0, 0, 0, 0.3),
			inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35);
		clear: both;
		float: right;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		position: relative;
		z-index: 5;
	}

	div.figure-caption > figcaption {
		position: relative;
		clear: both;
		padding: 0;
		padding: 25px;
		background-color: rgba(88, 75, 75, 0.5); /* Optional: Add a background color */
		border-radius: 0.5em;
		text-align: center;
	}

	/* ------------------------------- */
	div.figure-container-02 {
		align-items: stretch;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	div.text-item-02 {
		order: 2;
		text-align: left;

		max-width: 100%;
		min-height: 100;

		padding: 0;

		max-width: 60%;
		min-height: 100%;
		padding: 0;
	}

	div.text-item-02 p {
		min-height: 100%;
		line-height: 5rem;
		padding: 0;
		max-width: 100%;
		text-align: left;
		font-size: 1.5rem;
		margin-left: 2rem;
	}

	div.image-item-02 figure {
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
	}

	div.figure-container-02 div.image-item-02 figure div a img {
		border-radius: 1em;
		box-shadow:
			0px 50px 100px -20px rgba(50, 50, 93, 0.25),
			0px 30px 60px -30px rgba(0, 0, 0, 0.3),
			inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35);
		clear: both;

		max-width: 100%;
		min-height: 100%;
		min-width: 50%;
		padding: 0;
		position: relative;
	}

	div.figure-caption figcaption {
		background-color: rgba(88, 75, 75, 0.5); /* Optional: Add a background color */
		border-radius: 0.5em;
		clear: both;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		padding: 2rem;
		position: relative;
		text-align: center;
		margin-top: 1rem;
		box-shadow:
			0px 50px 100px -20px rgba(50, 50, 93, 0.25),
			0px 30px 60px -30px rgba(0, 0, 0, 0.3),
			inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35);
	}

	div.figure-container-01 .page-title > div > h1 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.8px;
		color: #b43b07;
		font-family: TwoShotsCleanFull;
		font-size: 12em;
		font-weight: normal;
		line-height: normal;
		margin: auto;
		max-width: 100%;
		min-height: 100%;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}
	div.figure-container-01 div.text-item h1 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.3px;
		color: #b43b07;
		font-family: TwoShotsCleanFull;
		font-size: 10rem;
		font-weight: normal;
		line-height: normal;
		max-width: 100%;
		min-height: 100%;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}
	.page-title > div > h1 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.8px;
		color: #b43b07;
		font-family: TwoShotsCleanFull;
		font-size: 12em;
		font-weight: normal;
		line-height: normal;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}

	div.text-item-footer > p {
		font-size: 2rem;
		text-align: center;
	}

	/* ------------------------Product Page --------------------*/

	section.flex-container-body-01 > div > h1 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.8px;
		color: #b43b07;
		font-family: TwoShotsCleanFull;
		font-size: 12rem;
		font-weight: normal;
		line-height: 10rem;
		line-height: normal;
		margin-top: 5rem;
		max-width: 100%;
		min-height: 100%;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
		z-index: 10;
	}

	section.flex-container-body-01 div h2 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.8px;
		color: #ffffff;
		font-family: TwoShotsCleanFull;
		font-size: 7rem;
		font-weight: normal;
		line-height: 10rem;
		line-height: normal;
		line-height: normal;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}

	section.flex-container-body-01 > div.slogan h2 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.5px;
		color: #b43b07;
		/* color: white; */
		font-family: TwoShotsCleanFull;
		font-size: 6rem;
		font-weight: normal;
		line-height: normal;
		line-height: normal;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}

	section.flex-container-body-01 div h2 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.5px;
		/* color: #b43b07; */
		color: white;
		font-family: TwoShotsCleanFull;
		font-size: 10rem;
		font-weight: normal;
		line-height: normal;
		margin-bottom: 2rem;
		margin-top: 5rem;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}

	/* The scrublands logo image */
	section.flex-container-body-01 div a img {
		/* border-radius: 1.5rem; */
		/* box-shadow: 0px 50px 100px -20px rgba(50, 50, 93, 0.25), 0px 30px 60px -30px rgba(0, 0, 0, 0.3), inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35); */
		display: block;
		line-height: 2rem;
		line-height: normal;
		padding: 0;
		max-width: 25%;
		min-height: 25%;
		margin: auto;
	}

	section.flex-container-body-01 div.product-page-image > a > img {
		border-radius: 1.5rem;
		box-shadow:
			0px 50px 100px -20px rgba(50, 50, 93, 0.25),
			0px 30px 60px -30px rgba(0, 0, 0, 0.3),
			inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35);
		display: block;
		padding: 0;
		max-width: 65%;
		min-height: 100%;
		padding: 0;
	}

	/* Product list */

	section.flex-container-body-01 > div {
		line-height: 2rem;
		margin-top: 2rem;
		padding: 0;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
	}

	/* Bar Soap Page */

	div.container div.grid-container-bar-soap {
		display: grid;
		grid-template-columns: auto auto auto;
		padding: 0;
		gap: 1rem;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		padding: 0;
	}

	div.grid-item {
		padding: 0;
		min-height: 25rem;
		max-width: 100%;
		min-height: 100%;

		text-align: center;
	}

	div.container {
		z-index: 2;
		margin: 2rem;
		max-width: 100%;
		min-height: 100%;
	}

	div.grid-item div h2 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.5px;
		/* color: #b43b07; */
		color: white;
		font-family: TwoShotsCleanFull;
		font-size: 5rem;
		font-weight: normal;
		line-height: normal;
		margin-bottom: 1rem;
		margin-top: 4rem;
		margin-top: none;
		max-width: 100%;
		max-width: 100%;
		min-height: 100%;
		min-height: 100%;
		padding: 0;
		padding: 0;
		text-align: center;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
	}

	div.grid-item a img {
		border-radius: 2.5rem;
		box-shadow:
			0 29px 52px rgba(0, 0, 0, 0.4),
			0 25px 16px rgba(0, 0, 0, 0.2);
		padding: 0;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
	}
}