*{ 
	margin: 0; 
	padding: 0; 
	outline: none; 
	border: none; 
	font-size: 100%; 
	box-sizing: border-box; 
	font-family: 'Poppins', sans-serif;
}

ul {list-style: none;} 
a {text-decoration: none;}			
body {background-color: #ffffff;}
img {max-width: 100%;}  

/* topo é a tarja amarela com a logo*/
.topo{width: 100%; height: 55px; display: flex; justify-content: left; border-bottom: 1px solid #FEC705; background-color: #fcc917;}
.logo{width: 109px; height: 40px; margin-top: 8px; margin-left: 10%;} /* configurando a logo*/


/* Iniciando os campos do formulário */
#formLogin{display: none;}
#formEmail{display: block;}
#formRecuperaSenha{display: none;}


/*
#acessoexclusivo{display: block;}
#digiteoemail{display: block;}
#loginEmail{display: block;}
#continuar{display: block;}
#bemvindo{display: none}
#usuarioLogin{display: none;}
#divsenhaLogin{display: none;}
#efetuaLogon{display: none;}
#esqueciSenha{display: none;}
#alterarSenha{display: none;}
#olhoLogin{display: none;}
*/

 
.container {
	width: 100%;  /*As dimensões do container serão de 100% da largura (width) e altura (height) da página.*/
	height: 90%; /*As unidades vw e vh que representam, respectivamente, a largura e altura da viewport;*/	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
} 
 
.box{	
	width: 1000px;
	height: 400px;		
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px; 
	margin-left: -500px;	
	background-color: #ffffff;	
}
	
.bloco{width: 100%; height: 100%; display: flex;}
.bloco1{width: 49%; height: 100%; display:flex; justify-content:center; align-items:center; }
.bloco2{width: 49%; height: 100%; display: flex; justify-content: center; align-items: center;}

.imglogin{width: 80%; margin-left: auto; margin-right: auto;}


form{text-align: center; margin-right: auto; margin-left: auto; width: 92%; display:flex; flex-direction: column; height: 270px; padding: 40px 20px; margin-top: 15px;}

input{width: 100%; padding: 9px; border-radius: 5px; border: 1px solid #656564; margin-bottom: 8px; display: inline; }
input::placeholder{color: #656564;}
input:focus{border-color: #0a8acd; }
input:focus::placeholder{color: #0a8acd;}		

button{width: 100%; padding: 10px; border-radius: 3px; background-color: #0a8acd; color: #ffffff; cursor: pointer; margin-top: 20px;}
button:hover{background-color: #FCC917;}
button:focus{background-color: #FCC917;}

#digiteoemail{width: 100%; text-align:left; font-size: 1.1em; margin-top:5px; margin-bottom:20px;}
#acessoexclusivo{width: 100%; text-align:center; font-size: 0.9em; margin-top:1px; margin-bottom:7px; font-weight: bold;}


@media (max-width:1100px){
	.box{width: 900px; height: 400px; margin-top: -200px; margin-left: -450px;}
	form{width: 95%;}


}

@media (max-width:880px){
	.bloco1{display: none;}
	.bloco2{width: 100%; }
	.box{width: 500px; height: 400px; margin-top: -200px; margin-left: -250px;}
}

@media (max-width:700px){
	.box{width: 350px; height: 400px; margin-top: -200px; margin-left: -175px;}
	#digiteoemail{ font-size: 0.9em; }
	form{ width: 95%; }
}


a{cursor: pointer;}

h1{text-align: center; font-size: 0.9em; font-weight: bolder; color: #656564; margin-bottom:15px }
 
.EsqueciSenha {font-size: 0.8em; color: #717070; display: block; text-align: left;  float: left; width: 49%; padding: 0 5px; margin-top: 5px; background-color: transparent; }		
.EsqueciSenha:hover{color: #FEA700; background-color: transparent;}
.EsqueciSenha:focus{background-color: transparent; color: #FCC917;}		

.MostrarSenha {font-size: 0.6em; color: #000000; display: block; text-align: right; margin-right: 12px; float: right; width: 40%; padding: 0 5px; margin-top: -5px; background-color: transparent; }	
.MostrarSenha:hover{color: #FEA700; background-color: transparent;}
.MostrarSenha:focus{background-color: transparent; color: #FCC917;}	

.AlterarSenha {font-size: 0.8em; color: #717070; display: block; text-align: right; float: right; width: 50%; padding: 0 px; margin-top: 5px; background-color: transparent; }	
.AlterarSenha:hover{color: #FEA700; background-color: transparent;}
.AlterarSenha:focus{background-color: transparent; color: #FCC917;}	


/* Formulário página Esqueceu senha*/
.botao_email_esqueceusenha{width: 100%; padding: 10px; border-radius: 3px; background-color: #5e5f5f; color: #ffffff; cursor: pointer; margin-top: 20px;}
.botao_email_esqueceusenha:hover{background-color: #000000;}
.botao_email_esqueceusenha:focus{background-color: #000000;}

.camposforminput{width: 100%; padding: 9px; border-radius: 5px;  border: 1px solid #656564; margin-bottom: 8px; display: inline; }
.camposforminput::placeholder{color: #656564;}
.camposforminput:focus{border-color: #656564; color: #656564;}
.camposforminputput:focus::placeholder{color: #656564;}