/* ================================================================================================================== */
/* 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; text-align: right; }
	div#products div.left h1 { margin: 0 0 20px 0; }
	div#products div.left h3 { 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; }
}

/* ================================================================================================================== */
/* desenhos tecnicos */
/* ================================================================================================================== */

div#products div.technical { display: block; position: relative; width: 100%; margin: 50px 0 0 0; }
	div#products div.technical img { display: block; position: relative; max-width: 100%; margin: 20px auto 0 auto; }

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

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

div#products div.photos { display: block; position: relative; width: 100%; height: 550px; background-color: #ffffff; }
	div#products div.photos a { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 5px solid #ffffff; }
	div#products div.photos a:first-child { display: block; }

@media all and (max-width: 1199px) {
	div#products div.photos { height: 200px; }
}

/* ================================================================================================================== */
/* voltar */
/* ================================================================================================================== */

div#products a.back { display: inline-block; position: relative; text-decoration: none; background-color: transparent; border: 1px solid #bbbdbf; padding: 5px 20px; font-size: 11px; line-height: 15px; margin: 50px 0 0 0; color: #929497; border-radius: 5px; }
div#products a.back:hover { background-color: #262261; border: 1px solid #262261;  color: #ffffff; }
	div#products a.back span.img { display: inline-block; position: relative; width: 13px; height: 9px; background: transparent url(../images/pagination_arrows.png) no-repeat; background-position-x: 0; text-align: center; vertical-align: middle; margin: 0 0 0 25px; }
	div#products a.back:hover span.img { background-position-y: -9px; }