nav#bottommenu{
  position: fixed;
  bottom:0px;
  width: 100vw;
  border-top:1px solid #c0c0c0;
  z-index: 99;
  background-color: #1e2024;
  padding: 12px 0px;
  >div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    >a{

      flex: 1 1 0;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

    }
  }

  #bottommenu_home, #bottommenu_games, #bottommenu_standings, #bottommenu_stats{
    background-position: center top 2px;
    padding-top:32px;
    background-size:24px;
    background-repeat: no-repeat;
    color:#aaaaaf;
    font-size:13px;
    height: 52px;
    aspect-ratio:1/1;
  }
  #bottommenu_home{
    background-image:url(/assets/icons/button_inactive_home.svg);
  }
  #bottommenu_home.active{
    background-image:url(/assets/icons/button_home.svg);
    color:#ffdc11;
  }
  #bottommenu_games{
    background-image:url(/assets/icons/button_inactive_basketball.svg);
  }
  #bottommenu_games.active{
    background-image:url(/assets/icons/button_basketball.svg);
    color:#ffdc11;
  }
  #bottommenu_standings{
    background-image:url(/assets/icons/button_inactive_standing.svg);
  }
  #bottommenu_standings.active{
    background-image:url(/assets/icons/button_standing.svg);
    color:#ffdc11;
  }
  #bottommenu_stats{
    background-image:url(/assets/icons/button_inactive_stats.svg);
  }
  #bottommenu_stats.active{
    background-image:url(/assets/icons/button_stats.svg);
    color:#ffdc11;
  }

}
nav#mobile{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  background:#1e2024;
  padding:0px 18px;
  .menubutton{
    background-image: url(/assets/icons/menu.svg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 48px;
    height:48px;
    cursor: pointer;
  }
  .search{
    width: 48px;
    height:48px;
  }
  .logo{
    img{
      height: 100px;
    }
  }
}

nav#mobilemenu{
  width: 280px;
  height: 100vh;
  background:#1e2024;
  position: fixed;
  top:0px;
  z-index: 99;
  .menulist{
    padding:6px 12px;
  }
  .logo{
    text-align: center;
    padding:12px;
    img{
      width: 120px;
    }
  }
  #closemobilemenu{
    position: absolute;
    top:8px;
    right: 8px;
    background-image: url(/assets/icons/closemenu.svg);
    background-size:24px;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height:32px;
    z-index: 100;
    cursor: pointer;
  }
  .extendbutton{
    background-image: url(/assets/icons/extendable.svg);
    background-size:12px;
    background-repeat: no-repeat;
    background-position: right 2px center;
  }
  a{
    display: block;
  }
  .levelBwrapper, .levelCwrapper{
    display: none;
  }
  .levelA{
    font-weight: 500;
    font-size:13px;
    color:white;
    padding:8px 0px;
  }
  .levelB, .levelC{
    font-weight: 500;
    font-size:12px;
    color:#99a;
    padding:8px 0px;
  }
  .levelB{
    padding-left:8px;
  }
  .levelC{
    padding-left:16px;
  }

}
nav#desktop .level1>div{
  .logo{
    position: absolute;
    top:0px;
    left:0px;
    z-index: 2;
    padding:8px 12px;
    aspect-ratio: 1/1;
    height: 171px;
    width:171px;
    img{
      height: 171px;
    }
    background-color:rgba(0,0,0,0);
  }
}
nav#desktop .level1 {
  height: 48px;
  background:#292c31;
}
nav#desktop .level2{
    height: 90px;
    background:#111;
    .row{
      margin-right:24px;
    }
    .row>div:nth-child(1){
      color: white;
      font-weight: bold;
      font-size:11px;
    }
    .contactuswrapper{
      display: flex;
      .row>div:nth-child(2){
        color: #6b6d70;
        font-weight: normal;
        font-size:11px;
      }
      .basketballicon{
        background-image:url(/assets/icons/basketball.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 24px;
        padding-left:38px;
      }
      .basketballsuiticon{
        background-image:url(/assets/icons/basketball-uniform.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 24px;
        padding-left:38px;
      }
      .searchicon{
        background-image:url(/assets/icons/searchy.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 24px;
        padding-left:38px;
      }
    }
}
nav#desktop .level2>div{
  height: 100%;
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin:0 auto;
    .socialmediawrapper{
      margin-right: 18px;
      a{
        font-size:20px;
        color:#0c5bff;
      }
      a:hover{
        color:#ffdc11;
      }
    }
}
nav#desktop .level3 .menulist{
  display:flex;
  gap: 52px;
  font-weight: bold;
  color:white;
  font-size:13px;
  a{
    /* border-bottom:1px solid #ddf; */
    display: flex;
    align-items: center;
  }
  .wrapper{
    display: none;
    color:black;
    background:#fbfbfa;
    width: 240px;
    border:1px solid #f0f0f0!important;
    a{
      padding: 0px 12px;
      color: #2B3842;
      display: flex;
      align-items: center;
      height: 52px;
      border-bottom:1px solid #f0f0f0;
    }
  }
  .item_levelA{
    display: block;
    position: relative;
    >a{
      border-top:3px solid transparent;
      border-bottom:3px solid transparent;
      height: 62px;
      display: flex;
      align-items: center;
      color:white!important;
      box-sizing: border-box;
    }
  }
  .item_levelA:hover>a{
      border-top:3px solid transparent;
      border-bottom:3px solid #ffdc11;
      color:#ffdc11!important;
  }
  .item_levelA:hover>.wrapper{
    display: block!important;
    animation: slideDown 0.25s ease-in-out;
  }
  .item_levelB:hover>.wrapper{
    display: block!important;
    animation: slideDown 0.25s ease-in-out;
  }

  .item_levelA>.wrapper{
    display: none;
    position: absolute;
    z-index: 99;
    top:62px;
  }
  .item_levelB>.wrapper{
    display: none;
    position: absolute;
    z-index: 99;
    top:-1px;
    left:238px;
  }


}
nav#desktop .level3{
    height: 62px;
    background:#292c31;
    display: flex;
    >div:nth-child(1)>.menu{
      display: flex;
      gap: 52px;
    }
    >div{
        display: flex;
        gap: 52px;
        padding:0px 12px;
        justify-content: flex-end;
        align-items: center;
        max-width: 1200px;
        width:100%;
        margin:0 auto;
    }
}
nav#desktop .level3::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 100%;
  background: #111;
    clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 0% 100%);
}


@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}



nav#desktop .level1>div{
  background: #292c31;
  width:100%;
  display: flex;
  justify-content: flex-end;
  padding:12px 12px;
  max-width: 1200px;
  margin:0 auto;
  div{
    font-size:10px;
    color:white;
    font-weight: bold;
  }
  div::before{
    content: "\2F";
    display: inline-block;
    color: #6b6d70;
    margin: 0 16px 0 14px;
  }
  div:nth-child(1)::before {
    content: none;
  }
  div:nth-child(2)::before {
    content: none;
  }
}

nav#mobilemenu{
  left: -280px;
}
nav#mobile{
  display: flex;
}
nav#desktop{
  display: none;
}

#mobile .search{
  background-image: url(/assets/icons/searchy.svg);
  background-position: center;
  width: 40px;
  aspect-ratio 1/1;
  background-size: 28px;
  background-repeat: no-repeat;
}
#searchbar{
  display: none;
  width: 100%;
  padding:12px 12px;
  >div{
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
    >input{
      width: 100%;
      background:white;
      border:1px solid #ddd;
      border-radius: 4px;
      height: 36px;
      padding:2px 6px;
      padding-left: 32px;
      font-size:14px;
      background-image: url(/assets/icons/searchdark.svg);
      background-position: left 8px center;
      background-size: 20px;
      background-repeat: no-repeat;
    }
  }
}

@media only screen and (min-width: 768px) {
nav#mobile{
  display: none;
}
nav#desktop{
  display: block;
}


}


@media only screen and (min-width: 1200px) {
  #searchbar{
    padding:12px 0px;
  }
}