figure {
  margin: 0 auto;
  position: relative;
  font-size: 16px;
  padding-bottom: 250px;
  background-image: url('../images/Ground.svg');
  background-repeat: no-repeat;
  max-width: 400px;
}
/* svg {
  max-width: 302px;
  position: absolute;
  top: -71px;
  left: 34px;
  transform: rotateX(60deg);
} */
svg{
  max-width: 308px;
  position: absolute;
  top: -74px;
  left: 26px;
  transform: rotateX(62deg);
}
figcaption {
  font-size:1rem;
  text-align:center;
  color:#fff;
  width: 100%;
  position: absolute;
  left: 0;
  top:40%;
  z-index:2;
}

circle {
	fill:rgba(0,0,0,0);
  stroke-width:31.8309886184;
  /* stroke-dasharray: 0,0,0,100;
  stroke-dashoffset: 25;
  -webkit-animation: pie1 3s  ease both;
  animation: pie1 6s  ease both; */
}
.fadeIn{
   stroke-width:31.8309886184;
  stroke-dasharray: 0,0,0,100;
  stroke-dashoffset: 25;
  -webkit-animation: pie1 3s  ease both;
  animation: pie1 6s  ease both;
 

}
.fadeIn2{
  stroke-width:31.8309886184;
 stroke-dasharray: 0,0,0,100;
 stroke-dashoffset: 25;
 -webkit-animation: pie2 3s  ease both;
 animation: pie2 6s  ease both;


}
/* .fadeIn3{
  stroke-width:31.8309886184;
 stroke-dasharray: 0,0,0,100;
 stroke-dashoffset: 25;
 -webkit-animation: pie2 3s  ease both;
 animation: pie2 6s  ease both;


} */

.pie1 {
  stroke: hsla(229, 42%, 26%, 0.75);
  stroke-width:31.8309886184;
  stroke-dasharray: 0,0,0,100;
  stroke-dashoffset: 25;

 
}
.pie2 {
  stroke: hsla(229, 42%, 26%, 0.75);
  stroke-width:31.8309886184;
  stroke-dasharray: 0,0,0,100;
  stroke-dashoffset: 25;

}
/* 
.pie3 {
  stroke:hsl(180,70%,20%);
  -webkit-animation-name: pie3;
  animation-name: pie3;
}
.pie4 {
  stroke:hsl(180,0%,70%);
  -webkit-animation-name: pie4;
  animation-name: pie4;
} */
/* 1st pie is 40% */
@-webkit-keyframes pie1 {
  50%,100% {stroke-dasharray:90,10,0,0;}
}
@keyframes pie1 {
  50%,100% {stroke-dasharray:90,10,0,0;}
}
/* .fadeIn{
  stroke: hsla(229, 42%, 26%, 0.75);
  stroke-width:31.8309886184;
  stroke-dasharray: 0,0,0,100;
  stroke-dashoffset: 25;
  -webkit-animation: pie1 3s  ease both;
  animation: pie1 6s  ease both;
} */
/* 2nd pie is 30% */
@-webkit-keyframes pie2 {
  50%,100% {stroke-dasharray: 40,60,0,0;}
}
@keyframes pie2 {
  50%,100% {stroke-dasharray:40,60,0,0;}
}
/* 
@-webkit-keyframes pie3 {
  50%,100% {stroke-dasharray: 0,70,20,10;}
}
@keyframes pie3 {
  50%,100% {stroke-dasharray: 0,70,20,10;}
}

@-webkit-keyframes pie4 {
  50%,100% {stroke-dasharray: 0,90,10,0;}
}
@keyframes pie4 {
  50%,100% {stroke-dasharray: 0,90,10,0;}
} */


@media (min-width: 576px) {
 
  figure {
    margin: 0 auto;
    position: relative;
    font-size: 16px;
    padding-bottom: 250px;
    background-image: url('../images/Ground.svg');
    background-repeat: no-repeat;
    max-width: 400px;
  }
  svg {
    max-width: 302px;
    position: absolute;
    top: -71px;
    left: 34px;
    transform: rotateX(60deg);
  }
 
}


@media (min-width: 768px) {
  figure {
    margin: 0 auto;
    position: relative;
    font-size: 16px;
    padding-bottom: 120px;
    background-image: url(../images/Ground.svg);
    background-repeat: no-repeat;
    max-width: 177px;
  }
  svg {
    max-width: 145px;
    position: absolute;
    top: -33px;
    left: 16px;
    transform: rotateX(60deg);
}

}


@media (min-width: 992px) {
 
  figure {
    margin: 0 auto;
    position: relative;
    font-size: 16px;
    padding-bottom: 120px;
    background-image: url('../images/Ground.svg');
    background-repeat: no-repeat;
    max-width: 177px;
  }
  svg {
    max-width: 145px;
    position: absolute;
    top: -33px;
    left: 16px;
    transform: rotateX(60deg);
}

 
}
@media (min-width: 1200px) {
  figure {
    margin: 0 auto;
    position: relative;
    font-size: 16px;
    padding-bottom: 250px;
    background-image: url('../images/Ground.svg');
    background-repeat: no-repeat;
    max-width: 400px;
  }
  svg {
    max-width: 302px;
    position: absolute;
    top: -71px;
    left: 34px;
    transform: rotateX(60deg);
  }
}