.circle-item {
  width: 200px;
  height: 200px;
  z-index: 10;
  margin: 0 auto 20px;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
}

@media (min-width: 1280px) {
  .circle-item {
    width: 300px;
    height: 300px;
    z-index: 10;
    margin: 0 auto 20px;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
  }
}

.circle-item .mascara-image {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  align-items: center;
  display: flex;
  justify-content: center;
}

.circle-item::before,
.circle-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 6px solid rgba(255, 255, 255, 0);
  z-index: 10;
  top: 0;
  display: block;
  transform: scale(1);
  transition: border-color ease 0.1s, transform ease-in-out 0.2s;
}

.circle-item::before {
  border-left: 6px solid #ff8004;
  border-right: none;
  left: -4px;
  animation: rotateOutborder 0.4s forwards;
}

.circle-item::after {
  border-left: none;
  border-right: 6px solid #ff8004;
  right: -4px;
  animation: rotateOutborder 0.4s forwards;
}

.circle-item:hover::before,
.circle-item:hover::after {
  transform: scale(1.05);
  left: 0;
  right: 0;
  margin: auto;
  border-color: #ff8004;
  transition: border-color 0.5s ease-in-out 0.2s, transform 0.2s ease-in-out;
  animation: rotateborder 0.2s forwards;
  animation-delay: 0.2s;
}

@keyframes rotateborder {
  from {
    transform: rotate(0deg) scale(1.05);
  }
  to {
    transform: rotate(90deg) scale(1.05);
  }
}

@keyframes rotateOutborder {
  from {
    transform: rotate(90deg) scale(1.05);
  }
  40% {
    transform: rotate(0deg) scale(1.05);
  }
  80% {
    transform: rotate(0deg) scale(1.05);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
}

.circle-item img {
  height: 100%;
  position: relative;
  z-index: 1;
}