.wrap-chart{
    padding: 5% 0;
}
.piechart{
    width: 100%;
    margin:0 auto;
    display: flex;
    align-items:center;
    justify-content: center;
    height: 400px;
}
.piechart .wrap-circle{
    width: 100%;
    height: 400px;
    position: absolute;
}
.piechart .circle{ 
    width:350px;
    height:350px;
    left: 35%;
    position: relative;  
}

.piechart .circle .txt-sika{ 
    position: absolute;
    top: 57px;
    left: 54%;
    font-size: 16px;
    z-index: 5;
    opacity: 0;
}
.piechart .circle .txt-competitors{ 
    position: absolute;
    top: 55%;
    left: 58%;
    font-size: 16px;
    z-index: 5;
    opacity: 0;
}
.piechart.end_animation .circle .txt-sika,
.piechart.end_animation .circle .txt-competitors{
    opacity: 1;
}

.piechart .chart-content{
    position: absolute;
    top: 23%;
    right: 0;
    width:40%;
    opacity: 0;
    display: block;
}
.piechart.end_animation .circle{
    -webkit-animation: slideLeft 3s forwards;
    animation: slideLeft 3s forwards;
    left:10%;
    opacity: 1;    
}
@keyframes slideLeft {
    0% {
        left:35%;
    } 
    40% {
        left:35%;
    }   
    100% {        
        left:10%;
    }

 }

.piechart.end_animation .chart-content{
    opacity: 1;
    right:10%;
    animation: slideRight 3s ;
    -webkit-animation: slideRight 3s;
}
@keyframes slideRight {
    0% {
        opacity: 0;
        right:0;
    } 
    40%{
        right:0;
        opacity: 0;
    }  
    100% {        
        right:10%;
        opacity: 1;
    }

 }

.piechart .chart-content h6{
    text-transform: none!important;
    position: relative;
}
.piechart .chart-content h6:after{
    content:"";
    height: 2px;
    width: 46%;
    background-color: #b7b7b7;
    position: absolute;
    bottom: -6px;
    left: 0;
}


.piechart .chart-content h2{
    color: #ffc510;
}
.piechart .chart-content p{
   margin:0;
   padding:0;
}



.piechart.end_animation .circle .chart-2{
    animation: zoom-in-out 1s;
    -webkit-animation: zoom-in-out 1s;
}
@keyframes zoom-in-out {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
} 
    50%{
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
}  
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
}

 }


.piechart .circle .pie{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    z-index: 2;
    opacity: 0;
}
.piechart .circle .pie.show{
   opacity:1;
}

.piechart .circle .chart-1{ background-image: url(../images/pie-chart-01.png);}
.piechart .circle .chart-2{ background-image: url(../images/pie-chart-02.png);}
.piechart .circle .chart-3{ background-image: url(../images/pie-chart-03.png);}
.piechart .circle .chart-4{ background-image: url(../images/pie-chart-04.png);}
.piechart .circle .chart-5{ background-image: url(../images/pie-chart-05.png);}
.piechart .circle .chart-6{ background-image: url(../images/pie-chart-06.png);}
.piechart .circle .chart-7{ background-image: url(../images/pie-chart-07.png);}
.piechart .circle .chart-8{ background-image: url(../images/pie-chart-08.png);}
.piechart .circle .chart-9{ background-image: url(../images/pie-chart-09.png);}
.piechart .circle .chart-10{background-image: url(../images/pie-chart-10.png);}
.piechart .circle .chart-11{background-image: url(../images/pie-chart-11.png);}
.piechart .circle .chart-12{background-image: url(../images/pie-chart-12.png);}
.piechart .circle .chart-13{background-image: url(../images/pie-chart-13.png);}
.piechart .circle .chart-14{background-image: url(../images/pie-chart-14.png);}
.piechart .circle .chart-15{background-image: url(../images/pie-chart-15.png);}
.piechart .circle .chart-16{background-image: url(../images/pie-chart-16.png);}
.piechart .circle .chart-17{background-image: url(../images/pie-chart-17.png);}
.piechart .circle .chart-18{background-image: url(../images/pie-chart-18.png);}
.piechart .circle .chart-19{background-image: url(../images/pie-chart-19.png);}
.piechart .circle .chart-20{background-image: url(../images/pie-chart-20.png);}
.piechart .circle .chart-21{background-image: url(../images/pie-chart-21.png);}
.piechart .circle .chart-22{background-image: url(../images/pie-chart-22.png);}
.piechart .circle .chart-23{background-image: url(../images/pie-chart-23.png);}
.piechart .circle .chart-24{background-image: url(../images/pie-chart-24.png);}
.piechart .circle .chart-25{background-image: url(../images/pie-chart-25.png);}
.piechart .circle .chart-26{background-image: url(../images/pie-chart-26.png);}
.piechart .circle .chart-27{background-image: url(../images/pie-chart-27.png);}
.piechart .circle .chart-28{background-image: url(../images/pie-chart-28.png);}
.piechart .circle .chart-29{background-image: url(../images/pie-chart-29.png);}
.piechart .circle .chart-30{background-image: url(../images/pie-chart-30.png);}
.piechart .circle .chart-31{background-image: url(../images/pie-chart-31.png);}
.piechart .circle .chart-32{background-image: url(../images/pie-chart-32.png);}
.piechart .circle .chart-33{background-image: url(../images/pie-chart-33.png);}





.piechart .circle .full-circle{
    position: absolute;
    left:0;
    top:0;
    width: 350px;
    height: 350px;
    background-image: url(../images/pie-chart-00.png);
    animation: zoom-in 3s;
    -webkit-animation: zoom-in 3s;
    z-index: 1;
    opacity: 0;
    display: none;
}
.piechart.start_animation .circle .full-circle{
    display: block;
}

.piechart .circle .full-circle.show{
    opacity: 0;
}

@keyframes zoom-in {
    0% {
        -webkit-transform: scale( 0.5 );
        -moz-transform: scale( 0.5 );
        -o-transform: scale( 0.5 );
        -ms-transform: scale( 0.5 );
        transform: scale( 0.5 );
        opacity:1;
}        
    15% {
        -webkit-transform: scale( 0.9 );
        -moz-transform: scale( 0.9 );
        -o-transform: scale( 0.9 );
        -ms-transform: scale( 0.9 );
        transform: scale( 0.9 );
}    
    20% {
        -webkit-transform: scale( 0.8 );
        -moz-transform: scale( 0.8 );
        -o-transform: scale( 0.8 );
        -ms-transform: scale( 0.8 );
        transform: scale( 0.8 );
}
    25% {
        -webkit-transform: scale( 1 );
        -moz-transform: scale( 1 );
        -o-transform: scale( 1 );
        -ms-transform: scale( 1 ); 
        transform: scale( 1 );
    }    
    98% {
        -webkit-transform: scale( 1 );
        -moz-transform: scale( 1 );
        -o-transform: scale( 1 );
        -ms-transform: scale( 1 );
        transform: scale( 1 );
        opacity:1;
    }
    100% {
        opacity:0;
    }

   }
 
.piechart .circle .chart-1{
        opacity: 0;
        animation: fadein 4s;
        -webkit-animation: fadein 4s;
}
    @keyframes fadein {
        0% {
            opacity:0;
        } 
        50% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    
       }


    @media only screen and (max-width:1023px) {
        .piechart .circle{
            width: 350px;
            height: 350px;
            position: relative;
        }
        .piechart.end_animation .chart-content{
            padding-left: 5%;
            right: 5%;
        }        
        .piechart .circle .pie{
            width: 350px;
            height: 350px;
        }
    }

    @media only screen and (max-width:767px) {
        .piechart .circle .pie{
            width: 93%;
            height: 93%;
            right: 0;
            margin:0 auto;
        }
        .piechart .wrap-circle{
            position: static;
        }
        .piechart .circle{
            /* width: 350px;
            height: 350px; */
            position: static;
        }
       .piechart.end_animation{
            display: inline-block;
        }
        .piechart.end_animation .chart-content{
            text-align: center;
            position: static;
            width: 100%;            
            margin-top:0px;
        }
        .piechart .chart-content{
            margin-left:0;
        }
        .piechart .circle .txt-competitors{
            top: 35%;
        }
        .piechart .chart-content h6:after{
            left:25%;
        }
    }