.nav-container
{
    background-color: #002d56; /* #00183e */
    width: 96%;
    padding-left: 4%;
    
    /* sticky header */
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #002d56;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: .5em 1% .5em 1%; margin: 0; 
    text-decoration: none;
    font-size: 0.9em;
    font-family: "Futura", "Calibri", sans-serif;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #00588e;
    color: white;
    text-decoration: underline;
}

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


/* SMALL SCREENS */
@media only screen and (max-width: 880px)
{ 

  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    margin-right: 5%;  
    float: right;
    display: block;
  }
    
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} /* SMALL SCREENS */