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

@media all and ( max-width: 1199px )
{
	#category { width: 100%; padding: 20px 0; background-color: transparent; }
}

	/* categorias */
	#category div.categories { display: block; position: absolute; top: -50px; left: 0; width: 55%; height: 50px; margin: 0; background: transparent url(../../../../../src/img/bg/submenu.png) repeat-x; }
		#category div.categories div.menu { display: block; position: relative; float: right; height: 50px; margin: 0 -1px 0 0; background: transparent url(../../../../../src/img/bg/submenu.png) repeat-x; overflow: hidden; }
		#category div.categories div.menu:first-child { margin: 0 -35px 0 0; border-right: 0; }
		#category div.categories div.menu:last-child { border-left: 0; }
			#category div.categories div.menu a { display: block; position: relative; line-height: 50px; font-weight: bold; color: #ffffff; font-size: 12px; text-decoration: none; margin: 0; padding: 0 25px; }
			#category div.categories div.menu a:hover { color: #ec1c24; }
			#category div.categories div.menu a.selected { color: #ec1c24; }

	/* skews cross browser */
	#category div.categories div.menu
	{
		transform: skew( -30deg, 0 );
		-webkit-transform: skew( -30deg, 0 );
		-moz-transform:    skew( -30deg, 0 );
     	-o-transform:      skew( -30deg, 0 );
	}

	#category div.categories div.menu a
	{
		transform: skew( 30deg, 0 );
		-webkit-transform: skew( 30deg, 0 );
		-moz-transform:    skew( 30deg, 0 );
     	-o-transform:      skew( 30deg, 0 );
	}

	/* gradiente da borda */
	#category div.categories div.menu {
		border-width: 1px;
		border-bottom-width: 0;
		border-top-width: 0;
		-webkit-border-image: -webkit-gradient( linear, 0 100%, 0 0, from( #6e6f70 ), to( #101010 ) ) 1 100%;
    	-webkit-border-image: -webkit-linear-gradient( bottom, #6e6f70, #101010 ) 1 100%;
    	-o-border-image: -o-linear-gradient( bottom, #6e6f70, #101010 ) 1 100%;
    	-moz-border-image: -moz-linear-gradient( bottom, #6e6f70, #101010 ) 1 100%;
	}

	@media all and ( max-width: 1199px )
	{
		#category div.categories { position: relative; top: auto; left: auto; width: 90%; height: auto; margin: 30px auto 0 auto; background: none; padding: 0; }
			#category div.categories div.menu { float: none; height: auto; background: none; border: none; padding: 0; margin: 0 auto; }
			#category div.categories div.menu:first-child { margin: 0 auto; }
				#category div.categories div.menu a { line-height: 35px; padding: 0 0; }

		#category div.categories div.menu
		{
			transform: none;
			-webkit-transform: none;
			-moz-transform:    none;
			-o-transform:      none;
		}

		#category div.categories div.menu a
		{
			transform: none;
			-webkit-transform: none;
			-moz-transform:    none;
			-o-transform:      none;
		}
	}

	/* corpo */
	#category div.ccategories { display: block; position: relative; width: 1200px; margin: 30px auto 0 auto; }

	@media all and ( max-width: 1099px )
	{
		#category div.ccategories { width: 100%; }
	}

    /* titulo */
    #category div.ccategories div.title { display: block; position: absolute; top: -85px; left: 0; height: 25px; width: 100%; margin: 0 auto; padding: 0; }
        #category div.ccategories div.title h1 { display: block; position: relative; height: 25px; text-indent: 35px; line-height: 25px; margin: 0; font-size: 14px; font-weight: bold; color: #f8eb00; overflow: hidden; }

	@media all and ( max-width: 1099px )
	{
		#category div.ccategories div.title { position: relative; padding: 0; width: 90%; height: auto; margin: 0 auto; top: auto; left: auto; }
			#category div.ccategories div.title h1 { height: auto; font-size: 22px; text-align: left; text-indent: 0; }
	}

	#category div.ccategories div.itens { display: block; position: relative; top: 20px; width: 1024px; margin: 0 auto; background-color: #191917; overflow: hidden; padding: 16px 0; }
		#category div.ccategories div.itens a { display: block; position: relative; width: 178px; height: 320px; margin: 16px 0 16px 62px; float: left; border-right: 2px solid #c8c8c7; background-color: #ffffff; }
		#category div.ccategories div.itens a:hover p { color: #ec1c24; }
			#category div.ccategories div.itens a h1 { display: block; position: absolute; top: 15px; left: 10px; width: 158px; height: 60px; font-size: 15px; line-height: 20px; color: #231f20; font-weight: bold; overflow: hidden; text-align: center; }
			#category div.ccategories div.itens a img { display: block; position: absolute; top: 90px; left: 10px; max-width: 158px; max-height: 190px; margin: auto; background-color: white; }
			#category div.ccategories div.itens a p { display: block; position: absolute; bottom: 10px; right: 10px; font-size: 12px; line-height: 20px; color: #1c49ff; font-weight: bold; }

	@media all and ( max-width: 1099px )
	{
		#category div.ccategories div.itens { top: auto; width: 90%; background: none; text-align: center; }
			#category div.ccategories div.itens a { display: inline-block; float: none; margin: 10px; }
	}