* { 
	padding: 0; 
	margin: 0; 
	}

body {
	font-size: 14px;
	color: #666;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: #0F62AC;}	

.clear {clear:both;}
ul {list-style: none;}
a {color: #666; text-decoration: none;}
h1 {
	font-size: 18px;
	font-family: 'Ubuntu Condensed', arial, sans-serif;
	font-weight: normal;}
	
h2 {
	font-size: 18px;
	font-family: 'Ubuntu Condensed', arial, sans-serif;
	font-weight: normal;
	color: #0F62AC;
	margin: 0 0 5px 0;}
	
#container {
	background: #FFF;
	max-width: 1920px;
	margin: 0 auto;}
	
#container:after {
	content: "";
	display: block;
	clear: both;}



/*-----[ TOPO-----*/
#topo {
	max-width: 960px;
	min-height: 130px;
	padding: 0 10px 10px 10px;
	margin: 0 auto;}

#topo .logo {
	display: block;
	float: left;
	margin: 20px 0 0 0;}
	
#topo .logo img {width: 100%;}
	
#topo .fone {
	width: 105px;
	height: 40px;
	line-height: 40px;
	padding: 0 0 0 55px;
	display: block;
	float: right;
	color: #FFF;
	font-size: 18px;
	font-family: 'Ubuntu Condensed', arial, sans-serif;
	background: url(https://www.saitbr.com.br/automacao/images/bg_fone.png) no-repeat center top;}
	
#topo #menu {
	float: right;
	text-align: right;
	margin: -40px 0 0 0;
	clear: both;}

#topo #menu li {display: inline;}

#topo #menu li a,
#topo #menu li .ativo {
	font-family: 'Ubuntu Condensed', arial, sans-serif;
	font-size: 16px;}

#topo #menu li a {
	display: inline-block;
	height: 35px;
	line-height: 35px;
	padding: 0 15px;}
	
#topo #menu li a:hover {color: #0092D5;}

#topo #menu li .ativo,
#topo #menu li .ativo:hover {
	background: #0F62AC;
	color: #FFF;
	border-radius: 3px;}
/*-----TOPO ]-----*/

/*-----[ BANNER-----*/
#banner {
	padding: 20px 10px 0 10px;
	background: url(https://www.saitbr.com.br/automacao/images/bg_tarja.jpg) no-repeat center top;}
	
#bannerInt {
	min-height: 45px;
	padding: 50px 10px 0 10px;
	background: url(https://www.saitbr.com.br/automacao/images/bg_tarja.jpg) no-repeat center bottom;}
	
#banner ul {
	max-width: 960px;
	max-height: 350px;
	margin: 0 auto;
	background: #FFF;
	border-radius: 3px;}
	
#banner .sombra {
	max-width: 960px;
	height: 30px;
	margin: 0 auto;
	background: url(https://www.saitbr.com.br/automacao/images/sombra960.png) no-repeat center top;}
	
#banner #tarja,
#bannerInt #tarja {
	max-width: 920px;
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
	margin: 0 auto;
	color: #FFF;
	background: url(https://www.saitbr.com.br/automacao/images/bg_tarja_h1.jpg) repeat-x center top;
	border-radius: 3px 3px 0 0;}
/*-----BANNER ]-----*/


/*-----[ CONTEÚDO-----*/
#content {
	max-width: 960px;
	margin: 20px auto 5px auto;
	padding: 0 10px;}
	
#content h1 {
	font-size: 20px;
	color: #0F62AC;
	margin-bottom: 10px;}
	
#content .vejaMais {
	display: block;
	padding: 5px 0 5px 12px;
	color: #0F62AC;
	font-family: 'Ubuntu Condensed', arial, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	background: url(https://www.saitbr.com.br/automacao/images/seta_mais.jpg) no-repeat left center;}
	
#content .vejaMais:hover {
	color: #0092D5;
	background: url(https://www.saitbr.com.br/automacao/images/seta_mais.jpg) no-repeat 3px center;}
	
.colLeft {
	width: 70%;
	float: left;}
	
.colRight {
	width: 30%;
	float: left;}

	
/*---home---*/
#content .ProdServ {
	max-width: 460px;
	min-height: 140px;
	float: left;
	font-size: 14px;
	line-height: 16px;}
	
#content .ProdServ .link {
	display: table;
	padding: 0 0 10px 0;}
	
#content .ProdServ img {
	width: 120px;
	float: left;
	margin: 0 10px 0 0;
	border: 1px solid #EEE;
	border-radius: 3px;}
	
#content .ProdServ strong {
	font-size: 16px;
	line-height: 18px;
	display: block;
	margin: 0 0 5px 0;}
	
#content .ProdServ .link:hover strong {color: #0092D5;}
#content .ProdServ .link:hover img {border-color: #0092D5;}
	
#content .separaV {
	max-width: 30px;
	min-width: 15px;
	min-height: 170px;
	width: 100%;
	float: left;
	background: url(https://www.saitbr.com.br/automacao/images/sombra170v.png) no-repeat center;}
	
#content #homeQS {
	float: left;
	width: 96%;
	padding: 2%;
	background: #EEE;
	border-radius: 3px 0 0 3px;
	margin-top: 10px;
	line-height: 18px;}
	
#content #homeQSimg {
	display: none;
	width: 330px;
	height: 170px;
	margin-top: 10px;
	background: url(https://www.saitbr.com.br/automacao/images/bg_site_robot.jpg) no-repeat center;
	float: right;
	border-radius: 0 3px 3px 0;}
	
	
.icFachada {
	width: 33%;
	float: right;
	margin: 0 0 0 2%;
	border-radius: 3px;}
	

/*---servicos---*/	
#servicosList {padding: 0 0 10px 0;}
#servicosList li {
	padding: 15px 0;
	display: block;
	border-bottom: 1px dashed #CCC;}
	
#servicosList li img {
	width: 150px;
	float: left;
	border-radius: 3px;
	border: 1px solid #CCC;
	margin: 0 20px 0 0;}
	
#servicosList li h2 {font-size: 20px;}
	
/*---produtos---*/
#aplicacoes {
	width: 28%;
	height: 315px;
	padding: 5px 1%;
	border-radius: 3px 3px 3px 0;
	background: #EEE;}

.prodList {list-style: disc outside; margin-left: 20px;}
.prodList li {
	padding: 5px 0;
	line-height: 16px;}
	
.imgProd {
	float: right;
	height: 325px;
	margin: 0 0 0 5px;}
	
.prodFotos {
	margin: 0 0 20px 0;
	text-align: center;}
	
.prodFotos li {display: inline;}
	
.prodFotos li img {
	border-radius: 5px;
	border: 1px solid #CCC;
	margin: 8px 13px;}
	
.prodFotos li img:hover {border-color: #0F62AC;}


/*---clientes---*/
#clientesList {text-align: left;}

#clientesList li {
	width: 160px;
	height: 160px;
	margin: 14px;
	display: inline-block;
	background: url(https://www.saitbr.com.br/automacao/images/bg-clientes.jpg) no-repeat center;
	background-size: 100%;
	border-radius: 3px;
	box-shadow: 2px 2px 7px #CCC;}



/*----------FORMULARIOS----------*/
.btCatalogo {
	display: block;
	float: right;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	padding: 0 0 0 40px;
	background: url(https://www.saitbr.com.br/automacao/images/btCatalogo.png) no-repeat left center;}
	
.btCatalogo:hover {text-decoration: underline;}

#contatoForm {
	width: 67%;
	margin: 0 3% 0 0;}
	
#contatoTx {float: right;}

#contatoTx .email {
	display: block;
	font-size: 18px;
	font-family: 'Ubuntu Condensed', arial, sans-serif;
	font-weight: normal;
	color: #0F62AC;
	margin: 0 0 5px 0;}
	
#contatoTx .email a {color: #0F62AC; border-bottom: 1px solid #0F62AC;}
#contatoTx .email a:hover {color: #666;}

.contatoImg {
	width: 99%;
	border: 1px solid #CCC;
	border-radius: 3px;
	margin: 0 0 10px 0;}
	
.form {
	width: 48%;
	min-height: 45px;
	float:left;
	margin: 0 0 10px 0;}

.field_name {display:block;}

.field_input {
	margin: 2px 0 0 0;
	display: block;}

.field_input input[type=text],
.field_input input[type=password] {
	height: 27px;
	line-height: 27px;
	border:1px solid #CCC;
	border-radius: 3px;
	width: 98%;
	padding: 0 1%;
	outline: none;}
	
.field_input select {
	border:1px solid #CCC;
	border-radius: 3px;
	width:100%;
	padding: 1%;
	height: 29px;
	line-height: 29px;
	cursor: pointer;
	outline: none;}
	
.field_input select option {
	padding: 5px;
	border-bottom: 1px solid #EEE;}

.field_input textarea {
	border: 1px solid #CCC;
	border-radius: 3px;
	width: 98%;
	max-width: 98%;
	padding: 1%;
	outline: none;}

.input_bt {
	padding: 6px;
	float: left;
	font-size: 12px;
	margin: 0;
	background: #0F62AC;
	border: none;
	border-radius: 3px;
	color: #FFF;
	cursor: pointer;}
	
.input_bt:hover {
	background: #666;
	color: #FFF;}
	
.comochegar {
	display: block;
	font-size: 12px;
	color: #0F62AC;
	margin: 5px 0 0 0;}

.comochegar:hover {text-decoration: underline;}
	
/*-----CONTEÚDO ]-----*/

/*-----[ BASE-----*/
#base {
	max-width: 960px;
	min-height: 70px;
	font-size: 13px;
	line-height: 15px;
	margin: 0 auto;
	padding: 30px 10px 20px 10px;
	background: url(https://www.saitbr.com.br/automacao/images/sombra960.png) no-repeat center top;}
	
#base h1 {
	font-size: 18px;
	color: #0F62AC;
	margin-bottom: 5px;}
	
#base #endBase {float: left;}
	
#base .logoBase {
	width: 157px;
	display: block;
	margin: 0 auto;}
	
#base .logoBase img {height: 65px;}

#base #assBase {
	margin-top: -40px;
	float: right;
	font-size: 11px;}
/*-----BASE ]-----*/






/*-----[ MOBILE-----*/
@media handheld, screen and (max-width:480px) {
	
	
	#topo .logo {width: 200px;}
	
	#topo .fone {
		width: 75px;
		height: 35px;
		line-height: 35px;
		padding: 0 0 0 45px;
		font-size: 15px;
		background: url(https://www.saitbr.com.br/automacao/images/bg_fone_m.png) no-repeat center top;}
		
	#topo #menu {
		float: left;
		text-align: left;
		margin: 20px 0 0 0;
		clear: both;
		width: 100%;}
	
	#topo #menu li a {
		display: block;
		height: 35px;
		line-height: 35px;
		margin: 0 0 2px 0;
		background: #EEE;
		border-radius: 3px;}
		
	#topo #menu li a:hover {color: #0092D5;}
	
	
	#banner .sombra {
		height: 30px;
		background: url(https://www.saitbr.com.br/automacao/images/sombra360.png) no-repeat center top;}	
		
	#content .ProdServ {
		max-width: 100%;
		margin-bottom: 15px;
		border-bottom: 1px solid #EEE;}
		
	#content .ProdServ img {width: 80px;}
	#content .separaV {display: none;}
	
	/*#content #homeQSimg {
		width: 100%;
		height: 170px;
		margin-top: 10px;
		border-radius: 3px 3px 0 0;
		background-size: cover;}*/
		
	#content #homeQS {margin-top: 0;}
	
	.icFachada {width: 100%; margin: 0 0 10px 0;}
	
	#base {	background: url(https://www.saitbr.com.br/automacao/images/sombra360.png) no-repeat center top;}
	#base {text-align: center;}
	
	#base #endBase {
		float: none;
		width: 100%;
		margin: 0 0 20px 0;}
		
	#base #assBase {
		margin-top: 20px;
		float: none;
		font-size: 11px;}
		
	.colLeft {
		width: 100%;
		height: auto;
		padding: 0;}
		
	.imgProd {display: none;}
		
	#aplicacoes {
		width: 96%;
		height: auto;
		padding: 5px 2%;
		border-radius: 3px;
		margin: 10px 0 0 0;}
		
	.Slide > div {display: none !important;}
	
	.prodFotos li img {
		width: 118px;
		margin: 6px 8px;}
		
	#contatoForm {
		width: 96%;
		padding: 2%;
		margin: 0;
		background: #EEE;
		border-radius: 3px;}
		
	#contatoTx {
		font-size: 16px;
		width: 100%;
		margin: 0 0 20px 0;
		padding: 0 0 20px 0;
		border-bottom: 1px solid #0F62AC;}
		
	#contatoTx h2,
	.contatoImg {display: none;}
	
	#clientesList li {
		width: 140px;
		height: 140px;
		margin: 13px;}
		
	#clientesList li img {width: 140px;}
}


@media handheld, screen and (min-width: 481px) and (max-width:960px) {	
	#topo #menu {
		float: left;
		text-align: left;
		margin: 20px 0 0 0;
		clear: both;
		width: 100%;
		min-width: 620px;}
		
	#topo #menu a {
		padding: 0 15%;}
		
	#content .ProdServ {
		min-width: 100%;
		margin-bottom: 15px;
		border-bottom: 1px solid #EEE;}
		
	#content .ProdServ img {width: 100px;}
	#content .separaV {display: none;}
	
	/*-----
	#content #homeQS {
		width: 54%;
		padding: 2%;
		margin-top: 10px;
		min-height: 215px;}
	
	#content #homeQSimg {
		width: 42%;
		padding: 2% 0;
		min-height: 215px;
		margin-top: 10px;}
	-----*/
		
	.icFachada {width: 48%;}
		
	#base {	background: url(https://www.saitbr.com.br/automacao/images/sombra360.png) no-repeat center top;}
	#base {text-align: center;}
	
	#base #endBase {
		float: none;
		width: 100%;
		margin: 0 0 20px 0;}
		
	#base #assBase {
		margin-top: 20px;
		float: none;
		font-size: 11px;}
		
	.colLeft {
		width: 100%;
		height: auto;
		padding: 0;}
		
	.imgProd {
		height: 290px;
		border-radius: 0 0 3px 0;}
		
	#aplicacoes {
		width: 96%;
		height: auto;
		padding: 5px 2%;
		border-radius: 3px;
		margin: 10px 0 0 0;}
		
	.prodList li {
		width: 50%;
		float: left;}
		
	.prodFotos li img {
		width: 125px;
		margin: 8px 10px;}
		
	#contatoForm {
		width: 96%;
		padding: 2%;
		margin: 0;
		background: #EEE;
		border-radius: 3px;}
		
	#contatoTx {
		font-size: 16px;
		width: 100%;
		margin: 0 0 20px 0;
		padding: 0 0 20px 0;
		border-bottom: 1px solid #0F62AC;}
		
	#contatoTx h2,
	.contatoImg {display: none;}
	
	#clientesList li {
		width: 122px;
		height: 122px;
		margin: 13px;}
		
	#clientesList li img {width: 122px;]
}
/*-----MOBILE ]-----*/