.socialbox {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fde2ef;
    text-align: center;
    border: 4px solid #fbcce4;
    box-shadow: 0 0 5px #000, inset 0 0 10px #fff;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: block;
    text-decoration: none;
    z-index: 9999;
    transition: all 0.3s ease;
}

   
.a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #37B0F1;
    text-align: center;
    border: 4px solid #ccc;
    float: left;
    line-height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 1s ease;
    opacity: 0;
}

.socialbox .fa {
    color: #fff;
    text-shadow: 0 0 2px #000;
    padding:8px;
}



.a1.active {
    left: 65px;
    opacity: 1;
    background: #395693

}

.b1.active {
    left: 110px;
    opacity: 1;
    background: #1da1f2
}

.c1.active {
    /*left: 155px;
    opacity: 1;
    background: linear-gradient(#400080, transparent), linear-gradient(200deg, #d047d1, #ff0000, #ffff00)*/
    left: 155px;
    opacity: 1;
    background: #0370AE
}

.d1.active {
    /*left: 200px;
    opacity: 1;
    background: #0370AE*/
    left: 201px;
    opacity: 1;
    background: #5edf26
}

.e1.active {
    /*left: 245px;
    opacity: 1;
    background: #5edf26*/
    left: 245px;
    opacity: 1;
    background-color: #9a2827;
}


.f1.active {
    /*left: 300px;
    opacity: 1;
    background-color:#9a2827;*/
    padding-top: 5px;
    left: 291px;
    opacity: 1;
    background-color: grey;
    border: none;
}
.s1.active {
    /*left: 300px;
    opacity: 1;
    background-color:#9a2827;*/
    left: 300px;
    opacity: 1;
    background-color: grey;
    border: none;
}
.g1.active {
    left: 350px;
    opacity: 1;
    background-color: transparent;
    border: none;
}

.activemk {
    transition: 1s linear;
    background: #d8679d
}
.socialbox h3 {
    line-height: 32px;
    margin: 0;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    text-align: center;
    font-weight: bold;
    font-size: 19px;
}


.circle {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    position: relative;
    text-align: center;
    border-radius: 50%;
    box-shadow: inset 0 0 20px #000
}

    .circle::before {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 10px solid transparent;
        content: "";
        position: absolute;
        border-right-color: orange;
        border-bottom-color: #6cdbff;
        top: 0;
        left: 0;
        animation: moveon 2s infinite alternate
    }


    .circle::after {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 10px solid transparent;
        content: "";
        position: absolute;
        border-left-color: green;
        border-top-color: red;
        top: 0;
        left: 0;
        animation: moveon2 2s infinite alternate
    }

@keyframes moveon {
    from {
        transform: rotate(360deg);
    }

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

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

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


.circle .fa {
    font-size: 30px;
    color: blue;
    line-height: 100px;
}





.circle2 {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    position: relative;
    text-align: center
}

    .circle2::before {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 10px solid #ccc;
        content: "";
        position: absolute;
        border-left-color: red;
        border-top-color: red;
        top: 0;
        left: 0;
    }


    .circle2::after {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 10px solid #ccc;
        content: "";
        position: absolute;
        border-left-color: red;
        border-top-color: red;
        top: 0;
        left: 0;
        transition: all 200ms ease
    }

    .circle2:hover::after {
        transform: rotate(360deg);
        transition: all 300ms ease
    }

    .circle2 .fa {
        font-size: 30px;
        color: blue;
        line-height: 100px;
    }


    /*New Social Media Style*/

.social-three li {
    margin: 0 -1px -1px 0;
}

.bg-facebook {
    background-color: #3b5998 !important;
    color: #fff;
}

.bg-twitter {
    background-color: #00aced !important;
    color: #fff;
}

.bg-instagram {
    background-color: #b300ad !important;
    color: #fff;
}

.bg-youtube {
    background-color: #bd0000 !important;
    color: #fff;
}

.bg-gplus {
    background-color: #eb5e4c !important;
    color: #fff;
}

.bg-vimeo {
    background-color: #35c6ea !important;
    color: #fff;
}