/*
  Start
*/
@font-face {
  font-family: "BNN";
  font-display: block;
  font-weight: 100;
  src: url(BnN.ttf) format('TrueType')
}
@font-face {
  font-family: "BNN2";
  font-display: block;
  font-weight: 100;
  src: url(BnN2.ttf) format('TrueType')
}
@font-face {
  font-family: "BNN3";
  font-display: block;
  src: url(BnN3.ttf) format('TrueType')
}
@font-face {
  font-family: "BNN4";
  src: url(BnN4.woff2) format('woff2')
}
@font-face {
  font-family: "BNN5";
  src: url(BnN5.woff2) format('woff2')
}
@font-face {
  font-family: "BNN6";
  src: url(BnN6.ttf) format('TrueType')
}
@font-face {
  font-family: "BNN7";
  src: url(BnN7.ttf) format('TrueType')
}
@font-face {
  font-family: "BNN8";
  src: url(BnN8.woff2) format('woff2')
}
@font-face {
  font-family: "BNN9";
  src: url(BnN9.ttf) format('TrueType')
}
.welcome{
  position: fixed;
  z-index: 161223;
}
.the-wedding-of{
  text-align: center;
  font-size: 20px;
  /* font-weight: bold; */
}
  .bride-groom-name{
    font-family: BNN6;
    font-size: 40px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .bride-groom-name2{
    font-family: BNN8;
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    text-shadow: 0px 0px 10px #ffffff;
    color: #ffffff;
    font-weight: 100;
    letter-spacing: 5.4px;
  }
  .and{
    font-family: cursive;
    font-size: 35px;
    font-weight: 100;
  }
  .dear{
    font-size: 16px;
    text-align: center;
    font-weight: 400;
    font-family: ui-serif;
    font-weight: bold;
  }
  .nama-undangan{
    font-size: 20px;
    text-align: center;
    font-family: BNN3;
    margin-top: .5rem;
  }
  .button-open-invitation{
    background-color: VAR(--C-ACCENT-2); 
    border: 1px solid #ffffff;
    color: var(--C-TEXT-2);
    
    border-radius: 10px;
    font-weight: 200;
    height: 42px;
    width: 300px;
    font-size: 15px;
  }
/*
  End
*/

.background-container{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: flex;
    z-index: -2;
    position: absolute;
}
.white-overlay{
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: #ffffff;
  opacity: 0.3;
  z-index: -1;
}
.bottom-overlay{
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -1;
  background-color: #ffffff99;
  /* background: linear-gradient(180deg, #ffffff55 0%, #ffffffAA 70%, var(--C-PRIMARY-1) 100%); */
}

.tanggal{
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
}

.text-center{
  text-align: center;
}
.block{
  width: 100vw;
  display: block;
  height: 100%;
  /* flex-direction: column;
  justify-content: center; */
}
body{
  height: 100%;
}
/* #segment-2{
  background-color: #ff000044;
  height: 93vh;
} */
p{
  margin-block: 0;
  margin-inline: 0;
  line-height: 1;
  margin-bottom: 0!important;
}
.top-block{
  position: absolute;
  top: 8%;
  width: 100%;
}
.bottom-block{
  position: absolute;
  bottom: 100px;
  width: 100%;
  color: var(--C-TEXT-1)!important;
}
.til-bottom-block{
  position: absolute;
  bottom: 15px;
  width: 100%;
}
.image-slider-div-wrapper{
  /* position: absolute;
  bottom: 5%; */
  width: 100%;
  padding-left: .5vw;
  padding-right: .5vw;
  overflow: hidden;
  /* background-color: #ffffffbb; */
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-top: 2px double black;
  border-bottom: 2px double black;
}
.mid-block{
  position: absolute;
  top: 35%;
  width: 100%;
  color: var(--C-TEXT-2);
}
.snow-container{
  position: absolute;
  width: 100%;
  height: 100%;
}
.bible-verse{
  color: var(--C-TEXT-2);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20%;
  padding-right: 20%;
  width: 100%;
  border-radius: 1px;
  letter-spacing: .5px;
  text-shadow: 0px 0px 10px #ffffff;
  /* font-weight: bold; */
  /* background-color: #ffffffbb; */
}
.bible-text{
  text-align: center;
  font-style: italic;
  font-size: 12px;
}
.bible-book{
  margin-top: .3rem;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
.bridging{
  animation: fadeIn ease-in-out 5s;
}
.photo-wrapper{
  width: 60vw;
  overflow: hidden;
}
.top-left-corner{
  border-top-left-radius: 40px;
}
.top-right-corner{
  border-top-right-radius: 40px;
}
.our-wedding, .bride-n-groom-page, .wedding-event-page, .gallery-page, .error-page{
  text-align: center;
  background: url("texture.png") var(--C-PRIMARY-1);
  color: var(--C-TEXT-1);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.padding-page2{
  padding-left: 2%;
  padding-right: 2%;
  width:100%;
  padding-bottom: 6rem;
}
.thank-you-page{
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 15px;
}
.wedding-gift-page, .thank-you-page, .ig-filter-page{
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 1rem;
  color: var(--C-TEXT-1);
  background: url("texture.png") var(--C-PRIMARY-1);
}
.padding-page{
  padding-left: 10%;
  padding-right: 10%;
  width:100%;
}
.standart{
  font-size: 25px;
}
.bigger{
  font-size: 40px;
  letter-spacing: 10px;
  font-weight: bold;
}
.bride-n-groom-profile{
  display: flex;
  box-shadow: 0px 0px 10px 1px #00000099;
}
.profile-description{
  writing-mode: vertical-lr;
  /* font-weight: bold; */
  width: 20vw;
  position: relative;
  color: var(--C-TEXT-1);
  background: linear-gradient(180deg, var(--C-GRADIENT-START) 0%, var(--C-GRADIENT-END) 100%);
  letter-spacing: 1px;
  font-size: 1.6rem;
}
.r180{
  transform: rotate(180deg);
}
.profile-description > p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)!important;
}
.bride-n-groom-name-container{
  position: absolute;
  left: 3%;
  bottom: 3%;
  width: 94%;
  height: 90px;
  border: 2px solid white;
  border-radius: 10px;
}
.blur-bg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  filter: blur(1px);
  background-color: #00000044;
  z-index: 0;
}
.groom-name, .bride-name{
  z-index: 16122023;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}
.groom-name, .bride-name::after{
  margin-top: 1rem;
}
.groom-parents, .bride-parents{
  margin-top: .5rem;
  z-index: 16122023;
  font-size: 13px;
  letter-spacing: .7px;
}
.absolute{
  position: absolute;
}
.top50{
  top: 50%;
}
.h100{
  height: 100%;
}
.w100{
  width: 100%;
}
.bride-n-groom-detail{
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color:VAR(--C-TEXT-2);
}
.white-bg{
  background-color: white;
}
.wedding-event-photo{
  width: 100%;
  position: relative;
  box-shadow: 0px 0px 10px 1px #00000099;
}
.flex{
  display: flex;
}
.event-information{
  text-align: center;
  color: var(--C-TEXT-1);
  background-color: white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 12px;
  width: 60vw;
}
.event-name{
  writing-mode: vertical-rl;
  font-weight: bold;
  width: 20vw;
  position: relative;
  color: VAR(--C-TEXT-1);
  background: linear-gradient(180deg, var(--C-GRADIENT-START) 0%, var(--C-GRADIENT-END) 100%);
  letter-spacing: 1px;
}
.event-name > p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}
.date{
  margin-top: 1rem;
}
.date, .date-with-line{
  padding-top: 5px;
  padding-bottom: 5px;
}
.date-with-line{
  font-size: 30px;
  font-weight: 500;
  border-top: 1px solid;
  border-bottom: 1px solid; 
}
.day, .month-year{
  margin-top: 1rem;
  font-size: 18px;
}
.time{
  margin-top: 1rem;
  font-weight: bold;
  font-size: 15px;
}
.location-name{
  margin-top: 1rem;
  font-weight: bold;
}
.event-countdown{
  margin-top: 2rem;
}
.alamat{
  margin-top: 1px;
  font-size: 10px;
}
.location-button{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: VAR(--C-ACCENT-2);
  color: var(--C-TEXT-2);
  border: 1px solid white;
  border-radius: 10px;
  margin-top: 1rem;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0px 0px 10px 0px #00000094;
}
.add-to-calendar-button{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: VAR(--C-ACCENT-2);
  color: var(--C-TEXT-2);
  border: 1px solid white;
  border-radius: 10px;
  margin-top: 1rem;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0px 0px 10px 0px #00000094;
}
.countdown-wrapper{
  width: 100%;
  display: flex;
  background-color: #ffffff91;
  /* border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px; */
  border-radius: 10px;
  border: 1px solid #ffffff44;
  box-shadow: 0px 0px 1px 0px #ffffff;
}
.countdown-field{
  width: 25%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.countdown-digit{
  font-size: 25px;
}
.countdown-label{
  font-size: 12px;
  margin-top: 1px;
}
.page-title{
  font-family: BNN2;
  font-weight: bold;
  font-size: 35px;
}
.event-countdown-photo-wrapper{
  width: 100%;
  margin-top: 20px;
  border-top-left-radius: 300px;
  border-top-right-radius: 300px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid #ffffff22;
  box-shadow: 0px 0px 10px 1px #00000077;
  overflow: hidden;
  display: block;
  isolation: isolate;
}
.event-countdown-photo{
  width: 100%;
}
.separator{
  display: flex;
  align-items: center;
}
.separator::before, .separator::after{
  border-top: 1px solid;
  flex-grow: 1;
  content: "";
}
.heart-icon{
  margin: 15px;
  font-size: 16px;
}
.gallery-container{
  display: flex;
  flex-wrap: wrap;
}
.gallery-photo-wrapper{
  padding: 3.5px;
  overflow: hidden;
  height: 50vw;
}
.f1{
  flex: 30%;
}
.f2{
  flex: 50%;
}
.f3{
  flex: 70%;
}
.f4{
  flex: 100%;
}

.gallery-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  /* box-shadow: 0px 0px 10px 0px #ffffff33; */
}
.wedding-gift-text{
  font-size: 12px;
}
.button-wedding-gift{
  background-color: VAR(--C-ACCENT-1);
  color: var(--C-TEXT-1); 
  border: 1px solid #00000058;
  height: 42px;
  width: 200px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0px 5px 8px 0px #00000055;
}
.button-instagram-filter{
  background-color: VAR(--C-ACCENT-1);
  color: var(--C-TEXT-1); 
  border: 1px solid #00000058;
  border-radius: 10px;
  font-size: 15px;
  font-weight: bold;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-decoration: none;
  box-shadow: 0px 5px 8px 0px #00000055;
}
.wishes-form{
  text-align: justify;
}
.wishes-form-group{
  margin-top: 10px;
}
.wishes-form-label{

}
.wishes-form-input{

}
.button-send-wishes{
  margin-top: 10px;
  background-color: VAR(--C-ACCENT-1);
  color: var(--C-TEXT-2); 
  border: 1px solid var(--C-ACCENT-1);
  height: 42px;
  width: 100%;
  border-radius: 10px;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0px 5px 8px 0px #00000055;
}
.thank-you-photo{
  width: 100vw;
  height: 150vw;
  object-fit: cover;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: flex;
  position: absolute;
}
.thank-you-wrapper{
  width: 100vw;
  height: 150vw;
  background-color: #ffffff22;
}
.thank-you-description-wrapper{
  width: 100%;
  position: absolute;
  bottom: 2%;
}
.closing-tag{
  font-size: 16px;
  font-weight: 500;
}
.mini-date{
  font-size: 12px;
}
.account-number-card{
  padding: 12px;
}
.account-number{
  font-size: 15px;
}
.account-name{
  font-size: 15px;
}
.button-account-number{
  margin-top: 10px;
  background-color: VAR(--C-ACCENT-1);
  color: var(--C-TEXT-1); 
  border: 1px solid #00000058;
  height: 42px;
  width: 200px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0px 5px 8px 0px #00000055;
}
.toast{
  margin-left: auto;
  margin-right: auto;
}
.toast-copy{
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
}
.wishes-list-container{
  
}
.wishes-list-title{
  font-size: 25px;
  font-weight: bold;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.wishes-list{
  max-height: 50vh;
  overflow-y: scroll;
  padding-left: 1rem;
  padding-right: 1rem;
}
.wishes-card{
  background-color: #ededed;
  color: var(--C-TEXT-1);
  border-radius: 3px;
  padding: 10px;
  margin-bottom: .5rem;
}
.wishes-card-name{
  font-size: 14px;
  font-weight: bold;
}
.wishes-card-message{
  font-size: 12px;
}
.fullscreen{
  width: 100vw;
  height: 100vh;
  background-color: #00000099;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 16122023;
}
.fullscreen-photo{
  /* border: 1px solid #00000033;
  box-shadow: 0px 0px 30px 5px #000000; */
  padding-left: 5vw;
  padding-right: 5vw;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  position: relative;
}
.close-photo{
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 20px;
  color: white;
}
.fullscreen-photo-wrapper{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
}
.ig-filter-page-wrapper{
  background-color: #fff;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 10px;
  font-size: 12px;
}
.p-bnn{
  font-family: cursive;
  font-size: 24px;
}

body{
  color: var(--C-TEXT-1) !important;
  font-family: "BNN5";
}
.nick-name{
  font-size: 28px;
  font-family: "BNN9";
  line-height: 1rem;
  margin-top: 2rem;
}
.bride-n-groom-profile-wrapper{
  margin-left: 5%;
  margin-right: 5%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #ffffff;
  /* border-radius: 3%; */
  box-shadow: 0px 0px 6px 1px #00000099;
}
.bride-groom-title{
  text-align: left;
  margin-bottom: 0rem;
  padding-left: 5%;
  padding-right: 5%;
}
.thank-you-description-wrapper .bride-groom-name{
  font-size: 30px;
}
.thank-you-wrapper .block .bg-overlay{
  background-color: #ffffff80;
}
/* .aos-animate{
  -webkit-transform: translateZ(0)
} */

/* :root{
  --C-PRIMARY-1: #404747;
  --C-SECONDARY-1: #0000AA;
  --C-SECONDARY-2: #0000AA;
  --C-ACCENT-1: #69727d;
  --C-ACCENT-2: #000000;
  --C-GRADIENT-START: #ffffff00;
  --C-GRADIENT-END: #000000;
  --C-TEXT-1: #FFFFFF;
  --C-TEXT-2: #000000;
} */