/***** animation *****/
.animate.fade_in					{ opacity: 0; transition: opacity 600ms ease-out; transition-delay: 0ms;}
.animate.fade_in.play				{ opacity: 1;}
.animate.fade_up					{ opacity: 0; transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: 0ms;}
.animate.fade_up.play				{ opacity: 1; transform: translateY(0);}
.animate.fade_down					{ opacity: 0; transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: 0ms;}
.animate.fade_down.play				{ opacity: 1; transform: translateY(0);}
.animate.fade_left					{ opacity: 0; transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: 0ms;}
.animate.fade_left.play				{ opacity: 1; transform: translateY(0);}
.animate.fade_right					{ opacity: 0; transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: 0ms;}
.animate.fade_right.play			{ opacity: 1; transform: translateY(0);}

.animate.scale_less					{ transform: scale(1.05); transition: transform 1200ms ease-out; transition-delay: 0ms;}
.animate.scale_less.play			{ transform: scale(1);}
.animate.zoom_in					{ opacity: 0; transform: scale(0.9); transition: opacity 400ms ease-out, transform 800ms ease-out; transition-delay: 0ms;}
.animate.zoom_in.play				{ opacity: 1; transform: scale(1);}

@media (min-width:1201px) {
.animate.fade_up					{ transform: translateY(40px);}
.animate.fade_down					{ transform: translateY(-40px);}
.animate.fade_left					{ transform: translateX(-40px);}
.animate.fade_right					{ transform: translateX(40px);}

.animate.clip_ttb					{ clip-path: inset(0 0 100% 0); transition: clip-path 800ms ease-out;}
.animate.clip_ttb.play				{ clip-path: inset(-1px -1px -1px -1px);}
.animate.clip_btt					{ clip-path: inset(100% 0 0 0); transition: clip-path 800ms ease-out;}
.animate.clip_btt.play				{ clip-path: inset(-1px -1px -1px -1px);}
.animate.clip_ltr					{ clip-path: inset(0 100% 0 0); transition: clip-path 800ms ease-out;}
.animate.clip_ltr.play				{ clip-path: inset(-1px -1px -1px -1px);}
.animate.clip_rtl					{ clip-path: inset(0 0 0 100%); transition: clip-path 800ms ease-out;}
.animate.clip_rtl.play				{ clip-path: inset(-1px -1px -1px -1px);}

.animate.delay-200 					{ transition-delay: 200ms;}
.animate.delay-300 					{ transition-delay: 300ms;}
.animate.delay-400 					{ transition-delay: 400ms;}
.animate.delay-500 					{ transition-delay: 500ms;}
.animate.delay-600					{ transition-delay: 600ms;}
.animate.delay-700					{ transition-delay: 700ms;}
.animate.delay-800					{ transition-delay: 800ms;}
.animate.delay-900					{ transition-delay: 900ms;}
.animate.delay-1000					{ transition-delay: 1000ms;}
.animate.delay-1100					{ transition-delay: 1100ms;}
.animate.delay-1200					{ transition-delay: 1200ms;}
}
@media (max-width:1200px) {
.animate.play.fade_in,
.animate.play.fade_down,
.animate.play.fade_up,
.animate.play.fade_left,
.animate.play.fade_right			{ transition-delay: 300ms;}

.animate.clip_ttb,					
.animate.clip_btt,					
.animate.clip_ltr,					
.animate.clip_rtl					{ opacity: 0; transition: opacity 800ms ease-out; transition-delay: 0ms;}
.animate.clip_ttb.play,	 
.animate.clip_btt.play,	 
.animate.clip_ltr.play, 
.animate.clip_rtl.play				{ opacity: 1; transition-delay: 300ms;}
}


/***** animation groups *****/
.animate .fade_in					{ opacity: 0; transition: opacity 600ms ease-out; transition-delay: 0ms;}
.animate.play .fade_in				{ opacity: 1;}
.animate .fade_up					{ opacity: 0; transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: 0ms;}
.animate.play .fade_up				{ opacity: 1; transform: translateY(0);}
.animate .fade_down					{ opacity: 0; transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: 0ms;}
.animate.play .fade_down			{ opacity: 1; transform: translateY(0);}
.animate .fade_left					{ opacity: 0; transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: 0ms;}
.animate.play .fade_left			{ opacity: 1; transform: translateY(0);}
.animate .fade_right				{ opacity: 0; transition: opacity 600ms ease-out, transform 600ms ease-out; transition-delay: 0ms;}
.animate.play .fade_right			{ opacity: 1; transform: translateY(0);}
.animate .zoom_in					{ opacity: 0; transform: scale(0.9); transition: opacity 400ms ease-out, transform 800ms ease-out; transition-delay: 0ms;}
.animate.play .zoom_in				{ opacity: 1;  transform: scale(1);}
.animate .rotate					{ transform: rotate(-20deg); transition: transform 400ms ease-out; transition-delay: 0ms;}
.animate.play .rotate				{ transform: rotate(0deg);}



@media (min-width:1201px) {
.animate .fade_up					{ transform: translateY(40px);}
.animate .fade_down					{ transform: translateY(-40px);}
.animate .fade_left					{ transform: translateX(-20px);}
.animate .fade_right				{ transform: translateX(20px);}

.animate .delay-200 				{ transition-delay: 200ms;}
.animate .delay-300 				{ transition-delay: 300ms;}
.animate .delay-400 				{ transition-delay: 400ms;}
.animate .delay-500 				{ transition-delay: 500ms;}
.animate .delay-600					{ transition-delay: 600ms;}
.animate .delay-700					{ transition-delay: 700ms;}
.animate .delay-800					{ transition-delay: 800ms;}
.animate .delay-900					{ transition-delay: 900ms;}
.animate .delay-1000				{ transition-delay: 1000ms;}
.animate .delay-1100				{ transition-delay: 1100ms;}
.animate .delay-1200				{ transition-delay: 1200ms;}
}
@media (max-width:1200px) {
.animate.play .fade_in,
.animate.play .fade_down,
.animate.play .fade_up,
.animate.play .fade_left,
.animate.play .fade_right			{ transition-delay: 300ms;}
}