#mapid {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}

@media (width <768px) {
  #mapid {
    height: 300px;
    width: 100%;
    border-radius: 5px;
  }
}

@font-face {
  font-family: "BebasNeue Regular";
  font-style: normal;
  font-weight: 400;
  src: url("/css/font/BebasNeue-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Prompt LightItalic";
  font-style: normal;
  font-weight: 300;
  src: url("/css/font/Prompt-LightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "Prompt Regular";
  font-style: normal;
  font-weight: 400;
  src: url("/css/font/Prompt-Regular.ttf") format("truetype");
}

h1,
h2 {
  font-family: "BebasNeue Regular";
  font-style: normal;
  font-size: 200%;
}

h3,
h4 {
  font-family: "Prompt Regular";
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 180%;
}

p,
.specialn1-text {
  font-family: "Prompt LightItalic";
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 150%;
}

.special-btn-formulaire {
  font-family: "Prompt LightItalic";
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 100%;
}

/* texte via taille ecran */

@media (max-width: 700px) {
  h1,
  h2 {
    font-size: calc(200% * 0.7);
  }

  h3,
  h4 {
    font-size: calc(180% * 0.7);
  }

  p,
  .specialn1-text {
    font-size: calc(150% * 0.7);
  }

  .special-btn-formulaire {
    font-size: calc(100% * 0.7)
  }
}

@media (min-width: 1400px) {
  h1,
  h2 {
    font-size: 7vh;
  }

  h3,
  h4 {
    font-size: 5.3vh;
  }

  p,
  .specialn1-text {
    font-size: 3.5vh;
  }

  .btn-for-ico {
    font-size: 2.9vh;
  }

  .special-btn-formulaire {
    font-size: 3.5vh;
  }
}