
#menu-strumenti {
	width:98%;
        background:#fff;
        text-align:center;
        background:#855D39 url(images/sfondo-strumenti.jpg) no-repeat top center;
        padding:0;
}


#menu-strumenti img {margin-top:2em;margin-bottom:1em;max-height:200px;}

li{list-style-type:none;}
.col {
        display:inline-block;
	width:10em;
	text-align:center;
	padding:0 0 2em 0;
	-webkit-border-radius:1.5em;
	-moz-border-radius:1.5em;
	border-radius:1.5em;

	margin:0 -1em 0 0;
	-moz-box-shadow:.125em .25em 1em rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:.125em .25em 1em rgba(0, 0, 0, 0.5);
	box-shadow:.125em .25em 1em rgba(0, 0, 0, 0.5);
        font: normal 100%  Segoe Print, Courier;
        color:#FFE5C1;

}
h2 {
	margin:0;
	padding:0;
        padding-top:0.5em;
	width:100%;	
	font-size: 150%;	
	font-weight:normal;
	line-height:1.5;
	border-bottom:.125em solid #3e1d0e;
}
.description {
	margin:1em .5em;
	text-align:center;
	font-size;100%;	
	line-height:.75;
}
.frequenza {
	font-size: 100%;
        padding:1em;
	width:5em;
	height:2em;
	line-height:1em;
	text-indent:.5em;
	-webkit-border-radius:2.5em;
	-moz-border-radius:2.5em;
	border-radius:2.5em;
	border:.075em solid #3d270d;
	background-color:#3d270d;
        /* 
  	-moz-transform: rotate(25deg);
  	-webkit-transform: rotate(25deg);
  	-o-transform: rotate(25deg);
  	-ms-transform: rotate(25deg);
  	transform: rotate(25deg); 
        */
}
.baroque {
	background-color:#5a3e17;	
	background: -moz-linear-gradient( top, #5a3e17, #3d270d);
	background: -webkit-gradient(linear, left top, left bottom, from(#5a3e17), to(#3d270d));
	background: -webkit-linear-gradient( top, #5a3e17, #3d270d);	
	background: -o-linear-gradient( top, #5a3e17, #3d270d);	
	background: -ms-linear-gradient( top, #5a3e17, #3d270d);	
	background: linear-gradient( top, #5a3e17, #3d270d);	
	border-width:0 0 .25em 0;
	border-style:solid;
	border-color:#5a3e17;	
	-moz-transform: rotate(-25deg);		
	-webkit-transform: rotate(-25deg);
	-o-transform: rotate(-25deg);
	-ms-transform: rotate(-25deg);
	transform: rotate(-25deg);
}
.baroque:hover,
.baroque:active,
.baroque:focus {
	background:#5a3e17;	
	position:relative;	
	z-index:1;
}
.classical {
	background-color:#643f16;	
	background: -moz-linear-gradient( top, #643f16, #3d270d);
	background: -webkit-gradient(linear, left top, left bottom, from(#643f16), to(#3d270d));
	background: -webkit-linear-gradient( top, #643f16, #3d270d);	
	background: -o-linear-gradient( top, #643f16, #3d270d);	
	background: -ms-linear-gradient( top, #643f16, #3d270d);	
	background: linear-gradient( top, #643f16, #3d270d);					
	border-width:0 0 .25em 0;
	border-style:solid;	
	border-color:#643f16;			
	-moz-transform: rotate(-10deg) translate(0, -2em);
	-webkit-transform: rotate(-10deg) translate(0, -2em);
	-o-transform: rotate(-10deg) translate(0, -2em);
	-ms-transform: rotate(-10deg) translate(0, -2em);
	transform: rotate(-10deg) translate(0, -2em);
}
.classical:hover,
.classical:active,
.classical:focus {
	background:#643f16;	
	position:relative;
	z-index:1;	
}
.mueller {
	background-color:#7e5c1c;	
	background: -moz-linear-gradient( top, #7e5c1c, #3d270d);
	background: -webkit-gradient(linear, left top, left bottom, from(#7e5c1c), to(#3d270d));
	background: -webkit-linear-gradient( top, #7e5c1c, #3d270d);	
	background: -o-linear-gradient( top, #7e5c1c, #3d270d);	
	background: -ms-linear-gradient( top, #7e5c1c, #3d270d);	
	background: linear-gradient( top, #7e5c1c, #3d270d);	
	border-width:0 0 .25em 0;
	border-style:solid;
	border-color:#7e5c1c;		
	-moz-transform: rotate(5deg) translate(0, -2em);
	-webkit-transform: rotate(5deg) translate(0, -2em);
	-o-transform: rotate(5deg) translate(0, -2em);
	-ms-transform: rotate(5deg) translate(0, -2em);
	transform: rotate(5deg) translate(0, -2em);
}


.mueller:hover,
.mueller:active,
.mueller:focus {
	background:#7e5c1c;	
	position:relative;	
	z-index:1;
}
.german {
	background-color:#804605;	
	background: -moz-linear-gradient( top, #804605, #3d270d);
	background: -webkit-gradient(linear, left top, left bottom, from(#804605), to(#3d270d));
	background: -webkit-linear-gradient( top, #804605, #3d270d);	
	background: -o-linear-gradient( top, #804605, #3d270d);	
	background: -ms-linear-gradient( top, #804605, #3d270d);	
	background: linear-gradient( top, #804605, #3d270d);	
	border-width:0 0 .25em 0;
	border-style:solid;	
	border-color:#804605;
	-moz-transform: rotate(15deg);		
	-webkit-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);	
}
.german:hover,
.german:active,
.german:focus {
	background:#804605;	
	position:relative;
	z-index:1;
}

.french {
	background-color:#864B03;	
	background: -moz-linear-gradient( top, #864B03, #623903);
	background: -webkit-gradient(linear, left top, left bottom, from(#864B03), to(#623903));
	background: -webkit-linear-gradient( top, #864B03, #623903);	
	background: -o-linear-gradient( top, #864B03, #623903);	
	background: -ms-linear-gradient( top, #864B03, #623903);	
	background: linear-gradient( top, #864B03, #623903);	
	border-width:0 0 .25em 0;
	border-style:solid;	
	border-color:#864B03;
	-moz-transform: rotate(30deg) translate(0, -2em);
	-webkit-transform: rotate(30deg) translate(0, -2em);
	-o-transform: rotate(30deg) translate(0, -2em);
	-ms-transform: rotate(30deg) translate(0, -2em);
	transform: rotate(30deg) translate(0, 3em);
}
.french:hover,
.french:active,
.french:focus {
	background:#864B03;	
	position:relative;
	z-index:1;
}


@media screen and (max-width: 980px) {
	#menu-strumenti {
		margin:2em auto;
		padding:0;
                padding-top:5px;
	}
	.baroque,	
	.classical,
	.mueller,
	.german,
        .french {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg); 
	}
	.col {
		margin:0 0.5em 1em 0;
	}
}
@media screen and (max-width: 800px) {
#menu-strumenti{margin:0;padding:2% 1% 0 1%;}
#menu-strumenti img {display:none;}
.col {width:80%;padding:0;}
.frequenza {width:50%;padding:0;height:auto;}
}