body {
  font: 81.25%/1.75 Open Sans;
  color: #47525D;
  width: 480px;
  margin: 100px auto;
}

.col--2-of-4 {
  width: 50%;
}

.col--1-of-4 {
  width: 25%;
}

input, button {
  font: inherit;
  color: #47525D;
}

.input {
  display: inline-block;
  &--compact {
    margin: 10px;
    padding: 8px 0;
    border: 1px solid #e1e1e1;
    border-left: 0;
    border-right: 0;
    
    .input__container {
      position: relative;
      display: inline-block;
      margin-right: -.24em;
    }
    
    label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      
      padding: 1px 6px;
      margin-left: -6px;
      
      color: #bbb;
      
      cursor: text;
      transition: .1s ease;
    }
    
    input {
      width: 100%;
      border: none;
      
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      
      &::-webkit-input-placeholder {
        color: transparent;
      }
      
      &:focus,
      &.js--filled, {
        outline: none;
        
        &::-webkit-input-placeholder {
          color: rgba(0,0,0,.25);
        }
        
        + label {
          top: -18px;
          width: auto;
          
          font-size: 10px;
          font-weight: 600;
          letter-spacing: .05em;
          
          background-color: #fff;
          
          cursor: default;
        }
      }
    }
    
  }
}