/* home */

/* Nelle width e height degli elementi sono compresi padding e border */
* { box-sizing: border-box;
}
#main img.hide {
	display: none;
	visibility: hidden;
}

/* mobile phones */
@media only screen and (max-width: 600px){
	a {text-decoration: none;}
	a:link {color: #800000;}
	a:visited {color: #800000;}
	a:hover {color: #0000ff;}

	body {
		background: #999999; 
		margin: 5px 0 5px;
		padding: 0 0 0px;
		text-decoration: none;
	}
	#wrap { 
		background-color: #fff repeat-y; 
		margin: 0px auto; 
		width: 100%;
		position: relative; 
		visibility: visible;
		border: 0px solid red;
	}
	#main {
		background: url('../images/main3.jpg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: top;
		height: 609px;
		width: 100%;
		z-index: 0;
		position: absolute;
		border: 0px solid red;
	}
	#menu {
		position: absolute;
		z-index: 2;
		visibility: visible;
		border: 0px solid green;
		width: 100%;
		height: auto;
		padding: 50% 0 0 30%;
		text-align: left;
		font: bold 18px "Trebuchet MS", sans-serif;
		color: black;
	}
	/*line-height*/
	.men {
	margin: 0 0 10px 0;
	}
	#bottom { 
		position: absolute;
		z-index: 1;
		visibility: visible;
		border: 0px solid blue;
		width: 100%;
		padding-left: 22%;
		margin-top: 90%;
		padding-top: 50%;
		text-align: left;
		font: 12px "Trebuchet MS", sans-serif;
		color: black;
	}	
}

/* mobile phones small landscape + desktop smaller */
@media only screen and (min-width: 400px) and (max-width: 600px) {
	a {text-decoration: none;}
	a:link {color: #800000;}
	a:visited {color: #800000;}
	a:hover {color: #0000ff;}

	body {
		background: #999999; 
		margin: 5px 0 5px;
		padding: 0 0 0px;
		text-decoration: none;
	}
	#wrap { 
		background-color: #fff repeat-y; 
		margin: 0px auto; 
		width: 389px;
		position: relative; 
		visibility: visible;
		border: 0px solid red;
	}
	#main {
		background: url('../images/main3.jpg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: top;
		height: 609px;
		width: 100%;
		z-index: 0;
		position: absolute;
		border: 0px solid red;
	}
	#menu {
		position: absolute;
		z-index: 2;
		visibility: visible;
		border: 0px solid green;
		width: 190px;
		height: auto;
		top: 185px;
		left: 118px;
		padding: 0px;
		text-align: left;
		line-height: 30px;
		font: bold 18px "Trebuchet MS", sans-serif;
		color: black;
	}
	#bottom { 
		position: absolute;
		z-index: 1;
		visibility: visible;
		border: 0px solid blue;
		width: 340px;
		height: auto;
		top: 193px; 
		left: 40px;
		padding: 0px;
		text-align: left;
		font: 12px "Trebuchet MS", sans-serif;
		color: black;
	}	
}
/* desktop + mobile phones large landscape */
@media only screen and (min-width: 600px){
	a {text-decoration: none;}
	a:link {color: #800000;}
	a:visited {color: #800000;}
	a:hover {color: #0000ff;}
	
	body {
		background: #999999; 
		margin: 15px 0; 
		font: bolder 18px "Trebuchet MS", sans-serif; 
		color: black; 
		text-decoration: none; 
		text-align: left; 
		padding: 0 0 30px;
	}
	#wrap { 
		background-color: #fff repeat-y; 
		margin: 0px auto; 
		width: 793px; 
		position: relative; 
		visibility: visible;
	}
	#main {
		padding-right: 0px; 
		padding-left: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		background: url('../images/main.jpg');
		background-repeat: no-repeat; 
		margin: 0px;
		height: 613px;
		width: 793;
		z-index: 0;
	}	
	#chisiamo {left: 20px; top: 380px; z-index: 1; position: absolute; visibility: visible; }
	#seminari { left: 87px; top: 370px; z-index: 1; position: absolute; visibility: visible; }
	#medit { left: 77px; top: 209px; z-index: 1; position: absolute; visibility: visible; }
	#yoga { left: 210px; top: 149px; z-index: 1; position: absolute; visibility: visible; }
	#tai { left: 259px; top: 90px; z-index: 1; position: absolute; visibility: visible; }
	#info { left: 651px; top: 36px; z-index: 1; position: absolute; visibility: visible; }
	#qi { left: 423px; top: 63px; z-index: 1; position: absolute; visibility: visible; }
	#semi { left: 41px; top: 290px; z-index: 1; position: absolute; visibility: visible; }
	#shia { left: 541px; top: 43px; z-index: 1; position: absolute; visibility: visible; }
	
	#bottom { 
		top: 545px; 
		z-index: 1; 
		position: absolute; 
		left: 250px; 
		right: 5px; 
		visibility: visible;
		text-align: left;
		font: 12px "Trebuchet MS", sans-serif;
		color: black;
	}	
	#bottom a {
		color: blue; 
		font: 12px "Trebuchet MS", sans-serif;
		text-decoration: none;
	}
}
