.headerBar {
   display: flex;
   position: relative;
   flex-flow: row nowrap;
   margin-top: 1.2vw;
   margin-bottom: 1.4vw;
   width: 100%;
   /* border: 2px solid orange; */
}

.headerBar .headerIcon {
   display: flex;
   position: relative;
   flex-flow: column;
   justify-content: space-around;
   align-items: left;
   margin-right: auto;
   padding-left: 3vw;
   width: 20vw;
   height: auto;
   /* border: 2px solid red; */
}

.headerIcon img {
   width: 40%;
   height: auto; 
}

.headerBar .headerList {
   display: flex;
   position: relative;
   flex-flow: row nowrap;
   width: 80vw;
   /*border: 2px solid red;*/
}

.headerList .header-nav-list {
   list-style-type: none;
   margin-left: auto;
   margin-right: 5vw;
   text-align: right;
}

.header-nav-list .header-list-item {
   display: inline-block;
   padding-top: 2vw;
   padding-bottom: 1vw;
}

.headerBar a {
   color: #0076C6;
   margin-left: 2vw;
   padding-bottom: 0.15vw;
   font-weight: bold;
   font-size: calc( 0.65rem + (1.1 - 0.65) * ((100vw - 28rem) / (77.5 - 28)));
   text-decoration: none;
   outline: none;
   /* border: 2px solid orange */
}

.headerBar .currentItem {
   border-bottom: 3px solid #0076C6;
}

.footerBar {
   display: flex;
   position: relative;
   flex-flow: row nowrap;
   margin-top: 1vw;
   margin-bottom: 2vw;
   width: 100%;
   /*border: 2px solid orange;*/
}

.footerBar .footerIcon {
   display: flex;
   position: relative;
   flex-flow: column;
   justify-content: space-around;
   align-items: left;
   margin-right: auto;
   padding-left: 5vw;
   width: 20vw;
   height: auto;
   /*border: 2px solid red;*/
}

.footerIcon img {
   width: 40%;
   height: auto; 
}

.footerBar .footerTextList {
   display: flex;
   position: relative;
   /* flex-flow: column; */
   flex-flow: row nowrap;
   justify-content: flex-end;
   align-self: flex-end;
   text-align: right;
   padding-bottom: 1vw;
   width: 50vw;
   height: auto;
   /* border: 2px solid blue; */
}

.footerBar .footerList {
   display: flex;
   position: relative;
   flex-flow: row nowrap;
   align-self: flex-end;
   width: 30vw;
   height: auto;
   /*border: 2px solid red;*/
}

.footerList .footer-nav-list {
   list-style-type: none;
   margin-left: auto;
   margin-right: 5vw;
   text-align: right;
}

.footer-nav-list .footer-list-item {
   display: inline-block;
   padding-bottom: 1vw;
}

.footer-nav-list .footer-list-text-item {
   display: inline-block;
   padding-top: 2vw;
   margin-right: 5vw;
   color: #0076C6;
   text-decoration: none;
   /*font-size: 0.65rem;*/
   font-size: calc( 0.5rem + (0.65 - 0.5) * ((100vw - 28rem) / (77.5 - 28)));   
}

.footerList a {
   color: #0076C6;
   /*font-size: 1.1rem;*/
   font-size: calc( 0.65rem + (1.1 - 0.65) * ((100vw - 28rem) / (77.5 - 28)));
}

.footerTextList p {
   padding-left: 5vw;
   color: #0076C6;
   text-decoration: none;
   font-size: calc( 0.5rem + (0.65 - 0.5) * ((100vw - 28rem) / (77.5 - 28)));
}

@media all and (max-width:480px) {
   
   .headerBar .headerIcon {
      padding-left: 2vw;
   }
   
   .headerIcon img {
      width: 80%;
      height: auto; 
   }
   
   .header-nav-list .header-list-item {
      padding-top: 4vw;
   }
   
   .headerBar a {
      font-size: 0.85rem;
   }
   
   .footerIcon img {
      width: 80%;
      height: auto; 
   }
   
   .footerList a {
      font-size: 0.575rem;
   }
   
   .footerBar .footerList {
      width: 33vw;
   }
   
   .footerbar .footerTextList {
      flex-flow: column;
      width: 47vw;
      font-size: 0.4rem;
   }
   
   .footerTextList p {
      padding-left: 0;
      text-align: center;
      font-size: 0.4rem;
   }
}