@charset "utf-8";
/* CSS Document */

* { margin:0; padding:0; color:#666; font-family: 'Roboto Condensed', sans-serif;}

html, body {height:100%;}

body {background:#000; font-size:14px;}

a { text-decoration:none; cursor:pointer}
a:hover { text-decoration:none}
img {border: none;}
p { text-align:justify; line-height:1.3; margin-bottom:8px;}

.clear {clear:both}


textarea:focus { outline:none;}
input:focus {  outline: none;}
.geral { min-height:100%; position:relative; width:800px;}
#barra-topo-preta { width:100%; height:5px; background:#000}

#topobarra { width:100%; background:#FFF}
	#topo { width:860px; height:110px; margin: 0 auto; position:relative}
	#logo { position:absolute; top:40px;}
	
	
	#menu { position:absolute; top:45px; right:0; font-size:16px; list-style: none; z-index:9999}
	#menu li {display: block; float: left; position:relative}
	#menu a{
		color:#333;
		margin:0 15px;
		padding-bottom:10px;
		text-align:right}
	#menu a:hover{ cursor:pointe; color:#C7DC66;}
	#menu a.atual{
		cursor:pointe;
		color:#000;
		border-bottom:#C7DC66 2px solid;}
	#menu li ul {
    display: none;
    float: none;
    left: 0;
    position: absolute;
    top: 30px;
	padding:1px;
	padding-top:10px;
	padding-bottom:10px;
	width:100px;}
	#menu li:hover > ul {display: block;}	
	#menu li ul li {width:80px; background: #eee;}
	#menu li ul li,	#menu li ul li a {float: none;  color: #666; display:block; text-align:left}
	#menu li ul li a { margin:0; padding:10px 20px;}
	#menu li ul li a:hover { float: none; background: #C7DC66;;  color:#fff;}
	#menu li ul li {    margin: 0;}
	#menu li ul li ul { left: 100%; top: 0;}
	
	
#banner {width: 100%; min-width: 980px;background: #000 url(../arquivos/main_intro_lores.jpg) center center no-repeat; height:490px;position: relative; overflow: hidden;}

	#banner .intro { width: 100%;  position: absolute; z-index: 20; bottom:0; font-weight: 300; }
	
	#banner .intro .imagem { width:860px; margin: 0 auto; text-align:center;}
	#banner .intro .imagem .img { height:350px; margin:20px; }
	#banner .intro .legenda { height:100px; background:url(../imagens/bg-pb-trans.png)}
	#banner .intro .legenda p{ text-align:justify; display:block; width:800px; padding:5px 30px; margin: 0 auto; color:#fff; font-size:34px;}


#banner .imageWrp {  }
#banner .image {
	width: 100%;
	 
	overflow: hidden;	
	z-index: 9; 
	left: 0px; top: 0px;
	display:table; 
	height: 100%; 
	position: relative; 
	 }

	
	.container {
		text-align: left;
		margin: 0 auto;
		width: 960px;
		position: relative}

.titulo { height:60px; margin-left: 25px;}
.titulo a { color:#fff; font-size:36px; padding:0px 25px; padding-top:5px; margin-right:20px; height:71px; display:inline-block; background:#eee;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

}
.titulo a.ativo { color:#C7DC66; background: #282826 url(../imagens/current-link.png) bottom center no-repeat; }
.titulo a.ativo:hover { color:#C7DC66; }

.titulo a:hover {color:#666; text-decoration:none}
.banner-interno { width:100%; height:400px; }


.selo { width:160px; height:185px; float:left; position:relative;margin: 0 6px;}
	.selo .branco {
		display:block;
		position:absolute;
		width:141px; height:106px;
		top:8px; left:8px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		background:none top;
		z-index:9999;
		
		opacity: 0.6;
		-moz-opacity: 0.6;
		-khtml-opacity: 0.6;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
		filter: alpha(opacity=60);
		-webkit-transition-property: background;
		-moz-transition-property: background;
		transition-property: background;
		-webkit-transition-duration: 0.3s;
		-moz-transition-duration: 0.3s;
		transition-duration: 0.3s;
		}
	.selo:hover .branco { background: #FFF url(../imagens/featured-zoom.png) no-repeat center;
		-webkit-transition-property: background;
		-moz-transition-property: background;
		transition-property: background;
		-webkit-transition-duration: 0.3s;
		-moz-transition-duration: 0.3s;
		transition-duration: 0.3s;}
	
	.selo .mascara {position:absolute; z-index:9999; top:0; left:0px;}
	.selo .miniatura {position:absolute; width:141px; height:106px;  top:8px; left:8px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;}
	.selo p {
		width:140px;
		position:absolute; 
		top:130px; left:10px;
		-webkit-transition-property: color;
		-moz-transition-property: color;
		transition-property: color;
		-webkit-transition-duration: 0.3s;
		-moz-transition-duration: 0.3s;
		transition-duration: 0.3s;
		}
	.selo:hover p { color:#C7DC66}



	
#barra-servicos {width:100%;height:275px;background:#E8E8E8}
	#servicos {width:860px; height:275px; margin: 0 auto; border-bottom:; border-top:;}
	#servicos .box {width:150px; height:255px; float:left;  margin:10px 11px 0px 11px; overflow:hidden; background: url(../imagens/barra-box.png) repeat-x center}
	#servicos .box img { height:45px; margin:15px 0 10px 55px;}
	#servicos .box h2 { text-align:center; margin:0 0 15px 0; font-size:18px;}
	#servicos .box p {font-size:12px; text-align:justify; height:100px;}
	#servicos .box a {margin:0px 50px;}
	.saiba{
		float:left;
		width:50px;
		text-align:center;		
		color:#FFF;
		letter-spacing:1px;
		display:block;		
		padding:3px 8px;
		background:#999;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;}
	.saiba:hover { background:#C7DC66}
	
		
#modulosbarra { width:100%}
	#modulos { width:860px; margin: 0 auto}
	#modulos .modulo { width:350px; float:left; padding:20px 35px; display:block;}
	#modulos .modulo:hover {background:url(../imagens/marcador-home.png) 0 20px no-repeat;}
	 

	#conteudo .voltar {border-top: 1px #999 solid; height:110px; position:relative}
	#conteudo .voltar a{padding:15px 20px; background:#EEE;  position:absolute; top:20px; font-size:24px; }		
	#conteudo .voltar a:hover {background:#C7DC66; color:#FFF}

		
#rodapebarra {width:100%;}
	#rodape {width:860px; margin: 0 auto; position:relative; }		
	#rodape #submenu { width:860px; height:120px; margin-top:20px; position:relative;}
	#rodape #submenu .submenu{ position:absolute; top:76px; right:-15px}
	#rodape #submenu .submenu a{ color:#333; margin:0 15px}
	#rodape #submenu .submenu a:hover{ color:#C7DC66;}
	#rodape #submenu .rede-social { width:150px;position:absolute; top:15px; left:5px}
	#rodape #submenu .rede-social img{ margin: 0 5px 0 5px; display:block; float:left; width:30px;}
	#rodape #submenu .rede-social img:hover{ margin: 2px 5px 0 5px}
	#rodape #submenu .copy{ position:absolute; bottom:15px; left:10px; text-align:left; margin-top:15px;}
	#rodape #submenu .copy img{ float:left}
	#rodape #submenu .copy p { float:left; margin-left:10px; color:#444}
	#rodape #submenu .fone-rodape{ position:absolute; top:0px; right:0px; text-align:left; margin-top:0px; font-size:14px; width:250px;}
	#rodape #submenu .fone-rodape p{ color: #fff; padding-bottom: 0px;}
	#rodape #submenu .fone-rodape strong{ font-size:18px; color: #fff}
	
.clientes {margin:20px 0}
.clientes img { width:160px; height:120px; margin:4px}

#conteudohomebarra { width:100%; background:#fff; }
	#banner {}
	
	#modulos {}
	
#barra-conteudo {width:100%; background:#FFF; }	
	#conteudo {width:860px; height:auto; margin: 0 auto; position:relative;}
	#conteudo .principal { border-top: 1px #999 solid; padding: 15px 0}
	#conteudo .principal .icone { width:175px;  float:right; margin: 0 0 20px 20px; text-align:center}
	#conteudo .principal .icone { width:175px;}
	#conteudo .principal h1{ margin-bottom:20px;}
	#conteudo .principal p{ max-height:200px; overflow:hidden}
	
	#conteudo .modulo {border-top: 1px #999 solid; padding: 15px 0}
	#conteudo .modulo h2 { margin-bottom:15px;}
	#conteudo .modulo .clientes {margin:20px 0}
	#conteudo .modulo .clientes img { width:160px; height:120px; margin:4px}
	#conteudo .modulo .servico h2 { margin-right:25px;margin-left: 200px; }
	#conteudo .modulo .servico p { margin-right:25px;margin-left: 200px; }
	#conteudo .modulo .servico .icone { width:150px; height:120px;float:left; margin: 10px 20px 0 50px; width: 130px; text-align:center; background:url(../imagens/spritservicos.png) no-repeat;}
	#conteudo .modulo .servico .icone.website{ background-position:0 0}
	#conteudo .modulo .servico .icone.imob{ background-position:0 -122px}
	#conteudo .modulo .servico .icone.loja{ background-position:0 -270px}
	#conteudo .modulo .servico .icone.logo{ background-position:0 -400px}
	#conteudo .modulo .servico .icone.impresso{ background-position:0 -525px}
		#conteudo .modulo .servico:hover  {  background-color:#f6f6f6}

	#conteudo .modulo .servico:hover  .icone.website{ background-position:-208px 0}
	#conteudo .modulo .servico:hover .icone.imob{ background-position:-208px -122px}
	#conteudo .modulo .servico:hover .icone.loja{ background-position:-208px -270px}
	#conteudo .modulo .servico:hover .icone.logo{ background-position:-208px -400px}
	#conteudo .modulo .servico:hover .icone.impresso{ background-position:-208px -525px}
	
	
	#conteudo .coluna-direita { float:left}
	#conteudo .coluna-esquerda { float:left; margin-left:70px;}
	#conteudo .coluna-esquerda img { margin:50px 0 30px 0;}


#accordion {width: 650px; margin:20px 0}

	#accordion .accordionButton {
	position:relative;	
	width: 860px;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	background:;
	border-bottom: 1px solid #FFFFFF;
	cursor:pointer;
	
	margin: 5px 0;
	}
	#accordion .accordionButton img { float:left;}
	#accordion .accordionButton h3 {
		position:relative;
		font-weight:400;
		margin-left:40px;
		border:2px #ccc solid;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		padding: 0px 10px 3px 10px; 	}
	#accordion .accordionButton .btn { display:block; color:#999; position:absolute; font-size:12px; right:10px; top:5px}	
	#accordion .accordionButton .btn2 { display:none; color:#999; position:absolute; font-size:12px; right:10px; top:5px}	
		
	#accordion .accordionContent {	
	width: 800px;
	margin-left:50px;
	float: left;
	_float: none; /* Float works in all browsers but IE6 */
	background:;
	}
	#accordion .on .btn { display:none;}
	#accordion .on .btn2 { display:block;}	
	#accordion .over {}



	
.w650 { width:650px}	
.w500 { width:500px}	
.left { float:left}
.right { float:right}




/* FORMULARIOS */
	#contactform {
	width: 400px;
	overflow:auto;
	position:relative;	}
	#contactform h3 { margin-bottom: 15px; font-size: 16px; }	
	#contactform .field{margin-bottom:15px;}	
	#contactform .captcha { position:relative; height:38px;}
	#contactform .captcha img{ position:absolute; top:6px; left:10px}
	#contactform .captchainput {
		text-align:center;
		position:absolute;
		top:1px;
		left:100px;		
		background:#fafafa;
		font-family: Arial, Verdana; 
		font-size: 15px; 
		padding: 8px; 
		border: 0; 
		width: 100px; 
		color: #666;
		height:20px;}

	#contactform .input{
	background:#fafafa;
	font-family: Arial, Verdana; 
	font-size: 15px; 
	padding: 8px; 
	border: 1px solid #eee; 
	width: 335px; 
	color: #666;
	height:20px;}		
	#contactform .input:focus {background-color:#eee;}	
	#contactform .textarea {height:150px;}
	#contactform .button{		
		cursor:pointer;   
		color: #fff;
		font-size:16px;		
		text-align: center;	
		background: #999;
		padding: 10px 15px;
		color: #FFF;
		border:0;}
	
	#contactform .button:hover { background:#C7DC66; cursor: pointer;}

	
	.img-trabalho {
		float:right; 
		width:370px; 
		height:300px; 
		margin: 0 0 25px 25px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;}


	#link-servicos	 { width: 170px; height: 500px; float:right;}
	#link-servicos img { display:block; width:160px; height:160px; margin-bottom:15px; background:#036}

	

	
/* Back to top button */
#voltar-topo {
	position: fixed;
	bottom: 10px;
	margin-left: 20px;
	z-index:499;
	right:40px;
	/*IE6 hack */
		 _position: absolute;
		 _top:expression(documentElement.scrollTop+body.scrollTop);
		 _margin-top: 500px;

}
#voltar-topo #link {display:none;}
#voltar-topo a {
	width: 50px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #172639;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#voltar-topo a:hover {	color: #ffc170;}
/* arrow icon (span tag) */
#voltar-topo span#button {
	width: 50px;
	height: 50px;
	display: block;
	margin-bottom: 7px;
	background: #C7DC66 url(../imagens/up-arrow.png) no-repeat center center;
	opacity:0.5;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;	
}

#voltar-topo span#button{background-color:#C7DC66;}
#voltar-topo span#button:hover{opacity:1;background-color:#C7DC66;}
span#link{display :none;}

.jContent{ float: left;}
.jc-horizontal{}
.jc-auto{}
.js-circle{}