@charset "utf-8";
*,
*:before,
*:after {
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-user-select: -moz-none;
    -webkit-touch-callout: none;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -ms-touch-action: pan-y;
}

body,
html {
    -ms-overflow-style: none !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    overflow-x: hidden;
    -webkit-text-size-adjust: none;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #000000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
}

input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: -moz-text;
    -moz-user-select: text;
}

img {
    border: none;
}



.view {
    /*display: none;*/
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

    .view header {
        position: relative;
        overflow: hidden;
        display: block;
        z-index: 250;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 60px;
        left: 0;
        right: 0;
    }

        .view header h1 {
            position: absolute;
            width: 45%;
            z-index: 1;
            height: 60px;
            font-size: 19px;
            left: 27.5%;
            color: #ffffff;
            padding: 20px 0;
            text-shadow: rgba(0, 0, 0, 0.8) 0 -1px 0;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
              font-weight: initial;
        }

    .view.active {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -ms-flexbox;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-box-orient: vertical;
        box-orient: vertical;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }

.pages {
    z-index: 180;
    position: relative;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #000000;
    overflow: hidden;
}

.panel {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

    .panel.active {
        display: block;
    }

    .panel.x-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
    }

    .panel.no-scroll {
        overflow: hidden;
        touch-action: none;
    }

nav {
    height: 100%;
    width: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #ccc;
    display: none;
    box-shadow: 0 0 8px 0 black;
    z-index: 30;
}

    nav.right {
        height: 100%;
        width: 200px;
        position: absolute;
        top: 0px;
        left: auto;
        right: 0px;
    }

    nav.active {
        display: block;
    }

.splashscreen {
    background: #1d1d1c !important;
    padding-left: 40px;
    padding-top: 30px !important;
    min-height: 100%;
}

h2 {
    display: block;
    height: 34px;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    padding: 6px 0;
    margin-bottom: 8px;
}

.afui_mask {
    position: absolute;
    top: 45%;
    z-index: 999999;
}

.afui_panel_mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.1);
    display: none;
}
/* Chevrons */
@font-face {
    font-family: 'chevron';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQAAA0AAAAABZgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAcZ/T02kdERUYAAAFMAAAAHwAAACAAMgAGT1MvMgAAAWwAAABHAAAAVj7i2r5jbWFwAAABtAAAAEMAAAFS8BX0J2dhc3AAAAH4AAAACAAAAAj//wADZ2x5ZgAAAgAAAABsAAAAbMHrMoZoZWFkAAACbAAAADAAAAA2/JaSB2hoZWEAAAKcAAAAHgAAACQDav/GaG10eAAAArwAAAATAAAAFAN1AB1sb2NhAAAC0AAAAAwAAAAMAA4ANm1heHAAAALcAAAAHQAAACAASAAbbmFtZQAAAvwAAADdAAABhigr581wb3N0AAAD3AAAACIAAAA8nFVDO3icY2BgYGQAgjO2i86D6LO3V7LCaABOtwcoAAB4nGNgZGBg4ANiCQYQYGJgZGBmYAGSLGAeAwAEkAA5AHicY2BkVGCcwMDKwMGozGjJwMBgB6WvM4gxFDMwMDGwMjPAgQCCyRCQ5prC4PCB4UMIY8P/AwwajA0MDg0MDIwgOQBg6QqyAHicY2BgYGaAYBkGRgYQ8AHyGMF8FgYDIM0BhEwgiQ8MH0L+/0dmCTDzb4DqAgNGNgY4lxGkh4kBFTAyDHsAAFhbChsAAAAAAf//AAIAAQAA/8ABwAGAAAIAABEBIQHA/kABgP5AAAAAAAEAHf/tARMBcwAXAAAlFA8BBiIvASY1ND8BJyY1ND8BNjIfARYBEwmkCRoJFAkJenoJCRQIHAikCbANCqMJCRMKDQ0JenkKDQ0JEwoKowl4nGNgZGBgAOLcX7xy8fw2Xxm4GQ8ARRjO3l7JiqD/H2A8wNgA5HIwMIFEAUPwC7d4nGNgZGBgbPh/gEGD8QADwz8HIAkUQQGsAIQZBTAAAHicYzzAAAFTIRSjAoMsABVQAZUAAAAAAAAAAAAADgA2eJxjYGRgYGBlkGAA0QwMTEDMCGY7gPkMAAUvAGQAAAB4nHWOTWoCQRBG3+hoCIbgKmTZkE02M3RPwIUHmAO4cC/SjII40P7gSbLKEbL0GB4gR8gx/JzUJgsbin68rqqvgSc+ybidjAfGxj3xu3GfN07Gufy38YARF+Oh/K86s/xR5rmbunFP/Grcp8Yb5/JfxgNeOBsP5X9YsiJyJNGyheUqHlMrmMk2HNiw0Buz2Bw2C0Hd9e27O6kj4qgoleaYqv7v+3NBrwUTVSUKfGhNu93XbWqiq0rvps5yRcEXk6LyQU33/jaXTexYW0bo8pnHtFtrRyj93dkrAWI51wAAAHicY2BiwA9YgZiRgYmRiZGZvTQv083AwABCm5oAACfXBG0AAA==) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWf09NoAAAV8AAAAHEdERUYAMgAGAAAFXAAAACBPUy8yPuLavgAAAVgAAABWY21hcPAV9CcAAAHEAAABUmdhc3D//wADAAAFVAAAAAhnbHlmwesyhgAAAyQAAABsaGVhZPyWkgcAAADcAAAANmhoZWEDav/GAAABFAAAACRobXR4A3UAHQAAAbAAAAAUbG9jYQAOADYAAAMYAAAADG1heHAASAAbAAABOAAAACBuYW1lKCvnzQAAA5AAAAGGcG9zdJxVQzsAAAUYAAAAPAABAAAAAQAAbfoNHl8PPPUACwHAAAAAAM3bqQUAAAAAzdupBQAA/8ABwAGAAAAACAACAAAAAAAAAAEAAAGA/8AAKAHAAAD+QAHAAAEAAAAAAAAAAAAAAAAAAAAFAAEAAAAFABgAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQEgAZAABQAIASMBOQAAAD4BIwE5AAAA1wAWAHMAAAIABQMAAAAAAAAAAAAAEAAAAAAAAAAAAAAAUGZFZABA8ADwVAGA/8AAKAGAAECAAAABAAAAAAAAAcAAAAAAAAAAlQAAAAAAAAEgAB0AAAADAAAAAwAAABwAAQAAAAAATAADAAEAAAAcAAQAMAAAAAgACAACAAAAAPAA8FT//wAAAADwAPBU//8AABADD7AAAQAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgA2AAEAAP/AAcABgAACAAARASEBwP5AAYD+QAAAAAABAB3/7QETAXMAFwAAJRQPAQYiLwEmNTQ/AScmNTQ/ATYyHwEWARMJpAkaCRQJCXp6CQkUCBwIpAmwDQqjCQkTCg0NCXp5Cg0NCRMKCqMJAAAADACWAAEAAAAAAAEABwAQAAEAAAAAAAIABwAoAAEAAAAAAAMAIwB4AAEAAAAAAAQABwCsAAEAAAAAAAUACwDMAAEAAAAAAAYABwDoAAMAAQQJAAEADgAAAAMAAQQJAAIADgAYAAMAAQQJAAMARgAwAAMAAQQJAAQADgCcAAMAAQQJAAUAFgC0AAMAAQQJAAYADgDYAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAAYwBoAGUAdgByAG8AbgAgADoAIAAxADAALQA2AC0AMgAwADEAMwAARm9udEZvcmdlIDIuMCA6IGNoZXZyb24gOiAxMC02LTIwMTMAAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAGMAaABlAHYAcgBvAG4AAGNoZXZyb24AAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIBAwd1bmlGMDAwB3VuaUYwNTQAAAAB//8AAgABAAAADgAAABgAAAAAAAIAAQADAAQAAQAEAAAAAgAAAAAAAQAAAADMPaLPAAAAAM3bqQUAAAAAzdupBQ==) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.chevron {
    font-family: 'chevron';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

    .chevron:after {
        content: "\f054";
    }

    .chevron.left {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

.card {
    padding: 1.5rem;
    box-shadow: 0 1px 4px #aaa;
    background: inherit;
    color: inherit;
    margin: 0 1rem 1rem;
    border-radius: 3px;
    -webkit-user-select: none;
    position: relative;
}

    .card h1 {
        font-size: 2rem;
        font-weight: 200;
    }

        .card h1.info:after {
            position: absolute;
            right: 1.5rem;
            top: 1.5rem;
            content: 'i';
            color: #ccc;
            border: thin solid #ccc;
            font-size: 10px;
            border-radius: 14px;
            width: 14px;
            height: 14px;
            text-align: center;
        }

    .card h2 {
        font-size: .9rem;
        line-height: 2.5;
        color: #ccc;
        font-weight: 400;
    }

    .card p {
        margin: 0px;
        padding: 10px;
    }

#afui_mask {
    position: absolute;
    top: 45%;
    z-index: 999999;
    border-radius: 30px;
}

@media print {
    body {
        overflow: visible;
    }

    .panel {
        overflow-x: visible !important;
        overflow-y: visible !important;
        overflow: visible !important;
    }
}

.panel.active,
.panel.animation-active {
    display: block !important;
    z-index: 100;
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important;
}

.animation-active {
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important;
}

.panel.animation-active {
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}

.fast {
    -webkit-transition-duration: 100ms !important;
    transition-duration: 100ms !important;
}

.none-in,
.none-out {
    -webkit-animation: noTransition 1ms forwards;
    animation: noTransition 1ms forwards;
}

.blank-in,
.blank-out,
.blank {
    -webkit-animation: noTransition 300ms forwards;
    animation: noTransition 300ms forwards;
}

@-webkit-keyframes noTransition {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.99;
    }
}

@keyframes noTransition {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.99;
    }
}

.slide-in {
    -webkit-animation: slide-inAnimation 300ms forwards;
    animation: slide-inAnimation 300ms forwards;
}

@-webkit-keyframes slide-inAnimation {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-inAnimation {
    0% {
        transform: translate3d(100%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.slide-in.animation-reverse {
    -webkit-animation: slide-inAnimationReverse 450ms forwards;
    animation: slide-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes slide-inAnimationReverse {
    100% {
        -webkit-transform: translate3d(100%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-inAnimationReverse {
    100% {
        transform: translate3d(100%, 0, 0);
    }

    0% {
        transform: translate3d(0, 0, 0);
    }
}

.slide-out {
    -webkit-animation: slide-outAnimation 300ms forwards;
    animation: slide-outAnimation 300ms forwards;
}

@-webkit-keyframes slide-outAnimation {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-200px, 0, 0);
    }
}

@keyframes slide-outAnimation {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-200px, 0, 0);
    }
}

.slide-out.animation-reverse {
    -webkit-animation: slide-outAnimationReverse 450ms forwards;
    animation: slide-outAnimationReverse 450ms forwards;
}

@-webkit-keyframes slide-outAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(-200px, 0, 0);
    }
}

@keyframes slide-outAnimationReverse {
    100% {
        transform: translate3d(0%, 0, 0);
    }

    0% {
        transform: translate3d(-200px, 0, 0);
    }
}

.slide-full-in {
    -webkit-animation: slide-full-inAnimation 300ms forwards;
    animation: slide-full-inAnimation 300ms forwards;
}

@-webkit-keyframes slide-full-inAnimation {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-full-inAnimation {
    0% {
        transform: translate3d(100%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.slide-full-in.animation-reverse {
    -webkit-animation: slide-full-inAnimationReverse 450ms forwards;
    animation: slide-full-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes slide-full-inAnimationReverse {
    100% {
        -webkit-transform: translate3d(100%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-full-inAnimationReverse {
    100% {
        transform: translate3d(100%, 0, 0);
    }

    0% {
        transform: translate3d(0, 0, 0);
    }
}

.slide-full-out {
    -webkit-animation: slide-full-outAnimation 300ms forwards;
    animation: slide-full-outAnimation 300ms forwards;
}

@-webkit-keyframes slide-full-outAnimation {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slide-full-outAnimation {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.slide-full-out.animation-reverse {
    -webkit-animation: slide-full-outAnimationReverse 450ms forwards;
    animation: slide-full-outAnimationReverse 450ms forwards;
}

@-webkit-keyframes slide-full-outAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
    }
}

@keyframes slide-full-outAnimationReverse {
    100% {
        transform: translate3d(0%, 0, 0);
    }

    0% {
        transform: translate3d(-100%, 0, 0);
    }
}

.pop-in {
    -webkit-animation: pop-inAnimation 300ms forwards;
    animation: pop-inAnimation 300ms forwards;
}

@-webkit-keyframes pop-inAnimation {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes pop-inAnimation {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pop-in.animation-reverse {
    -webkit-animation: pop-inAnimationReverse 450ms forwards;
    animation: pop-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes pop-inAnimationReverse {
    100% {
        opacity: 0;
        -webkit-transform: scale(0.5);
    }

    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes pop-inAnimationReverse {
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    0% {
        opacity: 1;
        transform: scale(1);
    }
}

.pop-out {
    -webkit-animation: noTransition 300ms forwards;
    animation: noTransition 300ms forwards;
}

.fade-in {
    -webkit-animation: fade-inAnimation 300ms forwards;
    animation: fade-inAnimation 300ms forwards;
}

@-webkit-keyframes fade-inAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-inAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-in.animation-reverse {
    -webkit-animation: fade-inAnimationReverse 450ms forwards;
    animation: fade-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes fade-inAnimationReverse {
    100% {
        opacity: 0;
    }

    0% {
        opacity: 1;
    }
}

@keyframes fade-inAnimationReverse {
    100% {
        opacity: 0;
    }

    0% {
        opacity: 1;
    }
}

.fade-out {
    -webkit-animation: noTransition 300ms forwards;
    animation: noTransition 300ms forwards;
}

.up-in {
    -webkit-animation: up-inAnimation 300ms forwards;
    animation: up-inAnimation 300ms forwards;
}

@-webkit-keyframes up-inAnimation {
    0% {
        -webkit-transform: translate3d(0%, 100%, 0);
    }

    100% {
        -webkit-transform: translate3d(0%, 0%, 0);
    }
}

@keyframes up-inAnimation {
    0% {
        transform: translate3d(0%, 100%, 0);
    }

    100% {
        transform: translate3d(0%, 0%, 0);
    }
}

.up-in.animation-reverse {
    -webkit-animation: up-inAnimationReverse 450ms forwards;
    animation: up-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes up-inAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 100%, 0);
    }

    0% {
        -webkit-transform: translate3d(0%, 0%, 0);
    }
}

@keyframes up-inAnimationReverse {
    100% {
        transform: translate3d(0%, 100%, 0);
    }

    0% {
        transform: translate3d(0%, 0%, 0);
    }
}

.up-out {
    -webkit-animation: up-outAnimation 300ms forwards;
    animation: up-outAnimation 300ms forwards;
}

@-webkit-keyframes up-outAnimation {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0%, -200px, 0);
    }
}

@keyframes up-outAnimation {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(0%, -200px, 0);
    }
}

.up-out.animation-reverse {
    -webkit-animation: up-outAnimationReverse 450ms forwards;
    animation: up-outAnimationReverse 450ms forwards;
}

@-webkit-keyframes up-outAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(0%, -200px, 0);
    }
}

@keyframes up-outAnimationReverse {
    100% {
        transform: translate3d(0%, 0, 0);
    }

    0% {
        transform: translate3d(0%, -200px, 0);
    }
}

.down-in {
    -webkit-animation: down-inAnimation 300ms forwards;
    animation: down-inAnimation 300ms forwards;
}

@-webkit-keyframes down-inAnimation {
    0% {
        -webkit-transform: translate3d(0%, -100%, 0);
    }

    100% {
        -webkit-transform: translate3d(0%, 0%, 0);
    }
}

@keyframes down-inAnimation {
    0% {
        transform: translate3d(0%, -100%, 0);
    }

    100% {
        transform: translate3d(0%, 0%, 0);
    }
}

.down-in.animation-reverse {
    -webkit-animation: down-inAnimationReverse 450ms forwards;
    animation: down-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes down-inAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, -100%, 0);
    }

    0% {
        -webkit-transform: translate3d(0%, 0%, 0);
    }
}

@keyframes down-inAnimationReverse {
    100% {
        transform: translate3d(0%, -100%, 0);
    }

    0% {
        transform: translate3d(0%, 0%, 0);
    }
}

.down-out {
    -webkit-animation: down-outAnimation 300ms forwards;
    animation: down-outAnimation 300ms forwards;
}

@-webkit-keyframes down-outAnimation {
    0% {
        -webkit-transform: translate3d(0%, 0%, 0);
    }

    100% {
        -webkit-transform: translate3d(0%, 200px, 0);
    }
}

@keyframes down-outAnimation {
    0% {
        transform: translate3d(0%, 0%, 0);
    }

    100% {
        transform: translate3d(0%, 200px, 0);
    }
}

.down-out.animation-reverse {
    -webkit-animation: down-outAnimationReverse 450ms forwards;
    animation: down-outAnimationReverse 450ms forwards;
}

@-webkit-keyframes down-outAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 0%, 0);
    }

    0% {
        -webkit-transform: translate3d(0%, 200px, 0);
    }
}

@keyframes down-outAnimationReverse {
    100% {
        transform: translate3d(0%, 0%, 0);
    }

    0% {
        transform: translate3d(0%, 200px, 0);
    }
}

.flip-in {
    -webkit-animation: flip-inAnimation 300ms forwards;
    animation: flip-inAnimation 300ms forwards;
    z-index: 5;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@-webkit-keyframes flip-inAnimation {
    0% {
        -webkit-transform: rotateY(180deg);
    }

    100% {
        -webkit-transform: rotateY(0deg);
    }
}

@keyframes flip-inAnimation {
    0% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

.flip-in.animation-reverse {
    -webkit-animation: flip-inAnimationReverse 450ms forwards;
    animation: flip-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes flip-inAnimationReverse {
    100% {
        -webkit-transform: rotateY(180deg);
    }

    0% {
        -webkit-transform: rotateY(0deg);
    }
}

@keyframes flip-inAnimationReverse {
    100% {
        transform: rotateY(180deg);
    }

    0% {
        transform: rotateY(0deg);
    }
}

.flip-out {
    -webkit-animation: flip-outAnimation 300ms forwards;
    animation: flip-outAnimation 300ms forwards;
    z-index: 4;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@-webkit-keyframes flip-outAnimation {
    0% {
        -webkit-transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(180deg);
    }
}

@keyframes flip-outAnimation {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(180deg);
    }
}

.flip-out.animation-reverse {
    -webkit-animation: flip-outAnimationReverse 450ms forwards;
    animation: flip-outAnimationReverse 450ms forwards;
}

@-webkit-keyframes flip-outAnimationReverse {
    100% {
        -webkit-transform: rotateY(0deg);
    }

    0% {
        -webkit-transform: rotateY(180deg);
    }
}

@keyframes flip-outAnimationReverse {
    100% {
        transform: rotateY(0deg);
    }

    0% {
        transform: rotateY(180deg);
    }
}

.slide-left-in {
    -webkit-animation: slide-left-inAnimation 300ms forwards;
    animation: slide-left-inAnimation 300ms forwards;
}

@-webkit-keyframes slide-left-inAnimation {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-left-inAnimation {
    0% {
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.slide-left-in.animation-reverse {
    -webkit-animation: slide-left-inAnimationReverse 450ms forwards;
    animation: slide-left-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes slide-left-inAnimationReverse {
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-left-inAnimationReverse {
    100% {
        transform: translate3d(-100%, 0, 0);
    }

    0% {
        transform: translate3d(0, 0, 0);
    }
}

.slide-left-out {
    -webkit-animation: slide-left-outAnimation 300ms forwards;
    animation: slide-left-outAnimation 300ms forwards;
}

@-webkit-keyframes slide-left-outAnimation {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(200px, 0, 0);
    }
}

@keyframes slide-left-outAnimation {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(200px, 0, 0);
    }
}

.slide-left-out.animation-reverse {
    -webkit-animation: slide-left-outAnimationReverse 450ms forwards;
    animation: slide-left-outAnimationReverse 450ms forwards;
}

@-webkit-keyframes slide-left-outAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(200px, 0, 0);
    }
}

@keyframes slide-left-outAnimationReverse {
    100% {
        transform: translate3d(0%, 0, 0);
    }

    0% {
        transform: translate3d(200px, 0, 0);
    }
}

.slide-right-in {
    -webkit-animation: slide-right-inAnimation 300ms forwards;
    animation: slide-right-inAnimation 300ms forwards;
}

@-webkit-keyframes slide-right-inAnimation {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-right-inAnimation {
    0% {
        transform: translate3d(100%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.slide-right-in.animation-reverse {
    -webkit-animation: slide-right-inAnimationReverse 450ms forwards;
    animation: slide-right-inAnimationReverse 450ms forwards;
}

@-webkit-keyframes slide-right-inAnimationReverse {
    100% {
        -webkit-transform: translate3d(100%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-right-inAnimationReverse {
    100% {
        transform: translate3d(100%, 0, 0);
    }

    0% {
        transform: translate3d(0, 0, 0);
    }
}

.slide-right-out {
    -webkit-animation: slide-right-outAnimation 300ms forwards;
    animation: slide-right-outAnimation 300ms forwards;
}

@-webkit-keyframes slide-right-outAnimation {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-200px, 0, 0);
    }
}

@keyframes slide-right-outAnimation {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-200px, 0, 0);
    }
}

.slide-right-out.animation-reverse {
    -webkit-animation: slide-right-outAnimationReverse 450ms forwards;
    animation: slide-right-outAnimationReverse 450ms forwards;
}

@-webkit-keyframes slide-right-outAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(-200px, 0, 0);
    }
}

@keyframes slide-right-outAnimationReverse {
    100% {
        transform: translate3d(0%, 0, 0);
    }

    0% {
        transform: translate3d(-200px, 0, 0);
    }
}

.invoke-out {
    -webkit-animation: invoke-outAnimation 500ms forwards;
    animation: invoke-outAnimation 500ms forwards;
    z-index: 11;
}

@-webkit-keyframes invoke-outAnimation {
    0% {
        -webkit-transform: scale(1) translate3d(0%, 0, 0);
    }

    50% {
        -webkit-transform: scale(0.8) translate3d(10%, 0, 0);
    }

    100% {
        -webkit-transform: scale(0.8) translate3d(100%, 0, 0);
    }
}

@keyframes invoke-outAnimation {
    0% {
        transform: scale(1) translate3d(0%, 0, 0);
    }

    50% {
        transform: scale(0.8) translate3d(10%, 0, 0);
    }

    100% {
        transform: scale(0.8) translate3d(100%, 0, 0);
    }
}

.invoke-out.animation-reverse {
    -webkit-animation: invoke-outAnimationReverse 750ms forwards;
    animation: invoke-outAnimationReverse 750ms forwards;
}

@-webkit-keyframes invoke-outAnimationReverse {
    100% {
        -webkit-transform: scale(1) translate3d(0%, 0, 0);
    }

    50% {
        -webkit-transform: scale(0.8) translate3d(10%, 0, 0);
    }

    0% {
        -webkit-transform: scale(0.8) translate3d(100%, 0, 0);
    }
}

@keyframes invoke-outAnimationReverse {
    100% {
        transform: scale(1) translate3d(0%, 0, 0);
    }

    50% {
        transform: scale(0.8) translate3d(10%, 0, 0);
    }

    0% {
        transform: scale(0.8) translate3d(100%, 0, 0);
    }
}

.invoke-in {
    -webkit-animation: invoke-inAnimation 500ms forwards;
    animation: invoke-inAnimation 500ms forwards;
    z-index: 10;
}

@-webkit-keyframes invoke-inAnimation {
    0% {
        -webkit-transform: scale(0.6) translate3d(-130%, 0, 0);
    }

    50% {
        -webkit-transform: scale(0.8) translate3d(-110%, 0, 0);
    }

    100% {
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    }
}

@keyframes invoke-inAnimation {
    0% {
        transform: scale(0.6) translate3d(-130%, 0, 0);
    }

    50% {
        transform: scale(0.8) translate3d(-110%, 0, 0);
    }

    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }
}

.invoke-in.animation-reverse {
    -webkit-animation: invoke-inAnimationReverse 750ms forwards;
    animation: invoke-inAnimationReverse 750ms forwards;
}

@-webkit-keyframes invoke-inAnimationReverse {
    100% {
        -webkit-transform: scale(0.6) translate3d(-130%, 0, 0);
    }

    50% {
        -webkit-transform: scale(0.8) translate3d(-110%, 0, 0);
    }

    0% {
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    }
}

@keyframes invoke-inAnimationReverse {
    100% {
        transform: scale(0.6) translate3d(-130%, 0, 0);
    }

    50% {
        transform: scale(0.8) translate3d(-110%, 0, 0);
    }

    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }
}

.header-load {
    -webkit-animation: header-loadAnimation 300ms forwards;
    animation: header-loadAnimation 300ms forwards;
}

@-webkit-keyframes header-loadAnimation {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-90px, 0, 0);
        opacity: 0.1;
    }
}

@keyframes header-loadAnimation {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-90px, 0, 0);
        opacity: 0.1;
    }
}

.header-load.animation-reverse {
    -webkit-animation: header-loadAnimationReverse 450ms forwards;
    animation: header-loadAnimationReverse 450ms forwards;
}

@-webkit-keyframes header-loadAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(-90px, 0, 0);
        opacity: 0.1;
    }
}

@keyframes header-loadAnimationReverse {
    100% {
        transform: translate3d(0%, 0, 0);
    }

    0% {
        transform: translate3d(-90px, 0, 0);
        opacity: 0.1;
    }
}

.header-unload {
    -webkit-animation: header-unloadAnimation 300ms forwards;
    animation: header-unloadAnimation 300ms forwards;
}

@-webkit-keyframes header-unloadAnimation {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(90px, 0, 0);
        opacity: 0.1;
    }
}

@keyframes header-unloadAnimation {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(90px, 0, 0);
        opacity: 0.1;
    }
}

.header-unload.animation-reverse {
    -webkit-animation: header-unloadAnimationReverse 450ms forwards;
    animation: header-unloadAnimationReverse 450ms forwards;
}

@-webkit-keyframes header-unloadAnimationReverse {
    100% {
        -webkit-transform: translate3d(0%, 0, 0);
    }

    0% {
        -webkit-transform: translate3d(90px, 0, 0);
        opacity: 0.1;
    }
}

@keyframes header-unloadAnimationReverse {
    100% {
        transform: translate3d(0%, 0, 0);
    }

    0% {
        transform: translate3d(90px, 0, 0);
        opacity: 0.1;
    }
}

.header-load-to {
    -webkit-animation: header-load-toAnimation 500ms forwards;
    animation: header-load-toAnimation 500ms forwards;
}

@-webkit-keyframes header-load-toAnimation {
    0% {
        -webkit-transform: translate3d(90px, 0, 0);
        opacity: 0.1;
    }

    100% {
        -webkit-transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
}

@keyframes header-load-toAnimation {
    0% {
        transform: translate3d(90px, 0, 0);
        opacity: 0.1;
    }

    100% {
        transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
}

.header-load-to.animation-reverse {
    -webkit-animation: header-load-toAnimationReverse 750ms forwards;
    animation: header-load-toAnimationReverse 750ms forwards;
}

@-webkit-keyframes header-load-toAnimationReverse {
    100% {
        -webkit-transform: translate3d(90px, 0, 0);
        opacity: 0.1;
    }

    0% {
        -webkit-transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
}

@keyframes header-load-toAnimationReverse {
    100% {
        transform: translate3d(90px, 0, 0);
        opacity: 0.1;
    }

    0% {
        transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
}

.header-unload-to {
    -webkit-animation: header-unload-toAnimation 500ms forwards;
    animation: header-unload-toAnimation 500ms forwards;
}

@-webkit-keyframes header-unload-toAnimation {
    0% {
        -webkit-transform: translate3d(-90px, 0, 0);
        opacity: 0.1;
    }

    100% {
        -webkit-transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
}

@keyframes header-unload-toAnimation {
    0% {
        transform: translate3d(-90px, 0, 0);
        opacity: 0.1;
    }

    100% {
        transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
}

.header-unload-to.animation-reverse {
    -webkit-animation: header-unload-toAnimationReverse 750ms forwards;
    animation: header-unload-toAnimationReverse 750ms forwards;
}

@-webkit-keyframes header-unload-toAnimationReverse {
    100% {
        -webkit-transform: translate3d(-90px, 0, 0);
        opacity: 0.1;
    }

    0% {
        -webkit-transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
}

@keyframes header-unload-toAnimationReverse {
    100% {
        transform: translate3d(-90px, 0, 0);
        opacity: 0.1;
    }

    0% {
        transform: translate3d(0%, 0, 0);
        opacity: 1;
    }
}

@-ms-viewport {
    width: device-width;
}

body .afPopup {
    background: inherit;
    color: inherit;
}

    body .afPopup > FOOTER > A {
        width: 120px;
    }

body #af_actionsheet {
    background: #0190d6;
    color: inherit;
}

    body #af_actionsheet a {
        border-radius: 0;
        color: black;
        background: white;
        border: none;
        text-shadow: none;
    }

.view header {
    border: none;
    color: #ffffff;
}

    .view header h1 {
        text-shadow: none;
        width: 45%;
    }

    .view header #backButton, .view header #backHome {
        background: #f9f9f9;
        color: #fff;
        display: block;
        line-height: 44px;
        text-overflow: ellipsis;
        font-size: 14px;
        padding: 0;
        text-shadow: none;
        background-color: transparent;
        border: none;
        border-color: transparent;
        height: 44px;
        top: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding-left: 0;
        text-align: center;
        width: 50px;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute;
    }

    .view header #backButton {
        top:20px;
        left:15px;
        background:url(../../images/icon-arrow.png) no-repeat;
        background-size:25px 22px;
        text-indent:-5000px;

    }

    .view header #backHome {
        right: 25px;

    }

#backButton::before, #backHome::before {
    z-index: -1;
    font-size: 28px;
    position: absolute;
    top: 5px;
    text-align: center;
    border-radius: 0;
    border: none;
    border-color: transparent;
    background-color: transparent;
    padding: 12px;
}

#backButton::before {
    /*content: "\f054";*/
    box-shadow: none;
    -webkit-transform: none;
    transform: none;
    font-family: 'chevron';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    left: -30px;
}

#backHome::before {
    right: -30px;
}

.af-badge {
    border: none;
    box-shadow: none;
}

.list {
    background: inherit;
    color: inherit;
    border-color: #303030;
    font-weight: normal;
}

    .list .divider {
        color: black;
    }

    .list > li > a:after {
        color: #0088D1;
    }

.panel {
    color: inherit;
    background: inherit;
}

    .panel h2 {
        color: #0088D1;
    }

.collapsed:after {
    border-top: 6px solid;
}

.collapsed:before {
    border: 2px solid;
}

.expanded:after {
    border-bottom: 6px solid;
}

.expanded:before {
    border: 2px solid;
}

.collapsed:before,
.expanded:before {
    border-color: inherit;
}

.collapsed:after,
.expanded:after {
    border-top-color: inherit;
}

select,
textarea,
input[type="text"],
input[type=search],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
    background: inherit;
    color: inherit;
}

input.toggle + label:after {
    color: inherit;
}

input.toggle + label {
    border-radius: 0;
}

    input.toggle + label > span {
        border-radius: 0;
        top: 0;
        width: 27px;
        height: 23px;
    }

label {
    color: inherit;
}

input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
    background:#E29FB8;
}

.button {
    border-radius: 0;
    text-shadow: none;
}

    .button.previous {
        border: none;
    }

    .button.next {
        border: none;
    }

    .button.previous::after {
        color: black;
        z-index: -1;
        font-size: 22px;
        position: absolute;
        top: 2px;
        left: -25px;
        text-align: center;
        border-radius: 0;
        border: none;
        border-color: transparent;
        box-shadow: none;
        -webkit-transform: none;
        transform: none;
        font-family: 'chevron';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        content: "\f054";
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        background-color: transparent;
    }

    .button.next::after {
        color: black;
        z-index: -1;
        font-size: 22px;
        position: absolute;
        top: 6px;
        right: -25px;
        text-align: center;
        border-radius: 0;
        border: none;
        border-color: transparent;
        box-shadow: none;
        -webkit-transform: none;
        transform: none;
        font-family: 'chevron';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        content: "\f054";
        background-color: transparent;
    }

#af_actionsheet {
    position: absolute;
    left: 0px;
    right: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    margin: auto;
    background: black;
    float: left;
    z-index: 9999;
    border-top: #fff 1px solid;
    background: rgba(71, 71, 71, 0.95);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)), color-stop(0.08, rgba(255, 255, 255, 0.1)), color-stop(0.08, rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0) 8%);
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.4);
    bottom: 0px;
}

    #af_actionsheet a {
        text-decoration: none;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
        text-shadow: 0px -1px rgba(0, 0, 0, 0.8);
        padding: 0px .25em;
        border: 1px solid rgba(0, 0, 0, 0.8);
        text-overflow: ellipsis;
        border-radius: .75em;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0)));
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%);
        box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7);
        display: block;
        color: white;
        text-align: center;
        line-height: 36px;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        background-color: #828282;
    }

        #af_actionsheet a.selected {
            background-color: #969696;
        }

        #af_actionsheet a.cancel {
            background-color: #2b2b2b;
            color: white;
        }

            #af_actionsheet a.cancel.selected {
                background-color: #494949;
            }

        #af_actionsheet a.red {
            color: white;
            background-color: #cc0000;
        }

            #af_actionsheet a.red.selected {
                background-color: #ff0000;
            }

#mask {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
}

.afPopup {
    display: block;
    width: 280px;
    float: left;
    padding: 10px;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    z-index: 1000000;
    top: 50%;
    left: 50%;
    margin: 0px auto;
    background: #464646;
    color: white;
}

    .afPopup > * {
        color: inherit;
    }

    .afPopup > HEADER {
        font-weight: bold;
        font-size: 20px;
        margin: 0;
        padding: 5px;
    }

    .afPopup > DIV {
        font-size: 14px;
        margin: 8px;
    }

    .afPopup > FOOTER {
        width: 100%;
        text-align: center;
        display: block !important;
    }

        .afPopup > FOOTER > A#cancel {
            float: left;
        }

        .afPopup > FOOTER > A#action {
            float: right;
        }

        .afPopup > FOOTER > A.center {
            float: none !important;
            width: 80%;
            margin: 8px;
        }

    .afPopup .button {
        background-color: #ff0000;
    }

    .afPopup.hidden {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }

    .afPopup.show {
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

#splashscreen {
    position: absolute;
    top: 45%;
    border-radius:10px;
   background:rgba(0,0,0,0.5) !important;
    color: white !important;
    font-size: 30px;
    text-align: center;
    z-index: 9999;
    display: block;
}

.ui-icon {
    background: #666;
    background: rgba(0, 0, 0, 0.4);
    background-repeat: no-repeat;
}

.ui-loader {
    display: none;
    margin: 10px;
    position: absolute;
    opacity: .85;
    z-index: 100;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -35px;
    padding: 10px 30px;
    background: #666;
    background: rgba(0, 0, 0, 0.4);
    color: white;
}

    .ui-loader h1 {
        font-size: 15px;
        text-align: center;
    }

    .ui-loader .ui-icon {
        position: static;
        display: block;
        opacity: .9;
        margin: 10px auto;
        width: 35px;
        height: 35px;
        background-color: #eee;
    }

    .ui-loader.heavy {
        opacity: 1;
    }

.spin {
    -webkit-transform: rotate(360deg);
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    transform: rotate(360deg);
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ui-icon-loading {
    width: 40px;
    height: 40px;
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    background: white;
    border-radius: 10px;
}

.ui-corner-all {
    border-radius: .6em;
}

.swipe-reveal .swipe-hidden {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
    bottom: 0px;
}

.swipe-reveal .swipe-content {
    position: relative;
    display: block;
    color: inherit;
    margin: -20px -20px -20px -10px;
    text-decoration: none;
    padding: 20px 20px 20px 10px;
    background: inherit;
    z-index: 2;
}

.swipe-hidden .button,
.swipe-hidden .button.pressed {
    display: inline-block;
    height: 100%;
    background: #ccc !important;
    color: white;
    border-radius: 0 !important;
    border: none;
    padding: 20px 15px;
    margin: 0;
    float: left;
    color: white !important;
}

.swipe-hidden .archive,
.swipe-hidden .archive.pressed {
    background: red !important;
}

.afToast {
    width: auto;
    border: solid 1px #72767b;
    z-index: 1000000;
    margin: 0px auto;
    background: #464646;
    color: white;
    opacity: 0.95;
    height: auto;
    font-size: 20px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: left;
    line-height: 46px;
    margin: 5px 10px;
    border-radius: 5px;
    overflow: hidden;
}

    .afToast > * {
        color: inherit;
    }

    .afToast > DIV {
        font-size: 16px;
        margin: 8px;
    }

    .afToast.hidden {
        opacity: 0.1;
        height: 5px;
        overflow: hidden;
    }

.afToastContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99999;
}

.afToast.success {
    background: #499349;
}

.afToast.error {
    background: #AA312A;
}

.afToast.warning {
    background: #DF8505;
}

.afToastContainer.br {
    bottom: 0px;
    right: 0px;
    top: auto;
    left: auto;
}

.afToastContainer.bl {
    bottom: 0px;
    left: 0px;
    top: auto;
    right: auto;
}

.afToastContainer.tl {
    top: 0px;
    left: 0px;
    right: auto;
    bottom: auto;
}

.afToastContainer.tr {
    top: 0px;
    right: 0px;
    left: auto;
    bottom: auto;
}

.afToastContainer.tc {
    top: 0px;
    right: 0px;
    bottom: auto;
    left: 0px;
}

.afToastContainer.bc {
    top: auto;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.af-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-block;
    min-width: 20px;
    max-width: 90%;
    height: 20px;
    padding: 0 3px;
    background-color: red;
    border-radius: 20px;
    font-size: 12px;
    line-height: 19px;
    font-weight: bold;
    color: #fff;
    text-overflow: ellipsis;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(64, 0, 0, 0.6);
}

    .af-badge.br {
        bottom: 2px;
        right: 2px;
        top: auto;
        left: auto;
    }

    .af-badge.bl {
        bottom: 2px;
        left: 2px;
        top: auto;
        right: auto;
    }

    .af-badge.tl {
        top: 2px;
        left: 2px;
        right: auto;
        bottom: auto;
    }

.button {
    position: relative;
    display: inline-block;
    border-radius: 3px;
    padding: 12px;
    margin: 8px 0;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    background-color: #eee;
    line-height: 1em;
    text-decoration: none;
    z-index: 2;
}

    .button.pressed {
        background: #fff;
    }

    .button.previous {
        margin-left: 16px;
        padding-left: 6px;
        border-color: #666 #666 transparent transparent !important;
    }

    .button.next {
        border-color: #666 transparent #666 #666 !important;
        margin-right: 16px;
        padding-right: 6px;
    }

    .button.previous::after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 25px;
        height: 27px;
        background-color: inherit;
        top: 3px;
        left: -11px;
        border-radius: 5px;
        border: 1px solid;
        border-color: transparent transparent inherit transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .button.next::after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 25px;
        height: 27px;
        background-color: inherit;
        top: 3px;
        right: -11px;
        border-radius: 5px;
        border: 1px solid;
        border-color: transparent transparent transparent transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .button.block {
        display: block;
    }

    .button.flat {
        border-radius: 0;
        box-shadow: none;
    }

.header .button-grouped > .button {
    margin: 0;
    border-color: #fff;
}

.header .button {
    color: #fff;
    background: none;
    border-color: transparent;
    font-size: 12px;
    padding: 7px;
    height: 32px;
    margin: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .header .button.icon:before {
        padding-left: 6px;
    }

.button-grouped {
    display: inline-block;
    margin: 5px;
}

    .button-grouped * {
        border-radius: 0px;
        float: left;
        border-left: 0px solid transparent;
        border-right: 1px solid #666;
        border-bottom: 1px solid #666;
        border-top: 1px solid #666;
        margin: 0;
    }

    .button-grouped > .button:first-child {
        border-left: 1px solid #666;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .button-grouped > .button:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .button-grouped.flex {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

        .button-grouped.flex > .button {
            -webkit-box-flex: 1;
            -moz-box-flex: 1 auto;
            -webkit-flex: 1 auto;
            -ms-flex: 1 auto;
            flex: 1 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .button-grouped.flex.vertical {
            display: inline-block;
        }

    .button-grouped.vertical * {
        border-radius: 0px;
        display: block;
        float: none;
        width: 100%;
        border-left: 1px solid #666;
        border-right: 1px solid #666;
        border-top: 1px solid #666;
        border-bottom: 0px solid #666;
    }

    .button-grouped.vertical > .button:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .button-grouped.vertical > .button:last-child {
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        border-bottom: 1px solid #666;
    }

.button.gray {
    background: #999;
    border-color: #666;
}

.button.yellow {
    color: #ffffff;
    background-color: #f3a406;
}
/*红色*/
.button.red {
    background: #e63516;
}
/*蓝色*/
.button.blue {
    background: #269fdb;
}
/*绿色*/
.button.green {
    color: #fff;
    text-shadow: 0 -1px 0 #666666;
    background: #009C0C;
    border-color: #666;
}
/*黄色*/
.button.orange {
    color: #fff;
    background-color: #ff9600;
}

.button.black {
    color: #fff;
    text-shadow: none;
    background: #000;
    border-color: #666;
}

.button.slate {
    color: #fff;
    text-shadow: 0 -1px 0 #000000;
    background: #171F28;
    border-color: #666;
}

.backButton {
    text-overflow: ellipsis;
    white-space: nowrap;
}


.grid {
    width: 100%;
    overflow: hidden;
}

.col2,
.col3,
.col1-3,
.col2-3 {
    float: none;
    width: 100%;
}

.grid:after {
    content: '';
    clear: both;
}

@media handheld, only screen and (min-width: 768px) {
    .col2 {
        width: 50%;
        float: left;
    }

    .col3 {
        width: 33.3%;
        float: left;
    }

    .col1-3 {
        width: 33.3%;
        float: left;
    }

    .col2-3 {
        width: 66.6%;
        float: left;
    }
}

.list {
    margin: 0px;
    padding: 0px;
    list-style: none;
    background-color: #fff;
    margin: 0 -10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .list li {
        display: block;
        list-style: none;
        position: relative;
        padding: 20px 20px 20px 10px;
        border-bottom: 1px solid #ccc;
        background: inherit;
    }

        .list li:first-child {
            /*   border-top: 1px solid #ccc;*/
        }

    .list > li > a {
        position: relative;
        display: block;
        color: inherit;
        margin: -20px -20px -20px -10px;
        text-decoration: none;
        padding: 20px 20px 20px 10px;
    }

        .list > li > a:after,
        .list > li .chevron:after {
            position: absolute;
            right: 8px;
            font-family: 'chevron';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            content: "\f054";
            top: 50%;
            margin-top: -0.5em;
            color: inherit;
        }

    .list a .af-badge {
        position: absolute;
        right: 30px;
        top: 48%;
        margin-top: -10px;
    }

    .list .divider {
        position: relative;
        top: -1px;
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 12px;
        font-weight: bold;
        line-height: 18px;
        background-color: #dfe0e2;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
        padding-right: 60px;
    }

    .list.inset {
        border: 1px solid #ccc;
        border-radius: 6px;
        margin: 10px;
    }

        .list.inset li:first-child {
            border-top: none;
            margin-top: 3px;
        }

        .list.inset li:last-child {
            border-bottom: none;
            margin-bottom: 3px;
        }

@media handheld, only screen and (min-width: 768px) {
    .splitview > *:not(nav) {
        margin-left: 256px;
        z-index: 9;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }

    .splitview > nav {
        left: 0px !important;
        width: 256px !important;
        display: block !important;
        z-index: 10;
        -webkit-animation: none !important;
        animation: none !important;
    }

    .splitview header .menuButton {
        display: none !important;
    }
}

header .menuButton {
    position: relative;
    top: 5px;
    right: -8px;
    height: 36px;
    width: 36px;
    z-index: 2;
    float: right;
}

    header .menuButton:after {
        border-bottom: 9px double white;
        border-top: 3px solid white;
        top: 9px;
        left: 3px;
        content: "";
        height: 15px;
        position: absolute;
        width: 15px;
    }
    /*首页样式*/
.home .f9{font-size:9px;}
.home .f11{font-size:11px;}
.home .f14{font-size:14px;}
.home .bc-select{background-color:#2d830b !important;}
.home{  width: 320px;margin:20px auto;font-size:14px;color:#000;position: relative;}
.home ul.home-classify{overflow:hidden; width:100%;}
ul.home-classify li{float:left; width:155px; border-radius:2px;background-color:rgba(255,255,255,0.6);padding:15px 2% 0;list-style-type:none;margin-bottom:10px}
ul.home-classify li:nth-child(2n+2){float:right !important}
ul.home-classify li .icon{overflow:hidden; width:74px;height:74px;border-radius:40px;margin:0 auto;}
ul.home-classify li .icon img{ width:111px;height:74px;}
ul.home-classify li span{display: block;width:100%;height:30px;line-height:15px; margin:10px 0;text-align:center;}
.home ul.home-ft{overflow:hidden;   padding: 0px 40%;}
ul.home-ft li{width:5px;height:5px;border-radius:10px;background-color:#fff;margin-right:5px;float:left;}
.chk_1,.chk_2,.chk_3,.chk_4 {
    display: none;
}
/*******复选框样式*******/
.china {
  position: ABSOLUTE;
  top:6px;
  right: 0px;
}
.chk_4 + label {
  display: inline-block;
  position: relative;
  width: 77px;
 height:25px;
 background:url(../../images/china_bg.png) no-repeat center center;
   background-size: 77px;
}
.chk_4:checked + label {
	  background:url(../../images/English_bg.png) no-repeat center center;

}


.chk_4:checked + label:before {
	content: '';
	position: absolute;
	z-index: 99999;
	left: 52px;
}


.chk_4 + label:after {
	left: 35px;	
}	

#checkbox_d2 + label:after, #checkbox_d2 + label:before, #checkbox label {	
	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}


    /*详细页样式*/
.proview {padding:20px;width:100%;}
.detail .wdl{color:#08b0d4 !important;background:url(../../images/icon-wdl.png) no-repeat 5px center;background-size:13px 13px; padding-left:20px;}
.detail .fr{float:right;}
.detail{overflow:hidden; width:100%;padding:20px;border-radius:5px;  background-color: #fff;}
.detail .detail-img{max-width:100%;text-align:center;padding:15px 0;}
.detail .detail-img img{max-width:100%;}
.detail h3{overflow:hidden; width:100%;padding-bottom:10px;font-size:19px;color:#2e2e2e;text-align:left;font-weight:initial;}
.detail p{width:100%;color:#000;}
.detail .info{overflow:hidden; width:100%;}
.detail .info span{color:#777776;font-size :10px;float:left}
.detail .info a{color:#777776;font-size :10px;float:left}
.detail .info span:last-child{float:right}

/*列表页面*/


/**********************************************
*
* 2. Container Styles
*
**********************************************/
.js .sky-carousel {
	visibility: hidden;
}

.sky-carousel {
	width: 100%;
	height: 480px;
	position: relative;	
	overflow: hidden;
	margin: 0 auto;	
}

.sky-carousel .sky-carousel-container {
	position: relative;
	list-style-type: none;
	float: left;
	margin: 0;
	padding: 0;
}

/**********************************************
*
* 3. Carousel Item Styles
*
**********************************************/
.sky-carousel .sky-carousel-container li {
	position: absolute;	
    overflow:hidden;
    width:280px;
    text-align:center
}
.sky-carousel .sky-carousel-container li .img{
   width:85%;
    background-color: rgba(255,255,255,0.6);
      border-radius: 5px;
      padding:50px 20px;
      margin:auto;
      text-align:center
}
.sky-carousel .sky-carousel-container li img {
	display: block;
	width:160px;
    height:160px;
    border-radius:100px;
    margin:auto
}

.sky-carousel .sky-carousel-container li a img {
	border: none;
}

.sky-carousel .sc-overlay {
	position: absolute;
	height: 100%;
	z-index: 9998;
	pointer-events: none;
	top: 0;
    display:none;
}

.sky-carousel .sc-overlay-left {
	left: -0.1px;
}

.sky-carousel .sc-overlay-right {
	right: -0.1px;
}


.sky-carousel .sky-carousel-container .sc-content {
	display: block;
}

/**********************************************
*
* 4. Current Content Styles
*
**********************************************/
.sky-carousel .sc-content-wrapper {
	position: absolute;
	text-align: center;	
	width: 100%;
	top: 61%;
	left: 50%;
	z-index: 9999;
}

.sky-carousel .sc-content-container {
	position: relative;
	left: -50%;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	padding: 0 20px;
}

.sky-carousel .sc-content-wrapper h2 {
	color: #fff;
	font-size: 17px;
	margin: 0;
	padding: 0;
}

.sky-carousel .sc-content-wrapper p {
	color: #fff;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

.sky-carousel .sc-content-wrapper a {
	text-decoration: none;
	color: #444;
	border-bottom: 1px dotted #444;
}
/**********************************************
*
* 6. Navigation Styles
*
**********************************************/
.sky-carousel .sc-nav-button {
	position: absolute;
	bottom: 0%;
	z-index: 10000;
	width: 40px;
	height: 60px;
	margin-top: -30px;
	transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
}

.sky-carousel .sc-nav-button.sc-next {
	background: url(../../images/icon-fast.png) no-repeat 16px 50%;
	right: 20px;
      background-size: 20px;
}

.sky-carousel .sc-nav-button.sc-prev {
	background:url(../../images/icon-rewind.png) no-repeat 14px 50%;
	left: 10px;
      background-size: 20px;
}


/**********************************************
*
* 7. Preloader Styles
*
**********************************************/
.sky-carousel .sc-preloader {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 24px;
	margin-top: -22px;
	margin-left: -22px;
	background: #f5f5f5 url("preloader.gif") no-repeat 50% 50%;
	padding: 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
      display: none;
}

/**********************************************
*
* 8. Other Styles
*
**********************************************/
.sc-no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
        #audio{ width: 100%;}
        #control{position:absolute;bottom:16px;left:48%;width:24px;height:26px;z-index:10000;text-indent:-5000px;border:none;}
        .color_gray{ background: #e4e4e4}
        .hide{ display: none;}
        .show{ display: block;}
        .play{ background:url(../../images/icon-pause.png) no-repeat;  background-size: 20px;}
        .pause{ background:url(../../images/icon-play.png) no-repeat;  background-size: 20px;}
        /*进度条样式*/
        .miss {width: 88%;position: RELATIVE;margin: 0 auto;}
        .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 75px;}
        .progressBar div{ position: absolute;border-radius:5px;}
        .progressBar .progressBac{ width: 100%; height: 10px;  left: 0; top:0; background-color:rgba(115,127,158,0.6);}
        .progressBar .speed{width: 0px; height: 10px;background: #fff;}
        .progressBar .drag{ width: 25px; height: 25px; left: 0; top:-7.5px;  background: skyblue; opacity: 0.8; border-radius: 50px;}


/* 本例子css -------------------------------------- */
.slideBox{ position:relative; width:320px; overflow:hidden; margin:10px auto; }
.slideBox .hd{width: 100%;  text-align: center; height:28px; line-height:28px; bottom:0; right:0; z-index:1; }
.slideBox .hd li{ display:inline-block; width:10px; height:10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#fff; text-indent:-9999px; overflow:hidden; margin:0 5px;   }
.slideBox .hd li.on{ background:#2d830b;  }
.slideBox .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative;    list-style-type: none;}
.slideBox .bd li img{ width:72px;  height:74px; display:block;margin:20px auto 5px;border-radius:100px   }
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */ width:48%;float:left;overflow:hidden;margin-bottom:10px;background-color:rgba(255,255,255,0.6);text-align:center;padding-bottom:20px;border-radius:5px;display:block;}
.slideBox .bd li a:nth-child(2n+2){float:right;}
.slideBox .bd li a span.tit{  display: block;white-space: nowrap;padding: 0px 10px;overflow: hidden;width: 100%;text-overflow:ellipsis}
.slideBox .home-tl{padding:10px 0px;color:#fff}