/*
==============================================
main
==============================================
*/

.kv_slogan {
    animation: fadeIn 0.8s linear, lightning 2s ease-in-out 0.8s infinite alternate;
}

/*.kv_fly { animation: flyItemfadeIn 0.4s linear .8s backwards,upDown_animation 1s linear 1s infinite alternate;}
*/
.all_bg_move {
    animation: uptodown2 3s ease-in-out infinite alternate;
}

.tit_01.animated,
.tit_02.animated,
.tit_03.animated,
.tit_04.animated,
.tit_05.animated {
    animation: flipInX 0.8s linear
}
/*
==============================================
- up - uptodown2 -
==============================================*/
.uptodown2 {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: uptodown2;
	animation-name: uptodown2;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}

@-webkit-keyframes uptodown2 {
	0% {
		transform: translate(0, 10px);
	}

	90% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(0, 0);
	}
}

@keyframes uptodown2 {
	0% {
		transform: translate(0, 10px);
	}

	90% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(0, 0);
	}
}
/*
==============================================
- slide - 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;
}

/*
==============================================
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, -10px);
    }

    100% {
        -webkit-transform: translate(0, 0);
    }
}

@keyframes upDown_animation {
    0% {
        transform: translate(0, -10px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/*
==============================================
flash
==============================================
*/
.flash_animation {
    -webkit-animation: flash_animation 2s ease-in-out infinite alternate;
    animation: flash_animation 2s ease-in-out infinite alternate;
}

@-webkit-keyframes flash_animation {

    0%,
    100%,
    50% {
        filter: brightness(100%);
    }

    25%,
    75% {
        filter: brightness(130%);
    }
}

@keyframes flash_animation {

    0%,
    100%,
    50% {
        filter: brightness(100%);
    }

    25%,
    75% {
        filter: brightness(130%);
    }
}

/*
==============================================
flash2
==============================================
*/
.lightning {
    -webkit-animation: lightning 2s ease-in-out infinite alternate;
    animation: lightning 2s ease-in-out infinite alternate;
}

@-webkit-keyframes lightning {

    0%,
    52%,
    56%,
    60%,
    100% {
        filter: brightness(100%);
    }

    54%,
    58%,
    62% {
        filter: brightness(120%);
    }
}

@keyframes lightning {

    0%,
    52%,
    56%,
    60%,
    100% {
        filter: brightness(100%);
    }

    54%,
    58%,
    62% {
        filter: brightness(120%);
    }
}

/*
==============================================
wobble-vertical
==============================================
*/
@-webkit-keyframes wobble-vertical {
    16.65% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }

    33.3% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes wobble-vertical {
    16.65% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }

    33.3% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    49.95% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }

    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/*
==============================================
slideDown
==============================================
*/
.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@keyframes slideDown {
    0% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-50%);
    }

    50% {
        -webkit-transform: translateY(-10%);
    }

    100% {
        -webkit-transform: translateY(0%);
    }
}

/*
==============================================
leftFadeIn
==============================================
*/
@keyframes leftFadeIn {
    0% {
        transform: translateX(10%) translateY(10%);
        filter: opacity(0);
    }

    50% {

        transform: translateX(5%) translateY(5%);
    }

    100% {
        transform: translateX(0%) translateY(0%);
        filter: opacity(1);
    }
}

@-webkit-keyframes leftFadeIn {
    0% {
        -webkit-transform: translateX(10%) translateY(10%);
        -webkit-filter: opacity(0);
    }

    50% {
        -webkit-transform: translateX(5%) translateY(5%);
    }

    100% {
        -webkit-transform: translateX(0%) translateY(0%);
        -webkit-filter: opacity(1);
    }
}

/*
==============================================
rightFadeIn
==============================================
*/
@keyframes rightFadeIn {
    0% {
        transform: translateX(-10%) translateY(10%);
        filter: opacity(0);
    }

    50% {

        transform: translateX(-5%) translateY(5%);
    }

    100% {
        transform: translateX(0%) translateY(0%);
        filter: opacity(1);
    }
}

@-webkit-keyframes rightFadeIn {
    0% {
        -webkit-transform: translateX(-10%) translateY(10%);
        -webkit-filter: opacity(0);
    }

    50% {
        -webkit-transform: translateX(-5%) translateY(5%);
    }

    100% {
        -webkit-transform: translateX(0%) translateY(0%);
        -webkit-filter: opacity(1);
    }
}

/*
==============================================
fadeIn
==============================================
*/
@keyframes fadeIn {
    0% {
        opacity: 0;
        filter: blur(10px) brightness(150%);
        transform: scale(1);
    }

    40% {
        opacity: 0;
        filter: blur(10px) brightness(150%);
        transform: scale(1);
    }

    60% {
        opacity: 1;
        filter: blur(6px) brightness(120%);
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        filter: blur(0px) brightness(100%);
        transform: scale(1);
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-filter: blur(10px) brightness(150%);
        -webkit-transform: scale(1);
    }

    40% {
        opacity: 0;
        -webkit-filter: blur(10px) brightness(150%);
        -webkit-transform: scale(1);
    }

    60% {
        opacity: 1;
        -webkit-filter: blur(6px) brightness(120%);
        -webkit-transform: scale(1.1);
    }

    100% {
        opacity: 1;
        -webkit-filter: blur(0px) brightness(100%);
        -webkit-transform: scale(1);
    }
}

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

/*==============================================
flipInX
==============================================*/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@media screen and (max-width:767px) {
    .flipInX {
        animation: none;
    }
}