*{
  box-sizing: border-box;
}

nav{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background: rgb(40,40,40);
  background: linear-gradient(0deg, rgba(40,40,40,1) 0%, rgba(75,75,75,1) 100%);
  width:100%;
  z-index:1;
  height: 48px; /*add this*/
}
nav ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
background: rgb(40,40,40);
background: linear-gradient(0deg, rgba(40,40,40,1) 0%, rgba(75,75,75,1) 100%);
  font-family:arial;
	width:80%;
	margin:0 auto;
}

nav ul.topnav li {float: left;}

nav ul.topnav li a, nav .dropbtn  {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul.topnav li a:hover:not(.active) {background-color: #111;}

nav ul.topnav li a.active {
	background: rgb(12,1,199);
	background: linear-gradient(0deg, rgba(12,1,199,1) 0%, rgba(0,99,255,1) 100%);
}

nav ul.topnav li.right {float: right;}

nav li a:hover, .dropdown:hover .dropbtn {
	background: rgb(12,1,199);
	background: linear-gradient(0deg, rgba(12,1,199,1) 0%, rgba(0,99,255,1) 100%);
}

nav li.dropdown {
  display: inline-block;
}

nav .dropdown-content {
  display: none;
  position: absolute;
  background: rgb(40,40,40);
  background: linear-gradient(0deg, rgba(40,40,40,1) 0%, rgba(75,75,75,1) 100%);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

nav .dropdown-content a:hover {background-color: #f1f1f1;}

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

.menu-btn{
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 49px;
cursor: pointer;
transition: all 0.5s ease-in-out;
/* border: 3px solid #FFF; */
}
.menu-btn__burger{
  width: 50px;
  height: 6px;
  background-color: #FFF;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all 0.5s ease-in-out;
}
.menu-btn__burger::before, .menu-btn__burger::after{
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background-color: #FFF;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all 0.5s ease-in-out;
}

.menu-btn__burger::before{
  transform: translateY(-16px);
}

.menu-btn__burger::after{
  transform: translateY(16px);
}

/*ANIMATION*/
.menu-btn.open .menu-btn__burger{
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}

.menu-btn.open .menu-btn__burger::before{
transform: rotate(45deg) translate(35px, -35px);
}

.menu-btn.open .menu-btn__burger::after{
transform: rotate(-45deg) translate(35px, 35px);
}


@media screen and (max-width: 600px){ /*add this*/
  nav ul.topnav li{
    display: none;
    }
  .menu-btn{
      float: right;
  }
  .show{
    font-family: arial;
    color: #FFF;
    display: inline-block;
    text-decoration: none;
    padding-top: 14px;
    padding-left: 16px;
  }
  .last{
    cursor: default;
  }

  .mobile{
    display: block;
    background-color: #A9A9A9;
    text-align: center;
    height: 42px;
    border: 2px solid #696969;
    padding-top: 12px;
      }
.mobileElem{
  font-family: arial;
  text-decoration: none;
  display: inline-block;
  color: #FFFFFF;
}

.mobile.inner{
  display: none;
}

}

@media screen and (min-width: 601px){ /*add this*/
  .menu-btn{
    display: none;
    }
  .mobile{
    display: none;
  }
}