#contentbar{
	margin-bottom:2%;
}
#contentbar .wrapper{
	margin-left:2%;
	margin-right:2%;
	width:96%;
}
#contentbar #catalogue_step1.wrapper{
	width:100%;
	margin:0;
}
#breadcrumbs{
	font-size:12px;
	margin:0;
	padding:20px 0;
}
#breadcrumbs a{
	color:#000;
	text-decoration: none;
}
#breadcrumbs a:hover{
	color:#0b5fa7;
	text-decoration: none;
}
#pagedescription{
	font-size:12px;
}
#pagedescription .boxsdesc{
	background-color: #ebebeb;
    padding: 20px;
    line-height: 1.7;
    width: 60%;
    text-align: justify;
    float:left;
}
#pagedescription .boxsdesc p{
	margin:0;
	padding:0;
}
#pagedescription .boxphoto{
	float:left;
	width:35%;
}

#area_prodotti{
    width: 85%;
    margin: 30px auto;
}
.raggruppamento{
	width:21.5%;
	float:left;
	text-align: center;
	font-size:12px;
	margin-top:2.5%;
	margin-left: 2.5%;
}
.raggruppamento a{
	background-color: #ebebeb;
    color: #3a3a3c;
    text-decoration: none;
    display: block;
    padding: 0;
    border: 3px #ebebeb solid;
    border-radius: 4px;
    min-height: 260px;
}
.raggruppamento a:hover{
	background-color: #f28e04;
	border-color: #f28e04;
	color:#FFF;
}	
.raggruppamento a .photo {
    background-color: #fff;
    border-radius: 3px;
    overflow: hidden;
}
.raggruppamento a .photo img{
    padding:0;
    width: 100%;
    display: block;
}
.raggruppamento a .text {
    text-transform: uppercase;
    padding: 20px 10px;
}
.raggruppamento a .text p{
    padding: 0px;
    margin:0px;
    font-weight: bold;
}


.categoria{
	clear:both;
}
.categoria h2{
	color: #0b5fa7;
	font-size:16px;
	border-bottom:1px #3a3a3c solid;
	padding:0;
	padding-bottom: 5px;
	padding-top:30px;
	margin:0;
}
.categoria p{
	font-size:12px;
	text-align: justify;
}
.elemento{
	width:30%;
	float:left;
	text-align: center;
	font-size:12px;
}
.elemento p{
	font-size:12px;
	width:80%;
	height:40px;
	margin:10px auto;
}
.elemento a{
	color: #0b5fa7;
	text-decoration: none;
	display: block;
	margin:40px auto;
	width: 50%;
	border: 1px transparent solid;
}
.elemento a:hover{
	color:#f28e04;
	font-weight: bold;
	border: 1px #3a3a3c solid;
    border-radius: 3px;
}

/* ARTiCOLI */

#lista_articoli{
	margin:40px auto;
}
.articolo{
	display:block;
	margin:1px;
	padding:0;
	color:#3a3a3c;
}
.articolo .codice{
	width:20%;
	display:block;
	background-color:#ebebeb;
	float:left;
}
.articolo .descrizione{
	width:79%;
	display:block;
	background-color:#ebebeb;
	float:left;
}
.articolo:hover .codice,
.articolo:hover .descrizione{
	background-color: #f28e04;
	color:#FFF;
}
.articolo span{
	margin:1px;
}
.articolo span span{
	padding:10px;
	display:block;
}
#instestazione.articolo span.codice,
#instestazione.articolo span.descrizione{
	background-color:#0b5fa7;
	color:#fff;
	font-weight:bold;
}


/* FILTRI */
#filtri{
	margin-top:40px;
}
#filtri .filtro{
	float:left;
	font-size:12px;
}
#filtri ul{
	list-style: none;
	padding:0;
	margin:0;
}
#filtri ul li{
	border-bottom:1px #ebebeb solid;
	cursor: pointer;
}
#filtri ul li i{
	display: none;
}
#filtri ul li.active i{
	display: inline-block;
	float: right;
    padding-top: 7px;
    padding-right: 7px;
}
#filtri ul li:hover{
	color:#f28e04;
}
#filtri ul li.disabled{
	color:silver;
}
#filtri ul li.active{
	font-weight:bold;
	color:#0b5fa7;
	background-color: #F0F0F0;
}
#filtri .filtro1{
	width:35%;
}
#filtri .filtro2{
	width:35%;
	margin-right: 60px;
}
#filtri .filtro .tit1{
	width:45%;
	display: inline-block;
	padding:5px;
	white-space: nowrap;
}
#filtri .filtro .tit2{
	width:45%;
	display: inline-block;
	padding:5px;
	white-space: nowrap;
}
#filtri .filtro .val1{
	width:45%;
	display: inline-block;
	padding:5px;	
	white-space: nowrap;
}
#filtri .filtro .val2{
	width:45%;
	display: inline-block;
	padding:5px;	
	white-space: nowrap;
}
#filtri .filtro h4{
	color:#0b5fa7;
	margin:0;
	margin-bottom:5px;
	text-transform: uppercase;
	border-bottom:1px #3a3a3c solid;
}

/* ARTICOLI */
.boxartphoto{
	float:left;
	width:22%;
}
.boxartphoto img{
	/*max-width:150px;*/
	width: 100%;
}
.boxartdesc{
	float:left;
	width:34%;
	font-size: 15px;
	margin-left:25px;
}
.boxartdesc strong{
	color:#0b5fa7;
	padding-bottom:3px;
}
.boxartaside{
	float:right;
	width:40%;
}
.boxartdownload{
	background-color: #3a3a3c;
	color:#FFF;
	padding:10px;
	position: relative;
}
.boxartdownload p{
	display: block;
	float:left;
	width:31%;
	padding:1%;
	text-transform: uppercase;
	position: relative;
}
.boxartdownload p i{
	vertical-align: middle;
	font-size:24px;
	color: #ff8a00;
	margin-right: 5px;
}	
.boxartdownload p span.download_list_menu{
    position: absolute;
    white-space: nowrap;
    background-color: #3a3a3c;
    line-height: 1.5;
    padding: 0.5rem;
    border: 1px #ff8a00 solid;
    display: none;
    z-index: 10;
}
.boxartdownload p span.download_list_menu strong{
	color: #ff8a00;
	padding-top:10px;
	display: block;
}
.boxartdownload p span.download_list_menu strong:first-child{
	padding-top: 0;
}
.boxartdownload a{
	color:#FFF;
	text-decoration: none;
	font-size: 10px;
	display: inline-block;
	width: 100%;
}
.boxartdownload a:hover{
	color:#ff8a00;
}
.boxartdownload a:hover i{
	color:#FFF;
}
.cartinfo{
	padding:10px;
	margin-top:10px;
	background-color: #ebebeb;
	font-size:12px;
}
.cartinfo strong{
	color:#ff8a00;
}
.cartinfo i{
	font-size: 13px;
    vertical-align: middle;
}
.cartinfo p{
	margin:0;
}
.cartbutton{
	margin-top:10px;
}
.cartbutton a{
	background-color: #00539d;
	border:0;
	width: 46.5%;
	display: block;
	float: left;
	padding:5px;
	color:#fff;
	text-decoration: none;
	text-align: center;
	height: 30px;
    line-height: 30px;
    font-size: 14px;
}
.cartbutton a:hover{
	background-color: #ff8a00;
}
.cartbutton a i{
	vertical-align: middle;
	font-size: 20px;
	margin-right: 8px;
}
.cartbutton a#viewcart{
	float:right;
}

#mobile_filter {
	display: none;
}

@media (max-width: 1200px){

	#area_prodotti {
	    width: 96%;
	    margin: 30px auto 30px 2.8%;
	}
  
}

@media (max-width: 982px){
	
	#area_prodotti {
	    width: 96%;
	    margin: 30px auto 30px 1.3%;
	}
	.raggruppamento{
		width:30.75%;
	}	
  
}

@media (max-width: 767px){

	.raggruppamento{
		width:46%;
	}	
	#pagedescription .boxsdesc {
	    width: 90%;
	    float: none;
	    margin:auto;
	    padding:4%;
	}
	#breadcrumbs {
	    padding: 10px 0;
	    line-height: 2;
	}
	#breadcrumbs .wrapper,
	#catalogue_step2.wrapper{
		width: 92%;
		margin: 0;
		padding: 0 4%;
	}
	#breadcrumbs .wrapper{
		margin: 0;
		width: 100%;
		padding: 0;
	}
	#breadcrumbs .wrapper p{
		margin: 0;
	}
	#breadcrumbs .separator{
		display: none;
	}
	#breadcrumbs{
		padding:0;
		margin-bottom:20px;
	}
	#breadcrumbs a{
		color: #000;
	    display: block;
	    padding: 10px;
	    border-bottom: 1px #000 solid;
	    text-align: center;
	}
	.elemento{
		width: 50%;
	}
	.elemento p{
		width: 100%;
		word-wrap:break-word;
	}
	.elemento a{
		width: 83%;
		padding:10px;
		margin:5% auto;
	}
	.elemento a img{
		width: 100%;
		max-width: 150px;
	}
	#pagedescription .boxphoto {
	    float: none;
	    width: 100%;
	    text-align: center;
	}
	#mobile_filter {
		display: block;
	    margin-top: 20px;
	    background-color: #3c3c3c;
	    color: #fff;
	    padding: 2% 4%;
	}
	#mobile_filter i{
	    float: right;
		font-size: 16px;
	}
	#mobile_filter i.open {
		display: block;
	}
	#mobile_filter i.close {
		display: none;
	}
	#mobile_filter.on i.open {
		display: none;
	}
	#mobile_filter.on i.close {
		display: block;
	}
	#filtri{
		display: none;
		margin-top: 0px;
	    border: 1px #3c3c3c solid;
	    padding-top: 20px;
	    padding-bottom: 20px;
	}
	#filtri .filtro2 {
	    width: 100%;
	    margin-right: 0px;
	}
	#filtri .filtro .val2{
		width: 42%;
	}
	#filtri .filtro1 {
	    width: 100%;
	    margin-top:20px;
	}
	#filtri .filtro {
	    float: none;
	}
	#lista_articoli {
	    margin: 20px auto;
	}
	
	.articolo .codice{
		width:43%;
		word-wrap:  break-word;
	}
	.articolo .descrizione{
		width: 55%;
		word-wrap:  break-word;
	}
	.boxartphoto {
	    float: none;
	    width: 90%;
	    margin: auto;
	}
	.boxartdesc {
	    float: none;
	    width: 100%;
	    font-size: 15px;
	    margin-left: 0;
	}
	.boxartaside {
    	float: none;
		width:100%;
	}
	.boxartdownload p {
	    width: 48%;
	}	
  
}

@media (max-width: 600px){
	
	.articolo .codice{
		min-height: 95px;
	}
	.articolo .descrizione{
		min-height: 95px;
	}
	
}