/*

via https://codepen.io/sevilayha/pen/IdGKH
MIT License

Modified: Wednesday, July 19, 2017

*/


/*
Dark Orange: #FF8C00
Light Orange: #FFB900

Dark blue/gray: 2c3e50
Light gray: bdc3c7
Super light gray: ecf0f1
*/


/* form starting stylings ------------------------------- */

#form-group  {
  position:relative;
  margin-bottom: 20px;
  /*margin-top: 20px;*/
}

#form-group input  {
  /*font-size:18px;*/
  font-size: 1.1em;
  padding: 10px 0px;
  display: block;
  width: 100%;
  border:none;
  /*border-bottom: 1px solid #2c3e50;*/
  border-bottom: 1px solid #bdc3c7;
}

#form-group input:focus  {
  outline:none;
  border:none;
}

#form-group input:active {
  border: none;
}

/* LABEL ======================================= */
#form-group label {
  /*color:#999;*/
  color: #bdc3c7;
  /*font-size:18px;*/
  font-size: 1em;
  /*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;
}

/* active state */
#form-group input:focus ~ label,
#form-group input:valid ~ label,
#form-group input.used ~ label   {
  /*top: -20px;*/
  top: -10px;
  /*font-size: 14px;*/
  font-size: .75em;
  color: #FFB900;
}


/* BOTTOM BARS ================================= */
#form-group .bar {
  position: relative;
  display: block;
  /*width:300px;*/
  /*width: 100%;*/
}

#form-group .bar:before,
#form-group .bar:after  {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #FFB900;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

#form-group .bar:before {
  left: 50%;
}

#form-group .bar:after {
  right: 50%;
}

/* active state */
#form-group input:focus ~ .bar:before,
#form-group input:focus ~ .bar:after {
  width: 50%;
}

/* HIGHLIGHTER ================================== */
#form-group .highlight {
  position:absolute;
  height:60%;
  width:100px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
#form-group input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}


/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from { background:#FFB900; }
  to   { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background:#FFB900; }
  to   { width:0; background:transparent; }
}
@keyframes inputHighlighter {
  from { background:#FFB900; }
  to   { width:0; background:transparent; }
}