* { box-sizing:border-box; }

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

textarea{
  font-family: 'Kanit', sans-serif;
font-weight: 600;
  font-size:16px;
  display:block;
  width: 100%;
  border:none;
  border-bottom:1px solid #534d4f;
  background: none;
  letter-spacing:1px;
  color: #fff;
  height: 30px;
  resize: none;
}
input{
  font-family: 'Kanit', sans-serif;
font-weight: 600;
  font-size:16px;
  display:block;
  width: 100%;
  border:none;
  border-bottom:1px solid #534d4f;
  background: none;
  color: #fff;
}
input:focus,textarea:focus { outline:none; }

/* LABEL ======================================= */
.label {
  font-family: 'Kanit', sans-serif;
font-weight: 100;
  color:#fff; 
  font-size: 22px;
  padding: 0px;
}
label,.label-drop{
  font-family: 'Kanit', sans-serif;
font-weight: 100;
  color:#534d4f; 
  font-size: 16px;
  position:absolute;
  pointer-events:none;
  left:15px;
  top:0px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.label-drop{
  display: none;
  position: absolute;
  top:-18px;
  font-size:11px;
  color:#fff;
}
/* active state */
input:focus ~ label,.input  ~ label,textarea:focus ~ label{
  top:-18px;
  font-size: 11px;
  color:#fff;
}

.input{
  border-bottom:1px solid #fff;
}
/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block;}
.bar:before, .bar:after 	{
  content:'';
  height:1px; 
  width:0;
  bottom:0px; 
  position:absolute;
  background:#fff;
  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%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after,textarea:focus ~ .bar:before, textarea:focus ~ .bar:after {
  width:50%;
}
input[type="image"]:focus {
  border:none;
  outline: none;
}
input[type="image"]{
  border:none;
}
/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

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