/*==============================================
kv
==============================================*/
.kv_slogan, .rule_slogan {
	animation: flyItemfadeIn 0.4s linear .8s backwards;}

.kv_drogan { 
	animation: flyItemfadeIn 0.4s linear .8s backwards, 
			   lightning 2s ease-in-out infinite alternate; 
	animation-delay:1s;}

.kv_cloud {
	animation: flyItemfadeIn 0.4s linear .8s backwards, 
			   lightning 2s ease-in-out infinite alternate, 
			   upLeft_animation 2s ease-in-out infinite alternate; 
	animation-delay:2s;}

.kv_lantern { 
	animation: upDown_animation 1s linear 1s infinite alternate;}

.bg_fly { 
	animation: mymove 2s linear infinite;}

/*==============================================
common
==============================================*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}
.animated.delay-1ms {
  -webkit-animation-delay: .1s;
  animation-delay: .1s
}
.animated.delay-2ms {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}
.animated.delay-3ms {
  -webkit-animation-delay: .3s;
  animation-delay: .3s
}
.animated.delay-4ms {
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}
.animated.delay-5ms {
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}
.animated.delay-6ms {
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}
.animated.delay-7ms {
  -webkit-animation-delay: .7s;
  animation-delay: .7s
}
.animated.delay-8ms {
  -webkit-animation-delay: .8s;
  animation-delay: .8s
}
.animated.delay-9ms {
  -webkit-animation-delay: .9s;
  animation-delay: .9s
}
.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s
}


/*==============================================
upLeft
==============================================*/
.upLeft_animation { -webkit-animation: upLeft_animation 1s ease-in-out infinite alternate; animation: upLeft_animation 1s ease-in-out infinite alternate; }
@-webkit-keyframes upLeft_animation {
 0% {
-webkit-transform: translate(-10px, 0);
}
 100% {
-webkit-transform: translate(0, 0);
}
}
@keyframes upLeft_animation {
 0% {
transform: translate(-10px, 0);
}
 100% {
transform: translate(0, 0);
}
}

/*==============================================
mymove
==============================================*/
@keyframes mymove {
 0%, 100% {margin-left:0px;}
 50% {margin-top:7px;}
}

/*==============================================
flyItemfadeIn
==============================================*/
@keyframes flyItemfadeIn {
 0% {
 opacity: 0;
 filter: blur(10px) ;
 transform: scale(.5);
}
40% {
 opacity: .5;
 filter: blur(10px);
 transform: scale(.9);
}
60% {
 opacity: .8;
 filter: blur(6px);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 filter: blur(0px);
 transform: scale(1);
}
}
 @-webkit-keyframes flyItemfadeIn {
 0% {
 opacity: 0;
 -webkit-filter: blur(10px);
 -webkit-transform: scale(.5);
}
40% {
 opacity: .5;
 -webkit-filter: blur(10px);
 -webkit-transform: scale(.9);
}
60% {
 opacity: .8;
 -webkit-filter: blur(6px);
 -webkit-transform: scale(1.1);
}
100% {
 opacity: 1;
 -webkit-filter: blur(0px);
 -webkit-transform: scale(1);
}
}

/*==============================================
upDown
==============================================*/
.upDown_animation {
  -webkit-animation: upDown_animation 1s ease-in-out infinite alternate;
  animation: upDown_animation 1s ease-in-out infinite alternate;
}
@-webkit-keyframes upDown_animation {
  0% {
    -webkit-transform: translate(0, -7px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes upDown_animation {
  0% {
    transform: translate(0, -7px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/*==============================================
upDown_m
==============================================*/
.upDown_animation_m {
  -webkit-animation: upDown_animation 1s ease-in-out infinite alternate;
  animation: upDown_animation 1s ease-in-out infinite alternate;
}
@-webkit-keyframes upDown_animation_m {
  0% {
    -webkit-transform: translate(0, -5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes upDown_animation_m {
  0% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/*==============================================
lightning
==============================================*/
.lightning {
  -webkit-animation: lightning 2s ease-in-out infinite alternate;
  animation: lightning 2s ease-in-out infinite alternate;
}
@-webkit-keyframes lightning {
  0%, 40%, 60%, 100% {
    filter: brightness(100%);
  }
  45%, 75%, 85% {
    filter: brightness(120%);
  }
}
@keyframes lightning {
  0%, 40%, 60%, 100% {
    filter: brightness(100%);
  }
  45%, 75%, 85% {
    filter: brightness(120%);
  }
}

/*==============================================
lightning_bg
==============================================*/
.lightning_bg { -webkit-animation: lightning 2s ease-in-out infinite alternate; animation: lightning 2s ease-in-out infinite alternate; }
@-webkit-keyframes lightning_bg {
 0%, 52% , 56% , 60%, 100% {
filter: brightness(100%);
}
54%,58%,62% {
filter: brightness(120%);
}
}
@keyframes lightning_bg {
 0%, 52%,56%,60%, 100%   {
filter: brightness(100%);
}
54%,58%,62%   {
filter: brightness(120%);
}
}

/*==============================================
slideLeft
==============================================*/
.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}