/* GENERAL STYLES */
        .pad-bottom {
            padding-bottom: 40px;
        }

        /* PIE CHART STYLES */
        .chart {
            position: relative;
            display: inline-block;
            width: 200px; /* SHOUL BE EQUAL - Like 200px */
            height: 200px; /* SHOUL BE EQUAL - Like 200px */
            margin-top: 30px;
            margin-bottom: 20px;
            text-align: center;
        }

            .chart canvas {
                position: absolute;
                top: 0;
                left: 0;
            }

        .percent {
            display: inline-block;
            line-height: 200px; /* SHOUL BE EQUAL - Like 200px */
            z-index: 2;
            font-size: 2em;
        }

            .percent:after {
                content: '%';
                margin-left: 0.1em;
                font-size: 1em;
            }

.chart-container .pr-chart-ctrl {
    display:block; 
    float:left; 
    width:25%;
}

.chart-container .pr-chart-ctrl .pr-chart {
    display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center; margin-top: 30px;
}
.chart-container .pr-chart-ctrl .pr-chart canvas {
display:block; margin:0 auto; padding:0; vertical-align:center;
}
.chart-container .pr-chart-ctrl .pr-chart i {
    position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:48px; font-style:normal; color: #808080;
}
.chart-container .pr-chart-ctrl p{margin:0; padding:0; text-transform:uppercase; color:#808080;}
    
@media screen and (max-width:500px) {
    .chart-container .pr-chart-ctrl {
        width:100%; margin-bottom:50px;
    } 
}
@media screen and (min-width:501px) and (max-width:900px) {
    .chart-container .pr-chart-ctrl {
        width:50%; margin-bottom:50px;
    } 
    }