/*  This file holds the navigation. 
/*  Contained within a topbar element defined in Cubnha.css
*/
/* Links inside the navigation bar */
.topnav a {
    float:          left;
    display:        block;
    color:          inherit;
    font-size:      110%;
    text-align:     center;
    padding:        5px 10px;
    text-decoration: none;
}

.topnav a:hover {
    color:          gray;
}

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

.dropdown .dropbtn {
    border:         none;
    outline:        none;
    color:          inherit;
    padding:        5px 10px;
    background-color: inherit;
    font-family:    inherit;
    font-size:      110%;
    margin:         0;
}

.dropdown-content {
    display:        none;
    position:       absolute;
    background-color: #f9f9f9;
    min-width:      160px;
    box-shadow:     0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:        99;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
text-align: left;
}

.dropdown:hover .dropbtn {
    color:        inherit;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
    display: block;
}

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

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 850 pixels wide, hide all links, except for the 
first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 850px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

/* Add the "responsive" class to the topnav with JavaScript when the user 
clicks on the icon with small screens. (display the links vertically instead of 
horizontally) */
@media screen and (max-width: 850px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav {
      float: right;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    background-color: #d9d9d9;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    background-color: #d9d9d9;
    width: 100%;
    text-align: left;
  }
}

/* ---------- End of menus amd top nav -------------*/