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

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

@media all and (max-width: 1199px) {
	div#products div.container { width: auto; text-align: center; }
}

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

div#products span.photo { display: block; position: relative; width: 100%; height: 300px; margin: 0 0 50px 0; background: transparent no-repeat center center; background-size: cover; }

@media all and (max-width: 1199px) {
	div#products span.photo { height: 200px; margin: 0 0 25px 0; }
}

/* ================================================================================================================== */
/* produtos */
/* ================================================================================================================== */

div#products div.products { display: block; position: relative; margin: 50px 0 0 0; }
	div#products div.products a.item { display: inline-block; position: relative; width: 150px; height: auto; margin: 25px; text-decoration: none; text-align: center; vertical-align: top; }
		div#products div.products a.item span { display: block; position: relative; width: 100%; height: 250px; background: transparent no-repeat center center; background-size: contain; border: 1px solid #ffffff; margin: 0 0 15px 0; }
		div#products div.products a.item:hover span { border: 1px solid #b40e3c; }
		div#products div.products a.item p { display: block; position: relative; }
		div#products div.products a.item:hover p { color: #b40e3c; }

@media all and (max-width: 1199px) {
	div#products div.products a.item span { height: 150px; }
}

/* ================================================================================================================== */
/* detalhe produto */
/* ================================================================================================================== */

div#products div.details { display: none; position: fixed; background-color: #ffffff; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; font-size: 0; }
div#products div.details[data-status="closed"] { display: none; }
div#products div.details[data-status="open"] { display: block; }
	div#products div.details div.container { display: block; position: relative; width: 1200px; margin: 0 auto; height: 100%; text-align: center; }
		div#products div.details div.container div.inside { display: inline-block; position: relative; width: 700px; max-height: 100%; height: auto; overflow: hidden; vertical-align: middle; }
			div#products div.details div.container div.inside div.photos { display: block; position: relative; width: 100%; height: 400px; margin: 0 0 10px 0; }
				div#products div.details div.container div.inside div.photos a { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: contain; }
				div#products div.details div.container div.inside div.photos a:first-child { display: block; }
		div#products div.details div.container span.close { display: block; position: absolute; top: 50px; right: -27px; width: 27px; height: 28px; background: transparent url(../images/close.png) no-repeat; cursor: pointer; }
		div#products div.details div.container span.close:hover { background-position-y: -28px; }

@media all and (max-width: 1199px) {
	div#products div.details div.container { width: auto; }
		div#products div.details div.container div.inside { width: auto; max-height: none; overflow: auto; }
			div#products div.details div.container div.inside div.photos { height: 250px; }

			div#products div.details div.container span.close { top: 10px; right: 10px; }
}

/* ================================================================================================================== */
/* paginacao */
/* ================================================================================================================== */

div#products div.pagination { display: block; position: relative; width: 100%; height: auto; margin: 30px 0 0 0; text-align: center; }
	div#products div.pagination a { display: inline-block; position: relative; padding: 0; line-height: 12px; text-decoration: none; vertical-align: middle; margin: 0 3px; }
	div#products div.pagination a.first { margin: 0 15px 0 0; }
	div#products div.pagination a.last { margin: 0 0 0 15px; }
	div#products div.pagination a.selected,
	div#products div.pagination a:hover { color: #b40e3c; }
		div#products div.pagination a span.img { display: inline-block; position: relative; width: 7px; height: 12px; background: transparent url(../images/pagination_arrows.png) no-repeat; text-align: center; vertical-align: middle; }
		div#products div.pagination a:hover span.img { background-position-y: -12px; }
		div#products div.pagination a span.img.first { background-position-x: 0; }
		div#products div.pagination a span.img.last { background-position-x: -7px; }