section.multiSemiCircularDonut {
  display: inline-block;
  margin: 50px 0;
  text-align: center;
  position: relative;
}


.semiCircle {
  position: relative;
  margin: auto;
  overflow: hidden;
}


/* SIZE 230 + 8*60 = 710 */
.semiCircle:nth-child(1) {
}
.semiCircle:nth-child(1):before, .semiCircle:nth-child(1):after, .semiCircle:nth-child(1) {
    width: 710px; /* 1 */
    height: 355px; /* 0.5 */
}
.semiCircle:nth-child(1):before, .semiCircle:nth-child(1):after {
    border-color: #2e8f7f;
    border-radius: 1px 1px 710px 710px; /* 0 0 1 1 */
}
.semiCircle.semiCircle:nth-child(1):before {

}

/* SIZE 230 + 6*60 = 710 */
.semiCircle:nth-child(2) {
    margin-top: -295px; /* 0.5 */
}
.semiCircle:nth-child(2):before, .semiCircle:nth-child(2):after, .semiCircle:nth-child(2) {
    width: 590px; /* 1 */
    height: 295px; /* 0.5 */
}
.semiCircle:nth-child(2):before, .semiCircle:nth-child(2):after {
    border-color: #2e8f7f;
    border-radius: 1px 1px 590px 590px; /* 0 0 1 1 */
}
.semiCircle.semiCircle:nth-child(2):before {

}

/* SIZE 230 + 4*60 = 710 */
.semiCircle:nth-child(3) {
    margin-top: -235px; /* 0.5 */
}
.semiCircle:nth-child(3):before, .semiCircle:nth-child(3):after, .semiCircle:nth-child(3) {
    width: 470px; /* 1 */
    height: 235px; /* 0.5 */
}
.semiCircle:nth-child(3):before, .semiCircle:nth-child(3):after {
    border-color: #2e8f7f;
    border-radius: 1px 1px 470px 470px; /* 0 0 1 1 */
}
.semiCircle.semiCircle:nth-child(3):before {

}

/* SIZE 230 + 2*60 = 710 */
.semiCircle:nth-child(4) {
    margin-top: -175px; /* 0.5 */
}
.semiCircle:nth-child(4):before, .semiCircle:nth-child(4):after, .semiCircle:nth-child(4) {
    width: 350px; /* 1 */
    height: 175px; /* 0.5 */
}
.semiCircle:nth-child(4):before, .semiCircle:nth-child(4):after {
    border-color: #055f97;
    border-radius: 1px 1px 350px 350px; /* 0 0 1 1 */
}
.semiCircle.semiCircle:nth-child(4):before {

}


/* SIZE 230 */
.semiCircle:nth-child(5) {
    margin-top: -115px; /* 0.5 */
}
.semiCircle:nth-child(5):before, .semiCircle:nth-child(5):after, .semiCircle:nth-child(5) {
    width: 230px; /* 1 */
    height: 115px; /* 0.5 */
}
.semiCircle:nth-child(5):before, .semiCircle:nth-child(5):after {
    border-color: #e67800;
    border-radius: 1px 1px 230px 230px; /* 0 0 1 1 */
}
.semiCircle.semiCircle:nth-child(5):before {

}

.semiCircle:before, .semiCircle:after {
  content: '';
  border-top: none !important;
  border-width: 59px;
  border-style: solid;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
}



#screen3.et-page-current .semiCircle:before, .semiCircle:after {
    transition: 0.3s;
    transform-origin: 50% 0%;
    animation: semiCircularDonut 2s ease-in-out;
}

#screen3.et-page-current .semiCircle:after {
    z-index: 3;
    transform: rotate(180deg);
    opacity: 0.5;
}

.semiCircle:before {
    opacity: 1;
}

@keyframes semiCircularDonut {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}