/* ================================================================================================================== */
/* corpo */
/* ================================================================================================================== */

div#services { display: block; position: relative; width: 100%; padding: 0; margin: 0 auto; font-size: 0; }
	div#services div.text { display: block; position: relative; background-color: #f5f5f5; padding: 100px 0; }
	div#services div.container { display: block; position: relative; width: 1200px; margin: 0 auto; padding: 0; font-size: 0; text-align: center; }

@media all and ( max-width: 1199px )
{
	div#services { padding: 0; }
		div#services div.text { padding: 25px 0; }
		div#services div.container { width: auto; margin: 0 10px; }
}

/* ================================================================================================================== */
/* text */
/* ================================================================================================================== */

div#services div.text h1 { max-width: 300px; text-align: left; }
div#services div.text p { max-width: 300px; margin: 50px 0 0 0; text-align: left; }

@media all and ( max-width: 1199px )
{
	div#services div.text h1 { max-width: none; }
	div#services div.text p { max-width: none; margin: 25px 0 0 0; }
}

/* ================================================================================================================== */
/* blocos */
/* ================================================================================================================== */

div#services div.responsive { display: none; }
div#services div.normal { display: block; }
div#services div.block { display: block; position: relative; width: auto; font-size: 0; margin-bottom: 100px; padding: 0 0 0 0; text-align: left; }
div#services div.block:last-child { margin-bottom: 0; }
	div#services div.block h1 { margin: 50px 0; }
	div#services div.block div.slide { display: block; position: relative; width: 100%; overflow: hidden; padding: 0 0 50px 0; overflow: hidden; }
	div#services div.block div.inner-slide { display: block; position: relative; width: 100%; }
		div#services div.block .photo { display: block; position: absolute; top: 0; left: 0; padding: 0; width: 100%; height: 100%; }
		div#services div.block .photo[data-status="true"] { opacity: 1; z-index: 2; }
		div#services div.block .photo[data-status="false"] { opacity: 0; z-index: 1; }
		div#services div.block .photo:first-child { display: block; }
			div#services div.block .photo span { display: block; position: relative; width: 100%; height: 100%; }
			div#services div.block .photo p.photo_text { display: block; position: absolute; left: 0; bottom: -50px; }
			div#services div.block .photo[data-status="false"] p.photo_text { bottom: -100%; }
	div#services div.block div.left { display: inline-block; position: relative; vertical-align: top; margin: 0 40px 0 0; }
	div#services div.block div.right { display: inline-block; position: relative; vertical-align: top; margin: 0 }

	div#services div.block div.icons { display: block; position: relative; width: auto; height: auto; font-size: 0; margin: 50px 0 50px 0; }
		div#services div.block div.icons span.icon { display: inline-block; position: relative; width: 10px; height: 10px; margin: 2px; font-size: 0; vertical-align: top; background: transparent url(../images/services_photos_icons.png) no-repeat; cursor: pointer; }
		div#services div.block div.icons span.icon[data-status="false"] { background-position-y: 0; }
		div#services div.block div.icons span.icon:hover { background-position-y: -10px; }
		div#services div.block div.icons span.icon[data-status="true"] { background-position-y: -20px; cursor: default; }

div#services div.block._0,
div#services div.block._2 { width: 1050px; margin-left: 150px; }
	div#services div.block._0 div.left,
	div#services div.block._2 div.left { width: 300px; text-align: right; }
	div#services div.block._0 div.right,
	div#services div.block._2 div.right { width: 710px; }
		div#services div.block._0 div.slide { margin: -165px 0 0 0; }
		div#services div.block._0 div.inner-slide { height: 520px; }
		div#services div.block._2 div.inner-slide { height: 450px; }
			div#services div.block._0 p.photo_text { background-color: #ec1c24; color: #ffffff; margin: 0 50px 0 185px; padding: 30px 40px; }
			div#services div.block._2 p.photo_text { background-color: #f3ef8c; margin: 0 350px 0 50px; padding: 35px 25px; }

div#services div.block._1 { width: 950px; }
	div#services div.block._1 div.left { width: 610px; }
	div#services div.block._1 div.right { width: 300px; margin: 0 0 115px 0; }
		div#services div.block._1 div.inner-slide { height: 415px; }
			div#services div.block._1 .photo p.photo_text { background-color: #ffffff; margin: 0 50px 0 100px; padding: 30px 40px; left: auto; right: 0; bottom: -40px; box-shadow: 0 5px 5px #aaaaaa; }
			div#services div.block._1 .photo[data-status="false"] p.photo_text { bottom: -100%; }

@media all and ( max-width: 1199px )
{
	div#services div.normal { display: none; }
	div#services div.responsive { display: block; }
		div#services div.block { margin-bottom: 50px; width: auto; }
			div#services div.block h1 { margin: 25px 0; }
			div#services div.block div.icons { margin: 10px 0; text-align: center; }
			div#services div.block div.slide { height: 300px; padding: 0; }
				div#services div.block div.inner-slide { height: 100%; }
					div#services div.block div.photo p.photo_text { width: auto; bottom: 0; background-color: #ec1c24; color: #ffffff; margin: 0; padding: 10px; font-size: 10px; line-height: 15px; }
}

/* ================================================================================================================== */
/* voltar ao topo */
/* ================================================================================================================== */

div#services div.back_to_top { display: inline-block; position: relative; margin: 50px 0; border: 1px solid #808184; }
	div#services div.back_to_top a { display: block; position: relative; text-decoration: none; font-size: 12px; line-height: 28px; padding: 0 50px; z-index: 10; text-align: center; }
	div#services div.back_to_top:hover a { color: #ffffff; }
	div#services div.back_to_top span { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-color: #808184; z-index: 1; }
	div#services div.back_to_top:hover span { height: 100%; }

@media all and ( max-width: 1199px )
{
	div#services div.back_to_top { margin: 25px 0; }
}