body {
	overflow-y: scroll;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: none;
}

img {
	max-width: 100%;
}



/* Links */
a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: #006600;
	font-weight: bold;
}



.PageCon {
	max-width: 852px;
	margin: 15px auto 15px auto;
	}
@media screen and (max-width: 900px) {
	.PageCon {
	max-width: 100%;
	margin: 5px 10px 5px 10px;
	}
}
@media screen and (max-width: 512px) {
	.PageCon {
	max-width: 100%;
	margin: 5px;
	}
}



/* Menu container for PCs */
.MenuPC {
}
@media screen and (max-width: 900px) {
	.MenuPC {
	display:none;
	}
}

/* Menu container for Phones */
.MenuPhone {
}
@media screen and (min-width: 901px) {
	.MenuPhone {
	display:none;
	}
}



/* Flow of Images for Any Size Screen */
.Flow {
	margin: 0 auto 0 auto;
}
.Flow img {
	width: 177px;
    margin: 0 6px 12px 6px;
	border: 1px solid #666666;
}

/* Flow for Designs in Multiple Glazes */
.Flow-Select {
	margin: 0 auto 15px auto;
}
.Flow-Select img {
	width: 177px;
    margin: 0 6px 12px 6px;
	border: 1px solid #666666;
}

/* Title, Heading, Subheading and Texts - see font-sizes.xlsx */
.Title {
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	font-size: 35px;
	font-weight: bold;
	color: #224477;
	margin: 15px auto 15px auto;
}
@media screen and (max-width: 800px) {
	.Title {
	font-size: 32px;
	}
}
@media screen and (max-width: 700px) {
	.Title {
	font-size: 28px;
	}
}
@media screen and (max-width: 600px) {
	.Title {
	font-size: 26px;
	}
}
@media screen and (max-width: 500px) {
	.Title {
	font-size: 23px;
	}
}
@media screen and (max-width: 400px) {
	.Title {
	font-size: 21px;
	}
}



.Heading {
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	font-size: 25px;
	font-weight: bold;
	color: #224477;
	margin: 15px auto 15px auto;
	}
@media screen and (max-width: 800px) {
	.Heading {
	font-size: 24px;
	}
}
@media screen and (max-width: 700px) {
	.Heading {
	font-size: 23px;
	}
}
@media screen and (max-width: 600px) {
	.Heading {
	font-size: 21px;
	}
}
@media screen and (max-width: 500px) {
	.Heading {
	font-size: 20px;
	}
}
@media screen and (max-width: 400px) {
	.Heading {
	font-size: 19px;
	}
}



.Subheading {
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	font-size: 21px;
	font-weight: bold;
	color: #224477;
	margin: 0 auto 10px auto;
	}
@media screen and (max-width: 800px) {
	.Subheading {
	font-size: 20px;
	}
}
@media screen and (max-width: 700px) {
	.Subheading {
	font-size: 19px;
	}
}
@media screen and (max-width: 600px) {
	.Subheading {
	font-size: 19px;
	}
}
@media screen and (max-width: 500px) {
	.Subheading {
	font-size: 18px;
	}
}
@media screen and (max-width: 400px) {
	.Subheading {
	font-size: 17px;
	}
}

.SubheadingLeft {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 21px;
	font-weight: bold;
	color: #224477;
	margin: 0 auto 10px auto;
	}
@media screen and (max-width: 800px) {
	.SubheadingLeft {
	font-size: 20px;
	}
}
@media screen and (max-width: 700px) {
	.SubheadingLeft {
	font-size: 19px;
	}
}
@media screen and (max-width: 600px) {
	.SubheadingLeft {
	font-size: 19px;
	}
}
@media screen and (max-width: 500px) {
	.SubheadingLeft {
	font-size: 18px;
	}
}
@media screen and (max-width: 400px) {
	.SubheadingLeft {
	font-size: 17px;
	}
}



.Text {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #224477;
	margin: 0 0 10px 0;
	}
@media screen and (max-width: 800px) {
	.Text {
	font-size: 16px;
	}
}
@media screen and (max-width: 700px) {
	.Text {
	font-size: 15px;
	}
}
@media screen and (max-width: 600px) {
	.Text {
	font-size: 15px;
	}
}
@media screen and (max-width: 500px) {
	.Text {
	font-size: 14px;
	}
}
@media screen and (max-width: 400px) {
	.Text {
	font-size: 14px;
	}
}



.Text-ExtraTopMargin15 {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #224477;
	margin: 15px 0 10px 0;
	}
@media screen and (max-width: 800px) {
	.Text-ExtraTopMargin15 {
	font-size: 16px;
	}
}
@media screen and (max-width: 700px) {
	.Text-ExtraTopMargin15 {
	font-size: 15px;
	}
}
@media screen and (max-width: 600px) {
	.Text-ExtraTopMargin15 {
	font-size: 15px;
	}
}
@media screen and (max-width: 500px) {
	.Text-ExtraTopMargin15 {
	font-size: 14px;
	}
}
@media screen and (max-width: 400px) {
	.Text-ExtraTopMargin15 {
	font-size: 14px;
	}
}



.Text-ExtraTopMargin25 {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #224477;
	margin: 25px 0 10px 0;
	}
@media screen and (max-width: 800px) {
	.Text-ExtraTopMargin25 {
	font-size: 16px;
	}
}
@media screen and (max-width: 700px) {
	.Text-ExtraTopMargin25 {
	font-size: 15px;
	}
}
@media screen and (max-width: 600px) {
	.Text-ExtraTopMargin25 {
	font-size: 15px;
	}
}
@media screen and (max-width: 500px) {
	.Text-ExtraTopMargin25 {
	font-size: 14px;
	}
}
@media screen and (max-width: 400px) {
	.Text-ExtraTopMargin25 {
	font-size: 14px;
	}
}



.Text-ExtraBottomMargin25 {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #224477;
	margin: 0 0 25px 0;
	}
@media screen and (max-width: 800px) {
	.Text-ExtraBottomMargin25 {
	font-size: 16px;
	}
}
@media screen and (max-width: 700px) {
	.Text-ExtraBottomMargin25 {
	font-size: 15px;
	}
}
@media screen and (max-width: 600px) {
	.Text-ExtraBottomMargin25 {
	font-size: 15px;
	}
}
@media screen and (max-width: 500px) {
	.Text-ExtraBottomMargin25 {
	font-size: 14px;
	}
}
@media screen and (max-width: 400px) {
	.Text-ExtraBottomMargin25 {
	font-size: 14px;
	}
}



/* Table of Contents */
.TofC-Heading {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 21px;
	font-weight: bold;
	color: #224477;
	margin: 0 auto 15px auto;
	}
@media screen and (max-width: 800px) {
	.TofC-Heading {
	font-size: 20px;
	}
}
@media screen and (max-width: 700px) {
	.TofC-Heading {
	font-size: 20px;
	}
}
@media screen and (max-width: 600px) {
	.TofC-Heading {
	font-size: 19px;
	}
}
@media screen and (max-width: 500px) {
	.TofC-Heading {
	font-size: 19px;
	}
}
@media screen and (max-width: 400px) {
	.TofC-Heading {
	font-size: 18px;
	}
}

.TofC-Heading-Glaze {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 21px;
	font-weight: bold;
	color: #224477;
	margin: 0 0 15px 6px;
	}
@media screen and (max-width: 800px) {
	.TofC-Heading-Glaze {
	font-size: 20px;
	}
}
@media screen and (max-width: 700px) {
	.TofC-Heading-Glaze {
	font-size: 20px;
	}
}
@media screen and (max-width: 600px) {
	.TofC-Heading-Glaze {
	font-size: 19px;
	}
}
@media screen and (max-width: 500px) {
	.TofC-Heading-Glaze {
	font-size: 19px;
	}
}
@media screen and (max-width: 400px) {
	.TofC-Heading-Glaze {
	font-size: 18px;
	}
}

/* Table of Contents Text */
.TofC-Text {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #224477;
	margin: 0 auto 15px auto;
	}
@media screen and (max-width: 800px) {
	.TofC-Text {
	font-size: 17px;
	color: #ff0000;
	}
}
@media screen and (max-width: 700px) {
	.TofC-Text {
	font-size: 17px;
	color: #ff0000;
	}
}
@media screen and (max-width: 600px) {
	.TofC-Text {
	font-size: 16px;
	color: #00ff00;
	}
}
@media screen and (max-width: 500px) {
	.TofC-Text {
	color: #00ff00;
	font-size: 16px;
	}
}
@media screen and (max-width: 400px) {
	.TofC-Text {
	color: #0000ff;
	font-size: 15px;
	}
}

/* Jump to for Main Index using Table of Contents Text and Media Screens for Width */
.JumpToIndex {
	width: 210px;
	float: left;
    margin-bottom: 10px;
}
@media screen and (max-width: 800px) {
	.JumpToIndex {
	width: 205px;
	}
}
@media screen and (max-width: 700px) {
	.JumpToIndex {
	width: 205px;
	}
}
@media screen and (max-width: 600px) {
	.JumpToIndex {
	width: 195px;
	}
}
@media screen and (max-width: 500px) {
	.JumpToIndex {
	width: 195px;
	}
}
@media screen and (max-width: 400px) {
	.JumpToIndex {
	width: 175px;
	}
}

/* Jump to for Ashtray Gallery using Table of Contents Text and Media Screens for Width */
.JumpToNumbers {
	width: 110px;
	float: left;
    margin-bottom: 10px;
}
@media screen and (max-width: 800px) {
	.JumpToNumbers {
	width: 104px;
	}
}
@media screen and (max-width: 700px) {
	.JumpToNumbers {
	width: 104px;
	}
}
@media screen and (max-width: 600px) {
	.JumpToNumbers {
	width: 98px;
	}
}
@media screen and (max-width: 500px) {
	.JumpToNumbers {
	width: 98px;
	}
}
@media screen and (max-width: 400px) {
	.JumpToNumbers {
	width: 92px;
	}
}



/* Table of Contents - Container */
/* content = 402 + 48 + 402 = 852 */
.TofC {
	margin: 15px auto 0 auto;
}
.TofC-Column-1 {
	width: 402px;
	float: left;
	margin-right: 48px;
	margin-bottom: 0;
}
.TofC-Column-2 {
	width: 402px;
	float: left;
	margin-bottom: 0;
}
@media screen and (max-width: 901px) {
	.TofC-Column-1 {
		float: none;
		width: 100%;
		margin: 0 auto 0 auto;
	}
	.TofC-Column-2 {
		float: none;
		width: 100%;
		margin: 0 auto 0 auto;
	}
}



/* for Ashtray and Glaze Code Indexes */
a.index:link, a.index:visited, a.index:hover, a.index:active {
	text-decoration: none;
	font-weight: normal;
	color: #ffff00;
	background-color: #990000;
}

td {
  vertical-align: top;
  padding: 5px 15px 5px 5px;
}

.T-H {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
    background-color: #AACCFF;
	margin: 0 0 0 0;
	}
@media screen and (max-width: 800px) {
	.T-H {
	font-size: 17px;
	}
}
@media screen and (max-width: 700px) {
	.T-H {
	font-size: 17px;
	}
}
@media screen and (max-width: 600px) {
	.T-H {
	font-size: 16px;
	}
}
@media screen and (max-width: 500px) {
	.T-H {
	font-size: 16px;
	}
}
@media screen and (max-width: 400px) {
	.T-H {
	font-size: 15px;
	}
}

.T-W {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #000000;
	margin: 0 0 0 0;
	}
@media screen and (max-width: 800px) {
	.T-W {
	font-size: 16px;
	}
}
@media screen and (max-width: 700px) {
	.T-W {
	font-size: 15px;
	}
}
@media screen and (max-width: 600px) {
	.T-W {
	font-size: 15px;
	}
}
@media screen and (max-width: 500px) {
	.T-W {
	font-size: 14px;
	}
}
@media screen and (max-width: 400px) {
	.T-W {
	font-size: 14px;
	}
}

.T-B {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #000000;
    background-color: #AACCFF;
	margin: 0 0 0 0;
	}
@media screen and (max-width: 800px) {
	.T-B {
	font-size: 16px;
	}
}
@media screen and (max-width: 700px) {
	.T-B {
	font-size: 15px;
	}
}
@media screen and (max-width: 600px) {
	.T-B {
	font-size: 15px;
	}
}
@media screen and (max-width: 500px) {
	.T-B {
	font-size: 14px;
	}
}
@media screen and (max-width: 400px) {
	.T-B {
	font-size: 14px;
	}
}



.Container-Masthead {
	text-align: center;
	max-width: 100%;
	border: 0;
	background: #ffffff;
	margin: 0 auto 6px auto;
}

.Container-Masthead img {
	border: 1px solid #666666;
}

.Container {
	text-align: center;
	border: 0;
	background: #ffffff;
	margin: 0 auto 35px auto;
}
.Container img {
	border: 1px solid #666666;
}
@media screen and (max-width: 1000px) {
	.Container {
		margin-bottom: 25px;
	}
}

.Container-Last {
	text-align: center;
	border: 0;
	background: #ffffff;
	margin: 0 auto 0 auto;
}
.Container-Last img {
	border: 1px solid #666666;
}



.Container-562 {
	text-align: center;
	max-width: 562px;
	border: 0;
	background: #ffffff;
	margin: 0 auto 30px auto;
}
.Container-562 img {
	border: 1px solid #666666;
}
@media screen and (max-width: 1000px) {
	.Container-562 {
	margin-bottom: 25px;
	}
}

.Container-562-Last {
	text-align: center;
	max-width: 562px;
	border: 0;
	background: #ffffff;
	margin: 0 auto 0 auto;
}
.Container-562-Last img {
	border: 1px solid #666666;
}

.Container-422 {
	text-align: center;
	max-width: 422px;
	border: 0;
	background: #ffffff;
	margin: 0 auto 30px auto;
}
.Container-422 img {
	border: 1px solid #666666;
}
@media screen and (max-width: 1000px) {
	.Container-422 {
	margin-bottom: 25px;
	}
}



/* Container for 315px side-by-side images */
/* content = 315 + 315 + 4 + 48 = 682 */
.Two-Container-315 {
	max-width: 682px;
	margin: 0 auto 0 auto;
}
.Two-Container-315 img {
	border: 1px solid #666666;
}
.Two-Container-315-Column-1 {
	float: left;
	max-width: 317px;
	margin-right: 48px;
	margin-bottom: 25px;
}
.Two-Container-315-Column-2 {
	float: left;
	max-width: 317px;
	margin-bottom: 25px;
}
@media screen and (max-width: 732px) {
	.Two-Container-315-Column-1 {
		float: none;
		width: 100%;
		margin: 0 auto 25px auto;
	}
	.Two-Container-315-Column-2 {
		float: none;
		width: 100%;
		margin: 0 auto 25px auto;
	}
}

.Two-Container-315-Last {
	max-width: 682px;
	margin: 0 auto 15px auto;
}
.Two-Container-315-Last img {
	border: 1px solid #666666;
}
.Two-Container-315-Last-Column-1 {
	float: left;
	max-width: 317px;
	margin-right: 48px;
	margin-bottom: 15px;
}
.Two-Container-315-Last-Column-2 {
	float: left;
	max-width: 317px;
	margin-bottom: 15px;
}
@media screen and (max-width: 732px) {
	.Two-Container-315-Last-Column-1 {
		float: none;
		width: 100%;
		margin: 0 auto 25px auto;
	}
	.Two-Container-315-Last-Column-2 {
		float: none;
		width: 100%;
		margin: 0 auto 15px auto;
	}
}

/* Container for 2 400px side-by-side images */
/* content = 400 + 400 + 4 + 48 = 852 aka = 402 + 402 + 48 = 852 */
.Two-Container-400 {
	max-width: 852px;
	margin: 0 auto 0 auto;
}
.Two-Container-400 img {
	border: 1px solid #666666;
}
.Two-Container-400-Column-1 {
	float: left;
	max-width: 402px;
	margin-right: 48px;
	margin-bottom: 25px;
}
.Two-Container-400-Column-2 {
	float: left;
	max-width: 402px;
	margin-bottom: 25px;
}
@media screen and (max-width: 650px) {
	.Two-Container-400-Column-1 {
		float: none;
		width: 100%;
		margin: 0 auto 25px auto;
	}
	.Two-Container-400-Column-2 {
		float: none;
		width: 100%;
		margin: 0 auto 25px auto;
	}
}

.Two-Container-400-Last {
	max-width: 852px;
	margin: 0 auto 15px auto;
}
.Two-Container-400-Last img {
	border: 1px solid #666666;
}
.Two-Container-400-Last-Column-1 {
	float: left;
	max-width: 402px;
	margin-right: 48px;
	margin-bottom: 15px;
}
.Two-Container-400-Last-Column-2 {
	float: left;
	max-width: 402px;
	margin-bottom: 15px;
}
@media screen and (max-width: 901px) {
	.Two-Container-400-Last-Column-1 {
		float: none;
		width: 100%;
		margin: 0 auto 25px auto;
	}
	.Two-Container-400-Last-Column-2 {
		float: none;
		width: 100%;
		margin: 0 auto 15px auto;
	}
}



.Container-Right {
	float: right;
	margin: 10px 7px 5px 15px;
}
.Container-Right img {
	border: 1px solid #666666;
}
@media screen and (max-width: 535px) {
	.Container-Right {
		float: none;
		display: block;
		background: #ffffff;
		margin: 5px auto 10px auto;
	}
}

.Click {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #224477;
	margin: 0 10px 5px 6px;
}

.ClickNote {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #224477;
	margin: 15px 10px 15px 6px;
}

.Caption {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #224477;
	margin: 5px 0 0 0;
}

.Caption-Additional {
	text-align: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #224477;
	margin: 10px 0 0 0;
}

.Rule-Glazes {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 10px 0 15px 0;
}

.Rule-T0-B0 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 0;
}

.Rule-T0-B15 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 0 0 15px 0;
}

.Rule-T5-B15 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 5px 0 15px 0;
}

.Rule-T10-B0 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 10px 0 0 0;
}

.Rule-T10-B15 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 10px 0 15px 0;
}

.Rule-T10-B25 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 10px 0 25px 0;
}

.Rule-T15-B15 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 15px 0 15px 0;
}

.Rule-T0-B20 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 0 0 20px 0;
}

.Rule-T10-B0 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 10px 0 0 0;
}

.Rule-T15-B0 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 15px 0 0 0;
}

.Rule-T15-B15 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 15px 0 15px 0;
}

.Rule-T20-B15 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 20px 0 15px 0;
}

.Rule-T15-B20 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 15px 0 20px 0;
}

.Rule-T20-B0 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 20px 0 0 0;
}

.Rule-T25-B0 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 25px 0 0 0;
}

.Rule-T25-B15 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 25px 0 15px 0;
}

.Rule-T35-B15 {
	max-width: 100%;
	height: 2px;
	background-color: #5577aa;
	border-style: none;
	margin: 35px 0 15px 0;
}

.Copyright {
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	font-size: 21px;
	font-weight: bold;
	color: #224477;
	margin: 15px 0 15px 0;
}



/* Code from W3Schools 
https://www.w3schools.com/howto/howto_js_tab_img_gallery.aspid
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 535px) {
	.column {
	padding-left: 5px;
	padding-right: 5px;
	}
}

/* Style the images inside the grid */
.column img {
  opacity: 1; 
  cursor: pointer; 
  border: 1px solid #666666;
}

.column img:hover {
  opacity: 0.7;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* container for expanded image for catalogs */
.container {
  position: relative;
  text-align: center;
  max-width: 832px;
  margin: 20px auto 0 auto;
  display: none;
}
.container img {
  border: 1px solid #666666;
}

/* container for expanded image for Haeger page */
.container-new {
  position: relative;
  text-align: center;
  max-width: 832px;
  margin: 5px auto 25px auto;
  display: none;
}
.container-new img {
  border: 1px solid #666666;
}

/* Close button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 32px;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  border: 2px solid #000000;
  cursor: pointer;
}

/* for slideshow www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr */
.mySlides {display:none;}



/* Code from W3Schools 
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
*/

#topButton {
  position: fixed; /* Fixed/sticky position */
  width: 73px;
  bottom: 115px; /* Distance from bottom of page */
  right: 15px; /* Distance from right edge of page */
  z-index: 99; /* Make sure it does not overlap */
  border: none;
  outline: none;
  background-color: #224477;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* Some padding */
  border-radius: 8px; /* Rounded corners */
  font-family: Verdana, Arial, sans-serif;
  font-size: 18px;
}

#backButton {
  position: fixed; /* Fixed/sticky position */
  width: 73px;
  bottom: 65px; /* Distance from bottom of page */
  right: 15px; /* Distance from right edge of page */
  z-index: 99; /* Make sure it does not overlap */
  border: none;
  outline: none;
  background-color: #224477;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* Some padding */
  border-radius: 8px; /* Rounded corners */
  font-family: Verdana, Arial, sans-serif;
  font-size: 18px;
}

#menuButton {
  position: fixed; /* Fixed/sticky position */
  width: 73px;
  bottom: 15px; /* Distance from bottom of page */
  right: 15px; /* Distance from right edge of page */
  z-index: 99; /* Make sure it does not overlap */
  border: none;
  outline: none;
  background-color: #224477;
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* Some padding */
  border-radius: 8px; /* Rounded corners */
  font-family: Verdana, Arial, sans-serif;
  font-size: 18px;
}