.input-group {
    position: relative;
    margin: 40px 0 5px;
  }
  
  input {
    font-size: 20px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 378px;
    border: none;
    border-bottom: 1px solid #757575;
    background-color: transparent;
  }
  
  input:focus {
    outline: none;
  }
  
  label {
    color: #333;
    font-size: 20px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }
  
  input:focus ~ label,
  input:valid ~ label {
    top: -20px;
    font-size: 16px;
    color: #000000;
  }
  
  .bar {
    position: absolute;
    display: block;
    width: 378px;
    left: 0;
    bottom: 0;
  }
  
  .bar:before,
  .bar:after {
    content: '';
    height: 1px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #000000;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }
  
  .bar:before {
    left: 50%;
  }
  
  .bar:after {
    right: 50%;
  }
  
  input:focus ~ .bar:before,
  input:focus ~ .bar:after {
    width: 50%;
  }
  
  .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
  }
  
  input:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
  }
  .input-container.error .input-group > label{
    color: #a30a00;
  }
  .input-container.error .input-group > .bar:before,
  .input-container.error .input-group > .bar:after{
    background: #a30a00;
  }
  .input-container.error input{
      border-bottom: 1px solid #a30a00;
  }
 .input-container .error-text{
      color: #a30a00;
  }
  .input-container .helper-text{
      color: #00000099;
  }
  
  /* animations */
  @-webkit-keyframes inputHighlighter {
    from { background: #000000; }
    to   { width: 0; background: transparent; }
  }
  @-moz-keyframes inputHighlighter {
    from { background: #000000; }
    to   { width: 0; background: transparent; }
  }
  @keyframes inputHighlighter {
    from { background: #000000; }
    to   { width: 0; background: transparent; }
  }


  /* select */
  .select-container {
    width: 350px;
    margin-top: 30px;
  }
  
  /* select starting stylings ------------------------------*/
  .select {
    font-family:
      'Roboto','Helvetica','Arial',sans-serif;
      position: relative;
      width: 378px;
      margin-bottom: 5px;
  }
  
  .select-text {
      position: relative;
      font-family: inherit;
      background-color: transparent;
      width: 100%;
      padding: 10px 10px 10px 0;
      font-size: 20px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid #757575;
  }
  
  /* Remove focus */
  .select-text:focus {
      outline: none;
      border-bottom: 1px solid rgba(0,0,0, 0);
  }
  
      /* Use custom arrow */
  .select .select-text {
      appearance: none;
      -webkit-appearance:none
  }
  
  .select:after {
      position: absolute;
      top: 18px;
      right: 10px;
      height: 10px;
      width: 14px;
      background-image: url('../images/icons/Vector.svg');
      content: '';
      pointer-events: none;
  }
  
  
  /* LABEL ======================================= */
  .select-label {
      color: #333;
      font-size: 20px;
      font-weight: normal;
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 10px;
      transition: 0.2s ease all;
  }
  
  /* active state */
  .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
      color: #000000;
      top: -20px;
      transition: 0.2s ease all;
      font-size: 16px;
  }
  
  /* BOTTOM BARS ================================= */
  .select-bar {
      position: relative;
      display: block;
      width: 100%;
  }
  
  .select-bar:before, .select-bar:after {
      content: '';
      height: 1px;
      width: 0;
      bottom: 1px;
      position: absolute;
      background: #000000;
      transition: 0.2s ease all;
  }
  
  .select-bar:before {
      left: 50%;
  }
  
  .select-bar:after {
      right: 50%;
  }

  .select-container .helper-text{
    color: #00000099;
  }
  .select-container.error .error-text{
    color: #a30a00;
  }
  .select-container.error .select .select-text,
  .select-container.error .select .select-label{
    color: #a30a00;
    border-bottom-color: #a30a00;
  }
  .select-container.error .select-bar:before, 
  .select-container.error .select-bar:after{
    background: #a30a00;
  }
  
  /* active state */
  .select-text:focus ~ .select-bar:before, .select-text: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;
  }
  /* /select */