/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.
The width can be either fixed in px or flexible in %.
*/
.carrossel {
    position: relative;
    overflow: hidden;
}

/*
This is the container of the carousel items.
*/
.carrossel ul {
    width: 20000em;
    position: relative;
}

/*
These are the item elements.
*/
.carrossel li {
    float: left;
}


/* SETAS NAVEGACAO */
.jcarousel-control-prev,
.jcarousel-control-next {
	display: block;
	position: absolute;
	/* PERSONALIZACAO */
	width: 10px;
	height: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	top: 0;
	background: #df9c01;
	transition: background 0.2s linear;
	-o-transition: background 0.2s linear;
	-moz-transition: background 0.2s linear;
	-webkit-transition: background 0.2s linear;
}
	.jcarousel-control-prev {
		left: 0;
		padding-left: 10px;
		border-right: 10px solid #cf6a00;
		border-radius: 2px 0 0 2px;
		-moz-border-radius: 2px 0 0 2px;
		-webkit-border-radius: 2px 0 0 2px;
	}
	.jcarousel-control-next {
		right: 0;
		padding-right: 10px;
		border-left: 10px solid #cf6a00;
		border-radius: 0 2px 2px 0;
		-moz-border-radius: 0 2px 2px 0;
		-webkit-border-radius: 0 2px 2px 0;
	}
	.jcarousel-control-prev:hover,
	.jcarousel-control-next:hover {
		background: #ffc300;
	}

.jcarousel-pagination-holder {
	background:rgba(0,0,0,0.5);	
	width:100%;
	bottom:-1px;
	left:0;
	padding:5px 0;
	text-align: center;
}

.jcarousel-pagination,
.jcarousel-pagination-image {
	margin:0 auto;
}

	.jcarousel-pagination a,
	.jcarousel-pagination-image a {
		background:url('../../img/padrao/pagInativa.html');
		float:left;
		width:12px;
		height:12px;
		margin:0 3px;
	}

	.jcarousel-pagination a.active
	, .jcarousel-pagination-image a.active {
		background:url('../../img/padrao/pagAtiva.html');
	}