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

div#products { display: block; position: relative; width: 100%; padding: 0 0 100px 0; margin: 0 auto; font-size: 0; }
	div#products div.container { display: block; position: relative; width: 1200px; margin: 0 auto; padding: 0; font-size: 0; }

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

/* ================================================================================================================== */
/* menu secundario */
/* ================================================================================================================== */

div#products div.categories { display: block; position: fixed; width: 100%; top: 0; left: 0; text-align: center; z-index: 100; background-color: #010101; font-size: 0; }
div#products div.categories[data-status="normal"] { top: 135px; }
div#products div.categories[data-status="small"] { top: 75px; }
	div#products div.categories a { display: inline-block; position: relative; text-decoration: none; }
		div#products div.categories a p { color: #ffffff; font-size: 18px; line-height: 35px; margin: 5px 35px; }
		div#products div.categories a.selected p,
		div#products div.categories a:hover p { color: #eb2227; }
		div#products div.categories a span { display: block; position: absolute; bottom: 5px; left: 50%; width: 0px; height: 3px; margin: 0; background-color: #eb2227; }
		div#products div.categories a.selected span,
		div#products div.categories a:hover span { width: 30px; margin: 0 0 0 -15px; }

@media all and ( max-width: 1199px )
{
	div#products div.categories { white-space: nowrap; overflow: auto; }
	div#products div.categories[data-status="normal"],
	div#products div.categories[data-status="small"] { top: 65px; }
		div#products div.categories a p { font-size: 12px; line-height: 25px; margin: 5px 15px; }
}

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

div#products div.items { display: block; position: relative; padding: 100px 0 0 0; font-size: 0; text-align: left; }
	div#products div.items a { display: inline-block; position: relative; width: 384px; margin: 0 24px 55px 0; vertical-align: bottom; text-decoration: none; }
	div#products div.items a:nth-child(3n) { margin-right: 0; }
		div#products div.items a div.photo { display: block; position: relative; width: 100%; height: 250px; margin: 0 0 15px 0; text-align: center; }
			div#products div.items a div.photo img { display: inline-block; position: relative; max-width: 100%; max-height: 250px; margin: 0; vertical-align: middle; }
		div#products div.items a h1 { display: block; position: relative; font-size: 18px; line-height: 25px; color: #010101; text-align: center; }
		div#products div.items a:hover h1 { color: #eb2227; }
		div#products div.items a span.discount { display: block; position: absolute; top: 0; left: 0; background-color: #eb2227; line-height: 30px; padding: 0 20px; color: #ffffff; }

	div#products div.items a:hover *,
	div#products div.items a:hover { transition-property: width, height, top, left, background-color, color; -webkit-transition-property: width, height, top, left, background-color, color; -moz-transition-property: width, height, top, left, background-color, color; transition-duration: 400ms; -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; }
	div#products div.items a *,
	div#products div.items a { transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-duration: 400ms; -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; }

@media all and ( max-width: 1199px )
{
	div#products div.items { text-align: center; }
		div#products div.items div.category { margin: 25px 0 0 0; text-align: center; }
			div#products div.items div.category h1.title { margin: 0 0 25px 0; }

		div#products div.items a,
		div#products div.items a:nth-child(3n) { width: 280px; margin: 0 5px 35px 5px; }
}

/* ================================================================================================================== */
/* paginador */
/* ================================================================================================================== */

div#products div#pagination { margin: 100px 0 0 0; }

@media all and ( max-width: 1199px )
{
	div#products div#pagination { margin: 50px 0 0 0; }
}