@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

/* align website horizontally to the center */
html {
    display: table;
    margin: auto;
}

body {
  margin: 0;
  max-width: 850px;
  width: 100%; /* Make image resize work on Firefox */
}

/* Style the header */
.header {
  background-color: white;
  padding: 0; 
  border: 0;
  text-align: center;
}
  
/* Style the header graphic*/
#header_graphic {
    max-width: 100%;
    max-height: 100%;
	height: auto;
	padding: 0;
	border: 0;
    display: block;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #0088aa;
  display: block;
}

/* Style the top navigational links */
.topnav a {
  float: left;
  max-width: 100%;
  max-height: 100%;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change navigation button color on hover */
.topnav a:hover {
  background-color: #eeffff; /*#e6f2ff;*/
  color: black;
}

/* Style the product navigation bar */
.prodnav {
  overflow: hidden;
  background-color: #0088aa;
  display: block;
}

/* Style the product navigational links */
.prodnav a {
  float: left;
  max-width: 100%;
  max-height: 100%;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change navigation button color on hover */
.prodnav a:hover {
  background-color: #eeffff; /*#e6f2ff;*/
  color: black;
}

/* Style the main content */
.top_content {
  background-color: #eeffff;
  padding: 10px;
}

/* Style the detail info */
.inset_white {
  background-color: white;
  margin: 0 10px;
  padding: 0 5px;
  border: thin solid;
  z-index: 2;
}

/* Allow All Images to Resize CSS */

img {max-width: 100%;} 

/* CSS for Images Which Occupy Entire Page Width */

.full_image {
	clear: both;
	overflow: auto;
    margin-bottom: 15px;}

/* Footer Style  CSS */
.footer {
  display: flex;
  flex: 1; /*Shrink and Grow in Proportion to Window Size */ 
  background-color: #0088aa;
  color: #fff;
  padding: 10px;
  font-size: 14px bold;
  height: auto;
}

/* Footer Phone and Email Container CSS */

.phone-data, .mail-data {
  display: flex;
  padding: 0;
  margin: 0 auto; /*center info in container */
  color: white;
}

.mail-data {
  flex: 1; /* Shrink and Grow in Proportion to Window Size */ 
  text-align: left;
  max-width: 10%;
}

 .phone-data {
  text-align: right;
  max-width: 25%;
  min-width: 110px;
  align-self: start; /* prevent graphic container from stretching */
}

/* Footer Copyright Container CSS */

.copyright-data {
  display: flex;
  flex: 1; /* Shrink and Grow in Proportion to Window Size */ 
  max-width: 65%;
  margin: 0 auto; /*center info in container */
  padding-left: 1em;
}

/* Change Footer Link Colors CSS */

.footer a:link, .footer a:visited {color: WhiteSmoke;}

/* style left and right images */

.rhs_pic_txt, .lhs_pic_txt 
{
	text-align: center;
	display: block;
    max-width: 100%;
    max-height: 100%;
	height: auto;
	padding: 0;
	border: thin solid;
	margin: 10px;
}

/* left and right image specific styles */
.rhs_pic_txt {
	float: right;}
 
.lhs_pic_txt {
	float: left;
}

/* Center Image CSS */ 

.center_img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  padding: 0;
  border: thin solid;
  margin-left: auto;
  margin-right: auto;
}

/* Flex Box Center Alignment CSS */ 

.center-aligned {
/*  display: flex; */
  align-items: center;
  justify-content: center;
}

/* Image Selection Flex Contairer */

.sel-flex {
  display: flex;           /* flex container */
  flex-direction: row;   
  position: relative;      /* nearest ancestor for absolute positioning */
} 

/* Product Selection Flex Box CSS */

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  gap: 16px;
  padding: 20px 10px;
  margin: 0 auto;
}