/*--------------------------------------------------------------------
LAYOUT BODY - grupeme(IE7+ FF1.5+ Opera9+)

Version: 	1.0 - 2012
author: 	Burocratik (alexandre r. gomes)
email: 		alex@burocratik.com
website: 	http://www.burocratik.com
-----------------------------------------------------------------------*/
@import url(body.css);

/*----------------------------------------------------------------------*/

/*-------------------------------------------------------------------------
=SERVICOS
-------------------------------------------------------------------------*/
/*article {overflow: hidden;}*/
section h3{font: 28px/26px "Reader Medium", Helvetica, Arial, sans-serif; color: #a08651; margin-bottom: 5px;}
section p{font: 17px/22px "Reader Regular", Helvetica, Arial, sans-serif; margin-bottom: 25px;}
section ul{font: 13px/22px "Reader Medium", Helvetica, Arial, sans-serif; list-style: none;}
section ul li:before{content: "•"; display: inline-block; padding-right: 5px; margin-left: -8px;}

/*-------------------------------------------------------------------------
=CLIENTES: section 1
-------------------------------------------------------------------------*/
#section1{overflow: auto; margin-top: 80px; padding-left: 20px; margin-left: -20px;}
#section1 article{width: 680px; float: left;}
#section1 img{position: absolute; right: -111px; top: -40px;}
#section1 ul{width: 330px; float: left;}
#section1 span{
	position: absolute; right: -111px; top: -40px; opacity: 0;
	display: block; width: 463px; height: 325px; overflow: hidden; z-index: 10;
	background: transparent url(../files/sistemas-deteccao-intrusos-anim.png) no-repeat 0 0;
}

/*-------------------------------------------------------------------------
=CLIENTES: section 2
-------------------------------------------------------------------------*/
#section2{
	position: relative; width: 100%; height: 450px; padding: 70px 0 70px; margin: 150px 0 70px; 
	text-align: center;}
#section2 .bg{
	position: absolute; top: 0;  left: -111px;  width: 1200px; height: 100%; z-index: 5;
	background: url(../files/sistemas-vigilancia-interativa.jpg) no-repeat center top;
}
#section2 article{
	position: relative; z-index: 20; height: 100%;
	font: 17px/22px "Reader Regular", Helvetica, Arial, sans-serif; color: #303030;
}
#section2 h3{color: #303030;}
#section2 ul{color: #FFF; position: absolute; left: 670px; top: 285px; text-align: left;}
/*#section2 img{position: absolute; left: 430px; top: 180px;}*/

/* =DETECTOR:: headerinfo */
#detector{
	position: absolute; left: 346px; top: 150px; width: 294px; height: 460px; z-index:20;
	background: transparent url(../imgs/index-detector-bg.png) no-repeat left bottom;
}
#detector figure{
	position: absolute; top: 7px; left: 36px; height: 383px; width: 237px;	overflow: hidden;
}
#detector figure img{position: absolute; top:384px; left: 0;}
#detector div{
	position: absolute; width:279px; height: 42px; top: 375px; left: 23px;
	background: transparent url(../imgs/index-detector-bg-sombra.png) no-repeat;
}
#detector span{
	position: absolute; top:63px; left:98px; opacity:0;
	display: block; width: 115px; height: 103px; overflow: hidden; z-index: 10;
	background: transparent url(../files/sistemas-detector-camara-anim.png) no-repeat 0 0;
}

/*-------------------------------------------------------------------------
=CLIENTES: section 3
-------------------------------------------------------------------------*/
#section3{overflow: hidden;}
#section3 article{width: 670px; float: left; margin-left: 336px;}
#section3 img{position: absolute; left: -65px;}
#section3 ul{width: 335px; float: left;}

/*-------------------------------------------------------------------------
=CLIENTES: section 4
-------------------------------------------------------------------------*/
#section4{
	position: relative; width: 100%; height: 460px; margin: 180px 0 70px; 
	text-align: center;
}
#section4 .bg{
	position: absolute; top: 0; left: -111px;  width: 1200px; height: 100%; z-index: 5;
	background: url(../imgs/sistemas-deteccao-bg.jpg) no-repeat center top;
}
#section4 article{
	position: relative; z-index: 20; padding: 177px 65px 0; overflow: visible;
	font: 17px/22px "Reader Regular", Helvetica, Arial, sans-serif; color: #ffffff;
}
#section4 h3, #section4 ul{color: #FFF;}
#section4 ul{display: block; position: relative; float: left; text-align: left; width: 100%; margin-top: 25px;}
#section4 ul li{width: 340px;}
#section4 ul li.last{display: block; position: absolute; left: 525px; top: 0px;}

#section4 #incendios{position: absolute; width: 270px; height: 270px; top: -135px; left: 355px;}
#section4 #incendios span{
	position: absolute; top: 119px; left: 10px; opacity: 0;
	display: block; width: 248px; height: 30px; overflow: hidden; z-index: 40;
	background: transparent url(../files/sistemas-deteccao-incendios-anim.png) no-repeat 0 0;
}
/*-------------------------------------------------------------------------
=CLIENTES: section 5
-------------------------------------------------------------------------*/
#section5 article{overflow: hidden;}
#section5 ul{
	display: block; position: relative; float: left; text-align: center; width: 100%; 
	margin: 35px 0 50px;
}
#section5 ul li{
	display: block; position: relative; float: left; width: 222px; margin-right: 30px;
	font: 14px/18px "Reader Medium", Helvetica, Arial, sans-serif; color: #a08651; padding: 0px;
}
#section5 ul li:before{content: "";}
#section5 ul li:last-child{margin-right: 0px;}
#section5 .info{font-size: 13px; line-height: 18px; margin-bottom: 100px;}
#section5 ul li img{ margin: 0 59px 24px;}