@media (min-width:320px)  { 
  /* smartphones, iPhone, portrait 480x320 phones */ 
  .logo-header{
    width: 30%;
  }
}
@media (min-width:481px)  { 
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
  .logo-header{
    width: 30%;
  }
}
@media (min-width:641px)  { 
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
  .logo-header{
    width: 20%;
  }
}
@media (min-width:961px)  {
  /* tablet, landscape iPad, lo-res laptops ands desktops */ 
  .logo-header{
    width: 100%;
  }
}
@media (min-width:1025px) { 
  /* big landscape tablets, laptops, and desktops */ 
  .logo-header{
    width: 100%;
  }
}
@media (min-width:1281px) { 
  /* hi-res laptops and desktops */ 
  .logo-header{
    width: 100%;
  }
}
.wp-box__icon{
  width: 100% !important;
  height: 100% !important;
}
.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.post-box:hover .post-box__content {
  background: #0f6947 !important;
}
.post-box:hover .post-box__content::after {
  background: #0f6947 !important;
}


#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal-foto {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-foto-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption-foto {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-foto-content, #caption-foto {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close-foto {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-foto:hover,
.close-foto:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-foto-content {
    width: 100%;
  }
}
.skill-boxs .skill-item .progress .progress-bar__4 {
  background: #43fd36;
}
.skill-boxs .skill-item .progress .progress-bar__5 {
  background: #fd36b7;
}
.skill-boxs .skill-item .progress .progress-bar__6 {
  background: #ad36fd;
}
.skill-boxs .skill-item .progress .progress-bar__7 {
  background: #750000;
}
.skill-boxs .skill-item .progress .progress-bar__8 {
  background: #fdf336;
}
.skill-boxs .skill-item .progress .progress-bar__9 {
  background: #3657fd;
}
.skill-boxs .skill-item .bar-title h4{
  margin-bottom: 30px !important;
}
.bg-hijau {
  background-color: #006d19 !important;
}
.service-item__icon--11 {
  background: #f1f1f1;
}
.service-item__icon--potensi {
  background: #fff !important;
}
.service-item__icon {
  flex: 0 0 70px;
  -ms-flex: 0 0 170px;
  max-width: 170px;
  min-height: 70px;
  border-radius: 10px;
}
.padding-potensi{
  padding-left: 5%;
}
@media (max-width: 767px) {
  .service-item__icon {
      /* width: 170px; */
  flex: 0 0 70px;
  -ms-flex: 0 0 170px;
  max-width: 170px;
  min-height: 170px !important;
  border-radius: 10px;
  }
}
.hero__image_sel {
  width: 100%;
}
@media (max-width: 450px) {
  .hero__image_sel {
      display: show !important;
  }
  
}
@media (max-width: 350px) and (min-width:320px)  { 
  /* smartphones, iPhone, portrait 480x320 phones */ 
  .hero__content {
    padding-top: 10px !important;
    padding-bottom: 180px !important;
  }
  .img-lurah{
      max-width: 60% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
}
@media (max-width: 379px) and (min-width:350px)  { 
  /* smartphones, iPhone, portrait 480x320 phones */ 
  .hero__content {
    padding-top: 10px !important;
    padding-bottom: 170px !important;
  }
  .img-lurah{
      max-width: 60% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
}

@media (max-width: 480px) and (min-width:380px)  { 
  /* smartphones, iPhone, portrait 480x320 phones */ 
  .hero__content {
    padding-top: 10px !important;
    padding-bottom: 190px !important;
  }
  .img-lurah{
      max-width: 60% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
}
@media (max-width: 600px) and (min-width:481px)  { 
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
  .hero__content {
    padding-top: 10px !important;
    padding-bottom: 180px !important;
  }
  .img-lurah{
      max-width: 70% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
}
@media (max-width: 854px) and (min-width:641px)  { 
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
  .hero__content {
    padding-top: 10px !important;
    padding-bottom: 350px !important;
  }
  .img-lurah{
      max-width: 70% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
}
@media (max-width: 1125px) and (min-width:961px)  { 
  /* tablet, landscape iPad, lo-res laptops ands desktops */ 
  .hero__content {
    padding-top: 10px !important;
    padding-bottom: 480px !important;
  }
  .img-lurah{
      max-width: 70% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
}
@media (max-width: 1199px) and (min-width:1125px)  { 
  /* tablet, landscape iPad, lo-res laptops ands desktops */ 
  .hero__content {
    padding-top: 10px !important;
    padding-bottom: 350px !important;
  }
  .img-lurah{
      max-width: 70% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
  .hero__content {
      padding-top: 0px;
      padding-bottom: 610px;
  }
}

@media (min-width:1281px) { 
  /* hi-res laptops and desktops */ 
}
/* 
@media (max-width: 1199px) {
  .hero__content {
      padding-top: 90% !important;
      padding-bottom: 0 !important;
  }
  .img-lurah{
      max-width: 70% !important;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
} */
.hero__image_sel {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.hero__content {
    padding-top: 100%;
    padding-bottom: 10px;
}
.img-lurah{
    max-width: 100%;
    height: auto;
}

.nama-kepala {
  font-size: 40px !important;
}
.agenda--details{
  padding: 5% !important;
}
.card-body .agenda-kal{
  padding: 0% !important;
}