.wrap {
    position: absolute;
    right: 0;
    top: 40%;
    left: 0;
    margin: 0 auto;
  }
  
  /* select starting stylings ------------------------------*/
  .select {
      position: relative;
      width: 100%;
      margin-top: 20px;
  }
  
  .material-select {
      position: relative;
      font-family: inherit;
      background-color: transparent;
      width: 100%;
      padding: 10px 10px 10px 0;
      font-size: 16px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid rgba(0,0,0, 0.12);
      color: #000;
      padding-left: 16px;
  }
  
  /* Remove focus */
  .material-select:focus {
      outline: none;
      border-bottom: 1px solid rgba(0,0,0, 0);
  }
  
      /* Use custom arrow */
  .select .material-select {
      appearance: none;
      -webkit-appearance:none
  }
  
  .select:after {
      position: absolute;
      top: 16px;
      right: 10px;
      /* Styling the down arrow */
      width: 0;
      height: 0;
      padding: 0;
      content: '';
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid rgba(0, 0, 0, 0.12);
      pointer-events: none;
  }
  
  
  /* LABEL ======================================= */
  .select-label {
      color: #000;
      font-size: 16px;
      font-weight: normal;
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 10px;
      transition: 0.2s ease all;
      margin-left: 16px;
  }
  
  /* active state */
  .material-select:focus ~ .select-label, .activo ~ .select-label {
      top: -10px;
      transition: 0.2s ease all;
      font-size: 14px;
  }

  .material-select:focus ~ .select-label {
    color: #e34735;
}

  
  /* BOTTOM BARS ================================= */
  .select-bar {
      position: relative;
      display: block;
      width: 100%;
  }
  
  .select-bar:before, .select-bar:after {
      content: '';
      height: 2px;
      width: 0;
      bottom: 1px;
      position: absolute;
      background: #e34735;
      transition: 0s ease all;
  }
  
  .select-bar:before {
      left: 50%;
  }
  
  .select-bar:after {
      right: 50%;
  }
  
  /* active state */
  .material-select:focus ~ .select-bar:before, .material-select:focus ~ .select-bar:after {
      width: 50%;
  }
  
  /* HIGHLIGHTER ================================== */
  .select-highlight {
      position: absolute;
      height: 60%;
      width: 100px;
      top: 25%;
      left: 0;
      pointer-events: none;
      opacity: 0.5;
  }