/* style.css*/


@font-face {
	font-family: 'M PLUS 1 Code';
	src: url(../fonts/MPLUS1Code-Regular.woff2) format('woff2'),
		url(../fonts/MPLUS1Code-Regular.woff) format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gretha ExtLt';
	src: url('../fonts/Gretha-ExtraLight-qaislx.eot');
	src: url('../fonts/Gretha-ExtraLight-qaislx.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Gretha-ExtraLight-qaislx.woff2') format('woff2'),
		url('../fonts/Gretha-ExtraLight-qaislx.woff') format('woff'),
		url('../fonts/Gretha-ExtraLight-qaislx.ttf') format('truetype'),
		url('../fonts/Gretha-ExtraLight-qaislx.svg#Gretha ExtLt') format('svg');
}

: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;
}

* {
	margin: 0;
	padding: 0;
}


/*   +++++++++++++++++++++++++++++ inizio header  ++++++++++++++++++++++++++*/
body {
	margin: 0;
	background-color: var(--grigiochiaro);
	overflow-x: hidden;
    cursor: none !important;
}

p {
	font-size: 24px;
	font-weight: 500;
	font-family: 'Gretha ExtLt', sans-serif;
	padding: 25px 20px;
	color: var(--grigioscuro);
	line-height: 27px;
}

h2 {
	font-family: 'Gretha ExtLt', serif;
	font-stretch: condensed;
	font-weight: 300;
	color: var(--verdescuro);
	font-size: 3rem;
	margin: 15px;
	margin-bottom: 5px;
}

#blockOnHeader {
	width: 100%;
	height: 250px;
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	display: block;
}

#containerH1 {
	width: 100%;
	height: 100%;
	max-width: 1500px;
	margin: 0 auto;
	position: relative;
	display: block;
}

h1 {
	font-family: 'Gretha ExtLt', sans-serif;
	font-stretch: condensed;
	font-weight: 300;
	font-size: 60px;
	position: absolute;
	left: 15px;
	bottom: 10px;
	color: var(--rosa);
	transform: translateY(50px);
	opacity: 0;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	animation: titleAnimationH1 1.6s linear 2.5s 1 normal forwards;
}

@keyframes titleAnimationH1 {
	0% {
		transform: translateY(50px);
		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%);
	}

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

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

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

}

header {
	height: 100vh;
	width: 100%;
	margin: 0 auto;
	max-width: 1500px;
	background-color: var(--verdescuro);
}

#containerSlide {
	position: absolute;
	top: 250px;
	display: inline;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	height: calc(100% - 250px);
	background-image: url(../img/slide1.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media screen and (min-width:481px) and (max-width:600px) {
	h1 {
		font-size: 45px;
	}

}

@media screen and (min-width:330px) and (max-width:480px) {
	#blockOnHeader {
		height: 200px;
	}

	#containerSlide {
		top: 200px;
	}

	h1 {
		font-size: 38px;
	}

	#containerSlide {
		height: calc(100vh - 200px);
	}


	h2 {
		font-size: 3rem;
	}
}

/*   +++++++++++++++++++++++++++++ fine header  ++++++++++++++++++++++++++*/
/*   +++++++++++++++++++++++++++++ inizio since  ++++++++++++++++++++++++++*/
#since:before {
	content: '';
	clear: both;
}

#since {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	background-color: var(--rosa);
	height: 300px;
	background-image: url(../img/texture.png);
	background-position: top left;
	background-repeat: repeat;
	position: relative;
}

h3 {
	font-size: 270px;
	font-weight: 400;
	color: var(--verdescuro);
	text-align: center;
	font-family: 'Gretha ExtLt', serif;
	font-stretch: condensed;
	line-height: 340px;
}

#one,
#two,
#tree,
#four {
	color: var(--verdescuro);
}

.containerSince {
	height: 100%;
	width: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

}

#since1 {
	animation: mymove 4s infinite;
}

#one {
	animation: mymove1 4s infinite;
}

#two {
	animation: mymove2 4s infinite;
}

#tree {
	animation: mymove3 4s infinite;
}

#four {
	animation: mymove4 4s infinite;
}


@keyframes mymove {
	1% {
		opacity: 1;
	}

	20% {
		opacity: 1;
	}

	21% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

@keyframes mymove1 {
	1% {
		opacity: 0;
	}

	20% {
		opacity: 0;
	}

	21% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes mymove2 {
	1% {
		opacity: 0;
	}

	40% {
		opacity: 0;
	}

	41% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes mymove3 {
	1% {
		opacity: 0;
	}

	60% {
		opacity: 0;
	}

	61% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes mymove4 {
	1% {
		opacity: 0;
	}

	80% {
		opacity: 0;
	}

	81% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@media screen and (min-width:781px) and (max-width:900px) {
	#since {
		height: 200px;
	}

	.containerSince {
		width: 100%;
	}

	h3 {
		font-size: 180px;
		line-height: 230px;
	}
}

@media screen and (min-width:481px) and (max-width:780px) {
	#since {
		height: 180px;
	}

	.containerSince {
		width: 100%;
	}

	h3 {
		font-size: 160px;
		line-height: 210px;
	}
}

@media screen and (min-width:330px) and (max-width:480px) {
	#since {
		height: 140px;
	}

	.containerSince {
		width: 100%;
	}

	h3 {
		font-size: 112px;
		line-height: 155px;
	}
}

/*   +++++++++++++++++++++++++++++ fine since  ++++++++++++++++++++++++++*/
/*   +++++++++++++++++++++++++++++ inizio presentazione  ++++++++++++++++++++++++++*/
#presentazione {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	background-color: #ffffff;
}

#presentazione p {
	text-align: center;
	font-size: 22px;
	font-weight: 500;
	line-height: 32px;
}

#presentazione span {
	color: var(--marroncino);
	/*font-style: italic;
	text-decoration: underline;*/
}

/*   +++++++++++++++++++++++++++++ fine presentazione  ++++++++++++++++++++++++++
/*   +++++++++++++++++++++++++++++ inizio servizi  ++++++++++++++++++++++++++*/
#sectServizi {
	width: 100%;
	background-color: var(--grigiochiaro);
}

#boxServizi {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	background-color: var(--grigio);
	background-image: url(../img/servizi2.jpg);
	background-origin: border-box;
	background-position: center;
	background-size: cover;
	padding-bottom: 20px;
}

h4 {
	font-size: 4rem;
	font-family: 'M PLUS 1 Code', sans-serif;
	font-weight: 400;
	color: #ffffff;
	margin: 10px 0 15px 15px;
}

#containerIcone {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.boxIcona {
	height: 150px;
	width: 120px;
	margin: 25px;
	position: relative;
}

.boxIcona img {
	height: 100px;
	width: 100px;
	position: absolute;
	top: 0;
	left: 0;

}

h6 {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #ffffff;
	font-size: 1.2rem;
	font-family: 'Gretha ExtLt', sans-serif;
	font-weight: 400;
	color: #ffffff;
}

@media screen and (min-width:330px) and (max-width:480px) {
	.boxIcona {
		height: 125px;
	}

	.boxIcona img {
		height: 80px;
		width: 80px;
	}

	#boxServizi {
		background-image: url(../img/servizi2.jpg);
	}
}

/*   +++++++++++++++++++++++++++++ fine servizi  ++++++++++++++++++++++++++*/