@media (max-width: 712px) {
  .button-open-invitation{
    height: 42px;
    width: 200px;
    font-size: 15px;
  }
  .bible-verse{
    color: var(--C-TEXT-2);
    padding-left: 5%;
    padding-right: 5%;
    text-shadow: 0px 0px 10px #ffffff;
  }
  .mid-block{
    top: 35%;
  }
}
html{
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    height: -webkit-fill-available;
}
.smooth{
    /* scroll-snap-align: start; */
}
.page{
  width: 100vw;
  height: 100vh;
  display: flex;
}
.envelope, .maps, .gift-icon, .copy-icon, .ig-icon, .calendar-icon{
  vertical-align: text-top;
  margin-right: 5px;
  margin-top: 2px;
}
.snow{
  position: absolute;
  /* animation: fall ease-in infinite, sway ease-in-out infinite; */
  animation: fall ease-in-out 5s infinite;
  color: var(--C-TEXT-1);
}
.hide-to-bottom{
  position: fixed;
  animation: hideToBottom ease-out 1s 1;
  -webkit-animation-fill-mode: forwards;
}
@keyframes hideToBottom{
  0% {
    top: 0vh;
  }
  50%{
    top: 0vh;
    opacity: 0.8;
  }
  80%{
    opacity: 0.5;
  }
  100% {
    /* top: 100vh; */
    transform: translateY(100vh);
    opacity: 0;
    visibility: hidden;
    z-index: -2;
  }
}
@keyframes floatUp {
  0% {
    transform: translateY(100vh);
  }
  
  100% {
    transform: translateY(-480px);
  }
}
@keyframes fall {
  0% {
    opacity: 0;
    top: 0vh;
    /* transform: translateY(-480px); */
  }
  50% {
    opacity: 0.5;
  }
  100% {
    /* top: 100vh; */
    transform: translateY(100vh);
    opacity: 1;
  }
}
@keyframes sway {
  0% {
    margin-left: 0;
  }
  25% {
    margin-left: 50px;
  }
  50% {
    margin-left: -50px;
  }
  75% {
    margin-left: 50px;
  }
  100% {
    margin-left: 0;
  }
}
.block{
  position: relative;
}
.op01{
  opacity: 0.1;
}
.bride-photo, .groom-photo{
  height: 45vh;
  width: 100%;
  object-fit: cover;
}
.bride-n-groom-page, .wedding-event-page, .gallery-page{
  background-color: var(--C-PRIMARY-1);
  margin-top: -1px;
  /* display: flex; */
}
.wishes-page{
  background-color: var(--C-ACCENT-2);
  color: var(--C-TEXT-2);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.w100{
  width: 100vw;
}
.play-music-container{
  position: fixed;
  bottom: 50px;
  left: 5px;
}
.play-music-image{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1.5px solid #fe93ab;
  opacity: .9;
}
.tanggal{
  margin-top: 20px;
}
.our-wedding > p{
  margin-top: 0rem;
  font-family: 'BNN5';
}
.photo-wrapper{
  position: relative;
  display: block;
}
.pemberkatan, .resepsi{
  overflow: hidden;
}
.spinner-text{
  flex: 2;
  overflow: visible;
  padding: 5%;
}
.spinner-text svg{
  max-width: 100%;
  height: auto;
  overflow: visible;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 12px;
  animation: rotate linear 20s infinite;
}
.spinner-text svg path{
  fill: transparent;
}
.sliding-image{
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
}
.bg-overlay{
  background: linear-gradient(180deg, #10101000 70%, var(--C-PRIMARY-1) 100%);
  background-color: #00000055;
  position: absolute;
  width: 100%;
  height: 100%;
}
.img-slide{
  width: 32vw;
  height: 32vw;
  margin-left: .5vw;
  margin-right: .5vw;
  object-fit: cover;
  box-shadow: 0px 0px 10px 1px #ffffff99;
}
.img-slide-end{
  transform: translate(-25vw);
}
.slide{
  /* animation: slide-image 40s forwards; */
}

.custom-arrow{
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 30px;
  height: 50px;
  border: 0;
  background-color: #00000022;
  opacity: 0;
  animation: hideMe ease-out 5s;
}
.splide__arrow--next{
  right: 1vw !important;
}
.splide__arrow--prev{
  left: 1vw !important;
}
.custom-arrow > svg{
  fill: white;
  height: 100px;
  width: 100px;
}
.show-navigation-button .custom-arrow{
  animation: hideMe ease-out 3s;
}
@keyframes hideMe{
  0%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes slide-image {
  0% {
    transform: translate(0vw);
  }
  /* 25%{
    transform: translate(-25vw);
  }
  50%{
    transform: translate(-50vw);
  }
  75%{
    transform: translate(-75vw);
  } */
  100%{
    transform: translate(-100vw);
  }
}
.slide-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5%;
}
.sliding-image .img-slide:nth-child(1){
  animation: slide-image1 linear 40s infinite;
}
.sliding-image .img-slide:nth-child(2){
  animation: slide-image2 linear 40s infinite;
}
.sliding-image .img-slide:nth-child(3){
  animation: slide-image3 linear 40s infinite;
}
.sliding-image .img-slide:nth-child(4){
  animation: slide-image4 linear 40s infinite;
}
.sliding-image .img-slide:nth-child(5){
  animation: slide-image5 linear 40s infinite;
}
.sliding-image .img-slide:nth-child(6){
  animation: slide-image6 linear 40s infinite;
}
.sliding-image .img-slide:nth-child(7){
  animation: slide-image7 linear 40s infinite;
}
.sliding-image .img-slide:nth-child(8){
  animation: slide-image8 linear 40s infinite;
}
@keyframes slide-image1 {
  0% {
    transform: translate(0vw);
  }
  12.5%{
    opacity: 1;
    transform: translate(-33vw);
  }
  12.6%{
    opacity: 0;
  }
  49.9%{
    opacity: 0;
  }
  50%{
    opacity: 1;
    transform: translate(132vw);
  }
  100%{
    transform: translate(0vw);
  }
}
@keyframes slide-image2 {
  0% {
    transform: translate(0vw);
  }
  25%{
    opacity: 1;
    transform: translate(-66vw);
  }
  25.1%{
    opacity: 0;
  }
  49.9%{
    opacity: 0;
  }
  50%{
    opacity: 1;
    transform: translate(132vw);
  }
  100%{
    transform: translate(0vw);
  }
}
@keyframes slide-image3 {
  0% {
    transform: translate(0vw);
  }
  37.5%{
    opacity: 1;
    transform: translate(-99vw);
  }
  37.8%{
    opacity: 0;
  }
  49.9%{
    opacity: 0;
  }
  50%{
    opacity: 1;
    transform: translate(132vw);
  }
  100%{
    transform: translate(0vw);
  }
}
@keyframes slide-image4 {
  0% {
    transform: translate(0vw);
  }
  50%{
    opacity: 1;
    transform: translate(-132vw);
  }
  50.1%{
    opacity: 0;
  }
  62.4%{
    opacity: 0;
  }
  62.5%{
    opacity: 1;
    transform: translate(99vw);
  }
  100%{
    transform: translate(0vw);
  }
}
@keyframes slide-image5 {
  0% {
    opacity: 1;
    transform: translate(0vw);
  }
  62.5%{
    opacity: 1;
    transform: translate(-165vw);
  }
  62.6%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
@keyframes slide-image6 {
  0% {
    opacity: 1;
    transform: translate(0vw);
  }
  75%{
    opacity: 1;
    transform: translate(-198vw);
  }
  75.1%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
@keyframes slide-image7 {
  0% {
    opacity: 1;
    transform: translate(0vw);
  }
  87.5%{
    opacity: 1;
    transform: translate(-231vw);
  }
  87.6%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
@keyframes slide-image8 {
  0% {
    opacity: 0;
  }
  49.9%{
    opacity: 1;
  }
  50%{
    opacity: 1;
    transform: translate(-132vw);
  }
  100%{
    opacity: 1;
    transform: translate(-264vw);
  }
}
.bridging .background-container{
  animation: fadeImage ease-in-out 20s infinite;
}
.bridging .background-container:nth-of-type(1){
  animation-delay: 15s;
}
.bridging .background-container:nth-of-type(2){
  animation-delay: 10s;
}
.bridging .background-container:nth-of-type(3){
  animation-delay: 5s;
}
.bridging .background-container:nth-of-type(4){
  animation-delay: 0s;
}

@keyframes fadeImage {
  0% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  25%{
    opacity: 0;
  }
  93%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


[data-aos][data-aos][data-aos-duration="4000"],body[data-aos-duration="4000"] [data-aos]{transition-duration:4s}
[data-aos][data-aos][data-aos-duration="5000"],body[data-aos-duration="5000"] [data-aos]{transition-duration:5s}
[data-aos][data-aos][data-aos-duration="6000"],body[data-aos-duration="6000"] [data-aos]{transition-duration:6s}
[data-aos][data-aos][data-aos-duration="7000"],body[data-aos-duration="7000"] [data-aos]{transition-duration:7s}
[data-aos][data-aos][data-aos-duration="8000"],body[data-aos-duration="8000"] [data-aos]{transition-duration:8s}
[data-aos][data-aos][data-aos-duration="9000"],body[data-aos-duration="9000"] [data-aos]{transition-duration:9s}
[data-aos][data-aos][data-aos-duration="10000"],body[data-aos-duration="10000"] [data-aos]{transition-duration:10s}

#zoom{opacity:0.8;transition-property:opacity,transform}
#zoom.aos-animate{opacity:1;transform:translateZ(0) scale(1.3)}
[data-aos=zoom-in-1]{transform:scale(1)}

#zoom2{opacity:0.8;transition-property:opacity,transform}
#zoom2.aos-animate{opacity:1;transform:translateZ(0) scale(1.5)}
[data-aos=zoom-in-2]{transform:scale(1)}

:root{
  --C-PRIMARY-1: #f9e8d9; /* #fef2df; */
  --C-SECONDARY-1: #f2b277;
  --C-SECONDARY-2: #d6ccc2;
  --C-ACCENT-1: #E2A169;
  --C-ACCENT-2: #4D3B33;
  --C-GRADIENT-START: #a9816633;
  --C-GRADIENT-2: #00000033;
  --C-GRADIENT-3: #00000055;
  --C-GRADIENT-4: #00000099;
  --C-GRADIENT-END: #fef2df;/*fef2df*/
  --C-TEXT-1: #4D3B33;
  --C-TEXT-2: #ffffff;
}
/* --C-PRIMARY-1: #C8E7F5;
  --C-SECONDARY-1: #67A3D9;
  --C-SECONDARY-2: #F6D2E0;
  --C-ACCENT-1: #0671B7;
  --C-ACCENT-2: #F8B7CD; */