

.wrap_flexCenter{
  /*position: absolute;*/
  z-index: 1;
  /*top:7%;*/
  /*border:1px solid red;*/
  width:100%;
  height: 190px;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  /*display: flex;
  flex-wrap: wrap; 
  justify-content: space-between; */
}


.textCounter {
  font-size: 20px;
  color:#FACE0D;
  font-weight: 500;
  text-shadow: 1px 1px 1px black;
  margin:10px;
  padding:10px;
  padding-right:20px;
  margin:auto;
  /*border-top:2px solid #FACE0D;*/

}

.counterNum {
  font-size: 22px;
  color: #FAC402;
  font-weight: 600;
}
.spanInline {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  line-height: 38px;
}
@media screen and (max-width: 350px) {
  .spanInline {
    font-size: 23px;
  }
}
.animationStart {
  color:red;
  transition: 1s;
}
.animationEnd {
  color:#F48E03;
  transition: 1s;
}


.donut{
  margin:-18px;
  min-width:144px; 
}

.svg-item {
  margin-right: 1%;
  text-align: center;
  border-radius: 18px;
  min-width: 315px;
  padding:10px;
  width:250px;
  height:250px
  font-size: 16px;
  animation: donutfade 3s;
}
.svg-item span {
  display: block;
  /*margin-top: -5px;*/
  /*margin-left: -30px;*/
  font-size: 21px;
  font-family: 'Roboto', sans-serif;
  color:#FACE0D;
  font-weight: 500;
  text-shadow: 1px 1px 1px black;
}
.text_onedonut {
  position: absolute;
  max-width: 315px;
  top: -27px;
}
.svg-item span span{
  display: inline-block;
}
.svg-item svg {
  margin-top:1px;
  /*display: block;*/
  /*margin-left:-10px;*/
  max-width: 220px;
  margin-right: 15px;
  margin-left: auto;
  margin-right: auto;
  /*display: block;
  font-size: 21px;
  font-family: 'Roboto', sans-serif;
  color:#FACE0D;
  font-weight: 500;
  text-shadow: 1px 1px 1px black;*/
}

@keyframes donutfade {
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    .svg-item {
        width: 80%;
    }
}

.donut-ring {
    stroke: #A6A6A6;
    stroke-opacity: 0.5;
}

.donut-segment {
    transform-origin: center;
    stroke: #FF6200;
}



.donut-segment-3 {
    stroke: #FAC402;
    stroke-opacity: 0.8;
    /*stroke-dasharray: 14, 86;*/
    animation: donut2 7.3s;
}
.donut-segment-3n {
    stroke: #FAC402;
    stroke-opacity: 0.8;
    /*stroke-dasharray: 14, 86;*/
    animation: donut2n 7.3s;
}


.segment-1{fill:#ccc;}
.segment-2{fill:aqua;}
.segment-3{fill:#d9e021;}
.segment-4{fill:#ed1e79;}

.donut-percent {
    animation: donutfadelong 1s;
}

@keyframes donutfadelong {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes donut2n {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 28, 72;/*14, 86;*/
    }
}

@keyframes donut2 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 14, 86;
    }
}

.donut-text {
    font-family: Arial, Helvetica, sans-serif;
    fill: #FF6200;
}

.donut-text-2 {
    fill: #F48E03;
}


.donut-label {
    font-size: 0.28em;
    font-weight: 700;
    line-height: 1;
    fill: #000;
    transform: translateY(0.25em);
}

.donut-percent {
    font-size: 0.5em;
    line-height: 1;
    transform: translateY(0.5em);
    font-weight: bold;
}

.donut-data {
    font-size: 0.12em;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    color:#666;
    fill: #666;
    animation: donutfadelong 1s;
}

.svg-item {
  width:315px;
  display:inline-block;
}


/*.contentText{
  margin: 0 auto;
}*/


/*.donut{
  margin:-18px;
  min-width:144px; 
}*/

.svg-item2 {
  margin-right: 1%;
  border-radius: 18px;
  min-width: 315px;
  /*padding:10px;*/
  width:250px;
  height:250px
  font-size: 16px;
  animation: donutfade2 3s;
}
.text_twodonut {
  position: absolute;
  width: 315px;
  top: -27px;
}
.svg-item2 span {
  text-align: center;
  display: block;
  /*margin-top: -5px;*/
  /*margin-left: -30px;*/
  font-size: 21px;
  font-family: 'Roboto', sans-serif;
  color:#FACE0D;
  font-weight: 500;
  text-shadow: 1px 1px 1px black;
}
.svg-item2 span span{
  display: inline-block;
}
.svg-item2 svg {
  /*margin-right: 40px;*/
  display: block;
  margin-top:16px;
  margin-left: auto;
  margin-right: auto;
  /*margin-left:-10px;*/
  max-width: 220px;
  /*margin-left: 20px;*/
  /*display: block;
  font-size: 21px;
  font-family: 'Roboto', sans-serif;
  color:#FACE0D;
  font-weight: 500;
  text-shadow: 1px 1px 1px black;*/
}

@keyframes donutfade2 {
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    .svg-item2 {
        width: 80%;
    }
    .svg-item2 {
      margin-top: 0;
    }
}

.donut-ring {
    stroke: #A6A6A6;
    stroke-opacity: 0.5;
}

.donut-segment {
    transform-origin: center;
    stroke: #FF6200;
}

.donut-segment-3 {
    stroke: #FAC402;
    stroke-opacity: 0.8;
    animation: donut2 7.3s;
}

.segment-1{fill:#ccc;}
.segment-2{fill:aqua;}
.segment-3{fill:#d9e021;}
.segment-4{fill:#ed1e79;}

.donut-percent {
    animation: donutfadelong2 1s;
}

@keyframes donutfadelong2 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@keyframes donut2 {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 14, 86;
    }
}

.donut-text {
    font-family: Arial, Helvetica, sans-serif;
    fill: #FF6200;
}

.donut-text-2 {
    fill: #F48E03;
}


.donut-label {
    font-size: 0.28em;
    font-weight: 700;
    line-height: 1;
    fill: #000;
    transform: translateY(0.25em);
}

.donut-percent {
  text-shadow: 1px 1px 1px #B56A02;
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: bold;
}
.donut-percent2 {
  text-shadow: 1px 1px 1px #B56A02;
  font-size: 0.75em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: bold;
}

.donut-data {
    font-size: 0.12em;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    color:#666;
    fill: #666;
    animation: donutfadelong 1s;
}



.svg-item2 {
  width:315px;
  margin-top: 13px;
  display:inline-block;
  /*margin:auto;*/
}

@media screen and (max-width: 767px) {
  .svg-item {
   width:48%;

  }
  .svg-item2 {
   width:48%;

  }
}
@media screen and (max-width: 650px) {
  .svg-item {
   position: relative;
   display: block;
   margin-left: auto;
   margin-right:auto;
  }
  .text_onedonut {
    width:98%;
    top:-10px;
  }
  .svg-item span {
    font-size: 17px;
  }
  .svg-item2 {
   position: relative;
   display: block;
   width:90%;
   margin-left: auto;
   margin-right:auto;
  }
  .svg-item2 span {
    font-size: 17px;
  }
  .text_twodonut {
    width:98%;
    top:-10px;
  }
  .svg-item svg {
    max-width: 170px;
  }
  .svg-item2 svg {
    max-width: 170px;
  }
}
@media screen and (max-width: 530px) {
.logo_comp2 {
  width:139px;
}
.logo_comp2 img {
    width: 137px;
}

.logo_comp {
  width: 272px;
}
.logo_comp img {
    width: 270px;
}

}

@media screen and (max-width: 462px) {
  .logo_comp2 {
    width:119px;
  }
  .logo_comp2 img {
      width: 117px;
  }

  .logo_comp {
    width: 252px;
  }
  .logo_comp img {
      width: 250px;
  }
  .text_onedonut {
    top:0px;
  }
}

@media screen and (max-width: 550px) {
  .table_progress_title {
    font-size: 1.4em;
  }
  header.major {
    padding-left: 0.1em;
    padding-right: 0.1em;
  }
}
/*@media screen and (max-width: 400px) {
  .progress_text {
    font-size: 1.3em;
  }
}*/