#mnuimg {
  float:right;
  margin-right:20px;
  position:relative;
  z-index: 3;
  width="22px";
  height="21px";
}
#hovtxt {
  border: none;
  display: none;
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin-top: 0px;
  text-decoration:none;
  padding: 5px;
}

#hovmnu:hover #hovtxt {
  display: block;
  position: absolute;
  right:35px;
  top:18px;
}

ul {
  text-decoration:none;
  list-style: none;
  }
  
ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.mnu-list {
  text-decoration:none;
  list-style: none;
  }

ul.mnu-list li {
  display: inline-block;
  height: 0px;
  margin: 0 0 0 0 ;
  position: relative;
  width: 0px;
  list-style-type: none;
}
span.menu-text {
  background: rgba(0,0,0,0);
  color: white;
  cursor: pointer;
  display: table;
  height: 60px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
ul.mnu-list li:hover span.menu-text {
  opacity: 1;
}
  
.mbox {
  width: 80px;
  height: 50px;
  }
  
.mbox:hover {
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  }
.mbred {
  background:#E32636;
  }
.mbblue {
  background:#0047AB;
  }
.mbyell {
  background:#FB7D20;
  }
.mbgreen {
  background:#3007B6;
  }
.mbpurp {
  background:#0F9B86;
  }
.mnulong {
 width: 600px;
 margin: 0;
 vertical-align: top;
 }
.mnutab {
 width: 300px;
 padding: 0;
 margin: 0;
  vertical-align: top;
 }
  
  
  
div.mnubar{
    display: flex;
    min-height: 100vh; /* set min container height to viewport height */
    max-height: 100px;
    max-width: 900px;
}