.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: 150px;
    height: 150px;
    cursor: pointer;
    display: inline-block;
}

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

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

.animated-circle:hover svg .circle
{
    stroke-dashoffset: 0;
    fill: #ffffff;
}

.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 svg .circle { stroke: #20447e; }
.animated-circle:hover svg .si-glyph-fill { fill: #3363af; }