@charset "UTF-8";
/* CSS Document */
/*======================================
fadein
/*======================================*/
@keyframes htmlfadeIn {
  00% {  opacity: 0 }
  30% {  opacity: 0 }
 100% {  opacity: 1 }
}
html {
  animation: htmlfadeIn 3s ease 0s 1 normal;
}

@keyframes topfadein {
   0% {  opacity: 0 }
  20% {  opacity: 0 }
  80% {  opacity: 1 }
 100% {  opacity: 1 }
}

header img{
  animation: topfadein 4s ease 0s 1 normal;
}

/*======================================
scroll fadein
/*======================================*/
.fadein {
  opacity: 1;
  transition: all 1s ease;
}
.fadeout {
  opacity: 0;
  transition: all 1s ease;
}


@keyframes fadeInSlideBottom {
  0% { opacity: .5; transform: translateY(50px); }
100% { opacity: 1; transform: translateY(0); }
}
.fadeInSlideBottom {
animation: fadeInSlideBottom 2s ease 0s 1 normal;
}
.fadeOutSlide {
opacity: .5;
transform: translateY(50px);
transition: all 1s ease;
}