.jui_demo_logo,.jui_demo_logo_a1,.jui_demo_logo_a2{background: url(../images/demo/jui_logo.png) no-repeat;background-size: 100%;width:7.4375rem;height:1.6875rem;left:50%;bottom:42%;position:fixed;-webkit-transform:translate3d(-50%,0,0);z-index:1;}

.jui_demo_logo{-webkit-animation: jui_demo_logo_in 1s .4s forwards;bottom:42%;opacity:0;visibility: hidden}
.jui_demo_logo_a1{-webkit-animation: jui_demo_logo_a1 .4s forwards;bottom:42%;opacity:1;visibility: visible}
.jui_demo_logo_a2{-webkit-animation: jui_demo_logo_a2 .4s forwards;bottom:90%;opacity:1;visibility: visible}

@-webkit-keyframes jui_demo_logo_a1{0%{bottom:48%;}100%{bottom:90%}}
@-webkit-keyframes jui_demo_logo_a2{0%{bottom:90%;}100%{bottom:42%}}

@-webkit-keyframes jui_demo_logo_in{0%{-webkit-transform:translate3d(-50%,100%,0);opacity:0;visibility: hidden}100%{-webkit-transform:translate3d(-50%,0,0);opacity:1;visibility: visible}}









.jui_demo_intro,.jui_demo_intro_a1,.jui_demo_intro_a2{position: fixed;bottom:31%;left:50%;-webkit-transition:all .2s;display:block;font-size:1.1875rem;text-align:center;text-decoration:none;color:#fff;line-height:2.5;border-radius:.75rem;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:hidden;border:0;background:#007aff;z-index:1;width:9rem}

.jui_demo_intro{-webkit-animation: jui_demo_intro_in 1s .6s forwards;-webkit-transform:translate3d(-50%,0,0);opacity:0;visibility: hidden}
.jui_demo_intro_a1{-webkit-animation: jui_demo_intro_a1 .4s forwards; -webkit-transform:translate3d(-50%,0,0);opacity:1;visibility: visible}
.jui_demo_intro_a2{-webkit-animation: jui_demo_intro_a2 .4s forwards; -webkit-transform:translate3d(-50%,400%,0);opacity:0;visibility: hidden}


@-webkit-keyframes jui_demo_intro_a1{0%{opacity:1;visibility:visible;-webkit-transform:translate3d(-50%,0,0)}100%{opacity:0;visibility: hidden;-webkit-transform:translate3d(-50%,400%,0)}}
@-webkit-keyframes jui_demo_intro_a2{0%{opacity:0;visibility: hidden;-webkit-transform:translate3d(-50%,400%,0)}100%{opacity:1;visibility: visible;-webkit-transform:translate3d(-50%,0,0)}}
@-webkit-keyframes jui_demo_intro_in{0%{-webkit-transform:translate3d(-50%,100%,0);opacity:0;visibility: hidden}100%{-webkit-transform:translate3d(-50%,0,0);opacity:1;visibility: visible}}







.jui_demo_downloads,.jui_demo_downloads_a1,.jui_demo_downloads_a2{position: fixed;bottom:18%;left:0;right:0;-webkit-transition:all .2s;overflow:hidden;z-index:1;}
.jui_demo_downloads a,.jui_demo_downloads_a1 a,.jui_demo_downloads_a2 a{transition:all .2s;display:block;font-size:.85rem;text-align:center;text-decoration:none;color:#555;line-height:2.5;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.jui_demo_downloads a:hover,.jui_demo_downloads_a1 a:hover,.jui_demo_downloads_a2 a:hover{color:#007aff}

.jui_demo_downloads{-webkit-animation: jui_demo_downloads_in 1s .6s forwards;-webkit-transform:translate3d(0,0,0);opacity:1;visibility: hidden}
.jui_demo_downloads_a1{-webkit-animation: jui_demo_downloads_a1 .4s forwards; -webkit-transform:translate3d(0,0,0);opacity:1;visibility: visible;}
.jui_demo_downloads_a2{-webkit-animation: jui_demo_downloads_a2 .4s forwards; -webkit-transform:translate3d(-50%,400%,0);opacity:0;visibility: hidden;}


@-webkit-keyframes jui_demo_downloads_a1{0%{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0)}100%{opacity:0;visibility: hidden;-webkit-transform:translate3d(0,400%,0)}}
@-webkit-keyframes jui_demo_downloads_a2{0%{opacity:0;visibility: hidden;-webkit-transform:translate3d(0,400%,0)}100%{opacity:1;visibility: visible;-webkit-transform:translate3d(0,0,0)}}
@-webkit-keyframes jui_demo_downloads_in{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;visibility: hidden}100%{-webkit-transform:translate3d(0,0,0);opacity:1;visibility: visible}}









.jui_demo_footer,.jui_demo_footer_a1,.jui_demo_footer_a2{position: fixed;bottom:5%;left:50%;width:8.90625rem;height:1.75rem;background: url(../images/demo/jui_footer.png) no-repeat;background-size: 100%;z-index:1;}

.jui_demo_footer{-webkit-animation: jui_demo_footer_in 1s 1.2s forwards;-webkit-transform:translate3d(-50%,0,0);opacity:0;visibility: hidden}
.jui_demo_footer_a1{-webkit-animation: jui_demo_footer_a1 .4s forwards; -webkit-transform:translate3d(-50%,0,0);opacity:1;visibility: visible}
.jui_demo_footer_a2{-webkit-animation: jui_demo_footer_a2 .4s forwards;-webkit-transform:translate3d(-50%,-100%,0);opacity:0;visibility: hidden}

@-webkit-keyframes jui_demo_footer_a1{0%{opacity:1;visibility: visible;-webkit-transform:translate3d(-50%,0,0)}100%{opacity:0;visibility: hidden;-webkit-transform:translate3d(-50%,-100%,0)}}
@-webkit-keyframes jui_demo_footer_a2{0%{opacity:0;visibility: hidden;-webkit-transform:translate3d(-50%,-100%,0)}100%{opacity:1;visibility: visible;-webkit-transform:translate3d(-50%,0,0)}}
@-webkit-keyframes jui_demo_footer_in{0%{-webkit-transform:translate3d(-50%,-100%,0);opacity:0;visibility: hidden}100%{-webkit-transform:translate3d(-50%,0,0);opacity:1;visibility:visible}}








.jui_demo_back,.jui_demo_back_a1,.jui_demo_back_a2{width:2rem;height:2rem;background: url(../images/demo/jui_back.png) no-repeat center;background-size:60%;bottom:90%;left:8%;position: fixed;z-index:2;}


.jui_demo_back{-webkit-transform:translate3d(0,0,0);opacity:0;visibility: hidden}
.jui_demo_back_a1{-webkit-animation: jui_demo_back_a1 .4s forwards; opacity:0;visibility: hidden;-webkit-transform:translate3d(200%,0,0);}
.jui_demo_back_a2{-webkit-animation: jui_demo_back_a2 .4s forwards; opacity:1;visibility: visible;-webkit-transform:translate3d(0,0,0);}

@-webkit-keyframes jui_demo_back_a1{0%{opacity:0;visibility: hidden;-webkit-transform:translate3d(200%,0,0)}100%{opacity:1;visibility: visible;-webkit-transform:translate3d(0,0,0)}}
@-webkit-keyframes jui_demo_back_a2{0%{opacity:1;visibility: visible;-webkit-transform:translate3d(0,0,0)}100%{opacity:0;visibility: hidden;-webkit-transform:translate3d(-200%,0,0)}}










.jui_demo_navigition,.jui_demo_navigition_a1,.jui_demo_navigition_a2,.jui_demo_navigition_a3,.jui_demo_navigition_a4{position:fixed;top:16%;bottom:0;left:0;right:0;text-align:center;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:auto;padding:3rem 0;z-index:3;}

.jui_demo_navigition{opacity:0;display:none;-webkit-transform:translate3d(100%,0,0);z-index:1;}
.jui_demo_navigition_a1{-webkit-animation:jui_demo_navigition_a1 .4s forwards;opacity: 0;visibility: hidden; -webkit-transform:translate3d(100%,0,0);}
.jui_demo_navigition_a2{-webkit-animation:jui_demo_navigition_a2 .4s forwards;opacity: 1;visibility: visible;-webkit-transform:translate3d(0,0,0);}
.jui_demo_navigition_a3{-webkit-animation:jui_demo_navigition_a3 .4s forwards;opacity: 1;visibility: visible;-webkit-transform:translate3d(0,0,0);}
.jui_demo_navigition_a4{-webkit-animation:jui_demo_navigition_a4 .4s forwards;opacity: 0;visibility: hidden;-webkit-transform:translate3d(100%,0,0);}

.jui_demo_title{font-size:1.25rem;line-height:1.5;color:#007aff}
.jui_demo_sub{font-size:1rem;margin:0 auto 3rem auto;width:60%;display:-webkit-box;display:-webkit-flex;display:flex;justify-content: flex-start;flex-wrap:wrap;text-align:center}
.jui_demo_sub a{-webkit-transition:all .2s;display:block;width:33.333%;line-height:2.25;border-radius:2.25rem;}
.jui_demo_sub a:active{display:block;width:33.333%;line-height:2.25;border-radius:2.25rem;background:#F3F3F3;color:#007aff}

@-webkit-keyframes jui_demo_navigition_a1{0%{opacity: 0;visibility: hidden;-webkit-transform:translate3d(100%,0,0)}100%{opacity: 1;visibility: visible;-webkit-transform:translate3d(0,0,0)}}
@-webkit-keyframes jui_demo_navigition_a2{0%{opacity: 1;visibility: visible;-webkit-transform:translate3d(0,0,0)}100%{opacity: 0;visibility: hidden;-webkit-transform:translate3d(-100%,0,0)}}
@-webkit-keyframes jui_demo_navigition_a3{0%{opacity: 1;visibility: visible;-webkit-transform:translate3d(0,0,0)}100%{opacity: 0;visibility: hidden;-webkit-transform:translate3d(100%,0,0)}}
@-webkit-keyframes jui_demo_navigition_a4{0%{opacity: 0;visibility: hidden;-webkit-transform:translate3d(100%,0,0)}100%{opacity: 1;visibility: visible;-webkit-transform:translate3d(0,0,0)}}








.jui_demo_page,.jui_demo_page_a1,.jui_demo_page_a2{position: fixed;top:0;left:0;right:0;bottom:0;background:#fafafa;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:auto;z-index:5;}

.jui_demo_page{-webkit-transform:translate(100%,0);}
.jui_demo_page_a1{-webkit-animation: jui_demo_page_a1 .4s forwards; -webkit-transform:translate(100%,0);}
.jui_demo_page_a2{-webkit-animation: jui_demo_page_a2 .4s forwards; -webkit-transform:translate(0,0);}

@-webkit-keyframes jui_demo_page_a1{0%{-webkit-transform:translate(100%,0)}100%{-webkit-transform:translate(0,0)}}
@-webkit-keyframes jui_demo_page_a2{0%{-webkit-transform:translate(0,0)}100%{-webkit-transform:translate(100%,0)}}










.jui_demo_close,.jui_demo_close_a1,.jui_demo_close_a2{background: url(../images/demo/jui_close.png) no-repeat;background-size:100%;display:block;width:4rem;height:4rem; position:fixed;bottom:0;left:50%;z-index:6}

.jui_demo_close{-webkit-transform:translate3d(-50%,100%,0)}
.jui_demo_close_a1{-webkit-animation:jui_demo_close_a1 .4s .2s forwards;-webkit-transform:translate3d(-50%,100%,0)}
.jui_demo_close_a2{-webkit-animation:jui_demo_close_a2 .4s .1s forwards;-webkit-transform:translate3d(-50%,0,0)}

@-webkit-keyframes jui_demo_close_a1{0%{-webkit-transform:translate3d(-50%,100%,0)}100%{-webkit-transform:translate3d(-50%,0,0)}}
@-webkit-keyframes jui_demo_close_a2{0%{-webkit-transform:translate3d(-50%,0,0)}100%{-webkit-transform:translate3d(-50%,100%,0)}}