/*javascript code of animations for guaiguaichai logo in Home Page*/
  
.animate {
    -webkit-animation-name: example; 
    -webkit-animation-duration: 1s; 
  -webkit-animation-iteration-count: infinite;
    animation-name: example;
    animation-duration: 1s;
animation-iteration-count: infinite;
}

@-webkit-keyframes example {
8%   {transform:translate(0px, -3px) rotate(3deg); }
16%   {transform:translate(0px, -6px) rotate(6deg); }
24%   {transform:translate(-3px, -9px) rotate(9deg); }
32%   {transform:translate(-3px, -12px) rotate(12deg); }
40%   {transform:translate(-6px, -12px) rotate(6deg); }
48%   {transform:translate(-6px, -12px) rotate(0deg); }
56%   {transform:translate(-6px, -9px) rotate(-6deg); }
64%   {transform:translate(-6px, -6px) rotate(-12deg); }
72%   {transform:translate(-6px, -3px) rotate(-16deg); }
80%   {transform:translate(-3px, 0px) rotate(-12deg); }
88%   {transform:translate(-1px, 0px) rotate(-6deg); }
96%   {transform:translate(0px, 0px) rotate(-3deg); }
}

@keyframes example {
8%   {transform:translate(0px, -3px) rotate(3deg); }
16%   {transform:translate(0px, -6px) rotate(6deg); }
24%   {transform:translate(-3px, -9px) rotate(9deg); }
32%   {transform:translate(-3px, -12px) rotate(12deg); }
40%   {transform:translate(-6px, -12px) rotate(6deg); }
48%   {transform:translate(-6px, -12px) rotate(0deg); }
56%   {transform:translate(-6px, -9px) rotate(-4deg); }
64%   {transform:translate(-6px, -6px) rotate(-8deg); }
72%   {transform:translate(-6px, -3px) rotate(-12deg); }
80%   {transform:translate(-3px, 0px) rotate(-16deg); }
88%   {transform:translate(-1px, 0px) rotate(-12deg); }
96%   {transform:translate(0px, 0px) rotate(-6deg); }
}

/* animation for links*/
.shakefade {

   opacity: 1;
   transition: opacity .1s ease-in-out;
   -moz-transition: opacity .1s ease-in-out;
   -webkit-transition: opacity .1s ease-in-out;
   }

   .shakefade:hover {
      opacity: 0.7;
  animation: shake 0.5s;
  animation-iteration-count: infinite;
      }

@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); }
}


/*Flash button*/


.newbutton {
background-color: transparent;
  border: none;
  color: #F9F9F4;
  cursor: pointer;
  display: inline-block;
  font-family: Microsoft YaHei;
  font-size: 25px;
font-weight:500;
  padding: 1px 1px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}


@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #ffffff, 0 0 15px #FFFAFA, 0 0 25px #F0FFF0, 0 0 35px #F5FFFA, 0 0 45px #F0FFFF, 0 0 55px #F0F8FF, 0 0 65px #F8F8FF;
  }
  to {
    text-shadow: 0 0 15px #FFFAFA, 0 0 25px #F0FFF0, 0 0 35px #F5FFFA, 0 0 45px #F0FFFF, 0 0 55px #F0F8FF, 0 0 65px #F8F8FF, 0 0 75px #F5F5F5;
  }
}


.button {
  background-color: #589E36;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  border: none;
  color: #F9F9F4;
  cursor: pointer;
  display: inline-block;
  font-family: Microsoft YaHei;
  font-size: 25px;
font-weight:900;
  padding: 4px 12px;
  text-align: center;
  text-decoration: none;
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
  0% { background-color: #589E36;}
  25% { background-color: #61ad3b;}
  50% { background-color: #6cc242;}
75% { background-color: #77d649;}
  100% { background-color: #83eb50;}
}

@-moz-keyframes glowing {
 0% { background-color: #589E36;}
  25% { background-color: #61ad3b;}
  50% { background-color: #6cc242;}
75% { background-color: #77d649;}
  100% { background-color: #83eb50;}
}

@-o-keyframes glowing {
   0% { background-color: #589E36;}
  25% { background-color: #61ad3b;}
  50% { background-color: #6cc242;}
75% { background-color: #77d649;}
  100% { background-color: #83eb50;}
}

@keyframes glowing {
   0% { background-color: #589E36;}
  25% { background-color: #61ad3b;}
  50% { background-color: #6cc242;}
75% { background-color: #77d649;}
  100% { background-color: #83eb50;}
}