@keyframes logo{
	from{
		opacity: 0;
		transform: translateY(30px);
	}

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

@-webkit-keyframes logo{
	from{
		opacity: 0;
		-webkit-transform: translateY(30px);
	}

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

@keyframes fadeIn{
	from{
		opacity: 0;
	}

	to{
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn{
	from{
		opacity: 0;
	}

	to{
		opacity: 1;
	}
}

@keyframes leftFish{
	from{
		opacity: 0;
		transform: scale(0.6) translate(40px, 40px);
	}

	to{
		opacity: 1;
		transform: scale(0.6) translate(0px, 0px);
	}
}

@-webkit-keyframes leftFish{
	from{
		opacity: 0;
		-webkit-transform: scale(0.6) translate(40px, 40px);
	}

	to{
		opacity: 1;
		-webkit-transform: scale(0.6) translate(0px, 0px);
	}
}

@keyframes rightFish{
	from{
		opacity: 0;
		transform: scale(0.6) translate(-40px, -40px);
	}

	to{
		opacity: 1;
		transform: scale(0.6) translate(0px, 0px);
	}
}

@-webkit-keyframes rightFish{
	from{
		opacity: 0;
		-webkit-transform: scale(0.6) translate(-40px, -40px);
	}

	to{
		opacity: 1;
		-webkit-transform: scale(0.6) translate(0px, 0px);
	}
}

@keyframes fadeInFromBottom{
	from{
		opacity: 0;
		transform: translateY(20px);
	}

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

@-webkit-keyframes fadeInFromBottom{
	from{
		opacity: 0;
		-webkit-transform: translateY(20px);
	}

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

@keyframes followBotton{
	0%{
		transform: scale(1);
	}

	50%{
		transform: scale(0.9);
	}

	100%{
		transform: scale(1);
	}
}

@-webkit-keyframes followBotton{
	0%{
		-webkit-transform: scale(1);
	}

	50%{
		-webkit-transform: scale(0.9);
	}

	100%{
		-webkit-transform: scale(1);
	}
}

@keyframes modalAnimation{
	from{
		transform: translateY(100%);
	}

	to{
		transform: translateY(0);
	}
}

@-webkit-keyframes modalAnimation{
	from{
		-webkit-transform: translateY(100%);
	}

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

@keyframes modalSlideDown{
	0%{
		transform: translateY(0%);
	}

	20%{
		transform: translateY(-2%);
	}

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

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

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

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

.banner > *,
.features li,
.introduce > p,
.app-btn,
.follow-btn,
.modal.active,
.modal.active p,
.modal-weixin.active p:first-child:before,
.modal-content img{
	animation-fill-mode: backwards;
	-webkit-animation-fill-mode: backwards;
}

.banner img[alt="logo"]{
	animation-name: logo;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	-webkit-animation-name: logo;
	-webkit-animation-duration: .5s;
	-webkit-animation-timing-function: ease-in-out;
}

.banner img[alt="text"]{
	animation-name: fadeIn;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-delay: .5s;
	-webkit-animation-name: fadeIn;
	-webkit-animation-duration: .5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: .5s;
}

.banner .fish{
	animation-name: leftFish;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-delay: 1s;
	-webkit-animation-name: leftFish;
	-webkit-animation-duration: .5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 1s;
}

.banner .fish-reverse{
	animation-name: rightFish;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-delay: 1s;
	-webkit-animation-name: rightFish;
	-webkit-animation-duration: .5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 1s;
}

.features li,
.introduce > p,
.app-btn,
.follow-btn{
	animation-name: fadeInFromBottom;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	-webkit-animation-name: fadeInFromBottom;
	-webkit-animation-duration: .5s;
	-webkit-animation-timing-function: ease-in-out;
}

.features li:first-child{
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}

.features li:nth-child(2){
	animation-delay: 1.7s;
	-webkit-animation-delay: 1.7s;
}

.features li:last-child{
	animation-delay: 1.9s;
	-webkit-animation-delay: 1.9s;
}

.introduce > p{
	animation-delay: 2.4s;
	-webkit-animation-delay: 2.4s;
}

.app-btn{
	animation-delay: 2.9s;
	-webkit-animation-delay: 2.9s;
}

.follow-btn{
	animation-delay: 3.4s;
	-webkit-animation-delay: 3.4s;
}

.app-btn.active,
.follow-btn.active{
	animation: followBotton .3s ease-in-out .3s;
	-webkit-animation: followBotton .3s ease-in-out .3s;
}

.modal.active{
	animation-name: modalAnimation;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-name: modalAnimation;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
}

.modal-weixin.active{
	display: block;
}

.modal-qrcode.active{
	display: table;
}

.modal-weixin.active p:first-child:before,
.modal.active p,
.modal-content img{
	animation-name: fadeIn;
	animation-duration: .6s;
	animation-timing-function: ease-in-out;
	animation-delay: 1s;
	-webkit-animation-name: fadeIn;
	-webkit-animation-duration: .6s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 1s;
}

.modal.slidingOut{
	animation-name: modalSlideDown;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-name: modalSlideDown;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes slideDownFirstArrow{
	0%{
		opacity: 1;
	}

	33%{
		opacity: 0.33;
	}

	66%{
		opacity: 0.66;
	}

	100%{
		opacity: 1;
	}
}

@-webkit-keyframes slideDownSecondArrow{
	0%{
		opacity: 0.66;
	}

	33%{
		opacity: 1;
	}

	66%{
		opacity: 0.33
	}

	100%{
		opacity: 0.66;
	}
}

@-webkit-keyframes slideDownThirdArrow{
	0%{
		opacity: 0.33;
	}

	33%{
		opacity: 0.66;
	}

	66%{
		opacity: 1;
	}

	100%{
		opacity: 0.33;
	}
}

.slide-down-button{
	animation-name: fadeInFromBottom;
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: backwards;
	animation-delay: 3.2s;

	-webkit-animation-name: fadeInFromBottom;
	-webkit-animation-duration: .5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: backwards;
	-webkit-animation-delay: 3.2s;
}

.slide-down-button span{
	animaion-fill-mode: backwards;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
	animation-iteration-count: infinite;

	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-fill-mode: backwards;
}

.slide-down-button span:first-child{
	animation-name: slideDownFirstArrow;
	-webkit-animation-name: slideDownFirstArrow;
}

.slide-down-button span:nth-child(2){
	animation-name: slideDownSecondArrow;
	-webkit-animation-name: slideDownSecondArrow;
}

.slide-down-button span:last-child{
	animation-name: slideDownThirdArrow;
	-webkit-animation-name: slideDownThirdArrow;
}

body.show-options .options-page > h3,
body.show-options .options li,
body.show-options .loading-modal,
body.show-options .result-modal{
	animation-fill-mode: both;
	animation-name: fadeInFromBottom;
	animation-timing-function: ease-in-out;
	animation-duration: .5s;

	-webkit-animation-fill-mode: both;
	-webkit-animation-name: fadeInFromBottom;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: .5s;
}

body.show-options .options-page > h3{
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
}

body.show-options .options li:first-child{
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
}

body.show-options .options li:nth-child(2){
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
}

body.show-options .options li:last-child{
	animation-duration: 2.5s;
	-webkit-animation-duration: 2.5s;
}

body.show-options .loading-modal,
body.show-options .result-modal{
	display: none;
}

@keyframes loading{
	from{
		transform: rotate(-360deg);
	}

	to{
		transform: rotate(0deg);
	}
}

@-webkit-keyframes loading{
	from{
		-webkit-transform: rotate(-360deg);
	}

	to{
		-webkit-transform: rotate(0deg);
	}
}

.loading-modal img{
	-webkit-animation: loading 3s linear infinite;
	animation: loading 3s linear infinite;
}