html {
	background: url('../images/treebeig-lg.jpg') repeat;
	background-color: #fffdee;
}

body {
/*  margin: 0;
  padding: 0, 0, 15px, 0;
	background-image: url('../images/topheader.jpg');
	background-repeat: repeat-x;*/
  font-family: Roboto, Arial, Helvetica, sans-serif;
/*  font-family: Verdana, Arial, Helvetica, sans-serif;*/
	font-size: calc(14px + 0.390625vw); /* Recommendation was 15px + ... */
/*  height: 1200px;
  margin-bottom: 15px;*/
}

.main {
  margin: 0px auto;
	max-width: 1100px;
	min-width: 280px;
  padding: 0 10px;
}

#maincontent {
  margin-top: 5px;
  top: 0px;
}

.topStuff {
  width: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  height: 90px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.hdr-images {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 70%;
}

.inclineLogo a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
}

.inclineLogo a img {
  width: 81px;
  height: 60px;
  object-fit: contain;
  justify-self: left;
}

.AQLogo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.AQLogo img {
  width: 264px;
  height: 62px;
  object-fit: contain;
}

.fampic {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
}

.fampic img {
  width: 98px;
  height: 68px;
  object-fit: contain;
}

.translate-search {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: end;
}

/* Google Translate style */
#google_translate_element {
  padding-bottom: 5px;
}

.search {
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
}

.sitesearch {
  width: 120px;
}

.menu {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 17.5px;
  color: white;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	background-color: #909090;
	background-image: url(../images/p7exp_mbar.jpg);
	background-repeat: repeat-x;
}

.top-menu-item {
  text-decoration: none;
  color: white;
  padding: 5px 16px 5px 10px;
	background-image: url(../images/p7PM_white_south.png);
	background-repeat: no-repeat;
	background-position: right center;
  white-space: nowrap;
}

.top-menu-item:visited,
.top-menu-item-store:visited,
.top-menu-item-search:visited,
.top-menu-item-contact:visited,
.submenu-item:visited,
.alt-menu-item:visited,
.alt-submenu-item:visited,
.alt-menu-item-search:visited,
.alt-menu-item-contact:visited
/*.menu a:visited*/ {
  color: white;
}

/*.top-menu-item:hover,
.top-menu-item-store:hover,
.top-menu-item-search:hover,
.top-menu-item-contact:hover,
.submenu-item:hover,
.alt-menu-item:hover,
.alt-submenu-item:hover,
.alt-menu-item-search:hover,
.alt-menu-item-contact:hover*/
.menu a:hover {
  text-decoration: none;
}

.top-menu-item-store,
.top-menu-item-search {
  padding: 5px 8px;
  border-right: 1px solid #333;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

.top-menu-item-contact {
  padding: 5px 8px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

.submenu-container,
.submenu-container-product {
  border-right: 1px solid #333;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.submenu {
  display: none;
  flex-direction: column;
  align-items: start;
  position: absolute;
  top: 31px;
  z-index: 100;
  white-space: nowrap;
  background-color: #444;
  padding: 1px 1px;
  box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
}

.submenu-container:hover .submenu,
.submenu-container-product:hover .submenu {
  display: flex;
}

.submenu-container:hover,
.submenu-container-product:hover,
.top-menu-item-store:hover,
.top-menu-item-search:hover,
.top-menu-item-contact:hover {
  background-color: #eee;
}

.top-menu-item-store:hover,
.top-menu-item-search:hover,
.top-menu-item-contact:hover {
  color: black;
}

.submenu-container:hover .top-menu-item,
.submenu-container-product:hover .top-menu-item {
  background-image: url(../images/p7PM_dark_south.gif);
  color: black;
}

.submenu-container .submenu .submenu-item:hover,
.submenu-container-product .submenu .submenu-item:hover
{
  background-color: #ddd;
  color: black;
}

.submenu-item {
  text-decoration: none;
  padding: 5px 40px 5px 6px;
  color: white;
}

.alt-menu-container {
  display: none;
  position: relative;
}

.alt-menu-invite-white,
.alt-menu-invite-black {
  height: 20px;
  object-fit: contain;
  padding-top: 4px;
  padding-bottom: 2px;
}

.alt-menu-invite-black {
  display: none;
}

.alt-menu {
  position: absolute;
  right: 0;
  top: 30px;
  display: none;
/*  display: flex;*/
  flex-direction: column;
/*  align-items: start;
  justify-content: center;*/
  padding: 5px 5px;
  box-shadow: 0px 2px 9px rgba(0,0,0,0.5);
  background-color: #454545;
  z-index: 50;
}

.alt-menu-container:hover .alt-menu {
  display:flex;
}

.alt-menu-container:hover .alt-menu-invite-white {
  display: none;
}

.alt-menu-container:hover .alt-menu-invite-black {
  display: inline-block;
}

.alt-menu-container:hover {
  background-color: #eee;
}

.alt-menu-item-search,
.alt-menu-item-contact,
.alt-menu-item,
.alt-submenu-item {
  padding: 8px 14px 8px 10px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  display: block; /* Note: Without this 'display: block', the height of the element doesn't calculate properly */
}

.alt-menu-item {
	background-image: url(../images/p7PM_white_south.png);
	background-repeat: no-repeat;
	background-position: right center;
  padding-right: 18px;
}

.alt-submenu {
  display: none;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 100%;
  box-shadow: -2px 0px 8px rgba(0,0,0,0.6);
  padding: 1px;
}

.alt-submenu-container-product {
  position: relative;
}

.alt-submenu-container-product:hover .alt-submenu {
  display: flex;
  background-color: #222;
}

.alt-submenu-container-product:hover .alt-menu-item,
.alt-menu-item-search:hover,
.alt-menu-item-contact:hover {
  color: black;
  background-color: #eee;
}

.alt-submenu-container-product:hover .alt-menu-item {
	background-image: url(../images/p7PM_dark_south.gif);
}

.alt-submenu-container-product .alt-submenu .alt-submenu-item:hover {
  background-color: #ddd;
  color: black;
}

.dialog {
  min-width: 260px;
}

.main-page {
  max-width: 840px;
  margin: 0px auto 0px auto;
}

.temp {
  display: block;
  background-color: transparent;
/*  border: 1px solid #ccc;*/
  width: 100%;
}

.horiz-split-level1 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.AQ-Box {
  height: 150px;
  width: 108px;
  object-fit: cover;
}

.titles {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.AQ-title {
  color: maroon;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  font-size: 48px;
  font-variant: small-caps;
  line-height: 44px;
  margin-bottom: 10px;
}


.AQ-subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: black;
  padding: 10px /*60px*/;
}

.separate-main {
  width: 100%;
}

.horiz-split-level2 {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.descrip {
  width: 60%;
  text-align: left;
}

.buttons {
  width: 40%;
  padding-top: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.inner-buttons {
  width: 280px;
}

.choice {
  display: block;
  background-color: rgb(231, 197, 1);
  color: black;
  border: 1px solid rgb(150, 113, 21);
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: bold;
  margin: 10px 0px;
  box-shadow: 3px 2px 5px black;
  font-size: 1.0rem;
  width: 100%;
  text-align: left;
}

.choice:hover {
  color: white;
  background-color: rgb(128, 108, 0);
  border-color: rgb(170, 129, 24);
}

.choice:hover a {
  color: white;
}
.choice a {
  color: black;
}

.choice a:hover {
  text-decoration: none;
  color: white;
}

.horiz-split-level3 {
  margin-top: 30px;
  width: 60%;
  color: blue;
  font-size: .9rem;
  text-align: left;
  z-index: 201;
}

#footertext {
  line-height: 16px;
}

@media screen and (max-width: 635px) {
  .main {
    padding: 0 5px;
  }
}

@media screen and (max-width: 370px) { /* Image sizes are variable - 2 images */
  .hdr-images {
    width: 100%;
  }

  .inclineLogo {
    width: 22.5%;
  }

  .inclineLogo a img {
    width: 100%;
  }

  .AQLogo {
    width: 73.3%;
  }
  .AQLogo img {
    width: 100%;
  }

  .fampic {
    display: none;
  }

  .translate-search {
    display: none;
  }
}

@media screen and (max-width: 414px) and (min-width: 370.1px) { /* Image sizes are static - 2 images */
  .hdr-images {
    width: 100%;
  }

  .fampic {
    display: none;
  }

  .translate-search {
    display: none;
  }
}

@media screen and (max-width: 483px) and (min-width: 414.1px) { /* Image sizes are variable - 3 images */
  .hdr-images {
    width: 100%;
  }

  .inclineLogo {
    width: 16.8%;
  }

  .inclineLogo a img {
    width: 100%;
  }

  .AQLogo {
    width: 54.66%;
  }

  .AQLogo img {
    width: 100%;
  }

  .fampic {
    width: 20.3%;
  }

  .fampic img {
    width: 100%;
  }

  .translate-search {
    display: none;
  }
}

@media screen and (max-width: 635px) and (min-width: 483.1px) { /* Images sizes are static - 3 images */
  .hdr-images {
    width: 100%;
  }

  .translate-search {
    display: none;
  }
}

@media screen and (max-width: 703px) and (min-width: 635.1px) { /* Images sizes are variable - 3 images plus static search */
  .inclineLogo {
    width: 16.8%;
  }

  .inclineLogo a img {
    width: 100%;
  }

  .AQLogo {
    width: 54.66%;
  }

  .AQLogo img {
    width: 100%;
  }

  .fampic {
    width: 20.3%;
  }

  .fampic img {
    width: 100%;
  }
}

@media screen and (min-width: 750px) { /* Images sizes are fixed - 3 images plus static search */
  .sitesearch {
    width: 150px;
  }
}

/* Now adjust the menu -- defaults are set for screens larger than 630px*/
@media screen and (max-width: 565px) and (min-width: 490.1px) { /* Can't fit 'Contact us' */
  .top-menu-item-contact {
    display: none;
  }

  .alt-menu-container {
    display: inline-block;
  }

  .alt-submenu-container-product,
  .alt-menu-item-search {
    display: none;
  }
}

@media screen and (max-width: 490px) and (min-width: 420.1px) { /* Can't fit 'Contact us' or 'Search' */
  .top-menu-item-contact,
  .top-menu-item-search {
    display: none;
  }

  .alt-menu-container {
    display: inline-block;
  }

  .alt-submenu-container-product {
    display: none;
  }
}

@media screen and (max-width: 420px) { /* Can't fit 'Contact us' or 'Search' or 'Support' or 'Product Info' */
  .top-menu-item-contact,
  .top-menu-item-search,
  .submenu-container-product {
    display: none;
  }

  .alt-menu-container {
    display: inline-block;
  }
}

@media screen and (max-width: 700px) and (min-width: 530.1px) { /* Buttons need their own vertical section */
  .horiz-split-level2 {
    flex-direction: column;
  }

  .descrip {
    display: block;
    width: 100%;
  }

  .buttons {
    width: 100%;
    display: block;
  }

  .inner-buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
/*    padding: 0 10px;*/
    align-items: center;
/*    justify-content: space-between;*/
    justify-content: center;
  }

  .choice {
    margin: 0 8px;
    display: inline-block;
    font-size: 0.95rem;
    text-align: center;
    padding: 8px 5px;
  }

  .horiz-split-level3 {
    width: 100%;
  }
}

@media screen and (max-width: 590px) and (min-width: 530.1px) { /* Remove r/l margin for background */
  .temp {
    margin: 0 -30px 0 -30px;
    z-index: 201;
    width: calc(100% + 60px);
  }

  .AQ-Box {
    z-index: 201;
  }

  .separate-main {
    width: 90%;
  }

  .descrip {
    z-index: 201;
  }

  .choice {
    z-index: 201;
  }

  .horiz-split-level3 {
    margin-left: 30px;
    width: 80%;
  }

  .footer {
    margin: 10px -30px 0px -30px;
    width: calc(100% + 60px);
  }

  #footertext {
    width: 100%;
  }
}

@media screen and (max-width: 530px) { /* Starting at 530 px and less, we remove the scalloped box and readjust margins/padding for main content area of screen */
  .t,
  .b {
    display: none;
  }

  .dialog .content {
    background-image: none;
    padding: 0px;
  }

  .dialog {
    margin: 0 5px 15px 5px;
  }

  .temp {
/*    background-color: rgb(255, 212, 218);*/
    position: relative;
    background-color: white;
    padding: 10px 5px;
    margin-left: -5px;
    top: 5px;
    /*margin-right: 15px;*/
    border-radius: 10px;
    width: calc(100vw - 24px);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
  }
}

@media screen and (max-width: 530px)/* and (min-width: 420.1px)*/ { /* put buttons in column at bottom */
  .horiz-split-level2 {
    flex-direction: column;
  }

  .descrip {
    display: block;
    width: 100%;
  }

  .buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .inner-buttons {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .choice {
    margin: 5px 0px;
    display: inline-block;
    font-size: 0.95rem;
    text-align: center;
    padding: 8px 5px;
  }

  .horiz-split-level3 {
    margin-left: 10px;
    width: 97%;
  }

  #footertext {
    width: 100%;
  }
}

@media screen and (max-width: 404px) { /* Make title area proportional */
  .AQ-Box {
    width: 26vw;
    object-fit: contain;
  }

  .AQ-title {
    font-size: 12vw; /* this is roughly 48pt scaled below 404px page width */
    line-height: 11vw;
  }

  .AQ-subtitle {
    font-size: 5.5vw;
  }

  .inner-buttons {
    width: 80%;
  }
}