/*animations*/

/******************
* Bounce in right *
*******************/


.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 
.slow{
     -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}
.slower{
     -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}
.slowest{
     -webkit-animation-duration: 3s; 
    animation-duration: 3s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
    opacity:0;
	-webkit-transform: translateX(400px); 
    transform: translateX(400px); 
}
.fadeInRight, .fadeInLeft{
    opacity:0;
    -webkit-transform: translateX(400px); 
    transform: translateX(400px); 
}
.fadeInUp, .fadeInDown{
	opacity:0;
	}
.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn{
    opacity:0;
	-webkit-transform: translateX(400px); 
    transform: translateX(400px);
}

.lightSpeedInRight, .lightSpeedInLeft{
    opacity:0;
    -webkit-transform: translateX(400px); 
    transform: translateX(400px); 
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        -webkit-transform: scale(1.05); 
    } 

    70% { 
        -webkit-transform: scale(.9); 
    } 

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

@keyframes bounceIn { 
    0% { 
        opacity: 0; 
        transform: scale(.3); 
    } 

    50% { 
        opacity: 1; 
        transform: scale(1.05); 
    } 

    70% { 
        transform: scale(.9); 
    } 

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

.bounceIn.go { 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
}

/****************
* bounceInRight *
****************/

@-webkit-keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateX(400px); 
    } 
    60% { 
        
        -webkit-transform: translateX(-30px); 
    } 
    80% { 
        -webkit-transform: translateX(10px); 
    } 
    100% {
    opacity: 1;
     
        -webkit-transform: translateX(0); 
    } 
} 

@keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        
        transform: translateX(400px); 
    } 
    60% { 
        
        transform: translateX(-30px); 
    } 
    80% { 
        transform: translateX(10px); 
    } 
    100% {
    opacity: 1;
     
        transform: translateX(0); 
    } 
} 


.bounceInRight.go { 
    -webkit-animation-name: bounceInRight; 
    animation-name: bounceInRight; 
}

/******************
* Bounce in left *
*******************/

@-webkit-keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateX(-400px); 
    } 
    60% { 
       
        -webkit-transform: translateX(30px); 
    } 
    80% { 
        -webkit-transform: translateX(-10px); 
    } 
    100% {
        opacity: 1;
         
        -webkit-transform: translateX(0); 
    } 
} 

@keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        
        transform: translateX(-400px); 
    } 
    60% { 
       
        transform: translateX(30px); 
    } 
    80% { 
        transform: translateX(-10px); 
    } 
    100% {
        opacity: 1;
         
        transform: translateX(0); 
    } 
} 

.bounceInLeft.go{ 
    -webkit-animation-name: bounceInLeft; 
    animation-name: bounceInLeft; 
}

/******************
* Bounce in up *
*******************/

@-webkit-keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateY(400px); 
    } 
    60% { 
       
        -webkit-transform: translateY(-30px); 
    } 
    80% { 
        -webkit-transform: translateY(10px); 
    } 
    100% {
        opacity: 1;
         
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        
        transform: translateY(400px); 
    } 
    60% { 
       
        transform: translateY(-30px); 
    } 
    80% { 
        transform: translateY(10px); 
    } 
    100% {
        opacity: 1;
         
        transform: translateY(0); 
    } 
} 

.bounceInUp.go{ 
    -webkit-animation-name: bounceInUp; 
    animation-name: bounceInUp; 
}


/******************
* Bounce in down *
*******************/

@-webkit-keyframes bounceInDown { 
    0% { 
        opacity: 0; 
        
        -webkit-transform: translateY(-400px); 
    } 
    60% { 
       
        -webkit-transform: translateY(30px); 
    } 
    80% { 
        -webkit-transform: translateY(-10px); 
    } 
    100% {
        opacity: 1;
         
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInDown { 
    0% { 
        opacity: 0; 
        
        transform: translateY(-400px); 
    } 
    60% { 
       
        transform: translateY(30px); 
    } 
    80% { 
        transform: translateY(-10px); 
    } 
    100% {
        opacity: 1;
         
        transform: translateY(0); 
    } 
} 

.bounceInDown.go { 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}


/**********
* Fade In *
**********/ 
@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
}
.fadeIn{
    opacity:0;
}
.fadeIn.go { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}

/**********
* Grow in *
***********/

@-webkit-keyframes growIn { 
    0% { 
        -webkit-transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        -webkit-transform: scale(1.2); 
        
    } 
    100% { 
        -webkit-transform: scale(1); 
        opacity:1;
    } 
} 
@keyframes growIn { 
    0% { 
        transform: scale(0.2); 
        opacity:0;
    } 
    50% { 
        transform: scale(1.2); 
        
    } 
    100% { 
        transform: scale(1); 
        opacity:1;
    } 
} 
.growIn { 

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn.go{
    -webkit-animation-name: growIn; 
    animation-name: growIn; 
}

/********
* Shake *
********/
@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 
} 
@keyframes shake { 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {transform: translateX(10px);} 
} 
.shake.go { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
}

/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);} 
} 
@keyframes shakeUp { 
    0%, 100% {transform: translateY(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);} 
    20%, 40%, 60%, 80% {transform: translateY(10px);} 
} 
.shakeUp.go { 
    -webkit-animation-name: shakeUp; 
    animation-name: shakeUp; 
}

/*************
* FadeInLeft *
*************/

@-webkit-keyframes fadeInLeft { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInLeft { 
    0% { 
        opacity: 0; 

        transform: translateX(-400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 
.fadeInLeft{ 
    opacity: 0; 
    -webkit-transform: translateX(-400px); 
    transform: translateX(-400px);
}
.fadeInLeft.go { 
    -webkit-animation-name: fadeInLeft; 
    animation-name: fadeInLeft; 
}


/*************
* FadeInRight *
*************/

@-webkit-keyframes fadeInRight { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInRight { 
    0% { 
        opacity: 0; 
        transform: translateX(400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 
.fadeInRight{ 
    opacity: 0; 
    -webkit-transform: translateX(400px); 
    transform: translateX(400px);
}
.fadeInRight.go { 
    -webkit-animation-name: fadeInRight; 
    animation-name: fadeInRight; 
}

/*************
* FadeInUp *
*************/

@-webkit-keyframes fadeInUp { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 
@keyframes fadeInUp { 
    0% { 
        opacity: 0; 
        transform: translateY(400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeInUp{ 
    opacity: 0; 
}
.fadeInUp.animate_start { 
	-webkit-transform: translateY(400px); 
    transform: translateY(400px);
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
	opacity:1;
}

/*************
* FadeInDown *
*************/

@-webkit-keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(-400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 
@keyframes fadeInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-400px); 
    } 
    50%{
       opacity: 0.3; 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeInDown{ 
    opacity: 0; 
    -webkit-transform: translateY(-400px); 
    transform: translateY(-400px);
}
.fadeInDown.go { 
    -webkit-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}

/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn { 
    0% { 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(-200deg); 
        opacity: 0; 
    } 
    100% { 
        -webkit-transform-origin: center center; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
} 
@keyframes rotateIn { 
    0% { 
        transform-origin: center center; 
        transform: rotate(-200deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: center center; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 
.rotateIn.go { 
    -webkit-animation-name: rotateIn; 
    animation-name: rotateIn; 
}

/*****************
* rotateInUpLeft *
*****************/

@-webkit-keyframes rotateInUpLeft { 
    0% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(90deg); 
        opacity: 0; 
    } 
    100% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
} 
@keyframes rotateInUpLeft { 
    0% { 
        transform-origin: left bottom; 
        transform: rotate(90deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: left bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 
.rotateInUpLeft.go { 
    -webkit-animation-name: rotateInUpLeft; 
    animation-name: rotateInUpLeft; 
}

/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft { 
    0% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(-90deg); 
        opacity: 0; 
    } 
    100% { 
        -webkit-transform-origin: left bottom; 
        -webkit-transform: rotate(0); 
        opacity: 1; 
    } 
} 
@keyframes rotateInDownLeft { 
    0% { 
        transform-origin: left bottom; 
        transform: rotate(-90deg); 
        opacity: 0; 
    } 
    100% { 
        transform-origin: left bottom; 
        transform: rotate(0); 
        opacity: 1; 
    } 
} 
.rotateInDownLeft.go { 
    -webkit-animation-name: rotateInDownLeft;
	}
	
	
	
/*渐隐*/	
	
@keyframes afc {
	from {
		opacity:0;
		transform:scale(0.2)
	}
	to {
		opacity:1;
		transform:scale(1)
	}
}
@-webkit-keyframes afc {
	from {
		opacity:0;
		-webkit-transform:scale(0.2)
	}
	to {
		opacity:1;
		-webkit-transform:scale(1)
	}
}
.animate_afc {
	opacity:0
}
.animate_afc.animate_start {
	-webkit-animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 afc;
	animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 afc;
	opacity:1
}
@keyframes afl {
	from {
		opacity:0;
		transform:translateX(-100px)
	}
	to {
		opacity:1;
		transform:translateX(0)
	}
}
@-webkit-keyframes afl {
	from {
		opacity:0;
		-webkit-transform:translateX(-100px)
	}
	to {
		opacity:1;
		-webkit-transform:translateX(0)
	}
}
.animate_afl {
	opacity:0
}
.animate_afl.animate_start {
	-webkit-animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 afl;
	animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 afl;
	opacity:1
}
@keyframes afr {
	from {
		opacity:0;
		transform:translateX(100px)
	}
	to {
		opacity:1;
		transform:translateX(0)
	}
}
@-webkit-keyframes afr {
	from {
		opacity:0;
		-webkit-transform:translateX(100px)
	}
	to {
		opacity:1;
		-webkit-transform:translateX(0)
	}
}
.animate_afr {
	opacity:0
}
.animate_afr.animate_start {
	-webkit-animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 afr;
	animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 afr;
	opacity:1
}
@keyframes aft {
	from {
		opacity:0;
		transform:translateY(-100px)
	}
	to {
		opacity:1;
		transform:translateY(0)
	}
}
@-webkit-keyframes aft {
	from {
		opacity:0;
		-webkit-transform:translateY(-100px)
	}
	to {
		opacity:1;
		-webkit-transform:translateY(0)
	}
}
.animate_aft {
	opacity:0
}
.animate_aft.animate_start {
	-webkit-animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 aft;
	animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 aft;
	opacity:1
}
@keyframes afb {
	from {
		opacity:0;
		transform:translateY(100px)
	}
	to {
		opacity:1;
		transform:translateY(0)
	}
}
@-webkit-keyframes afb {
	from {
		opacity:0;
		-webkit-transform:translateY(100px)
	}
	to {
		opacity:1;
		-webkit-transform:translateY(0)
	}
}
.animate_afb {
	opacity:0
}
.animate_afb.animate_start {
	-webkit-animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 afb;
	animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 afb;
	opacity:1
}
@keyframes wfc {
	from {
		opacity:0;
		transform:scaleX(0.01)
	}
	to {
		opacity:1;
		transform:scaleX(1)
	}
}
@-webkit-keyframes wfc {
	from {
		opacity:0;
		-webkit-transform:scaleX(0.01)
	}
	to {
		opacity:1;
		-webkit-transform:scaleX(1)
	}
}
.animate_wfc {
	opacity:0
}
.animate_wfc.animate_start {
	-webkit-animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 wfc;
	animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 wfc;
	opacity:1
}
@keyframes hfc {
	from {
		opacity:0;
		transform:scaleY(0.01)
	}
	to {
		opacity:1;
		transform:scaleY(1)
	}
}
@-webkit-keyframes hfc {
	from {
		opacity:0;
		-webkit-transform:scaleY(0.01)
	}
	to {
		opacity:1;
		-webkit-transform:scaleY(1)
	}
}
.animate_hfc {
	opacity:0
}
.animate_hfc.animate_start {
	-webkit-animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 hfc;
	animation:0.8s cubic-bezier(1,0,0,1) 0s normal backwards 1 hfc;
	opacity:1
}
@keyframes rfc {
	from {
		opacity:0;
		transform:scale(0.01) rotate(360deg)
	}
	to {
		opacity:1;
		transform:scale(1) rotate(0)
	}
}
@-webkit-keyframes rfc {
	from {
		opacity:0;
		-webkit-transform:scale(0.01) rotate(360deg)
	}
	to {
		opacity:1;
		-webkit-transform:scale(1) rotate(0)
	}
}
.animate_rfc {
	opacity:0
}
.animate_rfc.animate_start {
	-webkit-animation:0.8s ease 0s normal backwards 1 rfc;
	animation:0.8s ease 0s normal backwards 1 rfc;
	opacity:1
}
@keyframes rfl {
	from {
		opacity:0;
		transform:translateX(-100px) rotate(-180deg)
	}
	to {
		opacity:1;
		transform:translateX(0) rotate(0)
	}
}
@-webkit-keyframes rfl {
	from {
		opacity:0;
		-webkit-transform:translateX(-100px) rotate(-180deg)
	}
	to {
		opacity:1;
		-webkit-transform:translateX(0) rotate(0)
	}
}
.animate_rfl {
	opacity:0
}
.animate_rfl.animate_start {
	-webkit-animation:0.8s ease 0s normal backwards 1 rfl;
	animation:0.8s ease 0s normal backwards 1 rfl;
	opacity:1
}
@keyframes rfr {
	from {
		opacity:0;
		transform:translateX(100px) rotate(180deg)
	}
	to {
		opacity:1;
		transform:translateX(0) rotate(0)
	}
}
@-webkit-keyframes rfr {
	from {
		opacity:0;
		-webkit-transform:translateX(100px) rotate(180deg)
	}
	to {
		opacity:1;
		-webkit-transform:translateX(0) rotate(0)
	}
}
.animate_rfr {
	opacity:0
}
.animate_rfr.animate_start {
	-webkit-animation:0.8s ease 0s normal backwards 1 rfr;
	animation:0.8s ease 0s normal backwards 1 rfr;
	opacity:1
}

.d1.animate_start {
	-webkit-animation-delay:0.2s;
	animation-delay:0.2s
}
.d2.animate_start {
	-webkit-animation-delay:0.4s;
	animation-delay:0.4s
}
.d3.animate_start {
	-webkit-animation-delay:0.6s;
	animation-delay:0.6s
}
.d4.animate_start {
	-webkit-animation-delay:0.8s;
	animation-delay:0.8s
}
.d5.animate_start {
	-webkit-animation-delay:1s;
	animation-delay:1s
}