/*@-webkit-keyframes float {
    0% {
        -webkit-box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }

    50% {
        -webkit-box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
        -webkit-transform: translatey(-10px);
        transform: translatey(-10px);
    }

    100% {
        -webkit-box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }
}

@keyframes float {
    0% {
        -webkit-box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }

    50% {
        -webkit-box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
        -webkit-transform: translatey(-10px);
        transform: translatey(-10px);
    }

    100% {
        -webkit-box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
        -webkit-transform: translatey(0px);
        transform: translatey(0px);
    }
}*/


.float-circle {
    width: 150px;
    height: 150px;
    background: #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 5px white solid;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    -webkit-box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
    -webkit-animation: float 6s ease-in-out infinite;
    animation: float 6s ease-in-out infinite;
        padding-top: 13px;
    color: #fff;
    font-size:14px;
    text-align:center;
}
    .float-circle i {
        font-size:55px;
    }
    .float-circle a:hover {
        color:#fff;
    }
.float-circle h4{
    color: yellow;
    font-size:16px;

}

    .float-circle.circle1 {
        background: #ff6a00;
    }

    .float-circle.circle2 {
        background: #2092b7;
        -webkit-animation: float 7s ease-in-out infinite;
        animation: float 7s ease-in-out infinite;
    }

    .float-circle.circle3 {
        background: #7e0aac;
        -webkit-animation: float 8s ease-in-out infinite;
        animation: float 8s ease-in-out infinite;
    }

    .float-circle.circle4 {
        background: #1b901d;
        -webkit-animation: float 9s ease-in-out infinite;
        animation: float 9s ease-in-out infinite;
    }

     .float-circle.circle5 {
        background: #901b36;
        -webkit-animation: float 10s ease-in-out infinite;
        animation: float 10s ease-in-out infinite;
    }

      .float-circle.circle6 {
        background: #c31a97;
        -webkit-animation: float 11s ease-in-out infinite;
        animation: float 11s ease-in-out infinite;
    }
       .float-circle.circle7 {
        background: #ff1919;
        -webkit-animation: float 12s ease-in-out infinite;
        animation: float 12s ease-in-out infinite;
    }

      .float-circle.circle8 {
        background: #1d1ac3;
        -webkit-animation: float 13s ease-in-out infinite;
        animation: float 13s ease-in-out infinite;
    }
    .float-circle img {
        width: 100%;
        height: auto;
    }




@media (max-width: 1440px) {

    .float-circle {
        width: 130px;
        height: 130px;
    }

    .float-circle i {
        font-size:40px;
    }
    .float-circle h4{
    color: yellow;
    font-size:12px;

}

}