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

div#products { display: block; position: relative; width: 100%; padding: 215px 0 65px 0; margin: 0 auto; font-size: 0; }
	div#products span.bg { display: block; position: absolute; top: 150px; left: 0; width: 100%; height: 265px; background-color: #eef0f1; }
	div#products div.container { display: block; position: relative; width: 1200px; margin: 0 auto; }

@media all and (max-width: 1199px) {
	div#products { padding: 15px 0 50px 0; }
		div#products span.bg { display: none; }
		div#products div.container { width: auto; margin: 0 10px; text-align: center; }
}

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

div#products div.categories { display: block; position: fixed; top: 100px; left: 0; width: 100%; height: 50px; background-color: #262261; z-index: 200; }
	div#products div.categories div.responsive { display: none; }
	div#products div.categories div.container { display: block; position: relative; width: 1200px; margin: 0 auto; height: 100%; text-align: center; }
	div#products div.categories a { display: inline-block; position: relative; width: auto; margin: 0 3px; height: auto; vertical-align: top; font-size: 14px; line-height: 20px; text-decoration: none; color: #ffffff; cursor: pointer; padding: 15px 10px 7px 10px; border-radius: 0 0 10px 10px; background: transparent url(./../images/transparent.png) repeat; }
	div#products div.categories a.selected,
	div#products div.categories a:hover { color: #262261; background: #ffffff url(./../images/transparent.png) repeat; }

@media all and (max-width: 1199px) {
	div#products div.categories { display: block; position: fixed; width: 250px; top: 50px; z-index: 5; }
	div#products div.categories[data-status="open"] { left: 0; }
	div#products div.categories[data-status="closed"] { left: -245px; }
	div#products div.categories
	{
		height: 100%;
		height: -webkit-calc(100vh - 50px);
		height:    -moz-calc(100vh - 50px);
		height:         calc(100vh - 50px);
	}
		div#products div.categories div.responsive { display: block; position: absolute; top: 10px; right: -25px; width: 25px; height: 25px; background-color: #262261; text-align: center; }
			div#products div.categories div.responsive span { display: inline-block; position: relative; width: 18px; height: 14px; background: transparent url(../images/responsive_categories_icon.png) no-repeat; vertical-align: middle; }
			div#products div.categories[data-status="closed"] div.responsive span { background-position-y: 0; }
			div#products div.categories[data-status="open"] div.responsive span { background-position-y: -14px; }

		div#products div.categories div.container { display: block; position: relative; width: 100%; height: 100%; overflow: auto; }
			div#products div.categories div.container a { display: block; border-radius: 0; padding: 10px 0; margin: 5px; }
}

/* ================================================================================================================== */
/* colunas */
/* ================================================================================================================== */

div#products div.col { display: inline-block; position: relative; vertical-align: top; }
div#products div.col.left { width: 385px; }
div#products div.col.right { width: 765px; margin: 0 0 0 50px; }
div#products div.left h1.small { color: #f5692c; }
div#products div.left span { display: block; position: relative; width: 70px; height: 5px; background-color: #f5692c; margin: 12px 0; }

@media all and (max-width: 1199px) {
	div#products div.col { display: block; }
		div#products div.col.left { width: auto; text-align: center; }
		div#products div.col.right { width: auto; margin: 0; text-align: center; }

		div#products div.left h1.small,
		div#products div.left span { display: none; }
}

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

div#products a.category { display: inline-block; position: relative; width: 365px; height: 285px; background: #ffffff no-repeat center center; background-size: cover; margin-bottom: 35px; border: 5px solid #ffffff; }
div#products a.category:nth-child(2n) { margin-left: 35px; }
	div#products a.category div.hover { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(../images/bg_item_hover.png) repeat; text-align: center; opacity: 0; }
	div#products a.category:hover div.hover { opacity: 1; }
		div#products a.category div.hover h2 { display: inline-block; position: relative; vertical-align: middle; color: #f5692c; }

@media all and (max-width: 1199px) {
	div#products a.category { width: 290px; height: 250px; margin: 5px; border: none; }
	div#products a.category:nth-child(2n) { margin-left: 5px; border: none; }
}

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

div#products a.item { display: inline-block; position: relative; width: 220px; height: 165px; margin: 0 25px 25px 0; vertical-align: top; background: #ffffff no-repeat center center; background-size: contain; }
div#products a.item:nth-child(5n) { margin: 0 0 25px 0; }
	div#products a.item div.hover { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent url(../images/bg_item_hover.png) repeat; text-align: center; opacity: 0; }
	div#products a.item:hover div.hover { opacity: 1; }
		div#products a.item div.hover h2 { display: inline-block; position: relative; vertical-align: middle; color: #ffffff; }

@media all and (max-width: 1199px) {
	div#products a.item { margin: 10px; width: 250px; height: 200px; }
	div#products a.item:nth-child(5n) { margin: 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; color: #bbbdbf; border: 1px solid #bbbdbf; border-radius: 5px; width: 30px; height: 30px; line-height: 30px; text-decoration: none; margin: 2px; }
	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: #f5692c; border: 1px solid #f5692c; }
		div#products div.pagination a span.img { display: inline-block; position: relative; width: 13px; height: 9px; 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: -9px; }
		div#products div.pagination a span.img.first { background-position-x: 0; }
		div#products div.pagination a span.img.last { background-position-x: -13px; }