.circles {
  width: 6vmin;
  height: 6vmin;
  position: relative;
  -webkit-perspective: 50000px;
          perspective: 50000px;
  animation-name: noussair_animation_1;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@-webkit-keyframes noussair_animation_1 {
  from {
    color:white;
  }
  to {
    color:white;
  }
}
.circles span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  width: 18.4%;
  height: 18.4%;
  border-radius: 100%;
  background: currentColor;
}
.circles div {
  position: absolute;
  width: 100%;
  height: 100%;
  border-left: 0.4vmin solid;
  border-top: 0.4vmin solid transparent;
  border-radius: 100%;
}
.circles div:nth-child(1) {
  -webkit-animation: anim-1 3s linear infinite;
          animation: anim-1 3s linear infinite;
}
.circles div:nth-child(2) {
  -webkit-animation: anim-2 3s linear infinite;
          animation: anim-2 3s linear infinite;
}
.circles div:nth-child(3) {
  -webkit-animation: anim-3 3s linear infinite;
          animation: anim-3 3s linear infinite;
}

@-webkit-keyframes anim-1 {
  from {
    -webkit-transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
            transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
            transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
  }
}

@keyframes anim-1 {
  from {
    -webkit-transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
            transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
            transform: rotateZ(120deg) rotateX(66deg) rotateZ(360deg);
  }
}
@-webkit-keyframes anim-2 {
  from {
    -webkit-transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
            transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
            transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
  }
}
@keyframes anim-2 {
  from {
    -webkit-transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
            transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
            transform: rotateZ(240deg) rotateX(66deg) rotateZ(360deg);
  }
}
@-webkit-keyframes anim-3 {
  from {
    -webkit-transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
            transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
            transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
  }
}
@keyframes anim-3 {
  from {
    -webkit-transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
            transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
            transform: rotateZ(360deg) rotateX(66deg) rotateZ(360deg);
  }
}

.nav-container {
    position: absolute;
    z-index: 100;
    width: 100%;
    color: white;
}

ul.menu-horizontal li a {
    color: #ffffff94 !important;
    text-transform: capitalize !important;
    font-size: medium !important;
}