html,body{
    margin: 0 ;
    height:auto;
	width : 100% ;
	position : absolute ;
}

#mask{
	   position: fixed  ;
	   width: 100% ;
	   height: 90% ; 
	   bottom : 0 ;
	   background : url('http://www.touchpal.com/images/content5_bg.jpg') no-repeat  ;
	   background-size : 100% auto ;
	}
@media (max-width: 600px) {
     #mask{
	   position: fixed  ;
	   width: 100% ;
	   height : 90% ; 
	   bottom : 0 ;
	   background : url('../phone_images/phone_content5_bg.jpg') no-repeat  ;
	   background-size : 100% auto  ;
	   background-position : center center ;
	}
 }



#page{
    position: absolute ;
	width : 100% ;
    height : auto ;
}

.mm-page{
    position: absolute ;
	width : 100% ;
   height : auto ;
}

.section{
	   position: relative ;
	   width: 100% ;
	  
	   
}


.wrapper{
	    position : relative ;
		width:100%;
		margin: auto ;
		height : 100% ;
	}
	
	
	
	.part{
	   position: relative ;
	   width: 100% ;
	   height: 100% ; margin-top : 0 ; 
	   overflow: hidden ;
	}
	
	 #part1{
	     color : white ;
	     background: url('http://www.touchpal.com/phone_images/phone_content1_bg.jpg') ;
		 background-size : 100% 100% ;
	 }
	
	@media (min-width: 600px) { 
	
	  #part1{
	     color : white ;
	     background: url('http://www.touchpal.com/images/content1_bg.jpg') ;
		 background-size : 100% 100% ;
	  }
	
	}
	
	#part2{
	    background-color : white ;
	}
	
	
	
	#part4{
	    background-color : white ;
	}
	
	
	 #ibutton{
	    position : absolute ;
		right : 20px ;
		top: 100px ;
		width : 123px ;
		height : 37px ;
		background: url('../images/applestore_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	  #abutton{
	    position : absolute ;
		right : 20px ;
		top: 150px ;
		width : 123px ;
		height : 45px ;
		background: url('../images/googleplay_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	  
	  .words{
	    position : absolute ;
		top : 90px ;
		left : 5% ;
	  }
	  .words p{
	    font-size : 14px ;
		line-height : 20px ;
		margin: 0;
	  }
	
	  .words h1{
	    font-size : 21px ;
		margin: 10px auto 24px auto;
		font-weight : normal;
	  }
	  
	  
	@media (max-width: 380px) {
	
	 .left{ 
        position : relative ;
		float: left ;
		width: 100% ;
		height : 100% ;
	  }
	   .buttonGroup{
	        position : relative ;
			width : 220px ;
			height : 70px ;
			top : 170px ;
			left : 5% ;
	   }
	
	    #ibutton{
	    position : relative ;
		float : left ;
		top : 0 ;
		right : 0 ;
		width : 110px ;
		height : 34px ;
		background: url('../images/applestore_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	  #abutton{
	    position : relative ;
		float : right ;
		right : 0 ;
		top : 0 ;
		
		width : 100px  ;
		height : 35px ;
		background: url('../images/googleplay_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	  .words{
	    position : absolute ;
		top : 70px ;
		left : 5% ;
	  }
	  .words p{
	    font-size : 16px ;
		line-height : 20px ;
		margin: 0;
	  }
	  
	  .words h1{
	    font-size : 22px ;
		margin: 10px auto 12px auto;
		font-weight : normal ;
	  }
	  
	 
	}
	
	@media (min-width: 600px) { 
	
	  .left{ 
        position : relative ;
		float: left ;
		width: 50% ;
		height : 100% ;
	  }
	  .right{ 
        position : relative ;
		float: right ;
		width: 50% ;
		height : 100% ;
	  }
	 
	  
	  #ibutton{
	    position : absolute ;
		left : 40% ;
		top: 45% ;
		width : 23% ;
		height : 60px ;
		background: url('../images/applestore_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	  #abutton{
	    position : absolute ;
		left : 65% ;
		top: 45% ;
		width : 20%  ;
		height : 60px ;
		background: url('../images/googleplay_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	  
	  .words{
	    position : relative ;
		top : 25% ;
		left : 200px ;
	  }
	  .words p{
	    font-size : 24px ;
		margin: 10px auto;
	  }
	
	  .words h1{
	    font-size : 48px ;
		margin: 8px auto;
	  }
	}
	
	@media (min-width: 1000px) { 
	  
	  #ibutton{
	    position : absolute ;
		left : 160px ;
		top: 54% ;
		width : 160px ;
		height : 78px ;
		background: url('../images/applestore_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	  #abutton{
	    position : absolute ;
		left : 340px ;
		top: 54% ;
		width : 142px   ;
		height : 78px ;
		background: url('../images/googleplay_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	  .words{
	    position : relative ;
		top : 32% ;
		left : 160px ;
	  }
	  
	  
	}
	
	@media (min-width: 1400px) { 
	  
	  #ibutton{
	    position : absolute ;
		left : 200px ;
		top: 52% ;
		width : 200px ;
		height : 90px ;
		background: url('../images/applestore_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	  #abutton{
	    position : absolute ;
		left : 450px ;
		top: 52% ;
		width : 180px   ;
		height : 90px ;
		background: url('../images/googleplay_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	  
	  .words{
	    position : relative ;
		top : 34% ;
		left : 200px ;
	  }
	  
	  
	}
	
	.upup{
	    -webkit-transition: all 1s ease-out 0;transition: all 1s ease-out 0 ; -webkit-transition-delay : .6s ;
	}
	
	@media (min-width: 300px) { 
      #hand{
	   position : absolute ;
	   left : 20%;
		bottom : -60px ;
		width :  250px ;
		height :  384px;
		display : none ;
		background: url('http://www.touchpal.com/phone_images/phone_content1_phone.png') no-repeat ;
		background-size : 100% auto ;
		
	  }
    }
	
	
	
	
	@media (min-width: 1000px) { 
      #hand{
	   position : absolute ;
	   left : 20%;
		bottom : -90px ;
		width :  333px ;
		height :  512px;
		display : none ;
		background: url('../images/content1_phone.png') no-repeat ;
		background-size : 100% auto ;
		
	  }
    }
	@media (min-width: 1400px) { 
      #hand{
	   position : absolute ;
	   left : 10%;
		bottom : -90px ;
		width :  450px ;
		height :  700px;
		display : none ;
		background: url('../images/content1_phone.png') no-repeat ;
		background-size : 100% auto ;
	
	  }
    }
	
	@media (min-width: 1600px) { 
      #hand{
	   position : absolute ;
	   left : 10%;
		bottom : -90px ;
		width :  520px ;
		height :  810px;
		display : none ;
		background: url('../images/content1_phone.png') no-repeat ;
		background-size : 100% auto ;
	
	  }
    }
	
	 .p2words{
		    margin-top: 80px ;
		}
	
	#part2 h1{
	    position : relative ;
	    margin : auto ;
		top : 10% ;
		font-size : 48px ;
		text-align : center ;
	}
	
	#part2 p{
	    position : relative ;
	    margin : auto ;
		top : 15% ;
		font-size : 24px ;
		text-align : center ;
	}
	
	#videoButton{
	   position : absolute ;
	   bottom : 18% ;
	   width : 50% ;
	   left : 25% ;
	   height : 65% ;
	   opacity: 1 ;
	   background : url('../images/content2_tv.jpg') no-repeat ;
	   background-size : 100% auto ;
	}
	
	#realButton{
	   position : absolute ;
	   bottom : 20% ;
	   width : 10% ;
	   right : 25% ;
	   height : 25% ;
	   opacity: 1 ;
	   
	}
	
	#realButton:hover{
      opacity: 0.6 ;
   }
   
   #maskVideo{
     display : none ;
	 position : fixed ;
	 z-index : 990 ;
	 top: 0 ;
	 left : 0 ;
	 width: 100% ;
	 height : 100% ;
   }
   
   #cloth{
     position : absolute  ;
	 z-index : 1000 ;
     width: 100% ;
	 height : 100% ;
	 background-color : black ;
	 opacity: 0.9 ;
   }
   
   .easyhtml5video{
       position:absolute ;
	   z-index : 1002 ;
	   top: 15% ;
	   width:60% ;
	   margin-left: 20% ;
   }
   #closeVideo{
       position: absolute ;
	   z-index : 1003 ;
	   background: url('../images/btn-overlay-close.png') no-repeat ;
	   background-position : 0 100% ;
	   top : 15% ;
	   left : 80% ;
	   width : 42px ;
	   height : 42px ;
   }
   
   #closeVideo:hover{
       
	   background-position : 0 0 ;
	   
   }
   
   
	
	@media (max-width: 600px){
	   
	   
	    #part2 h1{
		    font-size: 20px ;
		}
		#part2 p{
		    font-size: 16px ;
		}
		.p2words{
		    margin-top: 100px ;
		}
		.middleLoc{
		    position : relative ;
			top : 50px ;
			width : 350px  ;
			margin : auto ;
			height : 404px ;
		}
		
		#videoWrap{
		   display : none ;
		}
		
		#videoButton{
		   display : none ;
		}
		
		#videoImg{
	   position : relative ;
	   
	   bottom : 0 ;
	   margin-left : 2.5% ;
	   width : 95%  ;
	   
	   height : 100%;
	   background : url('../phone_images/phone_content2_phone.jpg') no-repeat ;
	   background-size : 100% auto ;
	   background-position  : top center ;
	  }
	}
	
	@media (max-width: 350px) {
	
	   .middleLoc{
		    position : relative ;
			top : 50px ;
			width : 300px  ;
			margin : auto ;
			height : 404px ;
		}
	   
	    #videoImg{
	   position : relative ;
	   left : 0 ;
	   bottom : 0 ;
	   width : 100%  ;
	   margin-left : 0 ;
	   height : 100%;
	   background : url('../phone_images/phone_content2_phone.jpg') no-repeat ;
	   background-size : 100% auto ;
	  }
	    
	}
	
	
	
	
	#frontGroup{
	   position: absolute ;
	   top: 0 ; 
	   left : 0 ;
	   width: 100% ;
	   height: 100% ; 
	   z-index : 0 ;
	}
	
	
	.front{
	   position: relative ;
	   float : left ;
	   overflow-x :auto; 
	   top: 0 ; 
	   left : 0 ;
	   width: 100% ;
	   height: 100% ; 
	   -webkit-transition: all 1s ease 0;transition: all 1s ease 0 ; 
	  
	   
	}
	
	#frontLight{
	   position : absolute ;
	   top : 0 ; 
	   left : 0  ;
	   width : 100% ;
	   height : 100% ;
	   z-index : 1 ;
	   background: url('../images/content3_bg.png') no-repeat ;
	   background-size : 100% 100% ;
	}
	
	.topLayer{
	   position : absolute ;
	   top : 0 ; 
	   left : 0  ;
	   width : 100% ;
	   height : 100% ;
	   z-index : 2 ;
	   
	   background: url('../images/content3_bg.png') no-repeat ;
	   background-size : 1444px 1404px ;
	   background-position : center center ;
	   
	}
	
	#shine{
	    position: relative ;
		top: 40px ;
		margin : auto ;
		width : 123px ;
        height : 49px ;
        background: url('../images/content3_changebutton.png') no-repeat ;
		background-size: 100%  auto ;
		-webkit-animation:Topto 1.6s ease-out infinite;
            -moz-animation:Topto 1.6s ease-out infinite;
            -o-animation:Topto 1.6s ease-out infinite;
	}
	
	
	
	
	
	#front0{
	   
	   background-color : #2d5ecc ;	 
	   
	}
	
	
	
	
	
	
	.frontContainer{
	     position: relative ;
		 width : 250px ;
		 height : 476.9px ;
		 top : 40px ;
		 margin : auto ;
	}
	
	
	.shell{
	   position : absolute ;
	   width : 250px ;
	   left : 0% ;
	   height : 476.9px ;
	   margin: auto ;
	   top : 20px ;
       background : url('../images/content3_phone.png') no-repeat ;
	   background-size : 100% auto ;
	}
	
	.con{
	   position : absolute ;
	   width : 210.5px ;
	   height : 373.1px;
	   left : 20px ;
	   top : 58px ;
	   -webkit-transition: all 1s ease 0;transition: all 1s ease 0 ; 
	   -webkit-transition-delay : 0.2s ;
	}
	
	@media (min-width: 1200px){
	    .frontContainer{
	     position: relative ;
		 width : 247px ;
		 height : 471px ;
		 top : 36px ;
		 margin : auto ;
	   }
	
	  .shell{
	   position : absolute ;
	   width : 247px ;
	   left : 0% ;
	   height : 471px ;
	   margin: auto ;
	   top : 18px ;
       background : url('../images/content3_phone.png') no-repeat ;
	   background-size : 100% auto ;
	  }
	  .con{
	   position : absolute ;
	   width : 208px ;
	   height : 369px;
	   left : 20px ;
	   top : 55px ;
	   -webkit-transition: all 1s ease 0;transition: all 1s ease 0 ; 
	  }
	
	    #shine{
	    position: absolute ;
		top: 40% ;
		left : 40px ;
		margin : auto ;
		width : 180px ;
        height : 72px ;
        background: url('../images/content3_changebutton.png') no-repeat ;
		background-size: 100%  auto ;
		-webkit-animation:Topto 1.6s ease-out infinite;
            -moz-animation:Topto 1.6s ease-out infinite;
            -o-animation:Topto 1.6s ease-out infinite;
	  }
	}
	
	@media (min-width: 1600px){
	  .frontContainer{
	     position: relative ;
		 width : 411px ;
		 height : 784px ;
		 top : 40px ;
		 margin : auto ;
	}
	
	 .shell{
	   position : absolute ;
	   width : 411px ;
	   left : 0% ;
	   height : 784px ;
	   margin: auto ;
	   top : 18px ;
       background : url('../images/content3_phone.png') no-repeat ;
	   background-size : 100% auto ;
	 }
	  .con{
	   position : absolute ;
	   width : 346px ;
	   height : 615px;
	   left : 33px ;
	   top : 80px ;
	   -webkit-transition: all 1s ease 0;transition: all 1s ease 0 ; 
	  }
	  
	  
	 
	}
	
	
	
	
	
	
	#f1{
	   z-index  : 5 ;
	 opacity : 1 ;
       background : url('../images/content3_themes1.jpg') no-repeat   ;
	    background-size : 100% auto ;
	}
	#f2{
	   z-index  : 4 ;
	   opacity : 0 ;
       background : url('../images/content3_themes2.jpg') no-repeat   ;
	    background-size : 100% auto ;
	}
	#f3{
	   z-index  : 3 ;
	  opacity : 0 ;
       background : url('../images/content3_themes3.jpg') no-repeat   ;
	    background-size : 100% auto ;
	}
	#f4{
	   z-index  : 2 ;
	    opacity : 0 ;
       background : url('../images/content3_themes4.jpg') no-repeat   ;
	    background-size : 100% auto ;
	}
	#f5{
	     z-index  : 1 ;
	 opacity : 0 ;
       background : url('../images/content3_themes5.jpg') no-repeat   ;
	    background-size : 100% auto ;
	}
	
	.p3words{
	     position: relative ;
	     top : 30px ;
	  }
	
	#part3 h1{
	    position : relative ;
	    margin : auto ;
		top : 6% ;
		font-size : 48px ;
		text-align : center ;
		color : white ;
	}
	
	#part3 p{
	    position : relative ;
	    margin : auto ;
		top : 6% ;
		font-size : 24px ;
		text-align : center ;
		color : white ;
	}
	
	#shine p{
	    display : block ;
	    color : white ;
		font-size: 32px ;
		text-align : center ;
		-webkit-animation:Topto 1.6s ease-out infinite;
            -moz-animation:Topto 1.6s ease-out infinite;
            -o-animation:Topto 1.6s ease-out infinite;
		
	}
	
	@media (max-width: 600px){
	  
	
	  #part3 h1{
	    position : relative ;
	    margin : auto ;
		top : 6% ;
		font-size : 20px ;
		text-align : center ;
		color : white ;
	  }
	
	  #part3 p{
	    position : relative ;
	    margin : auto ;
		margin-top : 2% ;
		font-size : 16px ;
		text-align : center ;
		color : white ;
	  }
	  
	  #shine p{
	     font-size: 16px ;
	  }
	  
	}
	
	
	
	@-webkit-keyframes Topto
        {
            0%   { opacity: 0;}
            50%   { opacity: 1;}
            100% { opacity: 0;}
        }

        @-moz-keyframes Topto
        {
            0%   { opacity: 0;}
            50%   { opacity: 1;}
            100% { opacity: 0;}
        }
        @-o-keyframes Topto
        {
            0%   { opacity: 0;}
            50%   { opacity: 1;}
            100% { opacity: 0;}
        }
	
	#part4 h1{
	    position : relative ;
	    margin : auto ;
		top : 6% ;
		font-size : 48px ;
		text-align : center ;
		
	}
	
	#part4 p{
	    position : relative ;
	    margin : auto ;
		top : 8% ;
		font-size : 24px ;
		text-align : center ;
		
	}
	
	
	
	
	#emoji{
	   position : relative ;
	   width : 45% ;
	   height : 70% ;
	   top  : 15% ;
	   margin: auto ;
       background-color : white ;
	}
	
	#part5 h1{
	    position : relative ;
	    margin : auto ;
		top : 25% ;
		font-size : 48px ;
		text-align : center ;
		color : white ;
	}
	
	@media (max-width: 1100px) { 
	   

	#emoji{
	   position : relative ;
	   width : 66% ;
	   height : 70% ;
	   top  : 14% ;
	   margin: auto ;
       background : url('../phone_images/phone_emoji.png') no-repeat ;
	   background-size : 100% auto ;
	}
	
	
	 
	}
	
	
	
	@media (max-width: 600px) { 
	    #part4 h1{
	    position : relative ;
	    margin : auto ;
		top : 6% ;
		font-size : 20px ;
		text-align : center ;
		
	}
	
	#part4 p{
	    position : relative ;
	    margin : auto ;
		top : 8% ;
		font-size : 16px ;
		text-align : center ;
		
	}
	
	
	
	
	#emoji{
	   position : relative ;
	   width : 90% ;
	   height : 420px ;
	   top  : 10% ;
	   margin: auto ;
       background : url('../phone_images/phone_emoji.png') no-repeat ;
	   background-size : 100% auto ;
	}
	
	#part5 h1{
	    position : relative ;
	    margin : auto ;
		top : 20% ;
		font-size : 36px ;
		text-align : center ;
		color : white ;
	}
	 
	 
	}
	
	
	
	
	 .smallBox{
	   position : relative ;
	   margin : auto ;
	   top : 25% ;
	   width : 80% ;
	   height : 200px;
	}
	
	  #button1{
	    position : absolute ;
		left : 0 ;
		width : 45% ;
		height : 100%  ;
		background: url('../images/applestore_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	  #button2{
	    position : absolute ;
		right  : 0 ;
		
		width : 40%  ;
		height :100% ;
		background: url('../images/googleplay_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	
	
	@media (min-width: 600px) { 
	
	  .smallBox{
	   position : relative ;
	   margin : auto ;
	   top : 30% ;
	   width : 25% ;
	   height : 20% ;
	}
	
	  #button1{
	    position : absolute ;
		left : 0 ;
		width : 50% ;
		height : 100%  ;
		background: url('../images/applestore_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	  #button2{
	    position : absolute ;
		right  : 0 ;
		
		width : 45%  ;
		height :100% ;
		background: url('../images/googleplay_button.png') no-repeat ;
		background-size : 100% auto ;
	  }
	
	}
	
	#footer{
	    position : absolute ;
		bottom : 0 ;
		width : 100% ;
		height : 200px ;
		background-color : rgba(238,238,238,1) ;
		
	}
	
	.foot-wrap{
	   margin-top : 10px ;
	   
	}
	
	 .line{
	      
	      position : relative ;
		  top: 10px ;
		  width : 100% ;
		  height : 1px ;
		   border-top:1px solid rgb(0,0,0) ;
	 }
	 
	 .bottomLine{
	     top: -10px ;
	 }
	
	
	 .footer-nav1{
	    position : relative ;
		width : 100% ;
		height : 55px ;
		margin-top : 10px ;
		padding : 10px 0 15px 0 ;
		
		
		margin-bottom : 20px ;
	 }
	@media (min-width: 600px) {
	     .footer-nav1{
		     display : none ;
		 }
	}
	.menu{
	    position : relative ;
		float : left ;
		width : 70% ;
		height : 30px ;
		padding : 0 ;
		margin-top  : 0 ;
		margin-left : 0 ;
	}
	
	@media (max-width: 600px) { 
	
	.bottomLine{
	     display : none ;
	 }
	
	.menu-icon{
	    position : relative ;
		
		width : 100% ;
		height : 60px ;
		padding : 0 ;
		margin-top  : 0 ;
		margin-left : 0 ;
	}
	
	#part5 .wrapper{
	    background : url('../phone_images/phone_content5_bg.jpg') no-repeat  ;
	     background-size : 100% auto  ;
	    background-position : top top ;
	}
	
	}
	
	
	.sep{
	    position : relative ;
		float : left ;
		margin-top  : 0 ;
		list-style-type : none ;
		margin-right : 25px;
		margin-left : 0 ;
	}
	
	
	 .li-item-left{
	    position : relative ;
		float : left ;
		margin-top  : 0 ;
		list-style-type : none ;
		margin-right : 25px;
		margin-left : 0 ;
		color : black ;
		padding-right : 25px ;
		border-right:2px solid #bcbcbc;
		
	}
	
	.li-item-left a {
	   color : black ;
	 
	}
	.li-item-right{
	    position : relative ;
		float : right ;
		margin-top  : 0 ;
		list-style-type : none ;
		margin-right : 0px;
		margin-left : 25px ;
		
	}
	
	.footer-nav1 ul{
	    border-bottom:1px solid black;
	}
	
	.footer-nav1 .li-item-right{
	    position : relative ;
		float : left  ;
		margin-top  : 0 ;
		list-style-type : none ;
		margin-left  : 14% ;
		
		
	}
	
	.footer-nav1 .lastOne{
	    position : relative ;
	    float: right ;
		margin-left : 0  ;
		margin-right : 0  ;
	}
	
	.footer-nav1 .firstOne{
	    position : relative ;
	    float: left ;
		margin-left : 0  ;
		margin-right : 0  ;
	}
	
	#fb-icon{
	    background : url('../images/facebook_button.png') ;
		background-size : 100% 100% ;
		width : 50px ;
		height  : 50px ;
	}
	
	#tw-icon{
	    background : url('../images/twitter_button.png') ;
		background-size : 100% 100% ;
		width : 50px ;
		height  : 50px ;
	}
	#gp-icon{
	    background : url('../images/googleplus_button.png') ;
		background-size : 100% 100% ;
		width : 50px ;
		height  : 50px ;
	}
	#yt-icon{
	    background : url('../images/youtube_button.png') ;
		background-size : 100% 100% ;
		width : 50px ;
		height  : 50px ;
	}
	
	@media (min-width: 600px) { 
	
	#fb-icon{
	    background : url('../images/facebook_button.png') ;
		background-size : 100% 100% ;
		width : 30px ;
		height  : 30px ;
	}
	
	#tw-icon{
	    background : url('../images/twitter_button.png') ;
		background-size : 100% 100% ;
		width : 30px ;
		height  : 30px ;
	}
	#gp-icon{
	    background : url('../images/googleplus_button.png') ;
		background-size : 100% 100% ;
		width : 30px ;
		height  : 30px ;
	}
	#yt-icon{
	    background : url('../images/youtube_button.png') ;
		background-size : 100% 100% ;
		width : 30px ;
		height  : 30px ;
	}
	}
	
	.clear {
  clear: both;
  }