.flex {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap;
}

.boxMove {
	box-sizing: border-box;
	width: 220px;
	margin: 0 20px 20px 0;
	padding: 20px;
	color: #fff;
	background: #666;
}

.bgextend,
.lineTrigger {
	display: inline-block;
	box-sizing: border-box;
}

/*==================================================
ふわっ
===================================*/

/* fadeIn */

.fadeIn {
	-webkit-animation-name: fadeInAnime;
	animation-name: fadeInAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* fadeUp */

.fadeUp {
	-webkit-animation-name: fadeUpAnime;
	animation-name: fadeUpAnime;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* fadeDown */

.fadeDown {
	-webkit-animation-name: fadeDownAnime;
	animation-name: fadeDownAnime;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* fadeLeft */

.fadeLeft {
	-webkit-animation-name: fadeLeftAnime;
	animation-name: fadeLeftAnime;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* fadeRight */

.fadeRight {
	-webkit-animation-name: fadeRightAnime;
	animation-name: fadeRightAnime;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
	opacity: 0;
}

/*==================================================
ぱたっ
===================================*/

/* flipDown */

.flipDown {
	-webkit-animation-name: flipDownAnime;
	animation-name: flipDownAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* flipLeft */

.flipLeft {
	-webkit-animation-name: flipLeftAnime;
	animation-name: flipLeftAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-perspective-origin: left center;
	perspective-origin: left center;
}

/* flipLeftTop */

.flipLeftTop {
	-webkit-animation-name: flipLeftTopAnime;
	animation-name: flipLeftTopAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* flipRight */

.flipRight {
	-webkit-animation-name: flipRightAnime;
	animation-name: flipRightAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-perspective-origin: right center;
	perspective-origin: right center;
}

/* flipRightTop */

.flipRightTop {
	-webkit-animation-name: flipRightTopAnime;
	animation-name: flipRightTopAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
	opacity: 0;
}

/*==================================================
くるっ
===================================*/

/* rotateX */

.rotateX {
	-webkit-animation-name: rotateXAnime;
	animation-name: rotateXAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* rotateY */

.rotateY {
	-webkit-animation-name: rotateYAnime;
	animation-name: rotateYAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* rotateLeftZ */

.rotateLeftZ {
	-webkit-animation-name: rotateLeftZAnime;
	animation-name: rotateLeftZAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* rotateRightZ */

.rotateRightZ {
	-webkit-animation-name: rotateRightZAnime;
	animation-name: rotateRightZAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
	opacity: 0;
}

/*==================================================
ぶわっ、ぽんっ、どどんっ
===================================*/

/* zoomIn */

.zoomIn {
	-webkit-animation-name: zoomInAnime;
	animation-name: zoomInAnime;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* zoomOut */

.zoomOut {
	-webkit-animation-name: zoomOutAnime;
	animation-name: zoomOutAnime;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.zoomInTrigger,
.zoomOutTrigger {
	opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* blur */

.blur {
	-webkit-animation-name: blurAnime;
	animation-name: blurAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.blurTrigger {
	opacity: 0;
}

/*==================================================
にょろっ
===================================*/

/* smooth */

.smooth {
	-webkit-transform-origin: left;
	transform-origin: left;
	-webkit-animation-name: smoothAnime;
	animation-name: smoothAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.smoothTrigger {
	opacity: 0;
}

/*==================================================
背景色が伸びて出現
===================================*/

.bgextend {
	position: relative;
	overflow: hidden; /*　はみ出た色要素を隠す　*/
	-webkit-animation-name: bgextendAnimeBase;
	animation-name: bgextendAnimeBase;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/*中の要素*/

.bgappear {
	-webkit-animation-name: bgextendAnimeSecond;
	animation-name: bgextendAnimeSecond;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: .6s;
	animation-delay: .6s;
	opacity: 0;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/*左から右*/

.bgLRextend::before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	-webkit-animation-name: bgLRextendAnime;
	animation-name: bgLRextendAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	background-color: #00936B; /*伸びる背景色の設定*/
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/*右から左*/

.bgRLextend::before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	-webkit-animation-name: bgRLextendAnime;
	animation-name: bgRLextendAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	background-color: #666; /*伸びる背景色の設定*/
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/*下から上*/

.bgDUextend::before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	-webkit-animation-name: bgDUextendAnime;
	animation-name: bgDUextendAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	background-color: #666; /*伸びる背景色の設定*/
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/*上から下*/

.bgUDextend::before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	-webkit-animation-name: bgUDextendAnime;
	animation-name: bgUDextendAnime;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	background-color: #666; /*伸びる背景色の設定*/
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
	opacity: 0;
}

/*==================================================
枠線が伸びて出現
===================================*/

/*枠線が伸びて出現*/

.lineTrigger {
	position: relative; /* 枠線が書かれる基点*/
	opacity: 0;
}

.lineTrigger.lineanime {
	-webkit-animation-name: lineAnimeBase;
	animation-name: lineAnimeBase;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

/*上下線*/

.lineTrigger::before,
.lineTrigger::after {
	position: absolute;
	width: 0;
	height: 1px;
	content: '';
	background: #333; /* 枠線の色*/
}

/*左右線*/

.line2::before,
.line2::after {
	position: absolute;
	width: 1px;
	height: 0;
	content: '';
	background: #333; /* 枠線の色*/
}

/*上線*/

.lineTrigger::before {
	top: 0;
	left: 0;
}

.lineTrigger.lineanime::before {
	-webkit-animation: lineAnime .5s linear 0s forwards;
	animation: lineAnime .5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/

.line2::before {
	top: 0;
	right: 0;
}

.lineTrigger.lineanime .line2::before {
	-webkit-animation: lineAnime2 .5s linear .5s forwards;
	animation: lineAnime2 .5s linear .5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/

.lineTrigger::after {
	right: 0;
	bottom: 0;
}

.lineTrigger.lineanime::after {
	-webkit-animation: lineAnime .5s linear 1s forwards;
	animation: lineAnime .5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/

.line2::after {
	bottom: 0;
	left: 0;
}

.lineTrigger.lineanime .line2::after {
	-webkit-animation: lineAnime2 .5s linear 1.5s forwards;
	animation: lineAnime2 .5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear {
	-webkit-animation: lineInnerAnime .5s linear 1.5s forwards;
	animation: lineInnerAnime .5s linear 1.5s forwards; /*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0; /*初期値を透過0にする*/
}

/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2 {
	-webkit-animation-iteration-count: 2;
	animation-iteration-count: 2; /*この数字を必要回数分に変更*/
}

.countinfinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite; /*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05 {
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
}

.delay-time1 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.delay-time15 {
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

.delay-time20 {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}

.delay-time25 {
	-webkit-animation-delay: 2.5s;
	animation-delay: 2.5s;
}

.delay-time30 {
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}

.delay-time35 {
	-webkit-animation-delay: 3.5s;
	animation-delay: 3.5s;
}

.delay-time40 {
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}

.delay-time45 {
	-webkit-animation-delay: 4.5s;
	animation-delay: 4.5s;
}

.delay-time50 {
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
}

.delay-time55 {
	-webkit-animation-delay: 5.5s;
	animation-delay: 5.5s;
}

.delay-time60 {
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}

.delay-time65 {
	-webkit-animation-delay: 6.5s;
	animation-delay: 6.5s;
}

.delay-time70 {
	-webkit-animation-delay: 7s;
	animation-delay: 7s;
}

.delay-time75 {
	-webkit-animation-delay: 7.5s;
	animation-delay: 7.5s;
}

.delay-time80 {
	-webkit-animation-delay: 8s;
	animation-delay: 8s;
}

.delay-time85 {
	-webkit-animation-delay: 8.5s;
	animation-delay: 8.5s;
}

.delay-time90 {
	-webkit-animation-delay: 9s;
	animation-delay: 9s;
}

.delay-time95 {
	-webkit-animation-delay: 9.5s;
	animation-delay: 9.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05 {
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
}

.change-time1 {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

.change-time15 {
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
}

.change-time2 {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

.change-time25 {
	-webkit-animation-duration: 2.5s;
	animation-duration: 2.5s;
}

/*========= 1文字ずつ出現させるためのCSS ===============*/

.eachTextAnime span {
	opacity: 0;
}

.eachTextAnime.appeartext span {
	-webkit-animation: text_anime_on 1s ease-out forwards;
	animation: text_anime_on 1s ease-out forwards;
}

/*========= テキストを滑らかに出現させるためのCSS ===============*/

span.smoothText {
	display: block;
	overflow: hidden;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/

span.smoothTextTrigger {
	display: block;
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	-webkit-transform: translate3d(0, 100%, 0) skewY(12deg);
	transform: translate3d(0, 100%, 0) skewY(12deg);
	-webkit-transform-origin: left;
	transform-origin: left;
}

span.smoothTextTrigger.smoothTextAppear {
	-webkit-transform: translate3d(0, 0, 0) skewY(0);
	transform: translate3d(0, 0, 0) skewY(0);
}

@-webkit-keyframes fadeInAnime {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@keyframes fadeInAnime {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@-webkit-keyframes fadeUpAnime {

from {
	-webkit-transform: translateY(100px);
	transform: translateY(100px);
	opacity: 0;
}

to {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

}

@keyframes fadeUpAnime {

from {
	-webkit-transform: translateY(100px);
	transform: translateY(100px);
	opacity: 0;
}

to {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

}

@-webkit-keyframes fadeDownAnime {

from {
	-webkit-transform: translateY(-100px);
	transform: translateY(-100px);
	opacity: 0;
}

to {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

}

@keyframes fadeDownAnime {

from {
	-webkit-transform: translateY(-100px);
	transform: translateY(-100px);
	opacity: 0;
}

to {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

}

@-webkit-keyframes fadeLeftAnime {

from {
	-webkit-transform: translateX(-100px);
	transform: translateX(-100px);
	opacity: 0;
}

to {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

}

@keyframes fadeLeftAnime {

from {
	-webkit-transform: translateX(-100px);
	transform: translateX(-100px);
	opacity: 0;
}

to {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

}

@-webkit-keyframes fadeRightAnime {

from {
	-webkit-transform: translateX(100px);
	transform: translateX(100px);
	opacity: 0;
}

to {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

}

@keyframes fadeRightAnime {

from {
	-webkit-transform: translateX(100px);
	transform: translateX(100px);
	opacity: 0;
}

to {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}

}

@-webkit-keyframes flipDownAnime {

from {
	-webkit-transform: perspective(2500px) rotateX(100deg);
	transform: perspective(2500px) rotateX(100deg);
	opacity: 0;
}

to {
	-webkit-transform: perspective(2500px) rotateX(0);
	transform: perspective(2500px) rotateX(0);
	opacity: 1;
}

}

@keyframes flipDownAnime {

from {
	-webkit-transform: perspective(2500px) rotateX(100deg);
	transform: perspective(2500px) rotateX(100deg);
	opacity: 0;
}

to {
	-webkit-transform: perspective(2500px) rotateX(0);
	transform: perspective(2500px) rotateX(0);
	opacity: 1;
}

}

@-webkit-keyframes flipLeftAnime {

from {
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
	opacity: 0;
}

to {
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	opacity: 1;
}

}

@keyframes flipLeftAnime {

from {
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
	opacity: 0;
}

to {
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	opacity: 1;
}

}

@-webkit-keyframes flipLeftTopAnime {

from {
	-webkit-transform: translate(-20px, 80px) rotate(-15deg);
	transform: translate(-20px, 80px) rotate(-15deg);
	opacity: 0;
}

to {
	-webkit-transform: translate(0, 0) rotate(0deg);
	transform: translate(0, 0) rotate(0deg);
	opacity: 1;
}

}

@keyframes flipLeftTopAnime {

from {
	-webkit-transform: translate(-20px, 80px) rotate(-15deg);
	transform: translate(-20px, 80px) rotate(-15deg);
	opacity: 0;
}

to {
	-webkit-transform: translate(0, 0) rotate(0deg);
	transform: translate(0, 0) rotate(0deg);
	opacity: 1;
}

}

@-webkit-keyframes flipRightAnime {

from {
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
	opacity: 0;
}

to {
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	opacity: 1;
}

}

@keyframes flipRightAnime {

from {
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
	opacity: 0;
}

to {
	-webkit-transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
	opacity: 1;
}

}

@-webkit-keyframes flipRightTopAnime {

from {
	-webkit-transform: translate(-20px, 80px) rotate(25deg);
	transform: translate(-20px, 80px) rotate(25deg);
	opacity: 0;
}

to {
	-webkit-transform: translate(0, 1) rotate(0deg);
	transform: translate(0, 1) rotate(0deg);
	opacity: 1;
}

}

@keyframes flipRightTopAnime {

from {
	-webkit-transform: translate(-20px, 80px) rotate(25deg);
	transform: translate(-20px, 80px) rotate(25deg);
	opacity: 0;
}

to {
	-webkit-transform: translate(0, 1) rotate(0deg);
	transform: translate(0, 1) rotate(0deg);
	opacity: 1;
}

}

@-webkit-keyframes rotateXAnime {

from {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	opacity: 0;
}

to {
	-webkit-transform: rotateX(-360deg);
	transform: rotateX(-360deg);
	opacity: 1;
}

}

@keyframes rotateXAnime {

from {
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	opacity: 0;
}

to {
	-webkit-transform: rotateX(-360deg);
	transform: rotateX(-360deg);
	opacity: 1;
}

}

@-webkit-keyframes rotateYAnime {

from {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	opacity: 0;
}

to {
	-webkit-transform: rotateY(-360deg);
	transform: rotateY(-360deg);
	opacity: 1;
}

}

@keyframes rotateYAnime {

from {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	opacity: 0;
}

to {
	-webkit-transform: rotateY(-360deg);
	transform: rotateY(-360deg);
	opacity: 1;
}

}

@-webkit-keyframes rotateLeftZAnime {

from {
	-webkit-transform: rotateZ(0);
	transform: rotateZ(0);
	opacity: 0;
}

to {
	-webkit-transform: rotateZ(-360deg);
	transform: rotateZ(-360deg);
	opacity: 1;
}

}

@keyframes rotateLeftZAnime {

from {
	-webkit-transform: rotateZ(0);
	transform: rotateZ(0);
	opacity: 0;
}

to {
	-webkit-transform: rotateZ(-360deg);
	transform: rotateZ(-360deg);
	opacity: 1;
}

}

@-webkit-keyframes rotateRightZAnime {

from {
	-webkit-transform: rotateZ(0);
	transform: rotateZ(0);
	opacity: 0;
}

to {
	-webkit-transform: rotateZ(360deg);
	transform: rotateZ(360deg);
	opacity: 1;
}

}

@keyframes rotateRightZAnime {

from {
	-webkit-transform: rotateZ(0);
	transform: rotateZ(0);
	opacity: 0;
}

to {
	-webkit-transform: rotateZ(360deg);
	transform: rotateZ(360deg);
	opacity: 1;
}

}

@-webkit-keyframes zoomInAnime {

from {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;
}

to {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

}

@keyframes zoomInAnime {

from {
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0;
}

to {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

}

@-webkit-keyframes zoomOutAnime {

from {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 0;
}

to {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

}

@keyframes zoomOutAnime {

from {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 0;
}

to {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

}

@-webkit-keyframes blurAnime {

from {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	opacity: 0;
	-webkit-filter: blur(10px);
	filter: blur(10px);
}

to {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	-webkit-filter: blur(0);
	filter: blur(0);
}

}

@keyframes blurAnime {

from {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	opacity: 0;
	-webkit-filter: blur(10px);
	filter: blur(10px);
}

to {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	-webkit-filter: blur(0);
	filter: blur(0);
}

}

@-webkit-keyframes smoothAnime {

from {
	-webkit-transform: translate3d(0, 100%, 0) skewY(12deg);
	transform: translate3d(0, 100%, 0) skewY(12deg);
	opacity: 0;
}

to {
	-webkit-transform: translate3d(0, 0, 0) skewY(0);
	transform: translate3d(0, 0, 0) skewY(0);
	opacity: 1;
}

}

@keyframes smoothAnime {

from {
	-webkit-transform: translate3d(0, 100%, 0) skewY(12deg);
	transform: translate3d(0, 100%, 0) skewY(12deg);
	opacity: 0;
}

to {
	-webkit-transform: translate3d(0, 0, 0) skewY(0);
	transform: translate3d(0, 0, 0) skewY(0);
	opacity: 1;
}

}

@-webkit-keyframes bgextendAnimeBase {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@keyframes bgextendAnimeBase {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@-webkit-keyframes bgextendAnimeSecond {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}

@keyframes bgextendAnimeSecond {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}

@-webkit-keyframes bgLRextendAnime {

0% {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left;
	transform-origin: left;
}

50% {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: left;
	transform-origin: left;
}

50.001% {
	-webkit-transform-origin: right;
	transform-origin: right;
}

100% {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right;
	transform-origin: right;
}

}

@keyframes bgLRextendAnime {

0% {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left;
	transform-origin: left;
}

50% {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: left;
	transform-origin: left;
}

50.001% {
	-webkit-transform-origin: right;
	transform-origin: right;
}

100% {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right;
	transform-origin: right;
}

}

@-webkit-keyframes bgRLextendAnime {

0% {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right;
	transform-origin: right;
}

50% {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: right;
	transform-origin: right;
}

50.001% {
	-webkit-transform-origin: left;
	transform-origin: left;
}

100% {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left;
	transform-origin: left;
}

}

@keyframes bgRLextendAnime {

0% {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right;
	transform-origin: right;
}

50% {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transform-origin: right;
	transform-origin: right;
}

50.001% {
	-webkit-transform-origin: left;
	transform-origin: left;
}

100% {
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: left;
	transform-origin: left;
}

}

@-webkit-keyframes bgDUextendAnime {

0% {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
}

50% {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
}

50.001% {
	-webkit-transform-origin: top;
	transform-origin: top;
}

100% {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: top;
	transform-origin: top;
}

}

@keyframes bgDUextendAnime {

0% {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
}

50% {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
}

50.001% {
	-webkit-transform-origin: top;
	transform-origin: top;
}

100% {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: top;
	transform-origin: top;
}

}

@-webkit-keyframes bgUDextendAnime {

0% {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: top;
	transform-origin: top;
}

50% {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transform-origin: top;
	transform-origin: top;
}

50.001% {
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
}

100% {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
}

}

@keyframes bgUDextendAnime {

0% {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: top;
	transform-origin: top;
}

50% {
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
	-webkit-transform-origin: top;
	transform-origin: top;
}

50.001% {
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
}

100% {
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
}

}

@-webkit-keyframes lineAnimeBase {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@keyframes lineAnimeBase {

from {
	opacity: 0;
}

to {
	opacity: 1;
}

}

@-webkit-keyframes lineAnime {

0% {
	width: 0;
}

100% {
	width: 100%;
}

}

@keyframes lineAnime {

0% {
	width: 0;
}

100% {
	width: 100%;
}

}

@-webkit-keyframes lineAnime2 {

0% {
	height: 0;
}

100% {
	height: 100%;
}

}

@keyframes lineAnime2 {

0% {
	height: 0;
}

100% {
	height: 100%;
}

}

@-webkit-keyframes lineInnerAnime {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}

@keyframes lineInnerAnime {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}

@-webkit-keyframes text_anime_on {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}

@keyframes text_anime_on {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}