body,td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}
.fundo {
	background-repeat: repeat-x;

}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: underline;
}

.menu:link {
	color: #0066CC;
	text-decoration: none;
}
.menu:visited {
	color: #0066CC;
	text-decoration: none;
}
.menu:active {
	color: #0066CC;
	text-decoration: underline;
}
.menu:hover {
	color: #666666;
	text-decoration: underline;
}
.campos{
	font-family: verdana;
	font-size: 8pt;
	font-color:000000;
	border-style: solid;
	border-width:1 ;
	border-color:#cccccc;
	background-color: #ffffff;
	color: #000000
}
.titulo {  
	font-size: 14px; 
	font-weight: bold; 
	color: #0066CC; 
	text-transform:none
}
.tabela {
	border: 1px solid;
}
.titulo2 {
	font-weight: bold; 
	color: #0066CC; 
	text-transform:none
}

/* --------------------------------------------------------------------------
   Header banner - replaces flash/1..6.swf (see banner.php).
   9.5s loop, matching the 114 frames at 12 fps of the original movies.
   -------------------------------------------------------------------------- */
.fsbanner {
	position: relative;
	width: 600px;
	height: 135px;
	overflow: hidden;
	background: #0b3d68;
}
.fsbanner img { position: absolute; border: 0; }
.fsbanner-bg { top: 0; left: 0; animation: fsb-bg 9.5s linear infinite; }

/* positions taken from the PlaceObject2 records in the .swf */
.fsbanner-hand { left:  44px; top: 25px; animation: fsb-hand 9.5s ease-out infinite; }
.fsbanner-faz  { left: 101px; top: 35px; animation: fsb-faz  9.5s ease-out infinite; }
.fsbanner-site { left: 180px; top: 37px; animation: fsb-site 9.5s ease-out infinite; }

.fsbanner-word {
	position: absolute;
	left: 320px;
	top: 52px;
	width: 280px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0,0,0,.55);
	opacity: 0;
}
.fsbanner-w1 { animation: fsb-word 9.5s ease-in-out infinite; animation-delay: 2.2s; }
.fsbanner-w2 { animation: fsb-word 9.5s ease-in-out infinite; animation-delay: 4.0s; }
.fsbanner-w3 { animation: fsb-word 9.5s ease-in-out infinite; animation-delay: 5.8s; }

/* slow drift on the photo, the way the originals never sat still */
@keyframes fsb-bg {
	0%   { transform: scale(1.06) translateX(-6px); }
	50%  { transform: scale(1.00) translateX(0); }
	100% { transform: scale(1.06) translateX(-6px); }
}
/* the logo assembles: hand drops in, then Faz, then site */
@keyframes fsb-hand {
	0%, 4%   { opacity: 0; transform: translateY(-46px) rotate(-12deg); }
	16%, 92% { opacity: 1; transform: translateY(0) rotate(0deg); }
	100%     { opacity: 0; transform: translateY(0) rotate(0deg); }
}
@keyframes fsb-faz {
	0%, 11%  { opacity: 0; transform: translateX(-40px); }
	23%, 92% { opacity: 1; transform: translateX(0); }
	100%     { opacity: 0; transform: translateX(0); }
}
@keyframes fsb-site {
	0%, 14%  { opacity: 0; transform: translateX(40px); }
	26%, 92% { opacity: 1; transform: translateX(0); }
	100%     { opacity: 0; transform: translateX(0); }
}
/* each keyword gets ~1.8s of the loop */
@keyframes fsb-word {
	0%              { opacity: 0; transform: translateY(10px); }
	5%, 14%         { opacity: 1; transform: translateY(0); }
	19%, 100%       { opacity: 0; transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	.fsbanner-bg, .fsbanner-hand, .fsbanner-faz, .fsbanner-site { animation: none; }
	.fsbanner-word { animation: none; opacity: 0; }
	.fsbanner-w1 { opacity: 1; }
}

/* --------------------------------------------------------------------------
   e-Pronto promo - replaces flash/epronto.swf (see banner_epronto.php).
   8.3s loop, matching the 100 frames at 12 fps of the original movie.
   -------------------------------------------------------------------------- */
.epbanner {
	position: relative;
	width: 250px;
	height: 150px;
	overflow: hidden;
	background: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.epbanner a { display: block; width: 250px; height: 150px; text-decoration: none; }
.epbanner img { position: absolute; border: 0; }

.epb-box {
	right: -4px; top: 6px;
	width: 100px; height: 135px;
	animation: epb-box 8.3s ease-out infinite;
}
/* four bitmaps from the .swf, played in sequence to spin the logo */
.epb-spin img { left: 8px; top: 12px; opacity: 0; }
.epb-l0 { animation: epb-f0 8.3s steps(1,end) infinite; }
.epb-l1 { animation: epb-f1 8.3s steps(1,end) infinite; }
.epb-l2 { animation: epb-f2 8.3s steps(1,end) infinite; }
.epb-l3 { animation: epb-f3 8.3s steps(1,end) infinite; }

.epbanner span.epb-t1, .epbanner span.epb-t2, .epbanner span.epb-price {
	position: absolute; left: 10px; opacity: 0; color: #0066CC;
}
.epb-t1    { top: 74px;  font-size: 12px; animation: epb-in 8.3s ease-out infinite; animation-delay: 1.2s; }
.epb-t2    { top: 92px;  font-size: 12px; color:#333; animation: epb-in 8.3s ease-out infinite; animation-delay: 2.0s; }
.epb-price { top: 114px; font-size: 20px; font-weight: bold; animation: epb-pop 8.3s ease-out infinite; animation-delay: 3.6s; }

@keyframes epb-box {
	0%, 30%  { opacity: 0; transform: translateX(60px); }
	42%, 94% { opacity: 1; transform: translateX(0); }
	100%     { opacity: 0; transform: translateX(0); }
}
/* one rotation over the first ~1.1s, then hold on the front face */
@keyframes epb-f0 { 0%,2% {opacity:1} 3%,10% {opacity:0} 13%,94% {opacity:1} 100% {opacity:0} }
@keyframes epb-f1 { 0%,2% {opacity:0} 3%,5%  {opacity:1} 6%,100% {opacity:0} }
@keyframes epb-f2 { 0%,5% {opacity:0} 6%,8%  {opacity:1} 9%,100% {opacity:0} }
@keyframes epb-f3 { 0%,8% {opacity:0} 9%,12% {opacity:1} 13%,100%{opacity:0} }

@keyframes epb-in  { 0% {opacity:0; transform:translateX(-14px)} 6%,88% {opacity:1; transform:translateX(0)} 100% {opacity:0} }
@keyframes epb-pop { 0% {opacity:0; transform:scale(.6)} 5% {opacity:1; transform:scale(1.15)} 9%,84% {opacity:1; transform:scale(1)} 100% {opacity:0} }

@media (prefers-reduced-motion: reduce) {
	.epbanner img, .epbanner span { animation: none !important; opacity: 1; transform: none; }
	.epb-l1, .epb-l2, .epb-l3 { opacity: 0; }
}

/* The concentric ripple rings behind the hand - the part of the logo mark
   that was missing. In the .swf this is one shape (id=9): a 76px circle,
   #FFFFFF fill with a 3px #CCCCCC stroke, placed at several depths at scales
   from 0.11 up to 1.00 - which is exactly the three rings of the logo. They
   are steady, like the mark itself, with a slow breath so the banner still
   moves. The fill is translucent so the photograph reads through. */
.fsbanner-ring {
	position: absolute;
	left: 33px; top: 18px;          /* centre (70.9, 55.9), from the .swf */
	width: 70px; height: 70px;
	margin: 0; padding: 0;
	border: 3px solid #cccccc;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	opacity: 0;
	z-index: 1;
}
.fsbanner-r1 { animation: fsb-ring1 9.5s ease-out infinite; }
.fsbanner-r2 { animation: fsb-ring2 9.5s ease-out infinite; }
.fsbanner-r3 { animation: fsb-ring3 9.5s ease-out infinite; }

/* scales 1.00 / 0.55 / 0.15 match the placements found in the .swf */
@keyframes fsb-ring1 {
	0%,2%   { opacity: 0; transform: scale(.15); }
	18%     { opacity: .85; transform: scale(1); }
	60%     { opacity: .85; transform: scale(1); }
	78%     { opacity: .85; transform: scale(1.04); }
	92%     { opacity: .85; transform: scale(1); }
	100%    { opacity: 0; transform: scale(1); }
}
@keyframes fsb-ring2 {
	0%,5%   { opacity: 0; transform: scale(.15); }
	21%,92% { opacity: .9; transform: scale(.55); }
	100%    { opacity: 0; transform: scale(.55); }
}
@keyframes fsb-ring3 {
	0%,8%   { opacity: 0; transform: scale(.15); }
	24%,92% { opacity: .95; transform: scale(.15); }
	100%    { opacity: 0; transform: scale(.15); }
}

/* Four thin white verticals - shape id=3 in the .swf (1px x 241, #FFFFFF),
   placed at x = 0, 67, 403 and 525. */
.fsbanner-streak {
	position: absolute;
	top: 0; width: 1px; height: 135px;
	background: rgba(255,255,255,.55);
	z-index: 1;
}
.fsbanner-s1 { left:   1px; }
.fsbanner-s2 { left:  67px; }
.fsbanner-s3 { left: 403px; }
.fsbanner-s4 { left: 525px; }

/* keep the logo above the ripple */
.fsbanner-hand, .fsbanner-faz, .fsbanner-site { z-index: 2; }
.fsbanner-word { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.fsbanner-ring { animation: none; opacity: .9; }
	.fsbanner-r1 { transform: scale(1); }
	.fsbanner-r2 { transform: scale(.55); }
	.fsbanner-r3 { transform: scale(.15); }
}

/* --------------------------------------------------------------------------
   Servicos / Produtos boxes on the homepage - CSS instead of sliced GIFs
   (images/s.gif, p.gif, ervicos.gif, rodutos.gif, fundo_quadro.gif,
   quadro_04.gif and imagens/bullet_not_azul.gif, all kept as the backup).

   The outline was traced pixel by pixel off those GIFs composed together.
   The panel is a folder-tab shape, 142 x 127:

     - the title strip starts at x=29, just right of the tile, and its
       top-left corner is cut by a 4px diagonal   (from ervicos.gif)
     - the body below runs the full width from x=0 (from fundo_quadro.gif)
     - the bottom-right corner is cut by a 12px diagonal (from quadro_04.gif)
     - the edge is shaded on the right and bottom only: #B3B3B3 at the right,
       nearly nothing at the left, so it is a drop shadow, not a border

   Colours are measured, not guessed: #007FBF tile with a 5px #005880 shadow,
   23x23 (s.gif); #007FBF glyphs 16px tall (ervicos.gif); #EEEEEE panel;
   #0066CC bullet.
   -------------------------------------------------------------------------- */
/* the row these sit in carries align="center"; the box is left-aligned */
.fsq { position: relative; width: 142px; text-align: left; }

/* the panel itself: one shape, so both diagonals are exact */
.fsq-shape {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	background: #B9B9B9;
	/* traced off the composed GIFs, row by row. There are THREE diagonals:
	   the tab's top-left (33,0)-(29,4), the body's top-left (4,28)-(0,32),
	   and the folded bottom-right (142,114)-(129,127). */
	clip-path: polygon(
		33px 0,                 /* tab: after its 4px top-left cut */
		100% 0,
		100% calc(100% - 13px),
		calc(100% - 13px) 100%, /* 13px folded bottom-right corner */
		0 100%,
		0 32px,                 /* body: full width */
		4px 28px,               /* body's own 4px top-left cut */
		29px 28px,              /* across to the tab's left edge */
		29px 4px);
	/* clip-path removes borders, so the edge is a second clipped layer
	   underneath: this one is the border colour, and ::after paints the
	   panel 1px inside it. The 1px edge then follows the diagonals too. */
}

.fsq-shape:after {
	content: "";
	position: absolute;
	left: 1px; top: 1px; right: 1px; bottom: 1px;
	background: #EEEEEE;
	clip-path: polygon(
		32px 0,
		100% 0,
		100% calc(100% - 13px),
		calc(100% - 13px) 100%,
		0 100%,
		0 31px,
		4px 27px,
		28px 27px,
		28px 4px);
}

.fsq-t {
	position: relative;
	z-index: 1;
	display: block;
	height: 32px;
	box-sizing: border-box;
	padding-left: 29px;
	font: bold 18px/31px "Arial Rounded MT Bold", "Trebuchet MS", Arial, Helvetica, sans-serif;
	letter-spacing: .2px;
	overflow: hidden;
}
/* the original wordmark is a wide rounded face: "ervicos" is 113px across at
   only 16px of glyph height. No web-safe font is that wide, so the word is
   stretched horizontally to the original's measured width. */
.fsq-t span {
	display: inline-block;
	transform: scaleX(1.34);
	transform-origin: left center;
}
/* a:link in this stylesheet is more specific than a bare .fsq-t, so the
   colour has to be stated on the anchor states or the title renders black. */
a.fsq-t, a.fsq-t:link, a.fsq-t:visited, a.fsq-t:active { color: #007FBF; text-decoration: none; }
a.fsq-t:hover { color: #005880; text-decoration: none; }

.fsq-t b {                                   /* the blue tile, 23x23 at (1,2) */
	position: absolute;
	left: 1px; top: 2px;
	width: 23px; height: 23px;
	background: #007FBF;
	color: #FFFFFF;
	font: bold 17px/23px Arial, Helvetica, sans-serif;
	text-align: center;
	letter-spacing: 0;
	box-shadow: 5px 5px 0 #005880;
}

.fsq-body {
	position: relative;
	z-index: 1;
	min-height: 77px;                        /* 32 + 77 + 3 + 15 = 127, as measured */
	padding: 3px 3px 15px 3px;               /* 15px reserves the folded corner */
}

/* blue bullet: a #0066CC box with a small triangle, as in bullet_not_azul.gif */
.fsq-b {
	display: inline-block;
	width: 11px; height: 11px;
	box-sizing: border-box;
	border: 2px solid #0066CC;
	background: #FFFFFF;
	position: relative;
	vertical-align: -1px;
	margin-right: 3px;
}
.fsq-b:after {
	content: "";
	position: absolute; left: 3px; top: 2px;
	border-left: 3px solid #0066CC;
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
}