body {margin:0; }
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
 overflow: hidden;
  background-color: #202B3F;  /*#00134d ;  #737373  #3399ff;*/
font-size: 17px;

     
}


ul.topnav li {float: left;  
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;;
  text-align: center;
  padding: 14px 8px;   /* 14px 16px; */
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
  font-size: 12px;  /* 16px */

  -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
  -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
  box-shadow: 1px 2px 3px rgba(0,0,0,.5);

}

 
.highlight{
 background-color: #e67300;  
}

.navRight{
  float: right; 
  display:inline-block;
  margin-bottom:0;
  vertical-align:middle;
}


ul.topnav li a:hover {background-color: #111;}

ul.topnav li.icon {display: none;}

ul.topnav li.icon a { 
 /*  font-size:30px;  */
}


@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {
   display: none;
   
  }

  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  .navRight{
    float: right; 
    display:inline-block;
    margin-bottom:0;
    vertical-align:middle;
    display: none;
  }

  
}


@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

ul.topnav.responsive .navRight {
    float: none;
    display: block;
  }



}


@media screen and (min-width:680px) {
  ul.topnav {
  /*  height:42px;*/ /*removes/hides second line overflow*/ 
  }

}


@media screen and (min-width:681px) and (max-width:800px) {
  ul.topnav li a {
    padding: 14px 5px;
    font-size: 12px;
  }
}

@media screen and (min-width:801px) and (max-width:1200px) {
  ul.topnav li a {
    padding: 14px 8px;
    font-size: 14px;
  }
}