@font-face {
  font-family: neoneon;
  src: url(../font/Neoneon-3zaD6.otf);
}

body{
  margin:0;
}

.modal-backdrop
{
    opacity:0.8 !important;
}

#main-body{
  height: 100vh;
  background: linear-gradient(0deg, #EAE9DF 0%, #C6EAE8 100%) fixed;
  /*background: linear-gradient(0deg, #4a5e7b 0%, #0b2449 100%) fixed;*/
  z-index: 1;
}

#div-jalan{
  position: fixed;
  bottom: 0;
  background-image: url('../img/image/jalan.png');
  width: 100%;
  height: 51px;
  z-index: 1;
}

#gedung-tengah{
  position: fixed;
  bottom: 41px;
  background-image: url('../img/image/gedung-tengah.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

#gedung-samping{
  position: fixed;
  bottom: 0px;
  background-image: url('../img/image/gedung-samping.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.panel-frm1{
  cursor: pointer;
  position: relative;
  padding: 30px;
  background: rgb(255, 255, 255, 0.8);
  border-radius: 10px;
  border: 1px solid #dbdbdb;
  z-index: 99;
  height: 150px;
  margin-bottom: 30px;
}

.panel-modal-frm1{
  width: 100%;
  cursor: pointer;
  padding: 20px;
  background: rgb(255, 255, 255, 1);
  border-radius: 5px;
  border: 1px solid #dbdbdb;
  z-index: 99;
  text-decoration: none;
  list-style: none;
  color: #555555;
  font-weight: bold;
  margin-bottom: 25px;
}

.panel-modal-frm1:hover{
  text-decoration: none;
  list-style: none;
  color: #00923f;
}

.panel-modal-frm1-danger{
  cursor: pointer;
  height: 50px;
  width: 50px;
  border-radius: 70px;
  z-index: 99;
  text-decoration: none;
  list-style: none;
  color: #eaeaea;
  font-weight: bold;
  margin-bottom: 25px;
  font-size: 30pt;
}

.panel-frm1:hover{
  background: rgb(255, 255, 255, 0.4);
}

.header-frm1{
  color: #212C4F;
  font-weight: bold;
  font-size: 10pt;
  display: block;
  line-height: 1;
}

.body-frm1{
  color: rgba(33, 44, 79, 0.7);
  font-size: 9pt;
  display: block;
  line-height: 1.5;
}

.img-provider{
  z-index: 999;
  filter: grayscale(100%);
  opacity: 0.5;
}

.img-provider:hover{
  z-index: 999;
  filter: grayscale(0%);
  opacity: 1;
}

.img-frm1{
  position: absoute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  vertical-align: middle;
}

.portal-link{
  text-decoration: none;
  list-style: none;
}

.portal-link:hover{
  text-decoration: none;
  list-style: none;
}

.body-gradient-animate {
    background: linear-gradient(-35deg, rgba(255, 255, 255, 0.7), rgba(191, 191, 191, 0.9), rgba(255, 255, 255, 0.7), rgba(191, 191, 191, 0.9));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    border: none;
}

@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

@import url('animate.min.css');

.bg-faded{background-color:#f3f3f3;max-height:500px}
.btn-round{border-radius:500px}
.btn-round,.btn-round:hover,.btn-round:active{border-color:transparent}
.modal.animate {opacity:0}
.modal.animate.show {opacity:1}
.modal.animate .modal-dialog{-webkit-transform:translate(0,0);-ms-transform: translate(0,0);transform:translate(0,0)}
.modal.animate .a-fadeLeftBig{-webkit-animation:fadeOutLeftBig .5s;animation:fadeOutLeftBig .5s}
    .modal.animate.show .a-fadeLeftBig{-webkit-animation:fadeInLeftBig .5s;animation:fadeInLeftBig .5s}
.modal.animate .a-fadeRightBig{-webkit-animation:fadeOutRightBig .5s;animation:fadeOutRightBig .5s}
    .modal.animate.show .a-fadeRightBig{-webkit-animation:fadeInRightBig .5s;animation:fadeInRightBig .5s}
.modal.animate .a-fadeUpBig{-webkit-animation:fadeOutUpBig .5s;animation:fadeOutUpBig .5s}
    .modal.animate.show .a-fadeUpBig{-webkit-animation:fadeInUpBig .5s;animation:fadeInUpBig .5s}
.modal.animate .a-fadeDownBig{-webkit-animation:fadeOutDownBig .5s;animation:fadeOutDownBig .5s}
	.modal.animate.show .a-fadeDownBig{-webkit-animation:fadeInDownBig .5s;animation:fadeInDownBig .5s}
.modal.animate .a-fadeRight{-webkit-animation:fadeOutRight .5s;animation:fadeOutRight .5s}
	.modal.animate.show .a-fadeRight{-webkit-animation:fadeInRight .5s;animation:fadeInRight .5s}
.modal.animate .a-fadeLeft{-webkit-animation:fadeOutLeft .5s;animation:fadeOutLeft .5s}
	.modal.animate.show .a-fadeLeft{-webkit-animation:fadeInLeft .5s;animation:fadeInLeft .5s}
.modal.animate .a-fadeUp{-webkit-animation:fadeOutUp .5s;animation:fadeOutUp .5s}
	.modal.animate.show .a-fadeUp{-webkit-animation:fadeInUp .5s;animation:fadeInUp .5s}
.modal.animate .a-fadeDown{-webkit-animation:fadeOutDown .5s;animation:fadeOutDown .5s}
    .modal.animate.show .a-fadeDown{-webkit-animation:fadeInDown .5s;animation:fadeInDown .5s}
.modal.animate .a-lightSpeed{-webkit-animation:lightSpeedOut .5s;animation:lightSpeedOut .5s}
    .modal.animate.show .a-lightSpeed {-webkit-animation:lightSpeedIn .5s;animation: lightSpeedIn .5s}
.modal.animate .a-flipX{-webkit-animation:flipOutX .5s;animation:flipOutX .5s}
	.modal.animate.show .a-flipX{-webkit-animation:flipInX .5s;animation:flipInX .5s}
.modal.animate .a-flipY{-webkit-animation:flipOutY .5s;animation:flipOutY .5s}
	.modal.animate.show .a-flipY{-webkit-animation:flipInY .5s;animation:flipInY .5s}
.modal.animate .a-roll{-webkit-animation:rollOut .5s;animation: rollOut .5s}
	.modal.animate.show .a-roll{-webkit-animation:rollIn .5s;animation:rollIn .5s}
.modal.animate .a-bounce{-webkit-animation:bounceOut .5s;animation:bounceOut .5s}
	.modal.animate.show .a-bounce{-webkit-animation:bounceIn .5s;animation:bounceIn .5s}
.modal.animate .a-rotate{-webkit-animation:rotateOut .5s;animation:rotateOut .5s}
	.modal.animate.show .a-rotate{-webkit-animation:rotateIn .5s;animation:rotateIn .5s}
.modal.animate .a-zoom{-webkit-animation:zoomOut .5s;animation:zoomOut .5s}
	.modal.animate.show .a-zoom{-webkit-animation:zoomIn .5s;animation:zoomIn .5s}
.modal.animate .a-zoomUp{-webkit-animation:zoomOutUp .5s;animation:zoomOutUp .5s}
	.modal.animate.show .a-zoomUp{-webkit-animation: zoomInUp .5s;animation:zoomInUp .5s}
.modal.animate .a-zoomRight {-webkit-animation: zoomOutRight .5s;animation:zoomOutRight .5s}
	.modal.animate.show .a-zoomRight{-webkit-animation: zoomInRight .5s;animation:zoomInRight .5s}
.modal.animate .a-zoomDown{-webkit-animation:zoomOutDown .5s;animation:zoomOutDown .5s}
	.modal.animate.show .a-zoomDown{-webkit-animation:zoomInDown .5s;animation:zoomInDown .5s}
.modal.animate .a-zoomLeft{-webkit-animation:zoomOutLeft .5s;animation:zoomOutLeft .5s}
	.modal.animate.show .a-zoomLeft{-webkit-animation:zoomInLeft .5s;animation:zoomInLeft .5s}