/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -moz-animation-name: fade;
  -moz-animation-duration: 1.5s;
  -ms-animation-name: fade;
  -ms-animation-duration: 1.5s;
  -o-animation-name: fade;
  -o-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
  /*display:block;*/
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.fade2 {
      -webkit-animation-name: fade2;
  -webkit-animation-duration: 2s;
  -moz-animation-name: fade2;
  -moz-animation-duration: 2s;
  -ms-animation-name: fade2;
  -ms-animation-duration: 2s;
  -o-animation-name: fade2;
  -o-animation-duration: 2s;
  animation-name: fade2;
  animation-duration: 2s;
  /*display:block;*/
}

@keyframes fade2 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInTop{
  0% {
      opacity: 0;
      transform: translateY(-50px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.muncul-animasi {
    
  -webkit-animation: fadeInTop 3s ease-out both;
  -moz-animation: fadeInTop 3s ease-out both;
  -ms-animation: fadeInTop 3s ease-out both;
  -o-animation: fadeInTop 3s ease-out both;
  animation: fadeInTop 3s ease-out both;
}

.muncul-animasi1{
      -webkit-animation: fadeInTop 5s both;
  /*-webkit-animation-delay: 3s;*/
  -moz-animation: fadeInTop 5s both;
  /*-moz-animation-delay: 3s;*/
  -ms-animation: fadeInTop 5s both;
  /*-ms-animation-delay: 3s;*/
  -o-animation: fadeInTop 5s both;
  /*-o-animation-delay: 3s;*/
  animation: fadeInTop 5s both;
  /*animation-delay:3s;*/
}

.muncul-animasi2{
    -webkit-animation: fadeInTop 5s both;
  /*-webkit-animation-delay: 1s;*/
  -moz-animation: fadeInTop 5s both;
  /*-moz-animation-delay: 1s;*/
  -ms-animation: fadeInTop 5s both;
  /*-ms-animation-delay: 1s;*/
  -o-animation: fadeInTop 5s both;
  /*-o-animation-delay: 1s;*/
  animation: fadeInTop 5s both;
  /*animation-delay:1s;*/
}

.muncul-animasi3{
    -webkit-animation: fadeInTop 5s both;
  /*-webkit-animation-delay: 2s;*/
  -moz-animation: fadeInTop 5s both;
  /*-moz-animation-delay: 2s;*/
  -ms-animation: fadeInTop 5s both;
  /*-ms-animation-delay: 2s;*/
  -o-animation: fadeInTop 5s both;
  /*-o-animation-delay: 2s;*/
  animation: fadeInTop 5s both;
  /*animation-delay:2s;*/
}

.fadeInLeft {
    -webkit-animation: fadeInLeft 3s both;
  
  -moz-animation: fadeInLeft 3s both;
  -ms-animation: fadeInLeft 3s both;
  -o-animation: fadeInLeft 3s both;
  animation: fadeInLeft 3s both;
}

@keyframes fadeInLeft{
  0% {
      opacity: 0;
      transform: translateX(-100px);
  }
  100% {
      opacity: 1;
      transform: translatex(0);
  }
}

.fadeInRight {
    -webkit-animation: fadeInRight 3s both;
  -moz-animation: fadeInRight 3s both;
  -ms-animation: fadeInRight 3s both;
  -o-animation: fadeInRight 3s both;
  animation: fadeInRight 3s both;
  /*animation-duration: 2s;*/
  /*display:block;*/
}

@keyframes fadeInRight{
  0% {
      opacity: 0;
      transform: translateX(100px);
  }
  100% {
      opacity: 1;
      transform: translatex(0);
  }
}

.fadeInY {
    -webkit-animation: fadeInY 1s both;
  
  -moz-animation: fadeInY 1s both;
  -ms-animation: fadeInY 1s both;
  -o-animation: fadeInY 1s both;
  animation: fadeInY 1s both;
  
}

@keyframes fadeInY{
  0% {
      opacity: 0;
      transform: translateY(5%);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Animasi fade halus */
@keyframes fadeBg {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.save-the-date-bg1.animate {
  -webkit-animation: fadeBg 4s both;
  -moz-animation: fadeBg 4s both;
  -ms-animation: fadeBg 4s both;
  -o-animation: fadeBg 4s both;
  animation: fadeBg 4s both;
  animation-delay: 0s;
}

.save-the-date-bg2.animate {
  -webkit-animation: fadeBg 4s both;
  -moz-animation: fadeBg 4s both;
  -ms-animation: fadeBg 4s both;
  -o-animation: fadeBg 4s both;
  animation: fadeBg 4s both;
  animation-delay: 1s;
}

.save-the-date-bg3.animate {
  -webkit-animation: fadeBg 4s both;
  -moz-animation: fadeBg 4s both;
  -ms-animation: fadeBg 4s both;
  -o-animation: fadeBg 4s both;
  animation: fadeBg 4s both;
  animation-delay: 2s;
}

.save-the-date-bg4.animate {
  -webkit-animation: fadeBg 4s both;
  -moz-animation: fadeBg 4s both;
  -ms-animation: fadeBg 4s both;
  -o-animation: fadeBg 4s both;
  animation: fadeBg 4s both;
  animation-delay: 3s;
}

.fourth-bg1.animate {
  -webkit-animation: fadeBg 4s both;
  -moz-animation: fadeBg 4s both;
  -ms-animation: fadeBg 4s both;
  -o-animation: fadeBg 4s both;
  animation: fadeBg 4s both;
  animation-delay: 0s;
}

.fourth-bg2.animate {
  -webkit-animation: fadeBg 4s both;
  -moz-animation: fadeBg 4s both;
  -ms-animation: fadeBg 4s both;
  -o-animation: fadeBg 4s both;
  animation: fadeBg 4s both;
  animation-delay: 1s;
}

.fourth-bg3.animate {
  -webkit-animation: fadeBg 4s both;
  -moz-animation: fadeBg 4s both;
  -ms-animation: fadeBg 4s both;
  -o-animation: fadeBg 4s both;
  animation: fadeBg 4s both;
  animation-delay: 2s;
}

.fourth-bg4.animate {
  -webkit-animation: fadeBg 4s both;
  -moz-animation: fadeBg 4s both;
  -ms-animation: fadeBg 4s both;
  -o-animation: fadeBg 4s both;
  animation: fadeBg 4s both;
  animation-delay: 3s;
}

.bgSaveTheDate {
    -webkit-animation: bgSaveTheDate 3s both;
  -moz-animation: bgSaveTheDate 3s both;
  -ms-animation: bgSaveTheDate 3s both;
  -o-animation: bgSaveTheDate 3s both;
  animation: bgSaveTheDate 3s both;
  
}


@keyframes bgSaveTheDate {
  0% { 
      background:#fffdf6; 
      /*opacity:0;*/
      
  }
  25% { 
      background:url('../image/savethedate-1.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
      /*opacity:0.25;*/
      
  }
  50% { 
      background:url('../image/savethedate-2.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
      /*opacity:0.5;*/
      
  }
  75% { 
      background:url('../image/savethedate-3.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
      /*opacity:0.75;*/
      
  }
  100% { 
      /*opacity:1;*/
       background:url('../image/savethedate-4.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
}

.bgFourth {
    -webkit-animation: bgFourth 3s both;
  -moz-animation: bgFourth 3s both;
  -ms-animation: bgFourth 3s both;
  -o-animation: bgFourth 3s both;
  animation: bgFourth 3s both;
  
}


@keyframes bgFourth {
  0% { 
      background:#fffdf6; 
      /*opacity:0; */
      
  }
  25% { 
      /*opacity:0.25;*/
       background:url('../image/fourth-1.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
  50% { 
      /*opacity:0.5;*/
       background:url('../image/fourth-2.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
  75% { 
      /*opacity:0.75;*/
       background:url('../image/fourth-3.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
  100% { 
      /*opacity:1;*/
       background:url('../image/fourth-4.webp');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
  }
}