body.body						{padding:0px !important; background-color:#282828; color:#fff; }


/* --------------------------------------------------------------- */
	section							{padding:0; height:100vh; overflow:hidden;}
	section .bar-login 				{width:33%; padding:20vh 3.4vw 0 3.4vw; background-color:#282828; }
	section .bar-login .font-title	{font-size:40px; max-width:640px; letter-spacing:-1px;}
	section .bar-login .font-desc	{font-size:15px; line-height:1.7em}
	section .bar-login .bar-buttons	{flex-direction:column; row-gap:45px;}
	section .bar-login .lbl-error	{display:block; padding:5px 15px; text-align:center; background-color:#b90000; color:#fff; border-radius:4px;}

	section .bar-login>div>form		{max-width:340px;}

	section .bar-image 				{position:relative; flex-grow:1; background-image:url('/Content/images/bkg-gestao.jpg'); background-size:cover; background-position:center center;}
	section .bar-image .image-logo	{position:absolute; top:30px; right:30px; height:35px; background-color:#282828; padding:8px 16px; border-radius:8px;}


/* --------------------------------------------------------------- */
	.btn-amarelo					{text-decoration:none; background-color:inherit; color:var(--amarelo); border:5px solid var(--amarelo); padding:15px 30px;
									 display:inline-block; font-size:15px; cursor:pointer;}
	.btn-amarelo:hover				{background-color:var(--amarelo); color:#282828;}

	.btn-flip						{color:#888; letter-spacing:1px; padding-bottom:2px; display:inline-block; cursor:pointer;}
	.btn-flip>span					{border-bottom:1px dotted #ccc;}
	.btn-flip:hover					{color:var(--amarelo);}
	.btn-flip:hover>span			{color:var(--amarelo); border-bottom:2px solid var(--amarelo);}


/* --------------------------------------------------------------- */
	.flip-card						{background-color:transparent; width:100%; height:100%; perspective: 1000px;}

	.flip-card-inner				{position: relative; width:100%; height:100%; transition:transform 0.6s; transform-style:preserve-3d;}
	.flip-card-inner.flipped		{transform: rotateY(180deg);}
	.flip-card-front, 
	.flip-card-back					{position: absolute; width:100%; height:100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;}

	.flip-card-front				{}
	.flip-card-back					{transform:rotateY(180deg)}



/* --------------------------------------------------------------- */
@media all and (max-width:600px) {
	section							{flex-direction:column;}
	section>*						{width:100% !important; padding:20px !important;}

	section .bar-login 				{z-index:2; order:2; flex-grow:1; height:80px; overflow-y:auto;}
	section .bar-login .font-title	{font-size:30px; max-width:100%; }
	section .bar-login .font-desc	{font-size:13px; line-height:1.3em}
	section .bar-login .bar-buttons	{flex-direction:row; column-gap:35px;}
	section .bar-login .btn-flip	{padding-top:5px; text-align:right;}

	section .bar-image 				{z-index:1; order:1; flex-grow:0; height:80px; background-size:cover; background-position:center bottom -15px;}
	section .bar-image .image-logo	{height:30px; right:15px; top:10px;}

}