ul.topnav{list-style-type:none;margin:0;position:fixed !important;z-index:10;background-color: rgba(170, 170, 170, .55);backdrop-filter: blur(10px);height:100px;width:100%;display:block;border-bottom:dotted 5px #fef1ad}
ul.topnav li{display:inline-block;position:relative;list-style-type:none;margin:15px 25px}
ul.topnav li a{display:block;text-decoration:none;font-size:35px;font-weight:800;padding:20px;color:#666666;font-family:'Metamorphous'}
ul.topnav li a:hover{transition:0.4s;color:#cccc99;padding:20px}
ul.topnav li.icon{display:none}
ul.dropdown-menu{border:solid 2px #fef1ad;display:none;position:absolute;top:100%;left:0;background-color:#666666;padding:0;margin:0;width:auto}
ul.dropdown-menu li{display:block;position:relative;margin:5px 0px}
ul.dropdown-menu li a{display:block;text-decoration:none;color:#cccc99}
ul.dropdown-menu li a:hover{color:#cccc99}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  /* CSS */
ul.topnav{list-style-type:none;margin:0;position:fixed !important;z-index:10;background-color: rgba(170, 170, 170, .55);backdrop-filter: blur(10px);height:100px;width:100%;display:block;border-bottom:dotted 5px #fef1ad}
ul.topnav li{display:inline-block;position:relative;list-style-type:none;margin:15px 25px}
ul.topnav li a{display:block;text-decoration:none;font-size:35px;font-weight:800;padding:20px;color:#cccc99;font-family:'Metamorphous'}
ul.topnav li a:hover{transition:0.8s;color:#669966;padding:20px}
ul.topnav li.icon{display:none}
ul.dropdown-menu{border:solid 2px #fef1ad;display:none;position:absolute;top:100%;left:0;background-color:#666666;padding:0;margin:0;width:auto}
ul.dropdown-menu li{display:block;position:relative;margin:5px 0px}
ul.dropdown-menu li a{display:block;text-decoration:none;color:#cccc99}
ul.dropdown-menu li a:hover{color:#cccc99}
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  
  /* CSS */
ul.topnav{list-style-type:none;margin:0;position:fixed !important;z-index:10;background-color:#aaa;height:100px;width:100%;border-bottom:dotted 5px #fef1ad}
ul.topnav li{display:flex;position:absolute;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;z-index:10}
ul.topnav li a{text-align:left;display:flex;position:absolute;top:15px;text-decoration:none;font-size:35px;font-weight:600;padding:15px;color:#cccc99;font-family:'Metamorphous';z-index:10}
ul.topnav li:not(:first-child){display:none}
ul.topnav li.icon{position:absolute;display:flex;right:53.484px;top:15px;z-index:10}
ul.topnav li a:hover{transition:0.8s;color:#666666;padding:15px;z-index:10}
ul.topnav.responsive{width:100%;height:auto;display:block;background-color:#aaa;z-index:11;position:absolute}
ul.topnav.responsive li.icon{text-align:right;position:absolute;right:5px;top:15px;z-index:11}
ul.topnav.responsive li{float:none;display:inline;position:relative;z-index:11}
ul.topnav.responsive li a{text-align:left;position:relative;top:15px;z-index:11}
ul.dropdown-menu{display:none;width:27.5%;margin-left:36.5%;position:relative;z-index:12!important}
ul.dropdown-menu li{top:-15px;display:flex;position:relative;margin:0px 0px;z-index:12!important}
ul.dropdown-menu li a{top:-15px;width:100%;display:block;text-decoration:none;color:#cccc99;z-index:12!important}
ul.dropdown-menu li a:hover{color:#cccc99;z-index:12!important}
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  /* CSS */
ul.topnav{list-style-type:none;margin:0;position:fixed !important;z-index:10;background-color:#aaa;height:100px;width:100%;border-bottom:dotted 5px #fef1ad}
ul.topnav li{display:flex;position:absolute;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;z-index:10}
ul.topnav li a{text-align:left;display:flex;position:absolute;top:15px;text-decoration:none;font-size:35px;font-weight:600;padding:15px;color:#cccc99;font-family:'Metamorphous';z-index:10}
ul.topnav li:not(:first-child){display:none}
ul.topnav li.icon{position:absolute;display:flex;right:53.484px;top:15px;z-index:10}
ul.topnav li a:hover{transition:0.8s;color:#666666;padding:15px;z-index:10}
ul.topnav.responsive{width:100%;height:auto;display:block;background-color:#aaa;z-index:11;position:absolute}
ul.topnav.responsive li.icon{text-align:right;position:absolute;right:5px;top:15px;z-index:11}
ul.topnav.responsive li{float:none;display:inline;position:relative;z-index:11}
ul.topnav.responsive li a{text-align:left;position:relative;top:15px;z-index:11}
ul.dropdown-menu{display:none;width:27.5%;margin-left:36.5%;position:relative;z-index:12!important}
ul.dropdown-menu li{top:-15px;display:flex;position:relative;margin:0px 0px;z-index:12!important}
ul.dropdown-menu li a{top:-15px;width:100%;display:block;text-decoration:none;color:#cccc99;z-index:12!important}
ul.dropdown-menu li a:hover{color:#cccc99;z-index:12!important}
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  /* CSS */
ul.topnav{list-style-type:none;margin:0;position:fixed !important;z-index:10;background-color:#aaa;height:100px;width:100%;border-bottom:dotted 5px #fef1ad}
ul.topnav li{display:flex;position:absolute;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;z-index:10}
ul.topnav li a{text-align:left;display:flex;position:absolute;top:15px;text-decoration:none;font-size:35px;font-weight:600;padding:15px;color:#cccc99;font-family:'Metamorphous';z-index:10}
ul.topnav li:not(:first-child){display:none}
ul.topnav li.icon{position:absolute;display:flex;right:53.484px;top:15px;z-index:10}
ul.topnav li a:hover{transition:0.8s;color:#666666;padding:15px;z-index:10}
ul.topnav.responsive{width:100%;height:auto;display:block;background-color:#aaa;z-index:11;position:absolute}
ul.topnav.responsive li.icon{text-align:right;position:absolute;right:5px;top:15px;z-index:11}
ul.topnav.responsive li{float:none;display:inline;position:relative;z-index:11}
ul.topnav.responsive li a{text-align:left;position:relative;top:15px;z-index:11}
ul.dropdown-menu{display:none;width:27.5%;margin-left:36.5%;position:relative;z-index:12!important}
ul.dropdown-menu li{top:-15px;display:flex;position:relative;margin:0px 0px;z-index:12!important}
ul.dropdown-menu li a{top:-15px;width:100%;display:block;text-decoration:none;color:#cccc99;z-index:12!important}
ul.dropdown-menu li a:hover{color:#cccc99;z-index:12!important}
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  /* CSS */
ul.topnav{list-style-type:none;margin:0;position:fixed !important;z-index:10;background-color:#aaa;height:100px;width:100%;border-bottom:dotted 5px #fef1ad}
ul.topnav li{display:flex;position:absolute;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;z-index:10}
ul.topnav li a{text-align:left;display:flex;position:absolute;top:15px;text-decoration:none;font-size:35px;font-weight:600;padding:15px;color:#cccc99;font-family:'Metamorphous';z-index:10}
ul.topnav li:not(:first-child){display:none}
ul.topnav li.icon{position:absolute;display:flex;right:53.484px;top:15px;z-index:10}
ul.topnav li a:hover{transition:0.8s;color:#669966;padding:15px;z-index:10}
ul.topnav.responsive{width:100%;height:auto;display:block;background-color:#aaa;z-index:11;position:absolute}
ul.topnav.responsive li.icon{text-align:right;position:absolute;right:5px;top:15px;z-index:11}
ul.topnav.responsive li{float:none;display:inline;position:relative;z-index:11}
ul.topnav.responsive li a{text-align:left;position:relative;top:15px;z-index:11}
ul.dropdown-menu{display:none;width:27.5%;margin-left:36.5%;position:relative;z-index:12!important}
ul.dropdown-menu li{top:-15px;display:flex;position:relative;margin:0px 0px;z-index:12!important}
ul.dropdown-menu li a{top:-15px;width:100%;display:block;text-decoration:none;color:#cccc99;z-index:12!important}
ul.dropdown-menu li a:hover{color:#cccc99;z-index:12!important}
}

@media (min-width: 320px) and (max-width: 480px),
       (min-width: 481px) and (max-width: 767px),
       (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #home a {
    pointer-events: none;
    cursor: default;
  }
}