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

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

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

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

div#products h2 { font-size: 30px; line-height: 35px; margin: 20px 0; }
div#products p.text { font-size: 18px; line-height: 20px; }

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

div#products div.products { display: block; position: relative; margin: 20px 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: 150px; background: transparent no-repeat center center; background-size: contain; border: none; margin: 0 0 5px 0; }
		div#products div.products a.item p { display: block; position: relative; }
		div#products div.products a.item:hover p { color: #009de2; }

@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; background-color: #ffffff; }
		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; }
}