ul {
   padding-top:5pt;
   padding-bottom:2pt;
   padding-left:10pt;
}

li {
   line-height:150%;
}

.navbar ul {
   padding-top:0pt;
   padding-left:0pt;
}

.navbar li {
   list-style: none;
}

.topLink {
   text-decoration: none;
   color: #2F3031;
   padding: 0.2rem 0.5rem;
}
.topLink.dark {
   color: #eeeeee;
}

.topLink:hover {
   color: #2F3031;
   background-color: rgba(0,0,0,0.05);
   outline: none;
   border-radius: 8pt;
}

.topLinkSelected {
   text-decoration: none;
   padding: 0.2rem 0.7rem;
   color: #2F3031;
   background-color: rgba(0,0,0,0.1);
   outline: none;
   border-radius: 8pt;
   text-decoration: none;
   font-weight: bold;
}
.topLinkSelected.dark {
   color: #eeeeee;
}

.topLinkSelected:hover {
   color: #2F3031;
}

header {
   position: relative;
   padding: 0rem 0.5rem;
}


.navbar {
   width: 100%;
   height: 28pt;
   max-width: 1200pt;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   //justify-content: center;
   //box-shadow: 1px 1px 5px 20pt;
   border-bottom: 1px solid #EEEEEE;
}
.navbar.dark {
   border-bottom: 1px solid #333333;
}

.navbar .logo .logoImg {
   height: 1.8rem;
   vertical-align: middle;
   margin-right:2pt;
   position: relative;
   top: -1pt;
}

.navbar .logoFPV {
   display:inline;
}

.navbar .logoFPV.dark {
}

.navbar .topLinks {
   display: flex;
   gap: 4pt;
}

.topLightDark {
   font-size: 0.7rem;
   cursor: pointer;
}

.topLightDark.dark {
   font-size: 0.7rem;
   cursor: pointer;
   color: #eeeeee;
}


.topLightDark .topLightDarkIcon {
   opacity:0.6;
   font-size: 1.0rem;
   cursor: pointer;
   padding: 4pt;
   vertical-align:middle;
}

.navbar .topButton {
   font-size: 2rem;
   cursor: pointer;
   display: none;
}
.navbar .topButton.dark {
}

.contactLink {
   color: #2F3031;
   background-color: rgba(0,0,0,0.05);
   padding: 0.16rem 0.7rem;
   outline: none;
   border-radius: 8pt;
   text-decoration: none;
   font-size: 0.8rem;
   cursor: pointer;
   justify-content: center;
   text-align: center;
   transition: scale 0.2 ease;
}

.contactLink.dark {
   color: #eeeeee;
}

.contactLink:hover {
   color: #2F3031;
   scale: 1.05;
   background-color: rgba(250,250,250,1);
}

.contactLink:active {
   scale: 0.95;
}

.topDropdown {
   position: absolute;
   z-index:1000;
   right: 2rem;
   top: 40pt;
   width: 200pt;
   background: rgba(230,230,230, 0.9);
   background-filter: blur(15px);
   border-radius: 0.5rem;
   overflow: hidden;
   display: none;
}

.topDropdown.dark {
   background: rgba(30,30,30, 0.9);   
}

.topDropdown.open {
   display:block;
}

.topDropdown li {
   padding: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.topDropdown .contactLink {
   width: 100%;
   display: flex;
   justify-content: center;
}


.videoPlayerOnyx {
   margin:0;
   border:1pt solid #222222;
   border-radius: 0.5rem;
   border-color: rgba(44,44,44,0.2);
}

.counters {
   font-weight:bold;
   float:right;
   padding:2pt;
   position:absolute;
   bottom:0;
   right:0;
   font-size:6pt;
   color:#888888;
}

.counters.dark {
   color:#555555;
}

@media(max-width:1200px) {
   .navbar .logo {
      scale: 0.99;
   }
}

@media(max-width:1050px) {
   .navbar {
      justify-content: space-between;
   }
   .navbar .topLeft, .navbar .topRight {
      display:none;
   }
}

@media(max-width:850px) {
   .navbar {
      justify-content: center;
   }
   .topLightDark {
      padding-right:20pt;
   }
   .navbar .topLinks,
   .navbar .contactLink,
   .counters {
      display: none
   }

   .navbar .topButton,
   .navbar .topDropdown .contactLink {
      display: block;
   }


   .topDropdown {
      left: 2rem;
      width: unset;
   }
   .topLeft, .topRight {
      display:none;
   }
}