/** CSS para home Page
 * @author Batora.net
 */

.destaques{
	background-color: 	transparent;
	float: 				left;
	width: 				700px;
	position: 			relative;
}

/* Slideshow */
.slideshow_wrapper{
	height: 		340px;
	position: 		relative;
}
	.destaques > a{
		background-color: 	#686a6c;
		bottom:				0;
		color: 				#FFF;
		cursor:				pointer;
		display: 			block;
		float: 				right;
		line-height:		30px;
		text-align: 		center;
		position: 			absolute;
		right:				0;
		width: 				30px;
		z-index: 			40;
	}
	.destaques > a.prev{
		right: 				30px;
	}
	.destaques > a:hover{
		background-color: 	#535355;
		color:				#d5a10e;
	}

	/* ITEM DE DESTAQUE */
	.destaque-item{
		position: 		relative;
		height: 		340px;
	}
		.destaque-item .thumbnail, 
		.destaque-item .chamada{
			cursor: 	pointer;
		} 
		.destaque-item .thumbnail, 
		.destaque-item .thumbnail *{
			margin: 		0;
			padding: 		0;
			border: 		0;
		}
		
		.destaque-item .chamada{
			background-color: rgba(213,161,15,.8);
			zoom: 			1;
			bottom: 		0;
			position: 		absolute;
			width: 			300px;
			padding: 		10px;
		}
		.destaque-item .chamada *{
		}
		
		/* IE7 e 8 */
		.ie .destaque-item .chamada{
			-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCD5A10F,endColorstr=#CCD5A10F);
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCD5A10F,endColorstr=#CCD5A10F);
		}
		.destaque-item:hover .chamada{
			top: 			0;
			padding-top: 	15%;
		}
		.destaque-item .categoria{
			display:		block;
			margin-bottom:	-2px;
		}
		.destaque-item .categoria *{
			text-transform: uppercase;
			color: 			#FFF;
			font-size: 		11px;
			padding: 		0;
		}
		.destaque-item h3{
			color: 			#414142;
			font-size: 		14px;
			padding: 		0;
			text-transform: none;
		}
		.destaque-item p{
			display:		none;
			border-top:		1px solid #FFF; 
			margin-top: 	2px;
			padding-top: 	3px;
		}
		.destaque-item:hover p{
			display: 		block;
		}
		.destaque-item p, 
		.destaque-item p *{
			color: 			#FFF;
			font-size: 		13px;
			line-height: 	18px;
		}
	
		.destaque-item .infos{
			display: 		none;
			background-color: #414142;
			bottom: 		0;
			color:			#FFF;
			font-size:		11px;
			left:			0;
			line-height:	30px;
			text-indent:	10px; 
			position: 		absolute;
			right:			0;
			text-transform: uppercase;
		} 
		.destaque-item:hover .infos{
			display: 		inline;
		}
		.destaque-item .infos span{
			color: 			#FFF;
		}
		.destaque-item .infos a{
			color: 			#d5a10f;
			float: 			right;
			margin-right: 	10px;
		}
		
		
/** MOBILE **/
@media only screen and (max-width: 780px) {
	.slideshow_wrapper{
		height: auto !important;
	}
	.destaques,
	.destaque-item,
	.destaque-item .thumbnail{
	 	width: 100% !important;
		height: auto !important;
		float: none;
	}
	.destaque-item{
		position: relative !important;
	}
	.destaque-item .thumbnail{
		overflow: hidden;
	}
	.destaque-item .thumbnail *{
		width: 100% !important; 
		height: auto !important;
	}
	
	.destaques{
		margin-bottom: 45px;
	}
		
	.destaques > a{
		background-color: rgba(255,255,255,0.8);
		border-radius: 	50%;
		bottom: 		auto;
		color: 			#333;
		height:			40px;
		line-height:	40px;
		right: 			30px;
	    text-align: 	left;
	    text-indent: 	13px;
		top: 			25%;
		width: 			40px;
		font-size: 		16px;
		width: 			40px;
	}
		.destaques > a.prev{
			left: 			30px;
			right: 			auto;
	    	text-indent: 	11px;
		}
		.destaques > a:hover{
			background-color: 	rgba(255,255,255,0.8);
			color: 				#333;
		}
	.destaque-item .chamada,
	.destaque-item:hover .chamada{
		background-color: rgba(213,161,15,1);
		left: 			0;
		padding:		15px; 
		right: 			0;
		top:			100%;
		bottom:			auto;
		width: 			auto;
		position: 		relative !important;
	}
	
	.destaque-item p,
	.destaque-item:hover p{
		display: 		block;
	}
	
	.destaque-item .infos,
	.destaque-item:hover .infos{
		display: 		inline;
		bottom: 		-30px;
	}

}