@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

html, body {
	margin:0;
	padding:0;
	font-family:"Droid Sans";
	font-size:15px;
	line-height:22px;
}

#cookiebanner {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.7);
	padding:20px;
	font-size:12px;
	line-height:15px;
	color:#FFF;
	z-index:2;
	display:none;
}

#cookiebanner .chiudi {
	cursor:pointer;
	float:right;
	padding:0 0 0 20px;
	font-size:15px;
	font-family:Verdana, Arial;
}

#cookiebanner a {
	color:#FFF;
}

header {
	background:#FFF;
	padding:10px 20px 10px;
	text-align:center;
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:109px;
	overflow:hidden;
	box-sizing:border-box;
}

.mobileMenuToggler {
	display:none;
}

header .logo {
	display:block;
	text-align:center;
	margin-bottom:10px;
}

header .logo img {
	height:50px;
}

header ul {
	font-family:"PT Sans Narrow";
	font-size:18px;
	text-transform:uppercase;
	list-style:none;
	display:inline;	
	margin:0;
	padding:0;
}

header ul li {
	display:inline-block;
	padding:0 20px;
}

header ul li a {
	color:#815d39;
	text-decoration:none;
	position:relative;
}

header ul li a:after {
	content:" ";
	display:block;
	height:2px;
	position:absolute;
	bottom:0;
	left:50%;
	right:50%;
	background:#815d39;
	transition:all 0.2s ease-out;
}

header ul li a:hover:after,
header ul li.current-menu-item a:after {
	left:0%;
	right:0%;
}

footer {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	background:#FFF;
	padding:20px;
	color:#815d39;
	text-align:center;
	font-size:12px;
}

footer h3 {
	margin:0;
}

h1 {
	font-size:28px;
	font-weight:normal;	
	font-family:"PT Sans Narrow";
	color:#815d39;
}
h2 {
	font-size:22px;
	font-weight:normal;	
	font-family:"PT Sans Narrow";
	color:#815d39;
}
h3 {
	font-size:20px;
	font-weight:normal;	
	font-family:"PT Sans Narrow";
	color:#815d39;
}

.content {
	margin-top:109px;
	margin-bottom:84px;
}

.bgGallery,
.bgGallery .item {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:-1;
	background-size:cover;
	background-position:center center;
}

.bgGallery .item {
	opacity:0;
	transition:all 0.8s ease-out;
	position:absolute;
}

.bgGallery .item.visible {
	opacity:1;
}

.pageBody {
	max-width:1000px;
	padding:20px;	
	margin:auto;
	background:rgba(255,255,255,0.8);
	min-height:calc(100vh - 109px - 84px);
	box-sizing:border-box;
}

.pageBody a {
	color:#815d39;
}

body.home .pageBody {
	max-width:none;
	background:none;
}

body.home .textBox {
	padding:20px;
	background:rgba(255,255,255,0.8);
	width:320px;
}

.services {
	overflow:hidden;
	padding-bottom:20px;
	border-bottom:2px solid #815d39;
	margin-bottom:50px;
}

.categoriaServizi:last-child .services {
	border:none;
	padding-bottom:0;
	margin-bottom:0;
}

.categoriaServizi p {
	margin:0 0 50px 0;
}

.servizioBox:nth-child(3n+3) {
	margin:0;
}

.servizioBox:nth-child(3n+1) {
	clear:both;
}

.servizioBox {
	margin:0 5% 0 0;
	display:block;
	float:left;
	width:30%;
	padding-bottom:30px;
	font-size:13px;
}

.servizioBox h3 {
	margin:0;
}


.servizioBox .tempo {
	background:url(../images/clessidra.png);
	background-size:contain;
	background-position:left center;	
	background-repeat:no-repeat;
	padding-left:20px;
	font-size:12px;
	margin-top:3px;
	color:#815d39;
	text-transform:lowercase;
}

.servizioBox p {
	margin:10px 0 0 0;
}

#map {
	margin-top:50px;
	height:300px;
}

@media (max-width: 1023px) {
	header ul {
		font-size:16px;
	}
	
	header ul li {
		padding:0 11px;
	}
	
	body:not(.home) .bgGallery {
		position:relative;
		top:auto;
		left:auto;
		bottom:auto;
		right:auto;
		width:auto;
		height:33vh;
		max-height:300px;	
	}
	
	.servizioBox {
		width:47%;
		margin-right:6%;
	}
	
	.servizioBox:nth-child(3n+3) {
		margin-right:6%;
	}
	
	.servizioBox:nth-child(2n+2) {
		margin-right:0;
	}
	
	.servizioBox:nth-child(3n+1) {
		clear:none;
	}
	
	.servizioBox:nth-child(2n+1) {
		clear:both;
	}
	
	.pageBody {
		min-height:0;
	}
}

@media (max-width: 767px) {
	
	header {
		height:60px;
		transition:all 0.5s;
		z-index:1;
	}
	
	.menuOpen header {
		height: 100vh;
	} 
	
	.mobileMenuToggler {
		display:block;
		position:absolute;
		right:20px;
		top:20px;
		width:30px;
		height:30px;
		cursor:pointer;
	}
	
	.mobileMenuToggler div {
		width:30px;
		height:3px;
		position:absolute;
		background:#815d39;
		transition:all 0.3s ease-out;
	}
	
	.mobileMenuToggler div:nth-child(1) {
		top:0;
	}	
	.mobileMenuToggler div:nth-child(2) {
		top:8px;
		left:0;
	}	
	.mobileMenuToggler div:nth-child(3) {
		top:16px;
	}
	
	.menuOpen .mobileMenuToggler div:nth-child(2) {
		left:100%;
		opacity:0;
	}		
	
	.menuOpen .mobileMenuToggler div:nth-child(1) {
		transform:rotate(45deg);
		top:10px;	
	}
	
	.menuOpen .mobileMenuToggler div:nth-child(3) {
		transform:rotate(-45deg);
		top:10px;	
	}
	
	header ul {
		display:block;
	}
	
	header ul li {
		display:block;
		padding:10px 0;
	}
	
	header .logo {
		float:left;	
	}
	
	header .logo img {
		height:40px;
	}
	
	.menu-menu-principale-container {
		position:absolute;
		top:60px;
		left:0;
		right:0;
		bottom:0;
		overflow:scroll;
		background:#FFF;
	}
	
	.bgGallery {
		position:relative;
		top:auto;
		left:auto;
		bottom:auto;
		right:auto;
		width:auto;
		height:33vh;
		max-height:300px;	
	}
	
	.content {
		margin-top:60px;
		margin-bottom:0;
	}
	
	.pageBody {
		min-height:calc(100vh - 60px - 64px - 300px);
	}
	
	body.home .pageBody {
		background:rgba(255, 255, 255, 0.9);
	}
	
	body.home .textBox {
		width:auto;
		background:none;
		padding:0;
	}
	
	.servizioBox {
		float:none;
		margin:0!important;
		width:auto;
	}
	
	footer {
		position:relative;
		padding:10px;
		font-size:10px;
	}
	
	footer h3 {
		font-size:16px;
	}
}