.centered {
  width: 42%;
  margin: auto;
}

.group {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 15px;
}

#double { display: flex; flex-flow: row; justify-content: space-between;}

.group .double {
	width: 48%;
	overflow: hidden;
}

label {
  position: absolute;
  top: 1.6em;
  color: black;
  font: 400 1.2em Roboto;
  cursor: text;
  transition: 0.25s ease;
}

.group input {
  display: block;
  width: 100%;
  padding-top: 2em;
  border: none;
  border-radius: 0;
  color: black;
  font-size: 1.2em;
  transition: 0.3s ease;
}
.group input:valid ~ label {
  top: 0;
  font: 400 1.2em Roboto;
  color: black;
}

.group input:valid ~ .bar {
  background-color: #b8f368;
}

.group input:focus {
  outline: none;
}
.group input:focus ~ label {
  top: 0;
  font: 400 1.2em Roboto;
  color: black;
}
.group input:focus ~ .bar:before {
  transform: translateX(0);
}
.group input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #333 inset;
  -webkit-text-fill-color: white !important;
}

textarea {
	width: 99.5%;
	border: 0;
	margin-top: 10px;
	font: 400 1.2em Roboto;
	outline: none;
}

textarea:focus ~ .bar:before {
  transform: translateX(0);
}


.bar {
  background: #fd5b53;
  content: "";
  width: 100%;
  height: 3px;
  transition: 0.3s ease;
  position: relative;
}
.bar:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 150%;
  background: #ff7d1e;
  transform: translateX(-100%);
}

::selection {
  background: rgba(33, 150, 243, 0.3);
}