@import"skeleton.min.css";
@import"reset.css";
@import url("https://use.typekit.net/ezy0wdv.css");

html {
  scroll-behavior: smooth; 
}

body { 
	position:relative;
	font-family: 'poppins', sans-serif;
	font-weight:400;
	font-size:18px;
	line-height:28px;
	color:#636854;
	background-color:#fff;
	margin:0px;
	overflow-x: hidden; }

	
b { font-weight:600; }

.textSmall { font-size:16px; line-height: 22px; font-weight: 300; }
.textBig { font-size: 34px; line-height: 54px; font-weight: 300; }


.p0 {padding:0px;}
p, 
.p1	{padding-bottom:5px;}
.p2	{padding-bottom:10px;}
.p3	{padding-bottom:15px;}
.p4	{padding-bottom:20px;}
.p5	{padding-bottom:25px;}
.p50 {padding-bottom:50px;}
.p100 {padding-bottom: 100px;}

.m1	{margin-bottom:5px;}
.m2	{margin-bottom:10px;}
.m3	{margin-bottom:15px;}
.m4	{margin-bottom:20px;}
.m5	{margin-bottom:25px;}

a {color:#636854; text-decoration: underline;}
a:hover {color:#636854; text-decoration: underline;}
a.noLine { text-decoration: none; }

.aleft		{text-align:left;}
.acenter	{text-align:center;}
.ajustify	{text-align:justify;}
.aright		{text-align:right;}
.pleft		{float:left;}
.pright		{float:right;}


h1, .h1 {
	font-size:80px;
	color: #636854;
	line-height:85px;
	font-weight:600;}
h2, .h2 {
	font-size:48px;
	color: #636854;
	line-height:60px;
	font-weight:600;}
h3, .h3 {
	font-size:30px;
	color: #636854;
	line-height:40px;
	font-weight:600;}

.container_12 img {
	max-width:100%; }

.green { color: #646856; }
.white { color: #fff; }
.sfondoPanna { background-color: #efe9e4; }

.rounded { border-radius: 25px; }
.circle { border-radius: 50%; }

#background {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-size: cover;
	background-position: center; }
#bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translate(-50%, -50%);
  object-fit: cover; }
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2); }


/* Header */

#header { 
	padding: 25px 0px 25px 0px; 
	position:fixed; 
	width: 100%; 
	z-index: 1000; }

#mainLogo { height: 75px; }

#menuSmall {
	display:none;}

#menu {
	margin-top:30px;
	text-align:right;
	text-transform: uppercase;}
#menu div {
	display:inline-block; }
#mainMenu li {
	display:inline-block;
	list-style: none;
	padding:0px 0px 0px 70px;}
#mainMenu a {
	display:inline-block;
	color:#fff;
	font-weight:400;
	font-size:16px;
	line-height:16px; 
	text-decoration:none;
  padding: 3px 0px 3px 0px; }
#mainMenu a:hover, #mainMenu a.current { border-bottom: 1px solid #fff; }

#hamburger { display: none; }
#hamburger {
	margin-top: 12px;
	width: 35px;
	height: 35px;
	float: right;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer; }
#hamburger span {
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: #fff;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out; }
#hamburger span:nth-child(1) { top: 0px; }
#hamburger span:nth-child(2),#hamburger span:nth-child(3) { top: 13px; }
#hamburger span:nth-child(4) { top: 26px; }
#hamburger.open span:nth-child(1) {
	top: 15px;
	width: 0%;
	left: 50%; }
#hamburger.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg); }
#hamburger.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg); }
#hamburger.open span:nth-child(4) {
	top: 15px;
	width: 0%;
	left: 50%; }

/* Hero */

#hero { padding-top: 125px; }

/* Content */

#content { padding-top: 150px; }

.map-container { position: relative; }
.map-container img { width: calc(100vw - var(--offset-left)); max-width: none; }
.pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none; }

.capabilities { display: flex; align-items: center; }
.capabilities span.h1 { flex: 0 0 300px; }
.capabilities .textBig { font-size: 30px; line-height: 40px; }

#loghi {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 60px 80px;
  place-items: center; 
  padding: 20px 0; }
#loghi img,
#loghiX5 img {
  max-width: 200px;   
  max-height: 120px;   
  object-fit: contain; 
  width: 100%;
  height: auto; }

#loghiX5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 60px 80px;
  place-items: center; 
  padding: 20px 0;
}



#valori img { max-height: 160px; }
#valori .grid_3 p.acenter { font-weight: 600; font-size: 25px; }

#servizi-wrapper {
  position: relative;
  width: 100vw;
  overflow: hidden; }
#servizi {
  display: flex;
  width: max-content; }
#servizi > a {
  position: relative;
  flex: 0 0 25vw;
  height: 300px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none; }
#servizi > a span {
  position: relative;
  max-width: 90%;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 2; }
#servizi a.servizioVerde { background-color: #636854; color: #fff; }
#servizi a.servizioPanna { background-color: #efe9e4; color: #636854; }
#servizi a .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
  pointer-events: none; /* in modo che il click passi attraverso */ }

#schede img { max-width: 350px; }
#schede p.acenter { font-size: 22px; }

#coreServices {
  display: grid;
  grid-template-columns: repeat(7, 230px); 
  justify-content: center;                 
  align-items: center;
  font-size: 22px;
  text-align: center; }
#coreServices span {
  display: flex;
  align-items: center;      /* centro verticale */
  justify-content: center;  /* centro orizzontale */
  padding: 0 20px;
  border-right: 2px dotted #636854;
  height: 100px; }
#coreServices span:last-child { border-right: none; }
#coreServices a { text-decoration: none; }
#coreServices a:hover {
	color:#e9be47; }

.box1 {
	box-sizing: border-box;
	display:inline-block;
	border:#eee 1px solid;
	border-radius: 25px;
	background-color: #fff;
	padding: 10px;
	margin-right: 7px; 
	margin-bottom: 20px; }
.box1 img {
	margin-bottom: 10px; }
a.box1 {
	text-decoration:none;}
a.box1:hover {
	border-color:#636854;}
.box1 div {
	font-weight:500;
	padding:10px 10px 0px 10px; }

#contatti p.p3 { font-size: 25px; line-height: 40px; }
#contatti p.p3 span { line-height: 20px; display: block; }

/* Slider */
.slides {
	display:block; }
.slide img {
	width:100%;
	display:block;}
.slick-loading .slick-list {
    background: #fff url('../img/ajax-loader.gif') center center no-repeat; }


/* PULSANTI */

:root {
  --btn-color: #636854;
  --btn-accent: #e9be47;
  --btn-font-size: 18px;
  --btn-font-weight: 700;
  --btn-padding: 8px 18px;
  --btn-corner-size: 20px;
  --btn-transition: 0.8s ease; }

/* wrapper per centrare un singolo bottone */
.btn-wrapper { text-align: center; }

/* base del link (padding spostato nello span) */
a.btn {
  display: inline-block;
  position: relative;
  color: var(--btn-color);
  font-size: var(--btn-font-size);
  line-height: 18px !important;
  text-transform: uppercase;
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  /* nessuna trasformazione in hover per mantenere il bottone stabile */
}

/* span interno: riempie il bottone, riceve padding e centra il testo */
a.btn > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;         /* serve per i pseudo-elementi bottom */
  padding: 10px 18px 6px 18px;/* qui sta la padding visibile */
  box-sizing: border-box;
  line-height: 1;
  z-index: 1;                 /* testo sopra sfondo ma sotto angoli (che avranno z-index maggiore) */
}

/* rendi cliccabile il testo normalmente */
a.btn, a.btn > span { -webkit-tap-highlight-color: transparent; }

/* pseudo-elements: quattro angoli */
/* due angoli superiori sul <a> */
a.btn::before,
a.btn::after,
a.btn > span::before,
a.btn > span::after {
  content: '';
  position: absolute;
  width: var(--btn-corner-size);
  height: var(--btn-corner-size);
  background: transparent;
  box-sizing: border-box;
  pointer-events: none;
  transition: width var(--btn-transition), height var(--btn-transition);
  z-index: 3; /* sopra il testo */
}

/* top-left */
a.btn::before {
  top: -2px;
  left: -2px;
  border-top: 3px solid var(--btn-accent);
  border-left: 3px solid var(--btn-accent);
}

/* top-right */
a.btn::after {
  top: -2px;
  right: -2px;
  border-top: 3px solid var(--btn-accent);
  border-right: 3px solid var(--btn-accent);
}

/* bottom-left (sul span che ora ha la stessa area del bottone) */
a.btn > span::before {
  bottom: -2px;
  left: -2px;
  border-bottom: 3px solid var(--btn-accent);
  border-left: 3px solid var(--btn-accent);
}

/* bottom-right */
a.btn > span::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 3px solid var(--btn-accent);
  border-right: 3px solid var(--btn-accent);
}

/* hover / focus: i corner si espandono, il bottone NON si muove */
a.btn:hover::before,
a.btn:hover::after,
a.btn:hover > span::before,
a.btn:hover > span::after,
a.btn:focus::before,
a.btn:focus::after,
a.btn:focus > span::before,
a.btn:focus > span::after {
  width: 60%;
  height: 60%;
}

/* accessibility focus (non sposta) */
a.btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,153,0,0.12);
}

/* gruppi/utility */
.btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-group--center { justify-content: center; }
.btn-group--left   { justify-content: flex-start; }
.btn-group--right  { justify-content: flex-end; }

.btn-group--center a.btn { color: white; margin: 0 5px 10px 5px; }

/* small variant */
a.btn.small > span { padding: 6px 12px; font-size: 14px; }
@media (max-width: 420px) {
  :root { --btn-corner-size: 14px; }
}



	
/* Back to top button */
#back-top {
	display: none;
	z-index:100;
	position: fixed;
	bottom: 100px;
	right: 10px; }
#back-top a {
	width: 40px;
	height: 40px;
	display: block;
	opacity:0.6; }
#back-top a:hover {
	opacity:1; }

/* Scroll down button */
#scroll-down { position: absolute; left: 50%; top: 92vh; transform: translateX(-50%);height: 47.9667px; }
#scroll-down img { filter: invert(100%); }
#scroll-down img.sdGreen { filter: invert(37%) sepia(12%) saturate(539%) hue-rotate(33deg) brightness(100%) contrast(85%); }

#scroll-right { display: none;}


/* Form */

form { font-family: 'poppins', sans-serif;}

::placeholder { 
  font-weight:300;
  color: #7e846c;
  opacity: 1;
}

input[type="email"],
input[type="search"],
input[type="text"],
input[type="password"],
textarea,
select {
	border: 1px solid #636854;
	border-radius: 25px;
	padding: 9px 8px 5px 20px;
	width:100%;
	margin-bottom: 15px;
  background-color: #fff;
	color: #7e846c;
	font-weight: 300;}
select {
	padding: 9px 8px 5px 20px;}
input:read-only {
	background-color: #EEE;}
input[type="button"],
input[type="submit"], button {
	border: none;
	border-radius: 25px;
	padding: 10px 8px 8px 8px;
	color: white;
	background-color: #636854; 
	width: 100%;}
		
input[type="submit"]:hover,
input[type="button"]:hover, button:hover { background-color: #e9be47; color: #000; }

input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin:5px;
  width:25px;
  height:25px; }

label { font-size: 15px; margin-left: 20px; font-weight: 500; }

.delta {display:none;}


/* Footer */
#footer {
	font-size: 16px;
	line-height: 26px;
	font-weight: 300;
	padding-top:45px;
	padding-bottom:35px;
	background-color:#636854;
	color:#fff;}
#footer a {
	text-decoration:none;
	color:#fff; }
#footer a:hover {
	text-decoration:underline; }
#footer img { max-width: 85px; }


	
@media only screen and (min-width: 1200px) and (max-width: 1619px) {
	body { font-size: 17px; line-height: 27px; }
	h1, .h1 {
		font-size:70px;
		line-height:75px;}
	h2, .h2 {
		font-size:45px;
		line-height:57px;}
	.textBig { font-size: 31px; line-height: 48px; }
	#mainMenu li {
		padding:0px 0px 0px 60px;}
	.capabilities span.h1 { flex: 0 0 200px; }
	.capabilities .textBig { font-size: 26px; line-height: 36px; }
	.map-container img { max-width: 850px; }
	#loghi img,
	#loghiX5 img {
	  max-height: 80px; }
	#valori img { max-height: 120px; }
	#valori .grid_3 p.acenter { font-weight: 600; font-size: 23px; }
	#valori .grid_3 p.ajustify { font-size: 16px; line-height: 26px; }
	#coreServices {
	  grid-template-columns: repeat(7, 180px); 
	  font-size: 21px; }
	#contatti p.p3 { font-size: 24px; line-height: 40px; }

}

@media only screen and (max-width: 1199px) {
	body { font-size: 17px; line-height: 27px; }
	h1, .h1 {
		font-size:55px;
		line-height:60px;}
	h2, .h2 {
		font-size:40px;
		line-height:52px;}
	.textBig { font-size: 25px; line-height: 44px; }
	#mainMenu li {
		padding:0px 0px 0px 40px;}
	.capabilities span.h1 { flex: 0 0 170px; }
	.capabilities .textBig { font-size: 23px; line-height: 33px; }
	.map-container img { max-width: 655px; margin-top: 100px; }
	#loghi { grid-template-columns: repeat(3, 1fr); }
	#loghi img {
	  max-width: 160px; max-height: 100px; }
	#servizi > a { height: 200px; }
	#servizi > a span { font-size: 18px; }
	#valori img { max-height: 90px; }
	#valori .grid_3 p.acenter { font-size: 20px; }
	#valori .grid_3 p.ajustify { font-size: 16px; line-height: 26px; }
	#coreServices {
	  grid-template-columns: repeat(7, 145px); 
	  font-size: 17px; }
	#coreServices span { padding: 0 15px; }
	.from-right img, .from-left img { object-fit: cover; height: 450px;}
	.box1 { padding: 5px; }
	#contatti p.p3 { font-size: 23px; line-height: 38px; }
	#footer { font-size: 16px; line-height: 26px; }
}

@media only screen and (min-width: 768px) and (max-width: 995px) {
	body { font-size: 16px; line-height: 25px; }
	h1, .h1 {
		font-size:43px;
		line-height:50px;}
	h2, .h2 {
		font-size:35px;
		line-height:47px;}
	.textBig { font-size: 22px; line-height: 38px; }
	#mainMenu li {
		padding:0px 0px 0px 25px;}
	#mainMenu a {
		font-size:15px; }
	.capabilities span.h1 { flex: 0 0 140px; }
	.capabilities .textBig { font-size: 20px; line-height: 30px; }
	.map-container img { max-width: 500px; margin-top: 125px; }
	#loghi { grid-template-columns: repeat(3, 1fr); }
	#loghi img,
	#loghiX5 img {
	  max-width: 140px;   
	  max-height: 70px;   
	  object-fit: contain; 
	  width: 100%;
	  height: 100%; }
	#loghiX5 {
	  grid-template-columns: repeat(3, 1fr);
	}
	#valori .grid_3 p.acenter { font-size: 16px; line-height: 23px; }
	#valori .grid_3 p.ajustify { font-size: 14px; line-height: 23px; }
	#schede img { max-width: 225px; }
	#coreServices {
	  grid-template-columns: repeat(7, 110px); 
	  font-size: 15px; }
	#contatti p.p3 { font-size: 18px; line-height: 32px; }
	#footer { font-size: 14px; line-height: 24px; }
}

@media only screen and (max-width: 767px) {
	.noMobile { display: none; }
	#hamburger { position: relative; display: block; cursor: pointer; z-index: 1100;  }
	#logo {
	  position: relative;
	  z-index: 1100; }
	#menu { display: none; }
	#menu {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0px !important;
    width: 100%;
    height: 100vh;
    background-color: #646856;
    transform: translateX(100%); /* NASCOSTO */
    transition: transform 0.5s ease-in-out;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;}
  /* VISIBILE SOLO QUANDO HA .open */
  #menu.open { transform: translateX(0); }
  #mainMenu li {
  	text-align: center;
		display: block;
		padding:21px; }
	#mainMenu a {
		font-weight:400;
		font-size:30px; }
  .map-container img { max-width: 100vw; margin-left: calc(50% - 50vw); }
  #loghi {
	grid-template-columns: repeat(2, 1fr); gap: 80px; }
  #loghi img,
  #loghiX5 img {
	max-width: 160px;   
	max-height: 80px; }
  #loghiX5 {
	grid-template-columns: repeat(3, 1fr); }
  #coreServices {
	grid-template-columns: repeat(1, 100%); 
	font-size: 23px; }
  #coreServices span {
	padding: 20px 125px;
	border-bottom: 2px dotted #636854;
	border-right: none; }
  #coreServices span:last-child { border-bottom: none; }
  .network {
    width: 94vw;
    max-width: 100vw;
    margin-left: calc(50% - 47vw);
    margin-right: calc(50% - 47vw); }
  .network img {
    width: 100%;
    height: auto;
    display: block; }
  #footer .grid_3 { text-align: left; padding-bottom: 20px; }
  .from-right img, .from-left img { height: auto; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

}

@media only screen and (min-width: 479px) {
	a.servizioPanna, a.servizioVerde { background-image: none !important; }
 }

@media only screen and (max-width: 479px) {
	body { font-size: 16px; line-height: 24px; }
	h1, .h1 {
		font-size:32px;
		line-height:40px;}
	h2, .h2 {
		font-size:28px;
		line-height:40px;}
	.textBig { font-size: 19px; line-height: 31px; font-weight: 400; }
	.capabilities span.h1 { flex: 0 0 110px; }
	.capabilities .textBig { font-size: 20px; line-height: 30px; }
	#loghi {
	  gap: 40px; }
	#loghi img,
	#loghiX5 img {
	  max-width: 120px; }
	#loghiX5 {
	  gap: 40px;
	  grid-template-columns: repeat(2, 1fr); }
	#servizi > a {
	  flex: 0 0 33vw;
	  height: 150px;
	  padding: 18px; }
	#servizi > a span {
	  font-size: 17px;
	  line-height: 21px; }
	#schede img { max-width: 200px; }
	#coreServices { font-size: 20px; }
	#coreServices span {
	  padding: 20px 50px; }
	#scroll-right { display: block; float: left; padding: 7px 0 0 15px; }
	#scroll-right img { width: 50px; }
	#scroll-right div {  display: inline-block; padding: 3px 7px 0 0; }
	a.servizioPanna, a.servizioVerde { background-size: cover; background-position: center; }
	a.servizioPanna span, a.servizioVerde span { color: #fff; }
}