#blank{
	background-color:white; width: 284px; height: 30px; margin-top: -170px;
	backface-visibility: hidden;

	-moz-animation-name: blank_fix;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: ease; /*transition*/
	-moz-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-moz-animation-direction: normal; 
	-moz-animation-fill-mode: forwards; 
	
	-ms-animation-name: blank_fix;
	-ms-animation-duration: 4s;
	-ms-animation-timing-function: ease; /*transition*/
	-ms-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-ms-animation-direction: normal;
	-ms-animation-fill-mode: forwards; 

}

@-moz-keyframes blank_fix{
	0%{ margin-top: -140px;}
	100%{ margin-top: -140px;}
}
@-ms-keyframes blank_fix{
	0%{ margin-top: -130px;}
	100%{ margin-top: -130px;}

}


#s21_header_anim{ height: 100px;  position:absolute; top: 31px; width: 400px; margin-top: 6px; margin-left: -12px;  overflow: hidden; b}

	#s21_header_anim.animate{
	/*Properties for the animation in general*/
	-webkit-animation-name: banner_all;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease; /*transition*/
	-webkit-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-webkit-animation-direction: normal; 
	-webkit-animation-fill-mode: forwards; 
	
	-moz-animation-name: banner_all;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: ease; /*transition*/
	-moz-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-moz-animation-direction: normal; 

	-ms-animation-name: banner_all;
	-ms-animation-duration: 4s;
	-ms-animation-timing-function: ease; /*transition*/
	-ms-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-ms-animation-direction: normal; 


	animation-name: banner_all;
	animation-duration: 4s;
	animation-timing-function: ease; /*transition*/
	animation-iteration-count:1; /*how many times = infinite | <number>*/
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes banner_all{
	0%{}
	75%{opacity:1;}
	100%{opacity:0;}
}

@-webkit-keyframes banner_all{
	0%{}
	75%{opacity:1;}
	100%{opacity:0;}
}

@-ms-keyframes banner_all{
	0%{}
	75%{opacity:1;}
	100%{opacity:0;}
}

@-moz-keyframes banner_all{
	0%{}
	75%{opacity:1;}
	100%{opacity:0;}
}



#unfolding{overflow: hidden; padding:20px; padding-left:0; background-color:white;}


	#unfolding.animate{
	/*Properties for the animation in general*/
	-webkit-animation-name: banner_away;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: ease; /*transition*/
	-webkit-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-webkit-animation-direction: normal; 
	-webkit-animation-fill-mode: forwards; 
	
	-moz-animation-name: banner_away;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function: ease; /*transition*/
	-moz-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-moz-animation-direction: normal; 

	-ms-animation-name: banner_away;
	-ms-animation-duration:3s;
	-ms-animation-timing-function: ease; /*transition*/
	-ms-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-ms-animation-direction: normal; 


	animation-name: banner_away;
	animation-duration: 3s;
	animation-timing-function: ease; /*transition*/
	animation-iteration-count:1; /*how many times = infinite | <number>*/
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes banner_away{
	0%{}
	68%{opacity:1;}
	100%{opacity:0;}
}

@-webkit-keyframes banner_away{
	0%{}
	68%{opacity:1;}
	100%{opacity:0;}
}

@-ms-keyframes banner_away{
	0%{}
	68%{opacity:1;}
	95%{opacity:0;}
	100%{opacity:0;}
}

@-moz-keyframes banner_away{
	0%{}
	68%{opacity:1;}
	100%{opacity:0;}
}



/*Main banner animation*/

	#s21_org_banner{ background-image: url('../images/index/anim/s21_org_banner.png'); background-repeat:no-repeat; 
		background-position: left; height: 58px; width: 52px;
		-ms-transform:skew(0deg,-15deg); /* IE 9 */
		-webkit-transform:skew(0deg,-15deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,-15deg); /* Standard syntax */}
		
	#s21_org_banner.animate{
	/*Properties for the animation in general*/
	-webkit-animation-name: org_banner;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease; /*transition*/
	-webkit-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-webkit-animation-direction: normal; 
	-webkit-animation-fill-mode: forwards; 
	
	-moz-animation-name: org_banner;
	-moz-animation-duration: 2s;
	-moz-animation-timing-function: ease; /*transition*/
	-moz-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-moz-animation-direction: normal; 

	-ms-animation-name: org_banner;
	-ms-animation-duration: 2s;
	-ms-animation-timing-function: ease; /*transition*/
	-ms-animation-iteration-count:1; /*how many times = infinite | <number>*/
	-ms-animation-direction: normal; 


	animation-name: org_banner;
	animation-duration: 2s;
	animation-timing-function: ease; /*transition*/
	animation-iteration-count:1; /*how many times = infinite | <number>*/
	animation-direction: normal;
	animation-fill-mode: forwards;
}	
		
@keyframes org_banner{
	0%{}
	60%{}
	70%{ -ms-transform:skew(0deg,0deg); /* IE 9 */
		-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,0deg); /* Standard syntax */
		width: 228px;}
	75%{width: 284px;}
	76%{width: 284px;}
	100%{width: 284px;
	-ms-transform:skew(0deg,0deg); /* IE 9 */
		-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,0deg); /* Standard syntax */}
}

@-webkit-keyframes org_banner{
	0%{}
	55%{ -ms-transform:skew(0deg,0deg); /* IE 9 */
		-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,0deg); /* Standard syntax */}
	70%{width: 228px;}
	75%{width: 284px;}
	76%{width: 284px;}
	100%{width: 284px;
		-ms-transform:skew(0deg,0deg); /* IE 9 */
		-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,0deg); /* Standard syntax */}
}

@-ms-keyframes org_banner{
	0%{}
	50%{}
	70%{-ms-transform:skew(0deg,0deg); /* IE 9 */
		-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,0deg); /* Standard syntax */
		width: 228px;}
	75%{width: 228px;}
	76%{width: 284px;}
	100%{width: 284px;
		-ms-transform:skew(0deg,0deg); /* IE 9 */
		-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,0deg); /* Standard syntax */}
}

@-moz-keyframes org_banner{
	0%{}
	50%{}
	70%{ -ms-transform:skew(0deg,0deg); /* IE 9 */
		-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,0deg); /* Standard syntax */
		width: 228px;}
	75%{width: 228px;}
	76%{width: 284px;}
	100%{width: 284px;
		-ms-transform:skew(0deg,0deg); /* IE 9 */
		-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,0deg); /* Standard syntax */}
}		
		

/* 2 animation */		
			
	#fold_2{background-image: url('../images/index/anim/2_shadow.png'); background-position: center ; background-repeat:no-repeat; height:68px; width: 55px; 
		position: relative; top: 5px; left: -1px;
		-ms-transform:skew(0deg,-13deg); /* IE 9 */
		-webkit-transform:skew(0deg,-13deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,-13deg); /* Standard syntax */
		
	}
	
			#fold_2.animate{
				/*Properties for the animation in general*/
				-webkit-animation-name: fold_2;
				-webkit-animation-duration: 2s;
				-webkit-animation-timing-function: ease; /*transition*/
				-webkit-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-webkit-animation-direction: normal; 
				-webkit-animation-fill-mode: forwards; 
				
				-moz-animation-name: fold_2;
				-moz-animation-duration: 2s;
				-moz-animation-timing-function: ease; /*transition*/
				-moz-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-moz-animation-direction: normal; 
			
				-ms-animation-name: fold_2;
				-ms-animation-duration: 2s;
				-ms-animation-timing-function: ease; /*transition*/
				-ms-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-ms-animation-direction: normal; 
			
			
				animation-name: fold_2;
				animation-duration: 2s;
				animation-timing-function: ease; /*transition*/
				animation-iteration-count:1; /*how many times = infinite | <number>*/
				animation-direction: normal;
				animation-fill-mode: forwards;
			}	

				@keyframes fold_2{
					0%{}
					100%{width: 33px;
						-ms-transform:skew(0deg,0deg); /* IE 9 */
						-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
						transform:skew(0deg,0deg); /* Standard syntax */}
				}
				
				@-webkit-keyframes fold_2{
					0%{}
					100%{width: 33px;
						-ms-transform:skew(0deg,0deg); /* IE 9 */
						-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
						transform:skew(0deg,0deg); /* Standard syntax */}
				}
				
				@-ms-keyframes fold_2{
					0%{}
					100%{width: 33px;
						-ms-transform:skew(0deg,0deg); /* IE 9 */
						-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
						transform:skew(0deg,0deg); /* Standard syntax */
						top:2px;height:58px;}
				}
				
				@-moz-keyframes fold_2{
					0%{}
					100%{width: 33px;
						-ms-transform:skew(0deg,0deg); /* IE 9 */
						-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
						transform:skew(0deg,0deg); /* Standard syntax */
						top:2px;height:58px;}
				}	
	
	
	
	#s2{background-image:url('../images/index/anim/fold.png');  position: relative; background-position: top left; background-repeat:no-repeat; height:77px; width: 14px; top: -68px; left:41px; }	


			#s2.animate{
				/*Properties for the animation in general*/
				-webkit-animation-name: s2;
				-webkit-animation-duration: 2s;
				-webkit-animation-timing-function: ease; /*transition*/
				-webkit-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-webkit-animation-direction: normal; -webkit-animation-fill-mode: forwards; 
				
				-moz-animation-name: s2;
				-moz-animation-duration: 2s;
				-moz-animation-timing-function: ease; /*transition*/
				-moz-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-moz-animation-direction: normal; 
			
				-ms-animation-name: s2;
				-ms-animation-duration: 2s;
				-ms-animation-timing-function: ease; /*transition*/
				-ms-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-ms-animation-direction: normal; 
			
			
				animation-name: s2;
				animation-duration: 2s;
				animation-timing-function: ease; /*transition*/
				animation-iteration-count:1; /*how many times = infinite | <number>*/
				animation-direction: normal;
				animation-fill-mode: forwards;
			}	

			@keyframes s2{
				0%{top: -68px;}
				30%{top: -72px;}
				70%{ top: -68px; left:220px;}
				80%{opacity:1}
				100%{ top: -68px; left:220px;opacity:0; background: none;  }
			}
			
			@-webkit-keyframes s2{
				0%{top: -68px;}
				30%{top: -72px;}
				70%{ top: -68px; left:220px;}
				80%{opacity:1}
				100%{ top: -68px; left:220px;opacity:0; background: none; }
			}
			
			@-ms-keyframes s2{
				0%{top: -68px;}
				35%{top: -70px;}
				70%{ top: -60px; left:220px;}
				80%{opacity:1}
				100%{ top: -60px; left:220px; opacity:0; height: 58px; }
			}
			
			@-moz-keyframes s2{
				0%{top: -68px;}
				35%{top: -70px;}
				70%{ top: -60px; left:220px;}
				80%{opacity:1}
				100%{ top: -60px; left:220px; opacity:0; height: 58px; }
			}	
	
	

	
	
/* 1 animation */		
	#fold_1{background-image: url('../images/index/anim/1_shadow.png'); background-position: top right; background-repeat:no-repeat; height:68px; 
		width: 55px; position: relative; top: 5px; left: -1px;
		-ms-transform:skew(0deg,-13deg); /* IE 9 */
		-webkit-transform:skew(0deg,-13deg); /* Chrome, Safari, Opera */
		transform:skew(0deg,-13deg); /* Standard syntax */
		}
		
		
			#fold_1.animate{
				/*Properties for the animation in general*/
				-webkit-animation-name: fold_1;
				-webkit-animation-duration: 2s;
				-webkit-animation-timing-function: ease; /*transition*/
				-webkit-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-webkit-animation-direction: normal; -webkit-animation-fill-mode: forwards; 
				
				-moz-animation-name: fold_1;
				-moz-animation-duration: 2s;
				-moz-animation-timing-function: ease; /*transition*/
				-moz-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-moz-animation-direction: normal; 
			
				-ms-animation-name: fold_1;
				-ms-animation-duration: 2s;
				-ms-animation-timing-function: ease; /*transition*/
				-ms-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-ms-animation-direction: normal; 
			
			
				animation-name: fold_1;
				animation-duration: 2s;
				animation-timing-function: ease; /*transition*/
				animation-iteration-count:1; /*how many times = infinite | <number>*/
				animation-direction: normal;
				animation-fill-mode: forwards;
				}	

				@keyframes fold_1{
					0%{}
					100%{width: 35px; background-position: top right;
						-ms-transform:skew(0deg,0deg); /* IE 9 */
						-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
						transform:skew(0deg,0deg); /* Standard syntax */}
				}
				
				@-webkit-keyframes fold_1{
					0%{}
					100%{width: 35px; background-position: top right;
						-ms-transform:skew(0deg,0deg); /* IE 9 */
						-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
						transform:skew(0deg,0deg); /* Standard syntax */}
				}
				
				@-ms-keyframes fold_1{
					0%{}
					100%{width: 35px; background-position: top right;
						-ms-transform:skew(0deg,0deg); /* IE 9 */
						-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
						transform:skew(0deg,0deg); /* Standard syntax */
						top: 0px;}
				}
				
				@-moz-keyframes fold_1{
					0%{}
					100%{width: 35px; background-position: top right;
						-ms-transform:skew(0deg,0deg); /* IE 9 */
						-webkit-transform:skew(0deg,0deg); /* Chrome, Safari, Opera */
						transform:skew(0deg,0deg); /* Standard syntax */
						top: 0px;
						}
				}	

		
	
	#s1{
	background-image:url('../images/index/anim/fold.png'); height: 77px; background-repeat:no-repeat; position: relative; width: 14px; 
	top: -145px;  left:81px; background-position: top left;
}	

			#s1.animate{
				/*Properties for the animation in general*/
				-webkit-animation-name: s1;
				-webkit-animation-duration: 2s;
				-webkit-animation-timing-function: ease; /*transition*/
				-webkit-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-webkit-animation-direction: normal; -webkit-animation-fill-mode: forwards; 
				
				-moz-animation-name: s1;
				-moz-animation-duration: 2s;
				-moz-animation-timing-function: ease; /*transition*/
				-moz-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-moz-animation-direction: normal; 
			
				-ms-animation-name: s1;
				-ms-animation-duration: 2s;
				-ms-animation-timing-function: ease; /*transition*/
				-ms-animation-iteration-count:1; /*how many times = infinite | <number>*/
				-ms-animation-direction: normal; 
			
			
				animation-name: s1;
				animation-duration: 2s;
				animation-timing-function: ease; /*transition*/
				animation-iteration-count:1; /*how many times = infinite | <number>*/
				animation-direction: normal;
				animation-fill-mode: forwards;
			}	

			@keyframes s1{
				0%{top: -144px;}
				35%{top: -148px; }
				70%{top: -144px;  left:253px; }
				85%{opacity:1}
				100%{  top: -144px;  left:253px; opacity:0; background-image: none; }
			}
			
			@-webkit-keyframes s1{
				0%{top: -144px;}
				35%{top: -148px; }
				70%{top: -144px;  left:253px; }
				85%{opacity:1}
				100%{  top: -144px;  left:253px; opacity:0; background-image: none; }
			}
			
			@-ms-keyframes s1{
				0%{top: -145px;}
				35%{top: -138px; border:solid thin blue}
				70%{ top: -120px;  left:253px; }
				85%{opacity:1}
				100%{  top: -120px;  left:253px; opacity:0; height: 58px;}
			}
			
			@-moz-keyframes s1{
				0%{top: -145px;}
				35%{top: -138px; border:solid thin blue}
				70%{ top: -120px;  left:253px; }
				85%{opacity:1}
				100%{  top: -120px;  left:253px; opacity:0; height: 58px; }
			}