/* menu css */
a {
	text-decoration: none;
}
:root {
	--grigio: #898a8d;
	--grigiochiaro: #efeeed;
	--verdescuro: #364a3f;
	--grigiomedio: #3d3d3d;
	--grigioscuro: #303030;
	--rosso: #e94a26;
	--nero: #171717;
	--beige: #edebe8;
	--marroncino: #bcad8f;
	--arancio: #cc814e;
	--rosa: #d0b8ae;
	--marronescuro: #4b4441;
	--marronemedio: #696361;
	--blu: #27292d;
}
/*   +++++++++++++++++++++++++++++ inizio finestra modale per cambio pagina ++++++++++++++++++++++++++*/
#overlayTrans {
	position: fixed;
	z-index: 200;
	height: 100vh;
	width: 100vW;
	top: 0;
	left: 0;
	display: block;
}

#boxOverlayTrans {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 80px;
	width: 330px;
	
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
#sfondoInit{
	background-color: var(--blu);
	position: absolute;
	width: 100%;
	bottom:0;
}
.pieno {
	height: 100vh;
	transition: 0.6s;
	transition-delay: 0.2s;
}
.noPieno {
	height: 0;
	transition: 1s;
	transition-delay: 2.1s;
}

.functClipScroll{
	animation: titleAnimationClipScroll 2s linear 0.2s 1 normal forwards;
	
}
@keyframes titleAnimationClipScroll {
	0% {
		opacity: 0;
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);

	}

	25% {
		clip-path: polygon(0 100%, 100% 100%, 100% 90%, 0 75%);
	}

	48% {
		clip-path: polygon(0 100%, 100% 100%, 100% 75%, 0 25%);
	}

	75% {
		clip-path: polygon(0 100%, 100% 100%, 100% 35%, 0 12%);
	}

	100% {
		
		opacity: 1;
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
	}
	

}

.noClip {
	animation: titleAnimationOpen 2s linear 0.2s 1 normal forwards;
}
@keyframes titleAnimationOpen {
	0% {
		opacity: 0;
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);

	}

	12% {
		clip-path: polygon(0 100%, 100% 100%, 100% 90%, 0 75%);
	}

	24% {
		clip-path: polygon(0 100%, 100% 100%, 100% 75%, 0 25%);
	}

	36% {
		clip-path: polygon(0 100%, 100% 100%, 100% 35%, 0 12%);
	}

	48% {
		
		opacity: 1;
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
	}
	68% {
		
		opacity: 1;
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
	}
	85% {
		
		opacity: 0.8;
		clip-path: polygon(0 100%, 100% 35%, 100% 0, 0 0);
	}
	92%{
		opacity: 0.8;
		clip-path: polygon(0 64%, 100% 16%, 100% 0, 0 0);
	}

	100% {
		
		opacity: 0.6;
		clip-path: polygon(0 0%, 100% 0%, 100% 0, 0 0);
	}

}

/*   +++++++++++++++++++++++++++++ fine finestra modale per cambio pagina ++++++++++++++++++++++++++*/
/*   +++++++++++++++++++++++++++++ inizio finestra modale menu ++++++++++++++++++++++++++*/
#overlayMenu {
	position: fixed;
	height: 100vh;
	width: 100vw;
	z-index: 195;
	background-color: transparent;
	display: none;

}
#sfondo {
	background-color: var(--verdescuro);
	position: fixed;
	width: 100%;
	bottom:0;
	transition: 0.6s;
	transition-delay: 0.2s;
	height: 0vh;
	z-index: 194;
}

#closeMenu {
	position: absolute;
	top: 25px;
	right: 60px;
	transform: rotate(270deg);
}
#sfondo span {
	color: var(--rosa);
	text-transform: uppercase;

}
#closeMenu p {
	color: #ffffff;
	text-align: left;
	font-size: 20px;
	font-weight: 300;
}

#overlayMenu nav {
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translate(0, -50%);
}

#overlayMenu nav ul li{
	font-family: 'Gretha ExtLt', sans-serif;
	font-stretch: condensed;
	font-weight: 300;
	font-size: 40px;
	line-height: 80px;
	text-decoration: none;
	list-style-type: none;
	cursor: pointer;
	color: #ffffff;
}

#overlayMenu nav ul li span {
	color: var(--rosa);
	font-size: 15px;
}

@media screen and (max-width:500px){
	#overlayMenu nav {
		left: 5%;
	}
	#closeMenu {
		right: 15px;
	}
	#overlayMenu nav ul li{
	font-size: 30px;
	line-height: 45px;
}
}