/* Background */
.m-mi .sample{background-image:url(../img/help/mi_bg.png); background-size:301px auto; background-repeat: no-repeat;}
.m-mi .sample .logo, .m-mi .sample .hand, .m-mi .sample .lock{background-image:url(../img/help/mi_sprite.png); background-size:70px auto; background-repeat: no-repeat;}

@media screen and (-webkit-min-device-pixel-ratio:1.2){
.m-mi .sample .logo, .m-mi .sample .hand, .m-mi .sample .lock{background-image:url(../img/help/mi_sprite_2x.png);}

}
/* Layout */
html,body{font-family:Arial, Helvetica, sans-serif;}
body{background:#f1f2f3; color:#333;}
h1, h2,h3{font-weight:normal;}
.m-mi{padding:0 13px;}
.m-mi h1{padding:25px 0 10px; border-bottom:1px solid #ddd; font-size:18px;}
.m-mi h2{margin:1.2em 0  -4px; font-size:16px; color: #f44d4d; }
.m-mi p{margin:0.8em 0; font-size:15px; line-height:1.3;}
.m-mi .sample{position:relative; width:301px; height:287px; margin:-30px auto 0;}
.m-mi .sample .logo{position:absolute;  width:48px; height:48px; background-position:0 -84px;
	-webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d;
	-webkit-transform:translate3d(27px, 99px, 0); -moz-transform:translate3d(27px, 99px, 0);
	-webkit-animation:logoSlide 6s infinite; -moz-animation:logoSlide 6s infinite;
}
@-webkit-keyframes logoSlide{
	0%  {-webkit-transform:translate3d(27px, 99px, 0); -moz-transform:translate3d(27px, 99px, 0);}
	24% {-webkit-transform:translate3d(27px, 160px, 0); -moz-transform:translate3d(27px, 160px, 0);}
	26% {-webkit-transform:translate3d(27px, 160px, 0); -moz-transform:translate3d(27px, 160px, 0);}
	40% {-webkit-transform:translate3d(27px, 99px, 0); -moz-transform:translate3d(27px, 99px, 0);}
	
}
.m-mi .sample .lock{display:block; position:absolute; width:21px; height:21px; opacity:0; background-position:-49px -84px; 
	-webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d;
	-webkit-transform:translate3d(36px, -4px, 0); -moz-transform:translate3d(36px, -4px, 0); 
	-webkit-animation:lock 6s infinite; -moz-animation:logoSlide 6s infinite;
}
@-webkit-keyframes lock{
	0%  {opacity:0;}
	30% {opacity:0;}
	40%{opacity:1;}
	85%{opacity:1;}
	86%{opacity:0;}
}
.m-mi .sample .hand{position:absolute; width:69px; height:75px; 
	-webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d;
	-webkit-transform:translate3d(48px, 125px, 0); -moz-transform:translate3d(48px, 120px, 0);
	-webkit-animation:handSlide 6s infinite; -moz-animation:logoSlide 6s infinite;
}
@-webkit-keyframes handSlide{
	0%  {opacity:1;-webkit-transform:translate3d(48px, 125px, 0); -moz-transform:translate3d(48px, 125px, 0);}
	24% {opacity:1;-webkit-transform:translate3d(48px, 186px, 0); -moz-transform:translate3d(48px, 186px, 0);}
	26% {opacity:1;-webkit-transform:translate3d(48px, 186px, 0); -moz-transform:translate3d(48px, 186px, 0);}
	40% {opacity:0;-webkit-transform:translate3d(48px, 305px, 0); -moz-transform:translate3d(48px, 305px, 0);}
	95%{opacity:0;}
}