/*Ubicacion position*/

.font-circles{
  font-family: "FuturaSdt-Bold" !important;
  font-size: 38px;
  font-weight: bold;
}

.font-circles-small{
  font-family:'Futura-Bold' !important;
  font-size: 22px;
}


.percent-inside{
  font-family:'FuturaSdt-Bold' !important;
  position: absolute; 
  top:90px; 
  left:125px;
  font-size: 25px !important;
}

.percent-inside-2{
  top:340px; 
  left:265px;
}

.percent-inside-3{
  top:60px; 
  left:265px;
}

.percent-inside-4{
  top:90px; 
  left:75px;
}


.circle-big{
  /*margin-right: 70px;*/
}

.circle-big svg {
  width: 114px;
  height: 114px;
}

.circle-big .bg {
  fill: none;
  stroke-width: 5px;
  stroke: #3C3C3C;
	
}

.bg-orange-stroke{
  stroke: #FFCC00 !important;
}

.circle-big .progress {
      fill: none;
    stroke-width: 20px;
    stroke: white;
    stroke-linecap: round;
    stroke-dasharray: 130 , 500;
    /* stroke-dashoffset: 90; */
    /* stroke-dashoffset: 90; */
    transform: rotate(90deg);
    transform-origin: 50% 50%;
    /*animation: big 2.5s ease-in-out;*/
}


@keyframes big {
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 130 , 500;
  }
}

@keyframes small {
  from {
  
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 230 , 500;
  }
}

/*Porcentaje */
@keyframes percent50{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 250 , 500;
  }
}
@keyframes percent30{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 150 , 500;
  }
}

@keyframes percent25{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 125 , 500;
  }
}

/*Porcentaje 26% / 130 */

@keyframes percent26{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 130 , 500;
  }
}

/*Porcentaje 20% / 100 */

@keyframes percent20{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 100 , 500;
  }
}


/*Porcentaje 46% / 130 */

@keyframes percent46{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 230 , 500;
  }
}

/*Porcentaje 1%*/
@keyframes percent10{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 10 , 500;
  }
}
/*Porcentaje 6% / 30 */

@keyframes percent6{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 30 , 500;
  }
}


/*Porcentaje 43% / 215 */

@keyframes percent43{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 215 , 500;
  }
}



/*Porcentaje 8% / 40 */

@keyframes percent8{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 40 , 500;
  }
}


/*Porcentaje 15% / 75 */

@keyframes percent15{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 75 , 500;
  }
}


/*Porcentaje 35% / 175 */

@keyframes percent35{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 175 , 500;
  }
}

/*Porcentaje 38% / 75 */

@keyframes percent38{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 190 , 500;
  }
}

/* Porcentaje 60%*/
@keyframes percent60{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 300 , 500;
  }
}



/* Porcentaje 64%*/
@keyframes percent64{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 320 , 500;
  }
}

/*Porcentaje 35% / 75 */

@keyframes percent70{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 350 , 500;
  }
}


/*Porcentaje 35% / 75 */

@keyframes percent80{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 400 , 500;
  }
}

@keyframes percent99{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 495 , 500;
  }
}

@keyframes percent100{
  from {
    stroke-dasharray: 10 , 500;
  }
  to {
    stroke-dasharray: 500 , 500;
  }
}





.porcent-p1-cap2{

    font-size: 30px;
    font-family: "FuturaSdt-Bold";
    right: -8px !important;
    top: 33px !important;
    color: white;
}