.filter-wrapper {
    margin-bottom: 8px;
}
  .keyword-wrapper {
    width: 100%;
    position: relative;
  }
  #keyword {
    border: 1px solid #ccc;
    padding: 10px;
    font: 1.5em 'Arimo', sans-serif;
    width: 50%;
    outline: none;
    transition: border 0.5s ease-in-out
  }
  #keyword:focus {
    border-top-color: rgba(0,0,0,0);
    border-left-color: rgba(0,0,0,0);
    border-right-color: rgba(0,0,0,0);
  }
  #keyword-button {
    position: absolute;
    right: 26%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.7em;
    color: #8DB9ED
  }
  #keyword-button:hover {
    color: #ccc
  }
  .filter-select {
    width: 318px;
    list-style: none;
    font-size: 1.1em;
    color: rgb(105,105,105);
    border: 1px solid #ccc;
    border-top: none;
    max-height: calc(50% - 15px);
    overflow-y: auto;
    background: #fff;
    position: absolute;
  }

  .filter-select-list {
    cursor: pointer;
    padding: 5px 10px;
  }

  #filter-select {
    padding-left: 0px;
    margin-left: 22px;
    margin-top: 2px;
  }


  .filter-select-list:hover {
    background: rgb(155,155,155);
    color: #fff
  }
  .no-value {
    border: none
  }
  .list-highlight, .list-highlight:hover {
    background: rgb(55,55,55);
    color: #fff
  }
  /*some simple responsive designs*/
  @media only screen and (max-width: 768px) {
    
    .filter-select, #keyword {
      width: 80%;
    }
    #keyword {
      font-size: 1.3em
    }
    .filter-select {
      font-size: 0.9em;
      left: 10%;
      top: calc(50% + 23px);
    }
    #keyword-button {
      right: 11%
    }
  }
  @media only screen and (max-width: 480px) {
    
    .filter-select, #keyword {
      width: 95%;
    }
    .filter-select {
      left: 2.5%;
    }
    #keyword-button {
      right: 3.5%
    }
  }