#loginAreax {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #CCCCCC;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80%; /* You could use anything here, depending if you have a wrapping parent etc */
}

#search-form {
  position: relative;
  display: flex;
  align-items: center; /* Not necessary but will center the items */
  flex-direction: row; /* Not necessary but tells that they should be in a row */
  justify-content: flex-start; /* Will align items to left on larger screens */
  flex-wrap: wrap; /* Will allow the flex inputs to wrap on smaller screens */
}

#search-form > input { /* You could give a class or element instead of asterix */
  border: medium none;
  margin: 0 10px 5px 0; /* Just to make it look nices */
  width: 25%; /* Width of text inputs, you could set them different from each other */
  min-width: 100px; /* Min width to wrap elements when small screen */
  font-size: 15px;
  color: #000;
  padding: 16px 20px;
  font-family: Rubik;
  margin-bottom: 0px;
  flex: 1;
}

#search-form > input:focus::placeholder{
  opacity: 0;
}

#search-form > input:focus::-webkit-input-placeholder {
  opacity: 0;
}

#search-form > input:focus::-moz-placeholder {
  opacity: 0;
}

#search-form > input:-moz-placeholder {
  opacity: 0;
}

#search-form > select { /* You could give a class or element instead of asterix */
  /*background: #e4e4e4 none repeat scroll 0 0;*/
  border: medium none;
  margin: 0 10px 5px 0; /* Just to make it look nices */
  width: 25%; /* Width of text inputs, you could set them different from each other */
  min-width: 130px; /* Min width to wrap elements when small screen */
  font-size: 15px;
  color: #000;
  padding: 15px 20px;
  font-family: Rubik;
  margin-bottom: 0px;
  flex: 0;
}

#search-form .search_button {
    float: right;
    font-size: 15px;
    padding: 15px 15px;
    color: #FFF;
    background: #2ab8dc;
    border: 0;
    cursor: pointer;
    border-radius: 0px;
}

.sf-select {
    appearance: none; /* Disable the default arrow */
    -webkit-appearance: none; /* For WebKit-based browsers */
    -moz-appearance: none; /* For Firefox */
    width: 100%;
    background-color: #e4e4e4;
    background-image: url('../images/pin.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    cursor: pointer;
}

.sf-input {
    -webkit-appearance: none; /* For WebKit-based browsers */
    -moz-appearance: none; /* For Firefox */
    background-color: #e4e4e4 !important;
    background-image: url('../images/keyboard.png') !important;
    background-position: right 10px center !important;
    background-size: 15px !important;
    cursor: pointer;
     /* Adjusts image to cover the input area */
    background-repeat: no-repeat !important;
}