.cssload-container {
    width: 240px;
    margin: 0 auto;
}

.cssload-circle-1 {
    height: 240px;
    width: 240px;
    background: rgb(97,46,141);
}

.cssload-circle-2 {
    height: 200px;
    width: 200px;
    background: rgb(194,34,134);
}

.cssload-circle-3 {
    height: 160px;
    width: 160px;
    background: rgb(234,34,94);
}

.cssload-circle-4 {
    height: 120px;
    width: 120px;
    background: rgb(237,91,53);
}

.cssload-circle-5 {
    height: 80px;
    width: 80px;
    background: rgb(245,181,46);
}

.cssload-circle-6 {
    height: 40px;
    width: 40px;
    background: rgb(129,197,64);
}

.cssload-circle-7 {
    height: 20px;
    width: 20px;
    background: rgb(0,163,150);
}

.cssload-circle-8 {
    height: 10px;
    width: 10px;
    background: rgb(22,116,188);
}

.cssload-circle-1,
.cssload-circle-2,
.cssload-circle-3,
.cssload-circle-4,
.cssload-circle-5,
.cssload-circle-6,
.cssload-circle-7,
.cssload-circle-8 {
    border-bottom: none;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    -o-box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    -ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    animation-name: cssload-spin;
    -o-animation-name: cssload-spin;
    -ms-animation-name: cssload-spin;
    -webkit-animation-name: cssload-spin;
    -moz-animation-name: cssload-spin;
    animation-duration: 2800ms;
    -o-animation-duration: 2800ms;
    -ms-animation-duration: 2800ms;
    -webkit-animation-duration: 2800ms;
    -moz-animation-duration: 2800ms;
    animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}



@keyframes cssload-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-spin {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

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

@-moz-keyframes cssload-spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}


.cssload-jar {
    position: relative;
    width: 195px;
    margin: 49px auto 0;
    text-align: center;
}
.cssload-jar .cssload-mouth {
    width: 39px;
    height: 10px;
    margin: 0 auto -1px;
    border-right: 4px solid rgb(0,0,0);
    border-left: 4px solid rgb(0,0,0);
    border-radius: 19px;
    -o-border-radius: 19px;
    -ms-border-radius: 19px;
    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;
}
.cssload-jar .cssload-neck {
    width: 34px;
    height: 46px;
    margin: 0 auto -7px;
    z-index: 7;
    position: relative;
    background-color: rgb(255,255,255);
    border-right: 4px solid rgb(0,0,0);
    border-left: 4px solid rgb(0,0,0);
}
.cssload-jar .cssload-bubble {
    width: 10px;
    height: 10px;
    position: absolute;
    background-color: rgb(53,238,251);
    opacity: 0.4;
    left: 90px;
    z-index: 8;
    top: 107px;
    border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    animation: cssload-buble 1.3s linear 0.65s infinite;
    -o-animation: cssload-buble 1.3s linear 0.65s infinite;
    -ms-animation: cssload-buble 1.3s linear 0.65s infinite;
    -webkit-animation: cssload-buble 1.3s linear 0.65s infinite;
    -moz-animation: cssload-buble 1.3s linear 0.65s infinite;
}
.cssload-jar .cssload-bubble + .cssload-bubble {
    left: 85px;
    top: 117px;
    width: 15px;
    height: 15px;
    animation-duration: 1.95s;
    -o-animation-duration: 1.95s;
    -ms-animation-duration: 1.95s;
    -webkit-animation-duration: 1.95s;
    -moz-animation-duration: 1.95s;
}
.cssload-jar .cssload-base {
    margin: auto;
    width: 117px;
    height: 97px;
    border: 4px solid rgb(0,0,0);
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 5;
}
.cssload-jar .cssload-base .cssload-bubble {
    left: 15px;
    top: 49px;
    animation: cssload-bounce 1.495s linear 0s infinite alternate;
    -o-animation: cssload-bounce 1.495s linear 0s infinite alternate;
    -ms-animation: cssload-bounce 1.495s linear 0s infinite alternate;
    -webkit-animation: cssload-bounce 1.495s linear 0s infinite alternate;
    -moz-animation: cssload-bounce 1.495s linear 0s infinite alternate;
}
.cssload-jar .cssload-base .cssload-bubble + .cssload-bubble {
    left: 73px;
    top: 39px;
    animation-duration: 1.95s;
    -o-animation-duration: 1.95s;
    -ms-animation-duration: 1.95s;
    -webkit-animation-duration: 1.95s;
    -moz-animation-duration: 1.95s;
}
.cssload-jar .cssload-liquid {
    height: 39px;
    background-color: rgb(53,238,251);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.cssload-jar .cssload-wave {
    width: 58px;
    height: 19px;
    position: absolute;
    background-color: rgb(53,238,251);
    left: 0;
    top: 56px;
    animation: cssload-wave 0.65s linear 0.65s infinite alternate;
    -o-animation: cssload-wave 0.65s linear 0.65s infinite alternate;
    -ms-animation: cssload-wave 0.65s linear 0.65s infinite alternate;
    -webkit-animation: cssload-wave 0.65s linear 0.65s infinite alternate;
    -moz-animation: cssload-wave 0.65s linear 0.65s infinite alternate;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
.cssload-jar .cssload-wave + .cssload-wave {
    left: auto;
    right: 0;
}







@keyframes cssload-wave {
    from {
        transform: translateX(97px);
    }
    to {
        transform: translateX(-97px);
    }
}

@-o-keyframes cssload-wave {
    from {
        -o-transform: translateX(97px);
    }
    to {
        -o-transform: translateX(-97px);
    }
}

@-ms-keyframes cssload-wave {
    from {
        -ms-transform: translateX(97px);
    }
    to {
        -ms-transform: translateX(-97px);
    }
}

@-webkit-keyframes cssload-wave {
    from {
        -webkit-transform: translateX(97px);
    }
    to {
        -webkit-transform: translateX(-97px);
    }
}

@-moz-keyframes cssload-wave {
    from {
        -moz-transform: translateX(97px);
    }
    to {
        -moz-transform: translateX(-97px);
    }
}

@keyframes cssload-bounce {
    0% {
        transform: translate(5px, 15px);
    }
    50% {
        transform: translate(0, -15px);
    }
    100% {
        transform: translate(-5px, -36px);
        opacity: 1;
    }
}

@-o-keyframes cssload-bounce {
    0% {
        -o-transform: translate(5px, 15px);
    }
    50% {
        -o-transform: translate(0, -15px);
    }
    100% {
        -o-transform: translate(-5px, -36px);
        opacity: 1;
    }
}

@-ms-keyframes cssload-bounce {
    0% {
        -ms-transform: translate(5px, 15px);
    }
    50% {
        -ms-transform: translate(0, -15px);
    }
    100% {
        -ms-transform: translate(-5px, -36px);
        opacity: 1;
    }
}

@-webkit-keyframes cssload-bounce {
    0% {
        -webkit-transform: translate(5px, 15px);
    }
    50% {
        -webkit-transform: translate(0, -15px);
    }
    100% {
        -webkit-transform: translate(-5px, -36px);
        opacity: 1;
    }
}

@-moz-keyframes cssload-bounce {
    0% {
        -moz-transform: translate(5px, 15px);
    }
    50% {
        -moz-transform: translate(0, -15px);
    }
    100% {
        -moz-transform: translate(-5px, -36px);
        opacity: 1;
    }
}

@keyframes cssload-buble {
    0% {
        transform: translate(3px, 10px);
    }
    25% {
        transform: translate(0, 0px);
    }
    50% {
        transform: translate(-3px, -24px);
    }
    75% {
        transform: translate(0, -49px);
        opacity: 1;
    }
    100% {
        transform: translate(3px, -97px);
        opacity: 0;
    }
}

@-o-keyframes cssload-buble {
    0% {
        -o-transform: translate(3px, 10px);
    }
    25% {
        -o-transform: translate(0, 0px);
    }
    50% {
        -o-transform: translate(-3px, -24px);
    }
    75% {
        -o-transform: translate(0, -49px);
        opacity: 1;
    }
    100% {
        -o-transform: translate(3px, -97px);
        opacity: 0;
    }
}

@-ms-keyframes cssload-buble {
    0% {
        -ms-transform: translate(3px, 10px);
    }
    25% {
        -ms-transform: translate(0, 0px);
    }
    50% {
        -ms-transform: translate(-3px, -24px);
    }
    75% {
        -ms-transform: translate(0, -49px);
        opacity: 1;
    }
    100% {
        -ms-transform: translate(3px, -97px);
        opacity: 0;
    }
}

@-webkit-keyframes cssload-buble {
    0% {
        -webkit-transform: translate(3px, 10px);
    }
    25% {
        -webkit-transform: translate(0, 0px);
    }
    50% {
        -webkit-transform: translate(-3px, -24px);
    }
    75% {
        -webkit-transform: translate(0, -49px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(3px, -97px);
        opacity: 0;
    }
}

@-moz-keyframes cssload-buble {
    0% {
        -moz-transform: translate(3px, 10px);
    }
    25% {
        -moz-transform: translate(0, 0px);
    }
    50% {
        -moz-transform: translate(-3px, -24px);
    }
    75% {
        -moz-transform: translate(0, -49px);
        opacity: 1;
    }
    100% {
        -moz-transform: translate(3px, -97px);
        opacity: 0;
    }
}


#cssload-contain {
    width: 263px;
    height: 88px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
    animation: fadeIn 1.75s 1;
    -o-animation: fadeIn 1.75s 1;
    -ms-animation: fadeIn 1.75s 1;
    -webkit-animation: fadeIn 1.75s 1;
    -moz-animation: fadeIn 1.75s 1;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

.cssload-wrap {
    animation: translate 1750ms infinite ease-in-out alternate, zindex 3500ms infinite ease-in-out;
    -o-animation: translate 1750ms infinite ease-in-out alternate, zindex 3500ms infinite ease-in-out;
    -ms-animation: translate 1750ms infinite ease-in-out alternate, zindex 3500ms infinite ease-in-out;
    -webkit-animation: translate 1750ms infinite ease-in-out alternate, zindex 3500ms infinite ease-in-out;
    -moz-animation: translate 1750ms infinite ease-in-out alternate, zindex 3500ms infinite ease-in-out;
    position: absolute;
}

.cssload-ball {
    width: 88px;
    height: 88px;
    box-shadow: 0 -11.25px 0 rgba(0,0,0,0.15) inset;
    background-color: rgb(227,116,107);
    border-radius: 50%;
    animation: scale 1750ms infinite ease-in-out alternate;
    -o-animation: scale 1750ms infinite ease-in-out alternate;
    -ms-animation: scale 1750ms infinite ease-in-out alternate;
    -webkit-animation: scale 1750ms infinite ease-in-out alternate;
    -moz-animation: scale 1750ms infinite ease-in-out alternate;
    animation-delay: -875ms;
    -o-animation-delay: -875ms;
    -ms-animation-delay: -875ms;
    -webkit-animation-delay: -875ms;
    -moz-animation-delay: -875ms;
    transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    border: 4px solid black;
}

.cssload-ball:after {
    content: "";
    width: 88px;
    height: 23px;
    background: rgb(238,238,238);
    position: absolute;
    top: 123px;
    border-radius: 50%;
}

#cssload-wrap2 {
    animation-delay: -1750ms;
    -o-animation-delay: -1750ms;
    -ms-animation-delay: -1750ms;
    -webkit-animation-delay: -1750ms;
    -moz-animation-delay: -1750ms;
}

#cssload-ball2 {
    background-color: rgb(57,123,249);
    animation-delay: -2625ms;
    -o-animation-delay: -2625ms;
    -ms-animation-delay: -2625ms;
    -webkit-animation-delay: -2625ms;
    -moz-animation-delay: -2625ms;
}

#cssload-wrap3 {
    animation-delay: -2625ms;
    -o-animation-delay: -2625ms;
    -ms-animation-delay: -2625ms;
    -webkit-animation-delay: -2625ms;
    -moz-animation-delay: -2625ms;
}

#cssload-ball3 {
    background-color: rgb(244,180,0);
    animation-delay: -3500ms;
}

#cssload-wrap4 {
    animation-delay: -4375ms;
    -o-animation-delay: -4375ms;
    -ms-animation-delay: -4375ms;
    -webkit-animation-delay: -4375ms;
    -moz-animation-delay: -4375ms;
}

#cssload-ball4 {
    background-color: rgb(15,157,88);
    animation-delay: -5250ms;
    -o-animation-delay: -5250ms;
    -ms-animation-delay: -5250ms;
    -webkit-animation-delay: -5250ms;
    -moz-animation-delay: -5250ms;
}






@keyframes translate {
    100% {
        transform: translateX(175px);
    }
}

@-o-keyframes translate {
    100% {
        -o-transform: translateX(175px);
    }
}

@-ms-keyframes translate {
    100% {
        -ms-transform: translateX(175px);
    }
}

@-webkit-keyframes translate {
    100% {
        -webkit-transform: translateX(175px);
    }
}

@-moz-keyframes translate {
    100% {
        -moz-transform: translateX(175px);
    }
}

@keyframes scale {
    100% {
        transform: scale(1);
    }
}

@-o-keyframes scale {
    100% {
        -o-transform: scale(1);
    }
}

@-ms-keyframes scale {
    100% {
        -ms-transform: scale(1);
    }
}

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

@-moz-keyframes scale {
    100% {
        -moz-transform: scale(1);
    }
}

@keyframes zindex {
    25% {
        z-index: 1;
    }
    75% {
        z-index: -1;
    }
}

@-o-keyframes zindex {
    25% {
        z-index: 1;
    }
    75% {
        z-index: -1;
    }
}

@-ms-keyframes zindex {
    25% {
        z-index: 1;
    }
    75% {
        z-index: -1;
    }
}

@-webkit-keyframes zindex {
    25% {
        z-index: 1;
    }
    75% {
        z-index: -1;
    }
}

@-moz-keyframes zindex {
    25% {
        z-index: 1;
    }
    75% {
        z-index: -1;
    }
}

@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    100% {
        opacity: 1;
    }
}