/* TOP NAVIGATION */
nav {
    display: flex;
    justify-content: space-between;
    margin: auto;
    width: 100%;
    position: fixed;
    top: 0;
    transition: top 0.4s ease-in;
    z-index: 10;
}

.navUp {
    top: -150px;
}


/* Remove margins and padding from the list, and add a black background color */
ul.topNav {
    list-style-type: none;
    overflow: hidden;
    margin-top: 25px;
    width: auto;
    color: white;
    text-align: right;
    box-sizing: border-box;
    flex-grow: 2;
}

/* Float the list items side by side */

ul.topNav li {
    max-width: inherit;
    display: inline-block;
    margin: 0 auto;
    order: 1;
}
/* Style the links inside the list items */

.topNav li a {
    display: inline-block;
    text-align: center;
    margin: 8px 20px;
    color: inherit;
    text-decoration: none;
    font-size: 18px;
}

.active {
    border-bottom: 1px solid #fff;
}

.active-trans {
    border-bottom: 1px solid #fff;
    ;
}

ul.topNav li a:hover {
    border-bottom: 1px #fff solid;
    -webkit-transition: border 200ms linear;
    -ms-transition: border 200ms linear;
    transition: border 200ms linear;
}

ul.topNav li.icon {
    display: none;
}
@media screen and (max-width: 1060px) {.topNav li a {margin: 8px 10px}}

@media screen and (max-width: 768px) {
    ul.topNav {
      margin-top: 0;
      position: absolute;
      top: 0;
      right: 0;
      width: auto;
    }

    ul.topNav li {
        display: none;
    }

    ul.topNav li.icon {
        display: inline-block;
        float: right;
        border-bottom: 0;
    }

    ul.topNav li.icon a:hover {
        border-bottom: none;
    }

    ul.topNav li a {
        font-size: 25px;
        border-bottom: 0;
        margin: 20px 20px;
    };
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width: 768px) {
    ul.topNav.responsive {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }

    ul.topNav.responsive li {
        float: none;
        display: inline;
        width: 200px;
    }

    ul.topNav.responsive li a {
        display: block;
        text-align: right;
        border-bottom: none;

    };
}

.anchor {
    display: block;
    position: relative;
    top: 40px;
    visibility: hidden;
}

.nav-change {
  color: #333333;
}
.nav-change:hover {
  border-bottom-color: #333333;
}

/* END TOP NAVIGATION */