* {
  box-sizing: border-box;
}

.main-page {
  width: 100%;
  max-width: 800px;
  margin: 0 auto; 
}

.menu-logo {
   margin-top: 6px; 
   margin-right: 20px;
}

.main-header {
  padding: 0;
  margin: 0;
  display: flex; 
  padding: 2px 0px; 
  justify-content: space-between; 
  background: #000673; 
  border-top: 2px solid #f37022; 
  border-bottom: 2px solid #f37022;
}

.content {
	font:16px Verdana, Arial, Helvetica, sans-serif;
	background-color:#ffffff;
	width:100%;
	height:auto;
	display: block;	
	text-align:center;
	line-height: 12pt;
	border-top: 0px solid #f37022;
	border-right: 2px solid #000673;
	border-left: 2px solid #000673;
	border-bottom: 0px solid #000673;
	margin: 0em auto;
}

.footer {
	background-color:#000673;
	text-align:center;
	height:12px;
	width:100%;
	border-bottom: 2px solid #f37022;
	border-top: 2px solid #f37022;
	border-right: 2px solid #000673;
	border-left: 2px solid #000673;
	margin: 0em auto;
}

.pagelinetop {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .90em;
	background-color:#ffffff;
	text-align:justify;
	height:auto;
	width:100%;
	border-top: 1px solid #000673;
        color: black;
	margin: 0em auto;
        padding-left:0px;
        padding-top:10px;
}

.pagelinetop-phases {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .85em;
	text-align: right; 
        font-variant: small-caps; 
	background-color:#ffffff;
	height:auto;
	width:100%;
	border-top: 1px solid #000673;
        color: black;
	margin: 0em auto;
        padding-left:0px;
        padding-top:10px;
        padding-right:.5em;
}


.submenuborder {
        font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:right;
	height:24px;
	border-bottom: 1px solid #000673;
        color: black;
	margin: 0em auto;
        padding-left:22px;
}

.compare {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .90em;
	text-align:right;
	height:20px;
	border-bottom: 1px solid #000673;
        color: black;
	margin: 0em auto;
}

.pagetext {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .90em;
	background-color:#ffffff;
	text-align:justify;
	height:auto;
	border-top: 1px solid #000673;
	border-bottom: 1px solid #000673;
        color: black;
	margin: .5em auto;
        padding-left:4px;
        padding-right:10px;
        padding-top:10px;
        padding-bottom:10px;
}

.pagetextnoborder {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .90em;
	background-color:#ffffff;
	text-align: justify;
        color: black;
	margin: .5em auto;
        padding-left:0px;
        padding-right:10px;
}

.anytext {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .85em;
	background-color:#ffffff;
	text-align:justify;
	height:auto;
        color: black;
	margin: 0em auto;
        padding-left:4px;
        padding-right:6px;
        padding-top:4px;
}


.items
{
    list-style-type:square; 
    padding-left:24px;
}

.itemtext {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: .85em;
	background-color:#ffffff;
	text-align:justify;
	height:24px;
	border-top: 1px solid #000673;
        color: black;
	margin: 0em auto;
        padding-left:0px;
        padding-top:20px;
}

img {
  max-width: 100%;
  height: auto;
}

H1
{
    FONT-WEIGHT: normal;
    font-size: .90em;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
    display: inline;
    padding-bottom: 10px;
    margin-block: 4px;
}
H2
{
    FONT-WEIGHT: normal;
    font-size: .85em;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

H3
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 15px;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .75em;
}

nav {
  background: #000673;
  padding: 2px 20px;
  z-index: 100;

}

.menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  min-width: 150px;
}

.menu li {
  position: relative;
}
.menu a {
  display: block;
  padding: 10px 20px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}

.menu A.selected {
  /* display: inline;*/
   font-weight: bold;
   color: #f37022;
   text-decoration: underline white;
}

.menu A.selected:hover {
   font-weight: bold;
   color: #f37022;
   text-decoration: underline white;
}



.menu li:hover > a {
  background-color: #005eb1;
  color: #ffffff;
  border-radius: 2px;
}
.submenu,
.submenu-right {
  display: none;
  position: absolute;
  background: #000673;
  min-width: 200px;
  list-style: none;
  z-index: 100;
}

@media (min-width: 769px) {
  .menu ul {
    border-top: 2px solid #f37022;
    border-bottom: 2px solid #f37022;
    padding-left:0px;
  }
  .menu li:hover > .submenu {
    display: block;
    top: 100%;
    left: 0;
  }
  .submenu li:hover > .submenu-right {
    display: block;
    top: 0;
    left: 100%;
    margin-left: 0;
  }
  .submenu .dropdown > a:after {
    content: "▸";
    float: right;
  }
  .submenu .dropdown:hover > a::after {
    content: "▼";
  }
  .hamburger,
  #menu-toggle {
    display: none;
  }
}

@media (max-width: 768px) {

  .hamburger {
    display: block;
    font-size: 2em;
    color: #FFFFFF;
    background: none;
    border: none;
    cursor: pointer;
  }

  .menu ul {
     border-top: 2px solid #f37022;
     border-bottom: 2px solid #f37022;
   }

  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #000673;
  }

  #menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #000673;
  }

  #menu-toggle {
    display: none;
  }
  
  #menu-toggle:checked + label + ul {
    display: flex;
  }
  .menu li {
    width: 100%;
    background: #000673;
  }
  .submenu,
  .submenu-right {
    position: static;
    display: none;
    padding-left: 20px;
  }

  .menu li:hover > .submenu,
  .submenu li:hover > .submenu-right {
    display: block;
  }

  .menu .dropdown > a::after {
    content: "▸";
    float: right;
  }
  .menu .dropdown:hover > a::after {
    content: "▼";
  }

  .submenu .dropdown > a::after {
    content: "▸";
    float: right;
  }
  .submenu .dropdown:hover > a::after {
    content: "▼";
  }

  .main-header {
      display: flex;
      height: 46px;
  }

  .menu-exp-active {
     FONT-SIZE: .80em;
  }
  .menu-ses-active {
     FONT-SIZE: .80em;
  }
  .menu-def-active {
     FONT-SIZE: .80em;
  }
  .menu-exp-inactive {
     FONT-SIZE: .80em;
  }
  .menu-ses-inactive {
     FONT-SIZE: .80em;
  }
  .menu-def-inactive {
     FONT-SIZE: .80em;
  }
}

 /**  
   * phase menu images 
   **/
.menu-group {
   display: flex;
   flex-wrap: nowrap; 
   gap: 10%;
}

.menu-exp-active {
    position: relative; /* Essential for positioning the overlay */
}
.menu-exp-active::after {
    content: 'EXPLORE';
    FONT-SIZE: .95em;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 45%;
    display: grid; 
    place-items: center;
    width: 100%;
    height: 100%;
    opacity: 1.0; /* Adjust the level of dimness (0.1 to 0.9) */
    pointer-events: none; /* Allows interaction with elements beneath if needed */
}

.menu-exp-inactive {
    position: relative; /* Essential for positioning the overlay */
    opacity: 0.4; /* start dimmed */
}

.menu-exp-inactive:after {
    content: 'EXPLORE';
    FONT-SIZE: .95em;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 45%;
    display: grid; 
    place-items: center;
    width: 100%;
    height: 100%;
    opacity: 1.0; /* Adjust the level of dimness (0.1 to 0.9) */
    pointer-events: none; /* Allows interaction with elements beneath if needed */
}
.menu-exp-inactive:hover {
    opacity: 1.0; /* show normal on hover */
}


.menu-ses-active {
    position: relative; /* Essential for positioning the overlay */
}
.menu-ses-active::after {
    content: 'ASSESS';
    FONT-SIZE: .95em;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 45%;
    display: grid; 
    place-items: center;
    width: 100%;
    height: 100%;
    opacity: 1.0; /* Adjust the level of dimness (0.1 to 0.9) */
    pointer-events: none; /* Allows interaction with elements beneath if needed */
}
.menu-ses-inactive {
    position: relative; /* Essential for positioning the overlay */
    opacity: 0.4; /* start dimmed */
}
.menu-ses-inactive::after {
    content: 'ASSESS';
    FONT-SIZE: .95em;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 45%;
    display: grid; 
    place-items: center;
    width: 100%;
    height: 100%;
    opacity: 1.0; /* Adjust the level of dimness (0.1 to 0.9) */
    pointer-events: none; /* Allows interaction with elements beneath if needed */
}
.menu-ses-inactive:hover {
    opacity: 1.0; /* show normal on hover */
}

.menu-def-active {
    position: relative; /* Essential for positioning the overlay */
}
.menu-def-active::after {
    content: 'DEFINE';
    FONT-SIZE: .95em;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 45%;
    display: grid; 
    place-items: center;
    width: 100%;
    height: 100%;
    opacity: 1.0; /* Adjust the level of dimness (0.1 to 0.9) */
    pointer-events: none; 
}
.menu-def-inactive {
    position: relative; /* Essential for positioning the overlay */
    opacity: 0.4; /* start dimmed */
}

.menu-def-inactive:after {
    content: 'DEFINE';
    FONT-SIZE: .95em;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 45%;
    display: grid; 
    place-items: center;
    width: 100%;
    height: 100%;
    opacity: 1.0; /* Adjust the level of dimness (0.1 to 0.9) */
    pointer-events: none; 
}
.menu-def-inactive:hover {
    opacity: 1.0; /* show normal on hover */
}



  /* table header, rows and cells */ 

   .gcell {
     FONT-SIZE: .75em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     background-color: #E2E2E0;
     vertical-align: top;
     text-align:center;
     width: 210px;
     padding: 4px;
   }

   .wcell {
     FONT-SIZE: .75em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     background-color: #ffffff;
     vertical-align: top;
     text-align:center;
     width: 210px;
     padding: 4px;
     border:1px solid #000000;
   }

   .wcell90 {
     FONT-SIZE: .90em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     background-color: #ffffff;
     text-align:left;
     padding: 1px;
   }

   
   .hcell {
     FONT-SIZE: .75em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     font-weight: bold;
     background-color: #ffffff;
     vertical-align: top;
     text-align:left;
     width: 25%;
     padding: 4px;
     border:1px solid #000000;
   }
   .hcellimg {
     FONT-SIZE: .75em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     font-weight: bold;
     background-color: #ffffff;
     vertical-align: top;
     text-align:center;
     width: 25%;
     padding: 4px;
     border:1px solid #000000;
   }

   .hcellvm {
     FONT-SIZE: .75em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     font-weight: bold;
     background-color: #ffffff;
     vertical-align: center;
     text-align:left;
     width: 25%;
     padding: 4px;
     border:1px solid #000000;
   }
   
   .htwcell {
     FONT-SIZE: .75em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     font-weight: bold;
     background-color: #ffffff;
     vertical-align: center;
     text-align:center;
     width: 25%;
     padding: 4px;
     border:1px solid #000000;
   }
   .htgcell {
     FONT-SIZE: .75em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     font-weight: bold;
     background-color: #E2E2E0;
     vertical-align: center;
     text-align:center;
     width: 25%;
     padding: 4px;
     border:1px solid #000000;
   }
   
   .brow {
     border:1px solid #000000;
     height: 40px;
   }

   .prow {
     border:1px solid #000000;
     height: 20px;
   }

   .prcell {
     FONT-SIZE: .75em;
     COLOR: #000000;
     FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
     background-color: #ffffff;
     vertical-align: top;
     text-align:left;
     padding: 4px;
     border:1px solid #000673;
   }


  /* contact form */
   .form-container {
     background: white;
     /*border-radius: 5px;*/
     width: 100%;
     font: 16px Verdana, Arial, Helvetica, sans-serif;
     justify-content: center;
     align-items: center;
     padding: 2em 2em;
     box-sizing: border-box;

   }

   .form-group {
     margin-bottom: 20px;
   }

   .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
     font-size: 14px;
   }

   .form-group input,
   .form-group select,
   .form-group textarea {
     width: 100%;
     padding: 0px 4px;
     border: 1px solid #000673;
     font-size: 14px;
     font-family: inherit;
   }

   .form-group select {
     border-radius: 0px;
     border: 1px solid #000673;
    }

   .form-group input,
   .form-group select {
       height: 1.7em;
    }

   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus {
     outline: none;
     border-color: #000673;
   }

   .form-group textarea {
     resize: vertical;
     min-height: 4em;
   }

   .error-message {
     color: #e74c3c;
     font-size: 12px;
     margin-top: 5px;
     display: none;
   }

   .form-group.error input,
   .form-group.error select,
   .form-group.error textarea {
     border-color: #e74c3c;
   }

   .form-group.error .error-message {
     display: block;
   }