.navbar {
  overflow: hidden;
  background-color: ; /*#333;*/
 width:100%;  max-width:780px;
 
}

.navbar a {

  
 /* vertical-align:-9px; /*-9px*/
  font-size: 12px;
  font-weight:bold;
  color: white;
  text-align: center;
  text-decoration: none;
  
  
}

.subnav {
display: inline-block;
  overflow: hidden;
  
}

.subnav .subnavbtn {


  font-size: 12px;
  font-weight:bold;  
  border: none;
  outline: none;
  color: white;
  
  background-color: inherit;
  font-family: inherit;
  
}

.navbar a:hover, .subnav:hover .subnavbtn {
  opacity:0.9;
  color: gold;
  cursor:pointer;
}

.subnav-content {
  display: none;
  position: absolute;
   z-index: 102;
  left: auto; right:auto;
  background-color: #6B6969;
  width: auto;
  padding: 16px 0px 16px 0px;
}

.subnav-content a {
  float:left;
  color: white;
  text-decoration: none;
  

}

.subnav-content a:hover {
opacity:0.9;
   color: gold;
}

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



.MobileMenuButton{
	display: none;
	width:90%; padding:16px 0 18px 0;
	border: 2px white solid;
	background-color:  /*#333;*/
	
	font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight:bold; 
  color:white;
  position:relative;
  z-index: 3;

}


.top_menu_option{
display: inline-block;
width:32%;  vertical-align:top;  /*32% for 3  height:42px;  */
padding: 14px 0px 14px 0px;
}
.bottom_menu_option{
display: inline-block;
width:12%;  vertical-align:top; /*15% for 6 with fixed on last option height:42px;*/
padding: 13px 0px 13px 0px;
}
.sub_menu_option{

display:block;width:160px;
height:20px; margin:0 15px 0 15px; padding: 10px 0px 0px 0px;

}
.sub_menu_option_img{
vertical-align:-8px;
padding-right:6px;
height:28px;
}


.dropdownbutton{
position:relative;
top:-13px;
float:right;
background-color:#999999;
width:38px; height:38px;
display:none;
border-radius: 25px;
border:2px white solid; 

}


/* Extra small devices (phones, 600px and down) 700 */
@media only screen and (max-width: 630px)
{
   .dropdownbutton{display:inline-block;}
  .MobileMenuButton{display:block;}
  .navbar{display:none;}
  
  .top_menu_option{width:90%; height:42px; padding: 30px 0px 0px 0px; border:1px #999999 solid;}
  .bottom_menu_option{width:90%; height:42px; padding: 30px 0px 0px 0px; border:1px #999999 solid;}
  .sub_menu_option{width:90%; height:42px; padding: 14px 0px 0px 0px; }
  
  .subnav-content{width:270px; position:fixed; left:16%;/*left:16%*/}
    
    
    
    
    
    .subnav .subnavbtn {font-size: 12px;}
    .subnav a {font-size: 18px; }
    
.subnav:hover .subnav-content {display: none;}

.sub_menu_option_img{height:40px; vertical-align:-13px;}

    
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 631px) {
.navbar{display:block;}
.subnav a {font-size: 15px; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  
}