#genres-pop-div{
  position: fixed;
  width:97vmin;
  min-height:250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -90%);
  background-color: #444;
  z-index: 9999999999;
  padding:5px 15px;
  overflow:hidden;
  color:#dadada;
  font-family: 'Sofia-Pro', verdana;
  box-shadow:0 0 60px 10px #000;
  display: None;
  border-radius: 4px;
}
#genres-cross-div{
  display:inline-block;
  float:right;
  background-color:#303030;
  margin:3px;
  padding:3px 5px;
  text-align: right;
  border-radius: 3px;
}
#genres-cross-div span{
  color:#dadada;
  font-weight: bold;
  font-size: 24px;
  cursor:pointer;
  padding:5px;
  font-family: arial;
}
#genres-cross-div span:hover{
  opacity:0.7;
}
#genres-div{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #303030;
  margin:7px;
  padding:8px;
}
.gitem{
  margin:2px 10px;
  color:#dadada;
  background: #444;
  padding:5px 7px;
  border:none;
  border-radius: 3px;
}
#genre-btn{
  background: #444;
  padding:6px 10px;
  background: teal;
  cursor:pointer;
}
#genre-btn:hover{
  opacity:0.8;
}
#multi-genre-btn{
  margin:5px;
  border:none;
  padding:5px 12px;
  background: #183D5D;
  color: #c8c8c8;
  border-radius: 3px;
  cursor:pointer;
}
#multi-genre-btn:hover{
  box-shadow: 0 0 5px 1px #1F98C3;
}

.genre-banner{
  position: relative;
  width:90%;
  display:block;
  margin:4px auto;
  border: 0px solid green;
  padding:3px 5px;
  color:#dadada;
  text-align: center;
}
.genre-banner a{
  background: #183D5D;
  border-radius: 4px;
  padding:2px 9px;
  color: #c8c8c8;
  font-size: 14px;
  font-family: 'Sofia-Pro', verdana;
  /* box-shadow: 0 0 10px 1px #333; */
}
.genre-banner a:hover{
  /* opacity: 0.7; */
  box-shadow: 0 0 5px 1px #1F98C3;
}



@media only screen and (max-width: 700px) {
  #genres-pop-div{
    width:93vmin;
    padding:5px 5px;
  }
  .gitem{
    margin:2px 5px;
    color:#dadada;
    background: #444;
    padding:5px 7px;
    border:none;
    border-radius: 3px;
  }
}