.ldBar{display: flex;align-items: center;justify-content: center;position: absolute;right: 47.5%;top: -5%;height: 100% !important;}
.ldBar.label-center > .ldBar-label{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-shadow:0 0 3px #000}
.ldBar-label{margin:auto;font-size: 14px;letter-spacing: 1px;font-weight: 700;}
.ldBar-label:after{content:"%";display:inline}
.ldBar.no-percent .ldBar-label:after{content:""}
.ldBar svg{margin-bottom:20px !important;display: none;}


#loading-txt {color: #fff;font-size: 24px;}
#loading-txt .word {margin: 0 2.5px;filter: blur(0px);animation: blur-text 1.5s infinite linear alternate;}
.loadingLogo{width: 70px;display: flex;align-items: center;justify-content: center;position: relative;bottom: -35px;}
.loading-wrapper {width: 100%;height: 100%;position: fixed;top: 0;display: flex;flex-direction: column;align-items: center;color: #fff;font-size: 18px;letter-spacing: 10px;text-align: center;overflow: hidden;
                  z-index: 1000;background:url(../img/usr/bg-loadingscreen.jpg) no-repeat center;visibility: visible;opacity: 1;}
.loading-animated {-webkit-animation-duration: 2s;-webkit-animation-fill-mode: both;animation-duration: 2s;animation-fill-mode: both;}
#loading-screen__title.loading {animation-duration: 1.5s;animation-timing-function: ease;animation-iteration-count: infinite;animation-direction: alternate;}
#loading-screen__title svg {margin-bottom: 40px;}
#loading-screen__title .cls-1 {fill: none;stroke: #fff;stroke-width: 30px;}
#loading-screen__title .cls-1, #loading-screen__title .cls-2 {fill-rule: evenodd;}
#loading-screen__title .cls-2, #loading-screen__title .cls-3 {fill: #fff;}
#loading-screen__title .cls-3 {font-size: 183.333px;font-family: "Century Gothic", sans-serif;font-style: italic;}
@-webkit-keyframes text-focus-in {
    0% {-webkit-filter: blur(12px);filter: blur(12px);opacity: 0;}
    100% {-webkit-filter: blur(0px);filter: blur(0px);opacity: 1;}
}
@keyframes text-focus-in {
    0% {-webkit-filter: blur(12px);filter: blur(12px);opacity: 0;}
    100% {-webkit-filter: blur(0px);filter: blur(0px);opacity: 1;}
}
@keyframes blur-text {
    0% {filter: blur(0px); }
    100% {filter: blur(4px);}
}
.lock{background: url(../img/usr/img-loadingscreen-lock-close.png) no-repeat center;display: flex;align-items: center;justify-content: center;height: 100%;width: 130px;position: absolute;right: 47%;}


/*loading animation*/    
#hud {
    height: 100%;
    max-height: 600px;
    max-width: 600px;
    z-index: 1;
    left: 50%;
    position: fixed;
    top: 50%;
    width: 100%;
    -webkit-transition: all 1s ease-in-out;
    -sand-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
    -sand-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    #hud.active {
        -webkit-transform: translate(-50%, -50%);
        -sand-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #hud.loading {
        -webkit-transition: all 0.5s ease-in-out;
        -sand-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-transform: translate(-50%, -50%) scale(0.5);
        -sand-transform: translate(-50%, -50%) scale(0.5);
        -moz-transform: translate(-50%, -50%) scale(0.5);
        -ms-transform: translate(-50%, -50%) scale(0.5);
        -o-transform: translate(-50%, -50%) scale(0.5);
        transform: translate(-50%, -50%) scale(0.5);
    }

        #hud.loading svg {
            -webkit-transform-origin: 50% 50%;
            -sand-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-animation: hud_spin_counter_clockwise 3s infinite linear;
            -sand-animation: hud_spin_counter_clockwise 3s infinite linear;
            -moz-animation: hud_spin_counter_clockwise 3s infinite linear;
            -ms-animation: hud_spin_counter_clockwise 3s infinite linear;
            -o-animation: hud_spin_counter_clockwise 3s infinite linear;
            animation: hud_spin_counter_clockwise 3s infinite linear;
        }

            #hud.loading svg .hatching {
                opacity: 0;
                -webkit-animation: none;
                -sand-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                -o-animation: none;
                animation: none;
            }

            #hud.loading svg .outer-ring {
                -webkit-animation: none;
                -sand-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                -o-animation: none;
                animation: none;
            }

            #hud.loading svg .inner-ring,
            #hud.loading svg .trace {
                stroke-width: 6 !important;
            }

            #hud.loading svg .inner-ring {
                -webkit-animation: hud_spin_clockwise 1s infinite linear;
                -sand-animation: hud_spin_clockwise 1s infinite linear;
                -moz-animation: hud_spin_clockwise 1s infinite linear;
                -ms-animation: hud_spin_clockwise 1s infinite linear;
                -o-animation: hud_spin_clockwise 1s infinite linear;
                animation: hud_spin_clockwise 1s infinite linear;
            }

    #hud.exploded {
        opacity: 0;
        -webkit-transition: all 0.5s ease-in-out;
        -sand-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-transform: translate(-50%, -50%) scale(2.5);
        -sand-transform: translate(-50%, -50%) scale(2.5);
        -moz-transform: translate(-50%, -50%) scale(2.5);
        -ms-transform: translate(-50%, -50%) scale(2.5);
        -o-transform: translate(-50%, -50%) scale(2.5);
        transform: translate(-50%, -50%) scale(2.5);
    }

        #hud.exploded svg {
            -webkit-transform-origin: 50% 50%;
            -sand-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
        }

    #hud.hidden:before {
        opacity: 0;
    }

    #hud.hidden svg .hatching,
    #hud.hidden svg .glow-img,
    #hud.hidden svg .glow-img-inner,
    #hud.hidden svg .outer-ring-blue,
    #hud.hidden svg .outer-ring-red,
    #hud.hidden svg .inner-ring {
        -webkit-animation: none;
        -sand-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        -o-animation: none;
        animation: none;
    }

    #hud:before {
        content: " ";
        top: 50%;
        left: 50%;
        height: 1px;
        position: absolute;
        width: 1px;
        -webkit-transition: all 0.5s ease-in-out;
        -sand-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-box-shadow: 0 0 1000px 200px rgba(70, 131, 176, 0.3);
        -sand-box-shadow: 0 0 1000px 200px rgba(70, 131, 176, 0.3);
        -moz-box-shadow: 0 0 1000px 200px rgba(70, 131, 176, 0.3);
        -ms-box-shadow: 0 0 1000px 200px rgba(70, 131, 176, 0.3);
        -o-box-shadow: 0 0 1000px 200px rgba(70, 131, 176, 0.3);
        box-shadow: 0 0 1000px 200px rgba(70, 131, 176, 0.3);
    }

    #hud svg {
        opacity: 1;
        overflow: visible;
        -webkit-transform-origin: 50% 50%;
        -sand-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transition: all 0.5s ease-in-out;
        -sand-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

        #hud svg .hatching {
            opacity: 0.4;
            fill: #fff;
            enable-background: new;
            -webkit-transform-origin: 50% 50%;
            -sand-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-transform: translate(1px, 0);
            -sand-transform: translate(1px, 0);
            -moz-transform: translate(1px, 0);
            -ms-transform: translate(1px, 0);
            -o-transform: translate(1px, 0);
            transform: translate(1px, 0);
            -webkit-animation: hud_pulsate 2s infinite ease-in-out;
            -sand-animation: hud_pulsate 2s infinite ease-in-out;
            -moz-animation: hud_pulsate 2s infinite ease-in-out;
            -ms-animation: hud_pulsate 2s infinite ease-in-out;
            -o-animation: hud_pulsate 2s infinite ease-in-out;
            animation: hud_pulsate 2s infinite ease-in-out;
        }

        #hud svg .glow-img {
            -webkit-transform-origin: 50% 50%;
            -sand-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-transform: scale(1.07);
            -sand-transform: scale(1.07);
            -moz-transform: scale(1.07);
            -ms-transform: scale(1.07);
            -o-transform: scale(1.07);
            transform: scale(1.07);
        }

        #hud svg .glow-img-inner {
            -webkit-transform: scale(0.94);
            -sand-transform: scale(0.94);
            -moz-transform: scale(0.94);
            -ms-transform: scale(0.94);
            -o-transform: scale(0.94);
            transform: scale(0.94);
        }

        #hud svg .outer-ring-blue {
            -webkit-transform-origin: 50% 50%;
            -sand-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-transform: translate(1px, 0);
            -sand-transform: translate(1px, 0);
            -moz-transform: translate(1px, 0);
            -ms-transform: translate(1px, 0);
            -o-transform: translate(1px, 0);
            transform: translate(1px, 0);
            -webkit-animation: hud_spin_clockwise 20s infinite linear;
            -sand-animation: hud_spin_clockwise 20s infinite linear;
            -moz-animation: hud_spin_clockwise 20s infinite linear;
            -ms-animation: hud_spin_clockwise 20s infinite linear;
            -o-animation: hud_spin_clockwise 20s infinite linear;
            animation: hud_spin_clockwise 20s infinite linear;
        }

            #hud svg .outer-ring-blue .trace {
                opacity: 0.5;
                fill: none;
                stroke: #ffffff;
                stroke-width: 1.5;
                enable-background: new;
            }

            #hud svg .outer-ring-blue .glow {
                fill: none;
                stroke: #d9b664;
                stroke-width: 9.5;
                -webkit-animation: hud_fade 2s infinite linear;
                -sand-animation: hud_fade 2s infinite linear;
                -moz-animation: hud_fade 2s infinite linear;
                -ms-animation: hud_fade 2s infinite linear;
                -o-animation: hud_fade 2s infinite linear;
                animation: hud_fade 2s infinite linear;
            }

        #hud svg .outer-ring-red {
            -webkit-transform-origin: 50% 50%;
            -sand-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-transform: translate(1px, 0);
            -sand-transform: translate(1px, 0);
            -moz-transform: translate(1px, 0);
            -ms-transform: translate(1px, 0);
            -o-transform: translate(1px, 0);
            transform: translate(1px, 0);
            -webkit-animation: hud_spin_counter_clockwise 10s infinite linear;
            -sand-animation: hud_spin_counter_clockwise 10s infinite linear;
            -moz-animation: hud_spin_counter_clockwise 10s infinite linear;
            -ms-animation: hud_spin_counter_clockwise 10s infinite linear;
            -o-animation: hud_spin_counter_clockwise 10s infinite linear;
            animation: hud_spin_counter_clockwise 10s infinite linear;
            -webkit-animation-delay: -1s;
            -sand-animation-delay: -1s;
            -moz-animation-delay: -1s;
            -ms-animation-delay: -1s;
            -o-animation-delay: -1s;
            animation-delay: -1s;
        }

            #hud svg .outer-ring-red .trace {
                opacity: 0.5;
                fill: none;
                stroke: #ffffff;
                stroke-width: 1.5;
                enable-background: new;
            }

            #hud svg .outer-ring-red .glow {
                fill: none;
                stroke: #ff4345;
                stroke-width: 9.5;
                -webkit-transform: translate(1px, 0);
                -sand-transform: translate(1px, 0);
                -moz-transform: translate(1px, 0);
                -ms-transform: translate(1px, 0);
                -o-transform: translate(1px, 0);
                transform: translate(1px, 0);
                -webkit-animation: hud_flicker 2s infinite linear;
                -sand-animation: hud_flicker 2s infinite linear;
                -moz-animation: hud_flicker 2s infinite linear;
                -ms-animation: hud_flicker 2s infinite linear;
                -o-animation: hud_flicker 2s infinite linear;
                animation: hud_flicker 2s infinite linear;
                -webkit-animation-delay: -1s;
                -sand-animation-delay: -1s;
                -moz-animation-delay: -1s;
                -ms-animation-delay: -1s;
                -o-animation-delay: -1s;
                animation-delay: -1s;
            }

        #hud svg .inner-ring {
            opacity: 0.5;
            fill: none;
            stroke: #fff;
            enable-background: new;
            -webkit-transform-origin: 50% 50%;
            -sand-transform-origin: 50% 50%;
            -moz-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
            -o-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-transform: translate(1px, 0);
            -sand-transform: translate(1px, 0);
            -moz-transform: translate(1px, 0);
            -ms-transform: translate(1px, 0);
            -o-transform: translate(1px, 0);
            transform: translate(1px, 0);
            -webkit-animation: hud_wind_release 4s infinite ease-out;
            -sand-animation: hud_wind_release 4s infinite ease-out;
            -moz-animation: hud_wind_release 4s infinite ease-out;
            -ms-animation: hud_wind_release 4s infinite ease-out;
            -o-animation: hud_wind_release 4s infinite ease-out;
            animation: hud_wind_release 4s infinite ease-out;
        }

    #hud.disabled, #hud.hidden {
        display: block;
        z-index: -1;
    }

        #hud.disabled svg, #hud.hidden svg {
            opacity: 0;
            -webkit-transform: scale(0) rotate(-180deg);
            -sand-transform: scale(0) rotate(-180deg);
            -moz-transform: scale(0) rotate(-180deg);
            -ms-transform: scale(0) rotate(-180deg);
            -o-transform: scale(0) rotate(-180deg);
            transform: scale(0) rotate(-180deg);
        }

    #hud.spin-in svg {
        opacity: 0;
        -webkit-transform: scale(0) rotate(-180deg);
        -sand-transform: scale(0) rotate(-180deg);
        -moz-transform: scale(0) rotate(-180deg);
        -ms-transform: scale(0) rotate(-180deg);
        -o-transform: scale(0) rotate(-180deg);
        transform: scale(0) rotate(-180deg);
    }

    #hud.spin-out svg {
        opacity: 0;
        -webkit-transform: scale(3) rotate(-180deg);
        -sand-transform: scale(3) rotate(-180deg);
        -moz-transform: scale(3) rotate(-180deg);
        -ms-transform: scale(3) rotate(-180deg);
        -o-transform: scale(3) rotate(-180deg);
        transform: scale(3) rotate(-180deg);
    }

.st0 {
    opacity: 0.4;
    fill: #ffffff;
    enable-background: new;
}

.st1 {
    fill: none;
}

.st2 {
    opacity: 0.5;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.5;
    enable-background: new;
}

.st3 {
    fill: none;
    stroke: #11a6fd;
    stroke-width: 9.5;
}

.st4 {
    fill: none;
    stroke: #e23528;
    stroke-width: 9.5;
}

.st5 {
    opacity: 0.5;
    fill: none;
    stroke: #ffffff;
    enable-background: new;
}

@-webkit-keyframes hud_flicker {
    10% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

@-moz-keyframes hud_flicker {
    10% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

@-ms-keyframes hud_flicker {
    10% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

@keyframes hud_flicker {
    10% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

@-webkit-keyframes hud_fade {
    50% {
        opacity: 0.5;
    }
}

@-moz-keyframes hud_fade {
    50% {
        opacity: 0.5;
    }
}

@-ms-keyframes hud_fade {
    50% {
        opacity: 0.5;
    }
}

@keyframes hud_fade {
    50% {
        opacity: 0.5;
    }
}

@-webkit-keyframes hud_pulsate {
    50% {
        -webkit-transform: scale(0.95);
        -sand-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        -o-transform: scale(0.95);
        transform: scale(0.95);
    }
}

@-moz-keyframes hud_pulsate {
    50% {
        -webkit-transform: scale(0.95);
        -sand-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        -o-transform: scale(0.95);
        transform: scale(0.95);
    }
}

@-ms-keyframes hud_pulsate {
    50% {
        -webkit-transform: scale(0.95);
        -sand-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        -o-transform: scale(0.95);
        transform: scale(0.95);
    }
}

@keyframes hud_pulsate {
    50% {
        -webkit-transform: scale(0.95);
        -sand-transform: scale(0.95);
        -moz-transform: scale(0.95);
        -ms-transform: scale(0.95);
        -o-transform: scale(0.95);
        transform: scale(0.95);
    }
}

@-webkit-keyframes hud_spin_clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -sand-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(-360deg);
        -sand-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-moz-keyframes hud_spin_clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -sand-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(-360deg);
        -sand-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-ms-keyframes hud_spin_clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -sand-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(-360deg);
        -sand-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes hud_spin_clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -sand-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(-360deg);
        -sand-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes hud_spin_counter_clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -sand-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(360deg);
        -sand-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes hud_spin_counter_clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -sand-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(360deg);
        -sand-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes hud_spin_counter_clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -sand-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(360deg);
        -sand-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes hud_spin_counter_clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        -sand-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        bottom: 0;
        -webkit-transform: rotate(360deg);
        -sand-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes hud_wind_release {
    90% {
        -webkit-transform: scale(0.8) rotate(210deg);
        -sand-transform: scale(0.8) rotate(210deg);
        -moz-transform: scale(0.8) rotate(210deg);
        -ms-transform: scale(0.8) rotate(210deg);
        -o-transform: scale(0.8) rotate(210deg);
        transform: scale(0.8) rotate(210deg);
    }
}

@-moz-keyframes hud_wind_release {
    90% {
        -webkit-transform: scale(0.8) rotate(210deg);
        -sand-transform: scale(0.8) rotate(210deg);
        -moz-transform: scale(0.8) rotate(210deg);
        -ms-transform: scale(0.8) rotate(210deg);
        -o-transform: scale(0.8) rotate(210deg);
        transform: scale(0.8) rotate(210deg);
    }
}

@-ms-keyframes hud_wind_release {
    90% {
        -webkit-transform: scale(0.8) rotate(210deg);
        -sand-transform: scale(0.8) rotate(210deg);
        -moz-transform: scale(0.8) rotate(210deg);
        -ms-transform: scale(0.8) rotate(210deg);
        -o-transform: scale(0.8) rotate(210deg);
        transform: scale(0.8) rotate(210deg);
    }
}

@keyframes hud_wind_release {
    90% {
        -webkit-transform: scale(0.8) rotate(210deg);
        -sand-transform: scale(0.8) rotate(210deg);
        -moz-transform: scale(0.8) rotate(210deg);
        -ms-transform: scale(0.8) rotate(210deg);
        -o-transform: scale(0.8) rotate(210deg);
        transform: scale(0.8) rotate(210deg);
    }
}

.movement {
    bottom: 30px;
    position: fixed;
    left: 100px;
}

    .movement li {
        display: inline-block;
    }
/*end loading animation*/