@font-face {
  font-family: 'Proto Grotesk';
  src: local('☺️'),
      url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.woff2') format('woff2'),
      url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.woff') format('woff'),
      url('https://static.istories.media/public/fonts/Proto Grotesk-Regular-Web.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proto Grotesk';
  src: local('☺️'),
      url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.woff2') format('woff2'),
      url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.woff') format('woff'),
      url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
html {
      width: 100%;
      height: 100%;
      overflow:  hidden;
      }

.regionName {
  fill: white;
  font: normal 0.9vw "Proto Grotesk";
}

.buttonGrid {
  width: 20%;
  height: 30px;
  background-color:#262626;
  display: inline-block;
  color: white;
  opacity: 80%;
  font: normal 1.2vw "Proto Grotesk";
}
.buttonGeo1{
  width: 12%;
  height: 6%;
  background-color:#262626;
  display: inline-block;
  color: white;
  opacity: 50%;
  font: normal 1.2vw "Proto Grotesk";
  border-radius: 5px;
}

.buttonGeo1:hover{background-color:#262626;opacity: 80%;}
.buttonGeo2:hover{background-color:#262626;opacity: 80%;}
.buttonGeo3:hover{background-color:#262626;opacity: 80%;}


.buttonGeo2{
  width: 12%;
  height: 6%;
  background-color:#262626;
  display: inline-block;
  color: white;
  opacity: 50%;
  font: normal 1.2vw "Proto Grotesk";
  border-radius: 5px;
}

.buttonGeo3{
  width: 12%;
  height: 6%;
  background-color:#262626;
  display: inline-block;
  color: white;
  opacity: 50%;
  font: normal 1.2vw "Proto Grotesk";
  border-radius: 5px;
}

.maintitle{
  font: normal 2.3vw "Proto Grotesk";
  color: #635F5D;
}



.label{
  font: normal 1vw "Proto Grotesk";
}

.legendTitle{
  font: normal 1.2vw "Proto Grotesk";

  fill: #635F5D;
}

.tooltip {
  position: absolute;
  font: normal 1.3vw "Proto Grotesk";
  background-color:#262626;
  color: white;
  border-radius: 5px;
  pointer-events: none;
  width: auto;
  height: auto;
  text-align: center;
  padding:  0.5% 0.5%;
}
.caption{
  font: normal 1.2vw "Proto Grotesk";
  fill: #635F5D;
}
.source{
  font: normal 1.2vw "Proto Grotesk";
  fill: #635F5D;
}
.title {
        font: normal 20px "Proto Grotesk";
        fill: #676767;
        font-size: 2.4vw
    }

.title2 {
        font: normal 27px "Proto Grotesk";
        fill: #676767;
        font-size: 1.9vw
    }