@import url('http://fonts.cdnfonts.com/css/cormorant-sc');
body {
  background-color: #314E2F;
  /* background-color: #fff; */
}
.soundon {
  background-color: #ffffff;
  border-radius: 50%;
  background-size: 50px;
}

.sound {
  bottom: 30px;
  left: 30px;
}

.soundoff {
  background-color: #ffffff;
  width: 55px;
  height: 100px;
  border-radius: 50%;
  background-size: 100px;
}
.container {
  position: absolute;
  width: 483.18px;
  height: 728px;
  left: -65px;
  top: -53px;
}
.title {
  position: absolute;
  height: 25px;
  left: 110px;
  top: 425px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 21px;
  line-height: 25px;
  letter-spacing: 0.085em;
  color: white;
}
.name1 {
  position: absolute;
  width: 175px;
  height: 53px;
  left: 80px;
  top: 463px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 44px;
  line-height: 53px;
  color: white;
}

.name2 {
  position: absolute;
  width: 201px;
  height: 53px;
  left: 100px;
  top: 499px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 53px;
  color: white;
}
.name3 {
  position: absolute;
  left: 50%;
  top: 1240px;
  transform: translate(-50%, 0);

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 53px;
  color: white;
}
.name4 {
  position: absolute;
  left: 50%;
  top: 1280px;
  white-space: nowrap;
  transform: translate(-50%, 0);

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 53px;
  color: white;
}
.invitation {
  position: absolute;
  width: none;
  height: 25px;
  left: 110px;
  top: 566px;
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0.085em;
  color: #ffffff;
}
.panah a span {
  position: absolute;
  width: 24px;
  height: 24px;
  left: 190px;
  top: 604px;
  margin-left: -12px;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb07 2s infinite;
  animation: sdb07 2s infinite;
  box-sizing: border-box;
  z-index: 99999;
}
@keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.inisial-d {
  width: 117px;
  position: absolute;
  height: 132px;
  left: 27px;
  right: 64%;
  top: 720px;
}
.inisial-r {
  position: absolute;
  height: 140px;
  left: 27px;
  right: 66.67%;
  top: 1110px;
}
.group-jadwal {
  position: absolute;
  width: 127px;
  height: 194px;
  left: 202px;
  top: 760px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-size: 160px;
  line-height: 194px;
  opacity: 0.7;
}
.jadwal-14 {
  position: absolute;
  width: 127px;
  height: 194px;
  left: 202px;
  top: 760px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-size: 160px;
  line-height: 194px;
  opacity: 0.3;
  color: #6a6d64;
}
.jadwal-01 {
  position: absolute;
  width: 110px;
  height: 194px;
  left: 200px;
  top: 904px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-size: 160px;
  line-height: 194px;

  color: #6a6d64;
  opacity: 0.3;
}
.jadwal-23 {
  position: absolute;
  width: 144px;
  height: 194px;
  left: 197px;
  top: 1055px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-size: 160px;
  line-height: 194px;

  color: #6a6d64;
  opacity: 0.3;
}
.group-huruf {
  position: absolute;
  left: 30%;
  top: 720px;
  transform: translate(-0, -50%);
}
.hurufc {
  position: absolute;
  left: 60px;
  top: 920px;
}
.hurufh {
  position: absolute;
  left: 92px;
  top: 920px;
}
.hurufe {
  position: absolute;
  left: 130px;
  top: 920px;
}
.hurufn {
  position: absolute;
  left: 155px;
  top: 920px;
}
.hurufd {
  position: absolute;
  left: 190px;
  top: 920px;
}
.hurufy {
  position: absolute;
  left: 220px;
  top: 920px;
}
.simboldan {
  position: absolute;
  left: 80px;
  top: 972px;
}
.huruff {
  position: absolute;
  left: 120px;
  top: 970px;
}
.hurufi {
  position: absolute;
  left: 145px;
  top: 970px;
}
.hurufr {
  position: absolute;
  left: 160px;
  top: 970px;
}
.hurufm {
  position: absolute;
  left: 195px;
  top: 970px;
}
.hurufa {
  position: absolute;
  left: 235px;
  top: 970px;
  bottom: 1.06%;
}
.huruf-n {
  position: absolute;
  left: 273px;
  top: 970px;
}

.place {
  position: absolute;
  left: 50%;
  top: 1390px;
  transform: translate(-50%, -50%);

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 36px;
}
.place2 {
  position: absolute;
  left: 50%;
  top: 1520px;
  transform: translate(-50%, -50%);

  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: #ffffff;
  opacity: 0.9;
}
.place3 {
  position: absolute;
  left: 50%;
  top: 1670px;
  transform: translate(-50%, -50%);

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;

  color: #bd7b5f;
}
.box-direction {
  position: absolute;
  width: 118px;
  height: 37px;
  left: 50%;
  top: 1780px;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.maps {
  position: absolute;
  width: 0px;
  height: 74px;
  left: 45px;
  top: 1609px;
}
.google-maps {
  position: absolute;
  left: 5px;
  top: 0px;
}
.mapouter {
  position: absolute;
}
.gmap_canvas {
  position: absolute;
}
.reception {
  position: absolute;
  height: 62px;
  left: 42px;
  top: 1711px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;

  color: #6a6d64;
}
.today {
  position: absolute;
  width: 142px;
  height: 48px;
  left: 42px;
  top: 1778px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;

  color: #bd7b5f;
}
.session1 {
  position: absolute;
  width: 74.98px;
  height: 29px;
  left: 40px;
  top: 1847px;

  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;

  color: #6a6d64;
}
.time1 {
  position: absolute;
  width: 144px;
  height: 29px;
  left: 40px;
  top: 1870px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;

  color: #bd7b5f;
}
.session2 {
  position: absolute;
  width: 187px;
  height: 46px;
  left: 40px;
  top: 1830px;

  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;

  color: #6a6d64;
}
.time2 {
  position: absolute;
  width: 120px;
  height: 29px;
  left: 40px;
  top: 1858px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;

  color: #bd7b5f;
}
.union {
  box-sizing: border-box;
  position: absolute;
  width: 324.07px;
  height: 448.47px;
  left: 24px;
  top: 2000px;
}
.isi-counting-days {
  left: 100px;
}
.counting-days {
  position: absolute;
  width: 282px;
  height: 66px;
  left: 46px;
  top: 2490px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 106.6%;
  /* or 28px */

  text-align: center;

  color: #ffffff;
}
.days {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 11px;
  gap: 4px;

  position: absolute;
  width: 65px;
  height: 69px;
  left: -10px;
  top: 100px;

  background: #BDB717;
  border-radius: 4px;
}
.hours {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 11px;
  gap: 4px;

  position: absolute;
  width: 65px;
  height: 69px;
  left: 70px;
  top: 100px;

  background: #BDB717;
  border-radius: 4px;
}
.minutes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 11px;
  gap: 4px;

  position: absolute;
  width: 65px;
  height: 69px;
  left: 150px;
  top: 100px;

  background: #BDB717;
  border-radius: 4px;
}
.seconds {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 11px;
  gap: 4px;

  position: absolute;
  width: 65px;
  height: 69px;
  left: 230px;
  top: 100px;

  background: #BDB717;
  border-radius: 4px;
}
.rectangle {
  width: 375px;
  height: 667px;
  position: absolute;
  background: linear-gradient(0.98deg, #314e2f 5.95%, #314e2fde 21.97%, #314e2f00 67.05%);
  /* background: linear-gradient(0.98deg, rgba(178, 206, 228, 0.9) 5.95%, rgba(178, 206, 228, 0.9) 21.97%, rgba(178, 206, 228, 0) 67.05%); */
}
.imager {
  width: 375px;
  height: 667px;
}
.image2 {
  position: absolute;
  width: 293px;
  height: 405.47px;
  left: 40px;
  top: 2021px;
}
.wish {
  position: absolute;
  height: 31px;
  left: 140px;
  top: 2730px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;

  color: #bd7b5f;
}
.text-wish {
  position: absolute;
  width: 292px;
  height: 75px;
  left: 40px;
  top: 2800px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-align: center;

  color: #ffffff;
}
.isi-wish {
  position: absolute;
  width: 292px;
  /* height: 75px; */
  left: 40px;
  top: 2850px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  text-align: center;

  color: #ffffff;
}
.isi-wish1 {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 230px;
}
.prev {
  color: #bd7b5f;
}
.carousel-control-prev-icon {
  color: #bd7b5f;
}
.line {
  position: absolute;
  width: 0px;
  height: 58px;
  left: 155px;
  top: 3004px;
}
.kotak {
  position: absolute;
  width: 144px;
  height: 215px;
  left: 23px;
  top: 3090px;

  background: #d9d9d9;
}
.kotak2 {
  position: absolute;
  width: 165px;
  height: 110px;
  left: 183px;
  top: 3150px;

  background: #d9d9d9;
}
.kotak3 {
  position: absolute;
  width: 165px;
  height: 105px;
  left: 23px;
  top: 3350px;

  background: #d9d9d9;
}
.kotak4 {
  position: absolute;
  width: 144px;
  height: 215px;
  left: 204px;
  top: 3290px;

  background: #d9d9d9;
}
.wedding-gift1 {
  position: absolute;
  height: 31px;
  left: 90px;
  top: 3560px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  text-align: center;

  color: #bd7b5f;
}
.kotakluar1 {
  position: absolute;
  left: 23px;
}

.qr-code {
  position: absolute;
  width: 250px;
  height: 300px;
  left: 55px;
  top: 100px;
  border-radius: 10px;
  background-color: #ffffff;
}
.isi-gift {
  position: absolute;
  width: 292px;
  height: 75px;
  left: 40px;
  top: 3630px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  text-align: center;

  color: #fff;
}
.click-here {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  gap: 4px;

  position: absolute;
  width: 108px;
  height: 37px;
  left: 132px;
  top: 3730px;
  border-radius: 5px;
}
.rsvp {
  position: fixed;
  /* width: 323px; */
  height: 50px;
  left: 50%;
  bottom: 30px;
  border-radius: 5px;
  transition: 0.5s ease-in-out;
  z-index: 1;
}

.rsvp {
  transform: translate(-50%, 100px);
}

.rsvp.show {
  transform: translate(-50%, 0);
}
.flower-down {
  position: absolute;
  height: 202.41px;
  left: 50%;
  top: 2800px;
  z-index: 0;
  transform: translate(-50%, 1000px);
}

.flower-image {
  position: absolute;
  height: 678.94px;
  left: 67.09px;
  right: 200px;
  top: 1450px;
}
.flower-image-left {
  position: absolute;
  height: 678.94px;
  left: -20px;
  top: 1420px;
}
.flower-inisial-f {
  position: absolute;
  height: 265.38px;
  left: 0px;
  top: 520px;
}
.flower-inisial-d {
  position: absolute;
  height: 318px;
  right: 0px;
  /* left: 68px; */
  top: 630px;
}
#myImg {
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  opacity: 0.7;
}
#myImg2 {
  cursor: pointer;
  transition: 0.3s;
}

#myImg2:hover {
  opacity: 0.7;
}

#myImg3 {
  cursor: pointer;
  transition: 0.3s;
}

#myImg3:hover {
  opacity: 0.7;
}

#myImg4 {
  cursor: pointer;
  transition: 0.3s;
}

#myImg4:hover {
  opacity: 0.7;
}

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

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

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

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

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

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

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

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.title-rsvp {
  position: absolute;
  height: 48px;
  left: 80px;
  right: 37.33%;
  top: 27px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  text-align: center;
  letter-spacing: 0.025em;
}
.name {
  position: absolute;
  width: 133px;
  height: 24px;
  left: 28px;
  top: 97px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}
.phone {
  position: absolute;
  width: 50px;
  height: 24px;
  left: 28px;
  top: 180px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: white;
}
.relation {
  position: absolute;
  width: 88px;
  height: 24px;
  left: 28px;
  top: 260px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;

  color: #ffffff;
}
.confirmation {
  position: absolute;
  width: 109px;
  height: 24px;
  left: 28px;
  top: 650px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;

  color: #ffffff;
}
.number-pax {
  position: absolute;
  width: 119px;
  height: 24px;
  left: 28px;
  top: 340px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;

  color: #ffffff;
}
.full-name2 {
  position: absolute;
  width: 146px;
  height: 24px;
  left: 28px;
  top: 420px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;

  color: #ffffff;
}
.wishes {
  position: absolute;
  width: 55px;
  height: 24px;
  left: 28px;
  top: 500px;

  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;

  color: #ffffff;
}
.submit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  gap: 4px;

  position: absolute;
  width: 272px;
  height: 50px;
  left: 28px;
  top: 770px;

  background: #bd7b5f;
  border-radius: 5px;
}
.form {
  background-color: transparent;
  width: 100%;
  height: 43px;
  font-family: 'Cormorant Garamond';
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0px 10px;
  color: white;
  border: solid 1px #ffffff;
}
.form::placeholder {
  color: white;
  font-family: 'Cormorant Garamond';
}

.select2-container {
  width: 100% !important;
  color: white;
  border: solid 1px #ffffff;
  background-color: transparent;
  /* padding: 10px 0px; */
}

.select2-container .select2-selection--single {
  height: 43px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
}

.select2-container .selection * {
  background-color: transparent !important;
  color: white !important;
}

.select2-results * {
  color: black !important;
}

.form2 {
  background-color: transparent;
  width: 272px;
  height: 110px;
  left: 24px;
  top: 122px;
  right: 27px;
  border: solid 1px #ffffff;
}
.form-out {
  padding-top: 10px;
}
.formluar {
  font-weight: 100 !important;
}
.form-select {
  width: unset;
}

input,
.text-cormorant {
  font-family: 'Cormorant SC';
  font-style: normal;
}

.close1 {
  position: absolute;
  width: 44px;
  height: 46.75px;
  left: 298.12px;
  top: -10px;
}
.close3 {
  position: absolute;
  width: 44px;
  height: 46.75px;
  left: 280.12px;
  top: -10px;
}
.wedding-gift {
  position: absolute;
  height: 36px;
  left: 70px;
  top: 50px;

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.025em;

  color: #ffffff;
}
.maskgroup {
  width: 293px;
  height: 405.47px;
}
.wrap-body.hide{
    height: 100vh;
    overflow: hidden;
}

.caption-after-name {
  position: absolute;
  top: 1050px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.star-after-capt {
  position: absolute;
  top: 1180px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.label-surah {
  position: absolute;
  top: 1120px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flower-image-right {
  position: absolute;
  right: 0;
  top: 1720px;
  z-index: 0;
}

.text-rekening {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);


  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 800;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0.025em;
}

.picture-1 {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
}

.name-after-1 {
  position: absolute;
  top: 280px;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, 0);

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 212;
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.025em;
  color: white;
}

.son-of-1 {
  position: absolute;
  top: 370px;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, 0);

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 200;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.025em;
  color: white;
}

.and-after-name-1 {
  position: absolute;
  top: 450px;
  left: 50%;
  transform: translate(-50%, 0);
}

.picture-2 {
  position: absolute;
  top: 500px;
  left: 50%;
  transform: translate(-50%, 0);
}

.name-after-2 {
  position: absolute;
  top: 780px;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, 0);

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 212;
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.025em;
  color: white;
}

.son-of-2 {
  position: absolute;
  top: 870px;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, 0);

  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 200;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.025em;
  color: white;
}

.islam-pict {
  position: absolute;
  top: 1000px;
  left: 50%;
  transform: translate(-50%, 0);
}

.middle-content {
  position: absolute;
  top: 1390px;
  left: 50%;
  transform: translate(-50%, 0);
}

.wrapper-bottom {
  position: absolute;
  top: 1200px;
  width: 100%;
}

.guest_2 {
  font-family: 'Cormorant SC';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  color: white;
}


/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .sound {
    bottom: 105px;
  }
}