.animated-circle
{
    margin: 10px 20px 20px 20px;
    vertical-align: top;
    text-align: center;
    text-decoration: none;
}

.animated-circle:hover
{
    text-decoration: none;
}

.animated-circle,
.animated-circle svg
{
    width: 240px;
    height: 240px;
    cursor: pointer;
    display: inline-block;
}

.animated-circle svg .underline
{
    stroke: #cccccc;
}

.animated-circle svg .circle
{
    stroke: #555555;
    stroke-dasharray: 227;
    stroke-dashoffset: 227;
    transition: all 0.6s linear;
}

.animated-circle:hover svg .circle
{
    stroke-dashoffset: 0;
    /*fill: #f5f5f5;*/
}

.animated-circle label
{
    font-family: Arial;
    font-size: 16px;
    color: #999999;
    display: block;
    width: 100%;
    display: block;
    text: center;
    display: block;
    text-align: center;
    cursor: pointer;
}

.animated-circle label span
{
    font-size: 10px;
    display: block;
    line-height: 13px;
    color: #555555;
    margin-top: 10px;
}

.animated-circle:hover label
{
    color: #000000;
}

.animated-circle:hover svg .si-glyph-fill
{
    transition: fill 0.6s linear;
}

.animated-circle:nth-of-type(1) svg .circle { stroke: #30ba84; }
.animated-circle:nth-of-type(2) svg .circle { stroke: #30ba84; }
.animated-circle:nth-of-type(3) svg .circle { stroke: #30ba84; }
.animated-circle:nth-of-type(4) svg .circle { stroke: #30ba84; }
.animated-circle:nth-of-type(5) svg .circle { stroke: #30ba84; }

/*.animated-circle:nth-of-type(1):hover svg .si-glyph-fill { fill: #7b2317; }
.animated-circle:nth-of-type(2):hover svg .si-glyph-fill { fill: #7b2317; }
.animated-circle:nth-of-type(3):hover svg .si-glyph-fill { fill: #7b2317; }
.animated-circle:nth-of-type(4):hover svg .si-glyph-fill { fill: #7b2317; }
.animated-circle:nth-of-type(5):hover svg .si-glyph-fill { fill: #7b2317; }*/