/* ================================================================================================================== */
/* 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; padding: 0; font-size: 0; }
	div#products div.container.small { width: 1000px; }
	div#products div.container.extra_small { width: 700px; }

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

/* ================================================================================================================== */
/* menu secundario */
/* ================================================================================================================== */

div#products div.categories { display: block; position: fixed; width: 100%; top: 0; left: 0; text-align: center; z-index: 100; background-color: #010101; font-size: 0; }
div#products div.categories[data-status="normal"] { top: 135px; }
div#products div.categories[data-status="small"] { top: 75px; }
	div#products div.categories a { display: inline-block; position: relative; text-decoration: none; }
		div#products div.categories a p { color: #ffffff; font-size: 18px; line-height: 35px; margin: 5px 35px; }
		div#products div.categories a.selected p,
		div#products div.categories a:hover p { color: #eb2227; }
		div#products div.categories a span { display: block; position: absolute; bottom: 5px; left: 50%; width: 0px; height: 3px; margin: 0; background-color: #eb2227; }
		div#products div.categories a.selected span,
		div#products div.categories a:hover span { width: 30px; margin: 0 0 0 -15px; }

@media all and ( max-width: 1199px )
{
	div#products div.categories { white-space: nowrap; overflow: auto; }
	div#products div.categories[data-status="normal"],
	div#products div.categories[data-status="small"] { top: 65px; }
		div#products div.categories a p { font-size: 12px; line-height: 25px; margin: 5px 15px; }
}

/* ================================================================================================================== */
/* geral */
/* ================================================================================================================== */

div#products div.general { display: block; position: relative; width: 100%; padding: 138px 0 100px 0; margin: 0 auto; font-size: 0; text-align: center; }

	div#products div.general div.text { display: inline-block; position: relative; width: 500px; vertical-align: top; text-align: left; }
		div#products div.general div.text h1 { font-size: 30px; line-height: 35px; }
		div#products div.general div.text p.text { margin: 35px 0 0 0; }
		div#products div.general div.text p.discount { margin: 85px 0 0 0; font-size: 30px; line-height: 35px; color: #eb2227; }
		div#products div.general div.text div.prices { display: block; position: relative; margin: 15px 0 0 0; font-size: 0; text-align: left; }
		div#products div.general div.text p.old_price { display: inline-block; position: relative; margin: 0 15px 0 0; font-size: 18px; line-height: 30px; color: #d0d3d3; text-decoration: line-through; }
		div#products div.general div.text p.price { display: inline-block; position: relative; margin: 0; font-size: 22px; line-height: 30px; }

		div#products div.general div.text div.dark { margin: 50px 0 0 0; background-color: #f1f1f2; padding: 25px 20px 0 20px; }
			div#products div.general div.text div.dark div.col { display: inline-block; position: relative; margin: 0 0 25px 0; vertical-align: top; max-width: 180px; }
			div#products div.general div.text div.dark div.col:nth-child(2n) { margin: 0 0 0 100px; }
				div#products div.general div.text div.dark div.col h3 { margin: 0 0 10px 0; }
				div#products div.general div.text div.dark div.col p.size { display: inline-block; position: relative; }
				div#products div.general div.text div.dark div.col p.size:after { content: "|"; display: inline-block; position: relative; margin: 0 5px; }
				div#products div.general div.text div.dark div.col p.size:last-child:after { display: none; }
				div#products div.general div.text div.dark div.col div.colors { display: block; position: relative; overflow: hidden; }
					div#products div.general div.text div.dark div.col div.color { display: inline-block; position: relative; height: 20px; width: 40px; }
						div#products div.general div.text div.dark div.col div.color span { display: block; position: absolute; top: 0; left: -10px; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid transparent; }

	div#products div.general div.photos { display: inline-block; position: relative; width: 600px; height: 350px; vertical-align: top; margin: 0 0 0 100px; }
		div#products div.general div.photos div.content { display: block; position: relative; width: 100%; height: 340px; overflow: hidden; z-index: 1; }
			div#products div.general div.photos div.content span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
			div#products div.general div.photos div.content span[data-small-gallery-status="false"] { opacity: 0; z-index: 1; }
			div#products div.general div.photos div.content span[data-small-gallery-status="true"] { opacity: 1; z-index: 2; }

		div#products div.general div.photos div.controls { display: block; position: absolute; bottom: 0; left: 0; width: auto; height: 32px; margin: 0 10px; font-size: 0; text-align: left; z-index: 2; }
			div#products div.general div.photos div.controls div.arrow { display: inline-block; position: relative; width: 32px; height: 32px; background: transparent url(../images/photos_arrows.png) no-repeat; cursor: pointer; margin: 0 2px; vertical-align: top; }
			div#products div.general div.photos div.controls div.arrow.prev { background-position-x: 0; }
			div#products div.general div.photos div.controls div.arrow.next { background-position-x: -32px; }
				div#products div.general div.photos div.controls div.arrow span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: transparent url(../images/photos_arrows.png) no-repeat; background-position-y: -32px }
				div#products div.general div.photos div.controls div.arrow.prev span { background-position-x: 0; }
				div#products div.general div.photos div.controls div.arrow.next span { background-position-x: -32px; }
				div#products div.general div.photos div.controls div.arrow:hover span { height: 100%; }

@media all and ( max-width: 1199px )
{
	div#products div.general { padding: 100px 0; text-align: center; }
		div#products div.general div.text { display: block; width: auto; text-align: center; }
			div#products div.general div.text p.discount { margin: 35px 0 0 0; }
			div#products div.general div.text div.prices { margin: 0 auto; text-align: center; }

			div#products div.general div.text div.dark div.col,
			div#products div.general div.text div.dark div.col:nth-child(2n) { margin: 0 0 25px 0; }
				div#products div.general div.text div.dark div.col div.colors { text-align: left; }

		div#products div.general div.photos { display: block; width: auto; max-width: 600px; height: 250px; margin: 25px auto 0 auto; }
			div#products div.general div.photos div.content { height: 240px; }
}

/* ================================================================================================================== */
/* especificacoes */
/* ================================================================================================================== */

div#products div.specifications { display: block; position: relative; width: 100%; padding: 85px 0 85px 0; margin: 0 auto; font-size: 0; text-align: left; background: transparent url(../images/bg_calendar.jpg) no-repeat center center fixed; background-size: cover; }
	div#products div.specifications h1 { font-size: 30px; line-height: 35px; margin: 0 0 35px 0; color: #ffffff; }
	div#products div.specifications table { width: 100%; }
		div#products div.specifications table td { width: auto; padding: 20px 10px; border-bottom: 2px solid #d0d2d3; vertical-align: middle; color: #ffffff; text-align: left; margin: 0; }
		div#products div.specifications table td.title { width: 150px; }
		div#products div.specifications table td:first-child { padding-left: 30px; white-space: nowrap; }
		div#products div.specifications table td:last-child { padding-right: 30px; }

@media all and ( max-width: 1199px )
{
	div#products div.specifications { padding: 50px 0; }
		div#products div.specifications div.responsive { overflow: auto; }
		div#products div.specifications table { min-width: 700px; }
}

/* ================================================================================================================== */
/* relacionados */
/* ================================================================================================================== */

div#products div.related { display: block; position: relative; padding: 100px 0 50px 0; font-size: 0; text-align: left; }
	div#products div.related h1 { font-size: 30px; line-height: 35px; }
	div#products div.related a { display: inline-block; position: relative; width: 384px; margin: 0 24px 50px 0; vertical-align: bottom; text-decoration: none; }
	div#products div.related a:nth-child(3n) { margin-right: 0; }
		div#products div.related a div.photo { display: block; position: relative; width: 100%; height: 250px; margin: 0 0 15px 0; text-align: center; }
			div#products div.related a div.photo img { display: inline-block; position: relative; max-width: 100%; max-height: 250px; margin: 0; vertical-align: middle; }
		div#products div.related a h1 { display: block; position: relative; font-size: 18px; line-height: 25px; color: #010101; text-align: center; }
		div#products div.related a:hover h1 { color: #eb2227; }
		div#products div.related a span.discount { display: block; position: absolute; top: 0; left: 0; background-color: #eb2227; line-height: 30px; padding: 0 20px; color: #ffffff; }

	div#products div.related a:hover *,
	div#products div.related a:hover { transition-property: width, height, top, left, background-color, color; -webkit-transition-property: width, height, top, left, background-color, color; -moz-transition-property: width, height, top, left, background-color, color; transition-duration: 400ms; -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; }
	div#products div.related a *,
	div#products div.related a { transition-property: all; -webkit-transition-property: all; -moz-transition-property: all; transition-duration: 400ms; -webkit-transition-duration: 400ms; -moz-transition-duration: 400ms; }

@media all and ( max-width: 1199px )
{
	div#products div.related { padding: 50px 0 35px 0; }

		div#products div.related a,
		div#products div.related a:nth-child(3n) { width: 280px; margin: 0 5px 35px 5px; }
}