/* Add a black background color to the top navigation */
/* Style only for Google Chrome/Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .topnav {
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        margin-top: 22px; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        z-index: 990
    }
}

/* Style only for Mozilla Firefox */
@-moz-document url-prefix() {
    .topnav {
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        margin-top: 50px; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        z-index: 990
    }
}

/* Style only for Internet Explorer */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .topnav {
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        margin-top:18px; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        z-index: 990
    }
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 13px;
}

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

/* dropdownRP container - needed to position the dropdownRP content */
.dropdownRP {
  float: left;
  overflow: hidden;
}

/* Style the dropdownRP button to fit inside the topnav */
.dropdownRP .dropbtn {
  font-size: 13px; 
  border: none;
  outline: none;
  color: white;
  padding: 12px 12px;
  background-color: #333;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdownRP content (hidden by default) */
.dropdownRP-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: 1;
}

/* Style the links inside the dropdownRP */
 .dropdownRP-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdownRP button on hover */
.topnav a:hover, .dropdownRP:hover .dropbtn {
   background-color: #555;
   color: white;
}

/* Add a grey background to dropdownRP links on hover */
.dropdownRP-content a:hover {
   background-color: #ddd;
   color: black;
}

/* Show the dropdownRP menu when the user moves the mouse over the dropdownRP button */
.dropdownRP:hover .dropdownRP-content {
  display: block;
}

/* When the screen is less than 600 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: 1000px) {
  .topnav {
    margin-left: -70px;
	width: 100%
  }
  .topnav a:not(:first-child), .dropdownRP .dropbtn {
    display: none;
  }
  .topnav a.icon {
    display: block;
  }
}

/* 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 (display the links vertically instead of horizontally) */
@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdownRP {
      float: none;}
  .topnav.responsive .dropdownRP-content {position: relative;}
  .topnav.responsive .dropdownRP .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


/* Application (Sub)Menu

/* Add a black background color to the top navigation */
/* Style only for Google Chrome/Opera */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .topnav2 {
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        margin-top: 0px; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        z-index: 990
    }

}

/* Style only for Mozilla Firefox */
@-moz-document url-prefix() {
    .topnav2 {
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        margin-top: 0px; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        z-index: 990
    }
}

/* Style only for Internet Explorer */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .topnav2 {
        background-color: #333;
        position: fixed; /* Set the navbar to fixed position */
        margin-top: 0px; /* Position the navbar at the top of the page */
        width: 100%; /* Full width */
        z-index: 990
    }
}

/* Style the links inside the navigation bar */
.topnav2 a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 12px 12px;
    text-decoration: none;
    font-size: 13px;
}

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

/* dropdownRP container - needed to position the dropdownRP content */
.dropdownRP {
    float: left;
    overflow: hidden;
}

    /* Style the dropdownRP button to fit inside the topnav2 */
    .dropdownRP .dropbtn {
        font-size: 13px;
        border: none;
        outline: none;
        color: white;
        padding: 12px 12px;
        background-color: #333;
        font-family: inherit;
        margin: 0;
    }

/* Style the dropdownRP content (hidden by default) */
.dropdownRP-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: 1;
}

    /* Style the links inside the dropdownRP */
    .dropdownRP-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

/* Add a dark background on topnav2 links and the dropdownRP button on hover */
.topnav2 a:hover, .dropdownRP:hover .dropbtn {
    background-color: #555;
    color: white;
}

/* Add a grey background to dropdownRP links on hover */
.dropdownRP-content a:hover {
    background-color: #ddd;
    color: black;
}

/* Show the dropdownRP menu when the user moves the mouse over the dropdownRP button */
.dropdownRP:hover .dropdownRP-content {
    display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav2 (.icon) */
@media screen and (max-width: 1000px) {
    .topnav2 {
        width: 100%
    }

        .topnav2 a:not(:first-child), .dropdownRP .dropbtn {
            display: none;
        }

        .topnav2 a.icon2 {
            display: block;
        }
}

/* The "responsive" class is added to the topnav2 with JavaScript when the user clicks on the icon. This class makes the topnav2 look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1000px) {
    .topnav2.responsive {
        position: relative;
    }

        .topnav2.responsive a.icon2 {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav2.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

        .topnav2.responsive .dropdownRP {
            float: none;
        }

        .topnav2.responsive .dropdownRP-content {
            position: relative;
        }

        .topnav2.responsive .dropdownRP .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
}