/*
Filters
*/
input[type="radio"] {
    display: none;
  }
  
  .filters * {
    display: inline-block;
  }
  label {
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    min-width: 140px;
    line-height: normal;
    cursor: pointer;
    transition: all 1s;
    }
  label:hover {
    background: #dfd28e;
  }
  
  [value="musikinstrumente"]:checked ~ .filters [for="musikinstrumente"],
  [value="moebel"]:checked ~ .filters [for="moebel"],
  [value="werkstatt"]:checked ~ .filters [for="werkstatt"],
  [value="haus-garten"]:checked ~ .filters [for="haus-garten"] {
  background:#dfd28e;
  }
  input[type="radio"][id="musikinstrumente"]:checked ~ .moebel, input[type="radio"][id="musikinstrumente"]:checked ~ .werkstatt, input[type="radio"][id="musikinstrumente"]:checked ~ .haus-garten {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
  }
  input[type="radio"][id="moebel"]:checked ~ .musikinstrumente, input[type="radio"][id="moebel"]:checked ~ .werkstatt, input[type="radio"][id="moebel"]:checked ~ .haus-garten {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
  }
  input[type="radio"][id="werkstatt"]:checked ~ .musikinstrumente, input[type="radio"][id="werkstatt"]:checked ~ .moebel, input[type="radio"][id="werkstatt"]:checked ~ .haus-garten {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
  }
  input[type="radio"][id="haus-garten"]:checked ~ .musikinstrumente, input[type="radio"][id="haus-garten"]:checked ~ .moebel, input[type="radio"][id="haus-garten"]:checked ~ .werkstatt {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
  }
  
  /* 
  boxes
  */
  .box {
    width:18%;
    height:220px;
    overflow: hidden;    
    background:#ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    float:left;
    transition:all 1s;
    margin:0.5%;
    padding:0.5%;
  }
  .box img {
    width: 100%;
    max-height: 432px;
  }
  .box img:hover {
    opacity: 0.7;
  } 
  .box a {
    color: #222222;
    text-decoration: none;
  }
  .box a:hover {
    color: #b0980fc6;
    text-decoration: none;
  }
  
  
  /*
  media queeris
  */
  @media screen and (max-width: 900px) {  
    .box {
      width:23%;
      height: 200px;
    } 
    label {
    min-width: 130px; 
    } 
    .container {
    font-size: smaller;   
    }
  }
  
  @media screen and (max-width: 650px) {  
    .box {
      width:31%;
    }  
    label {
    min-width: 120px;
    }
  }