/* // Loader CSS */
ul.unfpa-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(90deg) translate(-50%, -50%);
}
ul.unfpa-loader li {
  list-style: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  background: #f8931d;
  border-radius: 50%;
}
#a {
    animation: a 1s ease-in-out infinite;
    top: -20px;
    left: -20px;
}
#b {
    animation: b 1s ease-in-out infinite;
    top: -20px;
    left: 0px;
}
#c {
    animation: c 1s ease-in-out infinite;
    top: -20px;
    left: 20px;
}
#d {
    animation: d 1s ease-in-out infinite;
    top: 0px;
    left: -20px;
}
#e {
    animation: e 1s ease-in-out infinite;
    top: 0px;
    left: 0px;
}
#f {
    animation: f 1s ease-in-out infinite;
    top: 0px;
    left: 20px;
}
#g {
    animation: g 1s ease-in-out infinite;
    top: 20px;
    left: -20px;
}
#h {
    animation: h 1s ease-in-out infinite;
    top: 20px;
    left: 0px;
}
#i {
    animation: i 1s ease-in-out infinite;
    top: 20px;
    left: 20px;
}

@keyframes a {
  50% {
    top: 0px;
    left: -20px;
  }
  100% {
    top: 0px;
    left: -20px;
  }
}
@keyframes b {
  50% {
    top: -20px;
    left: -20px;
  }
  100% {
    top: -20px;
    left: -20px;
  }
}
@keyframes c {
  50% {
    top: -20px;
    left: 0px;
  }
  100% {
    top: -20px;
    left: 0px;
  }
}
@keyframes d {
  50% {
    top: 20px;
    left: -20px;
  }
  100% {
    top: 20px;
    left: -20px;
  }
}
@keyframes f {
  50% {
    top: -20px;
    left: 20px;
  }
  100% {
    top: -20px;
    left: 20px;
  }
}
@keyframes g {
  50% {
    top: 20px;
    left: 0px;
  }
  100% {
    top: 20px;
    left: 0px;
  }
}
@keyframes h {
  50% {
    top: 20px;
    left: 20px;
  }
  100% {
    top: 20px;
    left: 20px;
  }
}
@keyframes i {
  50% {
    top: 0px;
    left: 20px;
  }
  100% {
    top: 0px;
    left: 20px;
  }
}