body {
	margin: 0;
	padding: 0;
	font-size: 1rem;
}
header {
	font-size: 1rem;
	margin: 0;
	position: absolute;
	width: 100%;
	text-align: right;
	font-family: 'Raleway', sans-serif;
}
header ul {
	padding: 0;
	margin: 50px 100px 0 0;
	color: #FFF;
	font-size: 1.5em;
	text-shadow: 0px 0px 10px #000;
}

header ul li {
	display: inline-block;
	margin-left: 40px;
	padding-bottom: 2px;
	cursor: pointer;
}
header ul li:hover {
	border-bottom: 2px solid #FFF;
}
header ul li i {
	margin-left: 10px;
}
header ul li.attivo {
	border-bottom: 2px solid #FFF;
}
#testata {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url(../grafix/12186282_1179952065353821_2627296923401146339_o.jpg);
	height:800px;
	text-align: right;
	display: table;
	width: 100%;
}
#testata .cnt {
	display: table-cell;
	vertical-align: middle;
}
#testata #nome {
	margin-right: 100px;
	font-size: 5em;
	font-family: 'Rock Salt', cursive;
		text-shadow: 0px 0px 10px #000;
	color: #FFF;
}
#testata #ham {
	display:none;
 }

#info {
	text-align: center;
	width: 30%;
	display: table;
	margin: 0 auto;
	padding: 50px 0;
	font-size: 1.4rem;
	line-height: 2em;
}

#info #tit {
	font-family: 'Raleway', sans-serif;
	font-size: 3rem;
	border-bottom: 2px solid #999;
	display: inline-block;
	margin-bottom: 20px;
	padding: 0 20px;
}
#info #text {
	font-family: 'Raleway', sans-serif;
	margin: 0 auto;
}

#contatti {
	font-family: 'Rock Salt', cursive;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url(../grafix/10548877_10208030182262307_565151351539389904_o.jpg);
	height:600px;
	text-align: center;
	display: table;
	width: 100%;
}
#contatti .cnt {
	display: table-cell;
	vertical-align: middle;
	background-color: rgba(0,0,0,0.4);
}

#contatti ul {
	color: #FFF;
	font-size:4em;
	padding: 0;
}
#contatti li {
	display: inline-block;
	margin: 0 20px;
}
#contatti li a {
	color: #FFF;
	text-decoration: none;
}
#contatti li a div {
	font-size: 0.4em;
}


#commissioni {
	text-align: center;
	width: 100%;
	display: table;
	margin: 0 auto;
	padding: 50px 0;
	font-size: 1.4rem;
	line-height: 2em;
	background-color:#1E2D3C;
}

#commissioni #tit {
	font-family: 'Raleway', sans-serif;
	font-size: 3rem;
	border-bottom: 2px solid #999;
	display: inline-block;
	margin-bottom: 20px;
	padding: 0 20px;
}
#commissioni #text {
	font-family: 'Raleway', sans-serif;
	margin: 0 auto;
	color: #FFF;
}
#commissioni #text .spaziofoto {
	height: 400px;
	font-size: 0rem;
	display:table;
	width: 70%;
	margin: 0 auto 30px;
}
#commissioni #text .spaziofoto .col {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	display: table-cell;
}
#commissioni #text .spaziofoto .comm_a { background-image: url("../grafix/comm_1.png"); }
#commissioni #text .spaziofoto .comm_b { background-image: url("../grafix/comm_2.png"); }
#commissioni #text .spaziofoto .comm_c { background-image: url("../grafix/comm_3.png"); }

#commissioni #text .int_text {
	margin: 0 auto;
	width: 80%;
}

#commissioni .mail { margin-top:40px; }

#potter .bannerherm {
	background-color: #f2dbb9;
	background-image: url("../grafix/herm_bk.jpg");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 280px;
	width: 100%;
}
#potter .bannerherm .titolino {
	background-image: url("../grafix/potter_en.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	height: 200px;
	margin: auto 20px auto auto;
	max-width: 570px;
	padding-top: 80px;
	width: auto;
}
#potter .testo {
	background-color: #F2DBB9;
	background-image: url("../grafix/bk-legno2.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	padding-bottom: 20px;
	width: 100%;
}
#potter .testo .ombra {
	background-image: url("../grafix/bk-ombra.png");
	background-position: center center;
	background-repeat: repeat-x;
	display: block;
	height: 20px;
	width: 100%;
}

#potter .tabesempi {
	display: table;
	margin: 0 auto;
	width: 90%;
}
#potter .tabesempi .col {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 50%
}
#potter .tabesempi .col div {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	height: 600px;
	width: 100%;
}
#potter .tabesempi .col.esempi div {
	background-image: url("../grafix/3esempi.png");
}
#potter .tabesempi .col.prezzi.en div {
	background-image: url("../grafix/prices-potter2_en.png");
}

#potter .testo .info {
	font-family: 'Raleway', sans-serif;
	font-size: 1.4em;
	margin: 0 auto;
	text-align: center;
	text-shadow: 0 0 1px #fff;
	width: 90%;
}
#potter .testo .info .big {
	font-size: 1.1em;
	font-weight: bold;
	margin-top: 40px;
}
#potter .testo .info div {
	margin: 10px 0;
}
#potter .testo .info ul {
	list-style: none;
	margin: 5px auto;
	padding: 0;
}
#potter .testo .info ul li {
	margin: 10px 0;
}
#potter .testo .info ul li.small {
	font-size: 0.8em;
}


@media screen and (max-width:1500px) {

	#info { width: 80% }

}


@media screen and (max-width:1300px) {
	#commissioni #text .spaziofoto {
		width: 90%;
	}
}

@media screen and (max-width:1200px) {
	#potter .tabesempi .col div {
		height: 450px;
	}
}

@media screen and (max-width:1000px) {

	#commissioni #text .spaziofoto {
		height: 300px;
	}
}

@media screen and (max-width:750px) {

	#potter .tabesempi .col {
		display: table;
		width: 100%;
	}
	#potter .tabesempi .col div {
		height: 300px;
	}


	#commissioni #text .spaziofoto {
		height: 250px;
	}
}

@media screen and (max-width:600px) {

	header {
		position: relative;
		text-align:center;
		padding: 20px 0;
		font-size: 0.8em;
		display:none;
	}
	header ul {
		text-shadow: none;
		color: #333;
		margin: 0;
	}
	header ul li { display: block; margin-left: 0; padding: 10px 0; }

	#testata #ham {
	color: #FFF;
	font-size: 1rem;
	background-color: rgba(0,0,0,0.4);
	display:table;
	width:100%;
	padding: 10px 0;
 }
	
	#info { font-size: 1rem; }


	#testata {
		text-align: center;
	}
	#testata .cnt {
		vertical-align: top;
	}
	#testata #nome {
		font-size: 3em;
		margin: 0 auto;
		width:90%;
	}

	#contatti li a div {
		font-size: 0.2em;
	}


	#commissioni {font-size: 1rem;}

	#commissioni #text .spaziofoto {
		height: auto;
	}
	#commissioni #text .spaziofoto .col {
		width: 100%;
		height: 300px;
		display: table;
		margin-bottom:20px;
	}

	#potter .testo .info { font-size: 1.2rem; }


}