*{margin:0px;padding:0px}
body{font-family:arial;

  background-image: url('sfondo.jpg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  background-attachment: fixed;
  background-color:#f9eedb;
}
ul{list-style:none;width:100%}
li{padding:4px;margin-bottom:5px; margin-top:5px; text-align:center;color:#000; width:}
#head
{
	min-height:30px;
	background-color:#91a37d;
	border-bottom:2px solid #333;
	padding:4px;
	clear:both;
	text-align:center;
	color:#ffffff
}
#footer
{
	min-height:10px;
	background-color:#91a37d;
	border-top:2px solid #333;
	padding:10px;
	clear:both;
	text-align:center;
	color:#ffffff;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%
}
#h2
{
  font-size: 0.275em; /* 14px/16=0.875em */
}
#nav{
    background-color:#f9eedb;
    border-bottom:0px solid #333;
}
#main
{
	padding:2% 2% 2% 2%;
}
#article
{
    display:flex;
    justify-content:center;
    margin-bottom:5%;
    margin-left:5%;
    overflow:auto
}
#sidebar{background-color:#fffff0; border-radius: 20px; min-height:180px;margin-bottom:20px;overflow:auto}
.content{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5vw;
    padding:2%;
    line-height: 150%;
}
.clearfix{
	clear:both;
}
@media only screen and (min-width: 480px)
{

#header
{
background-color:#cc0000;
}
ul{float:left;}
li{float:left;width:19%;padding:4px;margin-right:2px}
#main
{
	padding:2% 2% 2% 2%;
}

}
@media only screen and (min-width: 768px){
#header
{
background-color:#91a37d;
}
#article
{
float:left;
width:90%;
}

#sidebar
{
float:right;
width:10%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
width:100%;
}
ul{float:center}
li{float:left;width:19%;padding:4px;margin-right:4px}
#main
{
	padding:2% 2% 2% 2%;
}

}