@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-Heavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-HeavyItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "TIM Sans";
  src: url("TIM SANS/TrueType TIM Sans def/TIMSans-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: "TIM Sans", Arial, sans-serif;
}

/* Header fisso */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 55px;
  width: 100%;
  color: #ffffff;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: lighter;
  z-index: 1000;
  overflow: hidden;
}

.top-header-logo {
  position: absolute;
  right: 0;
  bottom: 0;
  max-height: 100%;
  padding-right: 22px;
  width: auto;
}

.top-header-content {
  --left-top: #774B98;
  --left-bottom: #674C9A;
  --right-top: #C82E4C;
  --right-bottom: #B84176;

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
  padding-left: 22px;
  background-image:
    url("Striscia_Montagna.png"),
    linear-gradient(180deg, var(--left-top) 0%, var(--left-bottom) 100%),
    linear-gradient(180deg, var(--right-top) 0%, var(--right-bottom) 100%);
  background-position:
    center center,
    left top,
    right top;
  background-size: auto 100%, 50% 100%, 50% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Mappa sotto l'header */
#map {
  margin-top: 49px;
  height: calc(100vh - 49px);
  width: 100%;
}