/*colors
green rgb(29,156,80)
blue rgb(32, 174, 212)
red rgb(240, 42, 42)
peach rgb(240, 222, 199)
yellow rgb(253, 255, 75)
orange rgb(255, 123, 0)

product colors
aqua 84	109	136
gunmetal 188 174 161

background: #2A7B9B;
background: linear-gradient(0deg,rgba(42, 123, 155, 1) 50%, rgba(237, 221, 83, 1) 50%);

*/

main{
	position:relative;
	padding:0;
}
.hero{
	padding:4rem 0;
	margin-bottom: 0;
	background-color: rgb(0,0,0);

}
.hero div.gradient0{
	min-width:100%;
	min-height:100%;
	margin:0;
	padding: 0;
	display: block;
	position:absolute;
	top: 0;
	left: 0;
	background: linear-gradient(25deg,rgba(255,255,255, .3) 0%, rgba(255,255,255, 0) 80%);
}
.hero div.gradient1{
	min-width:100%;
	min-height:100%;
	margin:0;
	padding: 0;
	display: block;
	position:absolute;
	top: 0;
	left: 0;
	background:linear-gradient(45deg,rgba(255,255,255, 0) 20%, rgba(255,255,255, .2) 70%);
}

.details article content{
	width:90%;
	margin:0 auto;
}

@media screen and (orientation: landscape) and (min-width: 800px) {
	main section {
	  min-height: auto;
	  padding: 15% 0;
	}
  }

.hero .intro > div{
	box-sizing: border-box;
}
.hero .intro .product-image img{
	width:100%;
	height: auto;

}

@media (min-width: 800px) {
	/* for screens iPad and larger */

	.hero .intro{
		align-items: center;
		gap:2rem;
	}
	.hero .intro .product-image img{
		width:80%;
		height: auto;

	}
	.hero .intro > div{
		width:50%;
	}

}
.prodColors > div{
	border-width: 0;
}
.prodColors .one{
	background: rgb(0,0,0);
	background: linear-gradient(0deg,rgba(0,0,0, 1) 50%, rgba(188,174,161, 1) 50%);

}
.prodColors .two{
	background: rgb(255,255,255);
	background: linear-gradient(0deg,rgba(255,255,255, 1) 50%, rgba(188,174,161, 1) 50%);

}
.prodColors .three{
	background: rgb(255,255,255);
	background: linear-gradient(0deg,rgba(255,255,255, 1) 50%, rgba(84,109,136, 1) 50%);

}

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

.hero .feature-icons li{
	flex: 0 1 calc(33.333% - 1rem); /* 3 per row, accounting for gap */
	box-sizing: border-box;
}

.prod-photos-a {
	padding:5% 0;
	background-color: var(--white);
}
.prod-photos-a article{
	align-items: stretch;
}

.prod-photos-a article div{
	display:flex;
	flex-direction: column;
}
.prod-photos-a article div img{
	margin:0 auto;
	margin-top:auto;
}

@media (min-width: 800px) {
	.prod-photos-a article{
		display: flex;
		flex-wrap:nowrap;
		justify-content: center;
		gap: 1rem;
	}
	.prod-photos-a article div{
		flex: 0 1 calc(50% - 1rem); /* 3 per row, accounting for gap */
		box-sizing: border-box;

	}
	.prod-photos-a img{
		width:80%;

	}
}

section article{
	width:100%;
	display: block;
}

section article > div{
	width:90%;
	display: block;
}

@media (min-width: 800px) {
	section article > div{
		width:60%;
		display: block;
	}
}

.page-divider-01{
	height:20vw;
	min-height:50vh;
	background-image:url(../images/page-divider-01.jpg);
	background-size:cover;
}
.page-divider-02{
	height:20vw;
	min-height:50vh;
	background-image:url(../images/page-divider-02.jpg);
	background-size:cover;
}

.waterproof{
	min-height:50vh;
	overflow: hidden;
	background-image:url(../images/waterproof-bg.jpg);
	background-size:125% auto;
	background-position:center left;
}
.waterproof article{
	overflow: hidden;
}
.waterproof img{
	display: none;
}

@media (min-width: 800px) {
	.waterproof{
		height:30vw;
	}
	.waterproof article div{
		/*width:60%;*/
	}
	.waterproof img{
		display: block;
		margin:25% auto auto auto;
	}

}
.megapixels{
	background-image:url(../images/megapixels-bg.jpg);
	background-size: cover;
	background-position: bottom right;

}
.zoom{
	color:var(--white);
	background-color: rgb(98,18,90);
}
.zoom div.gradient0{
	min-width:100%;
	min-height:100%;
	margin:0;
	padding: 0;
	display: block;
	position:absolute;
	top: 0;
	left: 0;
	background: linear-gradient(-33deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
}
.zoom div.gradient1{
	min-width:100%;
	min-height:100%;
	margin:0;
	padding: 0;
	display: block;
	position:absolute;
	top: 0;
	left: 0;
	background: linear-gradient(-14deg,rgba(150,150,150, 0) 0%, rgba(150,150,150, .5) 80%);
}
.zoom article{
	width:100%;
	display: block;
}

.zoom article div{
	padding:0;
}

.zoom article .text{
	box-sizing: border-box;
	padding:10%;
}


@media (min-width: 800px) {

	.zoom{
		padding: 5% 0;
		margin:0;
	}
	.zoom article{
		width:90%;
		margin:0 auto;
	}
	.zoom article div{
		/*width:70%;*/
		margin: 5% auto;
	}
	.zoom article div.product-image{
		/*width:60%;*/
	}
}

.lcd{
	min-height:0;
	padding:0;
	background-color:rgb(29,156,80);

}
.lcd div.gradient0{
	min-width:100%;
	min-height:100%;
	margin:0;
	padding: 0;
	display: block;
	position:absolute;
	top: 0;
	left: 0;
	background: linear-gradient(-33deg,rgba(255,255,255, .7) 0%, rgba(255,255,255, 0) 80%);
}
.lcd div.gradient1{
	min-width:100%;
	min-height:100%;
	margin:0;
	padding: 0;
	display: block;
	position:absolute;
	top: 0;
	left: 0;
	background: linear-gradient(-14deg,rgba(150,150,150, 0) 0%, rgba(150,150,150, .5) 80%);
}

.lcd img{
	width: 80%;
	height:auto;

}

@media (min-width: 800px) {
	.lcd img{
		/*width:60%;*/
	}
}

.battery{
	background-color: rgb(255,255,255);
}

.share-community article{
	width:80%;
}
.share-community article > div{
	width:100%;
	margin:0 auto;
	text-align:center;
}
@media (min-width: 800px) {
	.share-community article > div{
		width:60%;
	}
}

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

	/* for iPad in portrait mode */

}


@media (min-width: 800px) {

	/* for screens iPad and larger */


}


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

	/* styles for screens in portrait orientation iPad and larger */

}