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


body {
	font-weight: 400;
}

.nascosto {
	display: none;
}



/* HEADER */

header {
	width: 100%;
	height: 80px;
	padding: 0;
	top: 0;
	left: 0;
}

header .navtop ul{
	text-align: right;

	display: flex;
	flex-direction: row;
	justify-content: right;	
}

header .navtop ul li{
	padding: 5px;
	position: relative;
	padding-left: 35px;
	padding-right: 10px;
	cursor: pointer;
	font-size: .9em;
	font-weight: 300;
}

header .navtop ul li:hover{
	
}

header .navtop ul li span{
	position: absolute;
	top: 2px;
	left: 0;
	width: 30px;
	height: 30px;
}

header .navtop ul li .n_prodotti{
	position: absolute;
	top: 0;
	left: 20px;
}

header .navtop ul li .n_prodotti span{
	
	width: 16px;
	height: 16px;
	line-height: 16px;
	border-radius: 10px;
	
	color: #fff;
	font-size: .7em;
	text-align: center;
}



header .menu {
	position: absolute;
	top: 10px;
	right: 60px;
	width: 60px;
	height: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px;
	align-items: center;
	z-index: 8;
	cursor: pointer;
	color: #fff;
}

header .menu .linea{
		height: 2px;
	width: 100%;
	margin: 5px 0;
	background-color: var(--arancio);
}

header .menu:hover .linea{
	}


header .menu.active .linea.top{
	position: absolute;
	top: 20px;
		height: 2px;
	transform: rotate(45deg);
		background-color: var(--arancio);

}

header .menu.active .linea.bottom{
	position: absolute;
	top: 20px;
		height: 2px;
	transform: rotate(-45deg);
		background-color: var(--arancio);

}

header .menu.active .linea.center{
	display: none;

}

header.fix .barra {
	height: 80px;
}

header .barra{

	position: relative;
	width: 100%;
	margin: 0 auto;
}

header .barra .logo{
	position: absolute;
	text-align: center;
	left: 10px;
	top: 10px;
	font-size: .8em;
}



header .barra .logo img{

}



header.fix .barra .logo{
	position: absolute;
	
	top: 0;
}

header.fix .barra .logo img{

	float: left;
	padding: 0px;
	margin-top: 5px;
}




header nav{
	top:0;
	left: 0;
	position: fixed;
	width: calc(100%);
	height:1vh;
	z-index: 8;
		transition: max-height 1s ease-out, opacity 0.3s ease-out;
	opacity: 0;
	overflow: hidden;
	background-color: #fff;
}

header nav.fix{
	display: inline;
	height: 100vh;
	opacity: 1;
}


header nav ul{
	display: flex;
	flex-direction: column;
	justify-content: right;
	padding: 100px 50px 0;
}

header nav ul li{
	padding: 10px;
	font-size: 1.5em;
	text-align: right;
	cursor: pointer;

}

header nav ul li:hover{

}

header nav ul.sotto{
	display: flex;
	flex-direction: column;
	justify-content: right;
	padding: 10px 0px;
}

header nav ul.sotto li{
	padding: 5px;
	font-size: 1em;
	text-align: right;
	cursor: pointer;
	}

header nav ul.sotto li:hover{
		color: #fff;
}


/* HEADER */



/* SLIDE */
#slide {
	position: relative;
	width: 100%;
	margin-top: 80px;
	height:60vh;
}



#slide .video {
	height: 60vh;
	overflow: hidden;
}


#slide .video video{
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height:60vh;
	min-height: auto;
}
#slide ul {
	height: 60vh;
}

#slide ul li {
	height: 60vh;
}


#slide.sfondo {
	background-size: auto 20px;
}

#slide .conte{
	padding: 0 0 5% 0%;
}

#slide .sopra{
	position: absolute;
	padding: 20px;
	width: 100%;
	height: 60vh;
	background-size: contain;
	background-position: center;
	z-index: 3;
	bottom: 0;
	opacity: 1;
	right: 0;
}

#slide .conte{
	padding: 2% 10%;
}

#slide .sopra{
	position: absolute;
	top: 0vh;
	padding: 30px 50px;
	width: 100%;
	background-size: contain;
	background-position: center;
	height:60vh;
	z-index: 3;
}


#slide .effetto1 {
	position: absolute;
	left: 0%;
	z-index: 3;
	width: 55%;
	opacity: 0;
	height: 60vh;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
transform: translateX(-300%);
  animation: slide-in 1s forwards;
    animation-delay: 0.6s;
	display: none;
}

@keyframes slide-in {
  to {
    transform:  translateX(0);
	opacity: 0.8;
  }
}


#slide .sopra picture{
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	left: 50%;
	width: auto;
	height: 100%;
	overflow: hidden;
}

#slide .sopra picture img{
	
	width: auto;
	height: 100%;
}


#slide .colonna{
	position: absolute;
	padding:0px;
	width: 100%;
	height: 60vh;
	left: 0%;
	font-family: "Source Serif", serif;
	padding: 0%;
	margin: 0 auto;
	height: auto;
	bottom: 0px;
	transform: translateX(0%);
	z-index: 5;
	opacity: 1;
}


#slide  h3{
		font-size: 2em;
	padding: 0 0px;

}


#slide h2{

	font-size: 2rem;
	line-height: 1.25em;
	margin: 0;
	padding: 20px 0;
	font-weight: 500;
}

#slide  p{
	font-size: 1.5em;
	padding: 10px 0px;
	margin: 0;
}

#slide .testo {
	padding-top: 45vh;
	width: 100%;
}



#slide .sopra button{
	
	padding:20px 40px;
	color:#fff;
	font-size: 1.5em;
	border: 0;
	margin: 20px 0;
}





#sostenibile h2 {
	font-size: 2.4em;
	font-family: "Source Serif", serif;
	font-weight: 400;
	color: var(--verde);
	line-height: 1.6rem;
	padding: 5px 20px;
	margin-bottom: 30px;
	text-align: center;
}

#sostenibile h3 {
	font-family: 'infinite stroke', sans-serif;
	font-size: 2em;
	line-height: .8rem;
	color: var(--arancio);
	padding: 10px 20px;
	padding-right: 50px;
	text-align: center;
}


#sostenibile .colonna p {
	position: relative;
	font-size: 1em;
	line-height: 1.8em;
	font-weight: 200;
	padding: 10px 28px;
	text-align: left;
}


#sostenibile .colonna p span.material-symbols-outlined {
	position: absolute;
	top: 10px;
	height: 20px;
	width: 20px;
	left: 0;
	color: var(--verdechiaro);
	font-size: 1.6rem;
}

#sostenibile .colonna p strong {
	color: var(--verdechiaro);
	font-size: 1.1rem;
	font-weight: 600;
}

#sostenibile .img {

	width: 100%;
	padding: 0px;
	background-size: contain;
	height: 350px;
	float: left;
	background-position: bottom;
	margin: 0;
}

#sostenibile .colonna {
	z-index: 2;
	width: 100%;
	float: left;
	padding: 20px;
}







#numeri ul{
	padding: 0px;
	max-width: 1000px;
	margin: 0 auto;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#numeri ul li{
	width: 80%;
	margin: 0 10%;
	padding: 20px;
	text-align: center;
	border-bottom: 1px dotted var(--verdechiaro);

}


#settori ul {
	display: flex;
	flex-direction:column;
	justify-content: space-around;
	flex-wrap: wrap;

}



#settori ul li {
	width: 98%;	
	text-align: left;
	margin: 2% 1%;
	padding: 20px;
	position: relative;
	cursor: pointer;
	overflow: hidden;
	height: 400px;
	border-radius: 5px;
}


#settori ul li .img{
	width: 100%;
	height:250px;
	background-size: cover;
	background-position: left;
	opacity: .8;
}


#settori ul li .sopra {
    position: absolute;
    top: 200px;
    width: 90%;
	padding: 20px;
	height: 200px;
    text-align: center;
	background-color: #444;
	opacity: 1;
    transition: top 0.3s ease-in-out, height 0.3s ease-in-out, background-color 0.3s ease-in-out;
}



#boxsotto ul.elenco-contenuti{
	flex-direction: column;
	justify-content: center;
	color: #fff;
}

#boxsotto ul.elenco-contenuti li{
	width: 100%;
	text-align: center;
	padding: 20px;
}

#boxsotto ul.elenco-contenuti li h3{
	color: var(--oro);
	font-size: 1.2em;
	padding: 0;
}

#boxsotto ul.elenco-contenuti li p{
	font-size: 1em;
	line-height: 1.3em;
	padding: 10px 20px;
}



#elencoprodotti {
	padding: 0 0px;
}


#elencoprodotti ul li{
	display: flex;
	flex-direction: row;
	border-bottom: 1px dotted #ccc;

}

#elencoprodotti ul li .img{
	width: 100px;
	height: 100px;
	background-size: contain;
	background-position: center;
	margin: 10px;

}

#elencoprodotti ul li .auto{
	width: 100%;

}

#elencoprodotti ul li .media{
	width: 30%;

}
#elencoprodotti ul li .media h3{
	white-space: nowrap;

}

#elencoprodotti ul li .media.anno h3{
	font-weight: 300;
	font-size: 1em;


}

#elencoprodotti ul li .annomobile {
	display: none;

}

#elencoprodotti ul li .media.anno, #elencoprodotti ul li .media.prezzo {
	padding-top: 0px;
	font-size: 1em;
	text-align: center;

}

#elencoprodotti ul li h4 {
	font-size: .9em;
}

#elencoprodotti ul li h4.bigger {
	font-size:1.2em;
	padding: 5px;
	color: #333;
}

#elencoprodotti ul li h3 {
	font-size: 1.2em;
	font-weight: 600;
}


#cantina .openbox {
	width: 100%;
	margin-top: 40px;
	position: absolute;
	z-index: 3;
	padding: 0;
	max-height: 400px;
}


#cantina .openbox ul {
	margin: 3%;
}


#elencoprodotti .big{
	font-size: 1.5em;
	padding: 5px;
	background-color:#003b49;
	color: #fff;
}

#elencoprodotti h2{
	font-size: 1.3em;
	padding: 5px;
	border: 0;
}

#elencoprodotti h3{
	font-size: 1.3em;
	padding: 5px;
}

#elencoprodotti h4{
	font-size: 1.2em;
	padding: 5px;	
	color: #cc9f53;
}

#elencoprodotti h4.bigger{
	font-size: 1.3em;
	padding: 5px;	
	color: #666;
}


#elencoprodotti h5{
	font-size: 1em;

	padding: 5px;
}

#elencoprodotti p.mini{
	font-size: 1em;
	padding: 5px;
}

#elencoprodotti p{
	font-size: 1em;
	padding: 5px;
}
/* SLIDE */

/* MAIN */

.contatti {
	padding: 20px;

}

.contatti h3 {
	font-size: 1.2em;
	color: #cc9f53;
}

.contatti a:link, .contatti a:visited {
	color: #fff;
}

.contatti a:hover {
	color: #cc9f53;
}

.contatti  {
	font-size: 1em;
	line-height: 1.5em;
}


.prenotazioni h3{
	padding: 10px;
}

.prenotazioni {
	padding: 10px;
}

.prenotazioni .colonna span, .prenotazioni .colonna33 span{
	display: block;
	font-size: .9em;

}

.prenotazioni .colonna{
	position: relative;
	width: 96%; 
	margin: 0 1.5% 10px 0;
	padding: 10px;
	border: 1px dotted #ccc;
	cursor: pointer;
}

.prenotazioni .colonna .hoverx{
	position: absolute;
	width: 100%; 
	left: 0;
	padding: 10px;
	border: 1px dotted #ccc;
	background-color:#003b49;
	z-index: 3;
	top: 45px;
	height: auto;
	display: none;
}

.prenotazioni .colonna .hoverx.active{
	display: block;
}


.prenotazioni a:link, .prenotazioni a:visited{
	color: #fff;
}

.prenotazioni a:hover{
	color: #cc9f53;
}

.prenotazioni .colonna33{
	position: relative;
	width: 31%; 
	margin: 0 1.5% 0 0;
	padding: 5px;
	border: 1px dotted #ccc;
	cursor: pointer;
}

.prenotazioni .colonna33 .hoverx{
	position: absolute;
	width: 100%; 
	left: 0;
	padding: 10px;
	border: 1px dotted #ccc;
	background-color:#003b49;
	z-index: 3;
	top: 45px;
	height: auto;
	display: none;
}

.prenotazioni .colonna33 .hoverx.active{
	display: block;
}


.prenotazioni .colonna33 .calendario{
	position: absolute;
	width: 300px; 
	left: -100px;
	padding: 10px;
	border: 1px dotted #ccc;
	background-color:#003b49;
	z-index: 4;
	top: 45px;
	height: auto;
}

.prenotazioni .colonna33 .time{
	position: absolute;
	
	width: 300px; 
	left: auto;
	right: 0;
	padding: 10px;
	border: 1px dotted #ccc;
	background-color:#003b49;
	z-index: 4;
	top: 45px;
	height: auto;
}
.prenotazioni .colonna33 .time .flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.prenotazioni .colonna33 .time .flex .box{
	padding: 5px;
	border: 1px solid #fff;
	margin: 5px;
}


.prenotazioni .colonna33 .time .flex .box.sele{
	background-color: #cc9f53;
	color: #fff;
}

.prenotazioni .colonna33 .calendario  table{
	width:100%;
}

.prenotazioni .colonna33 .calendario  caption {
	position: relative;
	font-size: 1em;
	padding: 5px 0;

}

.prenotazioni .colonna33 .calendario .arrow{
	position: absolute;
	top: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
}

.prenotazioni .colonna33 .calendario caption .arrow.left{
	left: 0;
}
.prenotazioni .colonna33 .calendario caption .arrow.right{
	right: 0;
}

.prenotazioni .colonna33 .calendario table td{
	text-align: center;
	padding: 10px;
	margin: 1px;
	background-color: #003b4a;
	color: #ccc;

}

.prenotazioni .colonna33 .calendario table td.red{
	color: #003b4a;
	background-color: #fff;
	cursor: pointer;
}

.prenotazioni .colonna33 .calendario table td.sele{
	color: #fff;
	background-color:#cc9f53;
}

.prenotazioni .colonna33 span.icona, .prenotazioni .colonna span.icona {
	position: absolute;
	right: 5px;
	top: 5px;

}

.prenotazioni p{
	font-size: 1em;
	margin: 0;
	padding: 10px 0 0;
}

.prenotazioni p.accetto{
	font-size: 1em;
	position: relative;
	margin: 0;
	padding: 10px 0 10px 30px;
}

.prenotazioni p.accetto span{
	position: absolute;
	left: 0;

}

.prenotazioni input{
	padding: 10px;
	background-color: #003b49;
	border: 1px dotted #ccc;
	width: 96%;
	font-size: 1em;
	color: #fff;
}

.prenotazioni button{
	padding: 10px;
	background-color: #003b49;
	border: 1px dotted #ccc;
	width: 96%;
	font-size: 1em;
	color: #fff;
	cursor: pointer;
}

.prenotazioni button:hover{
	background-color: #cc9f53;
}




section {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}


ul.elenco-contenuti {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

ul.elenco-contenuti li{
	text-align: left ;
	padding: 5px;

}


#about {
	padding: 50px 0 50px 0;
	height: auto;
	background-position: bottom;
	padding-bottom: 0px;
}

#about .img {
	position: relative;
	width: 100%;
	height: 180px;
	margin: 0;
}


#about .colonna {
	position: relative;
	width: 100%;
}



#about .sottogrigio {
	display: none;
}

#about  h1 {
	color: #000;
	font-size: 2rem;
	line-height: 1.8rem;
	padding: 20px 20px 20px;
	font-family: "Source Serif", serif;
}

#about  h1 span{
	font-family: 'infinite stroke', sans-serif;
	font-size: 1.8rem;
	line-height: .8rem;
	color: var(--arancio);
	padding: 10px 20px;
	padding-right:50px;
	display: block;

}

#about h2 {
	font-size: 1.3em;
	line-height: 2rem;
	padding: 10px;
}

#about h3 {
	font-size: 1.4em;
	line-height: 1.2rem;
	padding: 10px;
}

#about p {
	margin-top: 0px;
	font-size: 1.1em;
	font-weight: 200;
	padding: 10px;
	line-height: 1.8em;
}

#about button {
	font-size: 1em;
	margin: 10px 0;
	padding: 10px 50px 10px 50px;
	
	color: #fff;
	border: 0;
	cursor: pointer;
}

#about button:hover {
	}

#about .hoverscritta {
	position:relative;
	width: 100%;

	bottom: 0px;
	text-align: center; 
	font-size:2em; 
	line-height: 1.5rem;
	padding:20px; color:#666; 	
	background-color: var(--chiaro);
	font-family: 'infinite stroke', sans-serif;

}

#video {
	position: relative;
	width: 90%;
	max-width: 400px;
	margin: 100px 5% 30px;
	height: auto;
	min-height: 440px;
	overflow: hidden;
	
}


#video video {
	position: absolute;
	z-index: 3;
	top: 0;

	left: 0;
	
	width: 100%;
	height: auto;
	
}

#video img {width: 100%;
float: left;}

#video .sopraimg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 2;
	color: var(--scuro);
	width: 100px;
	height: 100px;
	line-height: 100px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	border: 8px solid var(--chiaro);
	cursor: pointer;
}



#video .sopraimg span{
	position: absolute;
	top: 0;
	transform: translate(0, 0);
	left: 0;
	font-size: 5em;
	text-align: center;
	z-index: 3;
		color: var(--chiaro);
	width: 90px;
	height: 90px;
	line-height: 80px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	cursor: pointer;
}


#video .sopraimg:hover{
	border: 8px solid var(--verdechiaro);
}

#video .sopraimg:hover span{
	color: var(--verdechiaro);
}

#frase {
	position: relative;
	margin: 0 auto;
	padding: 20px;
	max-width: 800px;
	font-family: "source serif",serif;
	font-size: 1.6rem;
	text-align: center;
}


.separatore {
	background-image: url(../img/10578806.png?1);
	background-size: contain;
	background-position: center;
	width: 80%;
	height: 50px;
	margin: 10px 10%;
	opacity: .5;
}

#tecnologia {
	position: relative;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 0px;
	max-width: 1280px;
}


#tecnologia .img {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: 0px;
	background-size: cover;
	height: 400px;
	right: 0px;
	bottom: 0;
	background-position: bottom right ;
	margin: 0;
}

#tecnologia .sotto1{
	position: relative;
	z-index: 1;
	width:100%;
	padding: 0px;
	height: 10px;
bottom: 0;

	right: 0px;
	margin: 0;
	background-color: var(--arancio);
}

#tecnologia .sotto2{
	position: absolute;
	z-index: 2;
	width:50%;
	padding: 0px;
	height: 150px;
	bottom: 0;
	right: 0;
	margin: 0;
	background-color: var(--scuro);
	display: none;
}


#tecnologia .colonna {
	z-index: 2;
	width:100%;
	float:left;
	padding: 20px;
}



#lavorazioni .img {
	position: relative;
	z-index: 3;
	width: 100%;
	padding: 0px;
	background-size: cover;
	height: 400px;
	bottom: 0px;
	left: 0px;
	background-position: bottom right ;
	margin: 0;
}



#lavorazioni .sotto1{
	position: relative;
	z-index: 2;
	width:80%;
	padding: 0px;
	height: 20px;
	bottom: auto;
	left: auto;
	margin: 0;
	background-color: var(--arancio);
}


#lavorazioni .colonna {
	z-index: 2;
	width: 100%;
	float:right;
	padding: 20px;
	padding-bottom: 50px;
}


	#contattihome{
		position: relative;
		min-height: 700px;
		padding: 0;
		margin: 0 auto;
		padding-top: 50px;
		padding-bottom: 0px;
		background-position: right;
		background-size: cover;
	}
	
	
	#contattihome .colonnacontenitore {
		position: absolute;
		padding: 0px;
		color: var(--scuro);

		height: auto;
		width: 80%;
		background-color: #fff;
	}
	
	#contattihome .colonna {
		padding: 20px;
		float: left;
		width: 100%;
		min-height:auto;
	}

	#contattihome .colonnacontatti {
		float: left;
		width: 100%;
		min-height:auto;
		padding: 20px;
		font-size: 0.9rem;
	}



#contattihome .colonna h2 {
	padding: 10px 0;
	font-size: 1.3rem;
	font-weight: 500;
}

#contattihome .colonna p {
	padding: 10px 0;
	font-size: 1em;
	line-height: 1.8rem;
}

	
	#contattihome .colonnacontatti input, #contattihome .colonnacontatti textarea{
	
		background-color: var(--chiaro);
		color: #000;
		border: 1px solid #ccc;
		padding: 10px;
		margin: 5px 0;
		width: 90%;
	}
	
	#contattihome .colonnacontatti button{
	
		background-color: var(--chiaro);
		color: #000;
		border: 1px solid #ccc;
		padding: 10px;
		margin: 5px 0;
	}



.padding20 {
	padding: 20px;
}


.colonna50 {
	float: left;
	width: 100%;
}

.colonna70 {
	float: left;
	width: 100%;
}

.colonna30 {
	float: left;
	width: 100%;
}

.colonna60 {
	float: left;
	width: 100%;
}

.colonna40 {
	float: left;
	width: 100%;
}


.f_right {
	float: right;
}



#puntivendita h2{
font-size: 2em;
line-height: 1em;
padding: 50px 10% 0;
color: #fff;
}

#puntivendita .sotto {
	position: absolute;
 top:50px;
	width: 100%;
	right: 0;

}

#puntivendita .sotto ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;

}

#puntivendita .sotto ul li {
	position: relative;
	margin:10px 10px;
	width: 250px;
	height: 100px;
	background-color: #fff;
	padding: 20px 20px 0  30px;

}

#puntivendita .sotto ul li .icon{
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	position: absolute;
	top: 8px;
	left: -25px;
	background-color: #fff;
	border-radius: 50%;
		font-size: 2em;

}





#visite p{

font-size: 1.2rem;
line-height: 1.8em;
padding: 10px 10%;
}

#visite h4{
font-size: 1.2em;
line-height: 1.6em;
padding: 40px 10% 10px;
color: #fff;
}

#visite .sotto {
	position: absolute;
	top: 80px;
	width: 100%;

}

#visite .sotto ul {
	display: flex;
	flex-direction: row;
	justify-content: left;
	flex-wrap: wrap;
	margin-left: 8%;

}

#visite .sotto ul li {
	margin: 5px;
	height: 75px;
	width: 40%;
	border: 2px solid #c0aa8f;
	padding: 5px;

	cursor: pointer;
}

#visite .sotto ul li .int {
	position: relative;
	background-color: #fff;
	height: 60px;
}

#visite .sotto ul li:hover {
	
	background-color:#c0aa8f;
}

#visite .sotto ul li h3 {
	position: absolute;
	top: 0px;
	left: 6px;
	font-size: 2em;
	font-weight: 300;
	padding: 0;
	margin: 0;
}

#visite .sotto ul li h4 {
	position: absolute;
	
	top: 5px;
	right: auto;
	left: 50px;
	font-size: 1.5em;
		padding: 0;
	margin: 0;
}

#visite .sotto ul li button {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	font-size: .9rem;
	text-align: center;
		background-color: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}


#blog {
	position: relative;
	padding: 10% 0;
}

#blog h2 {
	
	font-size: 2em;
	line-height: 2rem;
	padding: 0px 0px 10px 10%;
}

#blog h3 {
	font-size:1.5em;
	line-height: 1rem;
		padding-left: 18%;
}

#blog p {
	font-size: 1.2em;
	line-height: 1.8rem;
	padding: 20px 10%; 
	}

#blog ul {
	display: flex;
	justify-content: left;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0px 0;
}

#blog ul li{
	width: 100%;
	padding: 20px;
}

#blog ul li .img{
	width: 100%;
	height: 220px;
	border: 0px solid #333;
	background-size: cover;
	background-position: right;
}

#blog ul  li p {
	font-size: 1em;
	line-height: 1.8rem;
	padding: 10px; 
	}

#blog ul li h3 {
	font-size: 1.5em;
	line-height: 1.5rem;
		padding: 10px;
}

/*_______UN SOLO CONTENUTO _______*/


#blog ul.blog1 li{
	width: 100%;
	padding: 20px;
	background-color: #fff;
}

#blog ul.blog1 li div{

	padding: 40px;
}

#blog ul.blog1 li .img{
	float: left;
	width: 100%;
	height: 500px;
	margin-right: 30px;
	background-size: cover;
	background-position: right;
}

#blog ul.blog1  li p {
	font-size: 1.2em;
	line-height: 1.8rem;
	padding: 10px; 
	}

#blog ul.blog1 li h2 {
	font-size: 2.6em;
	line-height: 2.8rem;
		padding: 10px;
}

#blog ul.blog1 li h3 {
	font-size: 1.85em;
	line-height: 1.85rem;
		padding: 10px;
}

/*_______DUE CONTENUTI _______*/

#blog ul.blog2 li{
	width: 100%;
	margin: 0%;
	height: 650px;
	padding: 0px;
	background-color: #fff;
}

#blog ul.blog2 li div{

	padding: 20px;
}

#blog ul.blog2 li .img{
	width: 100%;
	height: 230px;
	margin: 0;
	background-size: cover;
	background-position: right;
}

#blog ul.blog2  li p {
	font-size: 1.1em;
	line-height: 1.8rem;
	padding: 10px; 
	}

#blog ul.blog2 li h2 {
	font-size: 2em;
	line-height: 2.2rem;
		padding: 10px;
}

#blog ul.blog2 li h3 {
	font-size: 1.4em;
	line-height: 1.85rem;
		padding: 10px;
}



.relative {
	position: relative;
}

.conthover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9;
    display: none;
    background-color: #fff;
}

.conthover.opacity {
	opacity: .8;
}

.popup {
	top: 0;
	left: 0;
	position: fixed;
	width: 80%;
	height: 80vh;
	margin: 10vh 10%;
	background-color: #fff;
	z-index: 10;
	display: none;
}

.hover {
    position:absolute;
    top: 0;
    z-index: 10;
    left: 0;
    width: 100%;
    min-height: 100vh;
    display: none;
}

.hover .boxcontenuto{
    position: relative;
    width: 100%;
    max-width:1280px;
    margin: 0 auto;
    padding: 0px;

}

.hover .boxcontenuto input, .hover .boxcontenuto select, .hover .boxcontenuto textarea   {
    width: 95%;
    font-size: 1.2em;
    border: 0;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px 0;


}

.hover .boxcontenuto.esteso{
    max-width:none;
	height: 100vh;
	position: fixed;

}

.hover .boxcontenuto .altezza{
	height: 50vh;
}

.hover .boxcontenuto #accesso.altezza.esteso{
	height: 80vh;
}

.hover .boxcontenuto #registrazione.altezza.esteso{
	height: 20vh;
}



.hover .boxcontenuto .boxaccesso .colonna{
	padding: 50px;
	display: flex;
	flex-direction: column;
align-items: center; /* Centrato verticalmente */
justify-content: center;

}

.hover .boxcontenuto .boxaccesso .colonna100{
	width: 100%;
}

.hover .boxcontenuto .boxaccesso .colonna50{
	padding:20px;
	width: 100%;


}


.hover .boxcontenuto .boxaccesso ul{
	display: flex;
	justify-content: left;
	flex-direction: column;

}

.hover .boxcontenuto .boxaccesso ul li{
	font-size: 1.5em;
	line-height: 1.8em;
	padding: 5px;

}

.hover .boxcontenuto .boxaccesso input{
	margin: 5px 0px;
	width:80%;
	padding: 5px;
	font-size: .9em;

}

.hover .boxcontenuto .boxaccesso label{
	display: block;
	width:100%;
	white-space: wrap;

}

.hover .boxcontenuto .boxaccesso h3{
	font-size: 1.2rem;
	font-weight: 400;
	padding: 10px 0px;
}

.hover .boxcontenuto .boxaccesso p{
	font-size: 1rem;
	padding: 5px 20px;
}

.hover .boxcontenuto .boxaccesso p.dim{
	text-decoration: underline;
	cursor: pointer;
}

.hover .boxcontenuto .boxaccesso .dimpass{
	display: none;
}

.hover .boxcontenuto .boxaccesso p.dim:hover{
color:#c0aa8f
}

.hover .boxcontenuto .boxaccesso button{
	background-color: #fff;
	padding: 10px 20px;
	margin: 20px;
	border: 0;
	cursor: pointer;
}

.hover .boxcontenuto .boxaccesso button:hover{
	background-color:#c0aa8f
}


.hover .chiudi{
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    z-index: 2;

}

#contatti {
	padding: 10px 10px 0px;
}

#contatti h1 {
	font-size: 2em;
	line-height: 2.4rem;
	
	padding:20px;
}

#contatti form {
	padding: 20px;
}

#contatti label{
	display: block;
}

#contatti input{
	padding:10px 20px;
	width: 90%;
	background-color: #fff;
	border: 1px solid #ccc;
	display: block;
}

#contatti input.privacy {
	width: 30px;display: inline;
}

#contatti textarea{
	padding: 10px 20px;
	width: 90%;
	background-color: #fff;
	border: 1px solid #ccc;
	height: 200px;
	display: block;
}

#contatti button{
	padding:10px 20px;
		color: #fff;
	border: 0;
	margin: 20px 0;
	display: block;
}

#contatti .mappa{
	height: 400px;
	background-color: #fff;
}



/*_________FOOTER_*/



.newsletter {
	background-color: #cc9f53;
padding: 20px;
}

.newsletter ul.elenco-contenuti {
	flex-direction: column;
}

.newsletter ul.elenco-contenuti li {
	width: 100%;
	text-align: center;
}

.newsletter ul.elenco-contenuti li h3{
	font-size: 1.6em;
	text-align: center;
	color: #fff;
}

.newsletter ul.elenco-contenuti li h4{
	font-size: 1em;
	text-align: center;
	color: #fff;
}

.newsletter ul.elenco-contenuti li p{
	font-size: 1em;
	text-align: center;
	color: #fff;
	padding: 5px 0;
}

.newsletter ul.elenco-contenuti li p span{
	font-size: .9em;
	text-align: center;
	color: #fff;
}

.newsletter a:link, .newsletter a:visited{
	color: #fff;
	text-decoration: underline;
}


.newsletter input {
	background-color: #fff;
	padding: 10px 10px 10px 20px;
	border-radius: 20px 0 0 20px;
	border: 0;
width:100%;
max-width: 240px;
height: 40px;
overflow: hidden;
}

.newsletter button {
	background-color: #000;
	padding: 10px;
	border-radius: 0 20px 20px 0 ;
	border: 0;
width: 80px;
height: 40px;
overflow: hidden;
color: #fff;
}


footer {	
	margin: 0 auto;
	width: 100%;
	max-width: 1280px;
	padding-top: 10px;
	color: #ccc;
}



footer .logo {
	position: absolute;
	top:-90px;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
	height: 140px;
	padding: 5px 0;
	z-index: 6;
	background-image: url(../img/logo_footer.png?5);
}


footer .scritta {
	float: left;
	font-size: 1.6em;
	padding: 15px 10px;
		font-weight: 600;
}

footer ul.elenco-contenuti {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-wrap: wrap;
}

footer ul.elenco-contenuti li{
	text-align: center ;
	padding: 5px;

}



.blocca {
	margin: 0;
	clear: both;
}

.blocca1 {
	margin: 0;
	clear: both;
	border-bottom: 1px dotted #ccc;
}


}