body {
    font-size: 1.2rem;
    /* min-height: 4000px; */
    overflow-x: hidden;
    overflow-y: hidden;
}


@font-face {
    font-family: brushscript;
    src: url(font/BrushScriptStd.otf);
}
@font-face {
    font-family: tiranti;
    src: url(font/TirantiSolidStd.otf);
}
@font-face {
    font-family: bodoni;
    src: url(font/Bodoni_Bk_BT_Book.otf);
}
@font-face {
    font-family: bahome;
    src: url(font/Boheme_Floral.ttf);
}


/* ------------------------ HERO --------------------------------------- */
@keyframes atastgl {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 2.5rem;
    }
  }
@keyframes atasopc {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 0px;
    }
  }
@keyframes atas {
    0% {
      opacity: 0;
      top: -100px;
    }

    100% {
      opacity: 1;
      top: 0px;
    }
  }

  @keyframes bawah {
    0% {
      opacity: 0;
      bottom: -100px;
    }

    100% {
      opacity: 1;
      bottom: 0px;
    }
  }

  @keyframes bingkaikiri {
    0% {
      opacity: 0;
      left: -100px;
    }

    100% {
      opacity: 1;
      left: 0px;
    }
  }

  @keyframes bingkaikanan {
    0% {
      opacity: 0;
      right: -100px;
    }

    100% {
      opacity: 1;
      right: 0px;
    }
  }

  @keyframes zoomin {
    0% {
      opacity: 0;
      transform: scale(0, 0);
    }

    100% {
      opacity: 1;
      transform: scale(1, 1);
    }
  }

  @keyframes bawahopc {
    0% {
      opacity: 0;
      bottom: -40px;
    }

    100% {
      opacity: 1;
      bottom: 0px;
    }
  }
  
  /* --------------------------------------- HERO -----------------------------  */
  .splide .splide__track .splide__list .splide__slide .hero #hero1 {
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    #hero1.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .hero #hero2 {
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    #hero2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .hero #hero3 {
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    #hero3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .hero #hero4 {
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    #hero4.animate {
      animation-name: bingkaikanan;
    }
    
    
.splide .splide__track .splide__list .splide__slide .hero .herothewedding {
    position: relative;
    animation-duration: 3s;
    }
    .herothewedding.animate {
    animation-name: atasopc;
    }
    
    
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
    /* position: relative; */
    animation-duration: 3s;
    }
    .herotanggal.animate {
    animation-name: atastgl;
    }
    
    
.splide .splide__track .splide__list .splide__slide .hero .heropengantin {
    /* position: relative; */
    animation-duration: 3s;
    }
    .heropengantin.animate {
    animation-name: zoomin;
    }
    
.splide .splide__track .splide__list .splide__slide .hero .herokepada {
    position: relative;
    animation-duration: 3s;
    }
    .herokepada.animate {
    animation-name: bawahopc;
    }
    
.splide .splide__track .splide__list .splide__slide .hero .herotamu {
    position: relative;
    animation-duration: 3s;
    }
    .herotamu.animate {
    animation-name: bawahopc;
    }
    
.splide .splide__track .splide__list .splide__slide .hero .bukaund {
    position: relative;
    animation-duration: 3s;
    }
    .bukaund.animate {
    animation-name: bawahopc;
    }





.splide .splide__track .splide__list .splide__slide .hero {
    position: relative;
    min-height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_b.webp);
    
}
.splide .splide__track .splide__list .splide__slide .hero h2 {
    font-family: brushscript, sans-serif;
    font-size: 2.5rem;
    margin-bottom: 4rem;
    color: black;
}
.splide .splide__track .splide__list .splide__slide .hero h1 {
    font-family: tiranti, serif;
    font-size: 4rem;
    color: black;
}
.splide .splide__track .splide__list .splide__slide .hero .heropengantin {
  position: relative;
  display: flex;

  /* height: 1rem; */
  
  /* background-color: #CE9F22; */
  justify-content: center;
}
.splide .splide__track .splide__list .splide__slide .hero .heropengantin .dinda {
  position: relative;
  right: 0;
  left: 0;
  top: -2rem;
  color:#CE9F22;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .hero .heropengantin .dan {
  position: relative;
  color:#CE9F22;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .hero .heropengantin .wahyu {
  position: relative;
  right: 0;
  left: 0;
  bottom: -2rem;
  color:#CE9F22;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
  position: absolute;
  display: block;
  top: 2.5rem;
  left: 2.5rem;
  padding: 0;
  /* background-color: #CE9F22; */
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .hari {
  position: relative;
  font-family: bodoni, serif;
  font-size: 2rem;
    color: black;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tgl {
  position: relative;
  font-family: bodoni, serif;
  font-size: 4rem;
  top: -1rem;
    color: black;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .bulan {
  position: relative;
  font-family: bodoni, serif;
  font-size: 2rem;
  top: -2rem;
    color: black;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tahun {
  position: relative;
  font-family: bodoni, serif;
  font-size: 2;
  top: -3rem;
    color: black;
}
.splide .splide__track .splide__list .splide__slide .hero p {
  font-family: "Alike", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  margin-top: 4rem;
    color: black;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu h5 {
  font-family: "Alike", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  color: black;
}

.splide .splide__track .splide__list .splide__slide .hero a {
    color: black;
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1rem;
    font-size: 1rem;
    background-color: #CE9F22;
}
.splide .splide__track .splide__list .splide__slide .hero a:hover {
    color: white;
    background-color: #f2c958;
}

/* -------------------------------------- AYAT --------------------------------------- */


.splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
    /* position: relative; */
    animation-duration: 3s;
    }
    .ayatpengantin.animate {
    animation-name: atasopc;
    }

.splide .splide__track .splide__list .splide__slide .ayat .ayatarrum {
    position: relative;
    animation-duration: 3s;
    }
    .ayatarrum.animate {
    animation-name: bawahopc;
    }




.splide .splide__track .splide__list .splide__slide .ayat {
    position: relative;
    min-height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_a.webp);
}
.splide .splide__track .splide__list .splide__slide .ayat p {
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 8rem;
    padding-right: 8rem;
    
}

.splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}
.splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dinda {
  position: relative;
  right: 2rem;
  /* left: 0; */
  top: 1rem;
  /* color:#3686e1; */
  color:#CE9F22;
  font-family: tiranti, cursive;
  font-size: 5rem;

}
.splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dan {
  position: relative;
  /* color: #3686e1; */
  color:#CE9F22;
  font-family: tiranti, cursive;
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .wahyu {
  position: relative;
  right: 0;
  left: 2rem;
  top: -5.4rem;
  /* color: #3686e1; */
  color:#CE9F22;
  font-family: tiranti, cursive;
  font-size: 5rem;

}

/* ----------------------------- SALAM ---------------------------------------------  */


.splide .splide__track .splide__list .splide__slide .salam #salam11 {
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    #salam11.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam2 {
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    #salam2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam3 {
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    #salam3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam4 {
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    #salam4.animate {
      animation-name: bingkaikiri;
    }
    
  .splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
      position: relative;
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    .salamassalamu.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salambismillah {
      position: relative;
      width: auto;
      height: auto;
      animation-duration: 3s;
    }
    .salambismillah.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salampembuka {
      position: relative;
      animation-duration: 3s;
    }
    .salampembuka.animate {
      animation-name: bawahopc;
    }
    
  .splide .splide__track .splide__list .splide__slide .salam .salampengantin {
    /* position: relative; */
    animation-duration: 3s;
    }
    .salampengantin.animate {
    animation-name: atasopc;
    }



.splide .splide__track .splide__list .splide__slide .salam {
    position: relative;
    height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_a.webp);
}

.splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
  /* position: relative; */
  width: 40%;
  height: auto;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .salam .salambismillah {
  /* position: relative; */
  width: 35%;
  height: auto;
  margin-bottom: 1rem;
}

.splide .splide__track .splide__list .splide__slide .salam .salampembuka {
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 4rem;
    padding-right: 4rem;
}


.splide .splide__track .splide__list .splide__slide .salam .salampengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdinda {
  position: relative;
  right: 2rem;
  /* left: 0; */
  top: 1rem;
  /* color:#3686e1; */
  color:#CE9F22;
  font-family: tiranti, cursive;
  font-size: 5rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdan {
  position: relative;
  /* color: #3686e1; */
  color:#CE9F22;
  font-family: tiranti, cursive;
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamwahyu {
  position: relative;
  right: 0;
  left: 2rem;
  top: -5.4rem;
  /* color: #3686e1; */
  color:#CE9F22;
  font-family: tiranti, cursive;
  font-size: 5rem;

}

/* ----------------------- PENGANTIN --------------------------------------------  */


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin2 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#pengantin2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin3 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#pengantin3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin4 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#pengantin4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin5 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#pengantin5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .pengantin #pengantinwanita {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
#pengantinwanita.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinnamawanita {
      position: relative;
      animation-duration: 3s;
}
.pengantinnamawanita.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinkelwanita {
      position: relative;
      animation-duration: 3s;
}
.pengantinkelwanita.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantindan {
      position: relative;
      animation-duration: 3s;
}
.pengantindan.animate {
  animation-name: zoomin;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantinpria {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
#pengantinpria.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinnamapria {
      position: relative;
      animation-duration: 3s;
}
.pengantinnamapria.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinkelpria {
      position: relative;
      animation-duration: 3s;
}
.pengantinkelpria.animate {
  animation-name: bingkaikanan;
}


.splide .splide__track .splide__list .splide__slide .pengantin {
    position: relative;
    height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_a.webp);
}

.splide .splide__track .splide__list .splide__slide .pengantin p {
  
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 4rem;
    padding-right: 4rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin h4 {
  
  color:#CE9F22;
  font-family: tiranti, cursive;
  font-size: 3rem;

}

.splide .splide__track .splide__list .splide__slide .pengantin h3 {
  
  font-family: "Cinzel", serif;
  color: #CE9F22;
  font-size: 3.5rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinwanita ,
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinpria {
  width: 8%;
 object-fit: cover;
 object-position: center; 
}

/* ------------------------- ACARA --------------------------------------------------------  */

.splide .splide__track .splide__list .splide__slide .acara #acara2 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#acara2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara #acara3 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#acara3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara4 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#acara4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara5 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#acara5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .acara .acaraakad {
      position: relative;
      animation-duration: 3s;
}
.acaraakad.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari {
      position: relative;
      animation-duration: 3s;
}
.acaraakadhari.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam {
      position: relative;
      animation-duration: 3s;
}
.acaraakadjam.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat {
      position: relative;
      animation-duration: 3s;
}
.acaraakadtempat.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
      position: relative;
      animation-duration: 3s;
}
.acararesepsi.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari {
      position: relative;
      animation-duration: 3s;
}
.acararesepsihari.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam {
      position: relative;
      animation-duration: 3s;
}
.acararesepsijam.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
      position: relative;
      animation-duration: 3s;
}
.acararesepsitempat.animate {
  animation-name: bingkaikanan;
}




.splide .splide__track .splide__list .splide__slide .acara {
    position: relative;
    height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_a.webp);
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakad ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
  
  color:#CE9F22;
  /* font-family: bahome, cursive; */
  font-family: tiranti, serif;
  font-size: 4rem;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
  
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

/* ----------------------- SHARELOK ----------------------------------------  */
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok2 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#sharelok2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok3 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#sharelok3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok4 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#sharelok4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok5 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#sharelok5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.sharelokmaps.animate {
  animation-name: atasopc;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.shareloktempat.animate {
  animation-name: bawahopc;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.sharelokalamat.animate {
  animation-name: bawahopc;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloklink {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.shareloklink.animate {
  animation-name: bawahopc;
}







.splide .splide__track .splide__list .splide__slide .sharelok {
    position: relative;
    height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_b.webp);
}

.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
  
    width: 60vw;
    height: 50vh;
    margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
  
  color:#CE9F22;
  font-family: "Cinzel", serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
  
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

.splide .splide__track .splide__list .splide__slide .sharelok a {
    color: black;
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1rem;
    font-size: 1rem;
    background-color: #CE9F22;
}
.splide .splide__track .splide__list .splide__slide .sharelok a:hover {
    color: white;
    background-color: #f2c958;
}


/* ------------------ DOA ---------------------------------------------  */

.splide .splide__track .splide__list .splide__slide .doa #doa2 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#doa2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa3 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#doa3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa4 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#doa4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa5 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#doa5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.doapengantin.animate {
  animation-name: atasopc;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.doahadis.animate {
  animation-name: atasopc;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.doatextkonfir.animate {
  animation-name: bawahopc;
}
.splide .splide__track .splide__list .splide__slide .doa .doabtn {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.doabtn.animate {
  animation-name: bawahopc;
}





.splide .splide__track .splide__list .splide__slide .doa {
    position: relative;
    height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_b.webp);
}
.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
  
  color:#CE9F22;
  /* font-family: bahome, cursive; */
    font-family: tiranti, serif;
  font-size: 4rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis ,
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 4rem;
    padding-right: 4rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  margin-top: 6rem;
}
.splide .splide__track .splide__list .splide__slide .doa a {
    color: black;
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1rem;
    font-size: 1rem;
    background-color: #CE9F22;
}
.splide .splide__track .splide__list .splide__slide .doa a:hover {
    color: white;
    background-color: #f2c958;
}


/* ------------------- TANDA KASIH ---------------------------------------  */

.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih2 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#tandakasih2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih3 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#tandakasih3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih4 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#tandakasih4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih5 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#tandakasih5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.tandakasihpengantin.animate {
  animation-name: atasopc;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.tandakasihtext.animate {
  animation-name: bawahopc;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihbtnhadiah {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.tandakasihbtnhadiah.animate {
  animation-name: bawahopc;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihbtnkado {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.tandakasihbtnkado.animate {
  animation-name: bawahopc;
}






.splide .splide__track .splide__list .splide__slide .tandakasih {
    position: relative;
    height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_b.webp);
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
  
  color:#CE9F22;
  /* font-family: bahome, cursive; */
    font-family: tiranti, serif;
  font-size: 4rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
  
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 4rem;
    padding-right: 4rem;
    margin-top: 6rem;
    margin-bottom: 3rem;
}

.splide .splide__track .splide__list .splide__slide .tandakasih a {
    color: black;
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1rem;
    font-size: 1rem;
    background-color: #CE9F22;
}
.splide .splide__track .splide__list .splide__slide .tandakasih a:hover {
    color: white;
    background-color: #f2c958;
}


/* ------------------- PENUTUP ----------------------------------------------  */

.splide .splide__track .splide__list .splide__slide .penutup #penutup2 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#penutup2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .penutup #penutup3 {
      /* width: auto;
      height: auto; */
      animation-duration: 3s;
}
#penutup3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupsalam {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.penutupsalam.animate {
  animation-name: atasopc;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.penutuptext.animate {
  animation-name: atasopc;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin {
      /* width: auto;
      height: auto; */
      position: relative;
      animation-duration: 3s;
}
.penutuppengantin.animate {
  animation-name: bawahopc;
}



.splide .splide__track .splide__list .splide__slide .penutup {
    position: relative;
    height: 100vh;
    padding: 2rem;
    background-image: url(assets/bg_d.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
  
    font-family: "Alike", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 4rem;
    padding-right: 4rem;
    /* margin-top: 1rem;
    margin-bottom: 3rem; */
    color: white;
}


.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin {
  position: relative;
  display: inline-flex;
  margin-top: 2rem;
  /* height: 1rem; */
  /* left: auto;
  right: auto; */
  /* margin: auto; */
  
  /* background-color: #CE9F22; */
}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdinda {
  position: relative;
  right: 0;
  left: 0;
  top: -2rem;
  /* color:#CE9F22; */
  color: white;
  outline-color: white;
  font-family: tiranti, serif;
  font-size: 4rem;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdan {
  position: relative;
  /* color:#CE9F22; */
  color: white;
  outline-color: white;
  font-family: tiranti, serif;
  font-size: 4rem;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupwahyu {
  position: relative;
  right: 0;
  left: 0;
  bottom: -2rem;
  /* color:#CE9F22; */
  color: white;
  outline-color: white;
  font-family: tiranti, serif;
  font-size: 4rem;
  /* background-color: #CE9F22; */

}

.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam {
  position: relative;
  margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam .penutupsalam {
  width: 30%;
  height: auto;
  margin-bottom: 1rem;
  filter: invert(100%);

}





.audio-icon-wraper {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
  position: fixed;
  bottom: 2.5rem;
  right: 0.5rem;
  cursor: pointer;
  color: white;
  opacity: 50%;
  mix-blend-mode: difference;
  animation: rotating 4s linear infinite;
  transform-origin: center;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  z-index: 9999;
  /* -webkit-transform: translateZ(0); */
  /* transform: translateZ(0); */


}

@keyframes rotating {
  from {
    transform: 0;
  }

  to {
    transform: rotate(360deg);
  }
}



























/* -------------------------------------- 5120px ----------------------- */
@media screen and (max-width: 5120px) {


  @keyframes atastgl380 {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 4rem;
    }
  }


  /* ------------------------------------ HERO 5120 ----------------------------------  */

  .splide .splide__track .splide__list .splide__slide .hero #hero1 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
    /* position: relative; */
    animation-duration: 3s;
    }
  
    .herotanggal.animate {
    animation-name: atastgl380;
    }    




  .splide .splide__track .splide__list .splide__slide .hero h2 {
    font-size: 1.6rem;
    /* margin-bottom: 4rem; */
  }
  .splide .splide__track .splide__list .splide__slide .hero h1 {
      font-size: 2.7rem;
  }



.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
  top: 4rem;
  left: 1rem;
  padding: 0;
  /* background-color: #CE9F22; */
}

  .splide .splide__track .splide__list .splide__slide .hero .herotanggal .hari {
  font-size: 1.2rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tgl {
  font-size: 2rem;
  top: -0.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .bulan {
  font-size: 1.2rem;
  top: -1.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tahun {
  font-size: 1.2rem;
  top: -2.6rem;
}


.splide .splide__track .splide__list .splide__slide .hero p {
  font-size: 1rem;
  margin-top: 4rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu {
  width: 35vw;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu h5 {
  font-size: 1rem;
}

.splide .splide__track .splide__list .splide__slide .hero a {
    font-size: 0.8rem;
}


/* -------------------------------------- AYAT 5120 -----------------------------------------  */



  .splide .splide__track .splide__list .splide__slide .ayat .ayat2 {
    width: 100%;
    object-position: center;
    object-fit: cover;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat1 {
    width: 20%;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat4 {
    width: 20%;

}

  .splide .splide__track .splide__list .splide__slide .ayat p {
    font-size: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
    
  }

  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}

    .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dinda {
    font-size: 3rem;
    top: 0.2rem;
    right: 1.4rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dan {
    font-size: 3rem;
  top: -2.6rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .wahyu {
    font-size: 3rem;
    top: -4.9rem;
    left: 1.4rem;

  }


/* -------------------------------------- SALAM 5120 -----------------------------------------  */

.splide .splide__track .splide__list .splide__slide .salam #salam11 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    #salam11.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    #salam4.animate {
      animation-name: bingkaikiri;
    }




    .splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
      position: relative;
      width: 25%;
      height: auto;
      margin-bottom: 4rem;
      animation-duration: 3s;
    }
    .salamassalamu.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salambismillah {
      position: relative;
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    .salambismillah.animate {
      animation-name: atasopc;
    }

    
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdinda {
    top: 0.2rem;
    right: 1.4rem;
  font-size: 3rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdan {
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamwahyu {
    top: -4.9rem;
    left: 1.4rem;
  font-size: 3rem;

}

.splide .splide__track .splide__list .splide__slide .salam .salampembuka {
    font-size: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}



/* ------------------------------------ PENGANTIN 5120 -------------------------------------------- */


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#pengantin4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#pengantin5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin1 {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin6 {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinwanita {
  width: 19%;
}

.splide .splide__track .splide__list .splide__slide .pengantin .pengantinpria {
  width: 19%;
}

.splide .splide__track .splide__list .splide__slide .pengantin p {
  
    font-size: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin h4 {
  
  font-size: 2rem;

}

.splide .splide__track .splide__list .splide__slide .pengantin h3 {
  
  font-size: 3rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

/* ----------------------------------- ACARA 5120 -----------------------------------  */


.splide .splide__track .splide__list .splide__slide .acara #acara2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara #acara3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#acara4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#acara5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .acara #acara6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakad ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
  margin-bottom: 2rem;
  font-size: 3rem;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -------------------------------------- SHARELOK 5120 -----------------------------  */
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#sharelok4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#sharelok5.animate {
  animation-name: bingkaikiri;
}

.splide .splide__track .splide__list .splide__slide .sharelok #sharelok6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
  
    width: 70vw;
    height: 40vh;
    margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
  
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.splide .splide__track .splide__list .splide__slide .sharelok a {
  
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* ------------------------------------- DOA 5120 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .doa #doa2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#doa4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#doa5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
  
  font-size: 3rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis ,
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}


/* ------------------------------------- TANDA KASIH 1400 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
  
  font-size: 3rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* --------------------- PENUTUP 5120 ----------------------------------------------  */
.splide .splide__track .splide__list .splide__slide .penutup #penutup2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#penutup2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .penutup #penutup3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#penutup3.animate {
  animation-name: bingkaikanan;
}

.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}


.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdinda {
  right: 0;
  left: 0;
  top: -2rem;
  font-size: 3rem;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdan {
  font-size: 3rem;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupwahyu {
  right: 0;
  left: 0;
  bottom: -2rem;
  font-size: 3rem;
  /* background-color: #CE9F22; */

}

.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam .penutupsalam {
  width: 30%;
  height: auto;
  margin-bottom: 1rem;

}








}
/* -------------------------------------- 1400px LAPTOP ----------------------- */
@media screen and (max-width: 1400px) {

  @keyframes atastgl380 {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 4rem;
    }
  }


  /* ------------------------------------ HERO 1400 ----------------------------------  */

  .splide .splide__track .splide__list .splide__slide .hero #hero1 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
    /* position: relative; */
    animation-duration: 3s;
    }
  
    .herotanggal.animate {
    animation-name: atastgl380;
    }    




  .splide .splide__track .splide__list .splide__slide .hero h2 {
    font-size: 1.6rem;
    /* margin-bottom: 4rem; */
  }
  .splide .splide__track .splide__list .splide__slide .hero h1 {
      font-size: 2.7rem;
  }



.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
  top: 4rem;
  left: 1rem;
  padding: 0;
  /* background-color: #CE9F22; */
}

  .splide .splide__track .splide__list .splide__slide .hero .herotanggal .hari {
  font-size: 1.2rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tgl {
  font-size: 2rem;
  top: -0.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .bulan {
  font-size: 1.2rem;
  top: -1.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tahun {
  font-size: 1.2rem;
  top: -2.6rem;
}


.splide .splide__track .splide__list .splide__slide .hero p {
  font-size: 1rem;
  margin-top: 4rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu {
  width: 25vw;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu h5 {
  font-size: 1rem;
}

.splide .splide__track .splide__list .splide__slide .hero a {
    font-size: 0.8rem;
}


/* -------------------------------------- AYAT 1400 -----------------------------------------  */



  .splide .splide__track .splide__list .splide__slide .ayat .ayat2 {
    width: 100%;
    object-position: center;
    object-fit: cover;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat1 {
    width: 20%;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat4 {
    width: 20%;

}

  .splide .splide__track .splide__list .splide__slide .ayat p {
    font-size: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
    
  }

  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}

    .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dinda {
    font-size: 3rem;
    top: 0.2rem;
    right: 1.4rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dan {
    font-size: 3rem;
  top: -2.6rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .wahyu {
    font-size: 3rem;
    top: -4.9rem;
    left: 1.4rem;

  }


/* -------------------------------------- SALAM 1400 -----------------------------------------  */

.splide .splide__track .splide__list .splide__slide .salam #salam11 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    #salam11.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    #salam4.animate {
      animation-name: bingkaikiri;
    }




    .splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
      position: relative;
      width: 25%;
      height: auto;
      margin-bottom: 4rem;
      animation-duration: 3s;
    }
    .salamassalamu.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salambismillah {
      position: relative;
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    .salambismillah.animate {
      animation-name: atasopc;
    }

    
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdinda {
    top: 0.2rem;
    right: 1.4rem;
  font-size: 3rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdan {
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamwahyu {
    top: -4.9rem;
    left: 1.4rem;
  font-size: 3rem;

}

.splide .splide__track .splide__list .splide__slide .salam .salampembuka {
    font-size: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}



/* ------------------------------------ PENGANTIN 1400 -------------------------------------------- */


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#pengantin4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#pengantin5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin1 {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin6 {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinwanita {
  width: 16%;
}

.splide .splide__track .splide__list .splide__slide .pengantin .pengantinpria {
  width: 16%;
}

.splide .splide__track .splide__list .splide__slide .pengantin p {
  
    font-size: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin h4 {
  
  font-size: 2rem;

}

.splide .splide__track .splide__list .splide__slide .pengantin h3 {
  
  font-size: 2.5rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

/* ----------------------------------- ACARA 1400 -----------------------------------  */


.splide .splide__track .splide__list .splide__slide .acara #acara2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara #acara3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#acara4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#acara5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .acara #acara6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakad ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
  margin-bottom: 2rem;
  font-size: 3rem;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -------------------------------------- SHARELOK 1400 -----------------------------  */
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#sharelok4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#sharelok5.animate {
  animation-name: bingkaikiri;
}

.splide .splide__track .splide__list .splide__slide .sharelok #sharelok6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
  
    width: 70vw;
    height: 40vh;
    margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
  
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.splide .splide__track .splide__list .splide__slide .sharelok a {
  
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* ------------------------------------- DOA 1400 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .doa #doa2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#doa4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#doa5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
  
  font-size: 3rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis ,
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}



/* ------------------------------------- TANDA KASIH 1400 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
  
  font-size: 3rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}


/* --------------------- PENUTUP 1400 ----------------------------------------------  */
.splide .splide__track .splide__list .splide__slide .penutup #penutup2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#penutup2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .penutup #penutup3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#penutup3.animate {
  animation-name: bingkaikanan;
}

.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}


.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdinda {
  right: 0;
  left: 0;
  top: -2rem;
  font-size: 3rem;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdan {
  font-size: 3rem;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupwahyu {
  right: 0;
  left: 0;
  bottom: -2rem;
  font-size: 3rem;
  /* background-color: #CE9F22; */

}

.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam .penutupsalam {
  width: 30%;
  height: auto;
  margin-bottom: 1rem;

}


}

















/* -------------------------------------- 1024px ----------------------- */
@media screen and (max-width: 1024px) {

  @keyframes atastgl380 {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 4rem;
    }
  }


  /* ------------------------------------ HERO 1024 ----------------------------------  */

  .splide .splide__track .splide__list .splide__slide .hero #hero1 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
    /* position: relative; */
    animation-duration: 3s;
    }
  
    .herotanggal.animate {
    animation-name: atastgl380;
    }    




  .splide .splide__track .splide__list .splide__slide .hero h2 {
    font-size: 1.6rem;
    /* margin-bottom: 4rem; */
  }
  .splide .splide__track .splide__list .splide__slide .hero h1 {
      font-size: 2.7rem;
  }



.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
  top: 4rem;
  left: 1rem;
  padding: 0;
  /* background-color: #CE9F22; */
}

  .splide .splide__track .splide__list .splide__slide .hero .herotanggal .hari {
  font-size: 1.2rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tgl {
  font-size: 2rem;
  top: -0.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .bulan {
  font-size: 1.2rem;
  top: -1.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tahun {
  font-size: 1.2rem;
  top: -2.6rem;
}


.splide .splide__track .splide__list .splide__slide .hero p {
  font-size: 1rem;
  margin-top: 4rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu {
  width: 35vw;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu h5 {
  font-size: 1rem;
}

.splide .splide__track .splide__list .splide__slide .hero a {
    font-size: 0.8rem;
}


/* -------------------------------------- AYAT 1024 -----------------------------------------  */



  .splide .splide__track .splide__list .splide__slide .ayat .ayat2 {
    width: 100%;
    object-position: center;
    object-fit: cover;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat1 {
    width: 20%;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat4 {
    width: 20%;

}

  .splide .splide__track .splide__list .splide__slide .ayat p {
    font-size: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
    
  }

  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}

    .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dinda {
    font-size: 3rem;
    top: 0.2rem;
    right: 1.4rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dan {
    font-size: 3rem;
  top: -2.6rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .wahyu {
    font-size: 3rem;
    top: -4.9rem;
    left: 1.4rem;

  }


/* -------------------------------------- SALAM 1024 -----------------------------------------  */

.splide .splide__track .splide__list .splide__slide .salam #salam11 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    #salam11.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    #salam4.animate {
      animation-name: bingkaikiri;
    }




    .splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
      position: relative;
      width: 25%;
      height: auto;
      margin-bottom: 4rem;
      animation-duration: 3s;
    }
    .salamassalamu.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salambismillah {
      position: relative;
      width: 20%;
      height: auto;
      animation-duration: 3s;
    }
    .salambismillah.animate {
      animation-name: atasopc;
    }

    
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdinda {
    top: 0.2rem;
    right: 1.4rem;
  font-size: 3rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdan {
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamwahyu {
    top: -4.9rem;
    left: 1.4rem;
  font-size: 3rem;

}

.splide .splide__track .splide__list .splide__slide .salam .salampembuka {
    font-size: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}



/* ------------------------------------ PENGANTIN 1024 -------------------------------------------- */


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#pengantin4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#pengantin5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin1 {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin6 {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinwanita {
  width: 12%;
}

.splide .splide__track .splide__list .splide__slide .pengantin .pengantinpria {
  width: 12%;
}

.splide .splide__track .splide__list .splide__slide .pengantin p {
  
    font-size: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin h4 {
  
  font-size: 2rem;

}

.splide .splide__track .splide__list .splide__slide .pengantin h3 {
  
  font-size: 2.5rem;
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

/* ----------------------------------- ACARA 1024 -----------------------------------  */


.splide .splide__track .splide__list .splide__slide .acara #acara2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara #acara3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#acara4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#acara5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .acara #acara6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakad ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
  margin-bottom: 2rem;
  font-size: 3rem;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -------------------------------------- SHARELOK 1024 -----------------------------  */
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#sharelok4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#sharelok5.animate {
  animation-name: bingkaikiri;
}

.splide .splide__track .splide__list .splide__slide .sharelok #sharelok6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
  
    width: 70vw;
    height: 40vh;
    margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
  
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.splide .splide__track .splide__list .splide__slide .sharelok a {
  
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* ------------------------------------- DOA 1024 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .doa #doa2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#doa4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#doa5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
  
  font-size: 3rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis ,
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}



/* ------------------------------------- TANDA KASIH 1024 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih4 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih5 {
      width: 20%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih6 {
  width: 100%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
  
  font-size: 3rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* --------------------- PENUTUP 1024 ----------------------------------------------  */
.splide .splide__track .splide__list .splide__slide .penutup #penutup2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#penutup2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .penutup #penutup3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#penutup3.animate {
  animation-name: bingkaikanan;
}

.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}


.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdinda {
  right: 0;
  left: 0;
  top: -2rem;
  font-size: 3rem;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdan {
  font-size: 3rem;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupwahyu {
  right: 0;
  left: 0;
  bottom: -2rem;
  font-size: 3rem;
  /* background-color: #CE9F22; */

}

.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam .penutupsalam {
  width: 30%;
  height: auto;
  margin-bottom: 1rem;

}



}






















/* -------------------------------------- 992px ----------------------- */
@media screen and (max-width: 992px) {

    
  @keyframes atastgl380 {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 4rem;
    }
  }


  /* ------------------------------------ HERO 992 ----------------------------------  */

  .splide .splide__track .splide__list .splide__slide .hero #hero1 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
    /* position: relative; */
    animation-duration: 3s;
    }
  
    .herotanggal.animate {
    animation-name: atastgl380;
    }    




  .splide .splide__track .splide__list .splide__slide .hero h2 {
    font-size: 1.6rem;
    /* margin-bottom: 4rem; */
  }
  .splide .splide__track .splide__list .splide__slide .hero h1 {
      font-size: 2.7rem;
  }



.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
  top: 4rem;
  left: 1rem;
  padding: 0;
  /* background-color: #CE9F22; */
}

  .splide .splide__track .splide__list .splide__slide .hero .herotanggal .hari {
  font-size: 1.2rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tgl {
  font-size: 2rem;
  top: -0.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .bulan {
  font-size: 1.2rem;
  top: -1.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tahun {
  font-size: 1.2rem;
  top: -2.6rem;
}


.splide .splide__track .splide__list .splide__slide .hero p {
  font-size: 1rem;
  margin-top: 4rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu {
  width: 35vw;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu h5 {
  font-size: 1rem;
}

.splide .splide__track .splide__list .splide__slide .hero a {
    font-size: 0.8rem;
}


/* -------------------------------------- AYAT 992 -----------------------------------------  */



  .splide .splide__track .splide__list .splide__slide .ayat .ayat2 {
    width: 200%;
    object-position: center;
    object-fit: cover;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat1 {
    width: 30%;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat4 {
    width: 30%;

}

  .splide .splide__track .splide__list .splide__slide .ayat p {
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
  }

  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}

    .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dinda {
    font-size: 3rem;
    top: 0.2rem;
    right: 1.4rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dan {
    font-size: 3rem;
  top: -2.6rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .wahyu {
    font-size: 3rem;
    top: -4.9rem;
    left: 1.4rem;

  }


/* -------------------------------------- SALAM 992 -----------------------------------------  */

.splide .splide__track .splide__list .splide__slide .salam #salam11 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam11.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam2 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam3 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam4.animate {
      animation-name: bingkaikiri;
    }




    .splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
      position: relative;
      width: 37%;
      height: auto;
      margin-bottom: 4rem;
      animation-duration: 3s;
    }
    .salamassalamu.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salambismillah {
      position: relative;
      width: 35%;
      height: auto;
      animation-duration: 3s;
    }
    .salambismillah.animate {
      animation-name: atasopc;
    }

    
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdinda {
    top: 0.2rem;
    right: 1.4rem;
  font-size: 3rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdan {
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamwahyu {
    top: -4.9rem;
    left: 1.4rem;
  font-size: 3rem;

}

.splide .splide__track .splide__list .splide__slide .salam .salampembuka {
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}



/* ------------------------------------ PENGANTIN 992 -------------------------------------------- */


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#pengantin2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#pengantin3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin1 {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin6 {
      width: 100%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinwanita {
  width: 16%;
}

.splide .splide__track .splide__list .splide__slide .pengantin .pengantinpria {
  width: 16%;
}

.splide .splide__track .splide__list .splide__slide .pengantin p {
  
    font-size: 1rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin h4 {
  
  font-size: 2rem;

}

.splide .splide__track .splide__list .splide__slide .pengantin h3 {
  
  font-size: 4rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ----------------------------------- ACARA 992 -----------------------------------  */


.splide .splide__track .splide__list .splide__slide .acara #acara2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#acara2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara #acara3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#acara3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .acara #acara6 {
  width: 200%;
  object-fit: cover;
  object-position: center;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakad ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
  margin-bottom: 2rem;
  font-size: 3rem;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -------------------------------------- SHARELOK 992 -----------------------------  */
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#sharelok2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#sharelok3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok5.animate {
  animation-name: bingkaikiri;
}

.splide .splide__track .splide__list .splide__slide .sharelok #sharelok6 {
  width: 200%;
  object-fit: cover;
  object-position: center;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
  
    width: 90vw;
    height: 40vh;
    margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
  
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.splide .splide__track .splide__list .splide__slide .sharelok a {
  
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* ------------------------------------- DOA 992 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .doa #doa2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#doa2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#doa3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa6 {
  height: 50%;
  object-fit: cover;
  object-position: center;
  
  
}

.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
  
  font-size: 3rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis ,
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}


/* ------------------------------------- TANDA KASIH 992 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih6 {
  height: 50%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
  
  font-size: 3rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* --------------------- PENUTUP 992 ----------------------------------------------  */
.splide .splide__track .splide__list .splide__slide .penutup #penutup2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#penutup2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .penutup #penutup3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#penutup3.animate {
  animation-name: bingkaikanan;
}

.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
  
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}


.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdinda {
  right: 0;
  left: 0;
  top: -2rem;
  font-size: 3rem;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdan {
  font-size: 3rem;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupwahyu {
  right: 0;
  left: 0;
  bottom: -2rem;
  font-size: 3rem;
  /* background-color: #CE9F22; */

}

.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam .penutupsalam {
  width: 50%;
  height: auto;
  margin-bottom: 1rem;

}



}

























/* -------------------------------------- 768px ----------------------- */
@media screen and (max-width: 768px) {

   
  @keyframes atastgl380 {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 4rem;
    }
  }


  /* ------------------------------------ HERO 768 ----------------------------------  */

  .splide .splide__track .splide__list .splide__slide .hero #hero1 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
    /* position: relative; */
    animation-duration: 3s;
    }
  
    .herotanggal.animate {
    animation-name: atastgl380;
    }    




  .splide .splide__track .splide__list .splide__slide .hero h2 {
    font-size: 1.6rem;
    /* margin-bottom: 4rem; */
  }
  .splide .splide__track .splide__list .splide__slide .hero h1 {
      font-size: 2.7rem;
  }



.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
  top: 4rem;
  left: 1rem;
  padding: 0;
  /* background-color: #CE9F22; */
}

  .splide .splide__track .splide__list .splide__slide .hero .herotanggal .hari {
  font-size: 1.2rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tgl {
  font-size: 2rem;
  top: -0.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .bulan {
  font-size: 1.2rem;
  top: -1.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tahun {
  font-size: 1.2rem;
  top: -2.6rem;
}


.splide .splide__track .splide__list .splide__slide .hero p {
  font-size: 0.8rem;
  margin-top: 4rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu {
  width: 35vw;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu h5 {
  font-size: 1rem;
}

.splide .splide__track .splide__list .splide__slide .hero a {
    font-size: 0.8rem;
}


/* -------------------------------------- AYAT 768 -----------------------------------------  */



  .splide .splide__track .splide__list .splide__slide .ayat .ayat2 {
    width: 200%;
    object-position: center;
    object-fit: cover;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat1 {
    width: 30%;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat4 {
    width: 30%;

}

  .splide .splide__track .splide__list .splide__slide .ayat p {
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
  }

  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}

    .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dinda {
    font-size: 3rem;
    top: 0.2rem;
    right: 1.4rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dan {
    font-size: 3rem;
  top: -2.6rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .wahyu {
    font-size: 3rem;
    top: -4.9rem;
    left: 1.4rem;

  }


/* -------------------------------------- SALAM 768 -----------------------------------------  */

.splide .splide__track .splide__list .splide__slide .salam #salam11 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam11.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam2 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam3 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam4.animate {
      animation-name: bingkaikiri;
    }




    .splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
      position: relative;
      width: 45%;
      height: auto;
      margin-bottom: 4rem;
      animation-duration: 3s;
    }
    .salamassalamu.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salambismillah {
      position: relative;
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    .salambismillah.animate {
      animation-name: atasopc;
    }

    
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdinda {
    top: 0.2rem;
    right: 1.4rem;
  font-size: 3rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdan {
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamwahyu {
    top: -4.9rem;
    left: 1.4rem;
  font-size: 3rem;

}

.splide .splide__track .splide__list .splide__slide .salam .salampembuka {
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}



/* ------------------------------------ PENGANTIN 768 -------------------------------------------- */


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#pengantin2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#pengantin3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin1 {
      width: 200%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin6 {
      width: 200%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinwanita {
  width: 16%;
}

.splide .splide__track .splide__list .splide__slide .pengantin .pengantinpria {
  width: 16%;
}

.splide .splide__track .splide__list .splide__slide .pengantin p {
  
    font-size: 0.8rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin h4 {
  
  font-size: 2rem;

}

.splide .splide__track .splide__list .splide__slide .pengantin h3 {
  
  font-size: 3rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ----------------------------------- ACARA 768 -----------------------------------  */


.splide .splide__track .splide__list .splide__slide .acara #acara2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#acara2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara #acara3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#acara3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .acara #acara6 {
  width: 200%;
  object-fit: cover;
  object-position: center;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakad ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -------------------------------------- SHARELOK 768 -----------------------------  */
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#sharelok2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#sharelok3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok5.animate {
  animation-name: bingkaikiri;
}

.splide .splide__track .splide__list .splide__slide .sharelok #sharelok6 {
  width: 200%;
  object-fit: cover;
  object-position: center;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
  
    width: 90vw;
    height: 40vh;
    margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
  
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.splide .splide__track .splide__list .splide__slide .sharelok a {
  
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* ------------------------------------- DOA 768 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .doa #doa2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#doa2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#doa3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa6 {
  height: 50%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
  
  font-size: 2rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis ,
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}



/* ------------------------------------- TANDA KASIH 768 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih6 {
  height: 50%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
  
  font-size: 2rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* --------------------- PENUTUP 768 ----------------------------------------------  */
.splide .splide__track .splide__list .splide__slide .penutup #penutup2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#penutup2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .penutup #penutup3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#penutup3.animate {
  animation-name: bingkaikanan;
}

.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}


.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdinda {
  right: 0;
  left: 0;
  top: -2rem;
  font-size: 3rem;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdan {
  font-size: 3rem;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupwahyu {
  right: 0;
  left: 0;
  bottom: -2rem;
  font-size: 3rem;
  /* background-color: #CE9F22; */

}

.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam .penutupsalam {
  width: 50%;
  height: auto;
  margin-bottom: 1rem;

}



}



























/* -------------------------------------- 576px ----------------------- REDMI 9 */
@media screen and (max-width: 576px) {

  
  @keyframes atastgl380 {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 4rem;
    }
  }


  /* ------------------------------------ HERO 576 ----------------------------------  */

  .splide .splide__track .splide__list .splide__slide .hero #hero1 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
  
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
    /* position: relative; */
    animation-duration: 3s;
    }
  
    .herotanggal.animate {
    animation-name: atastgl380;
    }    




  .splide .splide__track .splide__list .splide__slide .hero h2 {
    font-size: 1.6rem;
    /* margin-bottom: 4rem; */
  }
  .splide .splide__track .splide__list .splide__slide .hero h1 {
      font-size: 2.7rem;
  }



.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
  top: 4rem;
  left: 1rem;
  padding: 0;
  /* background-color: #CE9F22; */
}

  .splide .splide__track .splide__list .splide__slide .hero .herotanggal .hari {
  font-size: 1.2rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tgl {
  font-size: 2rem;
  top: -0.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .bulan {
  font-size: 1.2rem;
  top: -1.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tahun {
  font-size: 1.2rem;
  top: -2.6rem;
}


.splide .splide__track .splide__list .splide__slide .hero p {
  font-size: 0.8rem;
  margin-top: 4rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu {
  width: 50vw;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu h5 {
  font-size: 1rem;
}

.splide .splide__track .splide__list .splide__slide .hero a {
    font-size: 0.8rem;
}


/* -------------------------------------- AYAT 576 -----------------------------------------  */



  .splide .splide__track .splide__list .splide__slide .ayat .ayat2 {
    width: 200%;
    object-position: center;
    object-fit: cover;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat1 {
    width: 30%;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat4 {
    width: 30%;

}

  .splide .splide__track .splide__list .splide__slide .ayat p {
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
  }

  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}

    .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dinda {
    font-size: 3rem;
    top: 0.2rem;
    right: 1.4rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dan {
    font-size: 3rem;
  top: -2.6rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .wahyu {
    font-size: 3rem;
    top: -4.9rem;
    left: 1.4rem;

  }


/* -------------------------------------- SALAM 576 -----------------------------------------  */

.splide .splide__track .splide__list .splide__slide .salam #salam11 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam11.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam2 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam3 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam4.animate {
      animation-name: bingkaikiri;
    }




    .splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
      position: relative;
      width: 55%;
      height: auto;
      margin-bottom: 4rem;
      animation-duration: 3s;
    }
    .salamassalamu.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salambismillah {
      position: relative;
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
    .salambismillah.animate {
      animation-name: atasopc;
    }

    
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdinda {
    top: 0.2rem;
    right: 1.4rem;
  font-size: 3rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdan {
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamwahyu {
    top: -4.9rem;
    left: 1.4rem;
  font-size: 3rem;

}

.splide .splide__track .splide__list .splide__slide .salam .salampembuka {
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}



/* ------------------------------------ PENGANTIN 576 -------------------------------------------- */


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#pengantin2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#pengantin3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#pengantin5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin1 {
      width: 200%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin6 {
      width: 200%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinwanita {
  width: 25%;
}

.splide .splide__track .splide__list .splide__slide .pengantin .pengantinpria {
  width: 25%;
}

.splide .splide__track .splide__list .splide__slide .pengantin p {
  
    font-size: 0.8rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin h4 {
  
  font-size: 2rem;

}

.splide .splide__track .splide__list .splide__slide .pengantin h3 {
  
  font-size: 2.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ----------------------------------- ACARA 576 -----------------------------------  */


.splide .splide__track .splide__list .splide__slide .acara #acara2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#acara2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara #acara3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#acara3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .acara #acara6 {
  width: 200%;
  object-fit: cover;
  object-position: center;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakad ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -------------------------------------- SHARELOK 576 -----------------------------  */
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#sharelok2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#sharelok3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok5.animate {
  animation-name: bingkaikiri;
}

.splide .splide__track .splide__list .splide__slide .sharelok #sharelok6 {
  width: 200%;
  object-fit: cover;
  object-position: center;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
  
    width: 90vw;
    height: 40vh;
    margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
  
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.splide .splide__track .splide__list .splide__slide .sharelok a {
  
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* ------------------------------------- DOA 576 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .doa #doa2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#doa2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#doa3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa6 {
  height: 50%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
  
  font-size: 2rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis ,
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}



/* ------------------------------------- TANDA KASIH 576 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih6 {
  height: 50%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
  
  font-size: 2rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* --------------------- PENUTUP 576 ----------------------------------------------  */
.splide .splide__track .splide__list .splide__slide .penutup #penutup2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#penutup2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .penutup #penutup3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#penutup3.animate {
  animation-name: bingkaikanan;
}

.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}


.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdinda {
  right: 0;
  left: 0;
  top: -2rem;
  font-size: 3rem;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdan {
  font-size: 3rem;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupwahyu {
  right: 0;
  left: 0;
  bottom: -2rem;
  font-size: 3rem;
  /* background-color: #CE9F22; */

}

.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam .penutupsalam {
  width: 80%;
  height: auto;
  margin-bottom: 1rem;

}

}






















/* -------------------------------------- 380px ----------------------- */
@media screen and (max-width: 380px) {


  @keyframes atastgl380 {
    0% {
      opacity: 0;
      top: -40px;
    }

    100% {
      opacity: 1;
      top: 1rem;
    }
  }


  /* ------------------------------------ HERO 380----------------------------------  */

  .splide .splide__track .splide__list .splide__slide .hero #hero1 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero2 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  .splide .splide__track .splide__list .splide__slide .hero #hero3 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
  
.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
    /* position: relative; */
    animation-duration: 3s;
    }
  
    .herotanggal.animate {
    animation-name: atastgl380;
    }    




  .splide .splide__track .splide__list .splide__slide .hero h2 {
    font-size: 1.5rem;
    /* margin-bottom: 4rem; */
  }
  .splide .splide__track .splide__list .splide__slide .hero h1 {
      font-size: 2.5rem;
  }



.splide .splide__track .splide__list .splide__slide .hero .herotanggal {
  top: 1rem;
  left: 1rem;
  padding: 0;
  /* background-color: #CE9F22; */
}

  .splide .splide__track .splide__list .splide__slide .hero .herotanggal .hari {
  font-size: 0.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tgl {
  font-size: 1.8rem;
  top: -0.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .bulan {
  font-size: 0.8rem;
  top: -1.8rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotanggal .tahun {
  font-size: 0.8rem;
  top: -2.6rem;
}


.splide .splide__track .splide__list .splide__slide .hero p {
  font-size: 0.8rem;
  margin-top: 4rem;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu {
  width: 50vw;
}
.splide .splide__track .splide__list .splide__slide .hero .herotamu h5 {
  font-size: 0.8rem;
}

.splide .splide__track .splide__list .splide__slide .hero a {
    font-size: 0.8rem;
}



/* -------------------------------------- AYAT 380 -----------------------------------------  */



  .splide .splide__track .splide__list .splide__slide .ayat .ayat2 {
    width: 200%;
    object-position: center;
    object-fit: cover;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat1 {
    width: 30%;

}
  .splide .splide__track .splide__list .splide__slide .ayat .ayat4 {
    width: 30%;

}

  .splide .splide__track .splide__list .splide__slide .ayat p {
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
  }

  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin {
  position: relative;
  display: inline;
  /* background-color: #CE9F22; */
  /* margin-top: 1rem; */
}

    .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dinda {
    font-size: 3rem;
    top: 0.2rem;
    right: 1.4rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .dan {
    font-size: 3rem;
  top: -2.6rem;

  }
  .splide .splide__track .splide__list .splide__slide .ayat .ayatpengantin .wahyu {
    font-size: 3rem;
    top: -4.9rem;
    left: 1.4rem;

  }


/* -------------------------------------- SALAM 380 -----------------------------------------  */

.splide .splide__track .splide__list .splide__slide .salam #salam11 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam11.animate {
      animation-name: bingkaikiri;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam2 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam2.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam3 {
      width: 40%;
      height: auto;
      animation-duration: 3s;
    }
    #salam3.animate {
      animation-name: bingkaikanan;
    }


  .splide .splide__track .splide__list .splide__slide .salam #salam4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
    }
    #salam4.animate {
      animation-name: bingkaikiri;
    }




    .splide .splide__track .splide__list .splide__slide .salam .salamassalamu {
      position: relative;
      width: 55%;
      height: auto;
      margin-bottom: 4rem;
      animation-duration: 3s;
    }
    .salamassalamu.animate {
      animation-name: atasopc;
    }
  .splide .splide__track .splide__list .splide__slide .salam .salambismillah {
      position: relative;
      width: 50%;
      height: auto;
      animation-duration: 3s;
    }
    .salambismillah.animate {
      animation-name: atasopc;
    }

    
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdinda {
    top: 0.2rem;
    right: 1.4rem;
  font-size: 3rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamdan {
  font-size: 3rem;
  top: -2.6rem;

}
.splide .splide__track .splide__list .splide__slide .salam .salampengantin .salamwahyu {
    top: -4.9rem;
    left: 1.4rem;
  font-size: 3rem;

}

.splide .splide__track .splide__list .splide__slide .salam .salampembuka {
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}



/* ------------------------------------ PENGANTIN 380 -------------------------------------------- */


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#pengantin2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#pengantin3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin4 {
      width: 35%;
      height: auto;
      animation-duration: 3s;
}
#pengantin4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin5 {
      width: 35%;
      height: auto;
      animation-duration: 3s;
}
#pengantin5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .pengantin #pengantin1 {
      width: 200%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin #pengantin6 {
      width: 200%;
      height: auto;
      object-fit: cover;
      object-position: center;
}
.splide .splide__track .splide__list .splide__slide .pengantin .pengantinwanita {
  width: 25%;
}

.splide .splide__track .splide__list .splide__slide .pengantin .pengantinpria {
  width: 25%;
}

.splide .splide__track .splide__list .splide__slide .pengantin p {
  
    font-size: 0.8rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.splide .splide__track .splide__list .splide__slide .pengantin h4 {
  
  font-size: 1.6rem;

}

.splide .splide__track .splide__list .splide__slide .pengantin h3 {
  
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* ----------------------------------- ACARA 380 -----------------------------------  */


.splide .splide__track .splide__list .splide__slide .acara #acara2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#acara2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .acara #acara3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#acara3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .acara #acara5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#acara5.animate {
  animation-name: bingkaikiri;
}


.splide .splide__track .splide__list .splide__slide .acara #acara6 {
  width: 200%;
  object-fit: cover;
  object-position: center;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakad ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsi {
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.splide .splide__track .splide__list .splide__slide .acara .acaraakadhari ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadjam ,
.splide .splide__track .splide__list .splide__slide .acara .acaraakadtempat ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsihari ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsijam ,
.splide .splide__track .splide__list .splide__slide .acara .acararesepsitempat {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -------------------------------------- SHARELOK 380 -----------------------------  */
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#sharelok2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#sharelok3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .sharelok #sharelok5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#sharelok5.animate {
  animation-name: bingkaikiri;
}

.splide .splide__track .splide__list .splide__slide .sharelok #sharelok6 {
  width: 200%;
  object-fit: cover;
  object-position: center;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokmaps {
  
    width: 90vw;
    height: 40vh;
    margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .shareloktempat {
  
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.splide .splide__track .splide__list .splide__slide .sharelok .sharelokalamat {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.splide .splide__track .splide__list .splide__slide .sharelok a {
  
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* ------------------------------------- DOA 380 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .doa #doa2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#doa2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#doa3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .doa #doa5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#doa5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .doa #doa6 {
  height: 50%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .doa .doapengantin {
  
  font-size: 1.8rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doahadis ,
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.splide .splide__track .splide__list .splide__slide .doa .doatextkonfir {
  margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .doa a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}




/* ------------------------------------- TANDA KASIH 380 ------------------------------------  */


.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih3.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih4 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih4.animate {
  animation-name: bingkaikanan;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih5 {
      width: 30%;
      height: auto;
      animation-duration: 3s;
}
#tandakasih5.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .tandakasih #tandakasih6 {
  height: 50%;
  object-fit: cover;
  object-position: center;
  
}

.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihpengantin {
  
  font-size: 1.8rem;
  margin-bottom: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih .tandakasihtext {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
}
.splide .splide__track .splide__list .splide__slide .tandakasih a {
    
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
}

/* --------------------- PENUTUP 380 ----------------------------------------------  */
.splide .splide__track .splide__list .splide__slide .penutup #penutup2 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#penutup2.animate {
  animation-name: bingkaikiri;
}
.splide .splide__track .splide__list .splide__slide .penutup #penutup3 {
      width: 50%;
      height: auto;
      animation-duration: 3s;
}
#penutup3.animate {
  animation-name: bingkaikanan;
}

.splide .splide__track .splide__list .splide__slide .penutup .penutuptext {
  
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}


.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdinda {
  right: 0;
  left: 0;
  top: -2rem;
  font-size: 2rem;
    
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupdan {
  font-size: 2rem;
  /* background-color: #CE9F22; */

}
.splide .splide__track .splide__list .splide__slide .penutup .penutuppengantin .penutupwahyu {
  right: 0;
  left: 0;
  bottom: -2rem;
  font-size: 2rem;
  /* background-color: #CE9F22; */

}

.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
.splide .splide__track .splide__list .splide__slide .penutup .penutupcoversalam .penutupsalam {
  width: 80%;
  height: auto;
  margin-bottom: 1rem;

}
}