﻿html, body{     height:100%;     padding:0;     margin:0;}
img{position:absolute}
body{margin:0;width:100%;position:absolute;font-family:arial; overflow:hidden;resize:none; }

/*xpaker update 20150504*/
#background {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
 
 #progress_bar{left:10%; top:40%;  width:80%;height:11%;border:3px solid white;background: blue;overflow:hidden;-webkit-box-shadow:0px 0px 30px white;-moz-box-shadow:0px 0px 30px white;-o-box-shadow:0px 0px 30px white;-ms-box-shadow:0px 0px 30px white;box-shadow:0px 0px 30px white;}
#progress{margin-left:1%;margin-top:1%;width:98%;height:80%;background: red;}
#progNum{margin-left:40%; margin-top:2%; text-align:center;color:white;}
#begin_logo{z-index:50;left:35%; top:32%;width:25%;height:7%;position:absolute;  cursor:pointer;}
#first_logo{z-index:50;left:1%; top:2%;width:25%;height:7%;position:absolute;  cursor:pointer;}
#second_logo{z-index:50;left:1%; bottom:2%;width:25%;height:7%;position:absolute;  cursor:pointer;}
#third_logo{z-index:50;left:1%; top:2%;width:25%;height:7%;position:absolute;  cursor:pointer;}

#MG1{ width:13%; height:11%; z-index:100; left:69%; top:78%; cursor:pointer;}
#MG2{ width:10%;height:8%;z-index:100; left:85%; top:88%; cursor:pointer;}
#MG3{ width:13%;height:10.5%;z-index:100; left:5%; top:80%; cursor:pointer;}

#star1{ -webkit-animation:star_shine 1.1s ease infinite; -moz-animation:star_shine 1.1s ease infinite;-o-animation:star_shine 1.1s ease infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.1s ease infinite;}
#star2{ -webkit-animation:star_shine 1.2s ease-in infinite; -moz-animation:star_shine 1.2s ease-in infinite;-o-animation:star_shine 1.2s ease-in infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.2s ease-in infinite;}
#star3{ -webkit-animation:star_shine 1.3s ease-out infinite; -moz-animation:star_shine 1.3s ease-out infinite;-o-animation:star_shine 1.3s ease-out infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.3s ease-out infinite;}
#star4{ -webkit-animation:star_shine 1.4s linear infinite; -moz-animation:star_shine 1.4s linear infinite;-o-animation:star_shine 1.4s linear infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.4s linear infinite;}
#star5{ -webkit-animation:star_shine 1.5s ease-in infinite; -moz-animation:star_shine 1.5s ease infinite;-o-animation:star_shine 1.5s ease infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.5s ease infinite;}
#star6{ -webkit-animation:star_shine 1.6s ease-in-out infinite; -moz-animation:star_shine 1.6s ease-in-out infinite;-o-animation:star_shine 1.6s ease-in-out infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.6s ease-in-out infinite;}
#star7{ -webkit-animation:star_shine 1.4s linear infinite; -moz-animation:star_shine 1.4s linear infinite;-o-animation:star_shine 1.4s linear infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.4s linear infinite;}
#star8{ -webkit-animation:star_shine 1.5s ease-in infinite; -moz-animation:star_shine 1.5s ease infinite;-o-animation:star_shine 1.5s ease infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.5s ease infinite;}
#star9{ -webkit-animation:star_shine 1.6s ease-in-out infinite; -moz-animation:star_shine 1.6s ease-in-out infinite;-o-animation:star_shine 1.6s ease-in-out infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.6s ease-in-out infinite;}
@-webkit-keyframes star_shine
{
	0%{	-webkit-transform:scale(1) 	 rotate(0deg); }
	50%{-webkit-transform:scale(3)  rotate(45deg); }
	100%{-webkit-transform:scale(1) rotate(0deg); 	}
}
@-moz-keyframes star_shine
{
	0%{	-moz-transform:scale(1) 	 rotate(0deg); }
	50%{-moz-transform:scale(3)  rotate(45deg); }
	100%{-moz-transform:scale(1) rotate(0deg); 	}
}
@-o-keyframes star_shine
{
	0%{	-o-transform:scale(1) 	 rotate(0deg); }
	50%{-o-transform:scale(3)  rotate(45deg); }
	100%{-o-transform:scale(1) rotate(0deg); 	}
}
@-ms-keyframes star_shine
{
	0%{	-ms-transform:scale(1) 	 rotate(0deg); }
	50%{-ms-transform:scale(3)  rotate(45deg); }
	100%{-ms-transform:scale(1) rotate(0deg); 	}
}
@keyframes star_shine
{
	0%{	transform:scale(1) 	 rotate(0deg); }
	50%{transform:scale(3)  rotate(45deg); }
	100%{transform:scale(1) rotate(0deg); 	}
}
.scale:hover
{
-webkit-transform:scale(1.2) ;
-moz-transform:scale(1.2) ;
-o-transform:scale(1.2) ;
transform:scale(1.2) ;
}
@-webkit-keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}
@-moz-keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}@-o-keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}
@-ms-keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}
@keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}
.fedout
{
 -webkit-animation:fedout 1.0s ease-in-out;
  -moz-animation:fedout 1.0s ease-in-out;
   -o-animation:fedout 1.0s ease-in-out;
   animation:fedout 1.0s ease-in-out;
}


.scale:hover
{
	-webkit-transform:scale(1.1); 
	-moz-transform:scale(1.1); 
	-o-transform:scale(1.1); 
	-ms-transform:scale(1.1); 
	transform:scale(1.1); 
	 cursor:pointer;
}
@-webkit-keyframes moveleft
{
	0%{	-webkit-transform:translatex(0px); }
	50%{-webkit-transform:translatex(-5px); }
	100%{-webkit-transform:translatex(0px); 	}
}
@-moz-keyframes moveleft
{
	0%{	-moz-transform:translatex(0px); }
	50%{-moz-transform:translatex(-5px); }
	100%{-moz-transform:translatex(0px); 	}
}
@-o-keyframes moveleft
{
	0%{	-o-transform:translatex(0px); }
	50%{-o-transform:translatex(-5px); }
	100%{-o-transform:translatex(0px); 	}
}
@-ms-keyframes moveleft
{
	0%{	-ms-transform:translatex(0px); }
	50%{-ms-transform:translatex(-5px); }
	100%{-ms-transform:translatex(0px); 	}
}
@keyframes moveleft
{
	0%{transform:translatex(0px); }
	50%{transform:translatex(-5px); }
	100%{transform:translatex(0px); 	}
}

@-webkit-keyframes moveright
{
	0%{	-webkit-transform:translatex(0px); }
	50%{-webkit-transform:translatex(5px); }
	100%{-webkit-transform:translatex(0px); 	}
}
@-moz-keyframes moveright
{
	0%{	-moz-transform:translatex(0px); }
	50%{-moz-transform:translatex(5px); }
	100%{-moz-transform:translatex(0px); 	}
}
@-o-keyframes moveright
{
	0%{	-o-transform:translatex(0px); }
	50%{-o-transform:translatex(5px); }
	100%{-o-transform:translatex(0px); 	}
}
@-ms-keyframes moveright
{
	0%{	-ms-transform:translatex(0px); }
	50%{-ms-transform:translatex(5px); }
	100%{-ms-transform:translatex(0px); 	}
}
@keyframes moveright
{
	0%{	transform:translatex(0px); }
	50%{transform:translatex(5px); }
	100%{transform:translatex(0px); 	}
}

@-webkit-keyframes stopmove
{
	0%{	-webkit-transform:translatex(0px); }
	100%{-webkit-transform:translatex(0px); 	}
}
@-moz-keyframes stopmove
{
	0%{	-moz-transform:translatex(0px); }
	100%{-moz-transform:translatex(0px); 	}
}
@-o-keyframes stopmove
{
	0%{	-o-transform:translatex(0px); }
	100%{-o-transform:translatex(0px); 	}
}
@-ms-keyframes stopmove
{
	0%{	-ms-transform:translatex(0px); }
	100%{-ms-transform:translatex(0px); 	}
}
@keyframes stopmove
{
	0%{	transform:translatex(0px); }
	100%{transform:translatex(0px); 	}
} 
#clothes_page #left_arrow:hover
{ -webkit-animation:stopmove 1s ease infinite; -moz-animation:stopmove 1s ease infinite; -o-animation:stopmove 1s ease infinite; -ms-animation:stopmove 1s ease infinite;animation:stopmove 1s ease infinite;	}
#clothes_page #right_arrow:hover
{ -webkit-animation:stopmove 1s ease infinite; -moz-animation:stopmove 1s ease infinite; -o-animation:stopmove 1s ease infinite;-ms-animation:stopmove 1s ease infinite;animation:stopmove 1s ease infinite;	}

#clothes_page #left_arrow{left:1.4%; top:10%; width:10%;  cursor:pointer; -webkit-animation:moveleft 1s ease infinite; -moz-animation:moveleft 1s ease infinite; -o-animation:moveleft 1s ease infinite;animation:moveleft 1s ease infinite;}	
#clothes_page #right_arrow{left:27%; top:10%; width:10%; cursor:pointer;-webkit-animation:moveright 1s ease infinite; -moz-animation:moveright 1s ease infinite; -o-animation:moveright 1s ease infinite;animation:moveright 1s ease infinite;}


#star11{left:51%; top:32%; width: 2.5%; z-index:3; -webkit-animation:star_shine 1.5s ease infinite; -moz-animation:star_shine 1.5s ease infinite;-o-animation:star_shine 1.5s ease infinite;-ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.5s ease infinite;}
#star12{left:45%; top:26%; width: 3.5%; z-index:3; -webkit-animation:star_shine 1.1s ease-in infinite; -moz-animation:star_shine 1.4s ease infinite;-o-animation:star_shine 1.4s ease infinite; -ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.4s linear infinite;}
#star13{left:50%; top:14%; width: 2.5%;z-index:3; -webkit-animation:star_shine 1.2s ease-out infinite;  -moz-animation:star_shine 1.3s ease infinite;-o-animation:star_shine 1.3s ease infinite;-ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.3s ease-in infinite;}
#star14{left:52%; top:56%; width: 3.3%; z-index:3; -webkit-animation:star_shine 1.3s ease-in-out infinite; -moz-animation:star_shine 1.2s ease infinite;-o-animation:star_shine 1.2s ease infinite;-ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.2s ease-out infinite; }
#star15{left:42%; top:42%; width: 2.5%; z-index:3; -webkit-animation:star_shine 1.4s linear infinite; -moz-animation:star_shine 1.1s ease infinite;-o-animation:star_shine 1.1s ease infinite;-ms-animation:star_shine 1.5s ease infinite; animation:star_shine 1.1s ease-in-out infinite;}
#star16{left:47%; top:32%; width: 3.5%; z-index:3; -webkit-animation:star_shine 1.1s ease-in infinite; -moz-animation:star_shine 1.4s ease infinite;-o-animation:star_shine 1.4s ease infinite;-ms-animation:star_shine 1.5s ease infinite; animation:star_shine 1.4s linear infinite;}
#star17{left:52%; top:90%; width: 3.5%; z-index:3; -webkit-animation:star_shine 1.2s ease-out infinite;  -moz-animation:star_shine 1.3s ease infinite;-o-animation:star_shine 1.3s ease infinite;-ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.3s ease-in infinite;}
#star18{left:47%; top:85%; width: 2.5%;z-index:3; -webkit-animation:star_shine 1.3s ease-in-out infinite; -moz-animation:star_shine 1.2s ease infinite;-o-animation:star_shine 1.2s ease infinite;-ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.2s ease-out infinite; }
#star19{left:46%; top:82%; width: 2.5%; z-index:3; -webkit-animation:star_shine 1.4s linear infinite; -moz-animation:star_shine 1.1s ease infinite;-o-animation:star_shine 1.1s ease infinite; -ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.1s ease-in-out infinite;}


@-webkit-keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}
@-moz-keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}@-o-keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}
@-ms-keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}
@keyframes fedout
{
	0%{	opacity:0; }
	50%{opacity:0.5;}
	100%{opacity:1; 	}
}
.show
{
 -webkit-animation:fedout 0.5s ease-in-out;
  -moz-animation:fedout 0.5s ease-in-out;
   -o-animation:fedout 0.5s ease-in-out;
 -ms-animation:fedout 0.5s ease-in-out;
   animation:fedout 0.5s ease-in-out;
}
