.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
    
      to {
        opacity: 1;
      }
    }

    
    .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
        transform: translateY(100px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    
    .fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeDownAnime{
      from {
        opacity: 0;
        transform: translateY(-100px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    

    
    .fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
        transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    

    
    .fadeRight{
    animation-name:fadeRightAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
        opacity: 0;
        transform: translateX(100px);
      }
    
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .flipDown{
        animation-name:flipDownAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes flipDownAnime{
          from {
            transform: perspective(2500px) rotateX(100deg);
             opacity: 0;
          }
        
          to {
            transform: perspective(2500px) rotateX(0);
            opacity: 1;
          }
        }
        
        

        .flipLeft{
        animation-name:flipLeftAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        perspective-origin:left center;
        opacity:0;
        }
        
        @keyframes flipLeftAnime{
          from {
           transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
             opacity: 0;
          }
        
          to {
          transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
          opacity: 1;
          }
        }
        
        

        .flipLeftTop{
        animation-name:flipLeftTopAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes flipLeftTopAnime{
          from {
           transform: translate(-20px,80px) rotate(-15deg);
             opacity: 0;
          }
        
          to {
           transform: translate(0,0) rotate(0deg);
            opacity: 1;
          }
        }

        .flipRight{
        animation-name:flipRightAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        perspective-origin:right center;
        opacity:0;
        }
        
        @keyframes flipRightAnime{
          from {
           transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
             opacity: 0;
          }
        
          to {
          transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
          opacity: 1;
          }
        }
        

        .flipRightTop{
        animation-name:flipRightTopAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        opacity:0;
        }
        
        @keyframes flipRightTopAnime{
          from {
           transform: translate(-20px,80px) rotate(25deg);
           opacity: 0;
          }
        
          to {
           transform: translate(0,1) rotate(0deg);
            opacity: 1;
          }
        }

        .rotateX{
            animation-name:rotateXAnime;
            animation-duration:1s;
            animation-fill-mode:forwards;
        }
        
        @keyframes rotateXAnime{
            from{
                transform: rotateX(0);
                }
            to{
                transform: rotateX(-360deg);
                }
        }
        
        
   
        .rotateY{
            animation-name:rotateYAnime;
            animation-duration:1s;
            animation-fill-mode:forwards;
        }
        
        @keyframes rotateYAnime{
            from{
                transform: rotateY(0);
                }
            to{
                transform: rotateY(-360deg);
                }
        }
        
        

        .rotateLeftZ{
            animation-name:rotateLeftZAnime;
            animation-duration:1s;
            animation-fill-mode:forwards;
        }
        
        @keyframes rotateLeftZAnime{
            from{
                transform: rotateZ(0);
                }
            to{
                transform: rotateZ(-360deg);
                }
        }
        
        

        .rotateRightZ{
            animation-name:rotateRightZAnime;
            animation-duration:1s;
            animation-fill-mode:forwards;
        }
        
        @keyframes rotateRightZAnime{
            from{
                transform: rotateZ(0);
                }
            to{
                transform: rotateZ(360deg);
                }
        }

        .splashGame {
          position: fixed;
          width: 100%;
          height: 100%;
          background: #333;
          z-index: 9999999;
          text-align:center;
          color:#fff;
        }
      
      .splashGameBg{
          display: none;
        content: "";
        position:fixed;
        transform: scale(100);
        background-color: #333;
        z-index: 999;
          top:calc(50% - 1rem);
          left:calc(50% - 1rem);
        width: 2rem;
        height: 2rem;
        display: block;
          border-radius: 50%;	
        animation-name:GameAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
      }

      @keyframes GameAnime{
        0% {
          transform: scale(100);
        
        }
        100% {
          transform: scale(0);
          display: none;
        }
      }
      
      .containerGame{
        opacity: 0;
        animation-name:GameAnimeAppear;
        animation-duration:1s;
        animation-delay: 0.8s;
        animation-fill-mode:forwards;
        opacity: 0;
      }
      
      @keyframes GameAnimeAppear{
        0% {
        opacity: 0;
        }
        100% {
        opacity: 1;
      }
      }