/*
* Input fields
* START ------------------
*/
.input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  position: relative;
  margin-bottom: 2em;
  margin-top: 3em;
  z-index: 0;
}
.input input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 50px;
  background: transparent;
  border: none;
  padding: none;
  padding-left: 1em;
  display: block;
  outline: none;
  color: rgb(40, 40, 40);
  opacity: 0;
  -webkit-transition: -webkit-opacity 0.2s;
	transition: opacity 0.2s;
  font-size: 0.8em;
  letter-spacing: 1px;
}
.input label {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: inline-block;
  pointer-events: none;
  width: 100%;
	height: 100%;
  padding-left: 0.7em;
  padding-top: 1em;
  -webkit-transition: -webkit-padding-left 0.2s;
	transition: padding-left 0.2s;
}
.input label span {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
  transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 1em;
  letter-spacing: 1px;
  color: rgb(40, 40, 40);
}
.input:hover label {
  padding-left: 1em;
}
.input label::before,
.input label::after {
  content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}
.input label::before {
  border-top: 2px solid rgb(208, 208, 208);
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}
.input label::after {
  z-index: -1;
	background: rgb(208, 208, 208);
	-webkit-transform: scale3d(1, 0, 1);
	transform: scale3d(1, 0, 1);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}
.input input:focus, .input input:not(:placeholder-shown) {
  opacity: 1;
  -webkit-transition-delay: 0.5s;
}
.input input:focus + label::before, .input input:not(:placeholder-shown) + label::before {
  -webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.input input:focus + label span, .input input:not(:placeholder-shown) + label span {
  -webkit-transform: translate3d(0, -230%, 0);
  transform: translate3d(0, -230%, 0);
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.input input:focus + label::after, .input input:not(:placeholder-shown) + label::after {
  -webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
  -webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
/*
* END -------------------
* Input fields
*/
