.balloon-span {
	position: relative;
	display: inline-block;
	margin: 10px;
}

.balloon {
    display: inline-block;
	width: 100%;
	font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size:1.1em;
	color: #15ac74;
	background: #efefef;
	border: 0;
	border-radius: 3px;
	outline: 0;
	text-indent: 60px;
	transition: all .3s ease-in-out;
}

.b1 {
    padding: 10px 0 10px 7px;
}

.b2 {
    padding: 10px 0 10px 15px;
}

.b3 {
    padding: 10px 0 10px 90px;
}

.balloon::-webkit-input-placeholder {
	color: #efefef;
	text-indent: 0;
	font-weight: 300;
}

.balloon + label {
	display: inline-block;
	position: absolute;
	top: 8px;
	left: 0;
	bottom: 8px;
	padding: 5px 15px;
	color: #052b1c;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size:0.9em;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
	transition: all .3s ease-in-out;
	border-radius: 3px;
	background: rgba(122, 184, 147, 0);
}

.balloon + label:after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	top: 50%;
	left: 100%;
	margin-left: -3px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 3px solid rgba(122, 184, 147, 0);
	transition: all .3s ease-in-out;
}

.balloon:focus,
.balloon:active {
	color: 15ac74;
	text-indent: 0;
    background: #fff;
    padding-left: 15px;
}

.balloon:focus::-webkit-input-placeholder,
  .balloon:active::-webkit-input-placeholder {
	color: #aaa;
}

.balloon:focus + label,
  .balloon:active + label {
	color: #fff;
	text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
	background: #0DE093;
}

.b1:focus + label,
  .b1:active + label {
	transform: translateX(-65px);
}

.b2:focus + label,
  .b2:active + label {
	transform: translateX(-75px);
}

.b3:focus + label,
  .b3:active + label {
	transform: translateX(-150px);
}


.balloon:focus + label:after,
    .balloon:active + label:after {
	border-top: 4px solid #0DE093;
}