@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/*@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}*/

/*Input Style*/
.inp {
	display: block;
  position: relative;
  margin: 0 auto;
  width: 80%;
}
.inp .label {
	font-family: 'Roboto';
  position: absolute;
  top: 16px;
  left: 0;
  font-size: 16px;
  color: #9098a9;
  font-weight: 500;
  transform-origin: 0 0;
  transition: all 0.2s ease;
  user-select: none;
  cursor: text;
}
.inp .border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #51cbce;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: all 0.15s ease;
  border: none !important;
}
.inp input {
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  padding: 12px 0;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #c8ccd4;
  background: none;
  border-radius: 0;
  color: #223254;
  transition: all 0.15s ease;
}
.inp input:not(:placeholder-shown) + span {
  color: #5a667f;
  transform: translateY(-26px) scale(0.75);
}
.inp input:focus,
.inp input.active {
  background: none;
  outline: none;
}
.inp input:focus + span,
.inp input.active + span {
  color: #51cbce;
  transform: translateY(-26px) scale(0.75);
}
.inp input:focus + span + .border,
.inp input.active + span + .border {
  transform: scaleX(1);
}