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

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

	/* categorias */
	#item 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; }
		#item 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; }
		#item div.categories div.menu:first-child { margin: 0 -35px 0 0; border-right: 0; }
		#item div.categories div.menu:last-child { border-left: 0; }
			#item 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; }
			#item div.categories div.menu a:hover { color: #ec1c24; }
			#item div.categories div.menu a.selected { color: #ec1c24; }

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

	#item 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 */
	#item 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 )
	{
		#item div.categories { position: relative; top: auto; left: auto; width: 90%; height: auto; margin: 30px auto 0 auto; background: none; padding: 0; }
			#item div.categories div.menu { float: none; height: auto; background: none; border: none; padding: 0; margin: 0 auto; }
			#item div.categories div.menu:first-child { margin: 0 auto; }
				#item div.categories div.menu a { line-height: 35px; padding: 0 0; }

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

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

	/* corpo */
	#item div.citem { display: block; position: relative; top: 20px; width: 1100px; padding: 20px 50px; margin: 30px auto 0 auto; background-color: #181818; }

	@media all and ( max-width: 1099px )
	{
		#item div.citem { width: 100%; padding: 20px 0; background: none; }
	}

    /* titulo */
    #item div.citem div.titleCategory { display: block; position: absolute; top: -85px; left: 0; height: 25px; width: 100%; margin: 0 auto; padding: 0; }
        #item div.citem div.titleCategory 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 )
	{
		#item div.citem div.titleCategory { display: none; position: relative; padding: 0; width: 90%; height: auto; margin: 0 auto; top: auto; left: auto; }
			#item div.citem div.titleCategory h1 { height: auto; font-size: 22px; text-align: left; text-indent: 0; }
	}

    /* titulo */
    #item div.citem div.title { display: block; position: relative; height: 50px; width: 100%; margin: 0 auto; padding: 0 35px; }
        #item div.citem div.title h1 { display: block; position: relative; height: 50px; line-height: 50px; margin: 0; font-size: 25px; font-weight: bold; color: #f8eb00; overflow: hidden; }

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

	/* texto */
	#item div.citem p.text { display: block; position: relative; margin: 25px 0 0 0; line-height: 25px; text-align: justify; font-size: 14px; }

	@media all and ( max-width: 1099px )
	{
		#item div.citem p.text { width: 90%; margin: 0 auto; }
	}

	/* topicos */
	#item div.citem div.topics { display: block; position: relative; width: 1100px; margin: 30px auto 0 auto; }
		#item div.citem div.topics p { display: block; position: relative; font-size: 12px; width: 50%; line-height: 23px; text-align: center; font-weight: bold; color: #ffffff; float: left; }

	@media all and ( max-width: 1099px )
	{
		#item div.citem div.topics { width: 90%; margin: 30px auto 0 auto; }
			#item div.citem div.topics p { width: 100%; }
	}

    /* fotos */
    #item div.citem div.photos { display: block; position: relative; width: 100%; height: 450px; margin: 30px 0 0 0; }
		#item div.citem div.photos a { display: none; position: absolute; border: 5px solid transparent; overflow: hidden; }
		#item div.citem div.photos a:hover { border-color: #ec1c24; }
        #item div.citem div.photos a:nth-child(1) { display: block; top: 0; left: 0; width: 360px; height: 225px; }
		#item div.citem div.photos a:nth-child(2) { display: block; top: 0; right: 0; width: 360px; height: 140px; }
		#item div.citem div.photos a:nth-child(3) { display: block; top: 0; left: 395px; width: 300px; height: 440px; }
		#item div.citem div.photos a:nth-child(4) { display: block; bottom: 0; left: 0; width: 360px; height: 185px; }
		#item div.citem div.photos a:nth-child(5) { display: block; bottom: 0; right: 0; width: 360px; height: 265px; }
			#item div.citem div.photos a img { display: block; position: relative; min-width: 100%; min-height: 100%; }

	@media all and ( max-width: 1099px )
	{
		#item div.citem div.photos { width: 90%; margin: 30px auto 0 auto; height: auto; }
			#item div.citem div.photos a { border: none; position: relative; margin: 0 0 5% 0; }
			#item div.citem div.photos a:nth-child(1) { top: auto; left: auto; width: 100%; height: 200px; }
			#item div.citem div.photos a:nth-child(2) { top: auto; left: auto; width: 100%; height: 200px; }
			#item div.citem div.photos a:nth-child(3) { top: auto; left: auto; width: 100%; height: 200px; }
			#item div.citem div.photos a:nth-child(4) { bottom: auto; left: auto; width: 100%; height: 200px; }
			#item div.citem div.photos a:nth-child(5) { bottom: auto; left: auto; width: 100%; height: 200px; }
				#item div.citem div.photos a img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
	}

	/* voltar */
	#item div.citem a.prev { display: block; position: relative; margin: 50px auto 0 auto; font-size: 14px; font-weight: bold; line-height: 23px; text-align: left; float: right; color: #1D4BFB; text-decoration: none; }
	#item div.citem a.prev:hover { color: #F8EB00; }

	@media all and ( max-width: 1099px )
	{
		#item div.citem a.prev { width: 90%; margin: 0 auto; float: none; text-align: right; }
	}