* {
  font-family: "Lagu Sans", sans-serif;
  margin: 0px;
  padding:0;
}

body, html {

}

#triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #333;
  transform: rotate(-45deg);
  position: absolute;
  pointer-events: none;
  top: 0px;
  left: 0px;
  z-index: 9999999999999999;
}
#consumption-bar-container {
  width: 100%;
  background-color: #fafafa;
  height: 20px;
  margin-top: 14px;
  margin-bottom: 32px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #aaa;
}
#consumption-bar {
  height: 100%;
  background-color: #ccc;
  width: 0%;
  transition: width 0.3s;
}
h1 {
  position: absolute;
  z-index: 10;
  padding: 0;
  margin: 0;
  top: 63px;
  left: 70px;
  font-weight: 800;
}

#mapa {
  position: absolute;
  top: -50px;
  left: 430px;
  height: 1100px;
}
#contexto {
  position: absolute;
  top: 217px;
  left: 73px;
  pointer-events: none;
  z-index: 999;
}
#contexto.hidden {
  opacity: 0;
  transform: scale(0.9);
}
.estática {
  max-width: 55%;
  height: auto;
}


#info-box {
  opacity: 1;
  position: absolute;
  left: 60px;
  top: 262px;
  width: 508px;
  padding: 10px;
  display: none;
  z-index: 10;
  transition: opacity 1s 1s;
}
#consumption-bar-container .tick-label {
  position: absolute;
  font-size: 12px;
  color: black;
  margin-top: 5px;
}
#consumption-bar-container .tick-label-0 {
  left: 2%;
}
#consumption-bar-container .tick-label-10 {
  left: calc(2% + (10 / 60) * (92% - 2%));
}
#consumption-bar-container .tick-label-20 {
  left: calc(2% + (20 / 60) * (92% - 2%));
}
#consumption-bar-container .tick-label-30 {
  left: calc(2% + (30 / 60) * (92% - 2%));
}
#consumption-bar-container .tick-label-40 {
  left: calc(2% + (40 / 60) * (92% - 2%));
}
#consumption-bar-container .tick-label-50 {
  left: calc(2% + (50 / 60) * (92% - 2%));
}
#consumption-bar-container .tick-label-60 {
  left: 92%;
}


footer {
  position: absolute;
  top: 883px;
  left: 72px;
}

#region-name {
  font-size: 130%;
  margin-bottom: 5px;
}

#region-info {
  
}