.email input[type=email],.email input[type=text],.email input[type=text] /* serve para modelar os inputs*/	
{
	width:100%;
	border: 2px solid green;
	border-radius: 5px;
	margin: 8px 0;
	outline: none;
	padding: 8px;
	box-sizing: border-box;
	transition: .5s;
	box-shadow: 0 0 3px 0 green;
	z-index: 1;
}
.email input[type=email]:focus,.email input[type=text]:focus,.email input[type=text]:focus /* quando os inputs receber o focu, abre a sombra*/
{
	box-shadow: 0 0 6px 0 blue;
}

.email input[type=email],.email input[type=text],.email input[type=text] /* coloca um padding dentro de todo input, dentro da classe email*/
{
	
	
}

.email /* todo conteudo dentro da classe email tera posicao relativa*/
{
	position: relative;
}

.email i /* posiciona todo icone dentro da classe email, posicao absoluta */
{
	position: absolute;
	left: 1px;
	top: 10px;
	padding: 5px 9px;
	color:black;
	opacity: 0.5;
	font-size:29px;
}
.email #pw /* posiciona o icone password dentro da classe email, posicao absoluta */
{
	position: absolute;
	left: 1px;
	top: 10px;
	padding: 5px 16px;
	color:black;
	opacity: 0.5;
	font-size:29px;
}

.email input[type=email]:focus + i /* quando o campo email recebe o focu, o icone, irmao dele fica vermelho */
{
	color: red;
}
.email input[type=password]:focus + #pw  /* quando o campo password recebe o focu, o icone, irmao dele fica vermelho */
{
	color: red;
}
.email input[type=text]:focus + #pw  /* quando o campo text recebe o focu, o icone, irmao dele fica vermelho */
{
	color: red;
}

.email.bgicon i  /* a classe bgicon serve para identificar o icone como unico dentro da classe email */
{
	background-color: rgba(0,0,0,0.7);
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
.email #pw  /* #pw e o id do icone password, unico dentro da classe email */
{
	background-color: rgba(0,0,0,0.7);
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	
}