.dot-blink {
    display: inline-block;
    position: relative
}

.dot-blink .db-cover {
    display: block
}

.dot-blink .db-cover .db-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    margin: 0 0 0 6px;
    background: #d8dce6
}

.dot-blink .db-cover .db-dot:first-child {
    animation: db-dot1 .5s forwards;
    -webkit-animation: db-dot1 .5s forwards;
    animation-delay: 2.2s;
    -webkit-animation-delay: 2.2s;
    margin: 0
}

.dot-blink .db-cover .db-dot:nth-child(2) {
    animation: db-dot2 .5s forwards;
    -webkit-animation: db-dot2 .5s forwards;
    animation-delay: 3s;
    -webkit-animation-delay: 3s
}

.dot-blink .db-cover .db-dot:nth-child(3) {
    animation: db-dot3 .5s forwards;
    -webkit-animation: db-dot3 .5s forwards;
    animation-delay: 3.2s;
    -webkit-animation-delay: 3.2s
}

.dot-blink .db-cover .db-dot:nth-child(4) {
    animation: db-dot4 .5s forwards;
    -webkit-animation: db-dot4 .5s forwards;
    animation-delay: 4.3s;
    -webkit-animation-delay: 4.3s
}

.dot-blink .db-cover .db-dot:nth-child(5) {
    animation: db-dot5 .5s forwards;
    -webkit-animation: db-dot5 .5s forwards;
    animation-delay: 5.4s;
    -webkit-animation-delay: 5.4s
}

.dot-blink span {
    display: block;
    width: 100%;
    height: 14px;
    position: relative;
    margin: 8px 0 0
}

.dot-blink span:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14px;
    line-height: 15px;
    text-align: center;
    content: "0%";
    font-size: 14px;
    color: #121f3e;
    letter-spacing: .5px;
    opacity: .87;
    animation: dbNumLoading 4s forwards;
    -webkit-animation: dbNumLoading 4s forwards;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s
}

.dot-loop {
    display: inline-block;
    position: relative;
    padding: 5px 0 0
}

.dot-loop .dl-cover {
    display: block
}

.dot-loop .dl-cover .dl-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    margin: 0 0 0 3px;
    background: #d8dce6
}

.dot-loop .dl-cover .dl-dot:first-child {
    animation: dl-dot1 3s infinite;
    -webkit-animation: dl-dot1 3s infinite;
    margin: 0
}

.dot-loop .dl-cover .dl-dot:nth-child(2) {
    animation: dl-dot2 3s infinite;
    -webkit-animation: dl-dot2 3s infinite
}

.dot-loop .dl-cover .dl-dot:nth-child(3) {
    animation: dl-dot3 3s infinite;
    -webkit-animation: dl-dot3 3s infinite
}

.dot-loop .dl-cover .dl-dot:nth-child(4) {
    animation: dl-dot4 3s infinite;
    -webkit-animation: dl-dot4 3s infinite
}

.dot-loop .dl-cover .dl-dot:nth-child(5) {
    animation: dl-dot5 3s infinite;
    -webkit-animation: dl-dot5 3s infinite
}

.dot-flop {
    display: inline-block;
    width: 166px;
    height: 18px;
    position: relative
}

.dot-flop .df-move {
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #5d9df4;
    box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
    top: 0;
    left: 0;
    animation: dfMove 4s infinite;
    -webkit-animation: dfMove 4s infinite
}

.dot-flop .df-cover {
    display: block;
    width: 166px;
    height: 18px;
    position: relative
}

.dot-flop .df-cover .df-dot {
    display: block;
    float: left;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0 0 0 18px
}

.dot-flop .df-cover .df-dot span {
    width: 58px;
    height: 58px;
    top: calc(50% - 29px)
}

.dot-flop .df-cover .df-dot span,
.dot-flop .df-cover .df-dot span b {
    display: block;
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%
}

.dot-flop .df-cover .df-dot span b {
    width: 18px;
    height: 18px;
    background: #5d9df4;
    top: calc(50% - 9px);
    right: 0;
    box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
}

.dot-flop .df-cover .df-dot:first-child {
    margin: 0
}

.dot-flop .df-cover .df-dot:first-child span {
    animation: df-dot1 4s infinite;
    -webkit-animation: df-dot1 4s infinite
}

.dot-flop .df-cover .df-dot:first-child span b {
    background: #5893e4;
    animation: df-dot1-color 4s infinite;
    -webkit-animation: df-dot1-color 4s infinite
}

.dot-flop .df-cover .df-dot:nth-child(2) span {
    animation: df-dot2 4s infinite;
    -webkit-animation: df-dot2 4s infinite
}

.dot-flop .df-cover .df-dot:nth-child(2) span b {
    background: #4f83cc;
    animation: df-dot2-color 4s infinite;
    -webkit-animation: df-dot2-color 4s infinite
}

.dot-flop .df-cover .df-dot:nth-child(3) span {
    animation: df-dot3 4s infinite;
    -webkit-animation: df-dot3 4s infinite
}

.dot-flop .df-cover .df-dot:nth-child(3) span b {
    background: #4875b5;
    animation: df-dot3-color 4s infinite;
    -webkit-animation: df-dot3-color 4s infinite
}

.dot-flop .df-cover .df-dot:nth-child(4) span {
    animation: df-dot4 4s infinite;
    -webkit-animation: df-dot4 4s infinite
}

.dot-flop .df-cover .df-dot:nth-child(4) span b {
    background: #3d659c;
    animation: df-dot4-color 4s infinite;
    -webkit-animation: df-dot4-color 4s infinite
}

.dot-width {
    display: inline-block
}

.dot-width .dw-cover {
    display: block
}

.dot-width .dw-cover .dw-dot {
    display: block;
    float: left;
    margin: 0 0 0 10px;
    width: 18px;
    height: 18px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    background: #d8dce6
}

.dot-width .dw-cover .dw-dot:first-child {
    animation: dw-dot1 .5s forwards;
    -webkit-animation: dw-dot1 .5s forwards;
    animation-delay: 2.2s;
    -webkit-animation-delay: 2.2s;
    margin: 0
}

.dot-width .dw-cover .dw-dot:nth-child(2) {
    animation: dw-dot2 .5s forwards;
    -webkit-animation: dw-dot2 .5s forwards;
    animation-delay: 3s;
    -webkit-animation-delay: 3s
}

.dot-width .dw-cover .dw-dot:nth-child(3) {
    animation: dw-dot3 .5s forwards;
    -webkit-animation: dw-dot3 .5s forwards;
    animation-delay: 3.2s;
    -webkit-animation-delay: 3.2s
}

.dot-width .dw-cover .dw-dot:nth-child(4) {
    animation: dw-dot4 .5s forwards;
    -webkit-animation: dw-dot4 .5s forwards;
    animation-delay: 4.3s;
    -webkit-animation-delay: 4.3s
}

.dot-width .dw-cover .dw-dot:nth-child(5) {
    animation: dw-dot5 .5s forwards;
    -webkit-animation: dw-dot5 .5s forwards;
    animation-delay: 5.4s;
    -webkit-animation-delay: 5.4s
}

.dot-width span {
    display: block;
    width: 100%;
    height: 14px;
    position: relative;
    margin: 15px 0 0
}

.dot-width span:before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14px;
    line-height: 15px;
    text-align: center;
    content: "0%";
    font-size: 14px;
    color: #121f3e;
    letter-spacing: .5px;
    opacity: .87;
    animation: dwNumLoading 4s forwards;
    -webkit-animation: dwNumLoading 4s forwards;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s
}

.text-flip {
    display: inline-block
}

.text-flip .tf-cover {
    display: block;
    position: relative;
    height: 60px;
    width: 104px
}

.text-flip .tf-cover .tf-left {
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    -webkit-transition: -webkit-transform .33s;
    transition: -webkit-transform .33s;
    transition: transform .33s;
    transition: transform .33s, -webkit-transform .33s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: tf-left 4s infinite linear;
    -webkit-animation: tf-left 4s infinite linear
}

.text-flip .tf-cover .tf-left .tf-first {
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
    background: #5d9df4
}

.text-flip .tf-cover .tf-left .tf-first,
.text-flip .tf-cover .tf-left .tf-second {
    display: block;
    width: 50px;
    height: 60px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid rgba(18, 31, 62, .1);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
}

.text-flip .tf-cover .tf-left .tf-second {
    transform: rotateX(-90deg) translateZ(-50px) translateY(-20px);
    -webkit-transform: rotateX(-90deg) translateZ(-50px) translateY(-20px);
    background: #548fde
}

.text-flip .tf-cover .tf-left b {
    display: block;
    font-size: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    width: 100%;
    text-align: center;
    top: calc(50% - 15px);
    left: 0;
    color: #fff
}

.text-flip .tf-cover .tf-right {
    display: block;
    position: absolute;
    right: 0;
    top: -10px;
    -webkit-transition: -webkit-transform .33s;
    transition: -webkit-transform .33s;
    transition: transform .33s;
    transition: transform .33s, -webkit-transform .33s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    animation: tf-right 4s infinite linear;
    -webkit-animation: tf-right 4s infinite linear
}

.text-flip .tf-cover .tf-right .tf-first {
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
    background: #548fde
}

.text-flip .tf-cover .tf-right .tf-first,
.text-flip .tf-cover .tf-right .tf-second {
    display: block;
    width: 50px;
    height: 60px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid rgba(18, 31, 62, .1);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
}

.text-flip .tf-cover .tf-right .tf-second {
    transform: rotateX(-90deg) translateZ(-50px) translateY(-22px);
    -webkit-transform: rotateX(-90deg) translateZ(-50px) translateY(-22px);
    background: #5d9df4
}

.text-flip .tf-cover .tf-right b {
    display: block;
    font-size: 30px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    width: 100%;
    text-align: center;
    top: calc(50% - 15px);
    left: 0;
    color: #fff
}

.text-loop {
    display: block;
    width: 64px;
    margin: 0 auto
}

.text-loop .tl-cover {
    display: block;
    position: relative;
    width: 60px;
    height: 30px;
    overflow: hidden
}

.text-loop .tl-cover .tl-left {
    display: block;
    position: absolute;
    width: 30px;
    left: 0;
    top: -30px;
    animation: tl-top 3s infinite;
    -webkit-animation: tl-top 3s infinite;
    color: #121f3e;
    z-index: 1
}

.text-loop .tl-cover .tl-left span {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    font-size: 18px;
    line-height: 18px;
    opacity: .87
}

.text-loop .tl-cover .tl-left span b {
    display: block;
    width: 100%;
    height: 18px;
    text-align: right;
    position: absolute;
    left: 0;
    top: calc(50% - 9px);
    padding: 0 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.text-loop .tl-cover .tl-shadowleft {
    display: block;
    position: absolute;
    width: 30px;
    left: 0;
    top: -183px;
    animation: tl-top 3s infinite;
    -webkit-animation: tl-top 3s infinite;
    color: #121f3e;
    opacity: .2
}

.text-loop .tl-cover .tl-shadowleft span {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    font-size: 18px;
    line-height: 18px;
    opacity: .87
}

.text-loop .tl-cover .tl-shadowleft span b {
    display: block;
    width: 100%;
    height: 18px;
    text-align: right;
    position: absolute;
    left: 2px;
    top: calc(50% - 7px);
    padding: 0 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.text-loop .tl-cover .tl-right {
    display: block;
    position: absolute;
    width: 30px;
    right: 0;
    bottom: -330px;
    animation: tl-bottom 3s infinite;
    -webkit-animation: tl-bottom 3s infinite;
    color: #121f3e;
    z-index: 1
}

.text-loop .tl-cover .tl-right span {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    font-size: 18px;
    line-height: 18px;
    opacity: .87
}

.text-loop .tl-cover .tl-right span b {
    display: block;
    width: 100%;
    height: 18px;
    text-align: left;
    position: absolute;
    left: 0;
    top: calc(50% - 9px);
    padding: 0 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.text-loop .tl-cover .tl-shadowright {
    display: block;
    position: absolute;
    width: 30px;
    right: 0;
    bottom: -330px;
    animation: tl-bottom 3s infinite;
    -webkit-animation: tl-bottom 3s infinite;
    color: #121f3e;
    opacity: .2
}

.text-loop .tl-cover .tl-shadowright span {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    font-size: 18px;
    line-height: 18px;
    opacity: .87
}

.text-loop .tl-cover .tl-shadowright span b {
    display: block;
    width: 100%;
    height: 18px;
    text-align: left;
    position: absolute;
    left: 2px;
    top: calc(50% - 7px);
    padding: 0 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.tune-moving {
    display: block;
    width: 130px;
    height: 50px;
    position: relative;
    margin: 0 auto
}

.tune-moving .tm-cover {
    display: block;
    position: absolute;
    width: 100%;
    height: 18px;
    top: calc(50% - 9px);
    left: 0
}

.tune-moving .tm-cover .tm-dot {
    display: block;
    float: left;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0 0 0 10px
}

.tune-moving .tm-cover .tm-dot b {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
}

.tune-moving .tm-cover .tm-dot:first-child {
    margin: 0
}

.tune-moving .tm-cover .tm-dot:first-child b {
    background: #5d9df4;
    animation: tm-dot1 1s infinite;
    -webkit-animation: tm-dot1 1s infinite
}

.tune-moving .tm-cover .tm-dot:nth-child(2) b {
    background: #5691e2;
    animation: tm-dot2 1s infinite;
    -webkit-animation: tm-dot2 1s infinite
}

.tune-moving .tm-cover .tm-dot:nth-child(3) b {
    background: #4e87d6;
    animation: tm-dot3 1s infinite;
    -webkit-animation: tm-dot3 1s infinite
}

.tune-moving .tm-cover .tm-dot:nth-child(4) b {
    background: #487ec7;
    animation: tm-dot4 1s infinite;
    -webkit-animation: tm-dot4 1s infinite
}

.tune-moving .tm-cover .tm-dot:nth-child(5) b {
    background: #4275b9;
    animation: tm-dot5 1s infinite;
    -webkit-animation: tm-dot5 1s infinite
}

.gear-spin {
    margin: 0 auto
}

.gear-spin,
.gear-spin .gs-cover {
    display: block;
    width: 50px;
    height: 50px
}

.gear-spin .gs-cover {
    position: relative
}

.gear-spin .gs-cover span,
.gear-spin .gs-cover span i.v-icon {
    display: block;
    position: absolute
}

.gear-spin .gs-cover span.gs-first {
    top: 0;
    left: calc(50% - 17px);
    width: 34px;
    height: 34px;
    z-index: 1
}

.gear-spin .gs-cover span.gs-first i.v-icon {
    display: block;
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 17px);
    color: #5d9df4;
    font-size: 34px;
    width: 34px;
    height: 34px;
    animation: gs-rotate1 1.5s infinite;
    -webkit-animation: gs-rotate1 1.5s infinite
}

.gear-spin .gs-cover span.gs-second {
    top: 22px;
    left: -6px;
    width: 28px;
    height: 28px;
    z-index: 1
}

.gear-spin .gs-cover span.gs-second i.v-icon {
    display: block;
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
    color: #4e87d6;
    font-size: 28px;
    width: 28px;
    height: 28px;
    animation: gs-rotate2 1.5s infinite;
    -webkit-animation: gs-rotate2 1.5s infinite
}

.gear-spin .gs-cover span.gs-third {
    top: 25px;
    left: 30px;
    width: 20px;
    height: 20px;
    z-index: 1
}

.gear-spin .gs-cover span.gs-third i.v-icon {
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    color: #4275b9;
    font-size: 20px;
    width: 20px;
    height: 20px;
    animation: gs-rotate3 1.5s infinite;
    -webkit-animation: gs-rotate3 1.5s infinite
}

.gear-spin .gs-cover span.gs-firstshadow {
    top: 3px;
    left: calc(50% - 14px);
    width: 34px;
    height: 34px;
    opacity: .2
}

.gear-spin .gs-cover span.gs-firstshadow i.v-icon {
    display: block;
    position: absolute;
    top: calc(50% - 17px);
    left: calc(50% - 17px);
    font-size: 34px;
    color: #121f3e;
    width: 34px;
    height: 34px;
    animation: gs-rotate1 1.5s infinite;
    -webkit-animation: gs-rotate1 1.5s infinite
}

.gear-spin .gs-cover span.gs-secondshadow {
    top: 25px;
    left: -3px;
    width: 28px;
    height: 28px;
    opacity: .2
}

.gear-spin .gs-cover span.gs-secondshadow i.v-icon {
    display: block;
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
    color: #121f3e;
    font-size: 28px;
    width: 28px;
    height: 28px;
    animation: gs-rotate2 1.5s infinite;
    -webkit-animation: gs-rotate2 1.5s infinite
}

.gear-spin .gs-cover span.gs-thirdshadow {
    top: 28px;
    left: 33px;
    width: 20px;
    height: 20px;
    opacity: .2
}

.gear-spin .gs-cover span.gs-thirdshadow i.v-icon {
    display: block;
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    color: #121f3e;
    font-size: 20px;
    width: 20px;
    height: 20px;
    animation: gs-rotate3 1.5s infinite;
    -webkit-animation: gs-rotate3 1.5s infinite
}

@keyframes dbNumLoading {
    0% {
        content: "0%"
    }

    1% {
        content: "1%"
    }

    2% {
        content: "2%"
    }

    5% {
        content: "5%"
    }

    6% {
        content: "10%"
    }

    10% {
        content: "10%"
    }

    12% {
        content: "12%"
    }

    14% {
        content: "15%"
    }

    15% {
        content: "18%"
    }

    20% {
        content: "18%"
    }

    22% {
        content: "20%"
    }

    30% {
        content: "20%"
    }

    40% {
        content: "30%"
    }

    41% {
        content: "31%"
    }

    42% {
        content: "32%"
    }

    44% {
        content: "34%"
    }

    45% {
        content: "35%"
    }

    46% {
        content: "37%"
    }

    47% {
        content: "39%"
    }

    48% {
        content: "40%"
    }

    49% {
        content: "45%"
    }

    50% {
        content: "50%"
    }

    51% {
        content: "51%"
    }

    52% {
        content: "52%"
    }

    53% {
        content: "55%"
    }

    55% {
        content: "60%"
    }

    75% {
        content: "60%"
    }

    76% {
        content: "64%"
    }

    77% {
        content: "67%"
    }

    78% {
        content: "69%"
    }

    80% {
        content: "74%"
    }

    81% {
        content: "78%"
    }

    86% {
        content: "80%"
    }

    88% {
        content: "90%"
    }

    90% {
        content: "92%"
    }

    91% {
        content: "94%"
    }

    92% {
        content: "95%"
    }

    93% {
        content: "97%"
    }

    99% {
        content: "97%"
    }

    to {
        content: "100%"
    }
}

@-webkit-keyframes dbNumLoading {
    0% {
        content: "0%"
    }

    1% {
        content: "1%"
    }

    2% {
        content: "2%"
    }

    5% {
        content: "5%"
    }

    6% {
        content: "10%"
    }

    10% {
        content: "10%"
    }

    12% {
        content: "12%"
    }

    14% {
        content: "15%"
    }

    15% {
        content: "18%"
    }

    20% {
        content: "18%"
    }

    22% {
        content: "20%"
    }

    30% {
        content: "20%"
    }

    40% {
        content: "30%"
    }

    41% {
        content: "31%"
    }

    42% {
        content: "32%"
    }

    44% {
        content: "34%"
    }

    45% {
        content: "35%"
    }

    46% {
        content: "37%"
    }

    47% {
        content: "39%"
    }

    48% {
        content: "40%"
    }

    49% {
        content: "45%"
    }

    50% {
        content: "50%"
    }

    51% {
        content: "51%"
    }

    52% {
        content: "52%"
    }

    53% {
        content: "55%"
    }

    55% {
        content: "60%"
    }

    75% {
        content: "60%"
    }

    76% {
        content: "64%"
    }

    77% {
        content: "67%"
    }

    78% {
        content: "69%"
    }

    80% {
        content: "74%"
    }

    81% {
        content: "78%"
    }

    86% {
        content: "80%"
    }

    88% {
        content: "90%"
    }

    90% {
        content: "92%"
    }

    91% {
        content: "94%"
    }

    92% {
        content: "95%"
    }

    93% {
        content: "97%"
    }

    99% {
        content: "97%"
    }

    to {
        content: "100%"
    }
}

@keyframes db-dot1 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes db-dot1 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes db-dot2 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes db-dot2 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes db-dot3 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes db-dot3 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes db-dot4 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes db-dot4 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes db-dot5 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes db-dot5 {
    0% {
        background: #d8dce6
    }

    to {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes dl-dot1 {
    0% {
        background: #d8dce6
    }

    5% {
        background: #d8dce6
    }

    10% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    75% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    80% {
        background: #d8dce6
    }
}

@-webkit-keyframes dl-dot1 {
    0% {
        background: #d8dce6
    }

    5% {
        background: #d8dce6
    }

    10% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    75% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    80% {
        background: #d8dce6
    }
}

@keyframes dl-dot2 {
    0% {
        background: #d8dce6
    }

    10% {
        background: #d8dce6
    }

    15% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    80% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    85% {
        background: #d8dce6
    }
}

@-webkit-keyframes dl-dot2 {
    0% {
        background: #d8dce6
    }

    10% {
        background: #d8dce6
    }

    15% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    80% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    85% {
        background: #d8dce6
    }
}

@keyframes dl-dot3 {
    0% {
        background: #d8dce6
    }

    15% {
        background: #d8dce6
    }

    20% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    85% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    90% {
        background: #d8dce6
    }
}

@-webkit-keyframes dl-dot3 {
    0% {
        background: #d8dce6
    }

    15% {
        background: #d8dce6
    }

    20% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    85% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    90% {
        background: #d8dce6
    }
}

@keyframes dl-dot4 {
    0% {
        background: #d8dce6
    }

    20% {
        background: #d8dce6
    }

    25% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    90% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    95% {
        background: #d8dce6
    }
}

@-webkit-keyframes dl-dot4 {
    0% {
        background: #d8dce6
    }

    20% {
        background: #d8dce6
    }

    25% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    90% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    95% {
        background: #d8dce6
    }
}

@keyframes dl-dot5 {
    0% {
        background: #d8dce6
    }

    25% {
        background: #d8dce6
    }

    30% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    95% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    to {
        background: #d8dce6
    }
}

@-webkit-keyframes dl-dot5 {
    0% {
        background: #d8dce6
    }

    25% {
        background: #d8dce6
    }

    30% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    95% {
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }

    to {
        background: #d8dce6
    }
}

@keyframes dfMove {
    0% {
        left: 0;
        background: #5d9df4
    }

    49% {
        left: 148px;
        background: #3d659c
    }

    51% {
        left: 148px;
        background: #3d659c
    }

    to {
        left: 0;
        background: #5d9df4
    }
}

@-webkit-keyframes dfMove {
    0% {
        left: 0;
        background: #5d9df4
    }

    49% {
        left: 148px;
        background: #3d659c
    }

    51% {
        left: 148px;
        background: #3d659c
    }

    to {
        left: 0;
        background: #5d9df4
    }
}

@keyframes df-dot1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

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

    18% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    73% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    88% {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@-webkit-keyframes df-dot1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

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

    18% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    73% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    88% {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@keyframes df-dot2 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

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

    23% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    65% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    80% {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@-webkit-keyframes df-dot2 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

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

    23% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    65% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    80% {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@keyframes df-dot3 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

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

    29% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    60% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    70% {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@-webkit-keyframes df-dot3 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

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

    29% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    60% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    70% {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@keyframes df-dot4 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

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

    36% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    55% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    70% {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@-webkit-keyframes df-dot4 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

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

    36% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    55% {
        transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg)
    }

    70% {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@keyframes df-dot1-color {
    0% {
        background: #5893e4
    }

    8% {
        background: #5893e4
    }

    15% {
        background: #5d9df4
    }

    72% {
        background: #5d9df4
    }

    85% {
        background: #5893e4
    }

    to {
        background: #5893e4
    }
}

@-webkit-keyframes df-dot1-color {
    0% {
        background: #5893e4
    }

    8% {
        background: #5893e4
    }

    15% {
        background: #5d9df4
    }

    72% {
        background: #5d9df4
    }

    85% {
        background: #5893e4
    }

    to {
        background: #5893e4
    }
}

@keyframes df-dot2-color {
    0% {
        background: #4f83cc
    }

    12% {
        background: #4f83cc
    }

    25% {
        background: #5893e4
    }

    67% {
        background: #5893e4
    }

    80% {
        background: #4f83cc
    }

    to {
        background: #4f83cc
    }
}

@-webkit-keyframes df-dot2-color {
    0% {
        background: #4f83cc
    }

    12% {
        background: #4f83cc
    }

    25% {
        background: #5893e4
    }

    67% {
        background: #5893e4
    }

    80% {
        background: #4f83cc
    }

    to {
        background: #4f83cc
    }
}

@keyframes df-dot3-color {
    0% {
        background: #4875b5
    }

    15% {
        background: #4875b5
    }

    28% {
        background: #4f83cc
    }

    60% {
        background: #4f83cc
    }

    73% {
        background: #4875b5
    }

    to {
        background: #4875b5
    }
}

@-webkit-keyframes df-dot3-color {
    0% {
        background: #4875b5
    }

    15% {
        background: #4875b5
    }

    28% {
        background: #4f83cc
    }

    60% {
        background: #4f83cc
    }

    73% {
        background: #4875b5
    }

    to {
        background: #4875b5
    }
}

@keyframes df-dot4-color {
    0% {
        background: #3d659c
    }

    25% {
        background: #3d659c
    }

    38% {
        background: #4875b5
    }

    50% {
        background: #4875b5
    }

    63% {
        background: #3d659c
    }

    to {
        background: #3d659c
    }
}

@-webkit-keyframes df-dot4-color {
    0% {
        background: #3d659c
    }

    25% {
        background: #3d659c
    }

    38% {
        background: #4875b5
    }

    50% {
        background: #4875b5
    }

    63% {
        background: #3d659c
    }

    to {
        background: #3d659c
    }
}

@keyframes dw-dot1 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes dw-dot1 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes dw-dot2 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes dw-dot2 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes dw-dot3 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes dw-dot3 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes dw-dot4 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes dw-dot4 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes dw-dot5 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@-webkit-keyframes dw-dot5 {
    0% {
        width: 18px;
        background: #d8dce6
    }

    to {
        width: 50px;
        background: #5d9df4;
        box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34);
        -webkit-box-shadow: 0 2px 6px 0 rgba(0, 122, 255, .34)
    }
}

@keyframes dwNumLoading {
    0% {
        content: "0%"
    }

    1% {
        content: "1%"
    }

    2% {
        content: "2%"
    }

    5% {
        content: "5%"
    }

    6% {
        content: "10%"
    }

    10% {
        content: "10%"
    }

    12% {
        content: "12%"
    }

    14% {
        content: "15%"
    }

    15% {
        content: "18%"
    }

    20% {
        content: "18%"
    }

    22% {
        content: "20%"
    }

    30% {
        content: "20%"
    }

    40% {
        content: "30%"
    }

    41% {
        content: "31%"
    }

    42% {
        content: "32%"
    }

    44% {
        content: "34%"
    }

    45% {
        content: "35%"
    }

    46% {
        content: "37%"
    }

    47% {
        content: "39%"
    }

    48% {
        content: "40%"
    }

    49% {
        content: "45%"
    }

    50% {
        content: "50%"
    }

    51% {
        content: "51%"
    }

    52% {
        content: "52%"
    }

    53% {
        content: "55%"
    }

    55% {
        content: "60%"
    }

    75% {
        content: "60%"
    }

    76% {
        content: "64%"
    }

    77% {
        content: "67%"
    }

    78% {
        content: "69%"
    }

    80% {
        content: "74%"
    }

    81% {
        content: "78%"
    }

    86% {
        content: "80%"
    }

    88% {
        content: "90%"
    }

    90% {
        content: "92%"
    }

    91% {
        content: "94%"
    }

    92% {
        content: "95%"
    }

    93% {
        content: "97%"
    }

    99% {
        content: "97%"
    }

    to {
        content: "100%"
    }
}

@-webkit-keyframes dwNumLoading {
    0% {
        content: "0%"
    }

    1% {
        content: "1%"
    }

    2% {
        content: "2%"
    }

    5% {
        content: "5%"
    }

    6% {
        content: "10%"
    }

    10% {
        content: "10%"
    }

    12% {
        content: "12%"
    }

    14% {
        content: "15%"
    }

    15% {
        content: "18%"
    }

    20% {
        content: "18%"
    }

    22% {
        content: "20%"
    }

    30% {
        content: "20%"
    }

    40% {
        content: "30%"
    }

    41% {
        content: "31%"
    }

    42% {
        content: "32%"
    }

    44% {
        content: "34%"
    }

    45% {
        content: "35%"
    }

    46% {
        content: "37%"
    }

    47% {
        content: "39%"
    }

    48% {
        content: "40%"
    }

    49% {
        content: "45%"
    }

    50% {
        content: "50%"
    }

    51% {
        content: "51%"
    }

    52% {
        content: "52%"
    }

    53% {
        content: "55%"
    }

    55% {
        content: "60%"
    }

    75% {
        content: "60%"
    }

    76% {
        content: "64%"
    }

    77% {
        content: "67%"
    }

    78% {
        content: "69%"
    }

    80% {
        content: "74%"
    }

    81% {
        content: "78%"
    }

    86% {
        content: "80%"
    }

    88% {
        content: "90%"
    }

    90% {
        content: "92%"
    }

    91% {
        content: "94%"
    }

    92% {
        content: "95%"
    }

    93% {
        content: "97%"
    }

    99% {
        content: "97%"
    }

    to {
        content: "100%"
    }
}

@keyframes tf-left {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: 10px
    }

    20% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: 10px
    }

    28% {
        top: 10px
    }

    30% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
        top: -10px
    }

    31% {
        -webkit-transform: rotateX(96deg);
        transform: rotateX(96deg)
    }

    34% {
        -webkit-transform: rotateX(84deg);
        transform: rotateX(84deg)
    }

    37% {
        -webkit-transform: rotateX(91deg);
        transform: rotateX(91deg)
    }

    39% {
        -webkit-transform: rotateX(89deg);
        transform: rotateX(89deg)
    }

    41% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg)
    }

    62% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
        top: -10px
    }

    72% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: 10px
    }

    73% {
        -webkit-transform: rotateX(-6deg);
        transform: rotateX(-6deg)
    }

    76% {
        -webkit-transform: rotateX(4deg);
        transform: rotateX(4deg)
    }

    80% {
        -webkit-transform: rotateX(-1deg);
        transform: rotateX(-1deg)
    }

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

    to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}

@-webkit-keyframes tf-left {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: 10px
    }

    20% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: 10px
    }

    28% {
        top: 10px
    }

    30% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
        top: -10px
    }

    31% {
        -webkit-transform: rotateX(96deg);
        transform: rotateX(96deg)
    }

    34% {
        -webkit-transform: rotateX(84deg);
        transform: rotateX(84deg)
    }

    37% {
        -webkit-transform: rotateX(91deg);
        transform: rotateX(91deg)
    }

    39% {
        -webkit-transform: rotateX(89deg);
        transform: rotateX(89deg)
    }

    41% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg)
    }

    62% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
        top: -10px
    }

    72% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: 10px
    }

    73% {
        -webkit-transform: rotateX(-6deg);
        transform: rotateX(-6deg)
    }

    76% {
        -webkit-transform: rotateX(4deg);
        transform: rotateX(4deg)
    }

    80% {
        -webkit-transform: rotateX(-1deg);
        transform: rotateX(-1deg)
    }

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

    to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}

@keyframes tf-right {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: -10px
    }

    20% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: -10px
    }

    28% {
        top: -10px
    }

    30% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }

    31% {
        -webkit-transform: rotateX(-96deg);
        transform: rotateX(-96deg)
    }

    34% {
        -webkit-transform: rotateX(-84deg);
        transform: rotateX(-84deg);
        top: -30px
    }

    37% {
        -webkit-transform: rotateX(-91deg);
        transform: rotateX(-91deg)
    }

    39% {
        -webkit-transform: rotateX(-89deg);
        transform: rotateX(-89deg)
    }

    41% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }

    62% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        top: -30px
    }

    72% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: -10px
    }

    73% {
        -webkit-transform: rotateX(6deg);
        transform: rotateX(6deg)
    }

    76% {
        -webkit-transform: rotateX(-4deg);
        transform: rotateX(-4deg)
    }

    80% {
        -webkit-transform: rotateX(1deg);
        transform: rotateX(1deg)
    }

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

    to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}

@-webkit-keyframes tf-right {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: -10px
    }

    20% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: -10px
    }

    28% {
        top: -10px
    }

    30% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }

    31% {
        -webkit-transform: rotateX(-96deg);
        transform: rotateX(-96deg)
    }

    34% {
        -webkit-transform: rotateX(-84deg);
        transform: rotateX(-84deg);
        top: -30px
    }

    37% {
        -webkit-transform: rotateX(-91deg);
        transform: rotateX(-91deg)
    }

    39% {
        -webkit-transform: rotateX(-89deg);
        transform: rotateX(-89deg)
    }

    41% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }

    62% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        top: -30px
    }

    72% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        top: -10px
    }

    73% {
        -webkit-transform: rotateX(6deg);
        transform: rotateX(6deg)
    }

    76% {
        -webkit-transform: rotateX(-4deg);
        transform: rotateX(-4deg)
    }

    80% {
        -webkit-transform: rotateX(1deg);
        transform: rotateX(1deg)
    }

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

    to {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}

@keyframes tl-top {
    0% {
        top: -30px;
        color: #121f3e
    }

    20% {
        color: #5d9df4
    }

    25% {
        top: -450px;
        color: #121f3e
    }

    50% {
        top: -450px;
        color: #121f3e
    }

    70% {
        color: #5d9df4
    }

    75% {
        top: -30px;
        color: #121f3e
    }

    to {
        top: -30px;
        color: #121f3e
    }
}

@-webkit-keyframes tl-top {
    0% {
        top: -30px;
        color: #121f3e
    }

    20% {
        color: #5d9df4
    }

    25% {
        top: -450px;
        color: #121f3e
    }

    50% {
        top: -450px;
        color: #121f3e
    }

    70% {
        color: #5d9df4
    }

    75% {
        top: -30px;
        color: #121f3e
    }

    to {
        top: -30px;
        color: #121f3e
    }
}

@keyframes tl-bottom {
    0% {
        bottom: -330px;
        color: #121f3e
    }

    20% {
        color: #5d9df4
    }

    25% {
        bottom: -570px;
        color: #121f3e
    }

    50% {
        bottom: -570px;
        color: #121f3e
    }

    70% {
        color: #5d9df4
    }

    75% {
        bottom: -330px;
        color: #121f3e
    }

    to {
        bottom: -330px;
        color: #121f3e
    }
}

@-webkit-keyframes tl-bottom {
    0% {
        bottom: -330px;
        color: #121f3e
    }

    20% {
        color: #5d9df4
    }

    25% {
        bottom: -570px;
        color: #121f3e
    }

    50% {
        bottom: -570px;
        color: #121f3e
    }

    70% {
        color: #5d9df4
    }

    75% {
        bottom: -330px;
        color: #121f3e
    }

    to {
        bottom: -330px;
        color: #121f3e
    }
}

@keyframes tm-dot1 {
    0% {
        height: 18px;
        background: #5d9df4
    }

    15% {
        height: 50px
    }

    45% {
        height: 50px;
        background: #4275b9
    }

    60% {
        height: 18px
    }

    to {
        height: 18px;
        background: #5d9df4
    }
}

@-webkit-keyframes tm-dot1 {
    0% {
        height: 18px;
        background: #5d9df4
    }

    15% {
        height: 50px
    }

    45% {
        height: 50px;
        background: #4275b9
    }

    60% {
        height: 18px
    }

    to {
        height: 18px;
        background: #5d9df4
    }
}

@keyframes tm-dot2 {
    0% {
        height: 18px;
        background: #5691e2
    }

    10% {
        height: 18px
    }

    25% {
        height: 50px;
        background: #487ec7
    }

    55% {
        height: 50px
    }

    70% {
        height: 18px;
        background: #5691e2
    }

    to {
        height: 18px
    }
}

@-webkit-keyframes tm-dot2 {
    0% {
        height: 18px;
        background: #5691e2
    }

    10% {
        height: 18px
    }

    25% {
        height: 50px;
        background: #487ec7
    }

    55% {
        height: 50px
    }

    70% {
        height: 18px;
        background: #5691e2
    }

    to {
        height: 18px
    }
}

@keyframes tm-dot3 {
    0% {
        height: 18px
    }

    20% {
        height: 18px
    }

    35% {
        height: 50px
    }

    65% {
        height: 50px
    }

    80% {
        height: 18px
    }

    to {
        height: 18px
    }
}

@-webkit-keyframes tm-dot3 {
    0% {
        height: 18px
    }

    20% {
        height: 18px
    }

    35% {
        height: 50px
    }

    65% {
        height: 50px
    }

    80% {
        height: 18px
    }

    to {
        height: 18px
    }
}

@keyframes tm-dot4 {
    0% {
        height: 18px;
        background: #487ec7
    }

    30% {
        height: 18px
    }

    45% {
        height: 50px;
        background: #5691e2
    }

    75% {
        height: 50px
    }

    90% {
        height: 18px;
        background: #487ec7
    }

    to {
        height: 18px
    }
}

@-webkit-keyframes tm-dot4 {
    0% {
        height: 18px;
        background: #487ec7
    }

    30% {
        height: 18px
    }

    45% {
        height: 50px;
        background: #5691e2
    }

    75% {
        height: 50px
    }

    90% {
        height: 18px;
        background: #487ec7
    }

    to {
        height: 18px
    }
}

@keyframes tm-dot5 {
    0% {
        height: 18px;
        background: #4275b9
    }

    40% {
        height: 18px
    }

    55% {
        height: 50px;
        background: #5d9df4
    }

    85% {
        height: 50px
    }

    to {
        background: #4275b9
    }

    to {
        height: 18px
    }
}

@-webkit-keyframes tm-dot5 {
    0% {
        height: 18px;
        background: #4275b9
    }

    40% {
        height: 18px
    }

    55% {
        height: 50px;
        background: #5d9df4
    }

    85% {
        height: 50px
    }

    to {
        background: #4275b9
    }

    to {
        height: 18px
    }
}

@keyframes gs-rotate1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn);
        -webkit-transform: rotate(1turn)
    }
}

@-webkit-keyframes gs-rotate1 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn);
        -webkit-transform: rotate(1turn)
    }
}

@keyframes gs-rotate2 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@-webkit-keyframes gs-rotate2 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@keyframes gs-rotate3 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}

@-webkit-keyframes gs-rotate3 {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn);
        -webkit-transform: rotate(-1turn)
    }
}