nav {
    font-family: 'Encode Sans';
    src: url(EncodeSans-VariableFont_wdth,wght.ttf);
font-weight:100;
font-size: 0.9rem; 
line-height: 0.5; 
color: white;
opacity:0.8;

ul {
 display: flex;
    margin-top: 0vh;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: center;
text-align: left;
margin-left: -0.5vmin;
opacity:1.0;
}
          
li {
  padding: 55px; 
  position: relative;
  transition: background 0.9s;
line-height: 0.5; 
margin-top:10vmin
}

li:not(:last-child) {
}

a {
  color: white;
  text-decoration: none;
line-height: 0.3; 
  transition: color 0.5s;
}

ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 70%;
  left: 15%;
  right:10%
  margin: 0;
  padding: 0;
  transition: opacity 0.9s, visibility 0.5s;
}

ul ul li {
  margin: 0;
  padding: 10px;
  width: 100%;
}

ul ul a {
  color: white;
}

li:hover {
  background: ;
}

li:hover > a {
  color: orange;
}

li:hover ul {
  visibility: visible;
  opacity: 0.9;
}
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
html {
  scrollbar-width: none;
}



@keyframes slide-in {
  0% {
    bottom: -50px;
  }
  40% {
    bottom: 20px;
  }
  70% {
    bottom: 10px;
  }
  100% {
    bottom: 0;
  }
}
@media only screen and (max-width: 300px) and (min-width: 601px) {
ul{
display: none;
}
}

@media only screen and (max-width: 800px) and (min-width: 601px) {
ul{
display: none;
}

 }

@media only screen and (max-width: 1250px) and (min-width: 801px) {

ul{
display: none;
}
 }