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

#works { display: block; position: relative; width: 100%; height: auto; margin: 0; padding: 0; text-align: left; }

/* ================================================================================================================== */
/* texto */
/* ================================================================================================================== */

#works h1 { display: inline-block; position: relative; font-size: 2.5em; vertical-align: middle; width: auto; height: auto; }

/* ================================================================================================================== */
/* categorias */
/* ================================================================================================================== */

#works div.categories { display: inline-block; position: relative; width: auto; height: auto; padding: 0; vertical-align: middle; margin-left: 50px; }
	#works div.categories a { display: inline-block; position: relative; font-size: 1.875em; color: #a5a7aa; vertical-align: middle; margin: 0; text-decoration: none; }
	#works div.categories a.selected,
	#works div.categories a:hover { color: #3ec5f3; }
	#works div.categories a:after { content: "·"; display: inline-block; position: relative; font-size: 1.875em; color: #a5a7aa; margin: 0 15px; vertical-align: middle; }
	#works div.categories a:last-child:after { display: none; }

@media all and ( max-width: 1200px ) {
	#works div.categories { margin: 25px; }
}

/* ================================================================================================================== */
/* items */
/* ================================================================================================================== */

#works div.items { display: block; position: relative; margin-top: 25px; text-align: center; }
	#works div.items div.block { display: inline-block; position: relative; vertical-align: top; width: 33%; height: 450px; padding: 25px; }
		#works div.items div.block a { display: block; position: relative; vertical-align: top; width: 100%; height: 100%; overflow: hidden; }
				#works div.items div.block a span.photo { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; }
				#works div.items div.block a div.text { display: block; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; padding: 50px 40px; }
				#works div.items div.block a:hover div.text { left: 0; }
					#works div.items div.block a div.text span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #3ec5f3; opacity: 0.8; }
					#works div.items div.block a div.text p { display: inline-block; position: relative; vertical-align: bottom; font-size: 2.5em; }

	#works div.items div.block:first-child { width: 100%; height: 650px; }
			#works div.items div.block:first-child a div.text { left: -25%; width: 25%; }
			#works div.items div.block:hover:first-child a div.text { left: 0; }

	#works div.items div.block:nth-child(2) { width: 66%; height: 500px; }
			#works div.items div.block:nth-child(2) a div.text { left: -50%; width: 50%; }
			#works div.items div.block:hover:nth-child(2) a div.text { left: 0; }

	#works div.items div.block:nth-child(3) { height: 500px; }

@media all and ( max-width: 1200px ) {
	#works div.items div.block,
	#works div.items div.block:first-child,
	#works div.items div.block:nth-child(2),
	#works div.items div.block:nth-child(3) { width: 100%; height: 350px }
		#works div.items div.block a div.text,
		#works div.items div.block:first-child a div.text,
		#works div.items div.block:nth-child(2) a div.text { left: 0; width: 100%; padding: 25px; }
}