@keyframes cuatrai {
   0% {
      transform: perspective(100px) rotateY(0deg);
      transform-origin: 0% 0%;
   }
   100% {
      transform: perspective(150px) rotateY(30deg);
      transform-origin: 0% 0%;
   }
}

@keyframes cuatraicopy {
   0% {
      left: 54%;
      transform:scaleX(-1) perspective(100px) rotateY(0deg);
      transform-origin: 0% 0%;
   }
   100% {
      left: 54%;
      transform:scaleX(-1) perspective(150px) rotateY(30deg);
      transform-origin: 0% 0%;
   }
}

@media only screen and (max-width: 1020px) {
   @keyframes cuatraicopy {
      0% {
         right: -50%;
         transform:scaleX(-1) perspective(100px) rotateY(0deg);
         transform-origin: 0% 0%;
      }
      100% {
         right: -50%;
         transform:scaleX(-1) perspective(150px) rotateY(30deg);
         transform-origin: 0% 0%;
     }
  } 
}

@media only screen and (max-width: 720px) {
   @keyframes cuatraicopy {
      0% {
         right: -130%;
         transform:scaleX(-1) perspective(100px) rotateY(0deg);
         transform-origin: 0% 0%;
      }
      100% {
         right: -130%;
         transform:scaleX(-1) perspective(150px) rotateY(30deg);
         transform-origin: 0% 0%;
     }
  } 
}

@keyframes left_stepinto {
    0% {
      left:0;
      transform: scale(1);
    }
    100% {
      left:-90%;
      transform: scale(2);
    }
}

@media only screen and (max-width: 1020px) {
   @keyframes left_stepinto {
      0% {
         left: -20%;
      }
      100% {
         left:-90%;
      }
   }
}

@media only screen and (max-width: 720px) {
   @keyframes left_stepinto {
      0% {
         left:0;
      }
      100% {
         left:-90%;
      }
  }
}

@keyframes right_stepinto{
    0% {
       right:0;
       transform: scale(1);
    }
    100% {
       right:-90%;
       transform: scale(2);
    }
}

@media only screen and (max-width: 1020px) {
   @keyframes right_stepinto {
      0% {
         right: -20%;
      }
      100% {
         right:-90%;
      }
   }
}


@media only screen and (max-width: 720px) {
   @keyframes right_stepinto{
      0% {
         right:0;
      }
      100% {
         right:-90%;
      }
  }
}

@keyframes cemeteryScale{
    0% {
      width: 100%;
      /* filter: brightness(1); */
      background-size: cover;
    }
    100% {
      width: 140%;
      /* filter: brightness(1.6); */
      background-size: cover;
    }
} 
@keyframes cemeteryDarkness{
   0% {
      width: 140%;
     /* filter: brightness(1.6); */
   }
   100% {
      width: 140%;
     filter: brightness(0.5);
   }
}

@keyframes landDarkness{
   0% {
     filter: brightness(0.6);
   }
   100% {
     filter: brightness(0.4);
   }
}

@keyframes cemeteryLighting1{
   0% {
     filter: brightness(0.5);
      
   }
   30% {
      filter: brightness(0.8);
      
   }
   70% {
      filter: brightness(0.5);
      
   }
   90% {
      filter: brightness(0.7);
      
   }
   100% {
      filter: brightness(0.5);
      
   }
} 

@keyframes cemeteryLighting2{
   0% {
     filter: brightness(0.5);
      
   }
   30% {
      filter: brightness(2);
      
   }
   70% {
      filter: brightness(0.5);
      
   }
   89% {
      filter: brightness(0.5);
      
   }
   90% {
      filter: brightness(1.5);
      
   }
   100% {
      filter: brightness(1);
      
   }
} 


@keyframes landScale{
    0% {
      /* bottom: 0; */
       transform: scale(1);
    }
    100% {

      /* bottom: -0.5%; */
      transform: scale(1.1);
    }
} 


@keyframes houseScale{
   0% {
      width: 30%;
      bottom: 0%;
   }
   100% {
      width: 35%;
      bottom: -7%;
   }
}

@keyframes moonScale{
   0% {
      top: -44%;
      bottom:0;
   }
   100% {
      top:-64%;
      width: 55%;
   }
} 

@media only screen and (max-width: 720px) {
   @keyframes moonScale{
      0% {
         top: -16%;
      }
      100% {
         top:-20%;
         width: 100%;
      }
   } 
}

@media only screen and (max-width: 1020px) {
   @keyframes landScale{
      0% {
         bottom: 0;
         width: 100%;
      }
      100% {
         bottom: 0;
         width: 110%;
      }
  } 
  
   @keyframes houseScale{
      0% {
         width: 58%;
         bottom: 6%;
      }
      100% {
         width: 60%;
         bottom: 5%;
      }
   } 
}


@media only screen and (max-width: 720px) {
   @keyframes landScale{
      0% {
         bottom: 0;
         width: 100%;
      }
      100% {
         bottom: -5%;
         width: 110%;
      }
  } 
  

   @keyframes houseScale{
      0% {
         width: 90%;
         bottom: 16%;
      }
      100% {
         width: 90%;
         bottom: 14%;
      }
   }
}

@keyframes taglineFadeout{
   0% { transform: translate(1px, 1px) rotate(0deg); opacity: 1; }
   10% { transform: translate(-1px, -2px) rotate(-1deg); }
   20% { transform: translate(-3px, 0px) rotate(1deg); }
   30% { transform: translate(3px, 2px) rotate(0deg); }
   40% { transform: translate(1px, -1px) rotate(1deg); }
   50% { transform: translate(-1px, 2px) rotate(-1deg); }
   60% { transform: translate(-3px, 1px) rotate(0deg); }
   70% { transform: translate(3px, 1px) rotate(-1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg); }
   90% { transform: translate(1px, 2px) rotate(0deg); }
   100% { transform: translate(1px, -2px) rotate(-1deg); opacity: 0; }
} 
/* @keyframes ghostHoverBot{
   0% {
     transform: rotate(180deg);
  }
  100% {
     transform: rotate(0deg);
  }
} */
@keyframes ghostHover{
    0% {
      height: 70%;
      width: 50%;
      opacity: 0.2;
      transform: translate(-50%,-50%) rotate(0deg);
   }
   50% {
      height: 80%;
      width: 60%;
      opacity: 1;
      transform: translate(-50%,-50%) rotate(180deg);
   }
   100% {
      height: 70%;
      width: 50%;
      opacity: 0.2;
      transform: translate(-50%,-50%) rotate(360deg);
   }
} 

@keyframes ghostHoverAndFadeOut{
   0% {
     height: 70%;
     width: 50%;
     opacity: 0.2;
     transform: translate(-50%,-50%) rotate(0deg);
   }
   25% {
      height: 100%;
      width: 71.42857143%;
      opacity: 1;
      transform: translate(-50%,-50%) rotate(180deg);
   }
   50% {
      height: 80%;
      width: 57.14285714%;
      opacity: 1;
      transform: translate(-50%,-50%) rotate(360deg);
   }
   75% {
      height: 60%;
      width: 42.85714286%;
      opacity: 1;
      transform: translate(-50%,-50%) rotate(540deg);
   }
   100% {
     height: 40%;
     width: 28.57142857%;
     opacity: 0;
     transform: translate(-50%,-50%) rotate(720deg);
   }
} 

@keyframes ghostTop{
   0% {
    top: -10%;
    left: -50%;
  }
  50% {
   top: -20%;
   left: -30%;
  }
  100% {
   top: -10%;
   left: -50%;
  }
} 
@keyframes ghostBottom{
   0% {
      bottom: -10%;
      right: -50%;
  }
  50% {
   bottom: -20%;
   right: -30%;
  }
  100% {
   bottom: -10%;
   right: -50%;
  }
} 


@keyframes selecteCard{
   0% { 
       transform: translate(1px, 1px) rotate(0deg) scale(1);
    }
   10% { 
       transform: translate(-1px, -7px) rotate(-1deg);
    }
   20% { 
       transform: translate(-10px, 0px) rotate(-5deg);
    }
   30% { 
       transform: translate(10px, 2px) rotate(0deg);
    }
   40% { 
       transform: translate(1px, -10px) rotate(10deg);
    }
   50% { 
       transform: translate(-15px, 2px) rotateX(0deg) rotateY(0)
    }
   100% { 
       transform: translate(1px, -2px) rotateX(-360deg) rotateY(-540deg)  scale(0.8); opacity: 0;
    }
} 


@keyframes shake {
   0% { transform: translate(1px, 1px) rotate(0deg); }
   10% { transform: translate(-1px, -2px) rotate(-1deg); }
   20% { transform: translate(-3px, 0px) rotate(1deg); }
   30% { transform: translate(3px, 2px) rotate(0deg); }
   40% { transform: translate(1px, -1px) rotate(1deg); }
   50% { transform: translate(-1px, 2px) rotate(-1deg); }
   60% { transform: translate(-3px, 1px) rotate(0deg); }
   70% { transform: translate(3px, 1px) rotate(-1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg); }
   90% { transform: translate(1px, 2px) rotate(0deg); }
   100% { transform: translate(1px, -2px) rotate(-1deg); }
 }
 
@keyframes fadecardout1{
   0% {
      opacity: 1;
      top:0%;
      transform: scale(1);
   }
   100% {
       display:none;
       opacity: 0;
       top:60%;
      transform: scale(0.9);
   } 
} 

@keyframes fadecardout2{
   0% {
      opacity: 1;
      top:0%;
      transform: scale(1);
   }
   100% {
       display:none;
       opacity: 0;
       top:-50%;
      transform: scale(0.9);
   } 
} 
@keyframes fadecardout3{
   0% {
      opacity: 1;
      top:0%;
      transform: scale(1);
   }
   100% {
       display:none;
       opacity: 0;
       top:-90%;
      transform: scale(0.9);
   } 
} 
@keyframes fadecardout4{
   0% {
      opacity: 1;
      top:0%;
      transform: scale(1);
   }
   100% {
       display:none;
       opacity: 0;
       top:70%;
      transform: scale(0.9);
   } 
} 

@keyframes fadecardout5{
   0% {
      opacity: 1;
      top:0%;
      transform: scale(1);
   }
   100% {
       display:none;
       opacity: 0;
       top:-90%;
      transform: scale(0.9);
   } 
} 

@keyframes opengiftcard {
   0% {
      opacity: 0;
      transform: translate(-50%, -50%) rotateY(180deg) scale(0);
   }
   100% {
      opacity: 1;
      transform: translate(-50%, -50%) rotateY(720deg) scale(1);
   }
 }
 @keyframes giftcardimage {
   0% {  opacity: 0; }
   100% {  opacity: 1; }
 }
 

 @keyframes chiabai {
   0% { 
       top:-100vh;
   }
   100% {
       top:0;
       left:0;
   }
 }

@keyframes fitInPopup {
   0% {
      opacity: 1;
      transform: translate(-50%, -50%) rotateY(720deg) scale(1);
   }
   100% {
      opacity: 1;
      top: 20px;
      left: 20px;
      width: 100%;
      height: 100%;
      transform: translate(0, 0) rotateY(720deg) scale(1);
   }
}


@keyframes cardBackgroundBriness {
   0% {
      background:#ffd96f;
   }
   100% {
      background: #fffdf8;
   }
 }
 
 @keyframes cardBackgroundBriness1 {
   0% {
      background: #ffd96f;
   }
   50% {
      background: #ff7030;
   }
   100% {
      background: #ffd96f;
   }
 }
 
 @keyframes biNgo_01 {
   0% {
      filter: brightness(1);
   }
   50% {
     
      filter: brightness(1.5);
   }
   100% {
      filter: brightness(1);
   }
 }
 

 @keyframes biNgo_01Background {
   0% {
      filter: brightness(1);
   }
   50% {
     
      filter: brightness(3);
   }
   100% {
      filter: brightness(1);
   }
 }
   
   @keyframes ongvang {
      0% {
         top: 12.9%;
         right: 14.5%;
         transform: rotate(0deg);
      }
      50% {
         top: 20%;
         right: 11%;
         transform: rotate(-20deg);
      }
      100% {
         top: 12.9%;
         right: 14.5%;
         transform: rotate(0deg);
      }
   }
 
 @keyframes phihanhgia {
   0% {
      top: 12.9%;
      right: 14.5%;
      /* top: 15.9%;
      left: 21.85%; */
   }
   50% {
      top: 8.9%;
      right: 11.5%;
      /* top: 10%;
      left: 18.85%; */
      transform: rotate(60deg);
   }
   100% {
      /* top: 15.9%;
      left: 21.85%; */
      top: 12.9%;
      right: 14.5%;
      transform: rotate(0deg);
   }
}

@keyframes  khunglonggatdau{
   0% {
      transform: rotate(359deg);
   }
   50% {
      transform: rotate(369deg);
   }
   100% {
      transform: rotate(359deg);
   }
}

@keyframes fadeouttype1  {
   0% {
      opacity: 1;
      left:0%;
   }
   100% {
      opacity:0;
     display: none;
     left:-50%;
   }
}

@keyframes ongbayphai  {
   0% {
      top:20%;
      left:23%;
      transform: rotate(0);
   }
   2% {
      transform: rotate(20deg);
   }
   90% {
      top: 10%;
      left:80%;
      transform: scale(0.8) rotate(20deg);
   }
   100% {
      top: 10%;
      left:80%;
      transform: scale(0.8) rotate(0deg);
   }
}

@media only screen and (max-width: 720px) {
   @keyframes ongbayphai  {
      0% {
         top: 25%;
         left: 6%;
         transform: rotate(0);
      }
      2% {
         transform: rotate(20deg);
      }
      90% {
         top: 31%;
         left: 89%;
         transform: scale(0.8) rotate(20deg);
      }
      100% {
         top: 31%;
         left: 89%;
         transform: scale(0.8) rotate(0deg);
      }
   }
}

@keyframes mabayphai  {
   0% {
      opacity: 0;
      top:22%;
      left:23%;
      transform: rotate(0) scaleX(-1);
   }
   2% {
      opacity: 0;
   }
   10% {
      opacity: 1;
   }
   30% {
      opacity: 0;
   }
   50% {
      opacity: 1;
   }
   60% {
      opacity: 0;
   }
   70% {
      opacity: 1;
   }
   90% {
      opacity: 0;
      top: 12%;
      left:80%;
      transform: scale(0.8) rotate(20deg)   scaleX(-1);
   }
   100% {
      opacity: 0;
      top: 12%;
      left:80%;
      transform: scale(0.8) rotate(0deg)  scaleX(-1);
   }
}

@media only screen and (max-width: 720px) {
   @keyframes mabayphai  {
      0% {
         opacity: 0;
         top: 25%;
         left: 6%;
         transform: rotate(0) scaleX(-1);
      }
      2% {
         opacity: 0;
      }
      10% {
         opacity: 1;
      }
      30% {
         opacity: 0;
      }
      50% {
         opacity: 1;
      }
      60% {
         opacity: 0;
      }
      70% {
         opacity: 1;
      }
      90% {
         opacity: 0;
         top: 31%;
         left: 89%;
         transform: scale(0.8) rotate(20deg)   scaleX(-1);
      }
      100% {
         opacity: 0;
         top: 31%;
         left: 89%;
         transform: scale(0.8) rotate(0deg)  scaleX(-1);
      }
   }
}

@keyframes ongbayphai_chantrai  {
   0% {
      transform: rotate(0deg);
   }
   2% {
      transform: rotate(31deg);
   }
   95% {
      transform: rotate(31deg);
   }
   100% {
      transform: rotate(0);
   }
   /* 20% {
      transform: rotate(31deg);
   }
   21% {
      transform: rotate(-31deg);
   }
   50% {
      transform: rotate(-31deg);
   }

   100% {
      transform: rotate(0);
   } */
}

@keyframes ongbayphai_chanphai  {
   0% {
      transform: rotate(0deg);
   }
   2% {
      transform: rotate(15deg);
   }
   95% {
      transform: rotate(15deg);
   }
   100% {
      transform: rotate(0);
   }
}

@keyframes ongbaytrai_saunha  {
   0% {
      top: 10%;
      left:80%;
      transform: scale(0.8) rotate(0deg);
   }
   2% {
      transform:  scale(0.8) rotate(-31deg);
   }
   50% {
      left:50%;
      top:40%;
      transform:  scale(0.4) rotate(-31deg);
   }
   60% {
      left:40%;
      top:40%;
      transform:  scale(0.4) rotate(-31deg);
   }
   98% {
      top:20%;
      left:10%;
      transform:  scale(0.4) rotate(-31deg);
   }
   100% {
      top:20%;
      left:10%;
      transform:scale(0.4) rotate(0);
   }
}

@media only screen and (max-width: 720px) {
   @keyframes ongbaytrai_saunha  {
      0% {
         top: 31%;
         left: 89%;
         transform: scale(0.8) rotate(0deg);
      }
      2% {
         transform:  scale(0.8) rotate(-31deg);
      }
      50% {
         left:50%;
         top:40%;
         transform:  scale(0.4) rotate(-31deg);
      }
      60% {
         left:40%;
         top:40%;
         transform:  scale(0.4) rotate(-31deg);
      }
      98% {
         top:20%;
         left:10%;
         transform:  scale(0.4) rotate(-31deg);
      }
      100% {
         top: 25%;
         left: 6%;
         transform:scale(0.4) rotate(0);
      }
   }
}
@keyframes ongbaytrai_saunha_chantrai  {
   0% {
      transform: rotate(0deg);
   }
   2% {
      transform: rotate(-31deg);
   }
   95% {
      transform: rotate(-31deg);
   }
   100% {
      transform: rotate(0);
   }
   /* 20% {
      transform: rotate(31deg);
   }
   21% {
      transform: rotate(-31deg);
   }
   50% {
      transform: rotate(-31deg);
   }

   100% {
      transform: rotate(0);
   } */
}

@keyframes ongbaytrai_saunha_chanphai  {
   0% {
      transform: rotate(0deg);
   }
   2% {
      transform: rotate(-15deg);
   }
   95% {
      transform: rotate(-15deg);
   }
   100% {
      transform: rotate(0);
   }
   /* 20% {
      transform: rotate(15deg);
   }
   21% {
      transform: rotate(-15deg);
   }
   50% {
      transform: rotate(-15deg);
   }
   100% {
      transform: rotate(0);
   } */
}


@keyframes ongbaytrai_conmakhongchan_baytrai_saunha  {
   0% {
      top: 12%;
      left:80%;
      opacity: 1;
      transform: scale(0.8) rotate(0deg);
   }
  
   2% {
      opacity: 1;
      transform:  scale(0.8) rotate(-31deg);
   }
   30% {
      opacity: 0;
   }
   50% {
      left:50%;
      top:42%;
      opacity: 1;
      transform:  scale(0.4) rotate(-31deg);
   }
   60% {
      left:40%;
      top:42%;
      opacity: 0;
      transform:  scale(0.4) rotate(-31deg);
   }
   98% {
      top: 22%;
      left:10%;
      opacity: 1;
      transform:  scale(0.4) rotate(-31deg);
   }
   100% {
      top: 22%;
      left:10%;
      opacity: 1;
      transform:scale(0.4) rotate(0);
   }
}


@media only screen and (max-width: 720px) {
   @keyframes ongbaytrai_conmakhongchan_baytrai_saunha  {
      0% {
         top: 31%;
         left: 89%;
         opacity: 1;
         transform: scale(0.8) rotate(0deg);
      }
   
      2% {
         opacity: 1;
         transform:  scale(0.8) rotate(-31deg);
      }
      30% {
         opacity: 0;
      }
      50% {
         left:50%;
         top:42%;
         opacity: 1;
         transform:  scale(0.4) rotate(-31deg);
      }
      60% {
         left:40%;
         top:42%;
         opacity: 0;
         transform:  scale(0.4) rotate(-31deg);
      }
      98% {
         top: 15%;
         left: 6%;
         opacity: 1;
         transform:  scale(0.4) rotate(-31deg);
      }
      100% {
         top: 15%;
         left: 6%;
         opacity: 1;
         transform:scale(0.4) rotate(0);
      }
   }

}


@keyframes ongbayphai_giua  {
   0% {
      top: 22%;
      left:10%;
      transform: scale(0.4) rotate(0);
   }
   2% {
      transform: scale(0.4) rotate(20deg);
   }
   90% {
      top:20%;
      left:23%;
      transform: scale(1) rotate(20deg);
   }
   100% {
      top:20%;
      left:23%;
      transform: scale(1) rotate(0deg);
   }
}
@media only screen and (max-width: 720px) {
   @keyframes ongbayphai_giua  {
      0% {
         top: 15%;
         left: 6%;
         transform: scale(0.4) rotate(0);
      }
      2% {
         transform: scale(0.4) rotate(20deg);
      }
      90% {

         top: 25%;
         left: 6%;
         transform: scale(1) rotate(20deg);
      }
      100% {

         top: 25%;
         left: 6%;
         transform: scale(1) rotate(0deg);
      }
   }
}

@keyframes mabayphai_giua  {
   0% {
      top: 24%;
      left:10%;
      opacity: 0;
      transform: scale(0.4) rotate(0);
   }
   2% {
      transform: scale(0.4) rotate(20deg);
      opacity: 0;
   }
   30% {
      opacity: 0;
   }
   50% {

      opacity: 0;
   }
   90% {
      opacity: 0;
      top:22%;
      left:23%;
      transform: scale(1) rotate(20deg);
   }
   100% {
      opacity: 0;
      top:22%;
      left:23%;
      transform: scale(1) rotate(0deg);
   }
}

@keyframes hamieng  {
   0% {
      top: 26%;
   }
 
   100% {
      top:28%;
   }
}

@media only screen and (max-width: 720px) {
   @keyframes hamieng  {
      0% {
         top: 26%;
      }
    
      100% {
         top:27%;
      }
   }
}

@keyframes batmapquangtai  {
   0% {
      
      transform: rotate3d(90, 1, 1, 0deg);
   }
   100% {
      transform: rotate3d(90, 1, 1, 50deg);
   }
   /* 100% {
      transform: rotate3d(90, 1, 1, 0deg);
   } */
}
@keyframes daynapquangtai  {
   0% {
      
      transform: rotate3d(90, 1, 1, 50deg);
   }
   100% {
      transform: rotate3d(90, 1, 1, 0deg);
   }
   /* 100% {
      transform: rotate3d(90, 1, 1, 0deg);
   } */
}


@keyframes xacuop_taytrai  {
   0% {
      visibility:visible;
    
   }
   2% {
      visibility:visible;
      transform: rotate3d(90, 1, 1, 89deg);
   }
   
   100% {
      visibility:visible;
      transform: rotate3d(90, 1, 1,  0deg);
   }
   /* 100% {
      transform: rotate3d(90, 1, 1, 0deg);
   } */
}
@keyframes xacuop_taytrai_chui  {
   0% {
      visibility:visible;
      transform: rotate3d(90, 1, 1,  0deg);
   }
   
   90% {
      visibility:visible;
      transform: rotate3d(90, 1, 1, 89deg);
   }
   100% {
      visibility:hidden;
      opacity: 0;
      transform: rotate3d(90, 1, 1, 89deg);
   }
   /* 100% {
      transform: rotate3d(90, 1, 1, 0deg);
   } */
}


@keyframes xacuop_dau  {
   0% {
      bottom: 15%;
    
   }
   100% {
      bottom: 35%;
   }
   /* 100% {
      transform: rotate3d(90, 1, 1, 0deg);
   } */
}
@keyframes xacuop_dau_chui  {
   0% {
      bottom: 35%;
   }
   100% {
      bottom: 15%;
    
   }
   /* 100% {
      transform: rotate3d(90, 1, 1, 0deg);
   } */
}

@keyframes smoke1  {
   0% {
      margin-left: -11.75%;
   }
   50% {
      margin-left: -5%;
   }
   100% {

      margin-left: -11.75%;
   }
}

@keyframes smoke2  {
   0% {
      margin-left: 60%;
   }
   50% {
      margin-left: 20%;
   }
   100% {
      margin-left: 60%;
   }
}

@keyframes smoke3  {
   0% {
      margin-left: 34%;
   }
   50% {
      margin-left: 20%;
   }
   100%{
      margin-left: 34%;
   }
}

@keyframes xacuop_mat  {
   0% {
      opacity: 1;
    left: 67%;
   }
   25% {
      opacity: 1;
      left: 67.5%;
   }
   50% {
      opacity: 1;
      left: 68.5%;
   }
   75% {
      opacity: 1;
      left: 67.75%;
   }
   100% {
      opacity: 1;
      left: 67%;
    
   }
   /* 100% {
      transform: rotate3d(90, 1, 1, 0deg);
   } */
}