body {
  background-image: url("../../../assets/img/background/pexels-miguel-á-padriñán-19670.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
}

/* Preloader */
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #4e54c8;
  background: -webkit-linear-gradient(
    linear,
    left top,
    right top,
    from(#8f94fb),
    to(#4e54c8)
  );
  background: -o-linear-gradient(left, #8f94fb, #4e54c8);
  background: linear-gradient(to right, #8f94fb, #4e54c8);
  z-index: 99;
  pointer-events: none;
}
.isipreloader {
  height: 100%;
  color: #fdfcfb;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.preloaderpengantin {
  font-weight: bold;
}
.preloaderweb {
  margin-top: 2rem;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 0px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fdfcfb;
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  -webkit-animation: lds-ellipsis1 0.6s infinite;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  -webkit-animation: lds-ellipsis3 0.6s infinite;
  animation: lds-ellipsis3 0.6s infinite;
}
@-webkit-keyframes lds-ellipsis1 {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes lds-ellipsis1 {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes lds-ellipsis3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
}
@-webkit-keyframes lds-ellipsis2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(24px, 0);
    transform: translate(24px, 0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(24px, 0);
    transform: translate(24px, 0);
  }
}

/* lagu */
.lagu {
  position: fixed;
  bottom: 5%;
  right: 5%;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 43;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.lagu:hover {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}
.bg-lagu {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 43;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(255, 255, 255, 0.2));
  filter: drop-shadow(1px 1px 5px rgba(255, 255, 255, 0.2));
}
.bg-lagu.muncul {
  background-image: url("../../../assets/img/icon/pauseedit.png");
  background-position: center;
  background-size: cover;
}
.bg-lagu.ilang {
  background-image: url("../../../assets/img/icon/playedit.png");
  background-position: center;
  background-size: cover;
}
.pplagu {
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 44;
  opacity: 0;
}

/* Section Tamu */
.tamu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
  pointer-events: none;
}
.isi-tamu {
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
  background: #feffff;
  -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
  border-radius: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: visible;
}
.tamu-atas {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  width: 65%;
  text-align: left;
  color: #68788c;
  margin-left: 5rem;
}
.tamu-bawah {
  position: absolute;
  left: -20%;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  width: 25rem;
  height: 25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #4e54c8;
  background: -webkit-linear-gradient(
    linear,
    left top,
    right top,
    from(#8f94fb),
    to(#4e54c8)
  );
  background: -o-linear-gradient(left, #8f94fb, #4e54c8);
  background: linear-gradient(to right, #8f94fb, #4e54c8);
  color: #fdfcfb;
  border-radius: 1rem;
  -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
  z-index: 51;
}
.tamu-bawah h4 {
  font-family: "Akaya Telivigala", cursive;
}
.beda {
  font-family: "Allura", cursive;
  font-size: 4rem;
}
.namaTamu {
  font-weight: bold;
  margin: 0.5rem 0;
}
.pUcapan {
  margin: 2rem 0;
}
.ilang-tamu {
  font-size: 1.4rem;
  width: 15rem;
  padding: 1rem;
  border: 1px solid #feffff;
  border-radius: 2rem;
  background: #68788c;
  color: #feffff;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.ilang-tamu:hover {
  background: #fdfcfb;
  border: 1px solid #68788c;
  color: #68788c;
}

/* Section Cover */
.cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  height: 100vh;
  background-image: url("../../../assets/img/4/83493748_3357671434255945_4879147513597553630_n.jpg");
  background-position: top;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  text-align: center;
  color: #68788c;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.header {
  opacity: 0;
  -webkit-transform: translateY(-10rem);
  -ms-transform: translateY(-10rem);
  transform: translateY(-10rem);
  -webkit-transition: 1.5s 0.75s;
  -o-transition: 1.5s 0.75s;
  transition: 1.5s 0.75s;
  padding-top: 8vh;
  text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.8);
}
.header.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.cover h1 {
  font-size: 6rem;
  font-family: "Allura", cursive;
}

.cover h3 {
  font-family: "Akaya Telivigala", cursive;
  font-size: 2.2rem;
  width: 80%;
  margin: 0 auto;
}

/* Section Mempelai */
.mempelai {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 5rem 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 1fr 2fr 0.5fr;
  grid-template-rows: 1fr 2fr 0.5fr;
  grid-template-areas: "weare weare" "pria wanita" "dexp dexw";
  -webkit-column-gap: 5rem;
  -moz-column-gap: 5rem;
  column-gap: 5rem;
  margin: 0 auto;
  background: #fdfcfb;
  color: #68788c;
}

.weare {
  grid-area: weare;
  -ms-grid-row-align: center;
  align-self: center;
  -ms-grid-column-align: center;
  justify-self: center;
}

.pria {
  grid-area: pria;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: right;
  opacity: 0;
  -webkit-transition: all 1.5s 0.5s;
  -o-transition: all 1.5s 0.5s;
  transition: all 1.5s 0.5s;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
}

.wanita {
  grid-area: wanita;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  -webkit-transition: all 1.5s 0.5s;
  -o-transition: all 1.5s 0.5s;
  transition: all 1.5s 0.5s;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
}

.dexp {
  grid-area: dexp;
  text-align: right;
  opacity: 0;
  -webkit-transition: all 1.5s 0.5s;
  -o-transition: all 1.5s 0.5s;
  transition: all 1.5s 0.5s;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
}

.dexw {
  grid-area: dexw;
  text-align: left;
  opacity: 0;
  -webkit-transition: all 1.5s 0.5s;
  -o-transition: all 1.5s 0.5s;
  transition: all 1.5s 0.5s;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
}

.pria.muncul,
.wanita.muncul,
.dexp.muncul,
.dexw.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.weare h2 {
  font-weight: bold;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}

.weare h2.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.mempelai img {
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 5px rgba(122, 102, 136, 0.7);
  box-shadow: 1px 1px 5px rgba(122, 102, 136, 0.7);
}

.pria h2,
.wanita h2 {
  font-size: 5rem;
  margin: 0 2rem;
  font-family: "Allura", cursive;
  /* font-weight: bold; */
}

.pria h5,
.wanita h5 {
  margin: 0 2rem;
  font-weight: bold;
}

.dexp,
.dexw {
  margin-top: 2rem;
  font-style: italic;
}

/* Section Countdown */
.countdown {
  text-align: center;
  padding: 10rem 0;
  width: 100%;
  margin: 0 auto;
  color: #fdfcfb;
  background-image: url("../../../assets/img/background/background-biru.png");
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.isiCountdown {
  padding: 5rem 0;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}

.isiCountdown.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.countdown h2 {
  font-style: normal;
  font-weight: bold;
}

.countdown h3 {
  font-weight: bold;
  font-style: normal;
}

.countdown h4 {
  font-weight: normal;
  width: 80%;
  margin: 0 auto;
  font-style: normal;
}

.waktumundur {
  width: 80%;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
}

.saveTheDate {
  padding: 1rem;
  background: #fdfcfb;
  border: 1px solid #68788c;
  border-radius: 0.5rem;
  color: #68788c;
  text-decoration: none;
  width: 60%;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  font-weight: bold;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.saveTheDate:hover {
  border: 1px solid #fdfcfb;
  background: #68788c;
  color: #fdfcfb;
}

/* Section Quote */
.kutipan-ayat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  margin: -10rem auto 1rem auto;
  background: #fdfcfb;
  width: 60%;
  padding: 10rem 0;
  border-radius: 1rem;
  -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.4);
}

.isiKutipanAyat {
  padding: 5rem 0;
  margin: 0 auto;
  width: 100%;
}

.ar-rum {
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}

.ar-rum.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.kutipan-ayat h4,
.kutipan-ayat h3 {
  color: #68788c;
  width: 80%;
  font-style: italic;
}

.kutipan-ayat h3 {
  font-weight: bold;
}

/* Section Venue */
.venue {
  padding: 5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  color: #68788c;
  font-style: italic;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}

.venue.muncul {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.akad,
.resepsi {
  display: flex;
  /* flex-wrap: wrap; */
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  margin: 2rem 0;
}

.akd1,
.akd2,
.rsp1,
.rsp2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 1rem 3.5rem;
}

.akd1,
.rsp1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.akd2,
.rsp2 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.venue h2 {
  font-style: normal;
  font-weight: bold;
  margin-top: 2rem;
}

.venue h5 {
  margin: 0 3rem;
}

.venue .lokasi-acara {
  text-align: right;
}

.venue img {
  width: 6rem;
  -webkit-filter: contrast(50%);
  filter: contrast(50%);
}

.lm {
  background: #68788c;
  border: none;
  border-radius: 0.5rem;
  padding: 1rem;
  width: 16rem;
  color: #fdfcfb;
  text-decoration: none;
  font-style: normal;
  font-size: 1.4rem;
  text-align: center;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.lm:hover {
  background: #fdfcfb;
  color: #68788c;
}

/* Section Protokol */
.protokol {
  margin: 0 auto;
  padding: 5rem 0;
  width: 60%;
  border-radius: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  place-items: center;
  color: #68788c;
  text-align: center;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}

.protokol.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.protokol h2 {
  font-weight: bold;
  margin-top: 2rem;
}

.protokol h5 {
  margin: 1rem 0;
}

.protokol img {
  width: 100%;
  border: 1rem solid #fdfcfb;
  -webkit-box-shadow: 1px 1px 2rem rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 2rem rgba(0, 0, 0, 0.3);
}

/* Section Gallery */
.gallery img {
  width: 100%;
  opacity: 0;
  -webkit-transform: translateY(5rem);
  -ms-transform: translateY(5rem);
  transform: translateY(5rem);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.gallery img.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.gallery {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 1rem;
  width: 80%;
  margin: 0 auto;
  padding: 5rem 0;
}

.gallery h2 {
  grid-column: 1 / -1;
  text-align: center;
  color: #68788c;
  font-style: normal;
  font-weight: bold;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
}

.gallery h2.muncul {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

/* Section Video */
.video {
  width: 100%;
  padding: 5rem 0;
}
.videoH2 {
  text-align: center;
  color: #68788c;
  font-weight: bold;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(10rem);
  transition: 1.5s;
}
.videoH2.muncul {
  opacity: 1;
  transform: translateY(0);
}
.isivideo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  width: 45%;
  margin: 0 auto;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
}
.isivideo.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.isivideo::after {
  padding-top: 56.25%;
  display: block;
  content: "";
}
.isivideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Section Story */
.story {
  width: 100%;
  margin: 5rem 0;
}
.isistory {
  width: 80%;
  text-align: center;
  margin: 0 auto;
  opacity: 0;
  -webkit-transform: translateY(10rem);
  -ms-transform: translateY(10rem);
  transform: translateY(10rem);
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
  color: #68788c;
}

.isistory.muncul {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.isistory h2 {
  font-weight: bold;
}

.isistory h5 {
  font-style: italic;
}

/* Section RSVP */
.boxrsvp {
  width: 100%;
  padding: 5rem 0;
  background-image: url("../../../assets/img/4/102917094_3357671754255913_2531070333535077600_n.jpg");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}

.rsvp {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  color: #68788c;
  padding: 5rem 0;
}

.rsvptop {
  width: 40%;
  text-align: right;
}

.rsvp h1 {
  font-weight: bold;
}

.rsvp h4 {
  font-style: italic;
  font-weight: normal;
}

.isi {
  width: 60%;
  margin-left: 5rem;
}

.rsvp .flexform {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 1rem 0;
  width: 100%;
}

.flexform .jumlahtamu {
  cursor: pointer;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 1rem;
  padding: 0.8rem;
  border: none;
  border-radius: 0.5rem;
  color: #68788c;
}

.flexform .telepon {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
  margin-left: 1rem;
  padding: 0.8rem;
  border: none;
  border-radius: 0.5rem;
}

.inputnama,
.doaucapan {
  color: #68788c;
  border: none;
  margin: 1rem 0;
  padding: 0.8rem;
  width: 100%;
  border-radius: 0.5rem;
}

.inputradio {
  cursor: pointer;
  margin: 1rem 0;
  padding: 0.8rem;
}

.pradio {
  cursor: pointer;
  display: inline;
  font-size: 1.4rem;
}
.pradio-1 {
  margin-right: 1rem;
}

.kirim {
  cursor: pointer;
  border: 1px solid #fdfcfb;
  background: #68788c;
  padding: 0.8rem;
  width: 10rem;
  color: #fdfcfb;
  border-radius: 0.5rem;
  display: block;
  margin: 1rem 0;
  margin-left: auto;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.kirim:hover {
  background: #fdfcfb;
  color: #68788c;
}

.ucapan {
  margin: 2rem 0;
}

.quotes {
  height: 25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: #68788c;
  overflow: auto;
}

.quote {
  background: rgb(255, 255, 255);
  border-radius: 2rem 0 2rem 0;
  margin: 1rem auto;
  padding: 1.2rem;
  width: 95%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.icopesan {
  width: 3rem;
  margin-right: 1rem;
}
.icopesan img {
  width: 3rem;
}
.isipesan {
  width: 90%;
}

.quote p {
  width: 100%;
  position: relative;
  z-index: 3;
  word-wrap: break-word;
}

.nama-tamu {
  font-weight: bold;
}

/* Section Hadiah */
.tombolmunculhadiah {
  position: fixed;
  left: 5%;
  bottom: 5%;
  z-index: 46;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translateY(5rem);
  -ms-transform: translateY(5rem);
  transform: translateY(5rem);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.tombolmunculhadiah.muncul {
  pointer-events: all;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-animation: shake 0.5s;
  animation: shake 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.gambarshake {
  width: 8.5rem;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
}

.tombolclosehadiah {
  position: fixed;
  z-index: 47;
  left: 5%;
  bottom: 5%;
  pointer-events: none;
  background: url("../../../../assets/img/dadad.png");
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0;
  -webkit-transform: translateY(5rem);
  -ms-transform: translateY(5rem);
  transform: translateY(5rem);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  height: 5rem;
  width: 5rem;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
}
.tombolclosehadiah.muncul {
  pointer-events: all;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.hadiah {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #4e54c8;
  background: -webkit-linear-gradient(
    linear,
    left top,
    right top,
    from(#8f94fb),
    to(#4e54c8)
  );
  background: -o-linear-gradient(left, #8f94fb, #4e54c8);
  background: linear-gradient(to right, #8f94fb, #4e54c8);
  z-index: 45;
  -webkit-clip-path: circle(10rem at -15% 115%);
  clip-path: circle(10rem at -15% 115%);
  -webkit-transition: all 1.3s ease-out 0.2s;
  -o-transition: all 1.3s ease-out 0.2s;
  transition: all 1.3s ease-out 0.2s;
  pointer-events: none;
  cursor: auto;
}
.hadiah.muncul {
  -webkit-clip-path: circle(190rem at -15% 115%);
  clip-path: circle(190rem at -15% 115%);
  pointer-events: all;
}
.isihadiah {
  height: 100%;
  width: 80%;
  margin: 0 auto;
  color: #feffff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  opacity: 0;
  -webkit-transform: translateX(-25%) scale(0);
  -ms-transform: translateX(-25%) scale(0);
  transform: translateX(-25%) scale(0);
  -webkit-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
}
.isihadiah.muncul {
  opacity: 1;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);
}

.isihadiahtengah {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 15px;
  /* border: 1px solid black; */
}
.isiHadiahTengah1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hiddenCopy {
  position: absolute;
  left: 9999px;
}
#tombolCopy {
  cursor: pointer;
  border-radius: 20px;
  padding: 8.5px;
  border: 1.8px solid #000000;
  color: #fff;
  transition: all 0.5s ease;
}
#tombolCopy:hover {
  color: #000000;
  background: #fff;
  border: 1.8px solid #8a8a8a;
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 90%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.bank,
.ovo,
.dana {
  opacity: 0;
  width: 40%;
  -webkit-transition: all 1s ease 0.2s;
  -o-transition: all 1s ease 0.2s;
  transition: all 1s ease 0.2s;
  -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.4));
}
.bank {
  -webkit-transform: translateX(0%) scale(0);
  -ms-transform: translateX(0%) scale(0);
  transform: translateX(0%) scale(0);
}
.bank.muncul {
  -webkit-transform: translateX(100%) scale(1);
  -ms-transform: translateX(100%) scale(1);
  transform: translateX(100%) scale(1);
  opacity: 1;
}
.dana {
  -webkit-transform: translateY(100%) scale(0);
  -ms-transform: translateY(100%) scale(0);
  transform: translateY(100%) scale(0);
}
.dana.muncul {
  -webkit-transform: translateY(0) scale(1);
  -ms-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  opacity: 1;
}
.ovo {
  -webkit-transform: translateX(0%) scale(0);
  -ms-transform: translateX(0%) scale(0);
  transform: translateX(0%) scale(0);
}
.ovo.muncul {
  -webkit-transform: translateX(-100%) scale(1);
  -ms-transform: translateX(-100%) scale(1);
  transform: translateX(-100%) scale(1);
  opacity: 1;
}
.isihadiahbawah {
  text-align: right;
  /* border: 1px solid black; */
}
.iconhadiahbawah {
  width: 5rem;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  margin: 0 0.5rem;
}
.iconhadiahbawah:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

/* Section Penutup */
.penutup {
  height: 50rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  position: relative;
  background: #fdfcfb;
  color: #68788c;
}

.maps {
  position: absolute;
  top: -10rem;
  width: 60%;
  height: 35rem;
  overflow: hidden;
  border-radius: 1rem;
  -webkit-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.4);
  font-weight: bolder;
}

.maps a {
  background: #68788c;
  border-radius: 0.5rem;
  padding: 0.8rem;
  width: 13rem;
  color: #fdfcfb;
  text-shadow: none;
  position: absolute;
  text-decoration: none;
  bottom: 0;
  right: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.maps a:hover {
  background: #fdfcfb;
  color: #68788c;
}

.last {
  position: absolute;
  bottom: 15%;
  color: #68788c;
  text-align: center;
}

.lastnama {
  font-size: 5rem;
  font-family: "Allura", cursive;
}

/* Footer */
.footer {
  color: #fdfcfb;
  height: 4rem;
  background: #68788c;
  text-align: center;
  line-height: 4rem;
  font-weight: normal;
}
.linkFooter {
  color: #fdfcfb;
  text-decoration: underline;
}
.linkFooter:hover {
  font-weight: bold;
  text-decoration: none;
}

/* Animasi */
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: translate(1px, 1px) rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(3px, 2px) rotate(0deg);
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(3px, 1px) rotate(-1deg);
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(1px, 2px) rotate(0deg);
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
    transform: translate(1px, -2px) rotate(-1deg);
  }
}