.panelheader {
	font-size:36px;
}
.panelheadersuffix{
	all:revert; font-size:50%;position:relative; top:-.7em;
}
.panelbullet1{
	font-size:100%; position:relative; top:-.2em;
}
.elegantcontent{
	font-size:14px;
	font-weight:510;
}
.faceplate{
	font-size:36px;
}
.panelheadersubsuffix{
	all:revert; margin-left:-34.5%; font-size:30%; top:-.1em;
}



@media screen and (max-width:322px){
	.panelheader{
		font-size:28px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:38%;position:relative; top:-.6em;
	}
	.panelheadersubsuffix{
		margin-left:-53%; font-size:36%; color:grey;
	}
}
@media screen and (min-width:344px) and (max-width:350px){
	.panelheader{
		font-size:17px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:50%;position:relative; top:-.6em;
	}
	.panelheadersubsuffix{
		margin-left:-29.5%; font-size:36%; color:grey;
	}
}

@media screen and (min-width:351px) and (max-width:389px){
	.panelheader{
		font-size:20px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:42%;position:relative; top:-1.0em;
	}
	.panelheadersubsuffix{
		margin-left:-32.5%; font-size:36%; color:grey;
	}
}

@media screen and (min-width:390px) and (max-width:411px){
	.panelheader{
		font-size:20px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:42%;position:relative; top:-1.0em;
	}
	.panelheadersubsuffix{
		margin-left:-30.5%; font-size:36%; color:grey;
	}
}


@media screen and (min-width:412px) and (max-width:429px){
	.panelheader{
		font-size:23px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:42%;position:relative; top:-.6em;
	}
	.panelheadersubsuffix{
		all:revert; margin-left:-31.5%; font-size:36%; top:-.1em; color:grey; height:auto;
	}
}

@media screen and (min-width:430px) and (max-width:500px){
	.panelheader{
		font-size:23px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:42%;position:relative; top:-.6em;
	}
	.panelheadersubsuffix{
		all:revert; margin-left:-31%; font-size:36%; top:-.1em; color:grey;
	}
}
@media screen and (min-width:768px) and (max-width:800px){
	.panelheader{
		font-size:36px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:42%;position:relative; top:-.6em;
	}
	.panelheadersubsuffix{
		all:revert; margin-left:-28%; font-size:36%; top:-.1em; color:grey;
	}
}
@media screen and (min-width:801px) and (max-width:912px){
	.panelheader{
		font-size:36px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:42%;position:relative; top:-.6em;
	}
	.panelheadersubsuffix{
		all:revert; margin-left:-27.5%; font-size:36%; top:-.1em; color:grey;
	}
}
@media screen and (min-width:913px) and (max-width:1048px){
	.panelheader{
		font-size:36px;
		font-weight:500;
	}
	.panelheadersuffix{
		font-size:42%;position:relative; top:-.6em;
	}
	.panelheadersubsuffix{
		all:revert; margin-left:-43%; font-size:36%; top:-.1em; color:grey;
	}
}


#firstoffer {
	color:green;
	font-style: oblique;
	font-size:17px;
}
.productbtn {
  background-color: #E8EFF5;
  color: black;
  font-size: 13px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  a{
	text-decoration:none;
	color:black;
	}
}

.productbtn:hover {
  background-color: black;
  color: white;
  a{
  text-decoration:none;
  color: white;
  }
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* Creates 5 equal-width columns */
	gap: 2px; /* Adds space between columns */
	padding: 10px;
	place-self:center;
	place-items:center;
	border:0px solid red;
}

.grid-item {
	background-color: lightblue;
	padding: 13px;
	text-align: center;
	place-self:center;
	place-items:center;
	border:0px solid black;
}

#modalshare{
	margin-top: 60px;
	padding:2px; 
	font-size:14px; 
	text-align:right; 
	vertical-align:middle; 
	text-indent:20px;
	background-color: black;
	color: white;
}