@charset "utf-8";

/*
================================
Tablet Styles: 481px and greater
================================
*/
@media only screen and (min-width: 481px) and (max-width: 1023px) {
	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;
		margin: auto;
		margin: auto;
		padding: auto;
		padding: auto;
		width: 100%;
	}

	body {
		/* border: solid 5px green; */
		background-color: rgb(73, 58, 49, 0.8);
		background-size: cover;
		color: white;
		font-size: 1.5rem;
		height: auto;
		margin: auto auto;
		margin: auto;

		max-width: 100%;
		min-width: 100%;
		position: relative;
		z-index: 1;
	}
	/* Navigation Menu aka Header Menus*/
	/* ---------------------------------------------------- */

	ul.horizontal-mainmenu li a {
		max-width: 100%;
		border-radius: 0.125rem;
		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;
		color: white;
		display: block;
		margin: auto;
		min-height: 100%;
		position: relative;
		text-align: center !important;
		text-transform: uppercase;
	}

	a.horizontal-mainmenu-dropdown,
	a#menuButton.horizontal-mainmenu-dropdown {
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
		position: relative;
		/* z-index: 20; */
		display: block;
	}

	ul.horizontal-mainmenu-dropdown-dropdown-contents {
		overflow: hidden;
		background-color: rgb(73, 58, 49);
		border: none;
		box-shadow: none;
		display: none;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 2rem;
		max-width: 100%;
		min-height: 100%;
		min-width: 100%;
		position: absolute;
		z-index: 10;
		top: 100%;
	}

	ul.horizontal-mainmenu-dropdown-dropdown-contents.show {
		display: flex;
		position: absolute;
		z-index: 10;
	}

	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, 0.5);

		display: block;
		font-size: 2rem;
		max-width: 100%;
		min-height: 100%;
		padding: 1rem 0rem 1rem 0rem;

		text-align: center;
	}

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

	ul.horizontal-mainmenu {
		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 li {
		align-items: center;
		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;
		display: flex;
		flex-direction: column;
		font-size: 2rem;
		justify-content: center;
		line-height: normal;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		margin: 0;
		text-align: center;
	}

	a.horizontal-mainmenu-dropdown {
		color: white;
		font-size: 2rem;
		line-height: normal;
		max-width: 100%;
		min-height: 100%;
		padding: 2rem 0rem 2rem 0rem;
		text-align: center;
		display: block;

		z-index: 5;
	}

	ul.horizontal-mainmenu-dropdown-dropdown-contents li {
		align-items: center;
		display: flex;
		flex-direction: column;
		font-size: 2rem;
		line-height: normal;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		padding: none;
		text-align: center;
	}

	a.horizontal-mainmenu-dropdown {
		text-align: center;
		max-width: 100%;
		min-height: 100%;
	}

	ul.horizontal-mainmenu-dropdown-dropdown-contents li {
		display: block;
		min-width: 100%;
		max-width: 100%;
		min-height: 100%;
	}

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

	ul.horizontal-mainmenu li a {
		max-width: 100%;
		min-height: 100%;
		min-height: 100%;
		font-size: 2rem;
		padding: 2rem 0rem;
	}

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

		display: block;
	}

	a.horizontal-mainmenu-dropdown:link,
	a#menuButton {
		background-color: rgb(73, 58, 49, 0.5);
		color: white;
		padding: none;
		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: none;

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

	section.flexContainerBody-BarSoap article div h2 {
		flex-grow: 0;
		padding: 0;
		padding: 2rem;
		font-size: 2rem;
		text-align: center;
	}

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

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

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

	section.flexContainerBody-LiquidSoap article {
		display: block;
		flex-grow: 0;
		position: relative;
		min-width: 100%;
		height: auto;
		padding: 0;
		margin-top: 5rem;
		text-align: center;
	}

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

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

	/* HomePage */

	div.text-item > p {
		margin: 1rem;
		margin-top: 0px;
		margin-bottom: 0px;
		line-height: 3rem;
		max-width: 100%;
		min-height: 100%;
	}

	section.flex-container-body-02 > div > h1 {
		-webkit-text-stroke-width: 1.5px;
		-webkit-text-stroke-color: white;

		font-size: 4rem;
		font-family: TwoShotsCleanFull;
		font-weight: normal;
		line-height: normal;
		color: #ffffff;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
		letter-spacing: 5px; /* Adjust the value as needed */
		margin-bottom: 2rem;
		max-width: 100%;
		min-height: 100%;
	}
	div.figure-container-01 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		justify-content: center;
	}
	div.figure-container-01 > div.text-item {
		text-align: left;
		max-width: 100%;
		min-height: 100%;
	}

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

	div.figure-container-01 div.image-item {
		max-width: 100%;
		min-height: 100%;
		margin: auto;
		padding: auto;
	}

	div.figure-container-01 div.image-item figure a img {
		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);
		position: relative;
		clear: both;
		max-width: 100%;
		min-height: 100%;
		margin: auto;
		padding: none;
		border-radius: 1em;
		display: block;
	}

	div.figure-caption > figcaption {
		clear: both;
		display: block;
		position: relative;
		max-width: 100%;
		min-height: 100%;
		text-align: center;
		margin: auto;
		padding: 2rem;
		background-color: rgba(88, 75, 75);
		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);
		border-radius: 0.5em;
		text-align: center;
		margin-top: 0.5rem;
		margin-bottom: 2rem;
	}

	/* ------------------------------- */
	div.figure-container-02 {
		display: flex;
		flex-direction: column;

		justify-content: space-between;
		align-items: center;
	}
	div.figure-container-02 > div.text-item-02 {
		order: 2;
		flex-grow: 1;
		text-align: left;
	}

	div.figure-container-02 div.text-item-02 p {
		min-height: 100%;
		margin-left: 2rem;
		line-height: 3rem;
		text-align: left;
	}

	div.image-item-02 figure img {
		order: 1;
		max-width: 100%;
		min-height: 100%;
		border-radius: 2rem;
	}

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

	div.text-item-footer > p {
		font-size: 1.752rem;
		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: 15vw;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0.25rem;
		padding: 0;
		max-width: 100%;
		min-height: 100%;
		padding: none;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
		z-index: 3;
	}

	section.flex-container-body-01 > div.slogan h2 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.5px;
		color: #b43b07;
		font-family: TwoShotsCleanFull;
		font-size: 8vw;
		font-weight: normal;
		letter-spacing: 0.125rem;
		line-height: normal;
		margin-bottom: 5rem;
		max-width: 100%;
		min-height: 100%;
		padding: none;
		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: 10vw;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0.125rem;
		max-width: 100%;
		min-height: 100%;

		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
		margin-bottom: 2rem;
		padding: none;
	}

	/* 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;
		height: auto;
		margin: auto;
		padding: 0;
		max-width: 30%;
		padding: none;
	}

	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;
		margin: auto;
		max-width: 65%;
		min-height: 100%;
	}

	/* Product list */

	section.flex-container-body-01 > div {
		margin-top: 3rem;
	}

	div.grid-item {
		max-width: 100%;
		min-height: 100%;
	}

	div.container {
		z-index: 2;
		margin: 2rem;
	}

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

	div.grid-item {
		display: block;
		font-size: 1.5rem;
		max-width: 100%;
		min-height: 100%;
		padding: 0;
		padding: none;
		text-align: center;
	}

	div.grid-item h2 {
		-webkit-text-stroke-color: white;
		-webkit-text-stroke-width: 0.5px;
		color: white;
		font-family: TwoShotsCleanFull;
		font-size: 6vw;
		font-weight: normal;
		line-height: normal;
		max-width: 100%;
		max-height: 100%;
		padding: none;
		text-align: center;
		text-shadow: 5px 5px 10px #201f1f;
		position: relative;
		margin-bottom: 1rem;
	}

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