/*
//uso html:

<div class="label-float col-sm-4">
  <input type="text" placeholder=" "/>
  <label>Telefone</label>
</div>
<br/>

<div class="label-float col-sm-4">
  <input type="text" placeholder=" " required/>
  <label>Nome de Usuário</label>
</div>

*/
<!--
.label-float{
  position: relative;
  padding-top: 13px;
}

.label-float input::placeholder{
  color:transparent;
}

.label-float label{
  pointer-events: none;
  position: absolute;
  color: #CCC;
  top: 6px;
  left: 20px;
  margin-top: 13px;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
}

/*
.label-float input:required:invalid + label{
  color: red;
}
*/

.label-float input:focus:required:invalid{
  /* border-bottom: 2px solid red; */
}
.label-float input:required:invalid + label:before{
  /* content: '*'; */
}
.label-float input:focus + label,
.label-float input:not(:placeholder-shown) + label{
  font-size: 13px;
  margin-top: -10px;
  color: #3951b2;
}
-->