:root{
  --jetblack: #012427;
  --porcelain: #fffdf7;
  --pacificcyan: #068d9d;
  --lightcyan: #c4f7fd;
  --pitchblack:#0f0a0a;
  --lightsage: #EEF3E7; /*light sage cream*/
  --cream:#FFFFF0;
  --mediumsage:#BBC3B6;
  --sage:#9AA893;
  --lightstone:#c9bba9;
  --stone:#978671;
  --darkstone:#615648;
  --color: #978671 ;
  --orange:#e0935f;
  --glyc:#DA70D6;
  --wcolor:#42858c;
  --gray:#cccccc;
  --lightgray:#eeeeee;
  --rosso:#dc143c;
  --blu:#1e90ff;
  --verde:#228b22;
  --giallo:#ffd700;
  --space: 1px;
  --spaceL: 2px;
 -webkit-user-select: none; /* Safari */
 -ms-user-select: none; /* IE 10 and IE 11 */
 user-select: none; /* Standard syntax */ 
}

::-moz-selection { /* Code for Firefox */
  color: var(--darkstone);
  background: var(--lightsage);
}

::selection {
  color: var(--darkstone);
  background: var(--lightsage);
}


body{margin:0px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:normal;letter-spacing:var(--space);color:var(--porcelain);text-decoration:none;text-align:left;align-self:center;line-height:1.5;
	max-width:100%;
   will-change: transform; /* Sposta il carico del rendering sulla GPU */
}


.inline{display:inline-block;}
hr {border: none; height: 1px;  background: linear-gradient(to right, var(--lightcyan), transparent); width: 80%;  margin: 0px 10px 0px 20px;}
img.logo{width:5%;max-width:5%;height:auto;}
img.s{border-radius:15px;margin:auto auto;}
img.avatar{width:20%;border-radius:50%;border: 4px solid black;}

.title{font-size:2em;color:var(--porcelain);padding-left:5%;line-height:2.5;background-color:var(--pitchblack);}
.titleD{color:var(--pacificcyan);font-size:2em;background-color:var(--pitchblack);}
.minititle{padding:0px -100px 0px 0px;margin-top:0px;font-size:0.8em;letter-spacing:8px;line-height:1;text-transform:uppercase;color:#ffffff;background-color:var(--pitchblack);}

.matterpanel{width:99%;display:inline-block;}
.mattercontent{width:70%;margin:2% 5%;padding:2%;border:0px solid yellow;}

.leftbox{float: left;  width: 40%;  padding:2% 5%; border:none;border-right:5px double var(--porcelain); text-align:right;}
.rightbox{float: right;  width: 40%; padding:2% 5%; border:none;border-left:5px double var(--pacificcyan);}


.hightlightsolid{border-radius: 15px;
opacity: 1;background-image: linear-gradient(rgba(6, 141, 157, 0.2) 1px, transparent 1px), linear-gradient(to right, rgba(6, 141, 157, 0.3) 1px, var(--pitchblack) 1px);background-size: 35px 35px;}




div.glass{
background: rgba(6, 141, 157, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(196, 247, 253, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(6, 141, 157, 0.3);
}

.info{float:left;width:100%;padding:3%;}


fieldset{border: 0px dotted #ffffff;}
input[type=text], input[type=password], select, textarea, button, button[type=submit] {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1em;
}
button {cursor:hand;}


h1, .h1em{display:inline-block;margin:0%;margin-top:3%; margin-left:3%;font-size:3.5em;text-align:inherit;font-weight:normal;text-decoration:none;line-height:1.5;}
h2, .h2em{display:inline-block;margin:0%;margin-top:0%;font-size:1.5em;text-align:left;font-weight:normal;text-decoration:none;text-transform:uppercase;   color: var(--pacificcyan); background-color: var(--lightcyan);background-image: linear-gradient(to top left, var(--pacificcyan), var(--lightcyan));-webkit-background-clip: text;  background-clip: text; -webkit-text-fill-color: transparent; contain: layout;}
h3, .h3em{display:inline-block;margin:0%;margin-top:0%;font-size:2em;text-align:left;font-weight:normal;text-decoration:none;text-transform:uppercase;   color: var(--pacificcyan);  background-color: var(--lightcyan);background-image: linear-gradient(to top left, var(--pacificcyan), var(--lightcyan));-webkit-background-clip: text;  background-clip: text; -webkit-text-fill-color: transparent; contain: layout;}
h4, .h4em{display:inline-block;margin:0%;margin-top:0%;font-size:1em;text-align:left;font-weight:normal;text-decoration:none;text-transform:uppercase;    color: var(--pacificcyan); background-color: var(--lightcyan);background-image: linear-gradient(to top left, var(--pacificcyan), var(--lightcyan));-webkit-background-clip: text;  background-clip: text; -webkit-text-fill-color: transparent; contain: layout;}


.sottotitolo-h1{width:70%;font-size:1.8em;float:right;}
.sottotitolo-h2{font-size:1.5em;}
.occhiello{font-size:1.5em;color:var(--pitchblack);background-color:var(--lightcyan);text-transform:uppercase;}
.document{max-width:50%;text-align:justify;hyphens: auto;}

.link0 {display: inline-block;color: var(--pitchblack); padding: 0% 2%;text-decoration: none; background-color: var(--lightcyan);background-image: linear-gradient(to right, var(--lightcyan), var(--pacificcyan));border-radius:15px;border:none;}
.link0:hover {}
.link0.active {background-color: var(--pacificcyan); color: var(--porcelain);}

.link1 {display: inline-block;color: var(--pitchblack); padding: 1% 2%;text-decoration: none; background-color: var(--lightcyan); color: var(--pacificcyan); background-image: linear-gradient(to right, var(--lightcyan), var(--pacificcyan));-webkit-background-clip: text;  background-clip: text; -webkit-text-fill-color: transparent;  color: transparent;}
.link1:hover {}
.link1.active {background-color: var(--pacificcyan); color: var(--porcelain);}

.link2 {display: inline-block;color: var(--porcelain); padding: 1% 2%;text-decoration: none;}
.link2:hover {color:var(--lightcyan);}
.link2.active {background-color: var(--pacificcyan); color: var(--porcelain);}

.legalnote{font-size:0.8em;color: rgba(196, 247, 253, 1);}

.dot {
  height: 20px;
  width: 20px;
  padding:1%;
  border: 1px solid var(--porcelain);
  background-color:var(--porcelain);
  text-align:center;
  border-radius: 15px;
  display: inline-block;
}
.filledL{background-image: linear-gradient(to left, var(--pitchblack) 35%, rgba(196, 247, 253, 1) );border-radius:15px;}
.filledR{background-image: linear-gradient(to right, var(--pitchblack) 35%, rgba(196, 247, 253, 1) );border-radius:15px;}

.vline{width:2%;float:left; padding:0%; border:0px solid red;}
.line{width:90%;display:inline-block; padding:1%; border:0px solid yellow;}

.row { margin: 0%;}

/* Add padding BETWEEN each column (if you want) */
.row, .row > .column {}

/* Create four equal columns that floats next to each other */
.column { float: left; width: 22%; margin-right:2%; border:1px solid var(--pacificcyan); border-radius:15px;

}

.column30 {
  float: left;
  width: 30%;
}

.column50 {
  float: left;
  width: 41%;
  padding:2%;
  margin-right:5%;
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {background-color: var(--pitchblack);padding:20% 6%;border-radius:10%;color:var(--porcelain);}
.content30{padding: 8%;}


.papers, .papers:before, .papers:after  {
  background-color: var(--cream);
  border: 1px solid var(--mediumsage);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.4);
}

.papers  {
  position: relative;
  width: 60%;
  padding: 4em;
  margin: 50px auto;
  z-index: +1;
}

.papers:before, .papers:after  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateZ(2.5deg);
  -o-transform: rotate(2.5deg);
  transform: rotateZ(2.5deg);
  z-index: -1;
}

.papers:after  {
  -webkit-transform: rotateZ(-2.5deg);
  -o-transform: rotate(-2.5deg);
  transform: rotateZ(-2.5deg);
}

.papers h3, h4  {
  font-family:Georgia;
  font-size: 1.3em;
  font-weight: normal;
  text-align: center;
  padding: 0.6em ;
  margin: 0;
}

.papers h3  {
  font-size: 1.5em;
}

.pinco{margin-top:-236px;}
.icon-bar {top: 50%; left:0; width:48px; height:240px; position: sticky; overflow: hidden;z-index:69;}
.icon-bar img {width: 30px;  height: 30px; display: inline-block;  vertical-align: middle;}
.icon-bar a { display: block; text-align: center; padding: 9px 3px; transition: all 0.3s ease; color: white;}
.icon-bar a:hover {background-image:none;background-color: #000;}
.facebook { background: #3b5998; color: white;}
.instagram { background-image: conic-gradient(#515bd4, #8134af,#dd2a7b, #ffda77, #f58529); color: white;}
.whatsapp { background: #25D366; color: white;}
.linkedin { background: #0072b1; color: white;}
.youtube { background: #FF0000; color: white;}

.topnav {top:0;left:0;width:98%;position: sticky; overflow: hidden;background-color:var(--pitchblack);}
.topnav a {float: right;display: block; color: var(--porcelain); padding: 25px 2px 15px 4%; text-decoration: none; font-size:1em;border-bottom: 1px solid var(--pacificcyan);}
.topnav a:hover {border-bottom: 1px solid var(--lightcyan);}
.topnav a.active {background-color: var(--pacificcyan); color: var(--porcelain);}
.topnav .icon { display: none; font-size:3em;border:none;color:var(--pacificcyan);}
.topnav .icon:hover {border:none; color:var(--lightcyan);}

/* Main content */
.primo {
  margin-top: 15%; /* Add a top margin to avoid content overlay */
}
.noborder{border:none;}
.bordered{border: 1px solid var(--lightcyan); border-radius:15px;border-bottom:none;}
.slim{padding:1%;}
.negativefontcolor{color:var(--pitchblack);}
.negativefontcolor:hover {color:var(--pitchblack);}
.negativefontcolor:active {color:var(--pitchblack);}

@media screen and (max-width: 900px) {
body{background-position:0% 0%;background-image: none; font-size:small;}

img.logo{width:20%;max-width:20%;height:auto;}
img.main {min-width:90%;max-width:90%;height:auto;}

  .mattercontent, leftbox, rightbox, .column, .column30, .column50, .sottotitolo-h1, .info, .document {width: 90%; float:left; padding:4%; padding-left:5%;}
.filledL{background-image: linear-gradient(to left, var(--pitchblack) 90%, rgba(196, 247, 253, 0.6) );border-radius:15px;}
.filledR{background-image: linear-gradient(to right, var(--pitchblack) 90%, rgba(196, 247, 253, 0.6) );border-radius:15px;}

  .content{padding:6%;}
  .papers {padding:2em;}

  .primo {margin-top:10%;}
  .topnav a:not(.icon) {float:left;width:90%;display: none;}
  .topnav a.icon { display: block; }
  .topnav.responsive { position: sticky;overflow: hidden;}
  .topnav.responsive a:not(.icon) {display: block; }
  
}