
/*51px*/
/* horizontal ##############################*/
.horizontal { width: 100%; margin: 0 auto; height: 155px; }
	
.horizontal .carousel { width: 960px; height: 155px; margin: 0 auto; position: relative; } 

.horizontal .carousel_container { /* da fare resposive */
	width: 860px;
	height: 155px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 50px;
	position: relative;
	}
	
.horizontal ul  { 
	height: 150px;
	width: 860px; /* will be overwritten by javascript*/
	margin:0;
	padding:0;
    margin-top:5px;
}
	
.horizontal ul li {
	width: 172px;
	height: 150px;
	display: block;
	float: left;
	position: relative;
    text-align:center;
	}
	
.horizontal ul li img{
	width: 150px;
	height: 150px;
	border: 0;
	
        
    	}

.horizontal ul li .caption {
		
	position: absolute;
	top: 0;;
	left: 11px;;
	padding: 70px 0 0 0 ;;
	display: none;
	width: 150px;
	height: 80px;
	text-align:center;
	background-color:rgba( 0,0,0, 0.7);
	color:#fff;
	}

.horizontal ul li .caption .cap-title{
	color:#ffffff;
    }
.horizontal ul li .caption .cap-date{
    color:#cb8600; 
    font-size:8px;
    }
	
.carousel_right, .carousel_left {
	position: absolute;
	width: 26px;
	height: 51px;
	display: block;
	text-indent: -9999px;
	z-index:100;
	}
	
.carousel_left { 
	top: 49px; left:0px;
	background: url(../images/prev.png) top left;
	}
.carousel_right { 
	top: 49px; right:0px;
	background: url(../images/next.png) top left;
	}
.carousel_right:hover, .carousel_left:hover {
	background-position: bottom left;
	}
	
.disable { display: none; }


@media only screen and ( min-width: 768px ) and ( max-width: 960px ) {
	.horizontal .carousel { width:760px; }
	.horizontal .carousel_container { width:660px; }
	}
@media only screen and ( max-width: 767px ) {
	.horizontal .carousel { width:470px; }
	.horizontal .carousel_container { width:370px; }
	}
@media only screen and ( max-width: 479px ) {
	.horizontal .carousel { width:280px; }
	.horizontal .carousel_container { width:280px; }
	
	.carousel_right, .carousel_left { display:none;}
}

@media only screen and ( min-width: 768px ) and ( max-width: 960px ) {
	.elegant_carousel .horizontal ul li { width:220px; }
	.elegant_carousel .horizontal ul li .caption { left:35px; }
}
@media only screen and ( max-width: 767px ) {
	.elegant_carousel .horizontal ul li { width:185px; }
	.elegant_carousel .horizontal ul li .caption { left:17px; }
}
