.container-maps {
 padding-top: 12rem;
 padding-left: 0;
 padding-right: 0;
 padding-bottom: 5rem;
 min-height: calc(100vh - 12rem);
}

.maps {
  width: 100%;
  /* height: 710px; */
  margin: 0 auto;
  position: relative;
  padding-top: 50%;
}

.pinpoint {
  position: absolute;
  z-index: 1;
  transform-origin: bottom left;
}

.scrollable-content::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#sumut {
  top: 84%;
  left: 8%;
}

#riau {
  top: 84%;
  left: 16.5%;
}

#batam {
  top: 80%;
  left: 18%;
}

#jambi {
  top: 83.5%;
  left: 23%;
}

#sumut .bullet {
  background-color: #272a68;
}

#riau .bullet {
  background-color: #292974;
}

#batam .bullet {
  background-color: #4378bb;
}

#jambi .bullet {
  background-color: #718dc7;
}

#bengkulu .bullet {
  background-color: #7ebee8;
}

#sumsel .bullet {
  background-color: #589ed1;
}

#lampung .bullet {
  background-color: #95c7d8;
}

#kalbar .bullet {
  background-color: #008081;
}

#kalteng .bullet {
  background-color: #598aad;
}

#kaltim .bullet {
  background-color: #85cfca;
}

#kalsel .bullet {
  background-color: #4f96a2;
}

#banten .bullet {
  background-color: #106735;
}

#jakarta .bullet {
  background-color: #718237;
}

#jabar .bullet {
  background-color: #c4d94c;
}

#jateng .bullet {
  background-color: #669167;
}

#jatim .bullet {
  background-color: #864f9f;
}

#bali .bullet {
  background-color: #c34c8d;
}

#ntb .bullet {
  background-color: #854a1f;
}

#ntt .bullet {
  background-color: #757172;
}

#sulut .bullet {
  background-color: #f16622;
}

#sulteng .bullet {
  background-color: #f8a51b;
}

#sulsel .bullet {
  background-color: #dba628;
}

#sultengg .bullet {
  background-color: #f27423;
}

#maluku .bullet {
  background-color: #df1861;
}

.pinpoint p {
  margin-left: 2.5vw;
  margin-top: 0.5vw;
  margin-bottom: 5vw;
  width: fit-content;
  display: none;
  background: rgba(13,99,102,0.85);
  color: white;
  padding: 0.5rem 1rem;
  /*transition: all 0.5s ease;*/
  line-height: 2rem;
  white-space: nowrap;
}

.map-content {
  margin-left: -0.5vw;
  /* margin-top: -1rem; */
  position: absolute;
  bottom: 0;
  min-height: 1vw;
}

.map-line {
  height: 100%;
  width: 1px;
  border-left: thin solid #888888;
  position: absolute;
  left: 0.5vw;
  top: 0;
  z-index: 0;
}

.expand .bullet {
  background-color: white !important;
}

.bullet {
  width: 1.25vw;
  height: 1.25vw;
  border-radius: 10rem;
  border: thin solid #0d6e71;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  /* margin-bottom: 1rem; */
  animation: beat .5s infinite alternate;
  transform-origin: center;
}

.pinpoint.expand p {
  /*display: block;*/
}

#bengkulu {
  top: 90%;
  left: 27%;
}

#sumsel {
  top: 85%;
  left: 31.5%;
}

#kalbar {
  top: 68.5%;
  left: 36%;
}

#lampung {
  top: 88.5%;
  left: 34%;
}

#kaltim {
  top: 58.5%;
  left: 45%;
}

#jakarta {
  top: 86.5%;
  left: 39.5%;
}

#jabar {
  top: 87.5%;
  left: 41%;
}

#banten {
  top: 88.5%;
  left: 38%;
}

#kalsel {
  top: 65.5%;
  left: 47%;
}

#jateng {
  top: 84.5%;
  left: 45%;
}

#jatim {
  top: 79%;
  left: 52%;
}

#bali {
  top: 75%;
  left: 56%;
}

#ntb {
  top: 73%;
  left: 60%;
}

#ntt {
  top: 61%;
  left: 73%;
}

#sulut {
  top: 40%;
  left: 56%;
}

#sulteng {
  top: 50%;
  left: 55%;
}

#sulsel {
  top: 60%;
  left: 58%;
}

#sulsel {
  top: 60%;
  left: 58%;
}

#sultengg {
  top: 54%;
  left: 60%;
}

#maluku {
  top: 33%;
  left: 62%;
}

#kalteng {
  top: 63.5%;
  left: 41%;
}

.pinpoint.expand {
  z-index: 5;
}

@keyframes beat {
  to {
    transform: scale(1.2);
  }
}

.scrollable-content{
  width: 100%;
  /* overflow-x: scroll; */
  margin-top: -10rem;
  min-height: calc(100vh - 26.5rem);
}
.maps img{
  width: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
   .container-maps{
    padding-top: 10rem;
  }
  .scrollable-content{
    margin-top: auto;
    min-height: calc(100vh - 32.5rem);
  }
  .pinpoint p{
    margin-bottom: 6vw;
    font-size: 1vw;
    line-height: 2vw;
  }
}