div.header1{ display: flex; background-color: #80bfff;}
div.header2{ width: 5%; display: flex; border:0; margin:0; padding:0;}
figure.header3{ width:10%; display: flex; border:0; margin:0; padding:0;}
img.header4{ width:100%;}
div.header5{ width:70%; display: flex; border:0; margin:0; padding:0; justify-content: center; align-items: center;}
div.header6{ font-size:8vw; font-family: arial; color: blue; text-shadow: -4px 0px 4px #406fff;}
div.header7{ font-size:8vw; font-family: arial; color: blue; text-shadow: 4px 0px 4px #406fff;}

div.name{ width:100%; display: flex; border:0; margin:0; padding:0; justify-content: left; align-items: left;}
div.nameSound{ font-size:  calc(12px + 1.0vw); font-family: arial; color: blue; text-shadow: -4px 0px 4px #406fff;}
div.nameTechnic{ font-size: calc(12px + 1.0vw); font-family: arial; color: blue; text-shadow: 4px 0px 4px #406fff;}

footer > a.foot2{width:50%; font-size: calc(12px + 0.6vw); text-align: left; float:left; color:black; background-color: #80bfff; text-decoration:none;}
footer > div.foot3{width:50%; font-size: calc(12px + 0.6vw); text-align: right; float:right; color:blue; background-color: #80bfff;}


.flex-container {
    display: flex;
  }

div.img_width{ width:25%;}
figure.figr1 { border-style: solid; border-width: 0.1vw; border-color: grey; padding: 5px; margin: 0.5vw;  width:100%; height: auto; }
figcaption.figcpt1 { background-color: #222; color: #fff; font: italic smaller sans-serif; padding: 0.3vw; text-align: center; font-size:1vw;}
img.img1{ width:100%;}
figure.figr2 { border-style: solid; border-width: 0.1vw; border-color: grey; padding: 0px; margin: 0.0vw;  width:100%; height: auto; }

#hideMobile {
  display: run-in; /*Reset MOBILE. content worked*/
}

.hideMobile {display: run-in;}

/* *** MENU START *** */
/* Copied from Thameside, all needed? */
/* https://www.w3schools.com/css/css_dropdowns.asp */
  #NAV_ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #80bfff; /* turquoise; */ /* var(--menu-bg-color); */
  width: 100%;
}

      li.nav1_li {
        float: left;
        border-right:1px solid #bbb;
      }

      li.nav1_li :last-child {
        border-right: none;
      }

      /* This is applied to selector "a" within selector "li" */
      li.nav1_li a, .dropbtn {
        font-size:2vw;
        display: block; /* .dropbtn was "display:inline-block;"  */
        color: white;/*  var(--menu-content-color); */
        text-align: center;
        /* padding: 14px 16px; */
        /* padding: 8px 16px; */
        padding: 0.5vw 16px;
        padding-left: 1vw; padding-right: 1vw;
        text-decoration: none;
      }

        /* ">" selects "a" only if "li" is parent. So .dropdown-content a:hover {} works */
        li.nav1_li > a:hover:not(.active) {
        background-color: teal; /* var(--hover-bg-color1); */
      }

      .active {
        background-color: limegreen; /* var( --active-bg-color); */
      }

      .active_os {
        background-color: cyan;
      }

      .dropdown:hover .dropbtn {background-color: lightseagreen;} /* var(--hover-bg-color2);} */

      li.dropdown {display: inline-block;}

      .dropdown-content {
        display: none;
        position: absolute;
        background-color: lightseagreen; /* var(--dropdown-bg-color); */
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        opacity:0.9;
      }

      /* Could only apply opacity:1.0; to all of dropdown */
      .dropdown-content:hover  { opacity:1.0;}

      div.dropdown-content a {
        color: white; /* var(--dropdown-content-color); */
        /* padding: 12px 16px; */
        padding: 4px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
      }

      .dropdown-content a:hover {background-color: teal;}/*  var(--hover-dropdown-bg-color);} */

      .dropdown:hover .dropdown-content {
        display: block;
      }


/* ABOUT DROPDOWN */
.dropdown-contentAbout {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  /* I ADDED TO ALIGN TEXT TO LEFT */
  left:auto;
  right:0;
  margin-right:-10px;
  /* end I ADDED TO ALIGN TEXT TO LEFT */
}

.dropdownAbout:hover .dropdown-contentAbout {
  display: block;
}
/* *** MENU END *** */

div.contactDiv{
  background-color: lightblue;
  width: 400px; /* was width: 100%; MOBILE was 400px*/
  padding: 10px;
  border: 2vw solid springgreen;
  margin: 10px; flex-wrap: nowrap;
  order:2;
  flex-shrink: 1;    /*MOBILE was 0 */
}

/* For Contact FORM */
  .contactForm01, .contactForm02{ width: 390px; resize: none;}

  input[type=submit] {
  border: 1px solid blue;
  border-radius: 4px;
  font-size:15px;
  height: 30px;
  }

  .contactForm11, .contactForm12{
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      height: 0;
      width: 0;
      z-index: -2;
  }

  .contactForm22{ opacity: 1; } /*   Dummy param, does nothing */
/* For Contact FORM end*/

/* Added for \app\index.html */
a.button1 {
  padding: 1px 6px;
  border: 1px outset buttonborder;
  border-radius: 3px;
  color: black;
  background-color: #80bfff;
  text-decoration: none;
}