html{margin: 0; padding: 0;}
body{background:#000; color: #ffffff; font-family: "Open Sans",Helvetica,Arial,sans-serif; margin: 0; padding: 0;}
li{list-style: circle;}
a{color:#000000; text-decoration: none;}
h1{font-size: 30px; margin: 20px; color: #cccccc; text-align:center;}
h2{font-size: 22px; margin-left: 1%; margin-bottom: 0; color: #cccccc;}
h3{font-size: 20px; margin: 0 10px 30px; font-weight: 400; color: #D32E2E;}
h4{font-size: 20px; margin: 0px; color: #333333;} /* titolo catalogo e schede */
p{margin-left: 1%; margin-right:1%;}
img{border:0;}
strong{color:#000;}
.container{margin: 0 auto; width: 1000px;}
.header{background-image:url("uploads/image/linea-vert.png");background-repeat:repeat;background-position:center top;background-color: #2f2f2f; border-bottom: 1px solid #D32E2E; float: left; margin-left: 1%;margin-right: 1%;width: 98%; height: auto;}
.logo{float:left; width:38%; margin-left: 1%; margin-right: 1%; margin-top: 3px;}
.mmm{float:left; width:98%; margin-left: 1%; margin-right: 1%; font-size:25px; color:#fff; text-align:left; padding:5px;}
.mmm a {color:#ffffff; }
.menu{float:left; width:58%; margin-left: 1%; margin-right: 1%; position:absolute; visibility:hidden;  }
.menu a{float:left; color:#ffffff; background:#222; padding-top: 20px; font-size: 16px; text-align: left; height: 45px; width: 100%; padding-left:1%; border: 1px dotted #f0f0f0;}
.menu a:hover{background: #D32E2E; color: #f2f2f2;}
.menu ul{float:left; width: 90%;  height: 65px; margin: 0;  padding: 0 0 0 10%;}
.menu ul li{float:left; height: 65px; list-style: none outside none; width: 25%;}
.menusotto {float:left; width:58%; margin-left: 1%; margin-right: 1%;}
.menusotto a{float:left; background: #cccccc; color:#333333; padding-top: 5px; font-size: 16px; text-align: center; height: 25px; width: 100%; border-bottom:#333;}
.menusotto a:hover{background: #D32E2E; color: #f2f2f2;}
.menusotto ul{float:left; width: 90%;  height: 65px; margin: 0;  padding: 0 0 0 10%;}
.menusotto ul li{float:left; height: 25px; list-style: none outside none; width: 25%; border-bottom:#333; }
.img h1, h3{text-align:center;}
.imgrespon {width: 100%;margin: 0 0 10px;}
#img1{width: 100%;}
.content{background:url("uploads/image/ombra-content.png") repeat-x scroll 0 0 transparent; float: left; margin-left: 1%;margin-right: 1%; min-height: 350px; width: 98%;}
.content strong{color:#000000;}
.footer{background-color: #333333; color: #ffffff; border-top: 2px solid #D32E2E; float: left; padding-bottom: 50px; margin-left: 1%;margin-right: 1%;width: 98%;}
.footer h2{font-size: 22px; margin-left: 5%; margin-bottom: 0; color: #f9f9f9;}
.footer a{color:#D32E2E;}
.footer a:hover{color:#ffffff;}
.footer li{background-color: transparent; background-image: url("uploads/image/arrow2.png"); background-position: 0 8px; background-repeat: no-repeat; list-style: none outside none; padding: 0 13px;}
.box_text{float:left; display: inline-block; vertical-align: top; width: 22%; margin-right: 3%; margin-top: 15px;}
.box_text_footer{float:left; width: 44%; margin-right: 6%; margin-top: 15px;}
.box_text a {color: #000000;}
.code{background-color: #ffffff; color: #D32E2E; border: 1px dotted #999999; font-family: "Courier New",Courier,monospace; padding: 10px;}
#normale { height:40px; }
#normale a { color:#000; text-decoration:underline; padding: 10px; }
#carrello { background:#f0f0f0; }
/*=========================================
	Media Queries
=========================================*/
/* Step 2, quando il contenitore principale diventa più piccolo.. */
@media screen and (max-width: 999px) {
.container {width: 720px;}
.logo{ width: 48%;}
.menu {width: 48%;}
.menu ul {width: 90%;}
.menusotto {width: 48%;}
.menusotto ul {width: 90%;}
.imgrespon {width: 70%;}
.box_text{width: 44%; margin-right: 6%; display: inline-block; vertical-align: top;}
.box_text_footer{width: 44%; margin-right: 6%; }
}
 
/* Step 3, quando il layout diventa fluido */
@media screen and (max-width: 719px) {
.container {width: 100%;}
.logo{background:#ffffff; width: 60%; padding-left: 19%; padding-right: 19%;}
.logo img{width: 70%; margin-left: 15%; margin-right: 15%;}
.menu {width: 98%; border-top: 1px solid #606060;}
.menu ul{padding: 0; width: 100%; height: 100%;}
.menusotto {width: 98%; border-top: 1px solid #606060;}
.menusotto ul{padding: 0; width: 100%; height: 100%;}
.imgrespon {width: 40%; float: left; margin: 20px;}
.box_text {border-bottom: 1px dotted #c1c1c1; display: inline-block; margin-bottom: 2%; margin-left: 1%; margin-right: 1%; vertical-align: top; width: 98%;}
.box_text_footer{width: 44%; margin-right: 6%;}
}
 
/* Step 4, tutti gli elementi hanno la stessa dimensione. In questo modo, gli utenti mobili possono utilizzare il sito. */
@media screen and (max-width: 479px) {
.box_text {border-bottom: 1px dotted #c1c1c1; display: inline-block; margin-bottom: 2%; margin-left: 1%; margin-right: 1%; vertical-align: top; width: 98%;}
.box_text_footer{width: 98%; margin-right: 2%; }
.logo{width: 98%; margin-left: 1%; margin-right: 1%; padding-left: 0%; padding-right: 0%;}
.logo img{width: 60%; margin-left: 20%; margin-right: 20%;}
.menu {width: 98%; border-top: 1px solid #606060;}
.menu ul{padding: 0; width: 100%;}
.menu ul li{height: auto; list-style: none outside none; width: 100%;}
.menusotto {width: 98%; border-top: 1px solid #606060;}
.menusotto ul{padding: 0; width: 100%;}
.menusotto ul li{height: auto; list-style: none outside none; width: 100%;}
.imgrespon {width: 40%; float: left; margin: 20px;}
.menu a {border-bottom: 1px dotted #606060; height: auto; padding-bottom: 5px; padding-top: 5px; width: 100%;}
}

.immapic { max-width:100px; max-height:100px; text-align:center }

#uploadfile { padding-top:15px; font-size: 13px; }

#prezzo { font-size: 17px; font-weight:bold; text-align:center; margin-top: -5px; }

#ecommerceprezzo { font-size: 17px; font-weight:bold; text-align:center;  }

#uploadfile { padding-bottom:10px; text-align:center;}

#imgcarrello { text-align:center; }

#accesso { text-align:center; }

#variante { text-align:center; }

#brevecat { text-align: justify; padding-top: 10px; padding-bottom: 10px; }


/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}

.nivoSlider img {
	position:absolute;
	top:0;
	left:0;
	max-width:none;
}

.nivo-main-image {
	display:block!important;
	position:relative!important;
	width:100%!important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}

/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}

.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}

.nivo-box img {
	display:block;
}

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:-400px;
	bottom:70px;
	width:300px;
	color:#fff;
	z-index:8;
	overflow:hidden;
	display:none;
}

.nivo-caption h1 {
	padding:10px 20px;
	margin:0;
	background:#fff;
	color:#000;
	opacity:.8;
	font-weight:400;
	float:left;
}

.nivo-caption p {
	padding:10px 20px;
	margin:0;
	background:#000;
	opacity:.8;
	font-weight:400;
	float:left;
}

.nivo-caption a {
	display:inline!important;
}

.nivo-html-caption {
	display:none;
}

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
	display:none;
}

.nivo-prevNav {
	left:0;
}

.nivo-nextNav {
	right:0;
}

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	text-align:center;
	margin-top: -25px;
	float:right;
	display:block;
	bottom:0;
	right:20px;
	position:relative;
	z-index:99999;
}

.nivo-controlNav a {
	cursor:pointer;
}

.nivo-controlNav a.active {
	font-weight:700;
}

a {
	color:#C60;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

.nivo-controlNav a {
	display:inline-block;
	width:22px;
	height:22px;
	background:url(js/bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin:0 2px;
}

.nivo-controlNav a.active {
	background-position:0 -22px;
}

@media (max-width: 1180px) {
	#wrapper {
		width:100%;
		position:relative;
		margin:100px auto;
	}
}

@media (max-width: 767px) {
	#wrapper {
		width:100%;
		position:relative;
		margin:100px auto;
	}
	
	.nivo-caption {
		bottom:0;
	}
	
	.nivo-caption h1 {
		font-size:110%;
	}
	
	.nivo-caption p {
		font-size:90%;
	}
	
	.nivo-controlNav {
		display:none;
	}
}

@media (min-width: 768px) and (max-width: 980px) {
	#wrapper {
		width:100%;
		position:relative;
		margin:100px auto;
	}
}




/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GRID OF FOUR  */
.span_4_of_4 { width: 100%; }
.span_3_of_4 { width: 74.6%; }
.span_2_of_4 { width: 49.2%; }
.span_1_of_4 { width: 23.8%; }

/*  GRID OF FIVE  */
.span_5_of_5 { width: 100%; }
.span_4_of_5 { width: 79.68%; }
.span_3_of_5 { width: 59.36%; }
.span_2_of_5 { width: 39.04%; }
.span_1_of_5 {	width: 18.72%; }


/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3,.span_1_of_4,.span_2_of_4,.span_3_of_4,.span_4_of_4,.span_1_of_5,.span_2_of_5,.span_3_of_5,.span_4_of_5,.span_5_of_5  { width: 100%; }
}