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

div#principal_container { background-color: var(--color1); }

#effectdetails { display: block; position: relative; width: auto; margin: 0; padding: 0; }

/* ================================================================================================================== */
/* navegador */
/* ================================================================================================================== */

#effectdetails div.navigator { display: block; position: relative; margin: 0 70px; padding: 10px 0; }
	#effectdetails div.navigator div.left { display: inline-block; position: relative; width: 50%; height: 100%; text-align: left; }
	#effectdetails div.navigator div.right { display: inline-block; position: relative; width: 50%; height: 100%; text-align: right; }

	#effectdetails div.navigator a.back { display: inline-block; position: relative; text-decoration: none; color: var(--color4); background: transparent url(../images/back.png) no-repeat left center; font-size: 0.58em; padding-left: 35px; height: 16px; line-height: 16px; padding-right: 5px; vertical-align: middle; }
	#effectdetails div.navigator a.back:hover { padding-left: 40px; padding-right: 0; }

	#effectdetails div.navigator a.talktous { display: inline-block; position: relative; text-decoration: none; background-color: var(--color2); font-size: 0.58em; color: var(--color1); padding: 5px 35px; }
	#effectdetails div.navigator a.talktous:hover { background-color: var(--color4); }

@media all and ( max-width: 800px ) {
	#effectdetails div.navigator { margin: 0 10px; }
}

/* ================================================================================================================== */
/* banner */
/* ================================================================================================================== */

#effectdetails div.banner { display: block; position: relative; width: auto; height: 400px; background: transparent no-repeat center center; background-size: cover; margin: 0 35px; text-align: center; }
	#effectdetails div.banner span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color4); opacity: 0.3; }
	#effectdetails div.banner h1 { display: inline-block; position: relative; width: auto; font-size: 2.91em; }

@media all and ( max-width: 800px ) {
	#effectdetails div.banner { height: 200px; margin: 0 10px; }
}

/* ================================================================================================================== */
/* fotos */
/* ================================================================================================================== */

#effectdetails div.photos { display: block; position: relative; margin: 0; }
	#effectdetails div.photos a { display: inline-block; position: relative; padding: 35px 35px 0 35px; vertical-align: top; width: 20%; overflow: hidden; }
		#effectdetails div.photos a span { display: block; position: relative; width: 100%; height: 0; padding-bottom: 100%; background: transparent no-repeat center center; background-size: cover; opacity: 0.9; }
		#effectdetails div.photos a:hover span { opacity: 1; }

@media all and ( max-width: 1200px ) {
	#effectdetails div.photos a { width: 25%; }
}
@media all and ( max-width: 800px ) {
	#effectdetails div.photos a { width: 33%; }
}
@media all and ( max-width: 600px ) {
	#effectdetails div.photos a { width: 50%; }
}
@media all and ( max-width: 450px ) {
	#effectdetails div.photos a { width: 100%; }
}