*
{
    box-sizing: border-box;    
}
.content_graph
{
    padding-top: 10px;
    padding-bottom: 10px;

    padding-left: 35%;
    padding-right: 35%;

    /*background-color: blue;*/
}

.graph
{
    height: 200px;
    margin: 1rem auto;
    position: relative;
    width: 200px;
}

.recorte
{
    border-radius: 50%;
    clip: rect(0px, 200px, 200px, 100px);
    height: 100%;
    position: absolute;
    width: 100%;
}

.pie
{
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
    height: 100%;
    position: absolute;
    width: 100%;
    font-family: monospace;
    font-size: 1.5rem;
}

.shadow
{
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
    border: 5px solid #000;
    height: 100%;
    position: absolute;
    width: 100%;
}

#wedge1
{
    transform: rotate(0deg);
}

#wedge1 .pie
{
    background-color: rgba(0,0,255,.7);
    transform: rotate(70deg);
}

#wedge2
{
    transform: rotate(70deg);
}

#wedge2 .pie
{
    background-color: rgba(255,255,0,.7);
    transform: rotate(120deg);
}

#wedge3
{
    transform: rotate(-170deg);
}

#wedge3 .pie
{
    background-color: rgba(0,128,0,.7);
    transform: rotate(25deg);
}

#wedgend
{
    transform:rotate(-145deg);
}

#wedgend .pie
{
    background-color: rgba(255,0,0,.7);
    transform: rotate(145deg);
}



#wedge1 .pie:after
{
    content: attr(data-rel);
    left: 25%;
    line-height: 5;
    position: absolute;
    top: 0;
    transform: rotate(-70deg);
}

#wedge2 .pie:after
{
    content: attr(data-rel);
    left: 15%;
    position: absolute;
    top: 30%;
    transform: rotate(-190deg);
}

#wedge3 .pie:after
{
    content: attr(data-rel);
    left: 35%;
    position: absolute;
    top: 4%;
    transform: rotate(70deg);
}

#wedgend .pie:after
{
   content: attr(data-rel);
   left: 10%;
   position: absolute;
   top: 30%;
}