/*
    Xpull - pull to refresh jQuery plugin for iOS and Android
*/
.xpull {
    display: none;
    height: 120px;
    margin: 0 auto;
    padding-top:40px;
    position: relative;
    text-align: center;
    background-color:#f4f4f4;
    transform: translate3d(0, -80px, 0) rotate(0deg);
}

.xpull_pulled .xpull__arrow {
    top: 5px;
    
}

.xpull__start-msg-text {
    margin-bottom: 5px;
}

.xpull__arrow {
    position: relative;
    width: 35px;
    height: 35px;
    margin:0 auto;
    background:url(/images/icon/refresh.png) no-repeat 50% 50% / 100% 100%;
    transition: transform 10000ms linear;
    animation: rotation 1s infinite linear;
}
.xpull__start-msg{display:inline-block;width:70px;height:70px;border-radius:100%;-webkit-transition:background-color .5s;transition:background-color .5s;}
.xpull__start-msg span{display:block;margin-top:5px;font-size:12px;opacity:0;}
.xpull_pulled .xpull__start-msg{background-color:#e0e0e0;}
.xpull_pulled .xpull__start-msg span{opacity:1;}

.xpull__spinner {
    display: none;
    padding-top: 10px;
}

.xpull__spinner-circle {
    height: 25px;
    width: 25px;
    margin: 0 auto;
    position: relative;
    animation: rotation 0.6s infinite linear;
    border: 4px solid rgba(202, 202, 202, 0.15);
    border-top: 4px solid rgba(202, 202, 202, 0.9);
    border-radius: 100%;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}