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

#products { display: block; position: relative; width: 100%; margin: 0 auto; padding: 0; }

/* ================================================================================================================== */
/* titulo */
/* ================================================================================================================== */

#products div.title { display: block; position: relative; width: auto; margin: 0 0; padding: 200px 0 50px 0; background: transparent no-repeat center center; background-size: cover; }
	#products div.title a.bg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent no-repeat center center; background-size: cover; z-index: 1; }
	#products div.title a.bg:first-child { display: block; }
	#products div.title span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.3; z-index: 2; }
	#products div.title h1 { display: block; position: relative; font-size: 30px; line-height: 35px; color: #ffffff; text-align: left; z-index: 2; padding: 0 50px; }

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

#products div.categories { display: inline-block; position: relative; vertical-align: top; width: 350px; margin: 75px 0 0 0; }
	#products div.categories div.inner { display: block; position: relative; overflow: auto; }
	#products div.categories a { display: block; position: relative; text-decoration: none; line-height: 25px; }
	#products div.categories a.selected_inside,
	#products div.categories a.selected,
	#products div.categories a:hover { color: #DBC1B6; }
	#products div.categories a.selected { font-weight: 700; }

	#products div.categories span.responsive_icon { display: none; position: absolute; width: 32px; height: 25px; top: 0; right: -32px; background-color: #ffffff; cursor: pointer; margin: 10px 0 0 0; border: 1px solid #DBC1B6; border-left: none; }
		#products div.categories span.responsive_icon span { display: block; position: absolute; left: 3px; width: 25px; height: 3px; background-color: #DBC1B6; }
		#products div.categories span.responsive_icon span:nth-child(1) { top: 2px; }
		#products div.categories span.responsive_icon span:nth-child(2) { top: 10px; }
		#products div.categories span.responsive_icon span:nth-child(3) { bottom: 2px; }

@media all and (max-width: 1050px) {
	#products div.categories { display: block; position: fixed; top: 100px; left: 0; margin: 0; width: 300px; background-color: #ffffff; border: 1px solid #DBC1B6; border-left: none; z-index: 50; padding: 25px; }
	#products div.categories[data-status="closed"] { left: -300px; }
	#products div.categories[data-status="opened"] { left: 0; }
		#products div.categories span.responsive_icon { display: block; }
		#products div.categories div.inner
		{
			max-height: 200px;
			max-height: -webkit-calc(100vh - 160px);
			max-height:    -moz-calc(100vh - 160px);
			max-height:         calc(100vh - 160px);
		}
}

/* ================================================================================================================== */
/* catalogos */
/* ================================================================================================================== */

#products div.body { display: inline-block; position: relative; vertical-align: top; margin: 0 0 0 35px; }
#products div.body
{
	width: auto;
	width: -webkit-calc(100% - 385px);
	width:    -moz-calc(100% - 385px);
	width:         calc(100% - 385px);
}
	#products div.body p.text { display: block; position: relative; font-size: 18px; line-height: 20px; margin: 0 15px 35px 15px; }
	#products div.body a.item { display: inline-block; position: relative; vertical-align: top; width: 265px; height: auto; padding: 15px; margin: 15px 5px; text-decoration: none; border: 1px solid transparent; }
	#products div.body a.item:hover { border: 1px solid #828386; }
		#products div.body a.item div.photo { display: block; position: relative; width: 100%; overflow: hidden; text-align: center; }
			#products div.body a.item div.photo span.photo { display: inline-block; position: relative; width: 100%; height: 250px; background: transparent no-repeat center center; background-size: contain; }
			#products div.body a.item div.photo span.discount { display: block; position: absolute; bottom: 0; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #ffffff; background-color: #DBC1B6; border-radius: 100%; transform: rotate(-25deg); }
		#products div.body a.item p.text { display: block; position: relative; text-align: center; font-size: 15px; line-height: 20px; margin: 10px 0 0 0; }
		#products div.body a.item p.price { display: block; position: relative; text-align: center; font-size: 16px; line-height: 20px; margin: 5px 0 0 0; color: #DBC1B6; }
		#products div.body a.item span.button { display: block; position: relative; text-align: center; font-size: 12px; line-height: 40px; margin: 35px 0 0 0; background-color: #DBC1B6; color: #ffffff; opacity: 0; }
		#products div.body a.item:hover span.button { opacity: 1; }
		
		#products div.body a.cat { display: inline-block; position: relative; vertical-align: top; width: 270px; height: 200px; background: transparent no-repeat center center; background-size: cover; margin: 15px; text-align: center; }
			#products div.body a.cat span.bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; background-color: #7c858c; }
			#products div.body a.cat:hover span.bg { opacity: 0; }
			#products div.body a.cat p { display: inline-block; position: relative; width: auto; height: auto; font-size: 18px; line-height: 25px; color: #ffffff; padding: 0 20px; }
			#products div.body a.cat:hover p { opacity: 0; }

@media all and (max-width: 1050px) {
	#products div.body { display: block; margin: 0; text-align: center; }
	#products div.body
	{
		width: auto;
		width: -webkit-calc(100%);
		width:    -moz-calc(100%);
		width:         calc(100%);
	}
}