/*rebecca add*/

.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 {
	display: block;
}


main>header article,
section article {
	/*
	width: 90%;
	max-width: 1280px;
	margin: 0 auto;
	*/
}

section article div h2,
section article div p {
	margin-bottom: 1rem;
	width: 100%;
}

main> section.feature-video article{
	width:90%;
	
}
main> section.feature-video article > div:last-of-type{
	
	/*padding-top:56.25%;
	position:relative;*/
}
main> section.feature-video iframe{
	
	width:50%;
	height:30VW;
	text-align:center;
	
}
section article div h3 {
	margin-bottom: .1rem;
}
.imgflow {
    width: 90%;

	text-align:left;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;

}
.imgflow img {
    width:55%;
	margin-left:6rem;
  

}
/* Start Hero Section */

main>header {
	margin-bottom: 4rem;
}



main>header>article>div:last-of-type>* {
	margin: 1rem 0;
}

main>header .slider {
	margin: 0 auto 3rem auto;
}

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

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

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

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

.prodColors .midnightBlue {
	background-color: var(--midnightBlue);
}

.prodColors .brightBlue {
	background-color: var(--brightBlue);
}

.prodColors .brightRed {
	background-color: var(--brightRed);
}

.prodColors .darkRed {
	background-color: var(--darkRed);
}

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

.prodColors .wpz2Yellow {
	background-color: var(--wpz2Yellow);
}

.prodColors .wpz2Blue {
	background-color: var(--wpz2Blue);
}

.prodColors .wpz2Red {
	background-color: var(--wpz2Red);
}

.prodColors .black {
	background-color: var(--black);
	border-width: .05em;
	border-color: rgb(150, 150, 150);
}

.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: 2rem;
	padding: 2rem 0;
	border-width: 0px 0 0px 0;
	border-style: solid;
	border-color: var(--white);
}

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

.details article {
	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: 1rem;
	cursor: pointer;
}

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

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

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

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

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

.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 */
	main>header .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 {

	width: 100%;
	max-width: 100%;
	padding: 0;
	align-items: center;
	text-align: center;
}

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

}

section article>div img {
	
	width: 50%;
	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 {
	display: block;

}

.in-the-box article 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);
	padding:3rem;

}

.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 {
		width: 80%;
		margin: 0 auto;
		display: block;
	}

	section article {
		/*display: flex;*/
		justify-content: space-between;
		flex-direction: row;
	}

}

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

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



	main>header .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 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.details content .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 {
		width: 95%;
		flex-direction: row;
		gap: 3rem;
	}

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

	.feature img {
		width: 60%;
	}

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

}

@media (min-width:1000px) {
	main>header>article {
		width: 95%;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	main>header>article>div {
		width: 45%;
		height: inherit;
	}

	main>header .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 {
		width: 50%;
		margin: 0;
		text-align: left;
	}

}