.spinner img{
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    position: fixed;
    top: 0;
    left: 0;
}

@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to{
      transform: rotate(360deg);
    }
}

.Loading{
     animation-name: flash;
     animation-iteration-count: infinite;
     animation-duration: 2s;
     position: fixed;
     
}

@keyframes flash {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

.loaded {
    opacity: 0;
    visibility: hidden;
}
  
.main-hero-h0img img{
    animation-name: fadeUpAnime1;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    animation-delay: 2.5s;
}

@keyframes fadeUpAnime1{
    from {
      opacity: 0;
    transform: translateY(20px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
}

.main-hero-copy img{
    animation-name: fadeUpAnime2;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    animation-delay: 2s;
}

@keyframes fadeUpAnime2{
    from {
      opacity: 0;
    transform: translateY(10px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
}

.main-explanation-h1img{
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s;
}


.main-explanation-text{
    opacity: 0;
   visibility: hidden;
   transform: translateY(30px);
   transition: opacity 1s, visibility 1s, transform 1s;
}

.main-friends-h2img{
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s;
}

.main-friends-h3img{
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.main-friends-sikakuinanikasann img{
    animation-name: ball;
    animation-iteration-count: infinite;
    animation-duration: 0.8s;
    animation-direction: alternate;
}

.main-friends-h4img{
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.main-friends-sinnpaikunn img{
  transform-origin:bottom;
  -webkit-transform-origin:bottom;
  -moz-transform-origin:bottom;
  animation-name: pendulum;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes pendulum{
  0%{transform: rotate(10deg);}
  100%{transform: rotate(-10deg);}
}
@-webkit-keyframes pendulum{
  0%{-webkit-transform: rotate(10deg);}
  100%{-webkit-transform: rotate(-10deg);}
}
@-moz-keyframes pendulum{
  0%{-moz-transform: rotate(10deg);}
  100%{-moz-transform: rotate(-10deg);}
}


.main-friends-sikakuidarekasann img{
  animation-name: ball;
  animation-iteration-count: infinite;
  animation-duration: 0.8s;
  animation-direction: alternate;
}

.main-friends-h5img{
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

@keyframes ball{
  0%   { transform:translate(0%, 0%) rotateX(25deg); }
  100% { transform:translate(0%, -20px); }
}
@-webkit-keyframes ball{
  0%   { -webkit-transform:translate(0%, 0%) rotateX(25deg); }
  100% { -webkit-transform:translate(0%, -20px); }
}
@-moz-keyframes ball{
  0%   { -moz-transform:translate(0%, 0%) rotateX(25deg); }
  100% { -moz-transform:translate(0%, -20px); }
}

.main-buy-h6img{
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.main-buy-h7img{
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.main-buy-minnne{
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.main-buy-h8img{
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.main-buy-pininstore{
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 1s, visibility 1s, transform 1s;
}


.is-fadein {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}