#global-header {
	position: relative;
}

.product-nav {
	position: sticky;
	top: 0;
	z-index: 99;
	border-bottom: 1px solid rgb(150, 150, 150);
	background-color: var(--white);
}

main {
	color: var(--white);
	background-color: var(--black);

}

.product-nav content {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	padding: .5rem 0;
}

.product-nav content h3 {
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.product-nav content nav {
	display: flex;
	justify-content: space-between
}

main>section {
	width: 100%;
	max-width: 100%;
	padding: 0;
	overflow-x: hidden;
	background-repeat: no-repeat;
}

.share-community article,
.features-video article,
.share-community>div,
.features-video>div {
	display: block;
}

.hero article,
.hero>div,
section article,
section>div {
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
}

section h2,
section p {
	margin-bottom: 1rem;
}

section h3 {
	margin-bottom: .1rem;
}

/* Start Hero Section */

.hero {
	margin-bottom: 4rem;
}

.hero>article>div,
.hero>div>div {
	margin-bottom: 2rem;
}

.hero>article>div:last-of-type>*,
.hero>div>div:last-of-type>* {
	margin: 1rem 0;
}

.hero .slider {
	margin: 0 auto 3rem auto;
}

.prodColors,
.prod-colors {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.prodColors>*,
.prod-colors>* {
	margin-right: 1em;
}

.prodColors>div,
.prod-colors>div {
	width: 1em;
	height: 1em;
	border: .15em solid rgb(0, 0, 0);
	border-radius: 50%;
}

.prodColors .yellow,
.prod-colors .yellow {
	background-color: var(--yellow);
}

.prodColors .midnightBlue,
.prod-colors .midnight-blue {
	background-color: var(--midnightBlue);
}

.prodColors .brightBlue,
.prod-colors .bright-blue {
	background-color: var(--brightBlue);
}

.prodColors .brightRed,
.prod-colors .bright-red {
	background-color: var(--brightRed);
}

.prodColors .darkRed,
.prod-colors .dark-red {
	background-color: var(--darkRed);
}

.prodColors .silver,
.prod-colors .silver {
	background-color: var(--silver);
}

.prodColors .white,
.prod-colors .white {
	background-color: var(--white);
}

.prodColors .wpz2Yellow,
.prod-colors .wpz2-yellow {
	background-color: var(--wpz2Yellow);
}

.prodColors .wpz2Blue,
.prod-colors .wpz2-blue {
	background-color: var(--wpz2Blue);
}

.prodColors .wpz2Red,
.prod-colors .wpz2-red {
	background-color: var(--wpz2Red);
}

.prodColors .black,
.prod-colors .black {
	background-color: var(--black);
	border-width: .05em;
	border-color: rgb(150, 150, 150);
}
.prodColors .brown,
.prod-colors .brown{
	background-color: var(--brown);
}
.prodColors .tan,
.prod-colors .tan{
	background-color: var(--tan);
}
.price span {
	font-size: 50%;
}

.retailers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.retailers li {
	margin: 1rem;
}

.retailers li a {
	display: block;
}

/* End Hero Section */

/* Start Details Section */

.details,
.details nav {
	margin-bottom: 3rem;
	padding: 2rem 0;
	border-width: 1px 0 1px 0;
	border-style: solid;
	border-color: var(--white);
}

.details {
	margin-bottom: 0;
	padding-bottom: 3rem;
	border-width: 0 0 1px 0;
}

.details article,
.details>div {
	display: block;
	text-align: left;
}

.details nav ul {
	display: block;
}

.details nav ul li {
	/*width:fit-content;*/
	margin: .5rem auto;
	padding: .5rem;
	display: block;
	font-size: 1.5rem;
	cursor: pointer;
}

.details nav ul li::before {
	content: '> ';
}

.details content>div,
.details>div>div>div {
	height: 0;
	overflow: hidden;
}

/*.hero .details content > div:first-of-type{display:block;}*/
.details content>div.active,
.details div.active {
	height: auto;
}

.details .feature-text {
	margin-bottom: 3rem;
}

.details .feature-text li {
	margin: .5rem 0 1.5rem 0;
	font-size: 1.5rem;
}

.details .feature-icons {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.sd-cards ul li {
	margin: 4rem 0;

}

.sd-cards ul li div img {
	width: auto;
	align-self: flex-end;
}

.sd-cards h4 {
	margin: .75rem 0;
	font-weight: 300;
	color: var(--white);
	line-height: 150%;
	opacity: .6;
}

.sd-cards h4:first-of-type {
	margin-top: 2.5rem;
}

.sd-cards h4.safe {
	font-weight: 500;
	color: var(--green);
	opacity: 1;
}

.sd-cards h4.safe::before {
	content: "\2713 \00A0";
}

.sd-cards h4:not(.safe)::before {
	content: "\20E0 \00A0";
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

	/* styles for screens in portrait orientation that are smaller than an iPad */
	.hero .slider {
		width: 70%;
	}

	.details .feature-icons {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 1.5rem;
	}
}

.specs div h4 {
	margin-bottom: 1rem;
}

.specs div p {
	margin-bottom: 3rem;
}

.press-reviews p {
	margin: 1.5rem 0 3rem 0;
}

.press-reviews a,
.press-reviews a:hover,
.press-reviews a:active,
.press-reviews a:visited {
	color: var(--white);
}

/* End Details Section */

/* Start default Panels */

section header {
	height: 45vw;
	overflow: hidden;
}

section article,
section>div {
	width: 100%;
	max-width: 100%;
	padding: 0;
	align-items: center;
	text-align: center;
}

section article>div,
section>div>div {
	width: 100%;
	margin: 0 auto;
	padding: 3rem 0;

}

section img {
	width: 100%;
	height: auto;
}

/* End default Panels */

.in-the-box,
.user-photos,
.share-community {
	padding: 2rem 0;
	text-align: center;
}

.in-the-box {
	color: var(--black);
	background-color: var(--white);
}

.in-the-box article,
.in-the-box>div {
	display: block;

}

.in-the-box article div,
.in-the-box>div>div {
	width: 90%;
}

.in-the-box .video-container iframe,
.features-video .video-container iframe {
	width: 100%;
	aspect-ratio: 16/9;

}

.user-photos h2 {
	margin-bottom: 2rem;
}

.share-community {
	color: var(--black);
	background-color: var(--white);
}

.share-community .social-icons a {
	margin: 0 1rem;
}

.share-community img {
	width: auto;
	display: inline;
}


@media (min-width:800px) {
	.product-nav content {
		width: 95%;
		padding: .25rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-nav content h3 {
		font-size: 1rem;
		margin-bottom: 0;
	}

	.product-nav content nav {
		align-items: center;
	}

	.product-nav content nav div {
		padding: .25rem .85rem;
	}

	.product-nav content nav div:last-of-type {
		color: var(--white);
		background-color: var(--black);
	}

	.feature article img,
	.feature>div img {
		width: 80%;
		margin: 0 auto;
		display: block;
	}

	section article,
	section>div {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}

}

@media screen and (orientation: landscape) and (min-width:800px) {

	main section {
		min-height: 56vh;
		padding: 15% 0;
	}

	.hero .slider {
		width: 60%;
	}


	.details nav ul {
		display: flex;
	}

	.details nav ul li::before {
		content: "";
	}

	.details nav ul li.active {
		font-weight: 700;
	}

	.details .feature-text li {
		font-size: 1rem;
	}

	.details content .features,
	.details .features {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.details content .features ul,
	.details .features ul {
		width: 50%;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.details .feature-icons li {
		width: 20%;
		margin: 0;
		display: block;

	}

	.details .feature-icons img {
		width: 100%;
		height: auto;
	}

	.sd-cards ul {
		margin: 2rem 0;
		display: flex;
		gap: 1rem;
		justify-content: space-between;
	}

	.sd-cards ul li {
		width: 30%;
		text-align: center;
	}

	.sd-cards ul li div:first-of-type {
		height: 10.5rem;
		display: flex;
		justify-content: center;
		margin-bottom: 2rem;
	}

	.feature article,
	.feature>div {
		width: 95%;
		flex-direction: row;
		gap: 3rem;
	}

	.feature article>div,
	.feature>div>div {
		width: 70%;
	}

	.feature img {
		width: 60%;
	}

	.user-photos .slider {
		margin: 0 auto;
	}

}

@media (min-width:1000px) {

	.hero>article,
	.hero>div {
		width: 95%;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.hero>article>div,
	.hero>div>div {
		width: 45%;
		height: inherit;
	}

	.hero .slider {
		width: 80%;
	}

	.details .feature-icons {
		gap: 2rem;
	}

	.details .feature-icons li {
		width: 4.25rem;
	}

	.specs .row {
		margin-bottom: 2rem;
	}

	.specs .row * {
		display: inline-block;
		width: 45%;

	}

	.specs .row:nth-of-type(even) {
		border: 1px solid var(--white);
		border-width: 0 0 1px 0;
	}

	.feature header {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}

	.user-photos .slider {
		max-height: 70vh;
	}

	.share-community article>div,
	.share-community>div>div {
		width: 50%;
		margin: 0;
		text-align: left;
	}

}