#preloader {

    visibility:visible !important;
}

.circleProgress_wrapper {
    padding:0px !important;
    position: relative;
    width: 3rem;
    height: 3rem;
    margin: .5rem auto;
    text-align: center;
    line-height: 3rem;
    float:right;
}

.right {
    right: 0;
}

.wrapper-c {
    position: absolute;
    width: 1.5rem;
    height: 3rem;
    top: 0;
    overflow: hidden;
}

.circleProgress {
    width: 2.2rem;
    height: 2.2rem;
    border: .4rem solid #f1f1f1;
    border-radius: 50%;
    box-sizing: content-box;
    position: absolute;
    top: 0;
}

.rightcircle {
    border-top: .4rem solid #182acd;
    border-right: .4rem solid #182acd;
    right: 0;
}

.leftcircle {
    border-bottom: .4rem solid #1db207;
    border-left: .4rem solid #1db207;
    left: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}
.right_cartoon {
    -webkit-animation: circleProgressLoad_right 2s ease-in infinite forwards;
    animation: circleProgressLoad_right 2s ease-in infinite forwards;
}

.left_cartoon {
    -webkit-animation: circleProgressLoad_left 2s ease-in infinite forwards;
    animation: circleProgressLoad_left 2s ease-in infinite forwards
}
.logo-part {
    position: relative;
    top: -2px;
    height: 27px;
    width: 27px;
    -webkit-animation: logo-part 2s linear infinite forwards;
    animation: logo-part 2s linear linear infinite forwards;
}

@keyframes logo-part {
    0% {
        width:0;
    }

    15% {
        width: 0;
    }

    40% {
        width: 27px;
    }

    85% {
        width: 27px;
    }

    to {
        width: 0;
    }
}

@keyframes circleProgressLoad_right {
    0% {
        -webkit-transform: rotate(-110deg);
        transform: rotate(-210deg)
    }

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

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

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

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

@keyframes circleProgressLoad_left {
    0% {
        -webkit-transform: rotate(200deg);
        transform: rotate(300deg)
    }
    20% {
        -webkit-transform: rotate(88deg);
        transform: rotate(88deg)
    }

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

    50% {
        -webkit-transform: rotate(88deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(200deg);
        transform: rotate(300deg)
    }
}