/* Input field that looks like a button */
.email-field {
  	width: 23em;
	display: inline-block;
	color: #fff;
	text-align: center;
	background-color:rgba(255,255,255,0.2);
	padding: .9em 1.8em;
	border: solid 2px #fff;
	cursor: pointer;
	outline: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	transition: all .1s linear;
}
.email-field::-webkit-input-placeholder {
   color: white;
}

.email-field:-moz-placeholder { /* Firefox 18- */
   color: white;  
}

.email-field::-moz-placeholder {  /* Firefox 19+ */
   color: white;  
}

.email-field:-ms-input-placeholder {  
   color: white;  
}
.email-field:hover {
	background-color: #4f2683;
}

/* after button is clicked */
.email-field.active {
	width: 22em;
	outline: none;
	color: #ecf0f1;
	text-align: left;
	cursor: inherit;
}

/* Email submit button */
#subscribe-button {
	margin-left:.5em;
	width: 35px;
	height: 35px;
	border: none;
	text-indent: -9999px;
	opacity: .5;
	background: url(http://helixpowered.com/assets/img/arrow-circle-on-right.svg) no-repeat;
	background-size: 13px;
	background-position: 0 1px;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;
  
	cursor: pointer; /* for demo only */

	display: none;
}
#subscribe-button:hover {
	opacity: .33;
}

#subscribe-button.show {
	display: inline-block;
	background-size: 33px;
}