Floating Label Input

				/* https://codepen.io/team/css-tricks/pen/XVBLRM */
.floating-field {
    display: flex;
    flex-flow: column-reverse;
    margin-bottom: 16px;
	width: 250px;
}
.floating-input, .floating-label {
    transition: all 0.2s;
    touch-action: manipulation;
}
.floating-input, .floating-field input.floating-input {
    font-size: 20px;
    border: 0;
    border-bottom: 1px solid #ccc;
    font-family: inherit;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0;
    cursor: text;
    background: transparent;
}
.floating-input:focus {
    outline: 0;
    border-bottom: 1px solid #666;
}
.floating-label {
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: -1;
}
.floating-input:placeholder-shown + .floating-label {
    cursor: text;
    max-width: 66.66%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left bottom;
    transform: translate(0, 2em) scale(1.5);
}
//CHROME
input.floating-input::-webkit-input-placeholder {
    opacity: 0;
    transition: inherit;
}
input.floating-input:focus::-webkit-input-placeholder {
	opacity: 1;
}
//MOZILLA SUPPORT
.floating-input::-moz-placeholder {
    opacity: 0;
    transition: inherit;
}
input.floating-input:focus::-moz-placeholder {
	opacity: 1;
}
.floating-input::placeholder {
    opacity: 0;
    transition: inherit;
}
floating-input:focus::placeholder {
	opacity: 1;
}
input.floating-input:focus + .floating-label {
    transform: translate(0, 0) scale(1);
    cursor: pointer;
}