html {
   box-sizing: border-box;
}

*, *:before, *:after {
   box-sizing: inherit;
}

body {
   background-color: #49748E;
   font-family: Helvetica;
}

h1, h2, h3 {
   font-weight: normal;
}

.img100 {
   max-width: 100%;
}

.wrapper {
   max-width: 1120px;
   margin-left: auto;
   margin-right: auto;
   background-color: #f2f2f2;
}

header {
   display: flex;
}

#siteLogo {
   width: 320px;
}

.navArea {
   display: flex;
   flex-direction: column;
   max-height: 100px;
   background-image: url('../images/bgNavArea.png');
   flex: 1 1 500px;
}

#techEd {
   display: flex;
}

#compName {
   color: #313131;
   font-size: 28px;
   margin: 24px 0px 0px 0px;
   margin-bottom: 4px;
}

#mobileBtn {
   display: none;
   width: 30px;
   align-self: flex-end;
   margin-right: 5px;
   margin-top: -23px;
}

.mainNav {
   display: flex;
   flex: 0 1 500px;
   min-height: 40px;
   white-space: nowrap;
}

.mobileNav {
   display: none;
}

.menuList {
   display: flex;
   list-style-type: none;
   margin-top: 10px;
   padding: 0;
}

.menuItem {
   font-size: 120%;
   min-height: 40px;
   font-weight: 500;
   color: #e7e7e7;
   padding: 8px 16px;
   background-color: rgba(34, 108, 172, .8);
   cursor: pointer;
   text-decoration: none;
}

.menuItem:hover {
   background-color:#17466f;
}

footer {
   display: flex;
   background-image: url('../images/bgNavArea.png');
   justify-content: space-between;
}

footer ul {
   list-style-type: none;
}

footer li {
   padding: 3px 0px;
}

.copyright {
   margin-left: 16px;
   color: #545454;
}

.policies {
   margin-right: 16px;
   display: flex;
   color: #226BAC;
   /* align-self: center; */
}

.policies a {
   text-decoration: none;
}

.policies a:link {
   color: #49748E;
}

@media screen and (max-width: 850px) and (min-width: 619px) {

   #siteLogo {
      width: 240px;
   }

   #compName {
      font-size: 21px;
      margin: 16px 0px 0px 0px;
   }   

   .navArea {
      display: flex;
      height: 75px;
      background-image: url('../images/bgNavArea.png');
   }

   .mainNav {
      display: flex;
      flex: 0 1 500px;
      white-space: nowrap;
   }

   .menuItem {
      font-size: 90%;
      color: #e7e7e7;
      padding: 6px 10px;
      background-color: rgba(34, 108, 172, .8);
      cursor: pointer;
      text-decoration: none;
   }

}

@media screen and (max-width: 618px) {
   
   .wrapper {
      max-width: 600px;
      min-width: 360px;
      margin-left: auto;
      margin-right: auto;
      background-color: #f2f2f2;
   }

   #siteLogo {
      width: 160px;
      height: 40px;
   }

   #compName {
      font-size: 14px;
      margin: 12px 0px 0px 0px;
   }   
   
   .navArea {
      display: flex;
      height: 40px;
      background-image: url('../images/bgNavArea.png');
   }

   .mainNav {
      display: none;
   }

   #mobileBtn {
      display: flex;
   }

   .mobileNav {
      display: flex;
      z-index: 1;
      margin-top: -11px;
   }

   .menuColumn {
      display: none;
      flex-direction: column;
      position: absolute;
      margin-top: 10px;
      gap: 6px;
      list-style-type: none;
      padding: 0;

   }

   .menuColumn.active {
      display: flex;
   }

   .menuItem {
      margin: 0px 0px 0px 12px;
      font-size: 90%;
      color: #e7e7e7;
      padding: 2px 8px;
      background-color: rgba(34, 108, 172, .7);
      cursor: pointer;
      text-decoration: none;
   }

   footer {
      font-size: 0.7em;
   }

   .copyright {
      margin-left: 8px;
      padding: 3px;
   }

   .policies {
      margin-right: 8px;
   }

   footer li {
      padding: 3px 3px;
   }

   footer ul {
      padding: 0px 6px;
   }
}