.ikon {
    position: relative; 
    max-width: 100%;
    align-items: center;
    justify-content: center;
    top:0px;
}

.main-beranda{
  width: 100vw;
  
}

.ikon-kc{
  width: 20vw;
  height: auto;
  position: relative;
  margin-top: 2.5%;
}


.ikon-kc-txt{
  font-size: 2.3em;
  position: relative;
  padding-top:10%;
}


.ikon-kc-dsc{
  font-size: 1.5em;
}


@media screen and (width<=720px){
  .ikon-kc-txt{
    font-size: 1.0em;
    position: relative;
    padding-top:10%;
  }

  .ikon-kc-dsc{
    font-size: 0.5em;
  }
}


.ikon::before {    
      content: "";
      background-image: url('https://bebandem.karangasemkab.go.id/admin/assets/images/gambarberanda/553-gedung kantor.jpg');
      background-size: cover;
      background-position:center;
      background-repeat: no-repeat;
      width: 100%;
      height: auto;
      padding: 0pt !important;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.4;
}

.carousel-control-prev{
    filter: invert(100%);
}

.carousel-control-next{
    filter: invert(100%);
}

.fade-in {
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
  }
  
  .fadeIn{animation:fadeIn 1s ease backwards;}
  @keyframes fadeIn{
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
      }
  }
  
  @-moz-keyframes fadeIn {
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
      }
  }
  
  @-webkit-keyframes fadeIn {
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
    }
  }
  
  @-o-keyframes fadeIn {
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
    }
  }
  
  @-ms-keyframes fadeIn {
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
      }
  }