/* CSS for Menu Display */
* {
  box-sizing: border-box
  } 

.content {
  padding: 8px;
  }

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
  }

.sticky + .content {
  padding-top: 30px;
  }  
span, div {
  height: 25px; /*min-content;*/
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  }
span a.menu:hover, 
div button.menu:hover,
.dropdown:hover 
.dropbtn {
  color: #000;
  background-color: #E77500;
  text-decoration: none;
  z-index: 5;
  }
div a.menu, span a.menu, .dropbtn {
  display: inline-block;
  background-color: #FFF;
  color: #000;
  text-align: left;
  /* padding: 4px 9px; */
  font-size: 14px;
  text-decoration: none;
  /* border-left: 1px solid #FFFFFF; White border */
  z-index: 5;
  }
.dropbtn {
  background-color: #FFF;
  color: #000;
  /* padding: 4px 9px; */
  font-size: 14px;
  /*  border: none;*/
  cursor: pointer;
  z-index: 2;
  }

/* Dropdown icon for small screen menu - don't display on larger screen' */
.dropdown .dropMenu {
  display:none;
  }
  
/* Dropdown button on hover & focus */
.dropbtn:hover, 
.dropbtn:focus {
  outline: 1px dotted #FF6000;
  background-color: #FF8040;
  color: #000; /**/
  }

/* The container <div> - needed to position the dropdown content */
.dropdown:not(:first-child) {
  position: relative;
  background-color: #FFF;
  display: inline-block;
  font-family: sans-serif;
  font-size: 14px; 
  height: 20px;
  z-index: 3;
  vertical-align:top;
}
.MenuItem {
  height: 20px !important;
  vertical-align: middle;
  font-size: 14px;
  font-family: 'Libre Franklin', sans-serif;        /*background-color:#ff6;*/
  }

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  top: 95px;
  left: 300px; /* -150px; */
  text-align: left;
  background-color: #FFF;
  min-width: 150px; 
  width: 425px;
  height: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 7;
  outline: 2px solid #FF8040;
  }
.dropdown-content-main {
  display: none;
  position: absolute;
  top: 55px;
  left: 300px; /* -150px; */
  text-align: left;
  background-color: #FFCC99;
  min-width: 150px; 
  width: 425px;
  height: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 7;
  border: 3px groove #FF8040;
  }

/* Links inside the dropdown */
.dropdown-content a.menu, .dropdown-content button.menu {
  padding: 10px 20px;
  text-decoration: none;
  background-color: #FFF;
  display: block;
  text-align: left;
  height: auto;
  z-index: 5;
  }
.dropdown-content-main a.menu, .dropdown-content-main button.menu {
  padding: 3px 20px;
  text-decoration: none;
  background-color: #FFF;
  display: block;
  text-align: left;
  height: auto;
  z-index: 5;
  }

/* Change color of dropdown links on hover */
.dropdown-content a.menu:hover, 
.dropdown-content button.menu:hover {  
  outline: 1px dotted #FF8040;
  background-color: #FFF;
  color: #FF8040;
  }
.dropdown-content-main a.menu:hover, .dropdown-content-main button.menu:hover {  
  outline: 1px dotted #FF8040;
  background-color: #FF8040;
  color: #FFF;
  }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show { 
  display:block; z-index:5;
  } 

.chevron {
  width: 10px;
  height: 8px;
  position: relative;
  display: inline-block;
  background-color: #FF8040;
  /* margin: 50px; */
  }
.dropdown .dropbtn .img-sel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  }
.dropdown:hover .dropbtn .img-sel {
  display: inline;
  }

.thisMenuButton {
  width:80px; 
  height:auto !important; 
  margin:6px 10px 0 10px; 
  padding:0;
  text-align:center;
  }  
/* Below items are for menus on small screens */    
/* Hide the link that should open and close the navbar on small screens */
.dropdown .dropMenu .MenuIcon { display: none; }
/* When the screen is less than 725 pixels wide, hide all links, except for the first one (hamburger). 
   Show the link that contains the icon that should open and close the navbar (.icon) */
@media screen and (max-width: 655px) {
  div { display: block; 
        float: none;
        height: 25px;
      }
  
  .dropdown .dropbtn { /*  :not(:last-child) */
    display: none;
    }
  .dropdown:first-child .dropMenu { /* .MenuIcon */
    position: relative;
    background-color: #FF8040;
    /* margin-top: 40px; */
    padding: 4px 10px;
    cursor: pointer;
    float: right;
    display: block;
    z-index: 3;
    left: 0px; /*calc(100% - 200px);*/
    }
  .dropdown .dropMenu .MenuIcon { /* */
    background-color: #FF8040;
    padding: 4px 4px;
    cursor: pointer;
    float: right;
    display: block;
    z-index: 3;
    }

  .navbar.responsive { 
    position: relative;
    z-index: 2;
    }
  .navbar.responsive .dropdown button.MenuIcon { /*  */
    position: relative;
    right: 0;    left:calc(100% - 100px);
    top: 0;      float:left;
    }
  .navbar.responsive .dropdown {
    float: left;
    display: block;
    text-align: left;
    height: auto;
    z-index: 2;   
    left:calc(100% - 100px);
    min-width: 350px;
    }/* */
  .navbar.responsive .dropdown button {
    float: none; 
    display: block;
    left: calc(100% - 100px);
    text-align: left;
    height: auto;
    z-index: 2;
    background-color: #FF6000;
    }/* */
/* Dropdown Content (Hidden by Default) */ 
  .navbar.responsive .dropdown .dropdown-content {
    position: absolute;
    background-color: #FFF;
    min-width: 160px;
    left:  -150px; /*calc(100% - 300px) !important;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    outline: 2px solid #FF5000;
    top: 10px;
    /*z-index: 5; */
    }
  .navbar.responsive .dropdown .dropdown-content-main {
    position: absolute;
    background-color: #FFF;
    min-width: 160px;
    left: -180px !important; /*calc(100% - 300px) !important;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 1px solid #FF5000;
    top: 10px;
    text-align: left;
    height: auto;
    z-index: 5;
    } 

/* Links inside the dropdown */
  .navbar.responsive .dropdown .dropdown-content a {
    color: black;
    padding: 4px 16px;
    text-decoration: none;
    background-color: #FF8040;
    position: relative;
    z-index: 5; /* */
    }
  .navbar.responsive .dropdown .dropdown-content-main a:hover {
    background-color: #FF8040;
    color: #FFF;
    z-index: 5; /* */
    }
  .navbar.responsive .dropdown .dropdown-content {
    z-index:5;/*  */
    }
  }
  
/* Menu Text formatting */
.MenuText {
  font-family: 'Old Standard TT', serif;
  font-size: 14px;
}