p{ margin:0; padding:0;}
		h1{ margin:0; padding:0;}
		
		padding:10px;
		
	
		
		
		.phoe-main{ margin-bottom:150px; width:100%; float:left;}
		
		.phoe_animation1{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation1_inner{ transform:scale(0);-webkit-transform:scale(0); width:100%; height:100%; text-align:center; position:absolute; left:0; top:0; content:''; visibility:hidden;}
		.phoe_animation1_inner h1{ margin:0; padding:10px 0;}
		.phoe_animation1_inner p{ padding:10px;}
		.phoe_animation1:hover .phoe_animation1_inner{ visibility:visible;  transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation1:hover{cursor:pointer;}
		
		
		.phoe_animation2{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative;}
		.my{ background-color:orange; visibility:hidden; width:100%;}
		.phoe_animation2:hover .my{ visibility:visible;}
		.phoe_animation2:hover img{cursor:pointer;}
		.phoe_animation2_inner{width:100%; height:100%; text-align:center; position:absolute; left:0; transform: translateY(100%); -webkit-transform: translateY(100%); top:0; content:''; visibility:hidden;}
		.phoe_animation2_inner h1{padding:0; margin:0;  background: rgba(0, 0, 0, 0.6); padding:10px 0;transform: translateY(100%);transition: all 0.4s ease 0.6s;-webkit-transform: translateY(100%);-webkit-transition: all 0.4s ease 0.6s;}
		.phoe_animation2_inner p{padding:0; margin:0; padding-top:0;transform: translateY(100%);transition: all 0.4s ease 0.1s;-webkit-transform: translateY(100%);-webkit-transition: all 0.4s ease 0.1s;}
		.phoe_animation2:hover h1{transform: translateY(0);-webkit-transform: translateY(0);}
		.phoe_animation2:hover p{transform: translateY(0);-webkit-transform: translateY(0);}
		.phoe_animation2:hover .phoe_animation2_inner{visibility:visible;transform: translateY(0);-webkit-transform: translateY(0);}	
		.phoe_animation2:hover{cursor:pointer;}
		
		
		
		.phoe_animation3{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative;}
		.phoe_animation3_inner p{ margin:0; padding:10px;}
		.phoe_animation3_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0; top:0; content:''; opacity: 0;}
		.phoe_animation3:hover .phoe_animation3_inner{opacity: 1; transform:rotate(360deg);-webkit-transform:rotate(360deg); }
		.phoe_animation3:hover{cursor:pointer;}
		
		
		.phoe_animation4{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation4_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0;  top:0; content:''; opacity: 0;}
		.phoe_animation4_inner h1{transform: translateY(-100%);-webkit-transform: translateY(-100%); background:rgba(255, 0, 0, 0.4); padding:10px; transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;}
		.phoe_animation4_inner p{transform: translateY(100%);transition: all 0.2s ease 0s; -webkit-transform: translateY(100%);-webkit-transition: all 0.2s ease 0s; padding:10px 15px;}
		.phoe_animation4:hover{cursor:pointer;}
		.phoe_animation4:hover .phoe_animation4_inner{opacity: 1; }
		.phoe_animation4:hover h1{transform: translateY(0);-webkit-transform: translateY(0);}
		.phoe_animation4:hover p{transform: translateY(0); transition-delay:0.0.5s;-webkit-transform: translateY(0); -webkit-transition-delay:0.0.5s;}
		
		
		.phoe_animation5{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative;}
		.phoe_animation5_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0; top:0; content:'';  opacity: 0;}
		.phoe_animation5_inner h1{transform: translateX(-100%);-webkit-transform: translateX(-100%);  background: rgba(0, 0, 0, 0.6); padding:10px; transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;}
		.phoe_animation5_inner p{transform: translateX(100%);transition: all 0.2s ease 0s;-webkit-transform: translateX(100%);-webkit-transition: all 0.2s ease 0s; padding:10px 15px;}
		.phoe_animation5:hover .phoe_animation5_inner{ opacity: 1; }
		.phoe_animation5:hover h1{transform: translateX(0);-webkit-transform: translateX(0);}
		.phoe_animation5:hover p{transform: translateX(0); transition-delay:0.0.5s;-webkit-transform: translateX(0); -webkit-transition-delay:0.0.5s;}
		.phoe_animation5:hover{cursor:pointer;}
		
		
		
		.phoe_animation6{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation6_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0;  top:0; content:'';   opacity: 0;}
		.phoe_animation6_inner h1{transform: translateX(100px);  -webkit-transform: translateX(100px);  background: rgba(0, 0, 0, 0.6); padding:10px; transition: all 0.2s ease-in-out 0s;-webkit-transition: all 0.2s ease-in-out 0s;}
		.phoe_animation6_inner p{transform: translateX(-100px);transition: all 0.2s linear 0s; -webkit-transform: translateX(-100px);-webkit-transition: all 0.2s linear 0s; padding:10px 15px;}
		.phoe_animation6:hover .phoe_animation6_inner{opacity: 1; }
		.phoe_animation6:hover h1{transform: translateX(0px);-webkit-transform: translateX(0px);}
		.phoe_animation6:hover p{transform: translateX(0px); transition-delay:0.0.5s;-webkit-transform: translateX(0px); -webkit-transition-delay:0.0.5s;}
		.phoe_animation6:hover{cursor:pointer;}
		
		
		.phoe_animation7{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation7_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0; transform: translate(460px, -100px) rotate(30deg); -webkit-transform: translate(460px, -100px) rotate(30deg); top:0; content:'';   visibility:hidden;}
		.phoe_animation7_inner h1{transform: translateY(-100%);-webkit-transform: translateY(-100%);  background: rgba(0, 0, 0, 0.6); padding:10px; transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;}
		.phoe_animation7_inner p{transform: translateX(-400px) rotate(90deg);transition: all 0.2s linear 0s;-webkit-transform: translateX(-400px) rotate(90deg);-webkit-transition: all 0.2s linear 0s; padding:10px 15px;}
		.phoe_animation7:hover .phoe_animation7_inner{ visibility:visible; transform: translate(0, 0) rotate(0deg);-webkit-transform: translate(0, 0) rotate(0deg);}
		.phoe_animation7:hover h1{transform: translateY(0px); transition-delay:0.5s;-webkit-transform: translateY(0px); -webkit-transition-delay:0.5s;}
		.phoe_animation7:hover p{transform: translateX(0px) rotate(0deg); transition-delay:0.5s;-webkit-transform: translateX(0px) rotate(0deg); -webkit-transition-delay:0.5s;}
		.phoe_animation7:hover{cursor:pointer;}
		
		
		.phoe_animation8{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation8_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0; transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); top:0; content:'';   visibility:hidden;}
		.phoe_animation8_inner h1{ padding:10px; }
		.phoe_animation8_inner p{padding:10px 15px;}
		.phoe_animation8:hover .phoe_animation8_inner{ visibility:visible; transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg);}
		.phoe_animation8:hover{cursor:pointer;}


		.phoe_animation9{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation9 img{ max-width: 100%; height:100%; transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
		.phoe_animation9:hover img{cursor:pointer;}
		.phoe_animation9_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0; transform: translateX(-300px); -webkit-transform: translateX(-300px); top:0; content:''; visibility:hidden;}
		.phoe_animation9_inner h1{ padding:10px; }
		.phoe_animation9_inner p{padding:10px 15px;}
		.phoe_animation9:hover .phoe_animation9_inner{visibility:visible; transform: translateX(0); -webkit-transform: translateX(0); }	
		.phoe_animation9:hover{cursor:pointer;}
		
		
		.phoe_animation10{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation10_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0; transform: translateY(-200px); -webkit-transform: translateY(-200px); top:0; content:'';    visibility:hidden;}
		.phoe_animation10_inner h1{ padding:10px; }
		.phoe_animation10_inner p{padding:10px 15px;}
		.phoe_animation10:hover .phoe_animation10_inner{visibility:visible; transform: translateY(0);-webkit-transform: translateY(0);}	
		.phoe_animation10:hover{cursor:pointer;}
		
		
		.phoe_animation11{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation11 img{ max-width: 100%; height:100%; transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
		.phoe_animation11:hover img{cursor:pointer;}
		.phoe_animation11_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0; transform: translateY(200px); -webkit-transform: translateY(200px); top:0; content:'';   visibility:hidden;}
		.phoe_animation11_inner h1{ padding:10px; }
		.phoe_animation11_inner p{padding:10px 15px;}
		.phoe_animation11:hover .phoe_animation11_inner{ visibility:visible; transform: translateY(0); -webkit-transform: translateY(0);}	
		.phoe_animation11:hover img{ transform:translateY(-200px);-webkit-transform:translateY(-200px);}
		.phoe_animation11:hover{cursor:pointer;}
		
		
		.phoe_animation12{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative; }
		.phoe_animation12 img{ max-width: 100%; height:100%; transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
		.phoe_animation12:hover img{cursor:pointer;}
		.phoe_animation12_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0; transform: translateX(300px); -webkit-transform: translateX(300px); top:0; content:'';  visibility:hidden;}
		.phoe_animation12_inner h1{ padding:10px; }
		.phoe_animation12_inner p{padding:10px 15px;}
		.phoe_animation12:hover .phoe_animation12_inner{ visibility:visible; transform: translateX(0);-webkit-transform: translateX(0);}	
		.phoe_animation12:hover img{ transform:translateX(-300px);-webkit-transform:translateX(-300px);}
		.phoe_animation12:hover{cursor:pointer;}
		
		
		.phoe_animation13{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative;}
		.phoe_animation13 img{ max-width: 100%; height:100%;}
		.phoe_animation13:hover img{cursor:pointer;}
		.phoe_animation13_inner{ padding:10px; width:100%; height:100%; text-align:center; position:absolute; left:0; transform: translateY(200px); -webkit-transform: translateY(200px); top:0; content:''; opacity: 0;}
		.phoe_animation13_inner h1{padding:0; margin:0;}
		.phoe_animation13_inner p{padding:0; margin:0; padding-top:0;}
		.phoe_animation13:hover .phoe_animation13_inner{ opacity: 1; transform: translateY(130px);-webkit-transform: translateY(130px);}	
		.phoe_animation13:hover{cursor:pointer;}
		
		
		.phoe_animation14{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative;}
		.phoe_animation14 img{ max-width: 100%; height:100%;}
		.phoe_animation14:hover img{cursor:pointer;}
		.phoe_animation14_inner{ padding:10px; width:100%; height:100%; text-align:center; position:absolute; left:0; bottom:0; content:'';   opacity: 0;}
		.phoe_animation14_inner h1{padding:0; margin:0;}
		.phoe_animation14_inner p{padding:0; margin:0; padding-top:0;}
		.phoe_animation14:hover .phoe_animation14_inner{opacity: 1; height:30%;}	
		.phoe_animation14:hover{cursor:pointer;}
		
		
		.phoe_animation15{ 	width: 300px; height: 200px; overflow: hidden; float: left;margin-right: 20px; position:relative; }
		.phoe_animation15 img{ max-width: 100%; height:100%;	}
		.phoe_animation15:hover{cursor:pointer;}
		.phoe_animation15_inner{padding:0; width:100%; height:100%; text-align:center; position:absolute; left:0;top:0; content:'';  opacity: 0;}
		.phoe_animation15_inner h1{transform:scale(10);-webkit-transform:scale(10);transition:all 0.5s ease;-webkit-transition:all 0.5s ease;}
		.phoe_animation15_inner p{transform:scale(10);-webkit-transform:scale(10);transition:all 0.5s ease;-webkit-transition:all 0.5s ease;padding:0 20px;}
		.phoe_animation15:hover p{transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation15:hover h1{transform:scale(1);-webkit-transform:scale(1);  }
		.phoe_animation15:hover .phoe_animation15_inner{opacity: 1; }
		
		
		.phoe_animation16{ width: 300px; height: 200px; overflow: hidden; float: left;	margin-right: 20px; position:relative; }
		.phoe_animation16 img{ max-width: 100%; height:100%;}
		.phoe_animation16:hover{cursor:pointer;}
		.phoe_animation16_inner{ width:100%; height:100%; text-align:center; position:absolute; left:0;top:0; content:''; opacity: 0;}
		.phoe_animation16_inner h1{transform:translateY(-100%);-webkit-transform:translateY(-100%);transition:all 0.2s ease 0.1s;-webkit-transition:all 0.2s ease 0.1s; background: rgba(0, 0, 0, 0.6);padding:5px;margin:0;}
		.phoe_animation16_inner p{transform:translateY(-100%);-webkit-transform:translateY(-100%);transition:all 0.2s ease 0.2s;-webkit-transition:all 0.2s ease 0.2s;margin:0;padding:5px;padding-top:10px;}
		.phoe_animation16:hover p{transform:translateY(0);-webkit-transform:translateY(0);}
		.phoe_animation16:hover h1{transform:translateY(0);-webkit-transform:translateY(0);}
		.phoe_animation16:hover .phoe_animation16_inner{opacity: 1; }
		
		
		
		.phoe_animation17{ width: 300px; height: 200px; overflow: hidden; 	float: left;margin-right: 20px; position:relative; }
		.phoe_animation17 img{ max-width: 100%; height:100%;transform: scaleY(1);-webkit-transform: scaleY(1);transition: all 0.7s ease-in-out 0s;-webkit-transition: all 0.7s ease-in-out 0s;}
		.phoe_animation17:hover{cursor:pointer;}
		.phoe_animation17_inner{padding:0;width:100%; height:100%; text-align:center; position:absolute; left:0;top:0; content:'';  opacity: 0;}
		.phoe_animation17_inner h1{transform: scale(0);-webkit-transform: scale(0);transition: all 0.5s linear 0s;-webkit-transition: all 0.5s linear 0s;background: rgba(0, 0, 0, 0.6);padding:5px;margin:0;}
		.phoe_animation17_inner p{transform: scale(0);-webkit-transform: scale(0);transition: all 0.5s linear 0s;-webkit-transition: all 0.5s linear 0s;margin:0;padding:5px;padding-top:10px;}
		.phoe_animation17:hover p{transform: scale(1);-webkit-transform: scale(1);}
		.phoe_animation17:hover img{transform: scale(5);-webkit-transform: scale(5);}
		.phoe_animation17:hover h1{transform: scale(1);-webkit-transform: scale(1);}
		.phoe_animation17:hover .phoe_animation17_inner{opacity: 1; }
		
		
		.phoe_animation18{ 	width: 300px; height: 200px; overflow: hidden; float: left;margin-right: 20px; position:relative;}
		.phoe_animation18 img{ max-width: 100%; height:100%;}
		.phoe_animation18:hover{cursor:pointer;}
		.phoe_animation18_inner{ text-align:center; position:absolute; left:0;top:0; content:'';   :0;visibility:hidden; overflow:visible;margin:5%; width:90%; bottom:0;}
		.phoe_animation18_inner h1{ padding:10px 0 0 0;}
		.phoe_animation18_inner::before{border-left: solid 1px red; border-right: solid 1px red; left:0; top:0; bottom:0; right:0; position:absolute; content:'';transform: scale(1, 0);-webkit-transform: scale(1, 0);transition:all 0.35s ease 0s;-webkit-transition:all 0.35s ease 0s;}
		.phoe_animation18:hover .phoe_animation18_inner::before{ transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation18:hover .phoe_animation18_inner::after{ transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation18_inner::after{border-top: solid 1px red; border-bottom: solid 1px red; left:0; top:0; bottom:0; right:0; 	position:absolute; content:'';transform: scale(0, 1);-webkit-transform: scale(0, 1);transition:all 0.35s ease 0s;-webkit-transition:all 0.35s ease 0s;}
		.phoe_animation18:hover .phoe_animation18_inner{visibility:visible; }
		
		
		
		.phoe_animation19{ width: 300px; height: 200px; overflow: hidden; float: left;margin-right: 20px; position:relative;}
		.phoe_animation19 img{ max-width: 100%; height:100%;transform:scale(1.1);-webkit-transform:scale(1.1);transition:all 1s ease;-webkit-transition:all 1s ease;}
		.phoe_animation19:hover img{ transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation19:hover{cursor:pointer;}
		.phoe_animation19_inner{ text-align:center; position:absolute; left:0;top:0; content:'';   :0; visibility:hidden; overflow:visible; margin:10px; bottom:0;padding:30px 25px 10px;}
		.phoe_animation19_inner::before{border-left: solid 1px red; border-right: solid 1px red; left:20px; top:0; bottom:0; right:20px; position:absolute; content:'';transform: scale(1, 0);-webkit-transform: scale(1, 0);transition:all 0.35s ease 0s;-webkit-transition:all 0.35s ease 0s;transform-origin: 0 0;-webkit-transform-origin: 0 0;}
		.phoe_animation19:hover .phoe_animation19_inner::before{ transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation19:hover .phoe_animation19_inner::after{ transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation19_inner::after{border-top: solid 1px red; border-bottom: solid 1px red; left:0; top:20px; bottom:20px; right:0; position:absolute; content:'';transform: scale(0, 1);-webkit-transform: scale(0, 1);transition:all 0.35s ease 0s;-webkit-transition:all 0.35s ease 0s; transform-origin: 100% 0; -webkit-transform-origin: 100% 0;}
		.phoe_animation19:hover .phoe_animation19_inner{visibility:visible;}
		
		
		
		
		.phoe_animation20{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative;}
		.phoe_animation20:hover .phoe_animation20_inner{ transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation20_inner{ transform:scale(1.5); -webkit-transform:scale(1.5);border:1px solid red;text-align:center; position:absolute; left:20px;bottom:20px; right:20px; top:20px; content:''; opacity: 0;}
		.phoe_animation20:hover .phoe_animation20_inner{ opacity: 1; }
		.phoe_animation20:hover{cursor:pointer;}

		
		.phoe_animation21{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative;}
		.phoe_animation21 img{ max-width: 100%; height:100%; }
		.phoe_animation21_inner{border:1px solid red;transform:scale(0); -webkit-transform:scale(0); transition: all 0.3s ease;-webkit-transition: all 0.3s ease;text-align:center; position:absolute; left:20px; bottom:20px; right:20px; top:20px; content:''; opacity: 0;}
		.phoe_animation21:hover .phoe_animation21_inner{ opacity: 1;  transform:scale(1);-webkit-transform:scale(1);}
		.phoe_animation21:hover{cursor:pointer;}
		.phoe_animation21_inner p{padding:10px; transform:scale(0); transition:all 0.5s ease 0.3s;-webkit-transform:scale(0); -webkit-transition:all 0.5s ease 0.3s;}
		.phoe_animation21:hover p{transform:scale(1);-webkit-transform:scale(1);}

		
		.phoe_animation22{ width: 300px; height: 200px; overflow: hidden; float: left; margin-right: 20px; position:relative;}
		.my{ background-color:orange; visibility:hidden; width:100%;}
		.phoe_animation22:hover .my{ visibility:visible;}
		.phoe_animation22:hover img{cursor:pointer;}
		.phoe_animation22_inner{width:100%; height:100%; text-align:center; position:absolute; left:0; transform: translateY(100%); -webkit-transform: translateY(100%); top:0; content:''; visibility:hidden;}
		.phoe_animation22_inner h1{padding:0; margin:0;  background: rgba(0, 0, 0, 0.6); padding:10px 0;transform: translateY(100%);transition: all 0.4s ease 0.6s;-webkit-transform: translateY(100%);-webkit-transition: all 0.4s ease 0.6s;}
		.phoe_animation22_inner p{padding:0; margin:0; padding-top:0;transform: translateY(100%);transition: all 0.4s ease 0.1s;-webkit-transform: translateY(100%);-webkit-transition: all 0.4s ease 0.1s;}
		.phoe_animation22:hover h1{transform: translateY(0);-webkit-transform: translateY(0);}
		.phoe_animation22:hover p{transform: translateY(0);-webkit-transform: translateY(0);}
		.phoe_animation22:hover .phoe_animation22_inner{visibility:visible;transform: translateY(0);-webkit-transform: translateY(0);}	
		.phoe_animation22:hover{cursor:pointer;}