.mediadiv a{
  z-index: 99;
  cursor: help !important; 
}
#filters {
    position: fixed;
    margin: 1rem;
    margin-top: 0;
    padding: 0px;
    z-index: 99; 
}


button {
    /* display: inline-block; */
    line-height: 0.5;
    padding: 0.5em 0em 0.5em 0em;
    font-family: "Gridlite";  
    font-variation-settings: "BACK" 800, "ELSH" 4, "RECT" 1200, "wght" 50.1;
    font-size: 1em;
    color: white;
    /* text-shadow: 0 1px white; */
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    overflow: hidden; 
    cursor:pointer;
    transition: 0.5s;
  }
  
button:hover {
     font-family: "Gridlite";
     font-variation-settings: "BACK" 200, "ELSH" 3, "RECT" 900, "wght" 200;
  }
button:focus {
  font-family: "Gridlite";
  font-variation-settings: "BACK" 100, "ELSH" 3, "RECT" 1, "wght" 900;
}

/* 
button:active,
button.is-checked {
    font-family: "Gridlite";
    font-variation-settings: "BACK" 100, "ELSH" 3, "RECT" 1, "wght" 900;

  }
  
  button.is-checked {
    font-family: "Gridlite";
    font-variation-settings: "BACK" 100, "ELSH" 3, "RECT" 1, "wght" 900;
  } 
  
  button:active {
    font-family: "Gridlite";
    font-variation-settings: "BACK" 100, "ELSH" 3, "RECT" 1, "wght" 900;
  } */
  
  /* ---- button-group ---- */
  
  .button-group {
    display: inline-block;
    margin-bottom: 20px;
  }
  
  .button-group:after {
    content: '';
    display: block;
    clear: both;
  }
  
  .button-group .button {
    float: left;
    border-radius: 0;
    margin-left: 0;
    margin-right: 1px;
  }
  
  .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
  .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
  

/* media query for desktop values */
@media only screen and (min-width: 800px) {
  #filters {
    margin: 2rem;
    margin-top: 0rem;
  }
  button {
    font-size: 1.1em;
}}