body {
    background-image: url("background.png");
    background-repeat: repeat-x;
	margin: 0;
	line-height: 25px;
}

a:link {color: #000;}
v:link {color: #000;}

#menu {display: none;}
li {text-align: justify;}
img {margin-top: 5px;}

.rodape {text-align: center; font-family: Verdana, tahoma, arial; font-size: 10pt;}

@media only screen
and (min-device-width : 320px)
and (max-width : 500px) {
	
	body {background-image: url("a.png")};
	
	.rodape {max-width: 310px;}
	#menunav {display: none;}
	#menu {display: block; width: 310px;}

	#main {width: 310px; margin: 0px auto;}
	#swiffycontainer {width: 310px;}
	img {width: 310px;}
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

	body {background-image: url("a.png")};
	
	.rodape {max-width: 470px;}
	#menunav {display: none;}
	#menu {display: block; width: 470px;}

	#main {width: 470px; margin: 0px auto;}
	#swiffycontainer {width: 470px;}
	img {width: 470px;}


}

@media only screen
and (min-device-width : 501px)
and (max-width : 700px) {
	
	body {background-image: url("a.png")};
	
	.rodape {max-width: 550px;}
	#menunav {display: none;}
	#menu {display: block; width: 550px;}

	#main {width: 550px; margin: 10px auto;}
	#swiffycontainer {width: 550px;}
	img {width: 550px;}
}



@media all 
and (min-width : 701px)
and (max-width : 3000px) {
	.main {width: 800px; margin: 0 auto;}
	img {max-width: 100%;}
	#swiffycontainer {width: 780px;}
	ul {max-width: 780px;}
}