/* ================================================================================================================== */
/* 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; }
#works h1.title { display: block; font-size: 5.625em; }
#works h2 { display: block; }
#works p.sub_description { display: block; font-size: 1.5em; margin-bottom: 25px; }

/* ================================================================================================================== */
/* 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; }
}

/* ================================================================================================================== */
/* detalhes */
/* ================================================================================================================== */

#works div.details { display: block; position: relative; margin-top: 50px; text-align: left; padding: 0 25px; }
	#works div.details div.col { display: inline-block; position: relative; vertical-align: top; margin-top: 50px; }
		#works div.details div.col.text { width: 67%; padding-right: 200px; }
		#works div.details div.col.photo { width: 33%; height: 400px; }
			#works div.details div.col.photo a { display: block; position: relative; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; }

@media all and ( max-width: 1200px ) {
	#works div.details { margin-top: 25px; }
}
@media all and ( max-width: 1000px ) {
	#works div.details div.col { margin-top: 25px; }
	#works div.details div.col.text { width: 100%; padding: 0; }
	#works div.details div.col.photo { width: 50%; height: 250px; }
}
@media all and ( max-width: 550px ) {
	#works div.details div.col.photo { width: 100%; }
}

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

#works div.photos { display: block; position: relative; width: 100%; margin-top: 25px; }
	#works div.photos div.block { display: inline-block; position: relative; width: 33%; height: 400px; padding: 25px; }
		#works div.photos div.block a { display: block; position: relative; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; }

	#works div.photos div.block:first-child { display: block; width: 100%; height: 650px; }

@media all and ( max-width: 1000px ) {
	#works div.photos div.block,
	#works div.photos div.block:first-child { display: inline-block; width: 50%; height: 250px; padding: 0; }
}
@media all and ( max-width: 550px ) {
	#works div.photos div.block,
	#works div.photos div.block:first-child { width: 100%; }
}