/* ------------------------------------------------------------------------------------------------------------------ */
/* corpo */

div#categories { display: block; position: relative; width: 100%; margin: 0 auto; padding-bottom:75px; }

@media all and ( min-width: 1200px ) and ( min-height: 750px )
{
    div#categories { padding-top: 125px; }
}
@media all and ( max-width: 1199px ), all and ( max-height: 749px )
{
    div#categories { padding-top: 15px; }
}
@media all and ( max-width: 1819px ) 
{
    div#categories { padding-bottom: 25px; }
}
@media all and ( min-width: 1820px ) 
{
    div#categories { padding-top: 0; padding-bottom: 75px; }
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* topo */

div#categories div.top { display: block; position: relative; width: 100%; height: 110px; background-color: #85bb48; }
	div#categories div.top div.categories { display: block; position: absolute; top: 0; left: 420px; height: 70px; padding: 40px 0 0 0; font-size: 0; text-align: left; }
	div#categories div.top div.categories
	{
		width: 70%;
		width: -webkit-calc( 100% - 420px - 35px );
		width:    -moz-calc( 100% - 420px - 35px );
		width:         calc( 100% - 420px - 35px );
	}
		div#categories div.top div.categories a { display: inline-block; position: relative; font-size: 16px; width: 180px; line-height: 25px; max-height: 50px; vertical-align: middle; overflow: hidden; text-decoration: none; color: #ffffff; text-align: left;  margin: 0 15px 0 0; }
		div#categories div.top div.categories a:hover { color: #414142; }
		div#categories div.top div.categories a.selected { font-family: 'bold1', sans-serif; color: #414142; }

		@media all and ( max-width: 1200px )
		{
			div#categories div.top div.categories a { font-size: 12px; width: 100px; margin: 0 5px 0 0; max-height: 50px; line-height: 16.6px }
		}

@media all and ( max-width: 1819px )
{
    div#categories div.top { display: none; }
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* sub-categorias */

div#categories div.subcategories { display: block; position: relative; height: auto; overflow: hidden; margin: 0 0 0 420px; font-size: 0; padding: 10px 0 0 0; }
div#categories div.subcategories
{
	width: 70%;
	width: -webkit-calc( 100% - 420px - 35px );
	width:    -moz-calc( 100% - 420px - 35px );
	width:         calc( 100% - 420px - 35px );
}
	div#categories div.subcategories div.block { display: inline-block; position: relative; width: 180px; height: auto; margin: 0 15px 0 0; vertical-align: top; }
		div#categories div.subcategories div.block a { display: block; position: relative; font-size: 14px; text-decoration: none; line-height: 20px; margin: 0 0 10px 0; }
		div#categories div.subcategories div.block a.selected { font-family: 'bold1', sans-serif; color: #85bb48; }
		div#categories div.subcategories div.block a:hover { color: #85bb48; }

		@media all and ( max-width: 1200px )
		{
			div#categories div.subcategories div.block { width: 100px; margin: 0 5px 0 0; }
				div#categories div.subcategories div.block a { font-size: 12px; }
		}

@media all and ( max-width: 1819px )
{
    div#categories div.subcategories { display:none; }
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* sub-categorias */

div#categories div.responsive_categories { display:none; }

@media all and ( max-width: 1819px )
{
    div#categories div.responsive_categories { display: block; position: relative; width: 100%; font-size: 0; }
        div#categories div.responsive_categories h3 { display: block; position: relative; background-color: #414142; text-align: center; color: #ffffff; font-size: 14px; line-height: 16px; cursor: pointer; padding: 5px 0; border-bottom: 1px solid #ffffff; }
        div#categories div.responsive_categories div { display: block; position: relative; padding: 8px 0; }
            div#categories div.responsive_categories div a { display: block; position: relative; text-align: center; text-decoration:none; font-size: 12px; line-height: 25px; }
            div#categories div.responsive_categories div a.selected { color: #85bb48; }
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* empresa */

div#categories div.container { display: block; position: relative; width: auto; margin: 50px 0 0 0; padding: 0 50px; }
	div#categories div.container h1 { display: block; position: relative; width: auto; font-family: 'bold1', sans-serif; font-size: 35px; line-height: 50px; text-align: left; margin: 25px 0 25px 0; }
		div#categories div.container h1 span { display: block; position: absolute; bottom: 0; left: 0; width: 100px; height: 2px; background-color: #414142; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* produtos */

div#categories div.products { display: block; position: relative; width: 100%; height: auto; font-size: 0; }
	div#categories div.products div.first { display: inline-block; position: relative; margin: 0 25px 0 0; overflow: hidden; }
	div#categories div.products div.first
	{
		width: 200px;
		width: -webkit-calc( ( ( 100% - 150px ) / 7 * 3 ) + 50px );
		width:    -moz-calc( ( ( 100% - 150px ) / 7 * 3 ) + 50px );
		width:         calc( ( ( 100% - 150px ) / 7 * 3 ) + 50px );

		height: 200px;
		height: -webkit-calc( ( ( 100vw - 150px ) / 8 * 2 ) + 25px );
		height:    -moz-calc( ( ( 100vw - 150px ) / 8 * 2 ) + 25px );
		height:         calc( ( ( 100vw - 150px ) / 8 * 2 ) + 25px );
	}
		div#categories div.products div.first a { display: block; position: absolute; margin: 0; width: 100%; height: 100%; overflow: hidden; }
			div#categories div.products div.first a h1 { display: block; position: absolute; bottom: 10px; left: 0; padding: 0 25px; font-family: 'bold1', sans-serif; color: #ffffff; line-height: 25px; font-size: 22px; z-index: 2; }
				div#categories div.products div.first a h1 span.separator { display: block; position: absolute; bottom: -5px; left: 25px; width: 100px; height: 1px; background-color: #ffffff; }
			div#categories div.products div.first a span.bg { display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: transparent url(../src/img/products_bg.png) repeat; z-index: 1; }
			div#categories div.products div.first a:hover span.bg { top: 0; }


	div#categories div.products div.second { display: inline-block; position: relative; margin: 0; overflow: hidden; }
	div#categories div.products div.second
	{
		width: 200px;
		width: -webkit-calc( ( ( 100% - 150px ) / 7 * 4 ) + 75px );
		width:    -moz-calc( ( ( 100% - 150px ) / 7 * 4 ) + 75px );
		width:         calc( ( ( 100% - 150px ) / 7 * 4 ) + 75px );

		height: 200px;
		height: -webkit-calc( ( ( 100vw - 150px ) / 8 * 2 ) + 25px );
		height:    -moz-calc( ( ( 100vw - 150px ) / 8 * 2 ) + 25px );
		height:         calc( ( ( 100vw - 150px ) / 8 * 2 ) + 25px );
	}
		div#categories div.products div.second a { display: inline-block; position: relative; margin: 0 25px 0 0; overflow: hidden; }
		div#categories div.products div.second a:nth-child(4) { margin: 0 0 0 0; }
		div#categories div.products div.second a:nth-child(5) { margin: 25px 25px 0 0; }
		div#categories div.products div.second a:nth-child(6) { margin: 25px 25px 0 0; }
		div#categories div.products div.second a:nth-child(7) { margin: 25px 25px 0 0; }
		div#categories div.products div.second a:nth-child(8) { margin: 25px 0 0 0; }
		div#categories div.products div.second a
		{
			width: 200px;
			width: -webkit-calc( ( 100% - 75px ) / 4 );
			width:    -moz-calc( ( 100% - 75px ) / 4 );
			width:         calc( ( 100% - 75px ) / 4 );

			height: 200px;
			height: -webkit-calc( ( 100vw - 150px ) / 8 );
			height:    -moz-calc( ( 100vw - 150px ) / 8 );
			height:         calc( ( 100vw - 150px ) / 8 );
		}
			div#categories div.products div.second a div.hover { display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: transparent url(../src/img/products_bg.png) repeat; z-index: 1; }
			div#categories div.products div.second a:hover div.hover { top: 0; }
				div#categories div.products div.second a div.hover h1 { display: block; position: absolute; bottom: 10px; left: 0; padding: 0 15px; font-family: 'bold1', sans-serif; color: #ffffff; line-height: 20px; font-size: 14px; z-index: 2; }
					div#categories div.products div.second a div.hover h1 span { display: block; position: absolute; bottom: -5px; left: 15px; width: 100px; height: 1px; background-color: #ffffff; }

	div#categories div.products a.item { display: inline-block; position: relative; margin: 25px 25px 0 0; overflow: hidden; }
	div#categories div.products a.item:nth-child(7n) { margin: 25px 0 0 0; }
	div#categories div.products a.item
	{
		width: 200px;
		width: -webkit-calc( ( 100% - 150px ) / 7 );
		width:    -moz-calc( ( 100% - 150px ) / 7 );
		width:         calc( ( 100% - 150px ) / 7 );

		height: 200px;
		height: -webkit-calc( ( 100vw - 150px ) / 8 );
		height:    -moz-calc( ( 100vw - 150px ) / 8 );
		height:         calc( ( 100vw - 150px ) / 8 );
	}
		div#categories div.products a.item div.hover { display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: transparent url(../src/img/products_bg.png) repeat; z-index: 1; }
		div#categories div.products a.item:hover div.hover { top: 0; }
			div#categories div.products a.item div.hover h1 { display: block; position: absolute; bottom: 10px; left: 0; padding: 0 15px; font-family: 'bold1', sans-serif; color: #ffffff; line-height: 20px; font-size: 14px; z-index: 2; }
				div#categories div.products a.item div.hover h1 span { display: block; position: absolute; bottom: -5px; left: 15px; width: 100px; height: 1px; background-color: #ffffff; }

@media all and ( max-width: 1199px )
{
	div#categories div.products div.first,
	div#categories div.products div.second,
	div#categories div.products a.item,
	div#categories div.products a.item:nth-child(7n) { margin: 30px 10px 20px 10px; }
	div#categories div.products div.first,
	div#categories div.products div.second,
	div#categories div.products a.item
	{
		width: 280px;
		width: -webkit-calc( 280px );
		width:    -moz-calc( 280px );
		width:         calc( 280px );

		height: 200px;
		height: -webkit-calc( 200px );
		height:    -moz-calc( 200px );
		height:         calc( 200px );
	}
		div#categories div.products div.first a,
		div#categories div.products div.second a,
		div#categories div.products div.second a:nth-child(4),
		div#categories div.products div.second a:nth-child(5),
		div#categories div.products div.second a:nth-child(6),
		div#categories div.products div.second a:nth-child(7),
		div#categories div.products div.second a:nth-child(8) { display: block; position: relative; margin: 0; width: 100%; height: 200px; overflow: hidden; }
		div#categories div.products div.second a
		{
				width: 100%;
				width: -webkit-calc( 100% );
				width:    -moz-calc( 100% );
				width:         calc( 100% );

				height: 200px;
				height: -webkit-calc( 200px );
				height:    -moz-calc( 200px );
				height:         calc( 200px );
			}
			div#categories div.products div.second a div.hover,
			div#categories div.products a.item div.hover { top: 0; left: 0; background: transparent none; padding: 0; z-index: 10; }
			div#categories div.products div.first a h1,
			div#categories div.products div.second a div.hover h1,
			div#categories div.products a.item div.hover h1 { font-size: 22px; line-height: 25px; color: #414142; text-shadow: 0 0 2px #ffffff; }
					div#categories div.products div.first a h1 span.separator,
					div#categories div.products div.second a div.hover h1 span,
					div#categories div.products a.item div.hover h1 span { background-color: #414142; }
					div#categories div.products div.first a span.bg { display: none; }
}


/* ------------------------------------------------------------------------------------------------------------------ */