﻿
.container-circle {
  padding: 0px 0;
  display: flex;
  flex-direction: column; 
  position:relative;
  align-items: center;
  justify-content: center;
/*   filter: blur(0.3px); */
}

.circle-wrapper {
  position: relative;
  width: 240px;
  height: 240px;
}


.circle-zero {
  background: #ffffff;
  border-radius: 50%;
  /* box-shadow: 0px 3px 7px .7px rgba(0, 0, 0, .5); */
  box-sizing: content-box;
  height: 78px;
  width: 78px;
  position: absolute;
  top: 35%;
  left: 35%;
}

.circle-one {
  border: 15px solid;
  border-color: rgb(171 202 31 / 45%) #abca1f transparent transparent;
  border-radius: 50%;
  box-sizing: content-box;
  height: 98px;
  width: 98px;
  position: absolute;
  top: 25%;
  left: 25%;
  z-index: 1;
  -webkit-animation: circle-move 10s ease infinite;
  animation: circle-move 10s ease infinite;
}

.circle-two {
  background: rgba(0,0,0,.017);
  border: 25px solid;
  border-color: #abca1f80 transparent transparent;
  border-radius: 50%;
  box-sizing: content-box;
  height: 90px;
  width: 90px;
  position: absolute;
  top: 22%;
  left: 22%;
  z-index: 1;
  -webkit-animation: circle-move 14s ease infinite;
  animation: circle-move 14s ease infinite;
}

.circle-three {
  background: rgba(0,0,0,.012);
  border: 2px solid;
  border-color: #abca1f #abca1f;
  border-radius: 50%;
  box-sizing: content-box;
  height: 168px;
  width: 168px;
  position: absolute;
  z-index: 0;
  top: 15%;
  left: 15%;
  -webkit-animation: circle-move 15s ease infinite;
  animation: circle-move 15s ease infinite;
}


.circle-four {
  background: rgba(0,0,0,.012);
  border: 10px solid;
  border-color: #abca1f #abca1f;
  border-radius: 50%;
  box-sizing: content-box;
  height: 220px;
  width: 220px;
  position: absolute;
  z-index: 0;
  top: 1%;
  left: 1%;
  -webkit-animation: circle-spin 10s ease infinite;
  animation: circle-spin 10s ease infinite;
}

.circle-five {
  background: rgba(0,0,0,.012);
  border: 4px dotted;
  border-color: #abca1f #abca1f;
  border-radius: 50%;
  box-sizing: content-box;
  height: 203px;
  width: 203px;
  position: absolute;
  z-index: 0;
  top: 7%;
  left: 7%;
  -webkit-animation: circle-spin 15s linear infinite;
  animation: circle-spin 15s linear infinite;
}

.circle-six {
  background: rgba(0,0,0,0);
  border: 1px none;
  border-radius: 50%;
  box-sizing: content-box;
  height: 249px;
  width: 249px;
  position: absolute;
  z-index: 0;
  top: -1%;
  left: -1%;
}

@-webkit-keyframes circle-move {
  0% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes circle-move {
  0% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes circle-spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes circle-spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes flicker {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flicker {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}