/* Styles the uppermost navigation bar */

:root {
  --nav-font-family: arial, helvetica, san-serif;
  --nav-font-weight: 500;
  --nav-font-size: 0.85em;
  --nav-text-transform: uppercase;
  --nav-bar-radius: 0px;
  --nav-button-border: 0px solid #476072;
  --nav-button-background: #fff;
  --nav-button-super-background: #ffc966;
  --nav-button-drop-typ-background: #e3e0cc;
  --nav-button-active: #282D3C;
  --nav-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
  --nav-button-margin: 2px 2px 2px 0px;
  --nav-button-padding: 5px 10px 6px 10px;
  --nav-button-radius: 7px;
  --nav-button-span: 8px;
}

.topnav {
  margin: 10px 5px 20px 5px;
  overflow: hidden;
  background-color: var(--nav-button-background);
  font-family: var(--nav-font-family);
  font-weight: var(--nav-font-weight);
  font-size: var(--nav-font-size);
  text-transform: var(--nav-text-transform);
  border-top: 4px dotted var(--nav-button-active);
  border-radius: var(--nav-bar-radius);
}

.topnav a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  margin: var(--nav-button-margin);
  padding: var(--nav-button-padding);
  text-decoration: none;
  border: var(--nav-button-border); 
  background-color: var(--nav-button-background); 
  border-radius: var(--nav-button-radius);
  z-index: 2;
}


.topnav a span {
 margin: var(--nav-button-span);
}

.topnav a:hover {
  background-color: var(--nav-button-active);
  color: #fff;
  box-shadow: var(--nav-box-shadow);
}

.topnav a.active {
  background-color: var(--nav-button-active);
  color: #fff;
}

.topnav a.super {
   background-color: var(--nav-button-super-background);
}

.topnav a:hover.super {
  background-color: orangered;
  box-shadow: var(--nav-box-shadow);
}

.topnav a.active.super {
  background-color: orangered;
  color: #fff;
}

.topnav .icon {
  display: none;
}

.topnav i {
  padding: 0px 3px 0px 3px;
}

.dropdown {
  float: left;
  overflow: hidden;
  
}

.dropbtn {
  text-align: center;
  margin: var(--nav-button-margin);
  padding: var(--nav-button-padding);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--nav-button-radius);
  font-family: var(--nav-font-family);
  font-weight: var(--nav-font-weight); 
  text-transform: var(--nav-text-transform);
  border: var(--nav-button-border);
  background-color: var(--nav-button-background); 
}

.dropbtn span {
 margin: var(--nav-button-span);

}

.super {
  background-color: var(--nav-button-super-background);
}

.dropbtn:hover {
  background-color: var(--nav-button-active);
  color: #fff;
  box-shadow: var(--nav-box-shadow);
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: auto;
  z-index: 1;
  font-weight: normal;
  text-transform: none;
  text-indent: 0px;
  
}

.dropdown-content a {
  float: none;
  text-decoration: none;
  display: block;
  text-align: left;
  box-shadow: var(--nav-box-shadow);

}

.dropdown-content a:hover {
}

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

.dropdown-content2 {
  display: none;
  position: absolute;
  min-width: auto;
  z-index: 1;
  font-weight: normal;
  text-transform: none;
  text-indent: 0px;
}

.dropdown-content2 a {
  float: none;
  text-decoration: none;
  display: block;
  text-align: left;
  box-shadow: var(--nav-box-shadow);
  background-color: var(--nav-button-drop-typ-background);
}

.dropdown-content2 a:hover {
}

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

.arrow {
  border-style: solid;
  border-width: 0 3px 3px 0;
  border-color: inherit;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.dropdown:hover .dropbtn .arrow {
  border-color: #fff;
}


@media screen and (max-width: 860px) {
    :root {
  --nav-font-size: 1.1em;
}
  
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .topnav.responsive .dropdown{float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown-content2 {
    position: relative;
    left: 0px;
  }
  
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 1.0em;
  }
  
    .dropdown .dropbtn, .dropdown-content,  .dropdown-content a {
    display: none;  
  }
  
  .dropdown-content a {
    text-indent: 20px;
    position: relative;
    left: 0px;
    box-shadow: none;
  }
  
   .dropdown-content2 a {
    text-indent: 20px;
    position: relative;
    left: 0px;
    box-shadow: none;
  }
  

  
}