/* CSS Document */
@import url("../fonts.css");
@import url("../color.css");
/* CSS GLOBAL */
*{
	padding:0;
	margin:0;
	vertical-align:baseline;
	list-style:none;
	border:0
}
body{
	background: var(--brancoB);
	font-family: 'Ead', Verdana, Geneva, sans-serif;
}
html{
	height: 100%;
	background: url("../../img/Sense.jpg");
	background-size: cover;
}
/*
img{
	max-width: 100%;
}*/
/* EFEITO LOADER */
	#loader{
		position:absolute;
		background: var(--brancoA);
		height: 150px;
		width: 300px;
		/*opacity: 0.8;
    	filter: alpha(opacity=80);  For IE8 and earlier */
		z-index: 9999999999;
		display: none;/* */
	}
	#loader .sk-fading-circle {
		position:absolute;
	  	margin: 30px 0 0 120px;
	  	width: 60px;
	  	height: 60px;
	}

	#loader .sk-fading-circle .sk-circle {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	
	#loader .sk-fading-circle .sk-circle:before {
	  content: '';
	  display: block;
	  margin: 0 auto;
	  width: 20%;
	  height: 20%;
	  background-color: #419aff;
	  border-radius: 100%;
	  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
			  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	}
	#loader .sk-fading-circle .sk-circle2 {
	  -webkit-transform: rotate(30deg);
		  -ms-transform: rotate(30deg);
			  transform: rotate(30deg);
	}
	#loader .sk-fading-circle .sk-circle3 {
	  -webkit-transform: rotate(60deg);
		  -ms-transform: rotate(60deg);
			  transform: rotate(60deg);
	}
	#loader .sk-fading-circle .sk-circle4 {
	  -webkit-transform: rotate(90deg);
		  -ms-transform: rotate(90deg);
			  transform: rotate(90deg);
	}
	#loader .sk-fading-circle .sk-circle5 {
	  -webkit-transform: rotate(120deg);
		  -ms-transform: rotate(120deg);
			  transform: rotate(120deg);
	}
	#loader .sk-fading-circle .sk-circle6 {
	  -webkit-transform: rotate(150deg);
		  -ms-transform: rotate(150deg);
			  transform: rotate(150deg);
	}
	#loader .sk-fading-circle .sk-circle7 {
	  -webkit-transform: rotate(180deg);
		  -ms-transform: rotate(180deg);
			  transform: rotate(180deg);
	}
	#loader .sk-fading-circle .sk-circle8 {
	  -webkit-transform: rotate(210deg);
		  -ms-transform: rotate(210deg);
			  transform: rotate(210deg);
	}
	#loader .sk-fading-circle .sk-circle9 {
	  -webkit-transform: rotate(240deg);
		  -ms-transform: rotate(240deg);
			  transform: rotate(240deg);
	}
	#loader .sk-fading-circle .sk-circle10 {
	  -webkit-transform: rotate(270deg);
		  -ms-transform: rotate(270deg);
			  transform: rotate(270deg);
	}
	#loader .sk-fading-circle .sk-circle11 {
	  -webkit-transform: rotate(300deg);
		  -ms-transform: rotate(300deg);
			  transform: rotate(300deg); 
	}
	#loader .sk-fading-circle .sk-circle12 {
	  -webkit-transform: rotate(330deg);
		  -ms-transform: rotate(330deg);
			  transform: rotate(330deg); 
	}
	#loader .sk-fading-circle .sk-circle2:before {
	  -webkit-animation-delay: -1.1s;
			  animation-delay: -1.1s; 
	}
	#loader .sk-fading-circle .sk-circle3:before {
	  -webkit-animation-delay: -1s;
			  animation-delay: -1s; 
	}
	#loader .sk-fading-circle .sk-circle4:before {
	  -webkit-animation-delay: -0.9s;
			  animation-delay: -0.9s; 
	}
	#loader .sk-fading-circle .sk-circle5:before {
	  -webkit-animation-delay: -0.8s;
			  animation-delay: -0.8s; 
	}
	#loader .sk-fading-circle .sk-circle6:before {
	  -webkit-animation-delay: -0.7s;
			  animation-delay: -0.7s; 
	}
	#loader .sk-fading-circle .sk-circle7:before {
	  -webkit-animation-delay: -0.6s;
			  animation-delay: -0.6s; 
	}
	#loader .sk-fading-circle .sk-circle8:before {
	  -webkit-animation-delay: -0.5s;
			  animation-delay: -0.5s; 
	}
	#loader .sk-fading-circle .sk-circle9:before {
	  -webkit-animation-delay: -0.4s;
			  animation-delay: -0.4s;
	}
	#loader .sk-fading-circle .sk-circle10:before {
	  -webkit-animation-delay: -0.3s;
			  animation-delay: -0.3s;
	}
	#loader .sk-fading-circle .sk-circle11:before {
	  -webkit-animation-delay: -0.2s;
			  animation-delay: -0.2s;
	}
	#loader .sk-fading-circle .sk-circle12:before {
	  -webkit-animation-delay: -0.1s;
			  animation-delay: -0.1s;
	}
	
	@-webkit-keyframes sk-circleFadeDelay {
	  0%, 39%, 100% { opacity: 0; }
	  40% { opacity: 1; }
	}
	
	@keyframes sk-circleFadeDelay {
	  0%, 39%, 100% { opacity: 0; }
	  40% { opacity: 1; } 
	}
	/* FIM EFEITO LOADER */
	
/* LAYOUTS PARA MEDIA ACIMA DE 1121px DE LARGURA */
@media screen and (min-width: 1121px){
	/* BASE DA ÁREA DO LOGIN */
	#areaLogin{
		-webkit-box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
		/*
		border-top: 2px solid var(--azulA);
		border-bottom: 2px solid var(--azulA);
		*/
		transition: all 0.5s;
		background: #FFF;
		margin: -200px 0 0 -250px;
		border-radius: 10px;
		padding: 60px 0 50px 0;
		position: absolute;
		width: 500px;
		top: 50%;
		left: 50%;
	}
	#areaLogin #lhLogo{
		text-align: center;
		padding: 0 0 30px 0;
	}
	#areaLogin #lhLogo img{
		width: 200px;
	}
	#areaLogin #lhFormulario{
		margin: auto;
		width: 300px;
	}
	#lhFormulario #lhSenha{
		margin: 12px 0 0 0;
	}
	
	/* BOX GOOGLE AUTHENTICATOR */	
	#areaLogin #lhFormulario #authenticator{
		
	}
	#areaLogin #lhFormulario #authenticator .qrCode{
		text-align: center;
		padding: 10px 0;
	}
	#areaLogin #lhFormulario #authenticator .qrCode img{
		height: 150px;
	}
	#areaLogin #lhFormulario #authenticator .codeOpt .lhCodeOpt{
		font-family: 'Phonoway', Verdana, Geneva, sans-serif;
		border-bottom: solid 1px var(--azulA);
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 288px;
		height: 35px;
	}
	#areaLogin #lhFormulario #authenticator .codeOpt .lhCodeOpt .ico{
		margin: 5px 0 0 1px;
		position: absolute;
		width: 25px;
	}
	#areaLogin #lhFormulario #authenticator .codeOpt .lhCodeOpt .ico img{
		width: 25px;
	}
	#areaLogin #lhFormulario #authenticator .codeOpt .lhCodeOpt input{
		font-family: 'Phonoway', Verdana, Geneva, sans-serif;
		margin: 0 0 0 30px;
		background: none;
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 253px;
		height: 35px;
	}
	#areaLogin #lhFormulario #authenticator .codeOpt button{
		
		font: 15px 'Ead', Verdana, Geneva, sans-serif;
		
		border: solid 1px var(--azulA);
		background: var(--azulA);
		color: var(--brancoA);
		margin: 10px 0 0 0;
		letter-spacing: 3px;
		
		transition: 0.3s;
		border-radius: 5px;
		font-weight: bold;
		cursor: pointer;
		outline: none;
		
		width: 300px;
		height: 35px;
	}
	#areaLogin #lhFormulario #authenticator .codeOpt button:hover{
		border: solid 1px var(--azulB);
		background: var(--azulB);
	}
		
	
	#areaLogin #lhFormulario #authenticatorOk{
		
	}
	#areaLogin #lhFormulario #authenticatorOk p{
		font: 30px 'Phonoway', Verdana, Geneva, sans-serif;
		color: #518e57;
	}
	
	#areaLogin #lhFormulario #authenticatorError{ 
		
	}
	#areaLogin #lhFormulario #authenticatorError p{
		font: 25px 'Phonoway', Verdana, Geneva, sans-serif;
		color: #f44336;
	}
	
	/* FIM BOX GOOGLE AUTHENTICATOR */
	
	/* MENSAGEM */
	#areaLogin #lhFormulario #mensagem{
		position:absolute;
		background: var(--brancoA);
		height: 150px;
		width: 300px;
		z-index: 99999;
		display: none;/* */ 		
	}
	#areaLogin #lhFormulario #mensagem #texto{
		padding: 20px 0;
		text-align: center;
		font-size: 20px;
		color: #ed174c;
	}
	#areaLogin #lhFormulario #mensagem #botao{
		padding: 20px 0 0 0;
		text-align: center;
	}
	#areaLogin #lhFormulario #mensagem #botao .button{
		font: 20px 'Ead', Arial, Helvetica, sans-serif;
	  	border-radius: 4px;
	  	background-color: #ed174c;
	  	border: none;
	  	color: var(--brancoA);
	  	text-align: center;
	  	font-size: 20px;
	  	height: 40px;
	  	width: 200px;
	  	transition: all 0.5s;
	  	cursor: pointer;
	 	/* margin: 5px; */
	}
	#areaLogin #lhFormulario #mensagem #botao .button span{
	  	cursor: pointer;
	  	display: inline-block;
	  	position: relative;
	  	transition: 0.5s;
	}
	#areaLogin #lhFormulario #mensagem #botao .button span:after{
	  	content: '\00ab';
	  	position: absolute;
	  	opacity: 0;
	  	top: 0;
	  	left: 30px;
	  	transition: 0.5s;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover{
		background: #d51444;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover span{
	  padding-left: 40px;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover span:after{
	  opacity: 1;
	  left: 0;
	}
	/* FIM MENSAGEM */
	/* FORMULÁRIO DE LOGIN */
	#areaLogin #lhFormulario form p{
		padding: 0 0 10px 0;
		text-align: center;
		font-weight: bold;
	}
	#areaLogin #lhFormulario #lhUsuario, #lhFormulario #lhSenha{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		border-bottom: solid 1px var(--azulA);
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 288px;
		height: 35px;
	}
	#areaLogin #lhFormulario #lhUsuario #ico, #lhFormulario #lhSenha #ico{
		margin: 7px 0 0 1px;
		position: absolute;
		width: 25px;
	}
	#areaLogin #lhFormulario #lhUsuario #ico i, #lhFormulario #lhSenha #ico i{
		font-size: 20px;
	}
	#areaLogin #lhFormulario #lhUsuario label, #lhFormulario #lhSenha label{
		margin: 9px 0 0 10px;
		position: absolute;
		font-weight: bold;
		font-size: 14px;
		cursor: text;
		color: var(--azulA);
	}
	#areaLogin #lhFormulario #lhUsuario input, #lhFormulario #lhSenha input{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		background: #FFF;
		margin: 0 0 0 20px;
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 235px;
		height: 35px;
	}
	#areaLogin #lhFormulario #lhSenha .btShowRidePsw{
		margin: 7px 0 0 0;
		float: right;
		font-size: 20px;
		cursor: pointer;
	}
	#areaLogin #lhFormulario #lhSenha .btShowRidePsw i{
		
	}
	#areaLogin #lhFormulario #lhBtEntrar{
		padding: 10px 0 0 0;
	}
	#areaLogin #lhFormulario #lhBtEntrar input{
		font: 20px 'Ead', Verdana, Geneva, sans-serif;
		border: solid 1px var(--azulA);
		letter-spacing: 3px;
		background: var(--azulA);
		transition: 0.3s;
		border-radius: 5px;
		font-weight: bold;
		cursor: pointer;
		outline: none;
		color: var(--brancoA);
		width: 300px;
		height: 40px;
	}
	#areaLogin #lhFormulario #lhBtEntrar input:hover{
		border: solid 1px var(--azulB);
		background: var(--azulB);
		
	}
	/* FIM BASE DA ÁREA DO LOGIN */
	/* BOX ESQUECI SENHA */
	#areaLogin #lhFormulario #bxEsqueciSenha{
		position:absolute;
		background: var(--brancoA);
		height: 140px;
		width: 300px;
		z-index: 999999;
		display: none;/**/
	}
	#areaLogin #lhFormulario #bxEsqueciSenha span{
		font-size: 22px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso{
		position:absolute;
		margin: 0 0 0 -100px;
		text-align: center;
		background: var(--brancoA);
		width: 500px;
		display: none;
		z-index: 9999999;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso .verde{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		padding: 40px 0;
		color: var(--verdeA);
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso .vermelho{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		padding: 40px 0;
		color: var(--vermelhoA);
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		border-bottom: solid 1px var(--azulA);
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 288px;
		height: 35px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail #ico{
		margin: 5px 0 0 1px;
		position: absolute;
		width: 25px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail label{
		margin: 9px 0 0 70px;
		position: absolute;
		font-size: 12px;
		cursor: text;
		color: #666666;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail input, #bxEsqueciSenha #lhEmail input{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		margin: 0 0 0 30px;
		background: none;
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 253px;
		height: 35px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar{
		padding: 10px 0 0 0;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar button{
		font: 20px 'Ead', Verdana, Geneva, sans-serif;
		border: solid 1px var(--azulA);
		letter-spacing: 3px;
		background: var(--azulA);
		transition: 0.3s;
		border-radius: 5px;
		font-weight: bold;
		cursor: pointer;
		outline: none;
		color: var(--brancoA);
		width: 300px;
		height: 40px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar button:hover{
		border: solid 1px var(--azulB);
		background: var(--azulB);
		transition: 0.3s;
	}
	/* FIM BOX ESQUECI SENHA */
	/* BOTÃO ESQUECI MINHA SENHA */
	#areaLogin #lhFormulario #lhEsqueciSenha{
		padding: 40px 0 0 0;
		text-align: center;
		/*background: #CCC;
		display: none;*/
		width: 300px;
	}
	#areaLogin #lhFormulario #lhEsqueciSenha button{
		font: 13px 'Ead', Verdana, Geneva, sans-serif;
		transition: 0.3s;
		background: none;
		cursor: pointer;
		color: var(--cinzaA);
		outline: none;
	}
	#areaLogin #lhFormulario #lhEsqueciSenha button:hover{
		font: 13px 'Ead', Verdana, Geneva, sans-serif;
		transition: 0.3s;
		background: none;
		cursor: pointer;
		color: var(--vermelhoA);
	}
	/* FIM BOTÃO ESQUECI MINHA SENHA */
	/* BASE RODAPÉ */
	#lhRodape{
		text-align: center;
		position: fixed;
		font-size: 12px;
		color: var(--brancoA);
		bottom: 0;
		left: 0;
		width: 100%;
		height: 25px;
	}
	/* FIM BASE RODAPÉ */
}
/* LAYOUTS PARA MEDIA DE 971px Á 1120px DE LARGURA */
@media screen and (min-width: 971px) and (max-width: 1120px){
	/* BASE DA ÁREA DO LOGIN */
	#areaLogin{
		-webkit-box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
		/*
		border-top: 2px solid var(--azulA);
		border-bottom: 2px solid var(--azulA);
		*/
		transition: all 0.5s;
		background: #FFF;
		margin: -200px 0 0 -200px;
		border-radius: 10px;
		padding: 60px 0 50px 0;
		position: absolute;
		width: 400px;
		top: 50%;
		left: 50%;
	}
	#areaLogin #lhLogo{
		text-align: center;
		padding: 0 0 30px 0;
	}
	#areaLogin #lhLogo img{
		width: 200px;
	}
	#areaLogin #lhFormulario{
		margin: auto;
		width: 300px;
	}
	#lhFormulario #lhSenha{
		margin: 12px 0 0 0;
	}
	/* MENSAGEM */
	#areaLogin #lhFormulario #mensagem{
		position:absolute;
		background: var(--brancoA);
		height: 150px;
		width: 300px;
		z-index: 99999;
		display: none;/* */ 		
	}
	#areaLogin #lhFormulario #mensagem #texto{
		padding: 20px 0;
		text-align: center;
		font-size: 20px;
		color: #ed174c;
	}
	#areaLogin #lhFormulario #mensagem #botao{
		padding: 20px 0 0 0;
		text-align: center;
	}
	#areaLogin #lhFormulario #mensagem #botao .button{
		font: 20px 'Ead', Arial, Helvetica, sans-serif;
	  	border-radius: 4px;
	  	background-color: #ed174c;
	  	border: none;
	  	color: var(--brancoA);
	  	text-align: center;
	  	font-size: 20px;
	  	height: 40px;
	  	width: 200px;
	  	transition: all 0.5s;
	  	cursor: pointer;
	 	/* margin: 5px; */
	}
	#areaLogin #lhFormulario #mensagem #botao .button span{
	  	cursor: pointer;
	  	display: inline-block;
	  	position: relative;
	  	transition: 0.5s;
	}
	#areaLogin #lhFormulario #mensagem #botao .button span:after{
	  	content: '\00ab';
	  	position: absolute;
	  	opacity: 0;
	  	top: 0;
	  	left: 30px;
	  	transition: 0.5s;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover{
		background: #d51444;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover span{
	  padding-left: 40px;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover span:after{
	  opacity: 1;
	  left: 0;
	}
	/* FIM MENSAGEM */
	/* FORMULÁRIO DE LOGIN */
	#areaLogin #lhFormulario form p{
		padding: 0 0 10px 0;
		text-align: center;
		font-weight: bold;
	}
	#areaLogin #lhFormulario #lhUsuario, #lhFormulario #lhSenha{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		border-bottom: solid 1px var(--azulA);
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 288px;
		height: 35px;
	}
	#areaLogin #lhFormulario #lhUsuario #ico, #lhFormulario #lhSenha #ico{
		margin: 7px 0 0 1px;
		position: absolute;
		width: 25px;
	}
	#areaLogin #lhFormulario #lhUsuario #ico i, #lhFormulario #lhSenha #ico i{
		font-size: 20px;
	}
	#areaLogin #lhFormulario #lhUsuario label, #lhFormulario #lhSenha label{
		margin: 9px 0 0 35px;
		position: absolute;
		font-weight: bold;
		font-size: 14px;
		cursor: text;
		color: var(--azulA);
	}
	#areaLogin #lhFormulario #lhUsuario input, #lhFormulario #lhSenha input{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		margin: 0 0 0 20px;
		background: none;
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 235px;
		height: 35px;
	}
	#areaLogin #lhFormulario #lhSenha .btShowRidePsw{
		margin: 7px 0 0 0;
		float: right;
		font-size: 20px;
		cursor: pointer;
	}
	#areaLogin #lhFormulario #lhSenha .btShowRidePsw i{
		
	}
	#areaLogin #lhFormulario #lhBtEntrar{
		padding: 10px 0 0 0;
	}
	#areaLogin #lhFormulario #lhBtEntrar input{
		font: 20px 'Ead', Verdana, Geneva, sans-serif;
		border: solid 1px var(--azulA);
		letter-spacing: 3px;
		background: var(--azulA);
		transition: 0.3s;
		border-radius: 5px;
		font-weight: bold;
		cursor: pointer;
		outline: none;
		color: var(--brancoA);
		width: 300px;
		height: 40px;
	}
	#areaLogin #lhFormulario #lhBtEntrar input:hover{
		border: solid 1px var(--azulB);
		background: var(--azulB);
		
	}
	/* FIM BASE DA ÁREA DO LOGIN */
	/* BOX ESQUECI SENHA */
	#areaLogin #lhFormulario #bxEsqueciSenha{
		position:absolute;
		background: var(--brancoA);
		height: 140px;
		width: 300px;
		z-index: 999999;
		display: none;/**/
	}
	#areaLogin #lhFormulario #bxEsqueciSenha span{
		font-size: 22px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso{
		position:absolute;
		margin: 0 0 0 -100px;
		text-align: center;
		background: var(--brancoA);
		width: 500px;
		display: none;
		z-index: 9999999;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso .verde{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		padding: 40px 0;
		color: var(--verdeA);
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso .vermelho{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		padding: 40px 0;
		color: var(--vermelhoA);
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		border: solid 1px var(--azulA);
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 288px;
		height: 35px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail #ico{
		margin: 5px 0 0 1px;
		position: absolute;
		width: 25px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail label{
		margin: 9px 0 0 35px;
		position: absolute;
		font-weight: bold;
		font-size: 14px;
		cursor: text;
		color: var(--azulA);
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail input, #bxEsqueciSenha #lhEmail input{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		margin: 0 0 0 30px;
		background: none;
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 253px;
		height: 35px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar{
		padding: 10px 0 0 0;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar button{
		font: 20px 'Ead', Verdana, Geneva, sans-serif;
		border: solid 1px var(--azulA);
		letter-spacing: 3px;
		background: var(--azulA);
		transition: 0.3s;
		border-radius: 5px;
		font-weight: bold;
		cursor: pointer;
		outline: none;
		color: var(--brancoA);
		width: 300px;
		height: 40px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar button:hover{
		border: solid 1px var(--azulB);
		background: var(--azulB);
		transition: 0.3s;
	}
	/* FIM BOX ESQUECI SENHA */
	/* BOTÃO ESQUECI MINHA SENHA */
	#areaLogin #lhFormulario #lhEsqueciSenha{
		padding: 40px 0 0 0;
		text-align: center;
		/*background: #CCC;
		display: none;*/
		width: 300px;
	}
	#areaLogin #lhFormulario #lhEsqueciSenha button{
		font: 13px 'Ead', Verdana, Geneva, sans-serif;
		transition: 0.3s;
		background: none;
		cursor: pointer;
		color: var(--cinzaA);
		outline: none;
	}
	#areaLogin #lhFormulario #lhEsqueciSenha button:hover{
		font: 13px 'Ead', Verdana, Geneva, sans-serif;
		transition: 0.3s;
		background: none;
		cursor: pointer;
		color: var(--vermelhoA);
	}
	/* FIM BOTÃO ESQUECI MINHA SENHA */
	/* BASE RODAPÉ */
	#lhRodape{
		text-align: center;
		position: fixed;
		font-size: 12px;
		color: var(--brancoA);
		bottom: 0;
		left: 0;
		width: 100%;
		height: 25px;
	}
	/* FIM BASE RODAPÉ */
} 
/* LAYOUTS PARA MEDIA DE 821px Á 970px DE LARGURA */
/* @media screen and (min-width: 821px) and (max-width: 970px){ */
@media screen and (max-width: 970px){
	/* BASE DA ÁREA DO LOGIN */
	#areaLogin{
		-webkit-box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
		box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
		/*
		border-top: 2px solid var(--azulA);
		border-bottom: 2px solid var(--azulA);
		*/
		transition: all 0.5s;
		background: #FFF;
		margin: -200px 0 0 -175px;
		border-radius: 10px;
		padding: 60px 0 40px 0;
		position: absolute;
		width: 350px;
		top: 50%;
		left: 50%;
	}
	#areaLogin #lhLogo{
		text-align: center;
		padding: 0 0 30px 0;
	}
	#areaLogin #lhLogo img{
		width: 200px;
	}
	#areaLogin #lhFormulario{
		margin: auto;
		width: 300px;
	}
	#lhFormulario #lhSenha{
		margin: 12px 0 0 0;
	}
	/* MENSAGEM */
	#areaLogin #lhFormulario #mensagem{
		position:absolute;
		background: var(--brancoA);
		height: 150px;
		width: 300px;
		z-index: 99999;
		display: none;/* */ 		
	}
	#areaLogin #lhFormulario #mensagem #texto{
		padding: 20px 0;
		text-align: center;
		font-size: 20px;
		color: #ed174c;
	}
	#areaLogin #lhFormulario #mensagem #botao{
		padding: 20px 0 0 0;
		text-align: center;
	}
	#areaLogin #lhFormulario #mensagem #botao .button{
		font: 20px 'Ead', Arial, Helvetica, sans-serif;
	  	border-radius: 4px;
	  	background-color: #ed174c;
	  	border: none;
	  	color: var(--brancoA);
	  	text-align: center;
	  	font-size: 20px;
	  	height: 40px;
	  	width: 200px;
	  	transition: all 0.5s;
	  	cursor: pointer;
	 	/* margin: 5px; */
	}
	#areaLogin #lhFormulario #mensagem #botao .button span{
	  	cursor: pointer;
	  	display: inline-block;
	  	position: relative;
	  	transition: 0.5s;
	}
	#areaLogin #lhFormulario #mensagem #botao .button span:after{
	  	content: '\00ab';
	  	position: absolute;
	  	opacity: 0;
	  	top: 0;
	  	left: 30px;
	  	transition: 0.5s;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover{
		background: #d51444;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover span{
	  padding-left: 40px;
	}
	#areaLogin #lhFormulario #mensagem #botao .button:hover span:after{
	  opacity: 1;
	  left: 0;
	}
	/* FIM MENSAGEM */
	/* FORMULÁRIO DE LOGIN */
	#areaLogin #lhFormulario form p{
		padding: 0 0 10px 0;
		text-align: center;
		font-weight: bold;
	}
	#areaLogin #lhFormulario #lhUsuario, #lhFormulario #lhSenha{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		border-bottom: solid 1px var(--azulA);
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 288px;
		height: 35px;
	}
	#areaLogin #lhFormulario #lhUsuario #ico, #lhFormulario #lhSenha #ico{
		margin: 7px 0 0 1px;
		position: absolute;
		width: 25px;
	}
	#areaLogin #lhFormulario #lhUsuario #ico i, #lhFormulario #lhSenha #ico i{
		font-size: 20px;
	}
	#areaLogin #lhFormulario #lhUsuario label, #lhFormulario #lhSenha label{
		margin: 9px 0 0 35px;
		position: absolute;
		font-weight: bold;
		font-size: 14px;
		cursor: text;
		color: var(--azulA);
	}
	#areaLogin #lhFormulario #lhUsuario input, #lhFormulario #lhSenha input{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		margin: 0 0 0 20px;
		background: none;
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 235px;
		height: 35px;
	}
	#areaLogin #lhFormulario #lhSenha .btShowRidePsw{
		margin: 7px 0 0 0;
		float: right;
		font-size: 20px;
		cursor: pointer;
	}
	#areaLogin #lhFormulario #lhSenha .btShowRidePsw i{
		
	}
	#areaLogin #lhFormulario #lhBtEntrar{
		padding: 10px 0 0 0;
	}
	#areaLogin #lhFormulario #lhBtEntrar input{
		font: 20px 'Ead', Verdana, Geneva, sans-serif;
		border: solid 1px var(--azulA);
		letter-spacing: 3px;
		background: var(--azulA);
		transition: 0.3s;
		border-radius: 5px;
		font-weight: bold;
		cursor: pointer;
		outline: none;
		color: var(--brancoA);
		width: 300px;
		height: 40px;
	}
	#areaLogin #lhFormulario #lhBtEntrar input:hover{
		border: solid 1px var(--azulB);
		background: var(--azulB);
		
	}
	/* FIM BASE DA ÁREA DO LOGIN */
	/* BOX ESQUECI SENHA */
	#areaLogin #lhFormulario #bxEsqueciSenha{
		position:absolute;
		background: var(--brancoA);
		height: 140px;
		width: 300px;
		z-index: 999999;
		display: none;/**/
	}
	#areaLogin #lhFormulario #bxEsqueciSenha span{
		font-size: 22px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso{
		position:absolute;
		margin: 0 0 0 -100px;
		text-align: center;
		background: var(--brancoA);
		width: 500px;
		display: none;
		z-index: 9999999;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso .verde{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		padding: 40px 0;
		color: var(--verdeA);
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #aviso .vermelho{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		padding: 40px 0;
		color: var(--vermelhoA);
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		border: solid 1px var(--azulA);
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 288px;
		height: 35px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail #ico{
		margin: 5px 0 0 1px;
		position: absolute;
		width: 25px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail label{
		margin: 9px 0 0 35px;
		position: absolute;
		font-weight: bold;
		font-size: 14px;
		cursor: text;
		color: var(--azulA);
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhEmail input, #bxEsqueciSenha #lhEmail input{
		font-family: 'Ead', Verdana, Geneva, sans-serif;
		margin: 0 0 0 30px;
		background: none;
		padding: 0 5px 0 5px;
		border-radius: 5px;
		outline: none;
		width: 253px;
		height: 35px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar{
		padding: 10px 0 0 0;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar button{
		font: 20px 'Ead', Verdana, Geneva, sans-serif;
		border: solid 1px var(--azulA);
		letter-spacing: 3px;
		background: var(--azulA);
		transition: 0.3s;
		border-radius: 5px;
		font-weight: bold;
		cursor: pointer;
		outline: none;
		color: var(--brancoA);
		width: 300px;
		height: 40px;
	}
	#areaLogin #lhFormulario #bxEsqueciSenha #lhBtEnviar button:hover{
		border: solid 1px var(--azulB);
		background: var(--azulB);
		transition: 0.3s;
	}
	/* FIM BOX ESQUECI SENHA */
	/* BOTÃO ESQUECI MINHA SENHA */
	#areaLogin #lhFormulario #lhEsqueciSenha{
		padding: 40px 0 0 0;
		text-align: center;
		/*background: #CCC;
		display: none;*/
		width: 300px;
	}
	#areaLogin #lhFormulario #lhEsqueciSenha button{
		font: 13px 'Ead', Verdana, Geneva, sans-serif;
		transition: 0.3s;
		background: none;
		cursor: pointer;
		color: var(--cinzaA);
		outline: none;
	}
	#areaLogin #lhFormulario #lhEsqueciSenha button:hover{
		font: 13px 'Ead', Verdana, Geneva, sans-serif;
		transition: 0.3s;
		background: none;
		cursor: pointer;
		color: var(--vermelhoA);
	}
	/* FIM BOTÃO ESQUECI MINHA SENHA */
	/* BASE RODAPÉ */
	#lhRodape{
		text-align: center;
		position: fixed;
		font-size: 12px;
		color: var(--brancoA);
		bottom: 0;
		left: 0;
		width: 100%;
		height: 25px;
	}
}
/* LAYOUTS PARA MEDIA DE 511px Á 820px DE LARGURA 
@media screen and (min-width: 511px) and (max-width: 820px){
	
}*/
/* LAYOUTS PARA MEDIA MENOS QUE 510px DE LARGURA 
@media screen and (max-width: 510px){
	
}*/