body{
    margin:0;
    font-family:helvetica;
    font-size:100%;
    background:#fff;
    width:100%;
    min-width:320px;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix {
    clear: both !important;
    float: none !important;
    height: 0 !important;
    // padding: 0;
}
.clearfix::after {
    clear: both !important;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
* html .clearfix {
    height: 1%;
}
:first-child + html .clearfix {
    min-height: 1px;
}
.header{
    width:100%;
    height:auto;
    background-size:contain;
}
.content{
   margin:11% 0;
   padding:0 3%;
   width:100%;
   position:relative; 
}
.mid_circle{
    width:100%;
    text-align: center;
    position:relative;
    z-index: 2;
    overflow:hidden;
    -webkit-animation: scalemid 1s ease; /* Safari 4+ */
    -moz-animation:    scalemid 1s ease; /* Fx 5+ */
    -o-animation:      scalemid 1s ease; /* Opera 12+ */
    animation:         scalemid 1s ease; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes scalemid {
  0%   { 
        -ms-transform: scale(0,0); /* IE 9 */
        -webkit-transform: scale(0,0); /* Chrome, Safari, Opera */
        transform: scale(0,0);
        opacity: 0;
   }
  100% { 
        -ms-transform: scale(1,1); /* IE 9 */
        -webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
        transform: scale(1,1);
        opacity: 1;
    }
}

.mid_circle img{
    width:80%;
}
.rol_image{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left:0px;
    right:0px;
    z-index: 3;
}

@-webkit-keyframes relawan { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes relawan { from { opacity:0; } to { opacity:1; } }
@keyframes relawan { from { opacity:0; } to { opacity:1; } }

.rol_image img {
  position: absolute;
  width:9%;
  cursor:pointer;
  opacity:0;
  opacity: 1 \9; /*just in case ie*/
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;  

}
.rol_image img:hover{
    -ms-transform: scale(1.5,1.5); /* IE 9 */
    -webkit-transform: scale(1.5,1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5,1.5);
    z-index: 8;
}
.rlim1{top: -12%;  right: 45%;}
.rlim2{top: -7%; right: 34%;}
.rlim3{top: 0%; right: 24%;}
.rlim4{top: 10%; right: 16%;}
.rlim5{top: 23%; right: 11%;}
.rlim6{top: 38%; right: 8%;}
.rlim7{top: 54%; right: 9%;}
.rlim8{top: 68%; right: 13%;}
.rlim9{top: 81%; right: 19%;}
.rlim10{top: 90%; right: 27%;}
.rlim11{top: 94%; right: 38%;}
.rlim12{top: 94%; right: 50%;}
.rlim13{top: 91%; right: 61%;}
.rlim14{top: 82%; right: 70%;}
.rlim15{top: 70%; right: 77%;}
.rlim16{top: 55%; right: 82%;}
.rlim17{top: 39%; right: 83%;}
.rlim18{top: 23%; right: 81%;}
.rlim19{top: 10%; right: 75%;}
.rlim20{top: -3%; right: 66%;}
.rlim21{top: -10%; right: 56%;}

.rlim1, .rlim2, .rlim3, .rlim4, .rlim5, .rlim6, .rlim7, .rlim8, .rlim9, .rlim10, .rlim11, .rlim12, .rlim13, .rlim14, .rlim15, .rlim16, .rlim17, .rlim18, .rlim19, .rlim20, .rlim21{
  -webkit-animation: relawan ease-in 1; /* Safari 4+ */
  -moz-animation:    relawan ease-in 1; /* Fx 5+ */
  -o-animation:      relawan ease-in 1; /* Opera 12+ */
  animation:         relawan ease-in 1; /* IE 10+, Fx 29+ */
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
   -webkit-animation-duration:0.5s;
  -moz-animation-duration:0.5s;
  animation-duration:0.5s;
}

.rlim1, .rlim21, .rlim2{
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.rlim3, .rlim20{
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.rlim4, .rlim19{
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.rlim5, .rlim18{
  -webkit-animation-delay: 1.9s;
  -moz-animation-delay: 1.9s;
  animation-delay: 1.9s;
}
.rlim6, .rlim17{
  -webkit-animation-delay: 2.1s;
  -moz-animation-delay: 2.1s;
  animation-delay: 2.1s;
}
.rlim7, .rlim16{
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  animation-delay: 2.4s;
}
.rlim8, .rlim15{
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}
.rlim9, .rlim14{
  -webkit-animation-delay: 3.4s;
  -moz-animation-delay: 3.4s;
  animation-delay: 3.4s;
}
.rlim10, .rlim13{
  -webkit-animation-delay: 3.9s;
  -moz-animation-delay: 3.9s;
  animation-delay: 3.9s;
}
.rlim11, .rlim12{
  -webkit-animation-delay: 4.3s;
  -moz-animation-delay: 4.3s;
  animation-delay: 4.3s;
}
.infog_img{
    position:absolute;
    top: 25%;
    left: 25.6%;
    width: 44%;
    -webkit-animation: jokowi 1.5s ease; /* Safari 4+ */
    -moz-animation:    jokowi 1.5s ease; /* Fx 5+ */
    -o-animation:      jokowi 1.5s ease; /* Opera 12+ */
    animation:         jokowi 1.5s ease; /* IE 10+, Fx 29+ */
    opacity:1;
}
.anim_mid{
    -webkit-animation: fadeinmid 0.8s ease-in; /* Safari 4+ */
    -moz-animation:    fadeinmid 0.8s ease-in; /* Fx 5+ */
    -o-animation:      fadeinmid 0.8s ease-in; /* Opera 12+ */
    animation:         fadeinmid 0.8s ease-in; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes fadeinmid {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes jokowi {
  0%   { 
    opacity: 0;
    -ms-transform: scale(0,0); /* IE 9 */
    -webkit-transform: scale(0,0); /* Chrome, Safari, Opera */
    transform: scale(0,0);
  }
  100% { 
    opacity: 1; 
    -ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
    transform: scale(1,1);
  }
}

img.ns {
    -ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
    transform: scale(1,1);
}
img.select {
    -ms-transform: scale(1.4,1.4); /* IE 9 */
    -webkit-transform: scale(1.4,1.4); /* Chrome, Safari, Opera */
    transform: scale(1.4,1.4);
    z-index: 100;
}

.infog_img .fullImage{
    position:relative;
    z-index: -1;
    width:100%;
}
.mid_circle .mov_bg{
    position: absolute;
    width: 50%;
    top: 24%;
    left: 24%;
    height: 42%;
    background: url(images/bg_jempol.png) no-repeat 0 -2%;
    background-size: 100%;
    z-index: -2;
    opacity: 0;
    -webkit-animation: fadein 2s infinite; /* Safari 4+ */
    -moz-animation:    fadein 2s infinite; /* Fx 5+ */
    -o-animation:      fadein 2s infinite; /* Opera 12+ */
    animation:         fadein 2s infinite; /* IE 10+, Fx 29+ */
    -webkit-animation-delay: 1s;
    -moz-animation-delay:1s;
    animation-delay: 1s;
}
.mid_circle .mov_bg img{
    position:absolute;
    top:0;
    -webkit-animation-delay: 4.5s;
    -moz-animation-delay:4.5s;
    animation-delay: 4.5s;
    opacity:0;
}
.mid_circle .mov_bg img.hand1{
    left: 24%;
    width: 10%;
    top: 47%;
    -webkit-animation: hand1 1s infinite; /* Safari 4+ */
    -moz-animation:    hand1 1s infinite; /* Fx 5+ */
    -o-animation:      hand1 1s infinite; /* Opera 12+ */
    animation:         hand1 1s infinite; /* IE 10+, Fx 29+ */
}
.mid_circle .mov_bg img.hand2{
    left: 21%;
    width: 11%;
    top: 12%;
    -webkit-animation: hand2 2s infinite; /* Safari 4+ */
    -moz-animation:    hand2 2s infinite; /* Fx 5+ */
    -o-animation:      hand2 2s infinite; /* Opera 12+ */
    animation:         hand2 2s infinite; /* IE 10+, Fx 29+ */
}
.mid_circle .mov_bg img.hand3{
    left: 87%;
    width: 14%;
    top: 10%;
    -webkit-animation: hand3 4s infinite; /* Safari 4+ */
    -moz-animation:    hand3 4s infinite; /* Fx 5+ */
    -o-animation:      hand3 4s infinite; /* Opera 12+ */
    animation:         hand3 4s infinite; /* IE 10+, Fx 29+ */
}
.mid_circle .mov_bg img.hand4{
    left: 69%;
    width: 18%;
    top: 43%;
    -webkit-animation: hand4 3s infinite; /* Safari 4+ */
    -moz-animation:    hand4 3s infinite; /* Fx 5+ */
    -o-animation:      hand4 3s infinite; /* Opera 12+ */
    animation:         hand4 3s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes fadein {
  0%   { opacity: 0.1; }
  50% { opacity: 0.5; }
  100% { opacity: 0.1; }
}
@-webkit-keyframes hand1 {
  0%   { top: 47%;opacity: 1; }
  50% { top: 50%;opacity: 1; }
  100% { top: 47%;opacity: 1; }
}
@-webkit-keyframes hand2 {
  0%   { transform:rotateZ(0deg);left: 21%;opacity: 1; }
  50% { transform:rotateZ(12deg);left: 24%;opacity: 1; }
  100% { transform:rotateZ(0deg);left: 21%;opacity: 1; }
}
@-webkit-keyframes hand3 {
  0%   { transform:rotateZ(0deg);left: 87%;opacity: 1; }
  50% { transform:rotateZ(12deg);left: 90%;opacity: 1; }
  100% { transform:rotateZ(0deg);left: 87%;opacity: 1; }
}
@-webkit-keyframes hand4 {
  0%   { top: 43%;opacity: 1; }
  50% { top: 30%;opacity: 1; }
  100% { top: 43%; opacity: 1;}
}
.header img, .footer img{ width:100%; }
.detail_text{
    position: absolute;
    bottom: 20%;
    left: 21%;
    width: 58%;
    min-height: 90px;
    z-index: -1;
    color: #333333;
    padding: 4% 10% 0 10%;
    font-size: 0.9em;
    line-height: 140%;
    display: none;
}
.detail_text #name_id{
    font-size:1.2em;
    font-weight:bold;
    line-height:150%;
    display:block;
}

.rlim_add{
    top: 20%;
    left: 35.6%;
    width: 30%;
}
.text_info{
  text-align: center;
  width:100%;
  margin:5% 0;
  color:#686868;
  font-size:0.9em;
}
.tooltipsy{
    padding:5px 10px;
    border-radius:5px;
    max-width: 250px;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    font-size: 0.5em;
    font-weight:bold;
    text-align: center;
}
@media screen and (max-width: 500px) {
  .tooltipsy{display:none;}
  .detail_text{
      bottom: 21%;
      padding: 2% 11% 0;
      height:auto;
      font-size: 11px;
      background:rgba(255,255,255,0.8); 
      min-height:auto;
    }
    #name_id{
      font-size:12px;
    }
    .mid_circle img {
        z-index: 5;
        position: relative;
    }
    .rlimtxt{
    }
}