/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1000px) {
	div.pageanimatebox1,div.pageanimatebox2,div.pageanimatebox3{float:left; position:relative; width:100%; height:400px; border:#666 1px solid;  overflow:hidden;}
	div.pageanimatebox1col1,div.pageanimatebox2col1{position:absolute; width:150px; height:300px; background-color:#F00; margin:0px; top:20px; left:100px; opacity:1;transition: all 0.5s ease-out;}
	div.pageanimatebox1col2,div.pageanimatebox2col1{position:absolute; width:150px; height:300px; background-color:#0F0; margin:0px; top:20px; left:300px; opacity:1;transition: all 0.5s ease-out;}
	div.pageanimatebox1col3,div.pageanimatebox2col1{position:absolute; width:150px; height:300px; background-color:#00F; margin:0px; top:20px; left:500px; opacity:1;transition: all 0.5s ease-out;}
	div.pageanimatebox1col4,div.pageanimatebox2col1{position:absolute; width:150px; height:300px; background-color:#FF0; margin:0px; top:20px; left:700px; opacity:1;transition: all 0.5s ease-out;}

	div.pageanimatecolmoveup{top:100px !important; opacity:0 !important; transition: all 0.5s ease-out;}
	div.pageanimatecolmovedown{top:-100px !important; opacity:0 !important; transition: all 0.5s ease-out;}

	div.pageanimatecollefttoright{margin-left:100px !important; opacity:0 !important; transition: all 0.5s ease-out;}
	div.pageanimatecolrighttoleft{margin-left:-100px !important; opacity:0 !important; transition: all 0.5s ease-out;}

	/*Graph Chart*/
	div.pageanimatechart1{float:left; position:relative; width:100%; height:400px; border: 1px solid #F00; overflow:hidden;}

	div.pageanimatechart1axisy{position:absolute; left:55px; top:0px; width:1px; height:100%; border-left:1px solid #000;}
	div.pageanimatechart1axisy ul,div.pageanimatechart1axisy li{ list-style:none; margin:0px; padding:0px;}
	div.pageanimatechart1axisy ul{position:absolute; bottom:40px; left:-5px;}
	div.pageanimatechart1axisy li{width:50px; margin:0px 0px 60px -38px; text-align:right;}
	div.pageanimatechart1axisy li span{float:right; display:block; margin:10px 0px 0px 5px; width:15px; height:1px; border-top:solid 1px #000;}
	
	div.pageanimatechart1axisx{position:absolute; bottom:40px; left:0px; width:100%; height:1px; border-bottom:1px solid #000;}
	div.pageanimatechart1axisx ul,div.pageanimatechart1axisx li{ list-style:none; margin:0px; padding:0px;}
	div.pageanimatechart1axisx ul{position:absolute; bottom:-32px; left:40px;}
	div.pageanimatechart1axisx li{float:left;width:45px; margin:0px 0px 0px 100px; font-weight:bold; text-align:right;}
	div.pageanimatechart1axisx li span{float:left; display:block; margin:0px 0px 5px 20px; width:1px; height:15px; border-left:solid 1px #000;}
	div.pageanimatechart1axisx li strong{float:left; width:100%; text-align:center;}

	div.pageanimatechart1col1on{position:absolute; bottom:40px; left:130px; width:60px; height:60px; background-color:#F00; opacity:1;transition: all 0.5s ease-out; color:#FFF; text-align:center; font-weight:bold; padding:15px 0px 15px 0px;}
	div.pageanimatechart1col2on{position:absolute; bottom:40px; left:275px; width:60px; height:100px; background-color:#F00; opacity:1;transition: all 0.5s ease-out;color:#FFF; text-align:center; font-weight:bold; padding:15px 0px 15px 0px;}
	div.pageanimatechart1col3on{position:absolute; bottom:40px; left:418px; width:60px; height:160px; background-color:#F00; opacity:1;transition: all 0.5s ease-out;color:#FFF; text-align:center; font-weight:bold; padding:15px 0px 15px 0px;}
	div.pageanimatechart1col4on{position:absolute; bottom:40px; left:564px; width:60px; height:220px; background-color:#F00; opacity:1;transition: all 0.5s ease-out;color:#FFF; text-align:center; font-weight:bold; padding:15px 0px 15px 0px;}
	div.pageanimatechart1col5on{position:absolute; bottom:40px; left:710px; width:60px; height:300px; background-color:#F00; opacity:1;transition: all 0.5s ease-out;color:#FFF; text-align:center; font-weight:bold; padding:15px 0px 15px 0px;}
	
	div.pageanimatechart1coloff{height:0px!important; opacity:0;transition: all 0.5s ease-out;}

}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (min-width: 0px) and (max-width: 999px){
	div.pageanimatebox1,div.pageanimatebox2,div.pageanimatebox3{float:left;width:100%; border:#666 1px solid; padding:20px; height:250px; overflow:hidden; }
	div.pageanimatebox1col1,div.pageanimatebox2col1{float:left; width:100%; height:50px; background-color:#F00; margin:0px; opacity:1;transition: all 0.5s ease-out;}
	div.pageanimatebox1col2,div.pageanimatebox2col1{float:left; width:100%; height:50px; background-color:#0F0; margin:0px; opacity:1;transition: all 0.5s ease-out;}
	div.pageanimatebox1col3,div.pageanimatebox2col1{float:left; width:100%; height:50px; background-color:#00F; margin:0px; opacity:1;transition: all 0.5s ease-out;}
	div.pageanimatebox1col4,div.pageanimatebox2col1{float:left; width:100%; height:50px; background-color:#FF0; margin:0px; opacity:1;transition: all 0.5s ease-out;}
	
	div.pageanimatecolmoveup{margin-left:-150px !important; opacity:0 !important; transition: all 0.5s ease-out;}
	div.pageanimatecolmovedown{margin-left:-150px !important; opacity:0 !important; transition: all 0.5s ease-out;}

	div.pageanimatecollefttoright{margin-left:150px !important; opacity:0 !important; transition: all 0.5s ease-out;}
	div.pageanimatecolrighttoleft{margin-left:-150px !important; opacity:0 !important; transition: all 0.5s ease-out;}


	/*Graph Chart*/
	div.pageanimatechart1{float:left; position:relative; width:100%; height:350px; border: 1px solid #F00; overflow:hidden;}

	div.pageanimatechart1axisx{position:absolute; left:60px; top:0px; width:1px; height:100%; border-left:1px solid #000;}
	div.pageanimatechart1axisx ul,div.pageanimatechart1axisx li{ list-style:none; margin:0px; padding:0px;}
	div.pageanimatechart1axisx ul{position:absolute; top:0px; left:0px;}
	div.pageanimatechart1axisx li{width:60px; margin:45px 0px 0px -52px; text-align:right;}
	div.pageanimatechart1axisx li span{float:right; display:block; margin:10px 0px 0px 5px; width:15px; height:1px; border-top:solid 1px #000;}
	
	div.pageanimatechart1axisy{display:none;}

	div.pageanimatechart1col1on{position:absolute; top:40px; left:60px; width:25%; height:35px; background-color:#F00; opacity:1;transition: all 0.5s ease-out; color:#FFF; text-align:center; font-weight:bold; padding:5px 0px 5px 0px;}
	div.pageanimatechart1col2on{position:absolute; top:100px; left:60px; width:45%; height:35px; background-color:#F00; opacity:1;transition: all 0.5s ease-out; color:#FFF; text-align:center; font-weight:bold; padding:5px 0px 5px 0px;}
	div.pageanimatechart1col3on{position:absolute; top:165px; left:60px; width:55%; height:35px; background-color:#F00; opacity:1;transition: all 0.5s ease-out; color:#FFF; text-align:center; font-weight:bold; padding:5px 0px 5px 0px;}
	div.pageanimatechart1col4on{position:absolute; top:228px; left:60px; width:65%; height:35px; background-color:#F00; opacity:1;transition: all 0.5s ease-out; color:#FFF; text-align:center; font-weight:bold; padding:5px 0px 5px 0px;}
	div.pageanimatechart1col5on{position:absolute; top:292px; left:60px; width:75%; height:35px; background-color:#F00; opacity:1;transition: all 0.5s ease-out; color:#FFF; text-align:center; font-weight:bold; padding:5px 0px 5px 0px;}
	
	div.pageanimatechart1coloff{width:0px!important; opacity:0;transition: all 0.5s ease-out;}



}

/* ==========================================================================
   Share CSS
   ========================================================================== */