:root{
   --before-gambar: url("https://selat.karangasemkab.go.id/admin/assets/images/gambarberanda/89-Fasilitas-Pura-Pasar-Agung.jpg");
}

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


@keyframes slide-in {
  from {
    translate: 150vw 0;
    scale: 200% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

.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: var(--before-gambar);
      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;
      animation: 10s infinite alternate fade;
}

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

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


.fade {
  animation-name: fade;
  animation-duration: 9.0s;
}

@keyframes fade {
  from {opacity: 1.0}
  to {opacity: 0.4}
  
}

.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;
      }
  }