#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_100 { width: 100%; box-sizing:border-box;}
#pagedescription .boxsdesc_fr { float: right;}
#pagedescription .boxsdesc p{ margin:0; padding:0;}
#pagedescription .boxphoto{ float:left; width:35%;}

#area_prodotti{ width: 80.5%; margin: 30px auto; display: flex; flex-wrap: wrap; column-gap: 2.5%;}
.raggruppamento{ width:23%; text-align: center; font-size:12px; margin-top:2.5%;}
.raggruppamento a { color: #3a3a3c; text-decoration: none; display: block;}
.raggruppamento .box-prod{ background-color: #ebebeb; padding: 0; border: 3px #ebebeb solid; border-radius: 4px; height: calc(100% - 5px);}
.raggruppamento a.box-prod:hover{ background-color: #f28e04; border-color: #f28e04; color:#FFF;}	
.raggruppamento .box-prod .photo { background-color: #fff; border-radius: 3px; overflow: hidden;}
.raggruppamento .box-prod .photo img{ padding:0; width: 100%; display: block;}
.raggruppamento .box-prod .text { text-transform: uppercase; padding: 20px 10px;}
.raggruppamento div.box-prod .text { padding: 0;}
.raggruppamento div.box-prod a { padding: 10px;}
.raggruppamento div.box-prod p a:first-of-type { background: #fff; color: #0b5fa7;}
.raggruppamento div.box-prod p a:last-of-type { background: #005F66; color: #fff; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;}
.raggruppamento div.box-prod p a:hover { color: #f28e04;}
.raggruppamento .box-prod span { display: block; padding: 10px 5px;}
.raggruppamento .box-prod .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%;}
.m-t-10 { margin-top: 10px;}
.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; justify-content: center;}
}

@media (max-width: 982px){
	.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;}
}